/* conexiones-agente.css -- el agente dentro de la conversacion (public/conexiones-agente.js; invariante 13 de CLAUDE.md). Cuarto Oscuro: SOLO tokens de cuarto-oscuro.css, ningun color, sombra ni
   duracion escritos a mano (paridad-cuarto-oscuro). Forma: pildora = se toca; 4 px = contenido (el bloque del agente y el borrador son contenido de la conversacion, como la tarjeta de una tarea);
   `--urge` solo para un error; el punto de marca es `--marca-punto`. Sin animacion propia. Reusa las clases de conexiones.css (.cx-pil, .cx-hora, .cx-mas, .cx-err, .cx-p, .cx-sw, .cx-lb) y no
   decide nada por @media de la ventana: con el chat de Xarpie abierto el CRM recibe unos 420 px aunque la ventana mida 1280, asi que el ancho lo manda la columna. */

.cx-ag[hidden]{ display:none; }
.cxag-pt{ display:inline-block; flex:none; width:8px; height:8px; border-radius:var(--r-pildora); background:var(--marca-punto); }

/* ---- el bloque del agente dentro de la lista de mensajes ---- */
.cxag-msg{ max-width:460px; padding:var(--e-3) var(--e-4); border-radius:var(--r); background:var(--piedra); }
.cxag-ch{ background:transparent; border:1px solid var(--linea); }
.cxag-rot{ display:flex; align-items:flex-start; gap:var(--e-2); min-height:20px; margin:0 0 var(--e-2); font-size:var(--t-meta); line-height:1.4; color:var(--apagado); }
.cxag-rot-g{ flex:1 1 auto; min-width:0; display:flex; align-items:flex-start; gap:var(--e-2); }
.cxag-rot-g .cxag-pt{ margin-top:4px; }
.cxag-rot-t{ min-width:0; overflow-wrap:anywhere; }
.cxag-rot .cx-hora{ flex:none; white-space:nowrap; }
.cxag-rot .cx-mas-m{ flex:none; margin:-2px 0 0; }
.cxag-txt{ margin:0; font-size:var(--t-texto); line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--texto); }
.cxag-aviso{ margin:var(--e-2) 0 0; font-size:var(--t-meta); line-height:1.4; color:var(--apagado); }
.cxag-ops{ list-style:none; margin:var(--e-3) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--e-2); }
.cxag-op{ display:block; width:100%; box-sizing:border-box; min-height:36px; padding:var(--e-2) var(--e-4); border:0; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--tinta); font:inherit; font-size:var(--t-texto); line-height:1.35; text-align:left; overflow-wrap:anywhere; cursor:pointer; }
.cxag-op:focus-visible{ outline:2px solid var(--tinta); outline-offset:2px; }
.cxag-op:active{ opacity:.85; }
.cxag-op-x{ color:var(--medio); cursor:default; }
@media (pointer:coarse){ .cxag-op{ min-height:44px; } }

/* ---- el panel sobre la caja: pidiendo, error, el borrador privado, la idea del agente y la nota ---- */
.cxag-panel{ margin:0 var(--e-4) var(--e-1) var(--e-5); outline:none; }
.cxag-panel[hidden]{ display:none; }
:root[data-theme] .cxag-panel:focus-visible{ outline:none; }
.cxag-panel .cx-err{ margin:var(--e-2) 0 0; }
.cxag-borr{ padding:var(--e-3) var(--e-4); border-radius:var(--r); background:var(--piedra); }
.cxag-borr-t{ display:flex; align-items:center; gap:var(--e-2); margin:0 0 var(--e-2); font-size:var(--t-meta); color:var(--apagado); }
.cxag-borr-x{ margin:0; max-height:22vh; overflow:auto; font-size:var(--t-texto); line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--tinta); }
.cxag-honesto{ margin:var(--e-2) 0 0; font-size:var(--t-meta); line-height:1.4; color:var(--apagado); }
.cxag-bs{ display:flex; flex-wrap:wrap; gap:var(--e-2); margin-top:var(--e-3); }
.cxag-p{ margin:var(--e-3) 0 0; font-size:var(--t-texto); line-height:1.45; color:var(--medio); }
.cxag-est{ display:flex; align-items:center; gap:var(--e-2); margin:var(--e-2) 0; font-size:var(--t-meta); color:var(--medio); }
.cxag-borr .cxag-est{ margin:var(--e-2) 0 0; }
.cxag-fallo{ padding:var(--e-3) var(--e-4); border-radius:var(--r); background:var(--piedra); }
.cxag-idea{ display:inline-flex; align-items:center; gap:var(--e-2); max-width:100%; min-height:36px; padding:0 var(--e-4); border:0; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--tinta); font:inherit; font-size:var(--t-meta); text-align:left; cursor:pointer; }
.cxag-idea:active{ opacity:.85; }
.cxag-idea:focus-visible{ outline:2px solid var(--tinta); outline-offset:2px; }
@media (pointer:coarse){ .cxag-idea{ min-height:44px; } }
.cxag-nota{ display:flex; align-items:center; gap:var(--e-2); margin:var(--e-1) 0 0; font-size:var(--t-meta); color:var(--apagado); }

/* ---- la hoja de ajustes: los interruptores y como se presenta el agente ---- */
.cxag-aj .cx-sw{ margin-bottom:var(--e-2); }
.cxag-aj .cx-sw input:disabled + .cx-sw-t{ opacity:.7; }
.cxag-pr{ min-width:0; margin:var(--e-3) 0 0; padding:0; border:0; }
.cxag-pr .cx-lb{ padding:0; }
.cxag-rad{ display:flex; align-items:center; gap:var(--e-3); min-height:44px; cursor:pointer; color:var(--tinta); font-size:var(--t-texto); }
.cxag-rad input{ width:20px; height:20px; margin:0; flex:none; accent-color:var(--tinta); }
.cxag-rad span{ min-width:0; overflow-wrap:anywhere; }
.cxag-solo{ margin-top:var(--e-3); }