/* Extraido de templates/community_chat.html el 14/08/2026: 19 KB de estilos
   iban DENTRO del HTML de la sala, asi que el navegador se los volvia a bajar y
   a leer CADA vez que se entraba en un chat (Guille: "unirse a un chat tarda
   muchisimo"). Como fichero se guarda una vez y se reutiliza. El <link> queda en
   el MISMO sitio que estaba el <style>, para que el orden de la cascada no cambie. */
  /* La barra del chat en un azul más OSCURO que el menú azul de la web: dos
     bandas, dos tonos, se distinguen de un vistazo (petición Guille 05/08). */
  .cchat-head, .cchat-head-in { background: #0047b3; }
  /* Dentro de la sala, FUERA el menú de la web: la cabecera del chat ES la
     barra de arriba, como WhatsApp. Volver = la flecha de la cabecera. */
  body.cchat-body .navbar, body.cchat-body .v2-mobile-nav { display: none !important; }
  /* Y también FUERA la barra inferior de pestañas: la sala mide 100dvh clavados,
     así que la barra (fixed) se pintaba encima de la caja de escribir y del
     botón de bajar. Como WhatsApp: dentro de la conversación no hay pestañas,
     se sale con la flecha de volver. El padding que le pone su script al body
     también sobra aquí (la página no hace scroll). */
  body.cchat-body .pbc-mnav { display: none !important; }
  body.cchat-body.has-pbc-mnav { padding-bottom: 0 !important; }
  .cchat-head { padding-top: max(.25rem, env(safe-area-inset-top)); }
  /* Fondo tipo "papel pintado" de WhatsApp: crema con un punteado muy
     suave hecho en CSS (sin imagen que descargar). Menos aire a los lados para
     que las burbujas queden pegadas al borde, como en WhatsApp. */
  .cchat-scroll { background-color: #efeae2; padding-left: .55rem; padding-right: .55rem;
    background-image: radial-gradient(rgba(60,45,20,.05) 1.5px, transparent 1.5px),
      radial-gradient(rgba(60,45,20,.033) 1.5px, transparent 1.5px);
    background-size: 28px 28px, 28px 28px; background-position: 0 0, 14px 14px; }
  /* Burbujas: esquinas redondas menos la del "rabito", que apunta a quien
     habla (abajo-izquierda los demás, abajo-derecha las mías). */
  .cchat-msg { padding: .5rem .7rem .35rem; border-radius: 12px 12px 12px 4px;
    box-shadow: 0 1px 1px rgba(11,20,26,.13); }
  .cchat-msg .who { font-size: .78rem; }
  .cchat-msg .when { font-size: .68rem; color: #8696a0; margin-top: .1rem; }
  .cchat-msg.mine { background: #d9e9ff; border-radius: 12px 12px 4px 12px; }
  .cchat-msg.mine .when { color: #6b87a5; }
  /* Separador de día: pastilla blanca flotante centrada. */
  .cchat-day { width: fit-content; margin: .8rem auto .5rem; color: #667781;
    background: #fff; border-radius: 8px; padding: .25rem .75rem;
    box-shadow: 0 1px 1px rgba(11,20,26,.1); }
  /* Raya de "no leídos" con la piel WhatsApp: banda verde muy suave. */
  .cchat-unread { background: #d8f2df; color: #3b7a57; border: 0;
    padding: .35rem 0; margin: .8rem 0 .5rem; }
  /* Barra de escribir: fondo gris claro, caja blanca en pastilla redonda de
     UNA línea que crece al escribir (el JS de abajo), redondel azul de enviar. */
  .cchat-form { align-items: flex-end; padding: .55rem .7rem; background: #f0f2f5;
    padding-bottom: calc(.55rem + env(safe-area-inset-bottom)); }
  /* Pastilla blanca: carita | caja | clip | cámara, todo dentro, como WhatsApp. */
  .cc-pill { flex: 1; display: flex; align-items: flex-end; background: #fff;
    border-radius: 24px; box-shadow: 0 1px 1px rgba(11,20,26,.08);
    padding: .15rem .35rem; min-width: 0; }
  .cchat-form textarea { flex: 1; min-width: 0; border: none; border-radius: 0;
    background: transparent; box-shadow: none; padding: .55rem .25rem; }
  .cchat-form textarea:focus { outline: none; }
  /* Iconos dentro de la pastilla: grises, sin fondo, pegados abajo. */
  .cc-pill .cc-tool { align-self: flex-end; margin-bottom: .1rem; }
  /* La caja es de UNA línea: el texto de muestra no puede saltar a una segunda
     línea (salía cortado en móvil). Si no cabe, puntos suspensivos. */
  .cchat-form textarea::placeholder { white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; }
  /* Caja tan ancha como la de WhatsApp: la barra, la pastilla y los iconos
     ceden sus márgenes al texto. En un móvil de 390 px el hueco de escribir
     pasa de unos 130 px a más de 200 px. */
  .cchat-form { gap: .3rem; padding-left: .45rem; padding-right: .45rem; }
  .cc-pill { padding: .15rem .2rem; }
  .cchat-form .cc-tool { width: 34px; height: 34px; flex: 0 0 34px; }
  .cchat-form textarea { padding-left: .3rem; padding-right: .3rem; }
  /* Solo los redondeles sueltos de la derecha (globo, micro, enviar); los de
     dentro de la pastilla no son hijos directos y siguen con lo de arriba. */
  .cchat-form > button { width: 42px; height: 42px; flex: 0 0 42px; }
  /* Nombres de quien habla en grupos: cada persona un color fijo (lo asigna el
     JS a partir de su id, clases ccn0..ccn7). */
  .cchat-msg .who.ccn0 { color: #d4537e; } .cchat-msg .who.ccn1 { color: #1d9e75; }
  .cchat-msg .who.ccn2 { color: #d85a30; } .cchat-msg .who.ccn3 { color: #534ab7; }
  .cchat-msg .who.ccn4 { color: #ba7517; } .cchat-msg .who.ccn5 { color: #185fa5; }
  .cchat-msg .who.ccn6 { color: #993556; } .cchat-msg .who.ccn7 { color: #3b6d11; }
  /* Circulito con la foto (o la inicial) de quien habla, pegado a su burbuja, como
     en los grupos de WhatsApp. Solo en grupos y solo en burbujas de OTROS; lo pinta
     el JS (addAva) y pulsarlo abre la ficha de esa persona. OJO: nada de "avatar" ni
     "image" en el nombre de la clase (regla global de mobile-responsive.css). */
  .cchat-msg.cc-hasava { margin-left: 2.55rem; }
  .cc-ava { position: absolute; left: -2.55rem; top: 0; width: 2.05rem; height: 2.05rem;
    border-radius: 50%; background: #02A9CA; color: #fff; display: flex;
    align-items: center; justify-content: center; font-weight: 700; font-size: .9rem;
    overflow: hidden; cursor: pointer; box-shadow: 0 1px 1px rgba(11,20,26,.18); }
  .cc-ava-ph { width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
    display: block; }
  /* Sin foto propia: el animal del rango hace de foto. Entero (contain), no
     recortado, porque el dibujo lleva fondo transparente. */
  .cc-ava-critter { object-fit: contain; border-radius: 0; }
  /* Flechita + menú y carita de reaccionar (estilo WhatsApp). Con el flag, la
     flecha de responder, la barrita de moderar y el corazón sueltos NO se
     pintan (el JS no los crea): el menú vive en la esquina y las reacciones en
     la paleta (carita o mantener pulsado) + chapitas bajo la burbuja. */
  .cchat-msg { position: relative; }
  .cc-wa-caret { position: absolute; top: .1rem; right: .15rem; border: none;
    background: none; cursor: pointer; color: #8696a0; font-size: 1.05rem;
    line-height: 1; padding: .1rem .25rem; border-radius: 6px; opacity: 0;
    transition: opacity .12s; }
  .cchat-msg:hover .cc-wa-caret, .cc-wa-caret[aria-expanded="true"] { opacity: 1; }
  .cc-wa-caret:hover { background: rgba(11,20,26,.06); }
  .cc-wa-menu { position: absolute; top: 1.45rem; right: .15rem; z-index: 40;
    background: #fff; border-radius: 10px; min-width: 9.5rem; padding: .3rem 0;
    box-shadow: 0 4px 18px rgba(11,20,26,.26); }
  .cc-wa-menu button { display: flex; align-items: center; gap: .6rem; width: 100%;
    text-align: left; border: none;
    background: none; cursor: pointer; padding: .5rem .95rem; font-size: .9rem;
    color: #3b4a54; }
  /* El icono de cada opción lo pinta el JS (mismo dibujo de línea que la barra
     de la cabecera); aquí solo se le baja el grosor para el tamaño pequeño. */
  .cc-wa-menu button svg { flex: none; stroke-width: 1.7; opacity: .85; }
  .cc-wa-menu button:hover { background: #f0f2f5; }
  .cc-wa-menu button.danger { color: #b00020; }
  /* Pulsación larga (táctil), como WhatsApp: paleta de reacciones ENCIMA de
     la burbuja y la barra de acciones SUSTITUYE la cabecera: se pinta dentro
     de .cchat-head-in y la tapa entera (mismo fondo azul), iconos blancos y
     flecha a la izquierda para volver. */
  .cc-wa-react.lp { top: auto; bottom: calc(100% + .3rem); }
  .cchat-head-in { position: relative; }
  .cc-wa-bar { position: absolute; inset: 0; z-index: 70;
    display: flex; align-items: center; justify-content: flex-end; gap: .3rem;
    background: #0047b3; border-radius: inherit; padding: 0 .75rem; }
  .cc-wa-bar button { border: none; background: none; cursor: pointer;
    color: #fff; font-size: 1.35rem; line-height: 1; padding: .35rem .55rem;
    border-radius: 8px; }
  .cc-wa-bar button.back { margin-right: auto; font-size: 1.5rem; padding-left: 0; }
  /* Caso raro sin cabecera: barra fija arriba, como antes pero azul. */
  .cc-wa-bar.loose { position: fixed; inset: auto 0 auto 0; top: 0;
    border-radius: 0; padding: calc(.5rem + env(safe-area-inset-top)) .75rem .5rem; }
  .cc-wa-face { position: absolute; top: 50%; transform: translateY(-50%);
    right: -1.9rem; width: 1.7rem; height: 1.7rem; border: none; cursor: pointer;
    background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(11,20,26,.2);
    font-size: .95rem; line-height: 1; padding: 0; opacity: 0; transition: opacity .12s; }
  .cchat-msg.mine .cc-wa-face { right: auto; left: -1.9rem; }
  .cchat-msg:hover .cc-wa-face { opacity: 1; }
  .cc-wa-face:hover { transform: translateY(-50%) scale(1.12); }
  /* Paleta rápida de reacciones: pastilla flotante bajo la burbuja (como
     WhatsApp) con los 6 emojis y el "+" que abre el panel completo. */
  .cc-wa-react { position: absolute; top: calc(100% + .3rem); right: 0; z-index: 40;
    display: flex; align-items: center; gap: .05rem; background: #fff;
    border-radius: 999px; padding: .25rem .4rem;
    box-shadow: 0 4px 18px rgba(11,20,26,.26); }
  .cchat-msg.mine .cc-wa-react { right: auto; left: 0; }
  .cc-wa-react button { border: none; background: none; cursor: pointer;
    font-size: 1.35rem; line-height: 1; padding: .18rem .22rem; border-radius: 50%;
    transition: transform .1s; }
  .cc-wa-react button:hover { transform: scale(1.25); }
  .cc-wa-react button.sel { background: #e7f0ff; }
  .cc-wa-react button.more { background: #f0f2f5; color: #54656f; width: 1.85rem;
    height: 1.85rem; font-size: 1.15rem; font-weight: 700; padding: 0; }
  /* Panel completo de emojis ("+"): sábana fija abajo con pestañas por
     categoría (🕒 recientes primero), buscador y rejilla con scroll. */
  .cc-wa-picker { position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(4.5rem + env(safe-area-inset-bottom)); z-index: 70;
    width: min(92vw, 420px); max-height: 55vh;
    background: #fff; border-radius: 16px; padding: .5rem;
    box-shadow: 0 8px 30px rgba(11,20,26,.35);
    display: flex; flex-direction: column; gap: .4rem; }
  .cc-wa-picker .tabs { display: flex; justify-content: space-between;
    border-bottom: 2px solid #f0f2f5; padding-bottom: .15rem; }
  .cc-wa-picker .tabs button { border: none; background: none; cursor: pointer;
    font-size: 1.15rem; line-height: 1; padding: .3rem .35rem;
    border-radius: 8px; filter: grayscale(1); opacity: .55;
    border-bottom: 2px solid transparent; margin-bottom: -.35rem; }
  .cc-wa-picker .tabs button.on { filter: none; opacity: 1;
    border-bottom-color: #0066ff; }
  .cc-wa-picker .search { border: 1px solid #e2e6ee; background: #f0f2f5;
    border-radius: 999px; padding: .4rem .9rem; font-size: .9rem; width: 100%;
    outline: none; }
  .cc-wa-picker .search:focus { border-color: #0066ff; background: #fff; }
  .cc-wa-picker .grid { overflow-y: auto; display: grid;
    grid-template-columns: repeat(8, 1fr); }
  .cc-wa-picker .grid button { border: none; background: none; cursor: pointer;
    font-size: 1.45rem; line-height: 1; padding: .3rem 0; border-radius: 8px; }
  .cc-wa-picker .grid button:hover { background: #f0f2f5; }
  .cc-wa-picker .grid button.sel { background: #e7f0ff; }
  /* Sábana "quién reaccionó": misma caja que el picker, con lista de personas
     (foto o inicial, nombre y su emoji a la derecha; mi fila quita la mía). */
  .cc-rx-who { overflow-y: auto; display: flex; flex-direction: column; }
  .cc-rx-who .p { display: flex; align-items: center; gap: .6rem; width: 100%;
    border: none; background: none; text-align: left; padding: .45rem .5rem;
    border-radius: 10px; font-size: .95rem; color: #111b21; }
  .cc-rx-who .p.me { cursor: pointer; }
  .cc-rx-who .p.me:hover { background: #f0f2f5; }
  .cc-rx-who .p .av { width: 2.1rem; height: 2.1rem; border-radius: 50%;
    flex: none; object-fit: cover; background: #e7f0ff; color: #0066ff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; overflow: hidden; }
  .cc-rx-who .p .nm { flex: 1; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
  .cc-rx-who .p .nm small { display: block; color: #667781; font-size: .78rem; }
  .cc-rx-who .p .em { font-size: 1.25rem; flex: none; }
  /* Chapitas de reacciones bajo la burbuja (emoji + cuántos); la mía en azul. */
  .cc-rx { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
  .cc-rx-chip { display: inline-flex; align-items: center; gap: .18rem;
    border: 1px solid #e2e6ee; background: #fff; border-radius: 999px;
    padding: .08rem .4rem; font-size: .92rem; line-height: 1.25; cursor: pointer; }
  .cc-rx-chip .n { font-size: .72rem; color: #54656f; font-weight: 700; }
  .cc-rx-chip.mine { border-color: #0066ff; background: #e7f0ff; }
  .cchat-msg.mine .cc-rx-chip { background: #fff; }
  /* Ticks de leído (privados y grupos): ✓ enviado (gris, el mismo de la hora) y
     ✓✓ VERDE cuando lo han abierto los demás. letter-spacing negativo
     junta los dos ✓ como en WhatsApp. */
  .cc-tk { margin-left: .25rem; font-weight: 700; letter-spacing: -.14em;
    padding-right: .14em; }
  .cc-tk.read { color: #25d366; }
  /* En pantalla táctil no se pintan ni la flechita ni la carita: mantener
     pulsada la burbuja abre la paleta de reacciones y el menú, como WhatsApp. */
  @media (hover: none) { .cc-wa-caret, .cc-wa-face { display: none; } }
  /* Ventana de "Reenviar a…": <dialog> con la lista de mis chats (grupos y
     privados). La abre el JS desde el menú de la burbuja. */
  .cc-fwd { border: none; border-radius: 14px; padding: 0; width: min(340px, 92vw);
    max-height: 70vh; box-shadow: 0 8px 30px rgba(11,20,26,.25); }
  .cc-fwd::backdrop { background: rgba(11,20,26,.35); }
  .cc-fwd .head { display: flex; align-items: center; justify-content: space-between;
    padding: .7rem .6rem .7rem 1rem; border-bottom: 1px solid #e5e8ee; }
  .cc-fwd .head b { font-size: 1rem; }
  .cc-fwd .head button { border: none; background: transparent; color: #8a94a6;
    font-size: 1.1rem; cursor: pointer; padding: .2rem .5rem; border-radius: 6px; }
  .cc-fwd .list { overflow-y: auto; max-height: calc(70vh - 3.2rem); padding: .35rem 0; }
  .cc-fwd .list button { display: block; width: 100%; border: none; background: transparent;
    padding: .6rem 1rem; text-align: left; font-size: .95rem; cursor: pointer; }
  .cc-fwd .list button:hover { background: #f0f2f5; }
  .cc-fwd .list button:disabled { opacity: .5; cursor: default; }
  /* "Info del mensaje": misma caja que "Reenviar a…" (.cc-fwd) con dos bloques,
     "Leído por" y "Entregado a", y las filas de gente de la sábana de
     reacciones (.cc-rx-who .p) para no inventar otro estilo de lista. */
  .cc-info .list { padding: .35rem .6rem .7rem; }
  .cc-info h4 { display: flex; align-items: center; gap: .35rem; margin: .6rem 0 .3rem;
    font-size: .82rem; font-weight: 700; letter-spacing: .02em;
    text-transform: uppercase; color: #54656f; }
  .cc-info h4 svg { flex: none; }
  .cc-info h4.read { color: #0066ff; }
  .cc-info .none { color: #8a94a6; font-size: .9rem; padding: .1rem .5rem .3rem; }
  .cc-info .more { color: #667781; font-size: .82rem; padding: .2rem .5rem 0; }
  /* "Quién está en el grupo": la misma caja de la info del mensaje, con un buscador
     arriba (los grupos de idiomas tienen cientos de personas) y las filas pulsables
     para abrir la ficha de cada quien. */
  .cc-mem-q { padding: .5rem .7rem; border-bottom: 1px solid #eef0f3; }
  .cc-mem-q input { width: 100%; box-sizing: border-box; border: 1px solid #e2e5ea;
    border-radius: 10px; padding: .45rem .7rem; font: inherit; font-size: .92rem;
    background: #f6f7f9; color: #12232e; }
  .cc-mem-q input:focus { outline: none; border-color: #cbd2db; background: #fff; }
  .cc-mem .list { max-height: calc(70vh - 6.2rem); }
  .cc-mem .cc-rx-who .p[data-person-id] { cursor: pointer; }
  .cc-mem .cc-rx-who .p[data-person-id]:hover { background: #f0f2f5; }
  /* "Traducir al leer": panelito inline bajo la burbuja (nada de modales). */
  .cc-tr { margin-top: .35rem; background: #fff; border: 1px solid #e2e6ee;
    border-radius: 10px; padding: .5rem .6rem; font-size: .88rem; color: #3b4a54;
    box-shadow: 0 1px 3px rgba(11,20,26,.08); }
  .cchat-msg.mine .cc-tr { background: #fff; }
  .cc-tr .cc-tr-ask { font-weight: 600; margin-bottom: .3rem; }
  .cc-tr input { width: 100%; border: 1px solid #d5dbe3; border-radius: 8px;
    padding: .35rem .5rem; font-size: .88rem; margin-bottom: .35rem; }
  .cc-tr .cc-tr-btns { display: flex; gap: .4rem; flex-wrap: wrap; }
  .cc-tr button { border: none; border-radius: 999px; cursor: pointer;
    padding: .3rem .75rem; font-size: .82rem; }
  .cc-tr .cc-tr-check { background: #0066ff; color: #fff; }
  .cc-tr .cc-tr-dunno { background: #f0f2f5; color: #3b4a54; }
  .cc-tr .cc-tr-close { position: absolute; top: .15rem; right: .3rem;
    background: none; color: #54656f; font-size: .95rem; padding: .1rem .3rem; }
  .cc-tr { position: relative; }
  .cc-tr .cc-tr-fb { margin-bottom: .25rem; }
  /* La IA nunca habla: ✓ verde grande al acertar, ✗ rojo si no, y la traducción. */
  .cc-tr .cc-tr-fb.ok { color: #0a7d33; font-weight: 700; font-size: 1.5rem; line-height: 1.1; }
  .cc-tr .cc-tr-fb.bad { color: #c62828; font-weight: 700; font-size: 1.5rem; line-height: 1.1; }
  .cc-tr .cc-tr-out { white-space: pre-wrap; }
  /* Fase 2, "escribir en otro idioma": globito junto a enviar y panelito
     ENCIMA de la caja con la frase lista y dos botones (mandar esa / la mía). */
  #cchatCompose { background: #eef1f6; }
  .cc-ct { position: absolute; bottom: 100%; left: .8rem; right: .8rem;
    margin-bottom: .35rem; background: #fff; border: 1px solid #e2e6ee;
    border-radius: 12px; padding: .55rem 1.6rem .55rem .65rem; font-size: .9rem;
    color: #3b4a54; box-shadow: 0 4px 14px rgba(11,20,26,.14); z-index: 30; }
  .cc-ct .cc-ct-out { white-space: pre-wrap; margin-bottom: .4rem; }
  .cc-ct .cc-ct-btns { display: flex; gap: .4rem; flex-wrap: wrap;
    align-items: center; }
  /* "width/height auto": anula el redondel azul 50% de ".cchat-form button".
     "nowrap" + "flex: 0 0 auto": el texto del botón NO se parte en varias
     líneas (los botones salían aplastados y altos). */
  .cc-ct button { border: none; border-radius: 999px; cursor: pointer;
    padding: .3rem .75rem; font-size: .82rem; width: auto; height: auto;
    min-width: 0; flex: 0 0 auto; white-space: nowrap; line-height: 1.3; }
  .cc-ct .cc-ct-send { background: #0066ff; color: #fff; }
  .cc-ct .cc-ct-mine { background: #f0f2f5; color: #3b4a54; }
  /* "Traducir igualmente a X": es la salida cuando la IA cree que el mensaje
     no es de esta sala. Se ofrece, pero sin gritar más que "Send corrected". */
  .cc-ct .cc-ct-into { background: #eaf1ff; color: #0b3f9b; }
  .cc-ct .cc-ct-close { position: absolute; top: .15rem; right: .3rem;
    background: none; color: #54656f; font-size: .95rem; padding: .1rem .3rem; }