/* Lista de conversaciones del chat. Extraido de templates/community_wa.html el
   14/08/2026: 14 KB de estilos iban DENTRO del HTML, asi que el navegador se los
   volvia a bajar y a leer cada vez que se volvia a la lista (Guille: "volver atras
   desde un grupo tarda mucho"). El <link> queda donde estaba el <style>, para que
   el orden de la cascada no cambie. */
  /* Cabecera azul (la navbar v2 transparente se lee encima) y panel blanco
     centrado tipo app, mismo ancho que la sala (760px). */
  .cwa-hero { background: hsl(var(--primary)); padding: 4.6rem 1rem 0; }
  .cwa-hero-in { max-width: 760px; margin: 0 auto; color: #fff; padding: .3rem 0 .75rem;
    display: flex; align-items: center; gap: .6rem; }
  .cwa-hero h1 { font-family: 'Futura Cyrillic Bold', sans-serif; font-size: 1.5rem; margin: 0;
    flex: 1; min-width: 0; }
  /* Los tres puntitos abren el MISMO menú de la web (el de la hamburguesa): así
     quitamos la barra azul de arriba sin perder idioma, compartir ni perfil.
     En escritorio no hacen falta: allí la barra de la web sigue puesta. */
  .cwa-more { display: none; background: none; border: none; color: #15263B;
    padding: .3rem; border-radius: 10px; cursor: pointer; line-height: 0; }
  .cwa-more:hover { background: #eef1f5; }

  /* ===== Móvil: la CABECERA ÚNICA de la app (Guille, 14/08/2026) =====
     Antes aquí había una cabecera blanca con "Chat" en negro (maqueta del
     13/08). Guille pidió que la cabecera azul sea IDÉNTICA en todas las
     pantallas, así que la pinta includes/mobile_topbar.html y esta se esconde
     entera en móvil. Los tres puntitos (menú de la web) se quedan solo en
     escritorio: en móvil ya están la campana, la ayuda y la foto de la cabecera
     única, más la barra de abajo. */
  @media (max-width: 767.98px) {
    .cwa-hero { display: none !important; }
    /*Se esconde SOLO la barra visible (el contenedor de dentro de la
       navbar). La navbar en sí se queda: dentro viven el panel deslizante del menú
       y su fondo oscuro, que son los que abren los tres puntitos.*/
    body.cwa-body .navbar > .container { display: none !important; }
    body.cwa-body .navbar { background: none !important; box-shadow: none !important;
      position: static !important; height: 0 !important; min-height: 0 !important; }
    /* Blanco con un pelín de gris, como la maqueta: la pantalla respira y las
       tarjetas de bandera no se pierden sobre blanco puro. */
    .cwa-page, .cwa-panel { background: #fbfcfd; }
    /* Raya de separación algo más visible que en escritorio: en el móvil de
       Guille las filas se leían pegadas, sin línea entre una y otra. */
    .cwa-row + .cwa-row .cwa-mid { border-top-color: #e8ecf2; }
    .cwa-row { padding: .7rem .9rem; }
  }
  .cwa-page { background: #eef1f5; min-height: 60vh; padding-bottom: 3rem; }
  .cwa-panel { max-width: 760px; margin: 0 auto; background: #fff; min-height: 70vh;
    padding-bottom: 5.5rem; position: relative; }
  @media (min-width: 800px) {
    .cwa-panel { border-left: 1px solid #e2e6ee; border-right: 1px solid #e2e6ee; }
  }

  /* Buscador y filtros, pegados arriba como WhatsApp. */
  .cwa-tools { padding: .7rem .9rem .5rem; }
  .cwa-search { display: flex; align-items: center; gap: .5rem; background: #f0f2f5;
    border-radius: 12px; padding: .55rem .9rem; }
  .cwa-search input { flex: 1; border: none; background: transparent; font-size: 1rem;
    font-family: inherit; }
  .cwa-search input:focus { outline: none; }
  .cwa-search .lupa { color: #667781; font-size: .95rem; }
  .cwa-chips { display: flex; gap: .45rem; padding: .6rem .9rem .5rem; overflow-x: auto;
    scrollbar-width: none; }
  .cwa-chips::-webkit-scrollbar { display: none; }
  .cwa-chip { border: none; background: #f0f2f5; color: #54656f; border-radius: 999px;
    padding: .38rem .85rem; font-size: .84rem; font-weight: 700; cursor: pointer;
    white-space: nowrap; font-family: inherit; }
  .cwa-chip.on { background: #d9e9ff; color: hsl(var(--primary)); }
  /* Numerito dentro del chip, como WhatsApp ("No leídos 10"). */
  .cwa-chip .n { margin-left: .3rem; font-weight: 400; opacity: .85; }
  /* Cartel del invitado: dice en una línea qué puede hacer aquí y dónde está la
     puerta. Va debajo de las pestañas, encima de la lista. */
  .cwa-guest { display: flex; align-items: center; gap: .6rem; margin: .1rem .9rem .55rem;
               padding: .6rem .75rem; border-radius: .75rem; background: #eaf3ff;
               color: #22405c; font-size: .88rem; line-height: 1.3; }
  .cwa-guest .txt { flex: 1 1 auto; }
  .cwa-guest .go { flex: 0 0 auto; background: hsl(var(--primary)); color: #fff;
                   border-radius: 999px; padding: .4rem .85rem; font-weight: 600;
                   text-decoration: none; white-space: nowrap; }
  .cwa-guest .go:hover { filter: brightness(1.06); }

  /* Fila de solicitudes pendientes, arriba del todo. Como la fila "Archivados"
     de WhatsApp: una fila más de la lista, sin banda de color, con el icono en
     el hueco de la foto y el numerito azul a la derecha. */
  .cwa-pending { display: flex; align-items: center; gap: .8rem; padding: .62rem .9rem;
    text-decoration: none; border-bottom: 1px solid #f0f2f5; }
  .cwa-pending:hover { background: #f5f6f6; }
  .cwa-pending .ico { width: 50px; height: 50px; border-radius: 50%; background: #e7f0ff;
    color: hsl(var(--primary)); display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem; flex: 0 0 50px; }
  .cwa-pending .tt { flex: 1; min-width: 0; }
  .cwa-pending .tt .t1 { font-weight: 700; color: #111b21; font-size: .98rem; }
  .cwa-pending .tt .t2 { font-size: .86rem; color: #667781; margin-top: .1rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cwa-pending .n { background: hsl(var(--primary)); color: #fff; border-radius: 999px;
    min-width: 1.3rem; height: 1.3rem; display: inline-flex; align-items: center;
    justify-content: center; font-size: .75rem; font-weight: 700; padding: 0 .3rem;
    flex: 0 0 auto; }

  /* Filas de conversación, como la lista de chats de WhatsApp. */
  .cwa-list { list-style: none; margin: 0; padding: 0; }
  /* El chat tardaba MUCHO en abrirse (Guille, 13/08/2026). Medido: 4,3 s en
     ordenador, de los cuales 2,3 s eran el navegador colocando 14.500 trozos de
     página, casi todos fuera de la pantalla. Con esto el navegador solo dibuja
     las filas que se ven y va dibujando el resto al bajar; la altura de reserva
     es la de una fila, para que la barra de scroll no dé saltos. La lista sigue
     ENTERA en la página: el buscador y los filtros la ven igual que antes. */
  .cwa-list > li { content-visibility: auto; contain-intrinsic-size: auto 68px; }
  .cwa-row { display: flex; align-items: center; gap: .8rem; padding: .62rem .9rem;
    text-decoration: none; }
  .cwa-row:hover { background: #f5f6f6; }
  .cwa-row + .cwa-row .cwa-mid { border-top: 1px solid #f0f2f5; }
  .cwa-ava { width: 50px; height: 50px; border-radius: 50%; flex: 0 0 50px; position: relative;
    background: #e7f0ff; display: flex; align-items: center; justify-content: center; }
  .cwa-ava img { width: 50px !important; height: 50px !important; border-radius: 50%;
    object-fit: cover; display: block; }
  .cwa-ava .ini { font-weight: 700; font-size: 1.15rem; color: hsl(var(--primary)); }
  .cwa-ava .emoji { font-size: 1.5rem; }
  /* Dos banderas en diagonal para las salas de idiomas. */
  .cwa-ava .fi { position: absolute; font-size: 1.15rem; border-radius: 4px; }
  .cwa-ava .fa { top: 8px; left: 7px; }
  .cwa-ava .fb { bottom: 8px; right: 7px; }
  .cwa-ava .dot { position: absolute; right: 1px; bottom: 1px; width: 12px; height: 12px;
    border-radius: 50%; background: #25d366; border: 2px solid #fff; }
  /* Grupo = cuadradito azul claro con sus dos banderas; persona = círculo (con su
     marco de rango si lo tiene). Así se distingue el tipo de chat antes de leer el
     nombre (maqueta aprobada 13/08/2026). */
  .cwa-row[data-kind="group"] .cwa-ava { border-radius: 14px; background: #e9f1fe; }
  /* El circulito con marco de rango ya trae su propio tamaño y su aro: aquí solo
     se le quita el fondo azul de debajo para que no asome por las esquinas. */
  .cwa-ava .pbc-flair { background: none; }
  /* Chapita blanca con dos personitas en la esquina del avatar de grupo: en la
     maqueta es lo que dice "esto es una sala", sin tener que leer el nombre. */
  .cwa-gchip { position: absolute; right: -5px; bottom: -5px; width: 21px; height: 21px;
    border-radius: 50%; background: #fff; border: 1px solid #e4e9f0;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 3px rgba(21,38,59,.12); }
  .cwa-gchip svg { width: 13px; height: 13px; color: hsl(var(--primary)); }
  .cwa-mid { flex: 1; min-width: 0; padding: .35rem 0; }
  .cwa-l1 { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
  .cwa-name { font-weight: 700; color: #111b21; font-size: .98rem; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  .cwa-when { font-size: .74rem; color: #667781; flex: 0 0 auto; }
  .cwa-row.has-unread .cwa-when { color: hsl(var(--primary)); font-weight: 700; }
  .cwa-l2 { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    margin-top: .1rem; }
  .cwa-snip { font-size: .86rem; color: #667781; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; min-width: 0; }
  .cwa-snip b { font-weight: 700; color: #54656f; }
  /* Micro de WhatsApp delante de "Mensaje de voz (0:07)": pegado al texto y a
     la misma altura que las letras, como en la lista de WhatsApp. */
  .cwa-mic { vertical-align: -.15em; margin-right: .22rem; flex: none; }
  .cwa-badge { background: hsl(var(--primary)); color: #fff; border-radius: 999px;
    min-width: 1.3rem; height: 1.3rem; display: inline-flex; align-items: center;
    justify-content: center; font-size: .75rem; font-weight: 700; padding: 0 .3rem;
    flex: 0 0 auto; }
  /* Arroba de "te han nombrado", a la izquierda de la bolita (como WhatsApp):
     sin fondo y AZUL, el mismo azul de los avisos del chat de la app (Guille
     24/08/2026), para que se lea "@ 3" sin confundirse con la bolita roja. */
  .cwa-at { color: #086bc9; font-weight: 900; font-size: .95rem;
    line-height: 1; margin-right: .18rem; flex: 0 0 auto; }
  .cwa-empty { text-align: center; color: #889; padding: 2.5rem 1rem; font-size: .95rem; }

  /* "Ver las conversaciones de antes": la lista llega con las cincuenta primeras
     y este botón trae el resto (18/08/2026). Con menos de cincuenta chats no se
     pinta, así que la mayoría de la gente no lo ve nunca.
     OJO (18/08/2026): esto se llamaba .cwa-more, el MISMO nombre que los tres
     puntitos de la cabecera de arriba. Al ir después en el fichero, pisaba su
     estilo y los puntitos salían como una caja blanca ancha encima del título
     "Chat". De ahí el nombre propio: .cwa-older. */
  .cwa-older { display: block; width: calc(100% - 1.8rem); margin: .6rem .9rem 0;
    border: 1px dashed #dfe5ea; border-radius: 12px; background: #fff;
    padding: .75rem; font: inherit; font-size: .88rem; font-weight: 700;
    color: #086BC9; cursor: pointer; }
  .cwa-older:disabled { opacity: .55; }

  /* Descubrir salas nuevas: plegado bajo la lista. */
  .cwa-disc { margin: 1rem .9rem 0; border-top: 1px solid #f0f2f5; padding-top: .6rem; }
  .cwa-disc summary { cursor: pointer; font-weight: 700; color: #54656f; font-size: .92rem;
    padding: .5rem 0; list-style: none; display: flex; align-items: center; gap: .5rem; }
  .cwa-disc summary::-webkit-details-marker { display: none; }
  .cwa-disc summary .chev { margin-left: auto; transition: transform .15s; color: #99a; }
  .cwa-disc[open] summary .chev { transform: rotate(180deg); }
  .cwa-disc-search { display: flex; align-items: center; gap: .5rem; background: #f0f2f5;
    border-radius: 8px; padding: .45rem .8rem; margin: .3rem 0 .2rem; }
  .cwa-disc-search input { flex: 1; border: none; background: transparent; font-size: 1rem;
    color: #12232E; min-width: 0; }
  .cwa-disc-search input:focus { outline: none; }
  .cwa-disc-search .lupa { color: #667781; font-size: .95rem; }
  .cwa-disc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: .5rem; padding: .4rem 0 1rem; }
  .cwa-disc-card { display: flex; align-items: center; gap: .5rem; border: 1px solid #e6e9ef;
    border-radius: 12px; padding: .55rem .7rem; text-decoration: none; color: #12232E;
    font-size: .88rem; font-weight: 600; }
  .cwa-disc-card:hover { background: #f5f7fb; }
  .cwa-disc-card .fi { border-radius: 3px; }
  .cwa-disc-card .mem { margin-left: auto; color: #889; font-weight: 400; font-size: .78rem; }
  .cwa-disc-card .yes { color: #1d9e75; }
  /* Salas que aún no existen (catálogo mundial): mismo botón, en verde de "estrenar". */
  .cwa-disc-world { padding-bottom: 1rem; }
  .cwa-disc-world .ttl { font-size: .8rem; font-weight: 700; color: #667781; padding: .2rem 0 .4rem; }
  .cwa-disc-world .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: .5rem; }
  .cwa-disc-world .cwa-disc-card { width: 100%; text-align: left; background: #fff;
    border-color: #bfe6d5; color: #12232E; cursor: pointer; }
  .cwa-disc-world .cwa-disc-card:disabled { opacity: .5; }

  /* Botón flotante de chat nuevo (buscar persona), como el redondel de WhatsApp. */
  .cwa-fab { position: fixed; right: max(1rem, calc(50vw - 380px + 1rem)); bottom: 1.3rem;
    width: 56px; height: 56px; border-radius: 50%; background: hsl(var(--primary));
    z-index: 1031;
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; text-decoration: none; box-shadow: 0 4px 14px rgba(18,35,46,.25); }
  .cwa-fab svg { display: block; }
  /* Con la barra de navegación inferior puesta (móvil), el redondel sube por
     encima de ella: si no, queda debajo de "Exchanges/Chat" y no se puede tocar.
     La clase la pone el script de includes/mobile_bottom_nav.html. */
  body.has-pbc-mnav .cwa-fab { bottom: calc(64px + 1rem + env(safe-area-inset-bottom, 0px)); }

  /* Foto en grande al pinchar la foto (como WhatsApp): ventana <dialog> nativa. */
  .cwa-photo-dlg { border: none; border-radius: 16px; padding: 0; background: #111b21;
    max-width: min(86vw, 480px); }
  .cwa-photo-dlg::backdrop { background: rgba(17,27,33,.75); }
  .cwa-photo-dlg img { display: block; width: 100% !important; height: auto !important; }
  .cwa-photo-dlg .nm { color: #fff; font-weight: 700; padding: .6rem .9rem; font-size: .95rem; }

  /* ===== Escritorio (≥900px): pantalla partida como WhatsApp Web =====
     Izquierda, la lista con su buscador y filtros; derecha, la conversación
     abierta en un panel del mismo dominio. El alto lo fija el JS en --cwa-h
     para que cada columna tenga su PROPIO scroll, como WhatsApp. */
  .cwa-right { display: none; }
  @media (min-width: 900px) {
    .cwa-panel { max-width: 1280px; display: grid;
      grid-template-columns: 400px minmax(0, 1fr);
      height: var(--cwa-h, 78vh); min-height: 0; padding-bottom: 0; }
    .cwa-left { overflow-y: auto; min-height: 0; border-right: 1px solid #e2e6ee;
      position: relative; }
    .cwa-right { display: flex; flex-direction: column; min-height: 0; background: #f0f2f5; }
    .cwa-right iframe { border: none; width: 100%; height: 100%; flex: 1; }
    .cwa-hello { flex: 1; display: flex; flex-direction: column; align-items: center;
      justify-content: center; gap: .6rem; color: #667781; text-align: center; padding: 1rem; }
    .cwa-hello .big { font-size: 2.6rem; }
    .cwa-row.act { background: #e7f0ff; }
    .cwa-fab { position: sticky; bottom: 1.1rem; margin: .6rem 1rem .9rem auto; }
  }