/* ============================================================================
   WhatsApp en Chats (diseno aprobado por Daniel el 2026-09-20, "WhatsApp en Chats").
   Solo tokens de cuarto-oscuro.css (--pag, --piedra, --tinta, --urge, --r-flota...): ningun color, sombra ni duracion escritos a mano
   (paridad-cuarto-oscuro). Forma: pildora = se toca; 16 px = flota; 4 px = contenido. Filas sin cajas. Color solo si significa algo:
   el almagre (--urge) es para lo que espera a una persona.

   Vive en su propio archivo (y no en styles.css, el mas caliente del repo) y se carga despues de cuarto-oscuro.css.
   Todo cuelga de #tel-convs (la capa de Chats: cubre la columna de Xarpie en escritorio y es la pagina izquierda en telefono), asi que
   escritorio y telefono comparten estas reglas; lo unico que cambia es el tamano de letra de los campos (16 px en telefono: iOS
   amplia la pagina si es menor).
   ============================================================================ */

/* ------------------------------ las pestanas de Chats ------------------------------ */
#tel-convs .wa-tabs{ flex:none; margin:0 0 4px; padding:0 4px; }
#tel-convs .wa-tabs[hidden]{ display:none; }
#tel-convs .wa-tabs .fchip{ display:inline-flex; align-items:center; gap:6px; }
#tel-convs .wa-tab-n{ font-size:var(--t-meta); font-weight:500; color:var(--urge); font-variant-numeric:tabular-nums; }
#tel-convs .wa-tab-n[hidden]{ display:none; }

/* ------------------------------ la lista de WhatsApp ------------------------------ */
#tel-convs .wa-fila{ position:relative; border-radius:var(--r); }
#tel-convs .wa-fila.on{ background:var(--piedra-on); }
#tel-convs .wa-abre{ display:block; width:100%; padding:10px; border:0; border-radius:var(--r); background:transparent; font:inherit; text-align:left; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
@media (hover:hover){ #tel-convs .wa-fila:not(.on) .wa-abre:hover{ background:var(--tinte-toque); } }
#tel-convs .wa-abre:active{ background:var(--piedra-on); }
#tel-convs .wa-l1{ display:flex; align-items:baseline; gap:8px; }
#tel-convs .wa-nom{ flex:1; min-width:0; font-size:var(--t-texto); font-weight:500; color:var(--tinta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tel-convs .wa-cuando{ flex:none; font-size:var(--t-meta); color:var(--apagado); font-variant-numeric:tabular-nums; }
#tel-convs .wa-prev{ display:block; margin-top:2px; font-size:var(--t-texto); color:var(--medio); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tel-convs .wa-est{ display:flex; align-items:center; gap:6px; margin-top:4px; font-size:var(--t-meta); color:var(--apagado); }
#tel-convs .wa-est.urge{ color:var(--urge); }
#tel-convs .wa-punto{ flex:none; width:7px; height:7px; border-radius:50%; background:var(--medio); }
#tel-convs .wa-est.urge .wa-punto{ background:var(--urge); }

/* ------------------------------ el hilo: la capa cambia de superficie ------------------------------ */
/* En el hilo la capa se ve como la columna de Xarpie (la pagina mas oscura con papel punteado): es una conversacion, no una lista. */
:root[data-theme] #app #tel-convs.wa-en-hilo{
  background-color:var(--x);
  background-image:radial-gradient(circle at center, var(--puntos) 1.1px, transparent 1.7px);
  background-size:18px 18px; background-position:9px 9px;
}
#tel-convs.wa-en-hilo > :is(.tel-fila-xa, .tc-tit, .wa-tabs, .tc-busca-fila, .tc-lista, .tc-perfil){ display:none !important; }
#tel-convs .wa-vista{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
#tel-convs .wa-vista[hidden]{ display:none; }
#tel-convs .wa-carga{ padding:16px 4px; }

#tel-convs .wa-top{ display:flex; align-items:center; gap:2px; height:var(--topnav-h, 52px); flex:none; }
#tel-convs .wa-flex{ flex:1 1 auto; }
#tel-convs .wa-atras{ display:inline-flex; align-items:center; gap:2px; height:40px; padding:0 10px 0 2px; border:0; border-radius:var(--r-pildora); background:transparent; font:inherit; font-size:var(--t-texto); color:var(--medio); cursor:pointer; }
#tel-convs .wa-atras .ico{ transform:rotate(90deg); }
#tel-convs .wa-ib{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border:0; border-radius:var(--r-pildora); background:transparent; color:var(--medio); cursor:pointer; }
@media (hover:hover){ #tel-convs :is(.wa-atras, .wa-ib):hover{ color:var(--tinta); background:var(--tinte-toque); } }
#tel-convs :is(.wa-atras, .wa-ib):active{ transform:scale(.97); }

#tel-convs .wa-cab{ display:flex; align-items:center; gap:12px; padding:2px 4px 6px; flex:none; }
#tel-convs .wa-av{ flex:none; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:var(--piedra-on); color:var(--tinta); font-size:var(--t-campo); font-weight:500; }
#tel-convs .wa-quien{ display:flex; flex-direction:column; min-width:0; flex:1; }
#tel-convs .wa-quien-n{ font-size:var(--t-campo); font-weight:500; color:var(--tinta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tel-convs .wa-s{ margin-top:1px; font-size:var(--t-meta); color:var(--medio); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* La pildora de estado la comparten el hilo y la ficha (por eso no cuelga de #tel-convs). */
.wa-pil{ display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:12px; font-size:var(--t-meta); color:var(--medio); box-shadow:inset 0 0 0 1px var(--linea); flex:none; white-space:nowrap; }
.wa-pil.urge{ color:var(--urge); box-shadow:inset 0 0 0 1px var(--urge); }
.wa-pil.on{ color:var(--tinta); }

#tel-convs .wa-int{ display:flex; align-items:center; gap:12px; padding:6px 4px 8px; font-size:var(--t-texto); color:var(--tinta); flex:none; }
#tel-convs .wa-int-t{ flex:1; min-width:0; }
#tel-convs .wa-int-t small{ display:block; margin-top:2px; font-size:var(--t-meta); color:var(--medio); line-height:1.4; }
#tel-convs .wa-int .cv-sw{ flex:none; }

/* Los mensajes: se apilan desde abajo, pegados a la caja, y el hilo hace scroll solo. */
#tel-convs .wa-hilo{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:12px; padding:8px 4px 12px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
#tel-convs .wa-hilo > :first-child{ margin-top:auto; }
#tel-convs .wa-hilo:focus{ outline:0; }
#tel-convs .wa-dia{ align-self:center; font-size:var(--t-meta); color:var(--apagado); }
#tel-convs .wa-vacio{ margin:auto; padding:0 16px; text-align:center; font-size:var(--t-texto); color:var(--medio); }
#tel-convs .wa-m{ max-width:84%; display:flex; flex-direction:column; gap:4px; }
#tel-convs .wa-m.lead{ align-self:flex-start; }
#tel-convs :is(.wa-m.xarpie, .wa-m.persona){ align-self:flex-end; align-items:flex-end; }
#tel-convs .wa-burbuja{ padding:10px 14px; font-size:var(--t-texto); line-height:1.5; color:var(--tinta); white-space:pre-wrap; overflow-wrap:anywhere; }
#tel-convs .wa-m.lead .wa-burbuja{ background:var(--piedra); border-radius:16px 16px 16px 4px; }
#tel-convs :is(.wa-m.xarpie, .wa-m.persona) .wa-burbuja{ background:var(--piedra-on); border-radius:16px 16px 4px 16px; }
/* En el tema claro --piedra-on casi se confunde con la pagina (--x): lo de Xarpie lleva un filo suave, y lo que manda una persona uno mas firme, que ademas
   las distingue entre si sin ponerles color. */
#tel-convs .wa-m.xarpie .wa-burbuja{ box-shadow:inset 0 0 0 1px var(--linea); }
#tel-convs .wa-m.persona .wa-burbuja{ box-shadow:inset 0 0 0 1px var(--punto); }
#tel-convs .wa-burbuja.adj{ color:var(--medio); font-style:italic; }
#tel-convs .wa-qm{ font-size:var(--t-meta); color:var(--apagado); font-variant-numeric:tabular-nums; }
#tel-convs .wa-sis{ display:flex; align-items:flex-start; gap:8px; font-size:var(--t-meta); color:var(--medio); line-height:1.5; }
#tel-convs .wa-sis-i{ flex:none; display:inline-flex; margin-top:2px; }
#tel-convs .wa-brief{ margin:-4px 0 0; padding:0 0 0 22px; font-size:var(--t-meta); color:var(--medio); line-height:1.5; }

/* El borrador de Xarpie: una tarjeta que flota (16 px) con los huecos como campos dentro del texto. */
#tel-convs .wa-bor-caja{ flex:none; }
#tel-convs .wa-bor-caja:empty{ display:none; }
#tel-convs .wa-bor{ margin:0 0 4px; padding:14px 16px; border-radius:var(--r-flota); background:var(--piedra); box-shadow:inset 0 0 0 1px var(--linea); max-height:46dvh; overflow-y:auto; }
#tel-convs .wa-bor-t{ font-size:var(--t-texto); font-weight:500; color:var(--tinta); }
#tel-convs .wa-bor-s{ margin-top:2px; font-size:var(--t-meta); color:var(--medio); }
#tel-convs .wa-bor-txt{ margin-top:10px; font-size:var(--t-texto); line-height:1.9; color:var(--tinta); white-space:pre-wrap; overflow-wrap:anywhere; }
#tel-convs .wa-hueco{ display:inline-block; max-width:100%; height:28px; padding:0 10px; border:0; border-radius:var(--r); background:var(--pag); box-shadow:inset 0 0 0 1px var(--urge); color:var(--tinta); font:inherit; font-size:var(--t-texto); vertical-align:baseline; text-overflow:ellipsis; }
#tel-convs .wa-hueco::placeholder{ color:var(--urge); opacity:1; }
#tel-convs .wa-hueco.lleno{ box-shadow:inset 0 0 0 1px var(--linea); }
#tel-convs .wa-bot{ display:flex; align-items:center; gap:8px; margin-top:12px; }
#tel-convs .wa-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px; padding:0 16px; border:0; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--tinta); font:inherit; font-size:var(--t-texto); white-space:nowrap; cursor:pointer; }
#tel-convs .wa-btn.pri{ background:var(--boton); color:var(--boton-t); font-weight:500; }
#tel-convs .wa-btn.txt{ background:transparent; color:var(--medio); padding:0 10px; }
#tel-convs .wa-btn:disabled{ opacity:.4; cursor:default; }
#tel-convs .wa-btn:active:not(:disabled){ transform:scale(.97); }

/* La nota de las 24 h y la caja para escribir (la misma pildora de la caja de Xarpie). */
#tel-convs .wa-aviso{ flex:none; margin:0; padding:8px 8px 10px; font-size:var(--t-meta); color:var(--apagado); text-align:center; line-height:1.5; }
#tel-convs .wa-caja{ display:flex; align-items:flex-end; gap:2px; flex:none; min-height:56px; padding:8px 8px 8px 6px; border-radius:28px; background:var(--caja); box-shadow:var(--sombra-flota); }
#tel-convs .wa-ph{ flex:1; min-width:0; min-height:40px; max-height:132px; padding:10px; border:0; outline:0; resize:none; background:transparent; font:inherit; font-size:var(--t-texto); line-height:20px; color:var(--tinta); }
#tel-convs .wa-ph::placeholder{ color:var(--apagado); }
#tel-convs .wa-env{ flex:none; display:flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border:0; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--apagado); cursor:pointer; }
#tel-convs .wa-env.listo{ background:var(--boton); color:var(--boton-t); }
#tel-convs .wa-env:disabled{ cursor:default; }
#tel-convs.wa-cerrada .wa-caja{ opacity:.6; }

/* ------------------------------ la seccion WhatsApp de la ficha ------------------------------ */
/* Vive en el CRM (no dentro de #tel-convs): sus reglas no cuelgan de la capa de Chats. Filas sin cajas; la caja de abajo es la misma pildora, mas chica. */
.wa-f{ display:flex; flex-direction:column; gap:10px; }
.wa-f-cab{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.wa-f-cab .ico{ transform:rotate(-90deg); }   /* el chevron del icono mira hacia abajo: aqui apunta a donde lleva */
.wa-f-msgs{ display:flex; flex-direction:column; gap:8px; }
.wa-f-fila{ display:grid; grid-template-columns:minmax(72px, 132px) minmax(0, 1fr); gap:12px; align-items:baseline; }
.wa-f-q{ font-size:var(--t-meta); color:var(--apagado); font-variant-numeric:tabular-nums; }
.wa-f-q b{ color:var(--tinta); font-weight:500; }
.wa-f-t{ font-size:var(--t-texto); line-height:1.5; color:var(--tinta); white-space:pre-wrap; overflow-wrap:anywhere; }
.wa-f-t.adj{ color:var(--medio); font-style:italic; }
.wa-f-caja{ display:flex; align-items:center; gap:2px; min-height:44px; padding:0 6px 0 4px; border-radius:22px; background:var(--piedra); box-shadow:inset 0 0 0 1px var(--linea); }
.wa-f-in{ flex:1; min-width:0; height:40px; padding:0 12px; border:0; outline:0; background:transparent; font:inherit; font-size:var(--t-texto); color:var(--tinta); }
.wa-f-in::placeholder{ color:var(--apagado); }
.wa-f-env{ flex:none; display:flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:0; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--apagado); cursor:pointer; }
.wa-f-env.listo{ background:var(--boton); color:var(--boton-t); }
.wa-f-env:disabled{ cursor:default; }
.wa-f-aviso{ margin:0; font-size:var(--t-meta); color:var(--apagado); line-height:1.5; }

/* ------------------------------ el acceso desde Chats a "Lo que Xarpie sabe" ------------------------------ */
#tel-convs .wa-saber-link{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; flex:none; min-height:40px; padding:0; border:0; background:none; font:inherit; font-size:var(--t-texto); color:var(--medio); cursor:pointer; }
#tel-convs .wa-saber-link[hidden]{ display:none; }
@media (hover:hover){ #tel-convs .wa-saber-link:hover{ color:var(--tinta); } }

/* ------------------------------ la pagina "Lo que Xarpie sabe" (#/saber) ------------------------------ */
/* La lista de conocimiento es la de la liga y decide su disposicion con @container, no con @media: en la liga el contenedor es #view.
   Aqui hace falta que sea ESTA pagina. Sin el, en un escritorio con la columna de Xarpie abierta (a la pagina le tocan ~620 px) la lista
   se quedaba en dos columnas, con el titulo en 190 px y los interruptores encima del texto (visto en produccion el 2026-09-20). */
.wa-saber{ container-type:inline-size; }
.wa-sr-grupo{ margin:0 0 var(--e-5); }
.wa-sr-cab{ display:flex; align-items:center; gap:8px; margin:0 0 var(--e-3); }
.wa-sr-t{ margin:0; font-size:var(--t-texto); font-weight:500; color:var(--tinta); }
.wa-sr-cab .wa-tab-n{ font-size:var(--t-meta); font-weight:500; color:var(--urge); font-variant-numeric:tabular-nums; }
.wa-sr-carta{ display:flex; flex-direction:column; gap:var(--e-2); margin:0 0 var(--e-3); padding:var(--e-4); border-radius:var(--r-flota); background:var(--piedra); box-shadow:inset 0 0 0 1px var(--linea); max-width:720px; }
.wa-sr-eti{ font-size:var(--t-meta); color:var(--apagado); }
.wa-sr-q{ font-size:var(--t-sub); font-weight:500; line-height:1.35; color:var(--tinta); overflow-wrap:anywhere; }
.wa-sr-falta{ font-size:var(--t-meta); color:var(--medio); }
.wa-sr-bot{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2); margin-top:var(--e-1); }
.wa-donde{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-3) var(--e-5); margin:0 0 var(--e-5); }
.wa-donde-t{ font-size:var(--t-meta); color:var(--apagado); }
.wa-donde-fila{ display:inline-flex; align-items:center; gap:var(--e-2); font-size:var(--t-texto); color:var(--tinta); }
.wa-donde .btn .ico{ transform:rotate(-90deg); }

/* ------------------------------ "Probar como si fuera un lead" (una ventana: vive en #modal) ------------------------------ */
.wa-pr-hilo{ display:flex; flex-direction:column; gap:var(--e-3); min-height:140px; max-height:42vh; overflow-y:auto; padding:var(--e-2) 0 var(--e-3); overscroll-behavior:contain; }
.wa-pr .wa-vacio{ margin:auto; padding:0 var(--e-4); text-align:center; font-size:var(--t-texto); color:var(--medio); }
.wa-pr-m{ display:flex; flex-direction:column; gap:4px; max-width:88%; }
.wa-pr-m.lead{ align-self:flex-end; align-items:flex-end; }
.wa-pr-m.xarpie{ align-self:flex-start; }
.wa-pr-b{ padding:10px 14px; font-size:var(--t-texto); line-height:1.5; color:var(--tinta); white-space:pre-wrap; overflow-wrap:anywhere; }
.wa-pr-m.lead .wa-pr-b{ background:var(--piedra-on); border-radius:16px 16px 4px 16px; }
.wa-pr-m.xarpie .wa-pr-b{ background:var(--piedra); border-radius:16px 16px 16px 4px; box-shadow:inset 0 0 0 1px var(--linea); }
.wa-pr-q{ font-size:var(--t-meta); color:var(--apagado); }
.wa-pr-esc{ display:flex; flex-direction:column; gap:var(--e-2); margin:0 0 var(--e-3); padding:var(--e-3) var(--e-4); border-radius:var(--r-flota); background:var(--piedra); box-shadow:inset 0 0 0 1px var(--urge); }
.wa-pr-esc[hidden]{ display:none; }
.wa-pr .wa-sis{ display:flex; align-items:flex-start; gap:var(--e-2); font-size:var(--t-texto); font-weight:500; color:var(--tinta); }
.wa-pr .wa-sis-i{ flex:none; display:inline-flex; margin-top:2px; }
.wa-pr-bor-t{ font-size:var(--t-meta); color:var(--apagado); }
.wa-pr-bor-c{ margin-top:2px; font-size:var(--t-texto); line-height:1.6; color:var(--tinta); white-space:pre-wrap; overflow-wrap:anywhere; }
.wa-pr .wa-brief{ margin:0; padding:0 0 0 var(--e-5); font-size:var(--t-meta); color:var(--medio); line-height:1.5; }
.wa-pr-caja{ display:flex; align-items:center; gap:var(--e-2); }
.wa-pr-in{ flex:1; min-width:0; height:40px; padding:0 var(--e-4); border:0; outline:0; border-radius:var(--r-pildora); background:var(--piedra); box-shadow:inset 0 0 0 1px var(--linea); font:inherit; font-size:var(--t-texto); color:var(--tinta); }
.wa-pr-in:focus-visible{ box-shadow:inset 0 0 0 1px var(--linea), 0 0 0 2px var(--punto); }

/* ------------------------------ telefono ------------------------------ */
@media (max-width:860px){
  .wa-f-fila{ grid-template-columns:minmax(0, 1fr); gap:2px; }
  .wa-f-in, .wa-pr-in{ font-size:var(--t-campo); }
  .wa-sr-carta{ padding:var(--e-3); }
  /* iOS amplia la pagina al enfocar un campo con letra menor a 16 px. */
  #tel-convs :is(.wa-ph, .wa-hueco){ font-size:var(--t-campo); }
  #tel-convs .wa-top{ height:44px; }
  #tel-convs .wa-bor{ max-height:52dvh; }
  #tel-convs .wa-abre{ min-height:56px; }
  #tel-convs .wa-hilo{ scrollbar-width:none; }
  #tel-convs .wa-hilo::-webkit-scrollbar{ display:none; }
  #tel-convs .wa-caja{ margin-bottom:0; }
}
/* La hoja de "¿Se lo ensenio a Xarpie?" vive en #modal (fuera de #tel-convs) y usa las clases de siempre (mhead, mbody, mfoot, lg-*). */
@media (prefers-reduced-motion:reduce){
  #tel-convs :is(.wa-atras, .wa-ib, .wa-btn):active{ transform:none; }
}