/* ============================================================
   GENERATRUST — Módulo comercial (CRM)
   Continuación de app.css: mismas variables, mismos radios,
   misma curva. Nada nuevo que no herede del sistema.
   ============================================================ */

/* ============================================================
   TABLERO DE SEIS ETAPAS
   Va JUNTO a .tk (hereda gap y align-items); aquí solo se
   redefine el número de columnas.
   ============================================================ */
.crm-tk6{grid-template-columns:repeat(6,minmax(0,1fr))}
/* Las seis etapas tienen que caber a la vez: nada de columnas que se estiran
   con el texto más largo y empujan el resto fuera de la tarjeta. */
.crm-tk6 .tk__col,
.crm-tk6 .tk__col > *{min-width:0}
.crm-tk6 .crm-nom,
.crm-tk6 .crm-op b,
.crm-tk6 .crm-sub{overflow-wrap:anywhere}

/* La tarjeta se adapta al ancho de SU columna, no al de la pantalla: con seis
   etapas a la vez la columna puede quedar en 140px y ahí sobra todo lo accesorio. */
.crm-tk6 .tk__col{container-type:inline-size}
.crm-tk6 .crm-nom{-webkit-line-clamp:3}
@container (max-width:200px){
  .tk__col .crm-op{padding:10px}
  .tk__col .crm-nom{font-size:.8rem;-webkit-line-clamp:4}
  .tk__col .crm-cli{display:none}                    /* el constituyente se lee en la ficha */
  .tk__col .crm-din em{margin-left:0;flex-basis:100%}/* la estructuración cae a su línea */
  .tk__col .crm-din b{font-size:.98rem}
  .tk__col .crm-pie{gap:6px}
  .tk__col .crm-pie > span:last-child{flex:1 1 100%;white-space:normal;line-height:1.35}
  .tk__col .crm-op .b--sm{width:100%;justify-content:center;padding-left:6px;padding-right:6px}
}

/* Cabecera de columna: dos líneas más bajo el .tk__ch existente */
.crm-tk6 .tk__ch{padding:3px 5px 7px}
.crm-tk6 .tk__ch b{
  font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;line-height:1.25;
  min-width:0;                       /* el nombre de la etapa se parte, no se recorta */
}
.crm-tot{padding:0 5px 11px}
.crm-tot b{
  display:block;font-size:.82rem;font-weight:600;color:var(--tinta);
  font-variant-numeric:tabular-nums;line-height:1.3;
}
.crm-tot span{
  display:block;font-size:.7rem;color:var(--tinta-3);line-height:1.4;
  font-variant-numeric:tabular-nums;
}

/* Columna que recibe el arrastre */
.crm-col--sobre{
  background:#e9ebf2;
  outline:1px dashed #b9bece;outline-offset:-6px;
}
/* Columna que NO puede recibir: cumplimiento sin aprobar */
.crm-col--no{
  background:var(--rojo-cl);
  outline:1px dashed #e0a49d;outline-offset:-6px;
}
.tk__col{transition:background .18s var(--ease)}

/* Columna vacía: nunca "Nada aquí" */
.crm-vac{
  border:1px dashed #ccd0dc;border-radius:4px;min-height:96px;
  padding:16px 13px;font-size:.76rem;color:var(--tinta-3);line-height:1.45;
}
.crm-vac .b{margin-top:11px}

/* ============================================================
   TARJETA DE OPORTUNIDAD — hermana de .tj
   ============================================================ */
.crm-op{
  background:var(--panel);border:1px solid var(--linea);border-radius:4px;
  padding:12px 13px;margin-bottom:9px;cursor:grab;
  transition:box-shadow .22s var(--ease),transform .22s var(--ease),border-color .22s;
}
.crm-op:last-child{margin-bottom:0}
.crm-op:hover{box-shadow:0 6px 18px -8px rgba(22,25,60,.3);transform:translateY(-1px);border-color:#d0d2dc}
.crm-op:active{cursor:grabbing}

/* Borde izquierdo = MOVIMIENTO (no etapa) */
.crm-op--ojo{border-left:3px solid var(--ambar)}
.crm-op--mal{border-left:3px solid var(--rojo)}

/* Arrastrando */
.crm-op--arr{opacity:.5;transform:rotate(1.5deg);cursor:grabbing;box-shadow:none}

/* Llegada tras el drop */
.crm-op--nueva{animation:crmEntra .26s var(--ease) both,crmDestello .4s var(--ease) both}
@keyframes crmEntra{from{transform:scale(.96);opacity:.6}to{transform:none;opacity:1}}
@keyframes crmDestello{
  0%{box-shadow:inset 3px 0 0 var(--champagne)}
  70%{box-shadow:inset 3px 0 0 var(--champagne)}
  100%{box-shadow:inset 3px 0 0 transparent}
}
/* Rebote del "no" por cumplimiento */
@keyframes crmNo{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-5px)}
  45%{transform:translateX(4px)}
  70%{transform:translateX(-3px)}
}
.crm-op--no{animation:crmNo .18s var(--ease) both;border-color:#e0a49d}

/* 1 · Código y tipo + semáforo */
.crm-cod{
  display:flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:.68rem;color:var(--tinta-3);
  line-height:1.4;margin-bottom:6px;
}
.crm-cod > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-sem{
  margin-left:auto;flex:0 0 auto;width:7px;height:7px;border-radius:50%;
  background:#c3c6d2;
}
.crm-sem--ok{background:var(--verde)}
.crm-sem--ojo{background:var(--ambar)}
.crm-sem--mal{background:var(--rojo)}
.crm-sem--n{background:#c3c6d2}
.crm-sem--late{animation:crmLate .45s ease-in-out 2}
@keyframes crmLate{0%,100%{box-shadow:0 0 0 0 rgba(192,72,63,0)}50%{box-shadow:0 0 0 4px rgba(192,72,63,.28)}}

/* 2 · Nombre y cliente */
.crm-nom{
  font-size:.88rem;font-weight:600;line-height:1.3;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
}
.crm-cli{
  font-size:.74rem;color:var(--tinta-3);line-height:1.4;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* 3 · El dinero */
.crm-din{
  display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-top:9px;
}
.crm-din b{
  font-family:var(--serif);font-size:1.05rem;font-weight:500;letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;
}
.crm-din span{font-size:.72rem;color:var(--tinta-3)}
.crm-din em{
  margin-left:auto;font-style:normal;font-size:.72rem;color:var(--oro);
  font-variant-numeric:tabular-nums;
}

/* 4 · Pie: responsable + próxima acción */
.crm-pie{
  display:flex;align-items:center;gap:8px;margin-top:10px;
  padding-top:9px;border-top:1px solid var(--linea-2);
  font-size:.72rem;color:var(--tinta-3);
}
.crm-pie .tj__av{width:22px;height:22px}
.crm-pie > span{
  display:inline-flex;align-items:center;gap:5px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.crm-pie svg{width:12px;height:12px;flex:0 0 auto}
.crm-pie--ojo > span{color:var(--ambar);font-weight:600}
.crm-pie--mal > span{color:var(--rojo);font-weight:600}
.crm-pie--falta{
  border:1px dashed #e2cf9f;border-radius:4px;padding:5px 9px;
  color:var(--ambar);font-weight:600;background:none;
  font-size:.72rem;
}
.crm-pie--falta:hover{background:var(--ambar-cl)}
.crm-op .et{margin-top:9px}

/* ============================================================
   FRANJA "¿QUÉ SIGUE?" — dentro de la propia tarjeta
   ============================================================ */
.crm-q{
  margin:12px -13px -12px;padding:11px 13px 12px;
  background:var(--ambar-cl);border-top:1px solid #f0dfba;
  border-radius:0 0 4px 4px;
}
.crm-q span{
  display:block;font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  color:#8a6317;font-weight:600;margin-bottom:7px;
}
.crm-q input,.crm-q select{
  width:100%;padding:8px 10px;border-radius:4px;font:inherit;font-size:.79rem;
  border:1px solid #eacf9c;background:var(--panel);color:var(--tinta);
}
.crm-q input:focus,.crm-q select:focus{outline:0;border-color:var(--azul-500)}
.crm-q select{margin-left:auto;width:auto;max-width:150px;flex:1 1 108px;min-width:0}

.crm-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.crm-chips button{
  padding:5px 10px;border-radius:4px;font-size:.72rem;font-weight:600;
  background:var(--panel);border:1px solid #eacf9c;color:var(--tinta-2);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.crm-chips button:hover{border-color:var(--azul-500);color:var(--azul)}
.crm-chips button.on{background:var(--azul);border-color:var(--azul);color:#fff}
.crm-chips .b{margin-left:auto}

/* ============================================================
   BARRA DE PRONÓSTICO DE TRES TRAMOS
   ============================================================ */
.crm-bar3{
  display:flex;height:10px;border-radius:20px;background:#eceef4;overflow:hidden;
}
.crm-bar3 i{display:block;height:100%;transition:width .4s var(--ease)}
.crm-bar3 i.f{background:var(--azul)}
.crm-bar3 i.p{background:var(--azul-500);opacity:.45}

.crm-bar3__r{
  display:block;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tinta-3);font-weight:600;margin-bottom:8px;
}
.crm-bar3__n{
  display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;
  margin-top:8px;font-size:.78rem;color:var(--tinta-2);
  font-variant-numeric:tabular-nums;
}
.crm-bar3__n b{font-weight:600;color:var(--tinta)}

/* Barra segmentada de seis tramos (reparto por etapa) */
.crm-seg6{
  display:flex;height:8px;border-radius:20px;overflow:hidden;background:#eceef4;
  margin:10px 0 8px;
}
.crm-seg6 i{display:block;height:100%;transition:width .4s var(--ease)}

/* ============================================================
   RIEL DE ETAPAS / FILTRO POR LÍNEA
   ============================================================ */
.crm-riel{
  display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.crm-riel::-webkit-scrollbar{height:5px}
.crm-riel::-webkit-scrollbar-thumb{background:#d7d9e2;border-radius:3px}
.crm-riel button{
  flex:0 0 auto;scroll-snap-align:start;
  padding:7px 13px;border-radius:20px;font-size:.75rem;font-weight:600;
  background:var(--panel);border:1px solid var(--linea);color:var(--tinta-2);
  white-space:nowrap;transition:all .22s var(--ease);
}
.crm-riel button:hover{border-color:#d4d4da;color:var(--tinta)}
.crm-riel button.on{background:var(--azul);border-color:var(--azul);color:#fff}
.crm-riel button i{
  font-style:normal;margin-left:5px;font-size:.68rem;opacity:.7;
  font-variant-numeric:tabular-nums;
}
/* El riel de ETAPAS solo existe en móvil; el de filtro por línea, siempre */
@media (min-width:941px){ .crm-riel--etapas{display:none} }

/* Cabecera de la etapa a todo el ancho, en móvil */
.crm-etq{display:none;align-items:center;gap:9px;margin:4px 0 12px}
.crm-etq b{font-size:.78rem;letter-spacing:.11em;text-transform:uppercase}
.crm-etq span{margin-left:auto;font-size:.78rem;font-weight:600;font-variant-numeric:tabular-nums}

/* ============================================================
   HOJA INFERIOR TÁCTIL
   ============================================================ */
.crm-hoja{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--panel);border-radius:8px 8px 0 0;
  padding:20px 18px calc(28px + env(safe-area-inset-bottom));
  box-shadow:0 -18px 44px -18px rgba(22,25,60,.45);
  animation:crmHoja .28s var(--ease) both;
  max-height:82vh;overflow-y:auto;
}
@keyframes crmHoja{from{transform:translateY(100%)}to{transform:none}}
.crm-hoja[hidden]{display:none}
.crm-hoja__f{
  position:fixed;inset:0;z-index:59;
  background:rgba(13,17,48,.5);backdrop-filter:blur(2px);
}
.crm-hoja__f[hidden]{display:none}
.crm-hoja__t{margin-bottom:16px}
.crm-hoja__t b{display:block;font-family:var(--serif);font-size:1.05rem;font-weight:500;line-height:1.3}
.crm-hoja__t span{display:block;font-size:.75rem;color:var(--tinta-3);margin-top:3px}
.crm-hoja .b{width:100%;justify-content:center;padding:13px 18px}
.crm-hoja__l{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.crm-hoja__l button{
  width:100%;text-align:left;padding:11px 14px;border-radius:var(--r);
  font-size:.83rem;font-weight:500;
  background:var(--panel);border:1px solid var(--linea);color:var(--tinta);
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.crm-hoja__l button:hover{background:#fafafa;border-color:#d4d4da}
@media (min-width:941px){ .crm-hoja,.crm-hoja__f{display:none} }

/* ============================================================
   RESPONSIVO — coherente con app.css (1180 · 940 · 560)
   ============================================================ */
@media (max-width:1180px){
  .crm-tk6{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:940px){
  /* En móvil el tablero no se encoge: se apaga y manda el riel */
  .crm-tk6{display:none}
  .crm-etq{display:flex}
  .crm-op{padding:14px}
  .crm-nom{font-size:.9rem}
  .crm-q{margin:14px -14px -14px;padding:12px 14px 14px}
  .crm-bar3__n{margin-top:9px}
  /* Los avisos ponen el botón DEBAJO del texto */
  .aviso .crm-acc{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
  .aviso .crm-acc .b{width:auto}
}

@media (max-width:560px){
  .crm-din em{margin-left:0;flex-basis:100%}
  .crm-chips .b{margin-left:0;width:100%;justify-content:center}
  .crm-q select{max-width:none;flex:1 1 100%}
  .crm-bar3__n{font-size:.76rem}
  .crm-hoja{padding:18px 15px calc(24px + env(safe-area-inset-bottom))}
  /* Fila de obligaciones: el botón baja, nunca se aprieta a la derecha */
  .reg__i .b{margin-left:0}
}

/* ============================================================
   MOVIMIENTO REDUCIDO
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .crm-op,.crm-op--nueva,.crm-op--no,.crm-sem--late,.crm-hoja{
    animation:none;transition:none;
  }
  .crm-bar3 i,.crm-seg6 i,.tk__col{transition:none}
  .crm-op:hover{transform:none}
}

/* ============================================================
   Tabla ancha — cuando hay más columnas que ancho de pantalla
   Antes que apretar el nombre a una palabra por línea, la tabla
   toma su ancho natural y se desliza dentro de su .tb__wrap.
   ============================================================ */
.crm-tb--ancha{min-width:1210px}
.crm-tb--ancha td,
.crm-tb--ancha th{white-space:nowrap}
.crm-tb--ancha td > b{display:block}
.crm-tb--ancha td > b + span{display:block;margin-top:1px}
@media (max-width:560px){ .crm-tb--ancha{min-width:1060px} }