/* Bandeja (js/vistas/bandeja.js) y paleta «Buscar o hacer» (js/vistas/paleta.js). design-system/pages/crm.md: tarjetas
   en el celular, renglones dentro de una tarjeta desde 600 px de lista y tabla desde 900 px (container queries sobre
   .crm-vista, que se angosta cuando la conversación está abierta en computadora). Todo dentro de .crm-bj. */

/* ============ Cabecera fija, búsqueda y vistas ============ */
.crm-bj .crm-bj-cab{padding-bottom:6px}
.crm-bj .crm-bj-buscar{margin-top:10px}
.crm-bj .crm-bj-vtabs{scroll-padding:0 16px}
.crm-bj .crm-vtab{touch-action:pan-x}

/* ============ Resumen, orden, filtros y elegir ============ */
.crm-bj-resumen{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 8px;padding:4px 16px 2px;font-size:13.5px;color:var(--suave);min-height:44px}
.crm-bj-resumen-t{min-width:0;font-variant-numeric:tabular-nums}
.crm-bj-resumen b{color:var(--texto);font-weight:650}
.crm-bj-resumen .crm-tarde{color:var(--error);font-weight:650}
.crm-bj-resumen-acc{display:flex;gap:2px;flex:none;margin-left:auto}
.crm-bj-resumen-acc .crm-btn-texto{font-size:13.5px;color:var(--texto);min-height:44px}
.crm-bj-resumen-acc .crm-btn-texto.crm-activo{color:var(--acento-texto)}
.crm-bj-puestos{padding:0 16px 8px}
.crm-bj-elegir{display:flex;align-items:center;justify-content:space-between;gap:4px 8px;flex-wrap:wrap;padding:0 16px 6px;font-size:14px;min-height:44px}
@container (max-width:479px){.crm-bj-filtrar-t{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
/* Solo con el ícono, el botón conserva su zona de toque de 44 × 44. */
.crm-bj-filtrar{min-width:44px;justify-content:center}

/* ============ Lista ============ */
.crm-bj-cuerpo{padding:0 16px}
.crm-bj-lista{display:flex;flex-direction:column;gap:8px;min-width:0}
.crm-bj-th{display:none}
.crm-bj-grupo{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:12px 4px 0;font-size:13.5px;font-weight:650;color:var(--suave);list-style:none}
.crm-bj-grupo:first-child{padding-top:2px}
.crm-bj-vacio{list-style:none}
.crm-bj-mas{margin-top:10px}
.crm-vista.crm-bj.crm-eligiendo{padding-bottom:calc(env(safe-area-inset-bottom) + var(--tab-alto) + 96px)}

/* Fila (tarjeta en el celular) */
.crm-bj-fila{list-style:none}
.crm-bj .crm-fila-conv{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"av nom hora" "av prev prev" "av chips chips";column-gap:12px;row-gap:1px;padding:12px 14px 12px 12px;background:var(--hoja);border-radius:var(--r2);box-shadow:var(--sombra);cursor:pointer;outline-offset:-2px;transition:background-color .15s,transform .25s var(--curva)}
.crm-bj .crm-fila-conv>.crm-av{grid-area:av;align-self:start;margin-top:2px}
.crm-bj .crm-fila-conv.crm-sel{background:var(--tinte)}
.crm-bj .crm-fila-conv.crm-elegida{background:var(--tinte)}
.crm-fc-check{display:none}
.crm-bj.crm-eligiendo .crm-fila-conv>.crm-av{visibility:hidden}
.crm-bj.crm-eligiendo .crm-fc-check{display:grid;grid-area:av;place-items:center;width:44px;height:44px;z-index:1;align-self:start;margin-top:2px}
.crm-fc-casilla{width:22px;height:22px;border-radius:7px;box-shadow:inset 0 0 0 2px var(--suave);display:grid;place-items:center;color:#fff;transition:background-color .15s}
.crm-fc-casilla .crm-i{width:14px;height:14px;stroke-width:3.2;visibility:hidden}
.crm-fila-conv.crm-elegida .crm-fc-casilla{background:var(--acento-relleno);box-shadow:none}
.crm-fila-conv.crm-elegida .crm-fc-casilla .crm-i{visibility:visible}
.crm-fc-nom{grid-area:nom;display:flex;align-items:center;gap:6px;min-width:0;font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.crm-fc-nom>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.crm-no-leida .crm-fc-nom{font-weight:750}
.crm-fc-otros{display:inline-flex;gap:3px;flex:none}
.crm-fc-otros .crm-logo-canal{width:16px;height:16px;border-radius:5px}
.crm-fc-otros .crm-logo-canal .crm-lg{width:10px;height:10px}
.crm-fc-hora{grid-area:hora;font-size:13px;color:var(--suave);font-variant-numeric:tabular-nums;white-space:nowrap;align-self:center}
.crm-fc-hora.crm-tarde{color:var(--error);font-weight:650}
.crm-fc-prev{grid-area:prev;display:flex;align-items:center;gap:8px;min-width:0;font-size:14.5px;color:var(--suave);line-height:1.4}
.crm-fc-linea{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-no-leida .crm-fc-prev{color:var(--texto)}
.crm-fc-quien{font-weight:600;color:var(--suave)}
.crm-fc-mp{font-weight:650;color:var(--acento-texto)}
.crm-fc-extra-pc{display:none!important}
.crm-fc-chips{grid-area:chips;display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:7px;min-width:0}
.crm-fc-chips .crm-chip{max-width:100%}
.crm-fc-chips .crm-fc-n{margin-left:auto}
.crm-fc-vacia{display:none}
.crm-fc-atiende .crm-av.crm-av-xs{width:20px;height:20px;font-size:10px;margin-left:-4px;box-shadow:none;background:var(--campo-hover);color:var(--texto)}
.crm-fc-menu{display:none!important}
@media (hover:hover){.crm-bj .crm-fila-conv:hover .crm-fc-nom>span:first-child{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}}

/* Desde 600 px de lista: renglones con línea divisoria dentro de una tarjeta */
@container (min-width:600px){
  .crm-bj-lista{gap:0;background:var(--hoja);border-radius:var(--r2);box-shadow:var(--sombra);overflow:hidden}
  .crm-bj-fila{border-radius:0;content-visibility:auto;contain-intrinsic-size:auto 92px}
  .crm-bj .crm-fila-conv{border-radius:0;box-shadow:none;padding:12px 16px}
  .crm-bj-fila+.crm-bj-fila .crm-fila-conv,.crm-bj-grupo+.crm-bj-fila .crm-fila-conv{box-shadow:inset 0 1px 0 var(--linea)}
  .crm-bj-grupo{padding:9px 16px;background:var(--campo);font-size:13px}
  .crm-bj-grupo:first-child{padding-top:9px}
  .crm-bj-lista>.crm-esq{border-radius:0;box-shadow:inset 0 -1px 0 var(--linea);margin:0!important}
  .crm-bj-lista>li>.crm-error-caja{margin:12px}
  @media (hover:hover){.crm-bj .crm-fila-conv:hover{background:var(--campo)}.crm-bj .crm-fila-conv.crm-sel:hover,.crm-bj .crm-fila-conv.crm-elegida:hover{background:var(--tinte)}}
}

/* Desde 900 px de lista: tabla con encabezado fijo y orden por columna */
@container (min-width:900px){
  .crm-bj-th{display:grid;grid-template-columns:44px minmax(0,1fr) 168px 150px 84px 40px;column-gap:12px;align-items:center;min-height:40px;padding:0 16px;position:sticky;top:var(--bj-cab,0px);z-index:3;background:var(--hoja);border-radius:var(--r2) var(--r2) 0 0;box-shadow:inset 0 -1px 0 var(--linea)}
  .crm-bj-th .crm-th-cli{grid-column:1/3}
  .crm-bj-th button{position:relative;display:inline-flex;align-items:center;gap:4px;min-height:40px;font-size:13px;font-weight:650;color:var(--suave);white-space:nowrap}
  .crm-bj-th [aria-sort="ascending"] button,.crm-bj-th [aria-sort="descending"] button{color:var(--texto)}
  .crm-bj-th .crm-i{width:14px;height:14px}
  .crm-bj-th .crm-der{justify-self:end}
  .crm-bj-lista{border-radius:0 0 var(--r2) var(--r2)}
  .crm-bj .crm-fila-conv{grid-template-columns:44px minmax(0,1fr) 168px 150px 84px 40px;grid-template-areas:"av nom etapa atiende hora menu" "av prev etapa atiende hora menu";align-items:center;row-gap:0}
  .crm-bj .crm-fila-conv>.crm-av,.crm-bj.crm-eligiendo .crm-fc-check{align-self:center;margin-top:0}
  .crm-fc-chips{display:contents}
  .crm-fc-etapa{grid-area:etapa;justify-self:start}
  .crm-fc-vacia{display:block}
  .crm-fc-atiende{grid-area:atiende;justify-self:start}
  .crm-fc-extra{display:none!important}
  .crm-fc-linea{flex:0 1 auto}
  .crm-fc-extra-pc{display:inline-flex!important;flex:none;max-width:55%}
  .crm-fc-chips .crm-fc-n{grid-area:hora;align-self:end;justify-self:end;margin:0}
  .crm-fc-hora{text-align:right;justify-self:end;align-self:start;margin-top:2px}
  .crm-fc-menu{display:grid!important;position:absolute;z-index:2;right:12px;top:50%;margin-top:-18px;opacity:0;transition:opacity .15s}
  .crm-bj-fila:hover .crm-fc-menu,.crm-bj-fila:focus-within .crm-fc-menu,.crm-fc-menu[aria-expanded="true"]{opacity:1}
}

/* ============ Computadora ============ */
@media (min-width:1000px){
  .crm-bj .crm-bj-buscar{max-width:560px}
  .crm-bj-resumen,.crm-bj-puestos,.crm-bj-elegir{padding-left:28px;padding-right:28px}
  .crm-bj-cuerpo{padding:0 28px}
  .crm-bj .crm-bj-vtabs{scroll-padding:0 28px}
  .crm-vista.crm-bj.crm-eligiendo{padding-bottom:96px}
}

/* ============ Paleta «Buscar o hacer» ============ */
.crm-paleta .crm-opcion{min-height:52px}
.crm-paleta .crm-opcion .crm-pal-ic{width:32px;height:32px;flex:none;border-radius:9px;display:grid;place-items:center;background:var(--campo);color:var(--suave)}
.crm-paleta .crm-opcion .crm-pal-ic .crm-i{width:17px;height:17px}
.crm-paleta .crm-opcion .crm-pal-ic.crm-acento{background:var(--tinte-2);color:var(--acento-texto)}
.crm-paleta .crm-opcion .crm-av{width:32px;height:32px;font-size:12px}
.crm-paleta .crm-opcion small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-paleta .crm-opcion .crm-txt>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-paleta .crm-opcion .crm-chip{flex:none}
.crm-paleta .crm-pal-cargando{display:flex;align-items:center;gap:8px}
.crm-paleta .crm-pal-cargando .crm-gira{width:14px;height:14px}
.crm-paleta .crm-opcion kbd{flex:none}
@media (max-width:999px){.crm-paleta .crm-opcion kbd{display:none}}