/* NODO CRM — piezas propias del CRM.
   Todo usa los tokens de app.css (la identidad de NODO Finanzas): mismos colores, radios, espaciado, letra y movimiento.
   Lo único nuevo son los colores de cada canal, que solo aparecen en su insignia pequeña. */

:root{--wa:#1FA855; --ms:#0A7CFF; --tt:#111511; --ig:linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF)}
@media (prefers-color-scheme: dark){:root{--tt:#EDF2EE}}

/* ---------- Canales ---------- */
.canal{display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; color:#fff; flex:none}
.canal .ic{font-size:11px; stroke-width:2.2}
.canal.whatsapp{background:var(--wa)}
.canal.messenger{background:var(--ms)}
.canal.instagram{background:var(--ig)}
.canal.tiktok{background:var(--tt); color:var(--bg)}
.canal.lg{width:40px; height:40px}
.canal.lg .ic{font-size:18px; stroke-width:1.9}
.av{position:relative; display:inline-flex; flex:none}
.av .canal{position:absolute; right:-3px; bottom:-3px; width:18px; height:18px; box-shadow:0 0 0 2px var(--surface)}
.av .canal .ic{font-size:10px}
.avatar.v{background:var(--btn); color:var(--on-btn)}
.mini-av.v{background:var(--btn); color:var(--on-btn)}

/* ---------- Piezas generales ---------- */
.pila{display:grid; gap:var(--s-3); align-content:start; min-width:0}
.sel-chip{width:auto; height:40px; min-height:40px; padding:0 36px 0 var(--s-4); border-radius:var(--r-pill); font-size:var(--t-sm); font-weight:600; flex:none; -webkit-appearance:none; appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size:5px 5px; background-repeat:no-repeat}
.ic-box.bad{background:var(--danger-tint); color:var(--danger)}
.who button small{font-size:var(--t-xs); font-weight:600; color:var(--muted)}
.who button[aria-pressed="true"] small{color:var(--brand-ink)}
button.siguiente{width:100%; border:0; font:inherit; text-align:left; cursor:pointer}
button.siguiente:hover{background:color-mix(in srgb, var(--on-hero) 30%, transparent)}
.siguiente .avatar{background:var(--on-hero); color:var(--hero)}
.siguiente .av .canal{box-shadow:0 0 0 2px var(--hero)}
.hero .hero-foot{flex-wrap:wrap}
.lista .sec-c{margin:0; padding:var(--s-4) var(--s-4) var(--s-2); border-top:1px solid var(--line)}
.lista .sec-c:first-child{border-top:0}
.lista .sec-c + .conv{border-top:0}
.lista .empty-card{padding:var(--s-6) var(--s-4)}
.top-add[aria-current="page"]{box-shadow:0 0 0 3px var(--ring)}
.tab{position:relative}
.dl-i[disabled]{opacity:.6; cursor:default}

/* ---------- Versión simple: Casos, Tito ---------- */
.pill .badge{margin-left:2px; min-width:18px; height:18px; font-size:10px}
.pill[aria-current="page"] .badge{background:var(--on-btn); color:var(--btn)}
.conv.atenuado{opacity:.62}
.conv.atenuado:hover{opacity:1}
.bandeja-h .seg2{margin-top:2px; grid-template-columns:repeat(3, minmax(0,1fr))}
.bandeja-h .seg2 button{min-height:36px}
@media (min-width: 1024px){ body{overflow:hidden} }
.todo-bien{display:grid; justify-items:center; gap:var(--s-2); padding:var(--s-8) var(--s-5); text-align:center}
.todo-bien .ic-box{width:64px; height:64px; margin-bottom:var(--s-2)}
.todo-bien .ic-box .ic{font-size:26px; stroke-width:2.2}
.todo-bien b{font-size:var(--t-md)}
.todo-bien p{font-size:var(--t-sm); color:var(--muted); max-width:280px}
.tito-h{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--s-4); align-items:center; margin:var(--s-2) 0 var(--s-5)}
.tito-h .h-screen{margin:0}
.tres{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s-2); margin-bottom:var(--s-4)}
.tres div{display:grid; justify-items:center; gap:2px; padding:var(--s-4) var(--s-2); border-radius:var(--r-in); background:var(--surface); border:1px solid var(--card-line)}
.tres b{font-size:var(--t-lg); font-weight:500; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.tres small{font-size:var(--t-xs); font-weight:600; color:var(--muted)}
.revisar{box-shadow:inset 0 0 0 1.5px var(--brand)}
.qa .row-btns{flex-wrap:nowrap; align-items:center}
.qa small.hint{display:flex; align-items:center; gap:4px; margin-top:4px}
.prueba{padding:0; overflow:hidden}
.prueba .hilo{min-height:320px; max-height:56vh}
.prueba .composer{border-top:1px solid var(--line)}
.file-btn{cursor:pointer}
.cont-prox{box-shadow:inset 0 0 0 1.5px var(--brand)}
.chat-top .btn.sm{min-height:40px; padding:0 14px}

/* ---------- Encabezado ---------- */
.top-r .link{width:44px; height:44px}
.campana{position:relative}
.campana .badge{position:absolute; top:-2px; right:-4px; box-shadow:0 0 0 2px var(--bg)}
.badge{display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:var(--r-pill); background:var(--btn); color:var(--on-btn); font-size:11px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums}
.badge.warn{background:var(--warn); color:#fff}
.top-add .badge{background:var(--on-btn); color:var(--btn); margin-left:2px}
.tab .badge{position:absolute; top:4px; left:calc(50% + 6px); min-width:18px; height:18px; font-size:10px; box-shadow:0 0 0 2px var(--surface)}
.tab-add .badge{left:calc(50% + 10px); top:0}
.demo{display:flex; align-items:center; gap:var(--s-2); padding:var(--s-3) var(--s-4); border-radius:var(--r-in); background:var(--warn-tint); color:var(--warn); font-size:var(--t-sm); font-weight:600; margin-bottom:var(--s-3)}
.demo .ic{font-size:15px}
.demo span{flex:1; min-width:0}

/* ---------- Bandeja ---------- */
.lista{background:var(--surface); border:1px solid var(--card-line); border-radius:var(--r-card); overflow:hidden}
.conv{display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:var(--s-3); align-items:start; width:100%; padding:var(--s-3) var(--s-4); border:0; border-top:1px solid var(--line); background:none; color:inherit; text-align:left; cursor:pointer}
.conv:first-child{border-top:0}
.conv:hover{background:var(--hover)}
.conv[aria-current="true"]{background:var(--tint)}
.conv .avatar{width:44px; height:44px}
.conv-b{display:grid; gap:2px; min-width:0}
.conv-n{font-size:var(--t-sm); font-weight:600; overflow-wrap:anywhere}
.conv-m{font-size:var(--t-xs); color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere}
.conv-tags{display:flex; flex-wrap:wrap; gap:4px; margin-top:4px}
.conv-r{display:grid; justify-items:end; gap:6px; font-size:var(--t-xs); color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums}
.conv.nuevo .conv-n{font-weight:700}
.conv.nuevo .conv-m{color:var(--ink-2)}
.conv.flash{animation:flash 2.6s var(--ease)}
.chip .mini-av{width:16px; height:16px; font-size:9px; margin-left:-6px}
.bandeja-h{display:grid; gap:var(--s-3); margin-bottom:var(--s-3)}
.bandeja-h .search{margin:0}
.canales-f{display:flex; gap:var(--s-2)}
.canales-f .chip-b{padding:0 var(--s-3)}
.canales-f .chip-b .canal{width:20px; height:20px}

/* Hilo de mensajes */
.hilo-w{display:flex; flex-direction:column; min-width:0}
.hilo-h{display:flex; align-items:center; gap:var(--s-3); padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--line); background:var(--surface)}
.hilo-h .t{flex:1; min-width:0}
.hilo-h .t b{display:block; font-size:var(--t-md); font-weight:600; letter-spacing:-.01em; overflow-wrap:anywhere}
.hilo-h .t small{display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:var(--t-xs); color:var(--muted)}
.hilo-h .acc{display:flex; gap:var(--s-2); align-items:center; flex-wrap:wrap; justify-content:flex-end}
.hilo{flex:1; display:flex; flex-direction:column; gap:6px; padding:var(--s-4); background:var(--surface-2); overflow-y:auto; overscroll-behavior:contain}
.msg{max-width:min(80%, 540px); padding:10px 14px; border-radius:20px; font-size:var(--t-sm); line-height:1.45; overflow-wrap:anywhere; white-space:pre-wrap}
.msg.cliente{align-self:flex-start; background:var(--surface); border:1px solid var(--line); border-bottom-left-radius:6px}
.msg.bot{align-self:flex-end; background:var(--tint); color:var(--ink); border-bottom-right-radius:6px}
.msg.humano{align-self:flex-end; background:var(--btn); color:var(--on-btn); border-bottom-right-radius:6px}
.msg.nota{align-self:flex-end; background:var(--warn-tint); color:var(--ink); border:1px dashed color-mix(in srgb, var(--warn) 45%, transparent); border-bottom-right-radius:6px}
.msg.plantilla{border-top-right-radius:6px}
.msg-p{display:flex; align-items:center; justify-content:flex-end; gap:4px; margin-top:4px; font-size:11px; font-weight:600; opacity:.72; white-space:nowrap}
.msg-p .ic{font-size:12px}
.msg.cliente .msg-p{justify-content:flex-start}
.msg.nuevo{animation:aparece var(--d-comp) var(--ease)}
.msg-adj{display:flex; align-items:center; gap:var(--s-2); font-weight:600}
.sis{align-self:center; display:inline-flex; align-items:center; gap:6px; max-width:92%; margin:var(--s-2) 0; padding:4px 12px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--line); font-size:var(--t-xs); font-weight:600; color:var(--muted); text-align:center}
.sis .ic{font-size:13px; flex:none}
.dia-sep{align-self:center; margin:var(--s-3) 0 var(--s-1); font-size:var(--t-xs); font-weight:700; color:var(--muted)}
.escribiendo{align-self:flex-start; display:inline-flex; gap:4px; padding:12px 14px; border-radius:20px; background:var(--surface); border:1px solid var(--line)}
.escribiendo i{width:6px; height:6px; border-radius:50%; background:var(--muted); animation:punto 1s var(--ease) infinite}
.escribiendo i:nth-child(2){animation-delay:.15s}
.escribiendo i:nth-child(3){animation-delay:.3s}
@keyframes punto{50%{transform:translateY(-3px); opacity:.5}}

/* Para escribir */
.composer{display:grid; gap:var(--s-2); padding:var(--s-3) var(--s-4); border-top:1px solid var(--line); background:var(--surface)}
.composer-r{display:flex; align-items:flex-end; gap:var(--s-2)}
.composer textarea{flex:1; min-width:0; min-height:48px; max-height:160px; padding:12px var(--s-4); border:1px solid var(--line-2); border-radius:24px; background:var(--surface); color:var(--ink); font:inherit; font-size:var(--t-md); line-height:1.4; resize:none; transition:border-color var(--d-micro) var(--ease), box-shadow var(--d-micro) var(--ease), background-color var(--d-micro) var(--ease)}
.composer textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--ring)}
.composer textarea{scrollbar-width:none}
.composer textarea::-webkit-scrollbar{display:none}
.composer.es-nota textarea{background:var(--warn-tint); border-color:transparent}
.composer.es-nota textarea:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--warn) 30%, transparent)}
.herr{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2)}
.herr .chip-b{min-height:36px; padding:0 12px; font-size:var(--t-xs)}
.herr .chip-b .ic{font-size:14px}
.herr .ventana{margin-left:auto}
.enviar{display:grid; place-items:center; width:48px; height:48px; border:0; border-radius:50%; background:var(--btn); color:var(--on-btn); cursor:pointer; flex:none}
.enviar:hover{background:var(--btn-hover)}
.enviar .ic{font-size:18px}
.enviar[disabled]{opacity:.45; cursor:default}
.bloqueo{display:grid; gap:var(--s-3); padding:var(--s-3) var(--s-4) var(--s-4); border-top:1px solid var(--line); background:var(--surface)}
.bloqueo .row-btns .btn{flex:1 1 auto}
.rapidas{display:grid; gap:var(--s-2)}
.rapida{display:grid; gap:2px; width:100%; padding:var(--s-3) var(--s-4); border:1px solid var(--line-2); border-radius:var(--r-in); background:var(--surface); color:inherit; text-align:left; cursor:pointer}
.rapida:hover{background:var(--hover); border-color:var(--brand)}
.rapida b{font-size:var(--t-sm)}
.rapida small{font-size:var(--t-xs); color:var(--muted); overflow-wrap:anywhere}

/* Ficha del cliente */
.ficha-w{display:flex; flex-direction:column; min-width:0}
.ficha{display:grid; gap:var(--s-4); align-content:start}
.ficha-h{display:grid; justify-items:center; gap:var(--s-2); text-align:center; padding-top:var(--s-2)}
.ficha-h .avatar{width:64px; height:64px; font-size:var(--t-lg)}
.ficha-h .av .canal{width:24px; height:24px}
.ficha-h .av .canal .ic{font-size:13px}
.ficha-h b{font-size:var(--t-md); font-weight:600}
.ficha-h small{font-size:var(--t-xs); color:var(--muted)}
.campos{display:grid; border:1px solid var(--line); border-radius:var(--r-in); overflow:hidden}
.campo{display:grid; grid-template-columns:minmax(96px, auto) minmax(0,1fr); gap:var(--s-3); align-items:center; min-height:44px; padding:var(--s-2) var(--s-4); border-top:1px solid var(--line); font-size:var(--t-sm)}
.campo:first-child{border-top:0}
.campo > span{font-size:var(--t-xs); font-weight:700; color:var(--muted)}
.campo > b{font-weight:600; text-align:right; overflow-wrap:anywhere}
.campo > b.vacio{color:var(--muted); font-weight:500}
.estado-ia{display:grid; grid-template-columns:40px minmax(0,1fr); gap:var(--s-3); align-items:center; padding:var(--s-3) var(--s-4); border-radius:var(--r-in); background:var(--tint)}
.estado-ia.humano{background:var(--warn-tint)}
.estado-ia b{display:block; font-size:var(--t-sm)}
.estado-ia small{display:block; font-size:var(--t-xs); color:var(--muted)}
.estado-ia .ic-box{background:var(--surface)}
.estado-ia.humano .ic-box{color:var(--warn)}
.fld textarea{width:100%; min-height:96px; padding:12px var(--s-4); border:1px solid var(--line-2); border-radius:var(--r-ctl); background:var(--surface); color:var(--ink); font:inherit; font-size:var(--t-md); font-weight:500; line-height:1.45; resize:vertical; transition:border-color var(--d-micro) var(--ease), box-shadow var(--d-micro) var(--ease)}
.fld textarea:hover{border-color:color-mix(in srgb, var(--line-2) 60%, var(--ink) 40%)}
.fld textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--ring)}
.fld textarea.lg{min-height:160px}
.fld select{-webkit-appearance:none; appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-right:40px}
.etapa-sel{display:flex; flex-wrap:wrap; gap:6px}
.etapa-sel .chip-b{min-height:36px; padding:0 12px; font-size:var(--t-xs)}

/* En la computadora: lista, conversación y ficha lado a lado, cada una con su propio scroll */
.bandeja{display:grid; gap:var(--s-4); grid-template-columns:minmax(0,1fr)}
.vacio-hilo{display:grid; place-content:center; justify-items:center; gap:var(--s-3); padding:var(--s-6); text-align:center; color:var(--muted)}
.vacio-hilo .ic-box{width:64px; height:64px}
.vacio-hilo .ic-box .ic{font-size:24px}
.vacio-hilo b{font-size:var(--t-md); color:var(--ink)}

/* ---------- Atención humana (cola de los asesores) ---------- */
.caso{display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:var(--s-3); align-items:center; width:100%; min-height:64px; padding:var(--s-3) 0; border:0; border-top:1px solid var(--line); background:none; color:inherit; text-align:left; cursor:pointer}
.caso:first-of-type{border-top:0; padding-top:0}
.caso b{display:block; font-size:var(--t-sm); font-weight:600; overflow-wrap:anywhere}
.caso small{display:block; font-size:var(--t-xs); color:var(--muted); overflow-wrap:anywhere}
.caso:hover b{color:var(--brand-ink)}
.caso .tags{display:flex; flex-wrap:wrap; gap:4px; margin-top:4px}
.caso .r{display:grid; justify-items:end; gap:4px}
.espera{display:grid; place-items:center; align-content:center; width:44px; height:44px; border-radius:var(--r-ctl); background:var(--surface-2); line-height:1; font-variant-numeric:tabular-nums}
.espera b{font-size:var(--t-md); font-weight:700}
.espera small{font-size:10px; font-weight:700; text-transform:uppercase; color:var(--muted); margin-top:2px; letter-spacing:.02em}
.espera.tarde{background:var(--warn-tint); color:var(--warn)}
.espera.tarde small{color:var(--warn)}
.espera.mal{background:var(--danger-tint); color:var(--danger)}
.espera.mal small{color:var(--danger)}
.sec-c{display:flex; align-items:center; justify-content:space-between; gap:var(--s-2); margin:var(--s-5) 0 var(--s-2); padding-left:var(--s-1); font-size:var(--t-xs); font-weight:700; color:var(--muted)}
.sec-c:first-child{margin-top:0}
.siguiente{display:flex; align-items:center; gap:var(--s-3); margin-top:var(--s-4); padding:var(--s-3) var(--s-4); border-radius:var(--r-in); background:var(--hero-track); color:var(--on-hero)}
.siguiente .t{flex:1; min-width:0}
.siguiente b{display:block; font-size:var(--t-sm)}
.siguiente small{display:block; font-size:var(--t-xs); color:var(--on-hero-2)}
.gente{display:grid; gap:var(--s-3)}
.persona{display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:var(--s-3); align-items:center}
.persona b{display:block; font-size:var(--t-sm)}
.persona small{display:flex; align-items:center; gap:6px; font-size:var(--t-xs); color:var(--muted)}
.en-linea{width:8px; height:8px; border-radius:50%; background:var(--brand); display:inline-block}
.en-linea.no{background:var(--line-2)}

/* ---------- Pipeline ---------- */
.kanban{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(272px, 300px); gap:var(--s-3); align-items:start; overflow-x:auto; margin:0 calc(-1 * var(--s-4)); padding:0 var(--s-4) var(--s-4); scroll-snap-type:x mandatory; scrollbar-width:thin}
.col{scroll-snap-align:start; display:flex; flex-direction:column; gap:var(--s-2); min-height:240px; padding:var(--s-3); border-radius:var(--r-card); background:color-mix(in srgb, var(--brand) 6%, var(--bg)); border:1px solid color-mix(in srgb, var(--brand) 14%, transparent); transition:background-color var(--d-micro) var(--ease), border-color var(--d-micro) var(--ease)}
.col.ganado{background:color-mix(in srgb, var(--brand) 12%, var(--bg))}
.col.perdido{background:var(--surface-2); border-color:var(--line)}
.col.sobre{background:var(--tint); border-color:var(--brand)}
.col-h{display:flex; align-items:center; justify-content:space-between; gap:var(--s-2); padding:var(--s-1) var(--s-1) var(--s-2)}
.col-h b{font-size:var(--t-sm); font-weight:700; letter-spacing:-.01em}
.col-h small{display:block; font-size:var(--t-xs); color:var(--muted); font-weight:500}
.col-f{display:flex; justify-content:space-between; gap:var(--s-2); margin-top:auto; padding:var(--s-2) var(--s-1) 0; font-size:var(--t-xs); font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums}
.col-f b{color:var(--ink)}
.col-vacia{padding:var(--s-4) var(--s-2); text-align:center; font-size:var(--t-xs); color:var(--muted)}
.kcard{display:grid; gap:var(--s-2); width:100%; padding:var(--s-3) var(--s-4) var(--s-3) var(--s-3); border:1px solid var(--card-line); border-radius:20px; background:var(--surface); color:inherit; text-align:left; cursor:grab; touch-action:manipulation}
.kcard:hover{box-shadow:var(--sh-flota)}
.kcard:active{cursor:grabbing}
.kcard.arrastrando{opacity:.35}
.kcard.alerta{box-shadow:inset 0 0 0 1.5px var(--warn)}
.kcard-h{display:grid; grid-template-columns:36px minmax(0,1fr); gap:var(--s-3); align-items:center}
.kcard-h .avatar{width:36px; height:36px; font-size:var(--t-xs)}
.kcard-h b{display:block; font-size:var(--t-sm); font-weight:600; overflow-wrap:anywhere}
.kcard-h small{display:block; font-size:var(--t-xs); color:var(--muted); overflow-wrap:anywhere}
.kcard-f{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px; font-size:var(--t-xs); color:var(--muted); font-variant-numeric:tabular-nums}
.pipe-res{display:flex; flex-wrap:wrap; gap:var(--s-2)}

/* ---------- Contenedores ---------- */
.cont-h{display:flex; align-items:flex-start; gap:var(--s-3)}
.cont-h .t{flex:1; min-width:0}
.cont-h b{display:block; font-size:var(--t-md); font-weight:700; letter-spacing:-.01em}
.cont-h small{display:block; font-size:var(--t-xs); color:var(--muted)}
.cbm{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-3); margin-top:var(--s-4)}
.cbm b{font-size:var(--t-lg); font-weight:500; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.cbm b small{font-size:var(--t-sm); font-weight:500; color:var(--muted); letter-spacing:0}
.cbm span{font-size:var(--t-xs); font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums}
.fechas{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s-2); margin-top:var(--s-4)}
.fechas div{display:grid; gap:2px; padding:var(--s-3); border-radius:var(--r-in); background:var(--surface-2)}
.fechas small{font-size:var(--t-xs); font-weight:600; color:var(--muted)}
.fechas b{font-size:var(--t-sm); font-weight:600}
.cont-c{margin-top:var(--s-4)}

/* ---------- Valeria (agente) ---------- */
.agente-h{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--s-4); align-items:center}
.bot-av{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--btn); color:var(--on-btn)}
.bot-av .ic{font-size:24px}
.agente-h b{display:block; font-size:var(--t-md); font-weight:700}
.agente-h small{display:block; font-size:var(--t-xs); color:var(--muted)}
.interruptor{position:relative; width:52px; height:32px; border-radius:var(--r-pill); border:0; background:var(--line-2); cursor:pointer; flex:none; padding:0}
.interruptor::after{content:""; position:absolute; top:4px; left:4px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform var(--d-comp) var(--ease)}
.interruptor[aria-checked="true"]{background:var(--btn)}
.interruptor[aria-checked="true"]::after{transform:translateX(20px)}
.quien{display:grid; gap:var(--s-2); margin-top:var(--s-4)}
.herramienta{display:grid; grid-template-columns:40px minmax(0,1fr); gap:var(--s-3); align-items:center; padding:var(--s-3) 0; border-top:1px solid var(--line)}
.herramienta:first-of-type{border-top:0; padding-top:0}
.herramienta b{display:block; font-size:var(--t-sm)}
.herramienta small{display:block; font-size:var(--t-xs); color:var(--muted)}
.herramienta code,.mono{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; background:var(--surface-2); padding:1px 6px; border-radius:6px; color:var(--ink-2); overflow-wrap:anywhere}
.qa{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s-3); align-items:start; padding:var(--s-3) 0; border-top:1px solid var(--line)}
.qa:first-of-type{border-top:0; padding-top:0}
.qa b{display:block; font-size:var(--t-sm); font-weight:600}
.qa p{font-size:var(--t-sm); color:var(--ink-2); margin-top:2px; overflow-wrap:anywhere; white-space:pre-wrap}
.contador{font-size:var(--t-xs); font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums}
.serv{display:flex; flex-direction:column; gap:var(--s-3)}
.serv-h{display:flex; align-items:center; gap:var(--s-3)}
.serv-h .t{flex:1; min-width:0}
.serv-h b{display:block; font-size:var(--t-md); font-weight:700}
.serv-h small{display:block; font-size:var(--t-xs); color:var(--muted)}
.serv p{font-size:var(--t-sm); color:var(--ink-2)}
/* Laboratorio */
.calif{display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--tint); color:var(--brand-ink); font-size:var(--t-md); font-weight:700; font-variant-numeric:tabular-nums; flex:none}
.calif.warn{background:var(--warn-tint); color:var(--warn)}
.calif.bad{background:var(--danger-tint); color:var(--danger)}
.calif.lg{width:96px; height:96px; font-size:var(--t-lg)}
.escena{display:grid; grid-template-columns:48px minmax(0,1fr) 20px; gap:var(--s-3); align-items:center; width:100%; padding:var(--s-3) 0; border:0; border-top:1px solid var(--line); background:none; color:inherit; text-align:left; cursor:pointer}
.escena:first-of-type{border-top:0; padding-top:0}
.escena b{display:block; font-size:var(--t-sm); font-weight:600}
.escena small{display:block; font-size:var(--t-xs); color:var(--muted)}
.escena .tags{display:flex; flex-wrap:wrap; gap:4px; margin-top:4px}
.escena > .ic{color:var(--muted)}
.escena:hover b{color:var(--brand-ink)}
.corriendo{display:grid; justify-items:center; gap:var(--s-3); padding:var(--s-6) var(--s-4); text-align:center}
.corriendo .barra{width:min(320px, 100%); height:8px; border-radius:4px; background:var(--surface-2); overflow:hidden}
.corriendo .barra i{display:block; height:100%; width:40%; border-radius:4px; background:var(--brand); animation:va 1.2s var(--ease) infinite alternate}
@keyframes va{from{transform:translateX(-100%)} to{transform:translateX(250%)}}

/* ---------- Resultados ---------- */
.kpis{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s-3)}
.kpi{display:grid; gap:2px; padding:var(--s-4); border-radius:var(--r-in); background:var(--surface-2); min-width:0}
.kpi small{font-size:var(--t-xs); font-weight:600; color:var(--muted)}
.kpi b{font-size:var(--t-lg); font-weight:500; letter-spacing:-.035em; font-variant-numeric:tabular-nums; white-space:nowrap}
.kpi span{font-size:var(--t-xs); color:var(--muted)}
.embudo{display:grid; gap:var(--s-3)}
.embudo-r{display:grid; gap:4px}
.embudo-r .hb-t small{font-size:var(--t-xs); color:var(--muted); font-weight:500}
.por-canal{display:grid; gap:var(--s-3)}
.canal-r{display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:var(--s-3); align-items:center}
.canal-r b{display:block; font-size:var(--t-sm); font-weight:600}
.canal-r small{display:block; font-size:var(--t-xs); color:var(--muted)}
.canal-r .r{text-align:right; font-weight:600; font-variant-numeric:tabular-nums}
.canal-r .canal{width:40px; height:40px}
.canal-r .canal .ic{font-size:18px; stroke-width:1.9}

/* ---------- Ajustes ---------- */
.canal-c{display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:var(--s-3); align-items:center; padding:var(--s-3) 0; border-top:1px solid var(--line)}
.canal-c:first-of-type{border-top:0; padding-top:0}
.canal-c b{display:block; font-size:var(--t-sm)}
.canal-c small{display:block; font-size:var(--t-xs); color:var(--muted); overflow-wrap:anywhere}
.paso{display:grid; grid-template-columns:28px minmax(0,1fr); gap:var(--s-3); align-items:start; font-size:var(--t-sm)}
.paso i{display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--tint); color:var(--brand-ink); font-style:normal; font-size:var(--t-xs); font-weight:700}
.pasos{display:grid; gap:var(--s-3)}
.copiar{display:flex; align-items:center; gap:var(--s-2); padding:0 0 0 var(--s-4); border:1px solid var(--line-2); border-radius:var(--r-ctl); background:var(--surface-2); min-height:48px}
.copiar code{flex:1; min-width:0; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; color:var(--ink-2); overflow-wrap:anywhere; padding:var(--s-2) 0}
.copiar .link{border:0; background:none; border-radius:var(--r-ctl)}
.evento{display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); min-height:52px; padding:var(--s-2) 0; border-top:1px solid var(--line); cursor:pointer}
.evento:first-of-type{border-top:0}
.evento b{display:block; font-size:var(--t-sm)}
.evento small{display:block; font-size:var(--t-xs); color:var(--muted)}
.evento input{width:22px; height:22px; accent-color:var(--brand); flex:none}
.receta{display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:var(--s-3); align-items:center; padding:var(--s-3) 0; border-top:1px solid var(--line)}
.receta:first-of-type{border-top:0; padding-top:0}
.receta b{display:block; font-size:var(--t-sm)}
.receta small{display:block; font-size:var(--t-xs); color:var(--muted)}
.plantilla-r{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s-3); align-items:start; padding:var(--s-3) 0; border-top:1px solid var(--line)}
.plantilla-r:first-of-type{border-top:0; padding-top:0}
.plantilla-r b{display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:var(--t-sm)}
.plantilla-r p{font-size:var(--t-sm); color:var(--ink-2); margin-top:4px; overflow-wrap:anywhere; white-space:pre-wrap}
.etapas-ed{display:grid; gap:var(--s-2)}
.etapa-ed{display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; gap:var(--s-2); align-items:center}
.etapa-ed .inp{height:44px}
.etapa-ed .link{width:36px; height:36px}
.ajustes-nav{display:flex; gap:var(--s-2); overflow-x:auto; scrollbar-width:none; margin:0 calc(-1 * var(--s-4)) var(--s-4); padding:0 var(--s-4)}
.ajustes-nav::-webkit-scrollbar{display:none}

/* ---------- Avisos ---------- */
.aviso-r{display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:var(--s-3); align-items:center; width:100%; min-height:56px; padding:var(--s-3) 0; border:0; border-top:1px solid var(--line); background:none; color:inherit; text-align:left; cursor:pointer}
.aviso-r:first-of-type{border-top:0}
.aviso-r b{display:block; font-size:var(--t-sm); font-weight:600}
.aviso-r small{display:block; font-size:var(--t-xs); color:var(--muted)}
.aviso-r .cuando{font-size:var(--t-xs); color:var(--muted); white-space:nowrap}
.aviso-r.nuevo b::after{content:""; display:inline-block; width:8px; height:8px; margin-left:6px; border-radius:50%; background:var(--brand); vertical-align:middle}

/* ---------- Celular: la conversación ocupa toda la pantalla ---------- */
@media (max-width: 1023px){
  .app.en-chat .tabs{display:none}
  .chat-top{gap:var(--s-2); padding-left:var(--s-2); padding-right:var(--s-3); border-bottom:1px solid var(--line); background:var(--surface)}
  .chat-top .t{flex:1; min-width:0}
  .chat-top .t b{display:block; font-size:var(--t-md); font-weight:600; overflow-wrap:anywhere; line-height:1.2}
  .chat-top .t small{display:flex; align-items:center; gap:6px; font-size:var(--t-xs); color:var(--muted)}
  .chat-top .back{width:44px; justify-content:center}
  .scroll.chat-m{padding:0}
  .chat-m .hilo{min-height:calc(100dvh - var(--top-h) - 140px); padding-bottom:var(--s-5); overflow:visible}
  .chat-m .composer,.chat-m .bloqueo{position:sticky; bottom:0; z-index:5; padding-bottom:calc(var(--s-3) + env(safe-area-inset-bottom, 0px))}
  .chat-m .estado-barra{position:sticky; top:calc(var(--top-h) + env(safe-area-inset-top, 0px)); z-index:4}
  .bandeja .lista{border:0; border-radius:0; background:transparent; margin:0 calc(-1 * var(--s-4))}
  .bandeja .conv{padding-left:var(--s-4); padding-right:var(--s-4)}
  .kpis{grid-template-columns:repeat(2, minmax(0,1fr))}
}
.estado-barra{display:flex; align-items:center; gap:var(--s-2); padding:var(--s-2) var(--s-4); background:var(--warn-tint); color:var(--warn); font-size:var(--t-xs); font-weight:700}
.estado-barra.ok{background:var(--tint); color:var(--brand-ink)}
.estado-barra .ic{font-size:14px}
.estado-barra span{flex:1; min-width:0}
.estado-barra button{border:0; background:none; color:inherit; font:inherit; font-weight:700; text-decoration:underline; cursor:pointer; padding:var(--s-2) 0; min-height:36px}

@media (min-width: 1024px){
  .wrap:has(.bandeja),.wrap:has(.kanban){max-width:1440px}
  .scroll.lleno{display:flex; flex-direction:column; overflow:hidden; padding-bottom:var(--s-5)}
  .scroll.lleno > .wrap{flex:1; min-height:0; width:100%; display:flex; flex-direction:column}
  .bandeja{flex:1; min-height:0; grid-template-columns:340px minmax(0,1fr)}
  .bandeja > *{min-height:0; background:var(--surface); border:1px solid var(--card-line); border-radius:var(--r-card); overflow:hidden; display:flex; flex-direction:column}
  .bandeja-l .bandeja-h{padding:var(--s-4) var(--s-4) var(--s-3); margin:0; border-bottom:1px solid var(--line)}
  .bandeja-l .lista{flex:1; overflow-y:auto; border:0; border-radius:0}
  .bandeja-l .filters{margin:0; padding:0}
  .ficha-w .ficha{flex:1; overflow-y:auto; padding:var(--s-4) var(--s-5) var(--s-5)}
  .ficha-w .ficha-t{display:flex; align-items:center; justify-content:space-between; padding:var(--s-4) var(--s-5) 0}
  .hilo-w .composer,.hilo-w .bloqueo{flex:none}
  .kanban{margin:0; padding:0 0 var(--s-4); grid-auto-columns:minmax(272px, 1fr)}
  .kpis{grid-template-columns:repeat(4, minmax(0,1fr))}
  .kpis.k3c{grid-template-columns:repeat(3, minmax(0,1fr))}
  .ajustes-nav{margin-left:0; margin-right:0; padding:0}
}
@media (min-width: 1024px){
  .pila{gap:20px}
  .bandeja-l .bandeja-h .hero{padding:var(--s-5)}
}
@media (min-width: 1280px){
  .bandeja.con-ficha{grid-template-columns:340px minmax(0,1fr) 320px}
  .hilo-h .btn-ficha{display:none}
}
@media (min-width: 1024px) and (max-width: 1279px){
  .bandeja .ficha-w{display:none}
}
@media (max-width: 1023px){
  .hilo-h .btn-ficha{display:none}
}
@media (max-width: 359px){
  .fechas{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
  .hilo-h .acc .btn span{display:none}
}