/* ─── Reset ──────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#ecebe7}
body{font-family:var(--font-sans);font-size:16px}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
#root{position:fixed;inset:0}

/* ─── Theme tokens — Atrio ───────────────────────────────── */
.crm-root{
  --font-sans:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-mono:ui-monospace,"SF Mono","Fira Code",monospace;
  --bg:#f7f9fa;--surface:#ffffff;--surface-2:#eff3f5;
  --border:#e1e6ea;--border-strong:#c8d0d6;
  --text:#0d1419;--text-2:#4d5b66;--text-3:#8593a0;
  --accent:#0e7a9a;--accent-2:#22b4c6;
  --accent-grad:linear-gradient(135deg,#0e7a9a 0%,#22b4c6 100%);
  --accent-soft:#def0f4;--accent-ink:#07435a;
  --danger:#b3361f;--danger-soft:#fbe9e5;
  --warning:#b56b00;--warning-soft:#fbf0d8;
  --info:#2a5dab;--info-soft:#e6edf9;
  --pos:#0e9f6e;--pos-soft:rgba(14,159,110,.11);
  --neg:#d8492f;--neg-soft:rgba(216,73,47,.10);
  --radius-s:5px;--radius-m:7px;--radius-l:10px;
  --radius:var(--radius-m);
  --shadow:0 1px 0 rgba(15,40,55,.02),0 2px 8px -4px rgba(15,40,55,.08);
  --shadow-hi:0 12px 36px -8px rgba(10,40,55,.22),0 0 0 1px rgba(15,40,55,.06);
  --t1:#0e7a9a;--t2:#3d93ab;--t3:#69aabd;--t4:#97c5d2;
}

/* ─── Layout shell ───────────────────────────────────────── */
.crm-root{position:absolute;inset:0;display:grid;grid-template-columns:232px 1fr;color:var(--text);background:var(--bg);overflow:hidden;font-family:var(--font-sans)}

/* ─── Sidebar ────────────────────────────────────────────── */
.crm-side{border-right:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;min-width:0;overflow:hidden}
.crm-brand{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;padding:18px 16px 14px}
.crm-brand-name{font-size:.5938rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
/* min-height:0 lets the nav shrink inside the flex column so its own scroll engages
   instead of the sidebar clipping silently */
.crm-nav{padding:6px 8px;display:flex;flex-direction:column;gap:.0625rem;overflow-y:auto;min-height:0}
.crm-nav-section{font-size:.6562rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);font-weight:600;padding:14px 10px 6px}
.crm-nav-item{display:flex;align-items:center;gap:.5625rem;padding:6px 10px;border-radius:var(--radius-s);font-size:.8125rem;font-weight:500;color:var(--text-2);border:0;background:transparent;text-align:left;width:100%;transition:background .12s,color .12s}
.crm-nav-item:hover{background:var(--surface-2);color:var(--text)}
.crm-nav-item[data-active="true"]{background:var(--surface-2);color:var(--text)}
.crm-nav-item .ic{color:var(--text-3);flex:0 0 auto;font-size:.875rem;width:16px;text-align:center}
.crm-nav-item[data-active="true"] .ic{color:var(--accent)}
.crm-nav-item .badge{margin-left:auto;font-size:.6875rem;color:var(--text-3);font-variant-numeric:tabular-nums}
.crm-accounts{margin-top:auto;padding:8px;border-top:1px solid var(--border)}

/* ─── Person context switcher ─────────────────────────────── */
.ctx-wrap{position:relative;margin:0 2px 6px}
.ctx-switch{display:flex;align-items:center;gap:.5rem;width:100%;padding:8px 10px;cursor:pointer;
  border:1px solid var(--border);border-radius:var(--radius-s);background:var(--surface-2);
  font-size:.8125rem;font-weight:600;color:var(--text);text-align:left;transition:border-color .12s}
.ctx-switch:hover{border-color:var(--border-strong)}
.ctx-switch .cx-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.ctx-switch .cx-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctx-switch .cx-role{font-size:.625rem;font-weight:500;color:var(--text-3);flex:0 0 auto}
.ctx-switch .cx-caret{color:var(--text-3);font-size:.625rem;flex:0 0 auto}
.ctx-switch[data-solo="true"]{cursor:default;background:transparent;border-color:transparent;padding-left:2px}
.ctx-switch[data-solo="true"] .cx-caret{display:none}
.ctx-panel{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:40;padding:4px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-s);box-shadow:var(--shadow-hi)}
.ctx-panel[hidden]{display:none}
.ctx-opt{display:flex;align-items:center;gap:.5rem;width:100%;padding:7px 9px;border:0;background:transparent;
  border-radius:var(--radius-s);font-size:.8125rem;color:var(--text-2);text-align:left;cursor:pointer;transition:background .12s}
.ctx-opt:hover{background:var(--surface-2);color:var(--text)}
.ctx-opt[data-on="true"]{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.ctx-opt .cx-role{font-size:.625rem;color:var(--text-3)}
.ctx-opt .cx-n{margin-left:auto;font-size:.6875rem;color:var(--text-3);font-variant-numeric:tabular-nums}
.crm-acct{display:flex;align-items:center;gap:.5625rem;padding:7px 8px;border-radius:var(--radius-s);cursor:pointer;transition:background .12s}
.crm-acct:hover{background:var(--surface-2)}
.crm-acct-avatar{width:22px;height:22px;border-radius:50%;background:var(--accent-grad);color:white;font-size:.6875rem;font-weight:600;display:grid;place-items:center;flex:0 0 auto}
.crm-acct-meta{min-width:0;flex:1}
.crm-acct-handle{font-size:.75rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-acct-status{font-size:.6562rem;color:var(--text-3);display:flex;align-items:center;gap:.25rem;margin-top:1px}
.crm-acct-status::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* ─── Main area ──────────────────────────────────────────── */
.crm-main{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.crm-topbar{display:flex;align-items:center;gap:.75rem;padding:14px 20px;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0}
.crm-page-title{font-size:.9375rem;font-weight:600;letter-spacing:-.01em}
/* Room to breathe next to the CTA: it was cramped against the button */
.crm-search{margin-left:auto;margin-right:.5rem;position:relative;display:flex;align-items:center;flex:0 1 320px;min-width:180px}
.crm-search input{width:100%;background:var(--surface-2);border:1px solid transparent;border-radius:var(--radius-s);padding:9px 12px 9px 34px;font-size:.7812rem;color:var(--text);outline:none;transition:border-color .12s,background .12s}
.crm-search input:focus{border-color:var(--accent);background:var(--surface)}
.crm-search .ic-s{position:absolute;left:11px;color:var(--text-3);pointer-events:none;font-size:.875rem}
.crm-btn{display:inline-flex;align-items:center;gap:.375rem;font-size:.7812rem;font-weight:500;padding:7px 11px;border-radius:var(--radius-s);border:1px solid var(--border);background:var(--surface);color:var(--text);white-space:nowrap;transition:background .12s,border-color .12s}
.crm-btn:hover{background:var(--surface-2);border-color:var(--border-strong)}
.crm-btn[data-variant="primary"]{background:var(--accent);color:#fff;border-color:var(--accent)}
.crm-btn[data-variant="primary"]:hover{filter:brightness(1.07)}
.crm-btn[data-variant="ghost"]{border-color:transparent;background:transparent}
.crm-btn[data-variant="ghost"]:hover{background:var(--surface-2);border-color:var(--border)}
.crm-content{flex:1;min-height:0;overflow:hidden;background:var(--bg);position:relative}

/* ─── Views ──────────────────────────────────────────────── */
.view{display:none;height:100%;overflow:auto}
.view.active{display:flex;flex-direction:column}

/* ─── Kanban toolbar ─────────────────────────────────────── */
.kan-toolbar{display:flex;flex-direction:column;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0}
.kan-toolbar-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:8px 20px}
.kan-toolbar-row:first-child{border-bottom:1px solid var(--border)}
.kan-toolbar .spacer{flex:1}
/* Los chips de fuente se escriben dentro de <span id="src-chips-dynamic">, que es UN solo
   flex item: el gap de .kan-toolbar-row separaba el span de sus hermanos, nunca los
   botones de dentro, y el .join('') tampoco deja espacio. Salían pegados. Con
   display:contents el span desaparece de la maquetación y los botones pasan a ser flex
   items reales de la fila: cobran el gap y envuelven de uno en uno. */
#src-chips-dynamic{display:contents}
.chip{--cc:var(--accent);display:inline-flex;align-items:center;gap:.3125rem;font-size:.7188rem;font-weight:500;padding:4px 10px;border-radius:999px;background:var(--surface-2);color:var(--text-2);border:1px solid transparent;cursor:pointer;transition:all .12s}
.chip:hover{background:var(--surface);border-color:var(--border)}
.chip.on{background:color-mix(in srgb,var(--cc) 12%,transparent);color:color-mix(in srgb,var(--cc) 80%,#000);border-color:color-mix(in srgb,var(--cc) 30%,transparent)}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--cc)}

/* ─── Pipeline con "Todos": resumen del negocio ───────────── */
/* Un carril por persona. No es el tablero de nadie: es el mapa desde el que se entra a
   uno. Sale de la rejilla de columnas del kanban, que aquí no aplica. */
/* Scrollea el propio contenedor y no .kan-scroll (que es overflow-y:hidden, para el
   tablero). Así no hace falta :has() para retocar al padre desde el hijo. */
.kanban[data-modo="negocio"]{display:block;width:auto;height:100%;padding:18px clamp(12px,3vw,22px) 48px;overflow-y:auto;overflow-x:hidden}
/* auto-FIT y no auto-fill: auto-fill deja ocupando sitio las pistas que sobran, así que
   con dos personas en una pantalla ancha las tarjetas se quedaban estrechas y media
   pantalla en blanco. auto-fit colapsa las pistas vacías y reparte el ancho entre las
   tarjetas que hay, de una en pantallas angostas a cuantas quepan según entre gente.
   Es el único mecanismo responsive del proyecto: aquí no hay una sola media query.
   align-items:start, o las tarjetas se estiran a la altura de la más alta y quien tenga
   menos etapas queda con un hueco blanco debajo. */
.rn-wrap{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));align-items:start}
.rn-vacio{padding:48px;text-align:center;color:var(--text-3);font-size:.875rem}
/* Misma gramática que las demás tarjetas del CRM (.int-card, .cc-card, .trg-kpi):
   padding 18/20, radio m, sombra, y elevación al pasar por encima. */
.rn-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s,border-color .15s}
.rn-card:hover{box-shadow:var(--shadow-hi);border-color:var(--border-strong)}
/* border:0 explícito en los dos botones: el reset global solo fija font-family y cursor,
   así que sin esto sale el borde por defecto del navegador y cada fila parece una cajita.
   El resto de botones del CRM no lo destapaban porque todos declaran su propio borde. */
.rn-head{display:flex;align-items:center;gap:.625rem;width:100%;padding:16px 20px;border:0;border-bottom:1px solid var(--border);background:none;text-align:left;transition:background .12s}
.rn-head:hover{background:var(--surface-2)}
.rn-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
/* .875rem/600, el mismo titular que .int-card .i-name */
.rn-name{font-size:.875rem;font-weight:600;color:var(--text)}
/* Versalitas, como .i-cat-tag: es una etiqueta de categoría, no texto corrido */
.rn-role{font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
.rn-go{margin-left:auto;font-size:.75rem;color:var(--text-3);white-space:nowrap;transition:color .12s}
.rn-head:hover .rn-go{color:var(--accent)}
/* Un solo gráfico, en el orden del tablero. align-items:flex-end apoya todas las barras
   en la misma base — es lo que hace que se lea como un gráfico y no como piezas sueltas.
   Las columnas son flex:1 y el gráfico no lleva ancho tope, así que reparten todo el
   contenedor: se adapta solo a la pantalla y al número de etapas de cada quien.
   El hueco entre barras NO sale de un gap: sale de que la barra va centrada y más
   estrecha que su columna. Así los huecos son todos iguales por construcción, y se
   ensanchan o estrechan solos con la pantalla en vez de quedarse en un valor fijo. */
.rn-chart{display:flex;align-items:flex-end;gap:0;padding:20px 20px 16px}
.rn-col{display:flex;flex-direction:column;align-items:center;flex:1;min-width:0;border:0;background:none;padding:0}
.rn-col[data-cero="true"]{opacity:.45}
.rn-n{font-size:.8125rem;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;margin-bottom:6px;transition:color .12s}
.rn-col:hover .rn-n{color:var(--accent)}
.rn-col:hover .rn-wl{color:var(--text)}
/* La barra compara dentro de la persona: su etapa mayor llena el 100%. Entre personas no
   se comparan alturas — dos volúmenes distintos no se miden por píxeles. */
/* Alto proporcional al ancho disponible: al repartirse todo el contenedor, en una
   pantalla grande las barras se ensanchan, y con alto fijo quedarían achatadas. */
.rn-track{position:relative;height:clamp(120px,8vw,168px);width:100%;display:flex;align-items:flex-end;justify-content:center}
/* Con gap:0 las columnas se tocan, así que los tramos de eje encajan y la línea base sale
   continua de punta a punta sin tener que estirarla por los lados. */
.rn-track::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--border-strong)}
/* La barra no llena su columna: va centrada y con ancho propio. Llenarla era lo que la
   volvía tan gruesa como alta —cuadrados de 172px— y dejaba los huecos en 10px fijos.
   width:100% con tope para que en un tablero de muchas etapas se encoja hasta caber. */
.rn-track i{width:100%;max-width:clamp(38px,3.6vw,60px);border-radius:4px 4px 0 0}
/* Lo cerrado, más tenue. Es el "algo pequeño" que lo identifica sin sacarlo de su sitio
   en el pipeline ni cambiarle la tipografía. */
.rn-col[data-cerrada="true"] .rn-track i{opacity:.55}
/* Altura fija de dos líneas: si una etiqueta ocupa dos y otra una, las bases de las
   barras dejan de alinearse y el gráfico se descuadra. */
.rn-wl{font-size:.6875rem;color:var(--text-3);margin-top:9px;text-align:center;line-height:1.25;height:2.5em;width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word;transition:color .12s}
.rn-sin{padding:8px 20px 16px;font-size:.8125rem;color:var(--text-3)}
.rn-alertas{display:flex;flex-direction:column;gap:5px;padding:14px 20px 16px;border-top:1px solid var(--border);background:var(--surface-2)}
/* --warning, no un naranja escrito a mano: si el tema cambia, esto cambia con él */
.rn-al{font-size:.75rem;color:var(--text-3);line-height:1.45}
.rn-al[data-t="mal"]{color:var(--warning);font-weight:500}
/* La columna a la que acabas de saltar desde el resumen: sin esto aterrizas en un tablero
   de seis columnas iguales sin saber cuál pulsaste. */
.kan-col-foco{outline:2px solid var(--accent);outline-offset:-1px}
.call-duenio{display:flex;align-items:center;gap:5px;justify-content:flex-end;font-size:.75rem;color:var(--text-3)}
.call-duenio .rn-dot{width:6px;height:6px}

/* ─── Kanban board ───────────────────────────────────────── */
.kan-scroll{flex:1;overflow-x:auto;overflow-y:hidden;min-height:0}
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:272px;gap:.75rem;padding:16px 20px 24px;width:max-content;min-width:100%;align-items:start;height:100%;position:relative}
.kan-col{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);display:flex;flex-direction:column;height:calc(100% - 4px);box-shadow:var(--shadow);overflow:hidden;position:relative;user-select:none}
.kan-col::after{content:'';position:absolute;bottom:0;left:0;right:0;height:44px;background:linear-gradient(to bottom,transparent,rgba(0,0,0,.07));border-radius:0 0 var(--radius-m) var(--radius-m);pointer-events:none;z-index:2}
.kan-col-head{display:flex;align-items:center;gap:.5rem;padding:10px 8px 10px 12px;border-bottom:1px solid var(--border);font-size:.75rem;font-weight:600;flex-shrink:0}
/* La columna mide 272px fijos y renombrar etapas es una acción a mano del dueño: sin esto
   un nombre largo envuelve a dos líneas y solo esa cabecera crece, descuadrando la fila. */
.stage-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Always visible: an invisible 10px handle is not something anyone can aim at */
.stg-grip{color:var(--text-3);font-size:.875rem;flex-shrink:0;padding:0 2px;line-height:1;opacity:.3;transition:opacity .12s}
.kan-col-head:hover .stg-grip{opacity:.85}
/* The whole header is the handle, so the target is ~250px wide instead of ~10px */
.kan-col-head[draggable="true"]{cursor:grab}
.kan-col-head[draggable="true"]:active{cursor:grabbing}
.kan-col-head .s-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.kan-col-head .cnt{font-size:.6875rem;color:var(--text-3);font-weight:500;background:var(--surface-2);border:1px solid var(--border);border-radius:3px;padding:1px 6px;margin-left:auto;font-variant-numeric:tabular-nums}
.kan-col-body{padding:8px;display:flex;flex-direction:column;gap:.5rem;overflow-y:auto;flex:1;min-height:0;scrollbar-width:thin;scrollbar-color:transparent transparent}
.kan-col-body:hover{scrollbar-color:rgba(148,163,184,.55) transparent}
.kan-col-body::-webkit-scrollbar{width:2px}
.kan-col-body::-webkit-scrollbar-track{background:transparent}
.kan-col-body::-webkit-scrollbar-thumb{background:transparent;border-radius:99px}
.kan-col-body:hover::-webkit-scrollbar-thumb{background:rgba(148,163,184,.55)}
.kan-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-s);padding:10px 11px;cursor:pointer;transition:box-shadow .14s,border-color .12s}
.kan-card:hover{border-color:var(--accent);box-shadow:0 2px 10px -3px rgba(14,122,154,.18)}
.kan-card .c-top{display:flex;align-items:center;gap:.4375rem;margin-bottom:6px}
.kan-card .c-av{width:22px;height:22px;border-radius:50%;color:#fff;font-size:.5938rem;font-weight:700;display:grid;place-items:center;flex:0 0 auto}
/* capitalize is display-only — Calendly sometimes sends all-lowercase names */
.kan-card .c-name{font-size:.8125rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1;text-transform:capitalize}
/* Same contact, several bookings — so nobody treats a repeat caller as a cold lead */
.kan-card .c-repeat{font-size:.5938rem;font-weight:700;color:var(--warning);background:var(--warning-soft);
  border-radius:999px;padding:1px 5px;flex:0 0 auto;cursor:help;font-variant-numeric:tabular-nums}
.kan-card .c-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;border:1.5px solid var(--surface)}
.kan-card .c-evt{font-size:.7188rem;color:var(--text-2);margin-bottom:6px;font-weight:500}
/* Darker text on a lighter field: it already passed AA at 6.26, but this is read all
   day at 11.5px and the extra contrast costs nothing */
.kan-card .c-msg{font-size:.7188rem;color:var(--text);padding:6px 8px;background:color-mix(in srgb,var(--surface-2) 55%,var(--surface));border-radius:var(--radius-s);border-left:2px solid var(--border-strong);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:7px}
/* wraps now: the row carries source, age, owner and date, and clipping the age chip
   would hide the one signal saying the card needs attention */
.kan-card .c-meta{display:flex;align-items:center;gap:.375rem;row-gap:.25rem;font-size:.6562rem;color:var(--text-3);flex-wrap:wrap}
/* No margin-left:auto — pushing the date to the far right left an odd gap once the
   row started wrapping. It now flows with the other chips. */
.kan-card .c-meta .time{font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}
/* The assignee is a person, the source is a channel — they used to look identical.
   The source keeps its colour; the owner goes neutral with a person glyph. */
.kan-card .c-closer{display:inline-flex;align-items:center;gap:.25rem;font-size:.625rem;background:transparent;
  border:1px solid var(--border);border-radius:var(--radius-s);padding:1px 6px 1px 2px;font-weight:500;color:var(--text-2);
  white-space:nowrap;flex-shrink:0}
.kan-card .c-closer .cc-av{width:13px;height:13px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-size:.5rem;font-weight:700;flex:0 0 auto}
.kan-card .c-closer.is-none{color:var(--text-3);font-style:italic;border-style:dashed}
/* Time signals: red only where the call was due and the card never moved */
.kan-card .c-age{font-size:.5938rem;font-weight:700;border-radius:999px;padding:1px 6px;flex-shrink:0;cursor:help;white-space:nowrap}
.kan-card .c-age.due{color:var(--neg);background:var(--neg-soft)}
.kan-card .c-age.stale{color:var(--text-3);background:var(--surface-2)}
/* Contact booking history inside the drawer */
.ch-list{display:flex;flex-direction:column;gap:.25rem}
.ch-row{display:flex;align-items:center;gap:.5rem;width:100%;padding:7px 9px;text-align:left;cursor:pointer;
  border:1px solid var(--border);border-radius:var(--radius-s);background:var(--surface);
  font-size:.75rem;color:var(--text-2);transition:border-color .12s,background .12s}
.ch-row:hover:not(:disabled){border-color:var(--accent);background:var(--surface-2)}
.ch-row.is-cur{background:var(--surface-2);cursor:default}
.ch-row .ch-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.ch-row .ch-stage{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;color:var(--text)}
.ch-row .ch-when{font-variant-numeric:tabular-nums;color:var(--text-3);flex:0 0 auto}
.ch-row .ch-who{font-size:.6875rem;color:var(--text-3);flex:0 0 auto}
.ch-row .ch-tag{font-size:.5938rem;font-weight:700;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:1px 6px;flex:0 0 auto}
/* A booking the contact replaced. Still readable — it explains the show rate — but it
   must never look like the appointment that stands. */
.ch-row.is-past .ch-stage{color:var(--text-3);font-weight:400}
.ch-row.is-past .ch-dot{opacity:.4}
/* Opened from the history: this row has no card of its own, so say so before anything
   on screen is mistaken for the live booking. */
/* .drw-pane no tiene padding: lo pone cada bloque. Sin el margen lateral este aviso salía
   a sangre, tocando los dos bordes del drawer. Mismo recuadro que .note-add. */
.past-note{display:flex;align-items:center;gap:.5rem;margin:16px 20px 14px;padding:9px 11px;border-radius:var(--radius-s);
  background:var(--surface-2);border:1px solid var(--border);font-size:.75rem;color:var(--text-2);line-height:1.4}
.past-note b{color:var(--text);font-weight:600}
.past-note button{border:0;background:0;color:var(--accent);font-weight:600;cursor:pointer;font-size:.75rem;padding:0;margin-left:auto;flex:0 0 auto;white-space:nowrap}
.past-note button:hover{text-decoration:underline}
.sale-badge{display:flex;align-items:center;gap:.375rem;margin-bottom:7px;padding:5px 8px;background:color-mix(in srgb,#059669 10%,transparent);border:1px solid color-mix(in srgb,#059669 28%,transparent);border-radius:var(--radius-s);font-size:.6562rem}
.sale-badge .sb-prog{font-weight:600;color:var(--text);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sale-badge .sb-amt{font-weight:700;color:#047857;font-variant-numeric:tabular-nums}
.src-badge{display:inline-flex;align-items:center;gap:.3125rem;font-size:.6562rem;font-weight:600;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--sc) 12%,transparent);color:color-mix(in srgb,var(--sc) 72%,#000);white-space:nowrap;flex-shrink:0}
.src-badge .d{width:6px;height:6px;border-radius:50%;background:var(--sc)}
.kan-empty{color:var(--text-3);font-size:.7812rem;text-align:center;padding:24px 16px}
/* Stage rename */
.stage-rename-btn{opacity:0;border:0;background:0;color:var(--text-3);cursor:pointer;font-size:.7rem;padding:2px 5px;border-radius:3px;transition:opacity .12s;flex-shrink:0;line-height:1}
.kan-col-head:hover .stage-rename-btn{opacity:1}
.stage-rename-btn:hover{background:var(--surface-2);color:var(--text)}
.stage-del-btn{opacity:0;border:0;background:0;color:var(--text-3);cursor:pointer;font-size:.7rem;padding:2px 5px;border-radius:3px;transition:opacity .12s;flex-shrink:0;line-height:1}
/* Marks a column the analytics depends on, so the missing 🗑 reads as deliberate */
.sys-badge{font-size:.625rem;color:var(--text-3);opacity:.45;flex-shrink:0;cursor:help}
.kan-col-head:hover .sys-badge{opacity:.8}
.kan-col-head:hover .stage-del-btn{opacity:1}
.stage-del-btn:hover{background:var(--neg-soft);color:var(--neg)}
.stage-rename-input{flex:1;min-width:0;border:1px solid var(--accent);border-radius:3px;padding:2px 6px;font-size:.75rem;font-weight:600;background:var(--surface-2);color:var(--text);outline:none}
/* Drag-and-drop */
/* Out of flow, not merely faded: left in the grid it kept its 272px cell while the
   ghost added another, so the board grew by a column and everything slid sideways
   the instant the drag began. Now the ghost occupies exactly the vacated slot. */
.kan-col.is-dragging{position:absolute;top:0;left:0;width:272px;opacity:0;pointer-events:none}
.kan-col.drag-over{outline:2px solid var(--accent);outline-offset:-2px}
/* Stage ghost column */
@keyframes ghostAppear{from{opacity:0;transform:scaleX(.92)}to{opacity:1;transform:scaleX(1)}}
.kan-ghost-col{
  /* .kanban lleva align-items:start, así que no estira a sus hijos. Sus dos hermanos lo
     compensan: .kan-col con height:calc(100% - 4px) y .kan-add-col con align-self:stretch.
     El fantasma era el único sin compensar: salía como una franja de 6px arriba en vez del
     contorno de la columna donde va a caer. */
  height:calc(100% - 4px);
  border:3px solid var(--accent);border-radius:var(--radius-m);
  background:var(--accent-soft);
  box-shadow:0 0 0 6px rgba(14,122,154,.12),inset 0 0 20px rgba(14,122,154,.06);
  animation:ghostAppear .18s cubic-bezier(.4,0,.2,1) forwards;
}
/* Lead drag */
.kan-card[draggable]{cursor:grab;transition:opacity .15s,transform .12s}
.kan-card[draggable]:active{cursor:grabbing}
.kan-card.lead-dragging{opacity:.2;transform:scale(.97);pointer-events:none}
/* Lead drop indicator */
.lead-drop-indicator{
  height:4px;background:var(--accent);border-radius:99px;flex-shrink:0;margin:2px 0;
  position:relative;pointer-events:none;
  box-shadow:0 0 8px rgba(14,122,154,.45);
}
.lead-drop-indicator::before{
  content:'';position:absolute;left:-1px;top:50%;transform:translateY(-50%);
  width:12px;height:12px;background:var(--accent);border-radius:50%;
  box-shadow:0 0 8px rgba(14,122,154,.5);
}
/* View Transitions — smooth element movement on drop */
@media(prefers-reduced-motion:no-preference){
  ::view-transition-group(*){animation-duration:.28s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
/* Add-stage inline */
.kan-add-col{width:220px;min-width:220px;border:1.5px dashed var(--border-strong);border-radius:var(--radius-m);background:transparent;display:flex;flex-direction:column;min-height:180px;transition:border-color .12s,background .12s;align-self:stretch;overflow:hidden;cursor:pointer}
.kan-add-col:not(.open):hover{background:var(--accent-soft);border-color:var(--accent)}
.kan-add-col .ka-idle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.375rem;height:100%;padding:20px;color:var(--text-3);font-size:.8125rem;font-weight:500;transition:color .12s}
.kan-add-col:not(.open):hover .ka-idle{color:var(--accent-ink)}
.ka-idle-icon{font-size:1.5rem;line-height:1}
.ka-idle-hint{font-size:.6875rem;color:var(--text-3)}
.kan-add-col .ka-form{display:none;flex-direction:column;gap:.5rem;padding:14px}
.kan-add-col.open{border-style:solid;border-color:var(--accent);background:var(--surface);cursor:default}
.kan-add-col.open .ka-idle{display:none}
.kan-add-col.open .ka-form{display:flex}
.ka-form-lbl{font-size:.75rem;font-weight:600;color:var(--text-2)}
.ka-form-input{border:1px solid var(--border);border-radius:var(--radius-s);padding:8px 10px;font-size:.8125rem;background:var(--surface-2);color:var(--text);outline:none;width:100%;box-sizing:border-box}
.ka-form-input:focus{border-color:var(--accent)}
.ka-form-row{display:flex;gap:.375rem;margin-top:2px}

/* ─── Analytics ──────────────────────────────────────────── */
.an-wrap{max-width:1240px;margin:0 auto;padding:18px clamp(12px,3vw,22px) 48px}
.an-top{display:flex;align-items:center;gap:.625rem;margin-bottom:16px;flex-wrap:wrap}
.an-top h1{font-size:1.0625rem;font-weight:650;letter-spacing:-.01em}
.an-controls{margin-left:auto;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-s);overflow:hidden}
.seg button{border:0;background:transparent;font-size:.75rem;font-weight:500;color:var(--text-2);padding:5px 11px;border-right:1px solid var(--border)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--accent);color:#fff}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(14px,1vw,22px);box-shadow:var(--shadow);display:flex;flex-direction:column;transition:box-shadow .16s,border-color .16s}
.card:hover{box-shadow:var(--shadow-hi);border-color:var(--border-strong)}
.card h3{font-size:.7812rem;font-weight:600;display:flex;align-items:center;gap:.4375rem;margin-bottom:14px}
.card h3 small{font-weight:500;color:var(--text-3);font-size:.6875rem}
/* Nació dentro de .grid (12 columnas con su gap), donde el -4px de abajo lo absorbía ese
   gap y solo servía para acercar el rótulo a su sección. Hoy .grid no lo usa nadie y este
   rótulo vive en el flujo normal de .an-wrap, donde no hay gap que lo compense: el margen
   negativo subía la tarjeta de debajo hasta cruzarle el texto por encima. */
.sec-label{display:flex;align-items:center;gap:.625rem;margin:26px 0 10px;font-size:.6875rem;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}
.sec-label::after{content:"";flex:1;height:1px;background:var(--border)}
.sec-label .tag{background:var(--accent-soft);color:var(--accent-ink);border-radius:4px;padding:1px 7px;font-size:.5938rem;letter-spacing:.03em}
.wbars{display:flex;align-items:flex-end;justify-content:space-between;gap:.4rem;flex:1;min-height:140px}
.wcol{display:flex;flex-direction:column;align-items:center;flex:1;min-width:0}
.wcol .wn{font-size:.6875rem;font-weight:700;color:var(--text-2);margin-bottom:5px;font-variant-numeric:tabular-nums}
.wcol.cur .wn{color:var(--accent)}
.wtrack{height:120px;width:100%;max-width:38px;display:flex;align-items:flex-end}
.wbar{width:100%;background:var(--surface-2);border-radius:5px 5px 4px 4px;display:flex;align-items:flex-end;overflow:hidden}
.wbar-s{width:100%;background:var(--accent);opacity:.45;border-radius:0 0 4px 4px}
.wcol.cur .wbar{background:var(--accent-soft)}
.wcol.cur .wbar-s{opacity:1}
/* width:100% ciñe la etiqueta a su columna: sin él, con nowrap, las 12 fechas invadían
   la columna vecina por debajo de ~790px de ventana hasta volverse ilegibles. */
.wl{font-size:.625rem;color:var(--text-3);margin-top:7px;white-space:nowrap;width:100%;text-align:center;overflow:hidden;text-overflow:ellipsis}
.wcol.cur .wl{color:var(--accent);font-weight:650}
.funnel{display:flex;flex-direction:column;gap:.625rem;flex:1;justify-content:center}
.srcbars{display:flex;flex-direction:column;gap:.75rem;flex:1;justify-content:center}
.srow{display:grid;grid-template-columns:minmax(80px,110px) 1fr auto;align-items:center;gap:.75rem}
/* min-width:0 para que la celda pueda encogerse por debajo de su contenido: sin él un
   utm_source largo se sale de su columna y se pinta por encima de la barra de color. */
.srow .sn{font-size:.75rem;color:var(--text-2);display:flex;align-items:center;gap:.4375rem;font-weight:500;min-width:0;overflow:hidden}
/* La elipsis no funciona sobre .sn porque es flex: va en el span del texto. Ese texto es,
   para una fuente desconocida, el utm_source tal cual — lo escribe quien rellena el
   formulario público, así que además pasa por esc() en analytics.js. */
.srow .sn-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow .ads{font-size:.5625rem;font-weight:600;color:var(--text-3);border:1px solid var(--border-strong);border-radius:4px;padding:0 4px;text-transform:uppercase}
.strack{height:9px;background:var(--surface-2);border-radius:20px;overflow:hidden}
.sfill{height:100%;border-radius:20px;background:var(--accent)}
.srow .sv{font-size:.7188rem;font-weight:650;color:var(--text);text-align:right;white-space:nowrap}
.srow .sv small{color:var(--text-3);font-weight:500;font-size:.6562rem}
.who{display:flex;align-items:center;gap:.5rem}
.av-sm{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.625rem;font-weight:700;color:#fff;flex-shrink:0}
.chip.good{background:var(--pos-soft);color:var(--pos)}
.chip.bad{background:var(--neg-soft);color:var(--neg)}
/* SpendCalendar */
/* Único usuario vivo de .card, que viene de la rejilla vieja: su padding en clamp() y su
   h3 más pequeño desalineaban este panel respecto a los cuatro de arriba. Se le dan los
   valores de la vista, y se le quita la elevación al pasar por encima: no es pulsable. */
.spend-card{background:var(--surface-2)!important;border-style:dashed!important;padding:18px 22px}
.spend-card h3{font-size:.875rem}
.spend-card:hover{box-shadow:var(--shadow);border-color:var(--border)}
.spc-panels{display:flex;gap:0}
.spc-cal{flex:0 0 248px}
.spc-form{flex:1;min-width:0;margin-left:1.25rem;padding-left:1.25rem;border-left:1px solid var(--border);display:flex;flex-direction:column;gap:.75rem}
.spc-sel-label{font-size:.75rem;font-weight:650;color:var(--text-2)}
.se-field{display:flex;flex-direction:column;gap:.4rem}
.se-label{font-size:.75rem;font-weight:600;color:var(--text-2)}
.se-input{display:flex;align-items:center;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-s);padding:0 12px;height:44px}
.se-input:focus-within{border-color:var(--accent)}
.se-cur{color:var(--text-3);font-size:.9375rem}
.se-input input{border:0;background:none;font-size:1rem;font-weight:600;color:var(--text);width:100%;padding-left:6px;outline:none}
.spc-total{display:flex;justify-content:space-between;align-items:baseline;padding:.5rem 0;border-top:1px solid var(--border)}
.spc-total span{font-size:.6875rem;color:var(--text-3)}
.spc-total strong{font-size:1.125rem;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.spc-actions{margin-top:auto;display:flex;gap:.5rem;justify-content:flex-end;align-items:center}
.dp-head{display:flex;align-items:center;justify-content:space-between;gap:.375rem;margin-bottom:8px}
.dp-title{font-size:.8125rem;font-weight:600;color:var(--text);text-transform:capitalize;flex:1;text-align:center}
.dp-nav{width:26px;height:26px;display:grid;place-items:center;background:transparent;border:1px solid transparent;border-radius:var(--radius-s);color:var(--text-2);font-size:1rem;line-height:1}
.dp-nav:hover{background:var(--surface-2);border-color:var(--border)}
.dp-gh{display:grid;grid-template-columns:repeat(7,1fr);gap:.125rem;margin-bottom:2px}
.dp-gh span{text-align:center;font-size:.6562rem;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;padding:4px 0;display:block}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.125rem}
.dp-day{font-size:.75rem;height:30px;display:grid;place-items:center;background:transparent;border:1px solid transparent;border-radius:var(--radius-s);color:var(--text);position:relative}
.dp-day:hover{background:var(--surface-2)}
.dp-day[data-sel="true"]{background:var(--accent);color:#fff;font-weight:600}
.dp-day[data-dot="true"]::after{content:"";position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--accent)}
.dp-day[data-sel="true"]::after{background:#fff}
.dp-day[data-other="true"]{color:var(--text-3)}

/* ─── Calls view ─────────────────────────────────────────── */
.calls-wrap{padding:24px 28px;max-width:980px;margin:0 auto}
.calls-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}
.calls-title{font-size:1.25rem;font-weight:600;letter-spacing:-.01em}
.calls-sub{font-size:.7812rem;color:var(--text-3);margin-top:3px}
.calls-groups{display:flex;flex-direction:column;gap:1.375rem}
.calls-day-hd{display:flex;align-items:baseline;gap:.625rem;padding:4px 2px 6px;border-bottom:1px solid var(--border);margin-bottom:4px}
.calls-day-hd .dl{font-size:.8125rem;font-weight:600;color:var(--text);text-transform:capitalize}
.calls-day-hd .dc{font-size:.7188rem;color:var(--text-3)}
.call-card{display:grid;grid-template-columns:92px 36px 1fr auto;align-items:center;gap:.875rem;padding:13px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);cursor:pointer;transition:border-color .12s,box-shadow .12s;margin-bottom:.5rem}
.call-card:hover{border-color:var(--accent);box-shadow:0 2px 10px -3px rgba(14,122,154,.15)}
.call-time{display:flex;flex-direction:column;align-items:flex-start;border-right:1px solid var(--border);padding-right:14px;min-width:0}
/* nowrap + the small inline meridiem keep the time on a single line */
.call-time .t-h{font-size:1.125rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text);letter-spacing:-.01em;white-space:nowrap;display:flex;align-items:baseline;gap:3px}
.call-time .t-h .t-m{font-size:.625rem;font-weight:700;color:var(--text-3);letter-spacing:.03em}
.call-time .t-d{font-size:.6875rem;color:var(--text-3);margin-top:2px;white-space:nowrap}
.call-av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:.7812rem;color:#fff}
.call-meta .c-name{font-size:.8438rem;font-weight:600;color:var(--text);display:flex;align-items:center;gap:.375rem;flex-wrap:wrap}
.call-meta .c-name small{font-weight:400;color:var(--text-3);font-size:.7188rem}
.call-meta .c-biz{font-size:.7188rem;color:var(--text-2);margin-top:2px}
.call-side{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}
.st-pill{display:inline-flex;align-items:center;gap:.3125rem;font-size:.6562rem;font-weight:600;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--st) 14%,transparent);color:color-mix(in srgb,var(--st) 72%,#000)}
.st-pill .d{width:5px;height:5px;border-radius:50%;background:var(--st)}

/* ─── Usuarios ───────────────────────────────────────────── */
.users-wrap{padding:24px 28px;max-width:860px;margin:0 auto}
.users-wrap h1{font-size:1.25rem;font-weight:600;margin-bottom:4px}
.users-wrap .sub{font-size:.7812rem;color:var(--text-3);margin-bottom:20px}
.user-table{width:100%;border-collapse:collapse;font-size:.8125rem}
.user-table th{text-align:left;font-size:.6562rem;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:0 0 10px;border-bottom:1px solid var(--border)}
.user-table td{padding:12px 0;border-bottom:1px solid var(--surface-2);vertical-align:middle}
.user-table tr:last-child td{border-bottom:0}
.role-badge{display:inline-flex;font-size:.6562rem;font-weight:600;padding:2px 8px;border-radius:999px}
.role-badge.owner{background:var(--accent-soft);color:var(--accent-ink)}
.role-badge.closer{background:var(--surface-2);color:var(--text-2);border:1px solid var(--border)}
/* Faltaba: triage salía sin pastilla, como un dato a medio formatear. Usa los mismos
   tokens con los que ya se identifica al triage en .role-banner y en el conmutador. */
.role-badge.triage{background:var(--warning-soft);color:var(--warning)}

/* ─── Integraciones ──────────────────────────────────────── */
.int-wrap{padding:24px 28px;max-width:960px;margin:0 auto}
.int-wrap h1{font-size:1.25rem;font-weight:600;margin-bottom:4px}
.int-wrap .sub{font-size:.7812rem;color:var(--text-3);margin-bottom:16px}
.int-cat-bar{display:flex;align-items:center;gap:.375rem;margin-bottom:20px;flex-wrap:wrap}
.int-cat-btn{font-size:.75rem;font-weight:500;padding:5px 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);cursor:pointer;transition:all .12s}
.int-cat-btn:hover{background:var(--surface-2);color:var(--text)}
.int-cat-btn.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.int-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;margin-bottom:24px}
.int-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);padding:18px 20px;box-shadow:var(--shadow);transition:box-shadow .15s,border-color .15s}
.int-card:hover{box-shadow:var(--shadow-hi);border-color:var(--border-strong)}
.int-card .i-head{display:flex;align-items:center;gap:.75rem;margin-bottom:10px}
.int-card .i-ico{width:38px;height:38px;border-radius:var(--radius-s);display:grid;place-items:center;font-size:1.3rem;flex-shrink:0}
.int-card .i-name{font-size:.875rem;font-weight:600}
.int-card .i-cat-tag{font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin-top:1px}
.int-card .i-desc{font-size:.75rem;color:var(--text-2);line-height:1.45;margin-bottom:12px}
.int-card .i-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.int-status{display:inline-flex;align-items:center;gap:.3125rem;font-size:.6875rem;font-weight:600;padding:3px 9px;border-radius:999px;flex-shrink:0}
.int-status.ok{background:var(--pos-soft);color:var(--pos)}
.int-status.pending{background:var(--warning-soft);color:var(--warning)}
.int-status.inactive{background:var(--surface-2);color:var(--text-3);border:1px solid var(--border)}
.wiz-note{display:flex;align-items:flex-start;gap:.5rem;padding:10px 12px;border-radius:var(--radius-s);font-size:.75rem;line-height:1.4}
.wiz-note.info{background:var(--info-soft);color:var(--info)}
.wiz-note.ok{background:var(--pos-soft);color:var(--pos)}
.wiz-note.warn{background:var(--warning-soft);color:var(--warning)}
.wiz-note.danger{background:var(--neg-soft);color:var(--neg)}
/* N8N flow diagram */
.int-flow-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);padding:18px 22px;margin-bottom:24px;box-shadow:var(--shadow)}
.int-flow-box .fb-title{font-size:.8125rem;font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:.5rem}
.int-flow-box .fb-title span{font-size:.75rem;font-weight:500;color:var(--text-3)}
.int-flow{display:flex;align-items:center;gap:0;flex-wrap:wrap;gap:0}
.int-flow-node{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-s);padding:8px 14px;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:96px}
.int-flow-node .fn-ico{font-size:1.1rem}
.int-flow-node .fn-name{font-size:.6875rem;font-weight:600;color:var(--text)}
.int-flow-node .fn-sub{font-size:.625rem;color:var(--text-3)}
.int-flow-node.accent{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.int-flow-arr{padding:0 6px;color:var(--text-3);font-size:.9rem;flex-shrink:0;display:flex;align-items:center}

/* ─── Drawer ─────────────────────────────────────────────── */
.drw-back{position:absolute;inset:0;background:rgba(20,18,12,.22);z-index:20;display:none}
.drw-back.open{display:block}
.drawer{position:absolute;top:0;right:0;bottom:0;width:min(620px,70%);background:var(--surface);border-left:1px solid var(--border);box-shadow:var(--shadow-hi);z-index:21;display:none;flex-direction:column}
.drawer.open{display:flex}
.drw-head{display:flex;align-items:flex-start;gap:.75rem;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0}
.rv-av{border-radius:50%;color:#fff;font-weight:600;display:grid;place-items:center;flex:0 0 auto}
.rv-av.lg{width:44px;height:44px;font-size:1rem}
.drw-who{flex:1;min-width:0}
.drw-who h2{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;margin-bottom:2px}
.drw-who .handle{font-size:.7812rem;color:var(--text-3)}
.drw-actions{display:flex;gap:.375rem;align-items:center;flex-shrink:0}
.drw-close{width:30px;height:30px;display:grid;place-items:center;border:0;background:transparent;border-radius:var(--radius-s);color:var(--text-2);font-size:1rem}
.drw-close:hover{background:var(--surface-2)}
.drw-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 18px;padding:13px 20px;border-bottom:1px solid var(--border);flex-shrink:0}
.drw-meta .f-lbl{font-size:.6562rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);font-weight:600;margin-bottom:4px}
.drw-meta .f-val{font-size:.7812rem;font-weight:500;color:var(--text);display:flex;align-items:center;gap:.3125rem}
.drw-assign{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 14px;padding:13px 20px;border-bottom:1px solid var(--border);background:var(--surface-2);flex-shrink:0}
.drw-assign .f-lbl{font-size:.6562rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);font-weight:600;margin-bottom:4px}
.drw-assign .mini-sel{width:100%}
/* display:grid outranks the hidden attribute, so it needs saying explicitly */
.drw-assign[hidden]{display:none}
.drw-assign-confirm{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--radius-s);padding:9px 12px;font-size:.75rem;color:var(--accent-ink)}
.drw-assign-confirm[hidden]{display:none}
.dac-actions{display:flex;gap:.375rem;flex-shrink:0}

/* Multi-select + bulk actions */
.kc-sel{position:absolute;top:7px;right:8px;z-index:3;opacity:0;transition:opacity .12s}
.kan-card{position:relative}
.kan-card:hover .kc-sel,.kc-sel:has(input:checked){opacity:1}
.kan-card.is-selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
/* Se centra sobre el TABLERO, no sobre la ventana: con left:50% quedaba 116px a la
   izquierda —media barra lateral— montada sobre el botón de cerrar sesión. Los 232px son
   el ancho del sidebar, la primera pista de .crm-root. */
.bulk-bar{position:absolute;left:calc(232px + (100% - 232px) / 2);bottom:18px;transform:translateX(-50%);z-index:25;
  display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--radius-m);
  background:var(--text);color:var(--surface);box-shadow:var(--shadow-hi);font-size:.75rem;font-weight:500}
.bulk-bar[hidden]{display:none}
.bulk-bar .bb-n{font-variant-numeric:tabular-nums}
.bulk-bar button{border:0;border-radius:var(--radius-s);padding:5px 11px;font-size:.7188rem;font-weight:600;cursor:pointer}
.bulk-bar .bb-go{background:var(--accent);color:#fff}
.bulk-bar .bb-clear{background:transparent;color:var(--surface);opacity:.75}
.bulk-bar .bb-clear:hover{opacity:1}
.mini-sel{font-size:.7812rem;font-weight:500;border:1px solid var(--border);border-radius:var(--radius-s);background:var(--surface);color:var(--text);padding:2px 6px;max-width:100%}
.drw-tabs{display:flex;align-items:center;gap:.125rem;padding:0 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.drw-tab{font-size:.7812rem;font-weight:500;color:var(--text-2);padding:10px 12px;border:0;background:transparent;position:relative}
.drw-tab:hover{color:var(--text)}
.drw-tab[data-active="true"]{color:var(--text)}
.drw-tab[data-active="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--accent)}
.drw-pane{flex:1;overflow-y:auto;min-height:0}
.dp-sec{padding:16px 20px;border-bottom:1px solid var(--surface-2)}
.dp-sec h4{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin-bottom:10px}
.info-row{display:grid;grid-template-columns:20px 120px 1fr;align-items:center;gap:.5rem;padding:6px 0;border-bottom:1px solid var(--border);font-size:.8125rem}
.info-row:last-child{border-bottom:0}
.info-row .ir-ic{color:var(--text-3);text-align:center}
.info-row .ir-l{color:var(--text-3);font-size:.75rem}
.info-row .ir-v{color:var(--text);font-weight:500}
.dp-form{display:grid;grid-template-columns:1fr 1fr;gap:.625rem}
.form-cell{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-m);padding:9px 12px}
.form-cell.wide{grid-column:1/-1}
.form-cell .fc-l{font-size:.6562rem;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.form-cell .fc-v{font-size:.8125rem;font-weight:500;color:var(--text);line-height:1.4}
.crm-inline-input{width:100%;background:transparent;border:none;outline:none;font-size:.8125rem;font-weight:500;color:var(--text);font-family:inherit;padding:0;line-height:1.4}
.crm-inline-input::placeholder{color:var(--text-3)}
.crm-inline-input:focus{color:var(--accent)}
select.crm-inline-input{cursor:pointer;appearance:none;-webkit-appearance:none}
.utm-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.utm-chip{display:flex;align-items:center;gap:.4375rem;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-s);padding:4px 10px;font-family:var(--font-mono);font-size:.7188rem}
.utm-chip .k{color:var(--text-3)}
.utm-chip .v{color:var(--text);font-weight:500}
.note-list{display:flex;flex-direction:column;gap:.625rem;padding:16px 20px}
.note-item{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-m);padding:10px 12px}
.note-item .ni-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;font-size:.6875rem;color:var(--text-3)}
.note-item .ni-top b{color:var(--text-2);font-weight:600}
.note-item .ni-body{font-size:.8125rem;color:var(--text);line-height:1.45}
.note-add{margin:0 20px 16px;display:flex;flex-direction:column;gap:.5rem}
.note-add textarea{width:100%;border:1px solid var(--border);border-radius:var(--radius-m);background:var(--surface);padding:10px 12px;font-size:.8125rem;color:var(--text);resize:vertical;min-height:76px;outline:none}
.note-add textarea:focus{border-color:var(--accent)}
.note-add .add-row{display:flex;justify-content:flex-end}
.hist-list{display:flex;flex-direction:column;padding:16px 20px}
.hist-item{display:grid;grid-template-columns:16px 1fr;gap:.625rem;position:relative;padding-bottom:16px}
.hist-item:last-child{padding-bottom:0}
.hist-item::before{content:"";position:absolute;left:7px;top:20px;bottom:0;width:1px;background:var(--border)}
.hist-item:last-child::before{display:none}
.h-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--border);background:var(--surface);margin-top:2px;flex-shrink:0}
.h-dot.act{border-color:var(--accent);background:var(--accent-soft)}
.h-body .h-ev{font-size:.7812rem;color:var(--text);line-height:1.35}
.h-body .h-date{font-size:.6562rem;color:var(--text-3);margin-top:2px}

/* ─── Modal ──────────────────────────────────────────────── */
.modal-back{position:absolute;inset:0;background:rgba(10,15,20,.40);z-index:30;display:none;place-items:center}
.modal-back.open{display:grid}
.modal{background:var(--surface);border-radius:var(--radius-l);box-shadow:var(--shadow-hi);width:min(520px,92vw);max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border)}
.modal-head h2{font-size:1rem;font-weight:600}
.modal-body{padding:20px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:1rem}
.modal-foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:.5rem}
.form-group{display:flex;flex-direction:column;gap:.375rem}
.form-group label{font-size:.75rem;font-weight:600;color:var(--text-2)}
.form-group input,.form-group select,.form-group textarea{border:1px solid var(--border);border-radius:var(--radius-s);background:var(--surface-2);padding:8px 10px;font-size:.8125rem;color:var(--text);outline:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--accent);background:var(--surface)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.an-summary{font-size:.9375rem;color:var(--text-2);line-height:1.55;margin-bottom:20px;padding:14px 18px;background:var(--surface);border-radius:var(--radius-m);border:1px solid var(--border);border-left:3px solid var(--accent)}
.an-summary strong{color:var(--text)}
.hero-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,.85vw,18px);margin-bottom:20px}
.hero-kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-l);padding:22px 24px;box-shadow:var(--shadow);text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-kpi .hk-n{font-size:2.5rem;font-weight:700;letter-spacing:-.03em;color:var(--text);line-height:1}
.hero-kpi .hk-n .suf{font-size:1.25rem;font-weight:600;color:var(--text-3)}
.hero-kpi .hk-l{font-size:.875rem;color:var(--text-2);margin-top:10px;font-weight:600}
.hero-kpi .hk-d{font-size:.75rem;color:var(--text-3);margin-top:4px}
.show-visual{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);padding:18px 22px;margin-bottom:20px;box-shadow:var(--shadow)}
/* Sin esta regla el h3 caía al tamaño por defecto del navegador —~18.7px en negrita— y
   salía más grande que el título de la página. Es el mismo tamaño que sus cuatro hermanos. */
.show-visual h3{font-size:.875rem;font-weight:600;margin-bottom:12px}
.show-bar-wrap{height:22px;background:var(--surface-2);border-radius:11px;overflow:hidden}
.show-bar-fill{height:100%;background:var(--accent);border-radius:11px;display:flex;align-items:center;justify-content:flex-end;padding-right:10px;font-size:.7188rem;font-weight:700;color:#fff;min-width:40px}
.show-desc{font-size:.8125rem;color:var(--text-2);margin-top:11px;line-height:1.45}
.closer-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
.cc-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);padding:18px 20px;box-shadow:var(--shadow)}
.cc-head{display:flex;align-items:center;gap:.625rem;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.cc-head .av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:700;color:#fff;flex-shrink:0}
.cc-head .nm{font-size:.875rem;font-weight:600}
.cc-row{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--surface-2);font-size:.8125rem}
.cc-row:last-child{border-bottom:0}
.cc-row .cl{color:var(--text-3)}
.cc-row .cv{font-weight:650;color:var(--text)}
.cc-big{font-size:1.625rem;font-weight:700;letter-spacing:-.02em;color:var(--text);margin-bottom:3px}
.cc-sub{font-size:.75rem;color:var(--text-3)}
.roi-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);padding:20px 24px;margin-bottom:20px;box-shadow:var(--shadow)}
.roi-card h3{font-size:.875rem;font-weight:600;margin-bottom:16px}
.roi-flow{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.roi-box{flex:1;min-width:120px;text-align:center;padding:16px;border-radius:var(--radius-m);background:var(--surface-2)}
.roi-box.good{background:var(--pos-soft)}
.roi-box .rn{font-size:1.625rem;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.roi-box.good .rn{color:var(--pos)}
.roi-box .rl{font-size:.7188rem;color:var(--text-3);margin-top:4px;font-weight:500}
.roi-arrow{font-size:1.5rem;color:var(--text-3);flex-shrink:0}
.roi-desc{font-size:.875rem;color:var(--text-2);padding:12px 16px;background:var(--surface-2);border-radius:var(--radius-s);line-height:1.5}
.roi-desc strong{color:var(--text)}
/* auto-fit y no auto-fill: con auto-fill las pistas sobrantes siguen ocupando su hueco y
   los cuatro recuadros dejaban media tarjeta en blanco. Mismo fallo que tenía .rn-wrap. */
.roi-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:.5rem;margin-top:12px}
.roi-detail{padding:10px 14px;background:var(--surface-2);border-radius:var(--radius-s)}
.roi-detail .rdn{font-weight:650;color:var(--text);font-size:.875rem}
.roi-detail .rdl{font-size:.6875rem;color:var(--text-3);margin-top:2px}
.role-banner{padding:6px 14px;font-size:.7188rem;font-weight:500;color:var(--accent-ink);background:var(--accent-soft);border-bottom:1px solid var(--border);text-align:center;flex-shrink:0;display:none}
.role-banner.show{display:block}
.role-banner.triage-banner{color:#7c3200;background:#fff3e0;border-bottom-color:#ffd08a}
.rv-switcher{display:flex;gap:4px;justify-content:center;padding:6px 14px;background:#fff3e0;border-bottom:1px solid #ffd08a;flex-shrink:0}
.rv-btn{font-size:.6875rem;font-weight:600;padding:3px 14px;border-radius:999px;border:1px solid #f59e0b;background:transparent;color:#7c3200;cursor:pointer;transition:all .12s}
.rv-btn.on{background:#f59e0b;color:#fff;border-color:#f59e0b}
/* ─── Triage pipeline ────────────────────────────────────── */
.assign-btn{width:100%;margin-top:8px;padding:5px 0;font-size:.6875rem;font-weight:600;border-radius:var(--radius-s);border:1px solid var(--pos);background:var(--pos-soft);color:var(--pos);cursor:pointer;transition:all .12s}
.assign-btn:hover{background:var(--pos);color:#fff}
/* ─── Triage analytics ───────────────────────────────────── */
/* auto-fit: con auto-fill la fila de KPIs cortaba antes que el embudo de debajo y dejaba
   un escalón a la derecha. */
.trg-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:24px}
.trg-kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);padding:16px 18px;box-shadow:var(--shadow)}
.trg-kpi .tk-val{font-size:1.75rem;font-weight:700;letter-spacing:-.03em;line-height:1;margin-bottom:4px;font-variant-numeric:tabular-nums}
.trg-kpi .tk-lbl{font-size:.6875rem;color:var(--text-2);font-weight:500}
.trg-kpi .tk-sub{font-size:.625rem;color:var(--text-3);margin-top:2px}
.trg-funnel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);padding:20px 22px;box-shadow:var(--shadow);margin-bottom:16px}
.trg-funnel h3{font-size:.8125rem;font-weight:600;margin-bottom:16px}
.tf-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.tf-row:last-child{margin-bottom:0}
.tf-bar-wrap{flex:1;height:8px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.tf-bar{height:100%;border-radius:4px;transition:width .5s ease}
.tf-label{font-size:.75rem;font-weight:500;width:100px;color:var(--text-2)}
.tf-count{font-size:.75rem;font-weight:700;width:28px;text-align:right;font-variant-numeric:tabular-nums}
.tf-pct{font-size:.6875rem;color:var(--text-3);width:36px;text-align:right;font-variant-numeric:tabular-nums}
.trg-closers{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);padding:20px 22px;box-shadow:var(--shadow);margin-bottom:16px}
.trg-closers h3{font-size:.8125rem;font-weight:600;margin-bottom:14px}
.tc-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--surface-2)}
.tc-row:last-child{border-bottom:0}
.tc-av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:.6875rem;font-weight:700;color:#fff;flex-shrink:0}
.tc-name{flex:1;font-size:.8125rem;font-weight:500}
.tc-cnt{font-size:.8125rem;font-weight:700;font-variant-numeric:tabular-nums}
.tc-bar-wrap{width:80px;height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden}
.tc-bar{height:100%;border-radius:3px}
.trg-contrib{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-s);padding:12px 14px;font-size:.75rem;color:var(--text-2);line-height:1.5;margin-bottom:16px}

/* ─── Login screen ──────────────────────────────────────── */
/* Carries .crm-root only for the theme tokens; its 232px sidebar grid must not apply
   here or the card gets trapped in the first column. */
#crm-login{position:fixed;inset:0;background:var(--bg);display:grid;grid-template-columns:1fr;place-items:center;padding:24px;overflow:auto;z-index:200}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-l);box-shadow:var(--shadow-hi);padding:36px 40px;width:380px;max-width:94vw}
.login-brand{display:flex;align-items:center;gap:.5rem;margin-bottom:24px}
.login-title{font-size:1.1875rem;font-weight:700;letter-spacing:-.02em;margin-bottom:4px}
.login-sub{font-size:.8125rem;color:var(--text-3);margin-bottom:24px}
.login-err{font-size:.75rem;color:var(--danger);background:var(--danger-soft);padding:8px 12px;border-radius:var(--radius-s);margin-bottom:12px;display:none}
.login-btn{width:100%;padding:10px;border:0;border-radius:var(--radius-m);background:var(--accent);color:#fff;font-weight:600;font-size:.875rem;cursor:pointer;transition:filter .12s;margin-top:4px}
.login-btn:hover{filter:brightness(1.1)}
.login-btn:disabled{opacity:.6;cursor:not-allowed}
/* ─── Foco por teclado ───────────────────────────────────── */
/* Los inputs ya tenían su propio :focus (cambian border-color); esto cubre todo lo
   demás — botones, tarjetas, tabs, chips — que hasta ahora no mostraba dónde estaba
   el foco al navegar sin mouse. */
.crm-btn:focus-visible, .crm-nav-item:focus-visible, .kan-card:focus-visible,
.chip:focus-visible, .drw-tab:focus-visible,
.ctx-switch:focus-visible, .ctx-opt:focus-visible, .int-cat-btn:focus-visible,
.ch-row:focus-visible, .rv-btn:focus-visible,
.stage-rename-btn:focus-visible, .stage-del-btn:focus-visible, .drw-close:focus-visible,
.kan-add-col:focus-visible, .int-card:focus-visible, .dp-nav:focus-visible,
.dp-day:focus-visible, .login-link:focus-visible, .assign-btn:focus-visible,
.toast .t-x:focus-visible, .past-note button:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}

/* ─── Login link secundario ──────────────────────────────── */
.login-link{display:block;width:100%;text-align:center;margin-top:14px;border:0;background:transparent;color:var(--text-3);font-size:.75rem;font-weight:500;cursor:pointer;padding:4px}
.login-link[hidden]{display:none}
.login-link:hover{color:var(--accent);text-decoration:underline}

/* ─── Toast ──────────────────────────────────────────────── */
.toast-stack{position:absolute;right:18px;bottom:18px;z-index:40;display:flex;flex-direction:column;gap:.5rem;pointer-events:none}
.toast{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);box-shadow:var(--shadow-hi);padding:11px 14px;display:flex;align-items:flex-start;gap:.625rem;min-width:260px;max-width:340px;pointer-events:all;animation:slideIn .2s ease;border-left:3px solid var(--border)}
.toast.ok{border-left-color:var(--pos)}
.toast.err{border-left-color:var(--neg)}
.toast.info{border-left-color:var(--accent)}
@keyframes slideIn{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}
.toast .t-ico{font-size:.875rem;flex-shrink:0;margin-top:1px}
.toast .t-msg{font-size:.75rem;color:var(--text-2);font-weight:500;flex:1}
.toast .t-x{border:0;background:transparent;color:var(--text-3);font-size:.875rem;padding:0 2px;line-height:1;flex-shrink:0}
.toast .t-x:hover{color:var(--text)}