/* conexiones-grupos.css -- los grupos y la tarjeta de un evento (public/conexiones-grupos.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; 16 px = flota; 4 px = contenido (la tarjeta es contenido de la conversacion, como la del evento de Hilos y la de una tarea);
   `--urge` solo para un error y para «Salir del grupo». Sin animacion propia. Reusa las clases de conexiones.css (.cx-pil, .cx-fila, .cx-sec, .cx-per, .cx-sw, .cx-lb, .cx-in, .cx-p, .cx-err, .cx-marca).
   Con el chat de Xarpie abierto el CRM recibe unos 420 px aunque la ventana mida 1280: lo que depende del ancho de la COLUMNA se decide con @container, no con @media de la ventana. */

/* ---- la lista: «Grupos» (invitaciones primero, luego los grupos) ---- */
.cxgr-bloque{ margin:var(--e-3) 0 0; }
.cxgr-inv{ margin:var(--e-2) var(--e-3); padding:var(--e-3) var(--e-4); border-radius:var(--r); background:var(--piedra); }
.cxgr-inv-t{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2); margin:0; font-size:var(--t-texto); font-weight:500; color:var(--tinta); }
.cxgr-inv-n{ min-width:0; overflow-wrap:anywhere; }
.cxgr-inv-s{ margin:var(--e-2) 0 0; font-size:var(--t-texto); line-height:1.45; color:var(--tinta); overflow-wrap:anywhere; }
.cxgr-inv-p{ margin:var(--e-1) 0 0; font-size:var(--t-meta); line-height:1.45; color:var(--apagado); }
.cxgr-inv-acc{ display:flex; flex-wrap:wrap; gap:var(--e-2); margin-top:var(--e-3); }
.cxgr-inv-err{ margin:var(--e-2) 0 0; }

/* ---- una conversacion de grupo: el estudio de quien escribio, y el renglon de quienes estan ---- */
.cx-est{ min-width:0; color:var(--apagado); overflow-wrap:anywhere; }
.cxgr-quienes{ display:flex; align-items:center; gap:4px; max-width:100%; margin:0; padding:var(--e-1) 0; border:0; background:transparent; color:var(--apagado); font:inherit; font-size:var(--t-meta); text-align:left; cursor:pointer; }
.cxgr-q-t{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cxgr-q-n{ flex:none; white-space:nowrap; }
.cxgr-quienes svg{ flex:none; }
@media (hover:hover){ .cxgr-quienes:hover{ color:var(--tinta); } }
.cxgr-quienes:focus-visible{ outline:2px solid var(--tinta); outline-offset:2px; border-radius:var(--r); }
/* En un telefono el renglon crece hacia arriba y abajo sin empujar la cabecera: el area de toque llega a 44 px. */
@media (pointer:coarse){ .cxgr-quienes{ min-height:44px; padding:0; margin:calc(var(--e-3) * -1) 0; } }
.cxgr-add{ flex:none; padding:0 var(--e-4) 0 var(--e-3); }
.cxgr-add-t{ white-space:nowrap; }
@container (max-width:520px){
  .cxgr-add{ width:44px; min-height:44px; padding:0; }
  .cxgr-add-t{ display:none; }
}

/* ---- las hojas: agregar un estudio, quienes estan, compartir un evento ---- */
.cxgr-op{ gap:var(--e-3); }
.cxgr-op .cx-per-n{ overflow-wrap:anywhere; }
.cxgr-opts{ margin:0 0 var(--e-3); padding:0; border:0; min-width:0; }
.cxgr-opts .cx-lb{ padding:0; }
.cxgr-prev{ margin:0 0 var(--e-3); }
.cxgr-prev-t{ margin:0 0 var(--e-2); font-size:var(--t-meta); color:var(--medio); }
.cxgr-prev .cx-err{ margin:0 0 var(--e-2); }
.cxgr-nunca{ margin:var(--e-2) 0 0; }
.cxgr-error{ margin:var(--e-3) 0; color:var(--medio); }
.cxgr-error-b{ display:flex; flex-wrap:wrap; gap:var(--e-2); margin-top:var(--e-3); }

/* ---- la tarjeta de un evento (en la conversacion y en la vista previa de la hoja) ---- */
.cxgr-ev{ max-width:460px; padding:var(--e-3) var(--e-4); border-radius:var(--r); background:var(--piedra); }
.cxgr-prev .cxgr-ev{ background:var(--piedra-on); }
.cxgr-ev-t{ display:flex; align-items:flex-start; gap:var(--e-2); margin:0 0 var(--e-2); font-size:var(--t-texto); font-weight:500; line-height:1.35; color:var(--tinta); overflow-wrap:anywhere; }
.cxgr-ev-t svg{ flex:none; margin-top:3px; color:var(--medio); }
.cxgr-ev-f{ display:flex; align-items:baseline; gap:var(--e-3); margin:0 0 2px; font-size:var(--t-texto); line-height:1.45; }
.cxgr-ev-k{ flex:none; min-width:64px; font-size:var(--t-meta); color:var(--apagado); }
.cxgr-ev-v{ min-width:0; color:var(--tinta); overflow-wrap:anywhere; }
.cxgr-ev-acc{ display:flex; margin-top:var(--e-3); }
.cxgr-ev-acc .cx-pil span{ min-width:0; }
.cx-msg-evento .cx-borrado{ margin:0; }