/* conexiones.css -- la conversacion entre dos cuentas (public/conexiones.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; filas sin cajas ni rayas. `--urge` es solo para peligro y para un error.
   Sin animacion propia: lo que se mueve (hojas, menus) ya lo mueve su pieza, con fundidos bajo prefers-reduced-motion. Con el chat de Xarpie abierto el CRM recibe unos 420 px aunque
   la ventana mida 1280, asi que nada decide por @media de la ventana lo que depende del ancho de la COLUMNA: la conversacion lo decide con @container. */

/* ---- botones de pildora ---- */
.cx-pil{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px; padding:0 var(--e-4); border:0; border-radius:var(--r-pildora); background:var(--boton); color:var(--boton-t); font:inherit; font-size:var(--t-texto); font-weight:500; cursor:pointer; }
.cx-pil-s{ background:var(--piedra-on); color:var(--tinta); }
.cx-pil-ch{ min-height:32px; padding:0 var(--e-3); font-size:var(--t-meta); flex:none; }
.cx-pil:disabled{ opacity:.5; cursor:default; }
.cx-pil:active{ opacity:.85; }
@media (pointer:coarse){ .cx-pil, .cx-pil-ch{ min-height:44px; } }

/* ---- la seccion en Chats y la lista de la pagina ---- */
.cx-lista-chats{ margin:0 0 var(--e-4); }
.cx-sec-cab{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-3); margin:var(--e-4) var(--e-3) var(--e-1); min-height:32px; }
.cx-sec{ margin:0; font-size:var(--t-meta); font-weight:400; color:var(--apagado); }
.cx-sec-m{ margin:var(--e-5) 0 var(--e-1); }
.cx-fila{ display:flex; align-items:flex-start; gap:var(--e-2); min-height:56px; padding:var(--e-1) var(--e-3); border-radius:var(--r); }
@media (hover:hover){ .cx-fila:hover{ background:var(--tinte-toque); } }
.cx-fila-c{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; padding:var(--e-2) 0; }
.cx-fila-abre{ min-height:44px; border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; padding:var(--e-2) 0; }
.cx-fila-t{ max-width:100%; font-size:var(--t-texto); color:var(--tinta); overflow-wrap:anywhere; }
.cx-fila-s{ max-width:100%; font-size:var(--t-meta); color:var(--apagado); overflow-wrap:anywhere; }
.cx-fila-acc{ display:flex; flex-wrap:wrap; gap:var(--e-2); margin-top:var(--e-2); }
.cx-n{ display:inline-flex; align-items:center; justify-content:center; flex:none; min-width:20px; height:20px; padding:0 6px; box-sizing:border-box; border-radius:var(--r-pildora); background:var(--boton); color:var(--boton-t); font-size:var(--t-meta); font-weight:500; line-height:1; margin-top:var(--e-3); }
.cx-mas{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:44px; height:44px; margin-top:calc(var(--e-1) * -1); border:0; border-radius:var(--r-pildora); background:transparent; color:var(--apagado); cursor:pointer; }
@media (hover:hover){ .cx-mas:hover{ background:var(--tinte-toque); color:var(--tinta); } }
.cx-vacio{ margin:var(--e-2) var(--e-3) var(--e-3); }
.cx-vacio-t{ margin:0 0 2px; font-size:var(--t-texto); color:var(--tinta); }
.cx-vacio-p{ margin:0; font-size:var(--t-meta); color:var(--medio); line-height:1.5; }
.cx-pagina{ max-width:640px; }
.cx-cuerpo{ margin-top:var(--e-4); }

/* ---- la conversacion: ocupa el alto de la pagina; la lista hace scroll y la caja de escribir queda fija abajo ---- */
.main > #view:has(.cx-conv){ max-width:none; padding:0; overflow:hidden; display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.main:has(#view:has(.cx-conv)){ overflow:hidden; }
.cx-conv{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; width:100%; max-width:760px; margin:0 auto; box-sizing:border-box; container-type:inline-size; }
.cx-cargando{ margin:var(--e-6) var(--e-5); color:var(--apagado); }
.cx-error{ margin:var(--e-6) var(--e-5); color:var(--medio); }
.cx-error-b{ display:flex; flex-wrap:wrap; gap:var(--e-2); margin-top:var(--e-3); }
.cx-cab{ flex:none; display:flex; align-items:center; gap:var(--e-3); padding:var(--e-4) var(--e-5) var(--e-2); }
.cx-volver{ display:inline-flex; align-items:center; gap:4px; flex:none; min-height:44px; margin-left:-8px; padding:0 var(--e-3) 0 var(--e-2); border:0; border-radius:var(--r-pildora); background:transparent; color:var(--medio); font:inherit; font-size:var(--t-meta); cursor:pointer; }
.cx-volver svg{ transform:rotate(90deg); }
@media (hover:hover){ .cx-volver:hover{ background:var(--tinte-toque); color:var(--tinta); } }
.cx-cab-t{ flex:1; min-width:0; }
.cx-nombre{ margin:0; font-size:var(--t-sub); line-height:1.25; font-weight:500; color:var(--tinta); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cx-cab-s{ margin:2px 0 0; font-size:var(--t-meta); color:var(--apagado); }
.cx-ib{ display:flex; align-items:center; justify-content:center; flex:none; width:44px; height:44px; border:0; border-radius:var(--r-pildora); background:transparent; color:var(--medio); cursor:pointer; }
@media (hover:hover){ .cx-ib:hover{ background:var(--tinte-toque); color:var(--tinta); } }
@container (max-width:420px){
  .cx-cab{ padding-left:var(--e-4); padding-right:var(--e-3); gap:var(--e-2); }
  .cx-volver span{ display:none; }
  .cx-volver{ padding:0 var(--e-2); margin-left:-4px; }
}

/* ---- mensajes: filas, sin cajas ---- */
.cx-lista{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:var(--e-3) var(--e-5) var(--e-4); display:flex; flex-direction:column; gap:var(--e-5); overscroll-behavior:contain; }
.cx-lista > :first-child{ margin-top:auto; }
.cx-msg{ margin:0; }
.cx-msg-cab{ margin:0 0 2px; display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2); min-height:24px; font-size:var(--t-meta); color:var(--apagado); }
.cx-de{ color:var(--tinta); font-weight:500; overflow-wrap:anywhere; }
.cx-mio .cx-de{ color:var(--apagado); font-weight:400; }
.cx-marca{ padding:0 8px; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--medio); }
.cx-mas-m{ width:24px; height:24px; margin:0 0 0 auto; opacity:0; }
.cx-msg:hover .cx-mas-m, .cx-msg:focus-within .cx-mas-m{ opacity:1; }
@media (hover:none){ .cx-mas-m{ opacity:1; } }
.cx-texto{ margin:0; font-size:var(--t-texto); line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--texto); }
.cx-borrado{ margin:0; color:var(--apagado); font-style:italic; }
.cx-vacio-c{ margin:var(--e-6) 0; }
.cx-vacio-c .cx-vacio-t{ margin-bottom:var(--e-1); }

/* ---- la caja de escribir (o el aviso de que ya no esta activa) ---- */
.cx-pie{ flex:none; }
.cx-comp{ display:flex; align-items:flex-end; gap:var(--e-2); padding:var(--e-3) var(--e-4) calc(var(--e-3) + env(safe-area-inset-bottom)) var(--e-5); }
.cx-area{ flex:1; min-width:0; min-height:44px; max-height:140px; resize:none; box-sizing:border-box; padding:11px var(--e-4); border:0; border-radius:var(--r-flota); background:var(--piedra-on); color:var(--tinta); font:inherit; font-size:var(--t-campo); line-height:1.4; }
.cx-area:focus-visible{ outline:2px solid var(--tinta); outline-offset:1px; }
.cx-enviar{ min-height:44px; padding:0 var(--e-5); flex:none; border:0; border-radius:var(--r-pildora); background:var(--boton); color:var(--boton-t); font:inherit; font-size:var(--t-texto); font-weight:500; cursor:pointer; }
.cx-enviar:disabled{ opacity:.5; cursor:default; }
.cx-err{ margin:var(--e-2) 0 0; font-size:var(--t-meta); line-height:1.4; color:var(--urge); }
.cx-pie .cx-err{ margin:var(--e-2) var(--e-5) 0; }
.cx-inactiva{ padding:var(--e-4) var(--e-5) calc(var(--e-4) + env(safe-area-inset-bottom)); }
.cx-in-t{ margin:0 0 2px; font-size:var(--t-texto); font-weight:500; color:var(--tinta); }
.cx-in-p{ margin:0; font-size:var(--t-meta); color:var(--medio); line-height:1.5; }

/* ---- dentro de las hojas (invitar, enlace, confirmar, ajustes) ---- */
.cx-p{ margin:0 0 var(--e-3); font-size:var(--t-texto); line-height:1.5; color:var(--medio); }
.cx-p-s{ font-size:var(--t-meta); color:var(--apagado); }
.cx-lb{ display:block; margin:0 0 6px; font-size:var(--t-meta); color:var(--medio); }
.cx-in{ width:100%; box-sizing:border-box; margin-bottom:var(--e-3); }
.cx-enl{ font-size:var(--t-texto); }
.cx-pie-enl{ display:flex; flex-wrap:wrap; gap:var(--e-2); margin-top:var(--e-3); }
.cx-hall{ margin:0 0 var(--e-3); padding-left:var(--e-5); font-size:var(--t-texto); line-height:1.5; color:var(--tinta); }
.cx-cita{ margin:0; padding:var(--e-3) var(--e-4); border-radius:var(--r); background:var(--piedra); color:var(--tinta); font-size:var(--t-texto); line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; max-height:140px; overflow:auto; }
:root[data-theme] .btn.cx-peligro{ background:var(--urge); color:var(--urge-t); }
.cx-sw{ display:flex; align-items:flex-start; gap:var(--e-3); min-height:44px; cursor:pointer; }
.cx-sw input{ width:20px; height:20px; margin:2px 0 0; flex:none; accent-color:var(--tinta); }
.cx-sw-t{ display:flex; flex-direction:column; gap:2px; font-size:var(--t-texto); color:var(--tinta); }
.cx-sw-s{ font-size:var(--t-meta); color:var(--apagado); overflow-wrap:anywhere; }
.cx-pers{ display:flex; flex-direction:column; margin-bottom:var(--e-2); }
.cx-per{ display:flex; align-items:center; gap:var(--e-3); min-height:44px; }
.cx-per-n{ flex:1; min-width:0; color:var(--tinta); overflow-wrap:anywhere; }
.cx-per-r{ font-size:var(--t-meta); color:var(--apagado); }
.cx-agr{ display:flex; align-items:center; gap:var(--e-2); margin-top:var(--e-2); }
.cx-agr .sel{ flex:1; min-width:0; }
.cx-zona{ display:flex; flex-direction:column; align-items:flex-start; margin-top:var(--e-5); }
.cx-lnk{ min-height:44px; padding:0; border:0; background:transparent; font:inherit; font-size:var(--t-texto); text-decoration:underline; cursor:pointer; color:var(--medio); }
.cx-lnk-p{ color:var(--urge); }

/* ---- aceptar una invitacion ---- */
.cx-acc{ max-width:520px; margin:0 auto; padding:var(--e-6) 0; }
.cx-acc-t{ margin:0 0 var(--e-3); font-size:var(--t-titulo); font-weight:500; letter-spacing:-.02em; line-height:1.2; color:var(--tinta); }
.cx-acc-b{ display:flex; flex-wrap:wrap; gap:var(--e-2); margin-top:var(--e-5); }

/* ---- junto a la caja de escribir: el boton con el NOMBRE de mi agente (y el «+» si alguien registro algo para el) ---- */
.cx-comp{ flex-wrap:wrap; }
.cx-comp-acc{ display:flex; align-items:center; gap:var(--e-1); flex:none; }
@container (max-width:520px){ .cx-comp-acc{ flex:1 0 100%; } }
.cx-ib-s{ background:var(--piedra-on); color:var(--tinta); }
.cx-ag{ display:inline-flex; align-items:center; gap:6px; min-height:44px; max-width:190px; padding:0 var(--e-4) 0 var(--e-3); border:0; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--tinta); font:inherit; font-size:var(--t-texto); font-weight:500; cursor:pointer; }
.cx-ag:active{ opacity:.85; }
.cx-ag-n{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- el estudio de ejemplo: su fila con la etiqueta «Ejemplo» y el boton que lo abre ---- */
.cx-etq{ flex:none; margin-top:var(--e-3); padding:0 8px; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--medio); font-size:var(--t-meta); line-height:20px; }
.cx-ej-cta{ margin-top:var(--e-3); }
.cx-ej-fila{ margin:var(--e-3) var(--e-3) 0; }

/* La invitacion por correo, dentro de Xarpie (PLAN-conexiones §21): una tarjeta por invitacion, arriba de la lista, y un punto que avisa en el titulo de la seccion y en el boton de Chats. */
.cx-inv{ margin:var(--e-2) var(--e-3); padding:var(--e-3) var(--e-4); border-radius:var(--r); background:var(--piedra); }
.cx-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); }
.cx-inv-n{ min-width:0; overflow-wrap:anywhere; }
.cx-inv-p{ margin:var(--e-1) 0 0; font-size:var(--t-meta); line-height:1.45; color:var(--apagado); }
.cx-inv-acc{ display:flex; flex-wrap:wrap; gap:var(--e-2); margin-top:var(--e-3); }
.cx-inv-err{ margin:var(--e-2) 0 0; }
.cx-punto{ display:inline-block; width:8px; height:8px; margin-left:var(--e-2); border-radius:var(--r-pildora); background:var(--urge); vertical-align:middle; }
#tel-a-chats[data-cx-inv]{ position:relative; }
#tel-a-chats[data-cx-inv]::after{ content:""; position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:var(--r-pildora); background:var(--urge); }