/* Demo 2 · Seguimiento y ventas (04-10-2026). App: CRM tipo kanban (arriba) + la tarjeta del contacto abierta (abajo).
   La tarjeta del contacto tiene una copia en cada columna: la de la columna anterior se va (.fuera) y la nueva aparece. */
.d-seg .app-cuerpo{ background:#fbfbfc; }
.ds-crm{ flex:1; min-width:0; display:flex; flex-direction:column; gap:9px; padding:11px 13px 12px; }
.ds-crm-cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ds-crm-cab > b{ display:flex; align-items:center; gap:7px; font-size:14px; font-weight:600; letter-spacing:-.01em; }
.ds-crm-cab > b .ico{ width:15px; height:15px; color:var(--tinta-45); }
.ds-total{ display:flex; align-items:baseline; gap:7px; font-size:11.5px; color:var(--tinta-45); }
.ds-total b{ font-size:15px; font-weight:600; color:var(--tinta); letter-spacing:-.01em; border-radius:4px; padding:0 3px; }

/* Tablero */
.ds-tablero{ flex:none; height:188px; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:7px; }
.ds-col{ min-width:0; display:flex; flex-direction:column; gap:5px; line-height:1.25; padding:7px 6px; border-radius:8px; background:var(--nieve); overflow:hidden; }
.ds-col-cab{ flex:none; display:flex; align-items:center; gap:6px; font-size:10.8px; font-weight:600; color:var(--tinta-60); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 2px 2px; }
.ds-col-cab i{ flex:none; width:7px; height:7px; border-radius:50%; background:var(--tinta-15); }
.ds-col:last-child .ds-col-cab i{ background:var(--verde); }
.ds-caja{ flex:none; display:flex; flex-direction:column; }
.ds-tj{ flex:none; display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:5px; row-gap:2px; padding:6px 7px; border-radius:6px; background:#fff; border:1px solid var(--linea); }
.ds-tj b{ grid-column:1 / span 2; font-size:11.4px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ds-tj em{ grid-column:1; font-style:normal; font-size:10.2px; color:var(--tinta-45); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ds-tj span{ grid-column:2; font-size:10.2px; font-weight:600; color:var(--tinta-60); white-space:nowrap; }
.ds-tj.yo{ border-color:var(--verde); box-shadow:0 0 0 2px rgba(60,193,160,.22), 0 6px 14px -8px rgba(47,163,135,.55); }
.ds-tj.yo span{ color:var(--verde-osc); }
.ds-tj.fuera{ display:none; }
.ds-col:last-child .ds-tj.yo{ background:var(--verde-agua); }

/* La tarjeta abierta (ficha del contacto) */
.ds-detalle{ position:relative; flex:1; min-height:0; border-radius:10px; border:1px dashed var(--linea-fuerte); }
.ds-detalle::before{ content:'Abre una tarjeta para ver su ficha'; position:absolute; inset:0; display:grid; place-items:center; font-size:12.5px; color:var(--tinta-30); }
.ds-ficha{ position:absolute; inset:-1px; display:flex; flex-direction:column; border-radius:10px; background:#fff; border:1px solid var(--linea); box-shadow:var(--sombra-2, 0 8px 20px -10px rgba(10,10,10,.25)); overflow:hidden; }
.ds-fi-cab{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--linea); }
.ds-fi-cab .fi-avatar{ width:34px; height:34px; font-size:11.5px; background:var(--verde-agua); }
.ds-fi-cab .fi-avatar span{ opacity:1; }
.ds-fi-quien{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.ds-fi-quien b{ font-size:14px; font-weight:600; letter-spacing:-.01em; }
.ds-fi-quien em{ font-style:normal; font-size:11px; color:var(--tinta-60); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ds-etapa{ margin-left:auto; flex:none; display:flex; }
.ds-etapa span{ font-size:10.8px; font-weight:600; padding:4px 9px; border-radius:999px; background:var(--nieve-2); color:var(--tinta-60); white-space:nowrap; }
.ds-etapa span:last-child{ background:var(--verde); color:var(--tinta); }
.ds-etapa span:has(~ span:not(.oculto)){ display:none; }
.ds-fi-grid{ flex:1; min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:0 14px; padding:9px 14px 10px; overflow:hidden; }
.ds-fi-grid > div{ display:flex; flex-direction:column; gap:9px; min-width:0; }
.ds-bl{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.ds-bl .rotulo{ font-size:10px; }

/* Propuesta: el documento con su estado (preparada → enviada → vista) */
.ds-doc{ display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:7px; border:1px solid var(--linea); }
.ds-doc-ico{ flex:none; width:24px; height:28px; border-radius:3px; background:#e5484d; color:#fff; font-size:7.5px; font-weight:700; display:grid; place-items:center; }
.ds-doc > span:nth-child(2){ flex:1; min-width:0; display:flex; flex-direction:column; }
.ds-doc b{ font-size:11.4px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ds-doc em{ font-style:normal; font-size:10.4px; color:var(--tinta-45); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ds-estado{ flex:none; display:flex; }
.ds-estado span{ font-size:10px; font-weight:600; padding:3px 7px; border-radius:999px; background:var(--nieve-2); color:var(--tinta-60); white-space:nowrap; }
.ds-estado span.env{ background:#e8f1fd; color:#2463b4; }
.ds-estado span.vis{ background:var(--verde-agua); color:var(--verde-osc); }
.ds-estado span:has(~ span:not(.oculto)){ display:none; }

/* Seguimiento: la línea de tiempo */
.ds-seg{ display:flex; flex-direction:column; gap:3px; margin:0; padding:0; list-style:none; position:relative; }
.ds-seg li{ position:relative; display:grid; grid-template-columns:46px minmax(0,1fr); gap:6px; padding:2px 0 2px 12px; font-size:10.8px; line-height:1.35; color:var(--tinta-80); }
.ds-seg li::before{ content:''; position:absolute; left:2px; top:6px; width:6px; height:6px; border-radius:50%; background:var(--verde); }
.ds-seg li.sin::before{ background:#f0b429; }
.ds-seg li.fin::before{ background:var(--tinta); }
.ds-seg time{ font-weight:600; color:var(--tinta-45); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ds-seg li span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Notas que va escribiendo el agente */
.ds-notas{ display:flex; flex-direction:column; gap:4px; margin:0; padding:0; list-style:none; }
.ds-notas li{ padding:5px 8px; border-radius:6px; background:var(--nieve); border-left:2.5px solid var(--verde); font-size:10.9px; line-height:1.38; color:var(--tinta-80); }
.ds-notas li b{ font-weight:600; color:var(--tinta); }
.ds-notas-vacio{ margin:0; font-size:10.8px; color:var(--tinta-30); }
.ds-notas:has(li:not(.oculto)) + .ds-notas-vacio{ display:none; }

/* Cobro: pendiente → pagado con su recibo */
.ds-cobro{ display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:7px; border:1px dashed var(--linea-fuerte); min-height:42px; transition:background .4s, border-color .4s; }
.ds-cobro-ico{ flex:none; width:24px; height:24px; border-radius:50%; background:var(--nieve-2); color:var(--tinta-45); display:grid; place-items:center; }
.ds-cobro-ico .ico{ width:12px; height:12px; stroke-width:2.4; }
.ds-cobro-txt{ display:flex; flex-direction:column; min-width:0; }
.ds-cobro b{ font-size:11.6px; font-weight:600; }
.ds-cobro em{ font-style:normal; font-size:10.4px; line-height:1.3; color:var(--tinta-60); }
.ds-cobro.lista .ds-pend{ display:none; }
.ds-cobro:not(.lista){ border-color:var(--linea-fuerte); }
.ds-cobro:not(.lista) .ds-pagado{ display:none; }
.ds-cobro:not(.lista) .ds-pend{ display:flex; }
.ds-cobro.lista{ border-style:solid; border-color:transparent; background:var(--verde-agua); }
.ds-cobro.lista .ds-cobro-ico{ background:var(--verde); color:var(--tinta); }

/* El aviso final, sobre la barra de escribir del móvil (no tapa el CRM) */
.d-seg .toast{ left:52px; right:auto; margin:0; bottom:26px; max-width:306px; }
/* El salto de tiempo va sobre el chat del móvil */
.d-seg .dmb-salto{ left:44px; right:638px; top:124px; }