/* Agentes de IA (js/vistas/agentes.js): la lista de Automatizar → Agentes y #/agentes/<id> (configuración y prueba
   rápida). design-system/pages/crm.md («Agentes»). Prefijo crm-ag-; las piezas compartidas están en crm.css.
   Celular primero; las tres columnas de computadora usan container queries sobre .crm-vista. */

/* ============ Lista (ui.tabla) ============ */
.crm-ag-nom{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%;vertical-align:middle}
.crm-ag-nom-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650}
.crm-ag-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--tinte-2);color:var(--acento-texto);flex:none}
/* El ícono del agente a la izquierda del nombre y de qué hace */
.crm-ag-tabla .crm-tabla .crm-td-prin{position:relative;padding-left:58px}
.crm-ag-tabla .crm-tabla .crm-td-prin .crm-ag-ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:11px}
.crm-ag-tabla .crm-tabla .crm-td-prin .crm-ag-ic .crm-i{width:19px;height:19px}
.crm-ag-tabla .crm-tabla .crm-td-prin small.crm-ver{display:none!important}
.crm-ag-tabla .crm-tabla tbody td{height:60px}
.crm-ag-hoy{display:inline-flex;align-items:baseline;gap:4px;font-variant-numeric:tabular-nums}
.crm-ag-hoy small{display:none;font-size:13px;color:var(--suave)}
.crm-ag-fallas{font-weight:700}
.crm-ag-sw{display:inline-flex;align-items:center;min-height:44px}
/* Tarjetas (abajo de 920 px de lista): ícono de 44 px, nombre, qué hace y el modelo; a la derecha las de hoy y las fallas */
@container tabla (max-width:919px){
  .crm-ag-tabla .crm-tabla tbody tr{grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;column-gap:10px;padding:12px 4px 12px 14px}
  .crm-ag-tabla .crm-tabla .crm-td-sel{grid-row:1/span 2;align-self:center;margin-top:0}
  .crm-ag-tabla .crm-tabla .crm-td-prin{grid-column:2;grid-row:1;padding-left:56px!important;min-height:44px}
  .crm-ag-tabla .crm-tabla .crm-td-prin .crm-ag-ic{left:0;top:4px;transform:none;width:44px;height:44px;border-radius:13px}
  .crm-ag-tabla .crm-tabla .crm-td-prin>small:not(.crm-ver){white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;display:block!important}
  .crm-ag-tabla .crm-tabla td[data-etiqueta="Modelo"]{grid-column:2;grid-row:2;padding-left:56px!important;margin-top:4px;color:inherit}
  .crm-ag-tabla .crm-tabla td[data-etiqueta="Hoy"]{grid-column:3;grid-row:1;justify-content:flex-end;padding-right:0!important;align-self:start}
  .crm-ag-tabla .crm-tabla td[data-etiqueta="Hoy"]::before,.crm-ag-tabla .crm-tabla td[data-etiqueta="Fallas"]::before{display:none}
  .crm-ag-tabla .crm-ag-hoy{flex-direction:column;align-items:flex-end;gap:0}
  .crm-ag-tabla .crm-ag-hoy b{font-size:15px}
  .crm-ag-tabla .crm-ag-hoy small{display:block}
  .crm-ag-tabla .crm-tabla td[data-etiqueta="Fallas"]{grid-column:3;grid-row:2;justify-content:flex-end;padding-right:0!important;font-size:13px;min-height:0}
  .crm-ag-tabla .crm-tabla td[data-etiqueta="Fallas"] span:not(.crm-err){visibility:hidden}
  .crm-ag-tabla .crm-tabla td[data-etiqueta="Costo de hoy"]{display:none!important}
  .crm-ag-tabla .crm-tabla .crm-td-menu{grid-column:4;grid-row:1/span 2;align-self:center;margin-top:0}
}

/* ============ Pantalla del agente ============ */
.crm-ag-atras{margin-bottom:2px}
.crm-ag-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:4px 16px 0;align-items:start}
.crm-ag-lista{display:none;flex-direction:column;gap:8px;min-width:0}
.crm-ag-card{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:var(--hoja);box-shadow:var(--sombra);text-align:left;width:100%;min-width:0}
.crm-ag-card.crm-sel{box-shadow:0 0 0 2px var(--acento-texto),var(--sombra)}
@media (hover:hover){.crm-ag-card:hover{background:var(--campo)}.crm-ag-card.crm-sel:hover{background:var(--hoja)}}
.crm-ag-card-txt{min-width:0;display:flex;flex-direction:column}
.crm-ag-card-txt>b{font-size:16px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-ag-card-txt>small{font-size:13.5px;color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-ag-card-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;min-width:0}
.crm-ag-card-chips .crm-chip{white-space:normal;height:auto;min-height:24px;padding-top:3px;padding-bottom:3px;line-height:1.25}
.crm-ag-card-der{display:flex;flex-direction:column;align-items:flex-end;font-size:13px;color:var(--suave);font-variant-numeric:tabular-nums;white-space:nowrap;align-self:start}
.crm-ag-card-der b{font-size:15px;color:var(--texto)}

/* Configuración */
.crm-ag-config{padding:16px;min-width:0}
.crm-ag-titulo h2{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1.2;overflow-wrap:anywhere}
.crm-ag-sub{font-size:14px;color:var(--suave);margin-top:2px;overflow-wrap:anywhere}
.crm-ag-sub:empty{display:none}
.crm-ag-aviso{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--error-fondo);box-shadow:inset 0 0 0 1px var(--error-borde)}
.crm-ag-aviso>.crm-i{color:var(--error);margin-top:1px}
.crm-ag-aviso>b{color:var(--error);font-size:15px}
.crm-ag-aviso>p{grid-column:2;font-size:14px;overflow-wrap:anywhere}
.crm-ag-aviso>.crm-btn{grid-column:2;justify-self:start;margin-top:8px}
.crm-ag-aviso .crm-ag-aviso-motivo{color:var(--suave);margin-top:4px}
.crm-ag-aviso-ok{background:var(--ok-fondo);box-shadow:none}
.crm-ag-aviso-ok>.crm-i,.crm-ag-aviso-ok>b{color:var(--ok-texto)}
.crm-ag-cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.crm-ag-cifras>div{background:var(--campo);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;min-width:0}
.crm-ag-cifras b{font-size:18px;font-weight:750;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-ag-cifras span{font-size:12.5px;color:var(--suave);line-height:1.3}
.crm-ag-modelos{display:grid;gap:8px}
.crm-ag-modelo{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 14px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--linea);text-align:left;width:100%;background:var(--hoja);min-width:0}
.crm-ag-modelo:disabled{cursor:default;opacity:1}
.crm-ag-modelo.crm-sel{box-shadow:inset 0 0 0 2px var(--negro)}
.crm-ag-radio{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--suave);flex:none}
.crm-ag-modelo.crm-sel .crm-ag-radio{box-shadow:inset 0 0 0 7px var(--negro)}
.crm-ag-modelo-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.crm-ag-modelo-txt b{font-size:15px;font-weight:650}
.crm-ag-modelo-txt small{font-size:13px;color:var(--suave);line-height:1.3}
.crm-ag-costo{font-size:12.5px;color:var(--suave);font-variant-numeric:tabular-nums}
.crm-ag-modelo .crm-chip{margin-left:auto}
@media (hover:hover){.crm-ag-modelo:not(:disabled):hover{background:var(--campo)}}
.crm-ag-modelo-sec>.crm-btn-texto{margin-top:4px}
.crm-ag-respaldo{margin-top:8px}
.crm-ag-instr{min-height:150px}
.crm-ag-herr-ic{width:36px!important;height:36px!important;border-radius:10px!important;display:grid;place-items:center;background:var(--campo);flex:none}
.crm-sw-fila .crm-mono{font-size:13.5px}
.crm-ag-fuentes{margin-bottom:4px}
.crm-ag-fuente{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 6px 8px 14px;min-width:0}
.crm-ag-fuente+.crm-ag-fuente{box-shadow:inset 0 1px 0 var(--linea)}
.crm-ag-fuente .crm-ic-caja{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--campo);flex:none}
.crm-ag-fuente .crm-fila-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.crm-ag-fuente .crm-fila-txt b{font-size:15px;font-weight:600;overflow-wrap:anywhere}
.crm-ag-fuente .crm-fila-txt small{font-size:13px;color:var(--suave);overflow-wrap:anywhere}
.crm-ag-caja{display:flex;align-items:center;justify-content:space-between;gap:10px 12px;flex-wrap:wrap;padding:10px 12px 10px 14px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--linea);background:var(--hoja);margin-top:8px}
.crm-ag-caja-txt{flex:1 1 160px;min-width:0;display:flex;flex-direction:column}
.crm-ag-caja-txt b{font-size:15px;font-weight:600}
.crm-ag-caja-txt small{font-size:13px;color:var(--suave)}
.crm-ag-caja .crm-stepper{flex:none}
.crm-ag-caja .crm-stepper output{min-width:92px}
.crm-ag-mas{margin-top:6px}
.crm-ag-mas>summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14.5px;font-weight:650;color:var(--acento-texto);cursor:pointer;list-style:none}
.crm-ag-mas>summary::-webkit-details-marker{display:none}
.crm-ag-mas>summary .crm-i{transition:transform .2s}
.crm-ag-mas[open]>summary .crm-i{transform:rotate(180deg)}
.crm-ag-mas .crm-sw-lista.crm-sw-fila{box-shadow:inset 0 0 0 1px var(--linea)}
.crm-ag-pie{position:relative;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px 12px;margin:20px -16px -16px;padding:12px 16px;border-radius:0 0 var(--r2) var(--r2);background:var(--hoja);box-shadow:inset 0 1px 0 var(--linea);z-index:2}
.crm-ag-pie.crm-ag-sucio{position:sticky;bottom:calc(env(safe-area-inset-bottom) + var(--tab-alto) - 16px);box-shadow:inset 0 1px 0 var(--linea),0 -6px 16px rgba(10,10,20,.06)}
.crm-ag-pie-txt{flex:1 1 140px;font-size:13px;color:var(--suave);min-width:0}
.crm-ag-seg-fuente{margin-bottom:4px}

/* Prueba rápida */
.crm-ag-prueba{padding:16px;min-width:0;display:flex;flex-direction:column}
.crm-ag-prueba-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;margin:-8px 0 4px}
.crm-ag-prueba-cab h3{font-size:17px;font-weight:700}
.crm-ag-hilo{display:flex;flex-direction:column;gap:4px;max-height:min(60dvh,560px);overflow-y:auto;overscroll-behavior:contain;padding:2px 0 8px;min-height:80px}
.crm-ag-dia{align-self:center;font-size:12.5px;font-weight:650;color:var(--suave);margin:8px 0 4px}
.crm-ag-msg{display:flex;flex-direction:column;gap:3px;max-width:88%;min-width:0}
.crm-ag-cli{align-self:flex-start}
.crm-ag-bot{align-self:flex-end;align-items:flex-end}
.crm-ag-burbuja{padding:9px 13px;border-radius:18px;font-size:15.5px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}
.crm-ag-cli .crm-ag-burbuja{background:var(--burbuja-cliente);border-top-left-radius:6px}
.crm-ag-bot .crm-ag-burbuja{background:var(--burbuja-bot);box-shadow:inset 0 0 0 1px var(--tinte-2)}
.crm-ag-bot .crm-ag-burbuja:first-of-type{border-top-right-radius:6px}
.crm-ag-autor{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:650;color:var(--suave);margin-top:6px}
.crm-ag-pie-msg{font-size:12.5px;color:var(--suave);font-variant-numeric:tabular-nums}
.crm-ag-pie-msg:empty{display:none}
.crm-ag-tool{align-self:flex-end;display:inline-flex;align-items:flex-start;gap:6px;margin:6px 0 2px;padding:5px 10px;border-radius:10px;background:var(--campo);font:12.5px/1.35 var(--mono);color:var(--suave);max-width:92%;overflow-wrap:anywhere}
.crm-ag-tool .crm-i{width:14px;height:14px;color:var(--acento-texto);flex:none;margin-top:1px}
.crm-ag-nota{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-size:13px;color:var(--suave);margin:4px 0}
.crm-ag-nota>span{flex:1 1 160px;min-width:0}
.crm-ag-nota .crm-btn-texto{min-height:36px;font-size:13px;padding:0 4px}
.crm-ag-falla{margin-top:8px;padding:12px 14px;border-radius:14px;background:var(--error-fondo);box-shadow:inset 0 0 0 1px var(--error-borde)}
.crm-ag-falla>b{display:flex;align-items:center;gap:6px;color:var(--error);font-size:15px}
.crm-ag-falla>p{font-size:14px;margin-top:2px;overflow-wrap:anywhere}
.crm-ag-falla .crm-ej-acc{margin-top:8px}
.crm-ag-falla .crm-ej-acc .crm-btn{flex:0 0 auto}
.crm-ag-vacio{font-size:14px;color:var(--suave);padding:8px 2px}
.crm-ag-escribiendo{display:inline-flex;gap:4px;padding:12px 14px;border-radius:18px;background:var(--burbuja-bot)}
.crm-ag-escribiendo i{width:7px;height:7px;border-radius:50%;background:var(--tenue);animation:crm-ag-punto 1.2s ease-in-out infinite}
.crm-ag-escribiendo i:nth-child(2){animation-delay:.15s}.crm-ag-escribiendo i:nth-child(3){animation-delay:.3s}
@keyframes crm-ag-punto{40%{transform:translateY(-3px);opacity:.6}}
.crm-ag-comp{display:flex;gap:6px;align-items:center;margin-top:8px}
.crm-ag-comp input{flex:1;min-width:0;min-height:44px;border:0;border-radius:22px;background:var(--campo);padding:0 16px;font-size:16px;outline:none;color:var(--texto)}
.crm-ag-comp input:focus{box-shadow:0 0 0 2px var(--acento-texto)}
.crm-ag-comp input::placeholder{color:var(--suave);opacity:1}
.crm-ag-enviar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--negro);color:var(--sobre-negro);flex:none}
.crm-ag-enviar:disabled{opacity:.45;cursor:default}
.crm-ag-ayuda-prueba{margin-top:8px}

/* Computadora: lista de 280 px, configuración y prueba de 340 px fija al bajar */
@container (min-width:1060px){
  .crm-ag-grid{grid-template-columns:280px minmax(0,1fr) 340px;gap:20px}
  .crm-ag-lista{display:flex;position:sticky;top:12px;max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;padding:2px 2px 8px}
  .crm-ag-prueba{position:sticky;top:12px;max-height:calc(100dvh - 24px)}
  .crm-ag-hilo{max-height:none;flex:1 1 auto;min-height:120px}
  .crm-ag-atras{display:none}
}
@container (min-width:760px) and (max-width:1059px){
  .crm-ag-grid{grid-template-columns:minmax(0,1fr) 320px;gap:20px}
  .crm-ag-prueba{position:sticky;top:12px;max-height:calc(100dvh - 24px)}
  .crm-ag-hilo{max-height:none;flex:1 1 auto;min-height:120px}
}
@media (min-width:1000px){
  .crm-ag-grid{padding:4px 28px 0}
  .crm-ag-pie.crm-ag-sucio{bottom:-28px}
}
@media (prefers-reduced-motion:reduce){.crm-ag-escribiendo i{animation:none}}