/* Extraido de templates/community_chat.html el 14/08/2026: 40 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. */
  /* ===== Sala de chat (scoped cchat-) =====
     Estructura: página con fondo gris suave; cabecera de color a TODO el ancho
     (la navbar v2 es transparente con texto blanco, así el menú se lee sobre
     color); y debajo un panel de chat centrado y estrecho, tipo WhatsApp/Telegram,
     que "flota" sobre el gris con raíles a los lados en pantalla grande. */
  /* Chat a pantalla completa tipo WhatsApp: la pagina se clava a la ventana
     (nada de scroll de pagina, ni rebote), el pie de la web se oculta y SOLO
     hace scroll la lista de mensajes. El alto lo manda el "viewport visible"
     (--cchat-vh): lo que queda por encima del teclado, que el JS de abajo
     mide en cada momento. Asi la caja de escribir queda siempre pegada al
     teclado y no se puede bajar mas alla del ultimo mensaje. */
  body.cchat-body { position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    overflow: hidden; overscroll-behavior: none; }
  body.cchat-body .site-footer { display: none; }
  /* La banda de promoción de PBC Live (live_hours_banner) también se oculta:
     el chat mide 100dvh clavados y cualquier cosa encima empuja la caja de
     escribir por debajo del borde de la pantalla. El !important gana al
     display:flex en línea que le pone su propio script al cargar. */
  body.cchat-body #live-hours-band { display: none !important; }
  /* Modo empotrado (?embed=1): la sala vive dentro del panel derecho de la
     portada WhatsApp de escritorio. Fuera el menú de la web, la flecha de
     volver y el hueco de la navbar: la cabecera del chat pega arriba del todo. */
  body.cchat-embed .navbar, body.cchat-embed .v2-mobile-nav,
  body.cchat-embed .pbc-mnav { display: none !important; }
  body.cchat-embed .cchat-head { padding-top: 0; }
  body.cchat-embed .cchat-head a.back { display: none; }
  body.cchat-embed .cchat-head-in { border-radius: 0; }

  .cchat-page { height: 100dvh; height: var(--cchat-vh, 100dvh);
    display: flex; flex-direction: column;
    background: #eef1f5; box-sizing: border-box; }

  /* Cabecera full-bleed de color (padding-top deja hueco a la navbar absoluta).
     Fondo del color primario para que el menú blanco de la navbar se lea. */
  .cchat-head { background: hsl(var(--primary)); padding-top: 4.6rem; }
  .cchat-head-in { max-width: 760px; margin: 0 auto; display: flex; align-items: center;
    gap: .7rem; padding: .55rem 1rem .6rem; box-sizing: border-box;
    background: hsl(var(--primary)); color: #fff; }
  @media (min-width: 800px) {
    .cchat-head-in { border-radius: 12px 12px 0 0; }
  }
  .cchat-head a.back { display: flex; align-items: center; text-decoration: none; color: #fff;
    padding: .2rem .4rem; border-radius: 8px; }
  .cchat-head a.back:hover { background: rgba(255,255,255,.15); }
  /* Iconos de la cabecera (volver, tres puntitos, la persona sin foto y el
     "Miembro"): los mismos SVG de línea del menú, en blanco y algo más grandes
     porque van sobre el azul. */
  .cchat-head .dm-ic { width: 22px; height: 22px; opacity: 1; }
  .cchat-member .dm-ic { width: 14px; height: 14px; stroke-width: 2.4; }
  .cchat-head-nophoto { display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
    background: rgba(255,255,255,.18); }
  /* Menú "tres puntitos" de un chat privado (reportar / eliminar / bloquear). */
  .dm-menu-wrap { position: relative; }
  .dm-menu-btn { display: flex; align-items: center; background: none; border: none; color: #fff;
    line-height: 1; padding: .3rem .45rem; cursor: pointer; border-radius: 8px; }
  .dm-menu-btn:hover { background: rgba(255,255,255,.15); }
  .dm-menu { position: absolute; right: 0; top: 2.2rem; background: #fff; border-radius: 12px;
    box-shadow: 0 6px 24px rgba(18,35,46,.18); min-width: 180px; padding: .3rem; z-index: 40; }
  .dm-menu button { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
    background: none; border: none;
    padding: .6rem .8rem; font-size: .95rem; color: #12232E; border-radius: 8px; cursor: pointer; }
  .dm-menu button:hover { background: #f2f4f7; }
  .dm-menu button.danger { color: #b3261e; }
  /* Enlace del menú (Proponer intercambio): mismo aspecto que los botones. */
  .dm-menu a.dm-menu-link { display: flex; align-items: center; gap: .6rem; width: 100%;
    text-align: left; text-decoration: none;
    padding: .6rem .8rem; font-size: .95rem; color: #12232E; border-radius: 8px; cursor: pointer; }
  .dm-menu a.dm-menu-link:hover { background: #f2f4f7; }
  .dm-menu button:disabled { color: #889; cursor: default; }
  .dm-menu button:disabled:hover { background: none; }
  /* Iconos del menú ⋮: SVG de línea dibujados aquí mismo (los iconos de
     Bootstrap no cargan en la web, y así no hay ninguna descarga extra).
     Heredan el color del texto, también el rojo de "Bloquear". */
  .dm-ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none;
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
  /* Las piezas rellenas (los tres puntitos): el CSS manda sobre los atributos del
     SVG, así que el relleno tiene que declararse AQUÍ o no se pinta nada. */
  .dm-ic .dm-ic-fill { fill: currentColor; stroke: none; }
  .dm-menu button:disabled .dm-ic { opacity: .55; }
  /* El botón del sonido lleva los dos iconos (campana y campana tachada) y el
     JS enseña el que toca; [hidden] gana al display para que solo se vea uno. */
  .dm-menu .cchat-snd-ico { display: flex; align-items: center; }
  .dm-menu .cchat-snd-ico[hidden] { display: none; }
  /* "Invitar" con dos opciones (A/B) cuando PBC Live está encendido. */
  .dm-invite-ab { border-bottom: 1px solid #eef1f5; padding-bottom: .3rem; margin-bottom: .3rem; }
  .dm-invite-t { font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: #889;
    text-transform: uppercase; padding: .45rem .8rem .15rem; }
  .dm-invite-ab b { display: inline-block; min-width: 1.1rem; color: hsl(var(--primary)); }
  .cchat-head .fi { font-size: 1.25rem; border-radius: 4px; }
  /* Foto de la otra persona en la cabecera del privado. Sin foto se queda el 💬.
     Nada de "avatar"/"image" en el nombre de la clase: una regla global de móvil los
     estira a lo ancho. !important porque esa misma regla toca a todas las img. */
  .cchat-head-photo { width: 34px !important; height: 34px !important; border-radius: 50%;
    object-fit: cover; display: block; flex-shrink: 0; }
  .cchat-head .tname { font-family: 'Futura Cyrillic Bold', sans-serif; font-size: 1.05rem; flex: 1; line-height: 1.2; color: #fff; }
  /* Título pulsable (abre "quién está en el grupo"): sin subrayado ni color raro,
     igual que WhatsApp; solo el dedo y un toque de fondo al pasar por encima. */
  .cchat-head .tname-tap { cursor: pointer; border-radius: 8px; margin: -.15rem -.35rem;
    padding: .15rem .35rem; }
  .cchat-head .tname-tap:hover { background: rgba(255,255,255,.12); }
  .cchat-head .tname small { display: block; font-family: inherit; font-weight: 400; color: rgba(255,255,255,.85); font-size: .75rem; margin-top: .1rem; }
  /* "Activo" / "escribiendo…" en el subtítulo del privado: verde suave sobre la
     cabecera para que se distinga del @usuario sin gritar. */
  .cchat-head .tname small.presence { color: #a7f3c0; font-style: italic; }
  .cchat-member { display: inline-flex; align-items: center; gap: .25rem; background: rgba(255,255,255,.22);
    color: #fff; border-radius: 999px; padding: .22rem .6rem; font-size: .72rem; font-weight: 700; white-space: nowrap; }

  /* ===== Empezar Live desde el grupo (Guille 08/08/2026) =====
     Una opción MÁS del menú ⋮, no una banda: la cabecera se queda limpia
     (misma decisión que "Invitar" en los privados). Lo único que la distingue
     de sus vecinas es el verde de Live y la línea pequeña con los idiomas. */
  .dm-menu .live-quick { color: #15803d; font-weight: 600; align-items: flex-start; }
  .dm-menu .live-quick:disabled { color: #6b8f79; }
  .live-quick-txt { display: block; min-width: 0; }
  .live-quick-t { display: block; }
  /* Qué idioma hablo y cuál practico, SIEMPRE escrito: es lo que decide si el
     emparejamiento es el que la persona quiere. */
  .live-quick-s { display: block; color: #5b7a68; font-size: .74rem; font-weight: 400;
    line-height: 1.25; margin-top: .1rem; }
  /* La pregunta se abre DENTRO del menú, debajo de la opción. */
  /* La banda de MI espera. Mismo verde y mismo sitio que el aviso de "alguien te
     espera", pero NO parpadea entera: lo que late es el puntito. La de invitar
     es una oportunidad que se escapa; esta es un estado tuyo, y un estado que
     parpadea cansa. */
  /* Fina, igual que la de invitar (Guille 08/08/2026: "ahora es muy mazacote"):
     es un estado, así que menos alto y menos letra. */
  .live-mine { display: flex; align-items: center; gap: .45rem; width: calc(100% - 1.2rem);
    margin: .3rem .6rem; padding: .3rem .8rem; border: 0; border-radius: 999px;
    background: #16a34a; color: #fff; text-align: left; cursor: pointer;
    font-family: inherit; }
  .live-mine[hidden] { display: none; }
  .live-mine-dot { width: .45rem; height: .45rem; border-radius: 999px; background: #fff;
    flex: none; box-shadow: 0 0 0 0 rgba(255,255,255,.6); animation: liveMinePulse 2s infinite; }
  @media (prefers-reduced-motion: reduce) { .live-mine-dot { animation: none; } }
  @keyframes liveMinePulse {
    70% { box-shadow: 0 0 0 .3rem rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  }
  .live-mine-txt { flex: 1; min-width: 0; }
  .live-mine-t { display: block; font-size: .8rem; font-weight: 600; line-height: 1.3; }
  .live-mine-s { display: block; color: #d6f3e5; font-size: .66rem; margin-top: .05rem; }

  /* La ventanita de empezar un Live: pequeña a propósito. Solo hay que decir de
     qué lado estás; el Live entero ya vive en su propia página. */
  .live-modal { position: fixed; inset: 0; z-index: 9700; display: flex;
    align-items: center; justify-content: center; padding: 1rem;
    background: rgba(18,35,46,.55); }
  .live-modal[hidden] { display: none; }
  .live-modal-card { background: #fff; border-radius: 16px; padding: 1.1rem 1.1rem .9rem;
    width: min(23rem, 100%); box-shadow: 0 12px 40px rgba(18,35,46,.28); }
  .live-modal-t { margin: 0; font-size: 1.05rem; color: #12232E;
    font-family: 'Futura Cyrillic Bold', sans-serif; }
  .live-modal-sub { margin: .15rem 0 .8rem; font-size: .85rem; color: #5b6b78; }
  .live-modal-opt { display: flex; align-items: center; gap: .55rem; cursor: pointer;
    border: 1px solid #dfe5ec; border-radius: 12px; padding: .6rem .7rem;
    margin-bottom: .45rem; font-size: .92rem; color: #12232E; }
  .live-modal-opt:has(input:checked) { border-color: #16a34a; background: #f1faf4; }
  .live-modal-opt input { accent-color: #16a34a; flex: none; }
  .live-modal-btns { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .7rem; }
  .live-modal-no { background: none; border: 0; color: #5b6b78; font-size: .9rem;
    padding: .5rem .7rem; cursor: pointer; font-family: inherit; }
  .live-modal-go { background: #16a34a; color: #fff; border: 0; border-radius: 10px;
    padding: .5rem 1.1rem; font-weight: 700; font-size: .92rem; cursor: pointer;
    font-family: inherit; }
  .live-modal-go:disabled { opacity: .6; cursor: default; }

  /* Panel de chat centrado. Ocupa el alto restante y no crece más de 760px. */
  .cchat-panel { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; display: flex;
    flex-direction: column; min-height: 0; background: #fff; box-sizing: border-box; }
  @media (min-width: 800px) {
    .cchat-panel { border-left: 1px solid #e2e6ee; border-right: 1px solid #e2e6ee; }
  }

  .cchat-scroll { flex: 1; overflow-y: auto; padding: 1.1rem 1rem; background: #f7f8fa;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .cchat-msg { max-width: 78%; margin-bottom: .55rem; padding: .55rem .8rem; border-radius: 14px; background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.05); font-size: .95rem; line-height: 1.35; overflow-wrap: break-word; }
  /* Respeta los saltos de línea del texto pegado (los mensajes en vivo llegan
     por textContent, sin <br>, así que sin esto se ven en un solo bloque). */
  .cchat-msg .txt { white-space: pre-wrap; overflow-wrap: anywhere; }
  .cchat-msg .who { font-size: .72rem; font-weight: 700; color: hsl(var(--primary)); margin-bottom: .1rem; }
  .cchat-msg .when { font-size: .65rem; color: #99a; text-align: right; margin-top: .15rem; }
  /* Etiqueta "Editado", junto a la hora. */
  .cchat-msg .cc-edited { display: block; font-size: .62rem; color: #99a; font-style: italic; text-align: right; }
  /* Editar es como en WhatsApp: el texto se sube a la caja de abajo y la burbuja
     se queda marcada mientras tanto. */
  .cchat-msg.cc-editing { box-shadow: 0 0 0 2px hsl(var(--primary)); }
  .cchat-msg.mine { margin-left: auto; background: #e7f0ff; }
  .cchat-msg.mine .who { display: none; }
  /* Envío optimista: burbuja provisional (traslúcida) y fallida (borde rojo, clic reintenta) */
  .cchat-msg.cc-pending { opacity: .55; }
  .cchat-msg.cc-send-failed { opacity: 1; border: 1px solid #dc3545; cursor: pointer; }
  .cchat-msg.cc-send-failed .when { color: #dc3545; font-weight: 600; }

  /* Botones de moderar (borrar / banear): pequeños, a la derecha, bajo la hora.
     El JS solo los añade a los mensajes que TÚ puedes tocar (los tuyos, o todos si
     eres admin), así que aquí no hay lógica de permisos, solo estilo. */
  .cc-act { display: flex; justify-content: flex-end; gap: .35rem; margin-top: .25rem; }
  .cc-act button { border: none; background: rgba(0,0,0,.06); color: #556; border-radius: 6px;
    font-size: .68rem; font-weight: 700; line-height: 1; padding: .25rem .45rem; cursor: pointer; }
  .cc-act button:hover { background: rgba(0,0,0,.12); }
  .cc-act button.ban { background: #fdecef; color: #b00020; }
  .cc-act button.ban:hover { background: #f9d7dd; }
  .cc-act button:disabled { opacity: .5; cursor: default; }

  /* Nombre pinchable (solo en el chat de grupo): abre la opción de escribir en privado. */
  .cchat-msg .who.cc-who-link { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
  .cc-dm-pop { position: fixed; z-index: 60; background: #fff; border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: .5rem; min-width: 190px; }
  .cc-dm-pop .nm { font-size: .78rem; font-weight: 700; color: #556; padding: .25rem .5rem .4rem; }
  .cc-dm-pop button { display: flex; align-items: center; gap: .5rem; width: 100%; border: none;
    background: transparent; text-align: left; font-size: .92rem; color: #123; padding: .55rem .5rem;
    border-radius: 8px; cursor: pointer; font-family: inherit; }
  .cc-dm-pop button:hover { background: #eef2fb; }
  .cc-dm-pop button:disabled { opacity: .5; cursor: default; }

  /* Corazón de "me gusta" bajo cada mensaje. Aparece al pasar el ratón por encima;
     si el mensaje ya tiene likes (o se lo diste tú) se queda visible con el número.
     En pantallas sin ratón (móvil) siempre visible para poder tocarlo. El JS pone
     el botón a cada mensaje y lo alterna; aquí solo estilo. */
  .cc-like { display: inline-flex; align-items: center; gap: .2rem; border: none; cursor: pointer;
    background: transparent; color: #8a94a6; font-size: .72rem; font-weight: 700; line-height: 1;
    padding: .2rem .2rem; margin-top: .1rem; border-radius: 6px; opacity: 0; transition: opacity .12s; }
  .cchat-msg:hover .cc-like { opacity: 1; }
  .cc-like.has, .cc-like.on { opacity: 1; }
  .cc-like:hover { background: rgba(0,0,0,.05); }
  .cc-like .heart { font-size: 1rem; line-height: 1; }
  .cc-like.on { color: #e0245e; }
  .cc-like .cnt:empty { display: none; }
  .cc-like:disabled { opacity: .5; cursor: default; }
  @media (hover: none) { .cc-like { opacity: 1; } }

  /* ===== Responder (estilo WhatsApp) =====
     Cajita de cita dentro de la burbuja: barra de color a la izquierda, nombre del
     autor original y un trocito de su texto. Pinchable: salta al mensaje original. */
  .cc-quote { display: block; border-left: 3px solid hsl(var(--primary)); background: rgba(0,0,0,.05);
    border-radius: 8px; padding: .35rem .55rem; margin-bottom: .3rem; cursor: pointer;
    font-size: .82rem; line-height: 1.3; }
  .cchat-msg.mine .cc-quote { background: rgba(0,0,0,.06); }
  .cc-quote .qwho { font-weight: 700; color: hsl(var(--primary)); font-size: .74rem; margin-bottom: .05rem; }
  .cc-quote .qtxt { color: #556; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; }
  .cc-quote .qtxt.gone { font-style: italic; color: #99a; }
  /* Botón "responder" (flecha) junto al corazón: mismo comportamiento de aparición. */
  .cc-reply-btn { display: inline-flex; align-items: center; border: none; cursor: pointer;
    background: transparent; color: #8a94a6; font-size: .85rem; line-height: 1;
    padding: .2rem .3rem; margin-top: .1rem; border-radius: 6px; opacity: 0; transition: opacity .12s; }
  .cchat-msg:hover .cc-reply-btn { opacity: 1; }
  .cc-reply-btn:hover { background: rgba(0,0,0,.05); }
  @media (hover: none) { .cc-reply-btn { opacity: 1; } }
  /* Barra sobre la caja de escribir: "Respondiendo a X" con botón de cerrar. */
  .cc-replybar { display: none; align-items: center; gap: .6rem; border-top: 1px solid #e5e8ee;
    background: #f2f5fa; padding: .45rem .9rem; }
  .cc-replybar.on { display: flex; }
  .cc-replybar .body { flex: 1; min-width: 0; border-left: 3px solid hsl(var(--primary));
    padding-left: .55rem; }
  .cc-replybar .rwho { font-size: .74rem; font-weight: 700; color: hsl(var(--primary)); }
  .cc-replybar .rtxt { font-size: .82rem; color: #556; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; }
  .cc-replybar .close { border: none; background: transparent; color: #8a94a6; font-size: 1.1rem;
    cursor: pointer; padding: .2rem .4rem; border-radius: 6px; flex: 0 0 auto; }
  .cc-replybar .close:hover { background: rgba(0,0,0,.06); }
  /* La misma barrita, en modo editar: lápiz delante del rótulo. */
  .cc-replybar.cc-editing-bar .rwho::before { content: "✎ "; }
  /* Destello al saltar al mensaje original. */
  @keyframes ccFlash { 0%, 60% { background: #fff3c4; } 100% { background: #fff; } }
  .cchat-msg.cc-flash { animation: ccFlash 1.6s ease-out; }
  .cchat-msg.mine.cc-flash { animation: none; box-shadow: 0 0 0 2px hsl(var(--primary)); transition: box-shadow .3s; }

  .cchat-day { text-align: center; font-size: .72rem; color: #99a; margin: .8rem 0 .5rem; }
  /* Raya de "no leídos" (estilo WhatsApp): banda a lo ancho justo encima del
     primer mensaje sin leer; la sala se abre a esa altura, no abajo del todo. */
  .cchat-unread { text-align: center; font-size: .72rem; color: #5b6b7c;
    background: #eef3fa; border-top: 1px solid #dbe4ef; border-bottom: 1px solid #dbe4ef;
    padding: .3rem 0; margin: .8rem 0 .5rem; }
  .cchat-empty { text-align: center; color: #889; font-size: .95rem; margin: 2.4rem auto 0; max-width: 22rem; line-height: 1.5; }
  .cchat-empty .big { display: block; font-size: 2rem; margin-bottom: .4rem; }

  /* Tarjeta "activa los avisos": arriba del todo de la sala, encima de los
     mensajes. La enseña el JS de push_register.html solo si este aparato no
     tiene los avisos puestos; se cierra y no vuelve. */
  .ccpush-card { position: relative; display: flex; align-items: flex-start; gap: .85rem;
    margin: .7rem .7rem 0; padding: 1rem 2.4rem 1.1rem 1rem; border-radius: 18px;
    background: linear-gradient(135deg, #e8f9fd 0%, #f4fbfd 60%, #fff 100%);
    border: 1px solid #bfe9f3; box-shadow: 0 6px 18px rgba(2,169,202,.14);
    font-size: .92rem; line-height: 1.45; color: #123a44; }
  .ccpush-card[hidden] { display: none; }
  .ccpush-ico { flex: none; width: 46px; height: 46px; border-radius: 50%;
    background: linear-gradient(135deg, #02A9CA 0%, #12c5d9 100%); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.45rem;
    box-shadow: 0 4px 12px rgba(2,169,202,.35); }
  .ccpush-txt { flex: 1; min-width: 0; }
  .ccpush-txt strong { display: block; font-size: 1.02rem; font-weight: 800;
    letter-spacing: -.01em; margin-bottom: .2rem; color: #0c2f38; }
  .ccpush-txt .ccpush-sub { display: block; color: #446; font-size: .89rem; }
  .ccpush-steps { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .86rem; color: #35606b; }
  .ccpush-steps li { margin-bottom: .2rem; }
  .ccpush-go { display: block; width: 100%; margin-top: .85rem;
    background: linear-gradient(135deg, #02A9CA 0%, #0bbfd6 100%); color: #fff; border: 0;
    border-radius: 999px; padding: .85rem 1.4rem; font-weight: 800; font-size: 1rem;
    font-family: inherit; cursor: pointer; box-shadow: 0 6px 16px rgba(2,169,202,.34);
    transition: transform .12s ease, box-shadow .12s ease; }
  .ccpush-go:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(2,169,202,.42); }
  .ccpush-go:active { transform: translateY(1px); box-shadow: 0 3px 10px rgba(2,169,202,.3); }
  .ccpush-go:disabled { opacity: .6; cursor: default; transform: none; }
  .ccpush-x { position: absolute; top: .5rem; right: .55rem; background: none; border: 0;
    color: #86a9b3; font-size: 1.05rem; line-height: 1; padding: .3rem; cursor: pointer; }
  @media (min-width: 560px) {
    .ccpush-go { width: auto; min-width: 15rem; }
  }

  /* Caja de escribir (miembro). */
  .cchat-form { display: flex; gap: .5rem; padding: .7rem 1rem; border-top: 1px solid #e5e8ee; background: #fff;
    padding-bottom: calc(.7rem + env(safe-area-inset-bottom)); }
  .cchat-form textarea { flex: 1; resize: none; border: 1.5px solid #d8dce3; border-radius: 14px;
    padding: .6rem 1rem; font-size: 1rem; font-family: inherit; max-height: 10rem; overflow-y: auto; }
  .cchat-form textarea:focus { outline: none; border-color: hsl(var(--primary)); }
  .cchat-form button { background: hsl(var(--primary)); color: #fff; border: none; border-radius: 50%;
    width: 44px; height: 44px; flex: 0 0 44px; font-size: 1.15rem; cursor: pointer; align-self: flex-end;
    display: flex; align-items: center; justify-content: center; }
  .cchat-form button:disabled { opacity: .5; cursor: default; }
  /* Botón del micro: mismo redondel que enviar, pero en gris hasta que grabas. */
  #cchatMic { background: #eef1f6; color: #33506b; }
  /* Barra de grabación: ocupa la caja entera mientras se graba. */
  .cchat-rec { flex: 1; display: flex; align-items: center; gap: .6rem; border: 1.5px solid #e0245e;
    border-radius: 20px; padding: .3rem .5rem .3rem 1rem; background: #fff5f7; }
  .cchat-rec .dot { color: #e0245e; animation: ccRecBlink 1s infinite; }
  .cchat-rec .time { font-variant-numeric: tabular-nums; font-weight: 700; color: #12232E; flex: 1; }
  .cchat-rec button { width: 38px; height: 38px; flex: 0 0 38px; align-self: center; }
  #cchatRecCancel { background: #eef1f6; color: #33506b; }
  @keyframes ccRecBlink { 50% { opacity: .2; } }
  /* Mensaje de voz: reproductor propio (play, barra, duración y velocidad), no el
     nativo del navegador. El nativo tapaba con sus botones la esquina donde vive el
     menú de la burbuja, así que la nota de voz no se podía borrar. */
  .cchat-msg.cc-voice { max-width: 88%; }
  .cc-vp { display: flex; align-items: center; gap: .5rem; margin: .15rem 0;
    width: min(280px, 68vw); }
  .cc-vp-play { flex: 0 0 34px; width: 34px; height: 34px; padding: 0; border: none;
    border-radius: 50%; background: #33506b; color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center; }
  .cc-vp-bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(11,20,26,.16);
    position: relative; cursor: pointer; }
  .cc-vp-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0;
    border-radius: 3px; background: #33506b; }
  .cc-vp-time { font-size: .78rem; color: #667781; font-variant-numeric: tabular-nums; }
  /* Velocidad estilo WhatsApp: un botón que va girando 1x -> 1.5x -> 2x. */
  .cc-vp-rate { border: none; border-radius: 10px; padding: .12rem .35rem; min-width: 2.2rem;
    background: #33506b; color: #fff; cursor: pointer;
    font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; }
  /* Mensaje de foto: la imagen dentro de la burbuja, estilo WhatsApp. Se pinta
     para TODO el mundo (las fotos las manda quien tiene el flag, pero las ve
     cualquiera de la sala). */
  .cchat-msg.cc-image { max-width: 88%; }
  .cc-imgwrap { display: block; margin: .15rem 0; }
  .cc-img { display: block; max-width: min(300px, 62vw); max-height: 340px;
    border-radius: 12px; background: #eef1f6; }
  /* Mensaje de vídeo: el reproductor nativo dentro de la burbuja, del mismo ancho
     que las fotos. Fondo negro para que no parpadee en blanco mientras carga. */
  .cchat-msg.cc-video { max-width: 88%; }
  /*El !important no es capricho: mobile-responsive.css tiene una regla
     global "video { max-width: 100% !important }" que, sin esto, estira el vídeo a
     todo el ancho de la burbuja.*/
  .cc-video-el { display: block; margin: .15rem 0; max-width: min(300px, 62vw) !important;
    max-height: 340px; border-radius: 12px; background: #000; }
  /* Mensaje de documento: fila de descarga (clip, nombre y peso), estilo WhatsApp. */
  .cchat-msg.cc-file { max-width: 88%; }
  .cc-filerow { display: flex; align-items: center; gap: .55rem; margin: .15rem 0;
    padding: .5rem .6rem; border-radius: 10px; background: rgba(0, 0, 0, .05);
    text-decoration: none; color: inherit; max-width: min(300px, 62vw); }
  .cchat-msg.mine .cc-filerow { background: rgba(0, 0, 0, .06); }
  .cc-fileic { font-size: 1.25rem; line-height: 1; flex: 0 0 auto; }
  .cc-filetxt { min-width: 0; }
  /* El nombre puede ser larguísimo: una línea con puntos suspensivos, nunca
     estirando la burbuja. */
  .cc-filename { display: block; font-size: .9rem; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cc-filemeta { display: block; font-size: .75rem; opacity: .65; }
  /* Visor de fotos: la foto a tamaño completo encima del chat, sin pestaña
     nueva. <dialog>+showModal como la ventana sobre el ticket (nada de
     z-index a mano). Tocar en cualquier sitio o la ✕ lo cierra. */
  .cc-lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; outline: none; }
  .cc-lightbox::backdrop { background: rgba(0, 0, 0, .88); }
  .cc-lightbox img { display: block; max-width: 94vw; max-height: 90vh; border-radius: 10px; }
  .cc-lightbox .cc-lb-close { position: fixed; top: .6rem; right: .8rem; width: 42px; height: 42px;
    border: 0; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff;
    font-size: 1.3rem; line-height: 1; cursor: pointer; }
  /* Pie de foto: el texto va DENTRO de la burbuja, justo debajo de la imagen,
     con el mismo ancho que la foto para que no estire la burbuja. */
  .cchat-msg.cc-image .cc-cap { max-width: min(300px, 62vw); margin-top: .25rem;
    white-space: pre-wrap; overflow-wrap: anywhere; }
  /* Pantalla previa de la foto antes de enviarla (estilo WhatsApp): fondo negro
     a pantalla completa, la foto en medio y abajo la caja del pie con el botón
     de enviar. Mismo <dialog>+showModal que el visor. */
  .cc-preview { border: 0; padding: 0; background: transparent; width: 100vw; height: 100dvh;
    max-width: 100vw; max-height: 100dvh; outline: none; }
  .cc-preview::backdrop { background: rgba(0, 0, 0, .93); }
  .cc-preview img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%);
    max-width: 94vw; max-height: 66dvh; border-radius: 10px; }
  .cc-preview .cc-pv-close { position: absolute; top: .6rem; left: .8rem; width: 42px; height: 42px;
    border: 0; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff;
    font-size: 1.3rem; line-height: 1; cursor: pointer; }
  .cc-pv-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end;
    gap: .5rem; padding: .6rem .7rem calc(.6rem + env(safe-area-inset-bottom)); }
  .cc-pv-bar textarea { flex: 1 1 auto; min-height: 44px; max-height: 30dvh; resize: none;
    border: 0; border-radius: 22px; padding: .7rem 1rem; font: inherit; font-size: 1rem;
    background: #fff; color: #111b21; }
  .cc-pv-send { flex: 0 0 48px; width: 48px; height: 48px; border: 0; border-radius: 50%;
    background: #0066ff; color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; }
  .cc-pv-send:disabled { opacity: .55; cursor: default; }
  /* Botones ＋ y carita del modo WhatsApp: redondos y discretos, a la izquierda
     de la caja. Anulan el redondel azul de ".cchat-form button". */
  .cchat-form .cc-tool { background: transparent; color: #54656f; width: 40px; height: 40px;
    flex: 0 0 40px; border-radius: 50%; padding: 0; }
  .cchat-form .cc-tool:hover { background: rgba(0,0,0,.06); }
  /* Panel de emojis: pestañas por categoría + buscador + rejilla con scroll,
     pegado encima de la caja de escribir. */
  .cc-emoji-panel { position: absolute; bottom: 100%; left: .6rem; margin-bottom: .35rem;
    width: min(420px, calc(100% - 1.2rem));
    background: #fff; border: 1px solid #d8dce3; border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: .45rem; z-index: 45;
    display: flex; flex-direction: column; gap: .35rem; }
  .cc-emoji-panel[hidden] { display: none; }
  .cc-emoji-panel .tabs { display: flex; gap: .1rem; overflow-x: auto; flex: none;
    border-bottom: 1px solid #eceff3; padding-bottom: .25rem; scrollbar-width: thin; }
  .cc-emoji-panel .search { flex: none; width: 100%; border: 1px solid #d8dce3;
    border-radius: 10px; padding: .3rem .55rem; font-size: 1rem; outline: none; }
  .cc-emoji-panel .search:focus { border-color: hsl(var(--primary)); }
  .cc-emoji-panel .grid { max-height: 200px; overflow-y: auto;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: .05rem; }
  /* Prefijo ".cchat-form" a propósito: sin él ganaría el redondel azul (mismo
     motivo que .cc-mnt-item más abajo). */
  .cchat-form .cc-emoji-panel button { background: none; color: inherit; border: none;
    width: auto; height: auto; flex: none; align-self: stretch; font-size: 1.4rem;
    line-height: 1.35; padding: .12rem; border-radius: 8px; cursor: pointer; }
  .cchat-form .cc-emoji-panel button:hover { background: rgba(0,0,0,.06); }
  /* Pestañas: más pequeñas que los emojis de la rejilla; la activa, subrayada. */
  .cchat-form .cc-emoji-panel .tabs button { font-size: 1.15rem; padding: .12rem .3rem;
    opacity: .55; border-radius: 8px 8px 0 0; }
  .cchat-form .cc-emoji-panel .tabs button.on { opacity: 1;
    box-shadow: inset 0 -2px 0 hsl(var(--primary)); }

  /* Barra grande "Únete para escribir" (no miembro). */
  .cchat-joinbar { border-top: 1px solid #e5e8ee; background: #fff; padding: .9rem 1rem;
    padding-bottom: calc(.9rem + env(safe-area-inset-bottom)); text-align: center; }
  .cchat-joinbtn { width: 100%; max-width: 420px; margin: 0 auto; display: flex; align-items: center;
    justify-content: center; gap: .5rem; background: hsl(var(--primary)); color: #fff; border: none;
    border-radius: 14px; padding: .9rem 1rem; font-weight: 700; font-size: 1.02rem; cursor: pointer; }
  .cchat-joinbtn:disabled { opacity: .6; cursor: default; }
  .cchat-joinbtn .plus { font-size: 1.2rem; line-height: 1; }
  .cchat-joinhint { margin: .6rem 0 0; font-size: .8rem; color: #889; }

  /* ===== Tarjeta de tándem compartida en el chat =====
     Un mensaje kind=tandem: en vez de texto, una tarjetita con el par de idiomas,
     la HORA en la zona de cada lector (la pinta el JS desde el instante UTC) y un
     botón para abrir el tándem y unirse. Ancho un poco mayor que un mensaje normal. */
  .cchat-msg.cc-tandem { max-width: 88%; padding: .6rem .7rem; }
  .cc-tcard { border: 1.5px solid #cfe0ff; border-radius: 12px; background: #f4f8ff; padding: .6rem .7rem; }
  .cchat-msg.mine .cc-tcard { border-color: #b9d2ff; }
  /* Intercambio cancelado o caducado: tarjeta apagada, sin botón (Guille 06/08/2026). */
  .cc-tcard--dead { border-color: #d8dde3; background: #f3f4f6; filter: grayscale(1); opacity: .72; }
  .cc-tcard-h { display: flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .95rem;
    color: #12232E; margin-bottom: .35rem; flex-wrap: wrap; }
  .cc-tcard-h .fi { border-radius: 3px; font-size: 1rem; }
  .cc-tcard-h .swap { color: #7a90a8; font-weight: 400; }
  .cc-tcard-when { display: flex; align-items: center; gap: .35rem; font-size: .85rem; color: #33506b;
    font-weight: 600; margin-bottom: .3rem; }
  .cc-tcard-avail { font-size: .78rem; color: #5B6B73; margin-bottom: .55rem; }
  .cc-tcard-avail .full { color: #a05a00; font-weight: 700; }
  .cc-tcard-needs { display: flex; align-items: center; gap: .25rem; font-size: .8rem;
    color: #33506b; font-weight: 600; margin: -.3rem 0 .55rem; flex-wrap: wrap; }
  .cc-tcard-needs .fi { border-radius: 3px; font-size: .9rem; }
  .cc-tcard-open { display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    background: hsl(var(--primary)); color: #fff; text-decoration: none; border-radius: 10px;
    padding: .5rem .9rem; font-weight: 700; font-size: .9rem; }
  .cc-tcard-open:hover { filter: brightness(.96); }
  /* "No puedo" de una invitación reservada: botón secundario junto a Unirme. */
  .cc-tcard-decline { display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    background: none; border: 1.5px solid #b3261e; color: #b3261e; border-radius: 10px;
    padding: .45rem .9rem; font-weight: 700; font-size: .9rem; cursor: pointer; margin-left: .5rem; }
  .cc-tcard-decline:hover { background: #fdf1f0; }

  /* ===== Tarjeta de CLASE compartida en el chat =====
     Gemela de la de tándem (arriba), pero DESTACADA: ORO en vez de azul, para
     que una clase con profe salte a la vista frente a un mensaje normal.
     Oro de verdad (#D4AF37 con brillo), no el marrón de antes (Guille 07/08/2026);
     sobre oro claro el texto va oscuro, que en blanco no se leería. */
  .cchat-msg.cc-kclass { max-width: 88%; padding: .6rem .7rem; }
  .cc-kcard { border: 2px solid #D4AF37; border-radius: 12px; background: #FFFDF3;
    padding: 0; overflow: hidden; }
  .cc-kcard.cc-kcard-off { opacity: .75; }
  .cc-kcard-band { background: linear-gradient(90deg, #F0D67A 0%, #D4AF37 55%, #C9A227 100%);
    color: #3B2E05; font-size: .78rem;
    font-weight: 700; padding: .35rem .6rem; }
  .cc-kcard-b { padding: .6rem .7rem; }
  .cc-kcard-title { display: flex; align-items: center; gap: .4rem; font-weight: 700;
    font-size: .95rem; color: #12232E; margin-bottom: .3rem; flex-wrap: wrap; }
  .cc-kcard-title .fi { border-radius: 3px; font-size: 1rem; }
  .cc-kcard-when { display: flex; align-items: center; gap: .35rem; font-size: .85rem;
    color: #7A5F0A; font-weight: 600; margin-bottom: .2rem; }
  .cc-kcard-meta { font-size: .8rem; color: #7A5F0A; margin-bottom: .35rem; }
  .cc-kcard-avail { font-size: .78rem; color: #5B6B73; margin-bottom: .55rem; }
  .cc-kcard-avail .full { color: #a05a00; font-weight: 700; }
  .cc-kcard-closed { font-size: .78rem; color: #5B6B73; font-style: italic; }
  .cc-kcard-join { display: flex; align-items: center; justify-content: center;
    width: 100%; background: linear-gradient(180deg, #EBCD6B 0%, #D4AF37 60%, #C39A1F 100%);
    color: #3B2E05; text-decoration: none;
    border-radius: 8px; padding: .45rem; font-weight: 700; font-size: .9rem;
    box-sizing: border-box; }
  .cc-kcard-join:hover { filter: brightness(1.05); }
  /* Nombre de la profe dentro de la tarjeta: se ve que se puede pinchar (abre su ficha). */
  .cc-kcard-teacher { font-weight: 700; color: #6B5307; text-decoration: underline;
    text-underline-offset: 2px; cursor: pointer; }
  .cc-kcard-teacher:hover { color: #4A3904; }

  /* Menciones @usuario: azul y pinchable; si me nombran a MÍ, el mensaje entero
     lleva un fondo suave para que salte a la vista al hacer scroll. */
  .cc-mention { color: hsl(var(--primary)); font-weight: 700; cursor: pointer;
    border-radius: 4px; padding: 0 .1rem; }
  .cc-mention:hover { text-decoration: underline; }
  .cc-mention.me { background: #fff3c4; cursor: default; }
  .cchat-msg.cc-mentioned { background: #fffbea; border: 1px solid #f5e6a8; }
  /* Desplegable del autocompletar al teclear "@": pegado encima de la caja. */
  .cchat-form { position: relative; }
  .cc-mnt-list { position: absolute; bottom: 100%; left: .8rem; right: 3.5rem;
    margin-bottom: .3rem; background: #fff; border: 1px solid #d8dce3; border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,.15); overflow: hidden; z-index: 40; }
  /* ".cchat-form .cc-mnt-item" (no ".cc-mnt-item" a secas): sin el prefijo,
     la regla ".cchat-form button" (redondel azul de enviar) gana por
     especificidad y los nombres salían como bolas azules gigantes. */
  .cchat-form .cc-mnt-item { display: flex; align-items: baseline; gap: .45rem;
    width: 100%; height: auto; flex: none; align-self: stretch; border: none;
    border-radius: 0; background: none; color: inherit; text-align: left;
    justify-content: flex-start; padding: .5rem .8rem; font-size: .9rem;
    cursor: pointer; }
  .cc-mnt-item .u { font-weight: 700; color: hsl(var(--primary)); }
  .cc-mnt-item .n { color: #667; font-size: .8rem; }
  .cchat-form .cc-mnt-item.sel, .cchat-form .cc-mnt-item:hover { background: #eef2fb; }

  /* ── Sala de Avisos ──────────────────────────────────────────────────────
     Cartelito del sistema, barra de "aquí no se escribe", chapita de respuestas
     y la ventanita del hilo. Va en el bloque de siempre (no en el de la piel
     WhatsApp) para que la sala se vea bien con las dos pieles. */
  .cchat-sys { align-self: center; max-width: 90%; margin: .3rem auto;
    background: #f2f4f7; color: #5b6770; border-radius: 999px;
    padding: .28rem .8rem; font-size: .78rem; text-align: center; }
  .cchat-mutedbar { display: flex; align-items: center; justify-content: center;
    gap: .45rem; padding: .85rem 1rem; background: #f2f4f7; color: #667781;
    font-size: .88rem; text-align: center; }
  /* Puerta del invitado, donde estaría la caja de escribir. */
  .cchat-guestbar { gap: .7rem; background: #eaf3ff; color: #22405c; }
  .cchat-guestbar .tt { flex: 0 1 auto; }
  .cchat-guestbar .go { flex: 0 0 auto; background: hsl(var(--primary)); color: #fff;
    border-radius: 999px; padding: .4rem .9rem; font-weight: 600; text-decoration: none;
    white-space: nowrap; }
  .cchat-guestbar .go:hover { filter: brightness(1.06); }
  .cc-threadbtn { display: inline-flex; align-items: center; gap: .35rem;
    margin-top: .35rem; padding: .2rem .6rem; border: none; border-radius: 999px;
    background: #eef2fb; color: hsl(var(--primary)); font-size: .8rem;
    font-weight: 600; cursor: pointer; }
  .cc-threadbtn:hover { background: #e2e9f8; }
  .cc-thread { width: min(30rem, 94vw); max-height: 78vh; padding: 0;
    border: none; border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.25);
    overflow: hidden; }
  .cc-thread::backdrop { background: rgba(11,20,26,.45); }
  .cc-th-head { display: flex; align-items: center; gap: .6rem;
    padding: .7rem .9rem; border-bottom: 1px solid #eceff3; font-weight: 700; }
  .cc-th-close { border: none; background: none; font-size: 1rem; cursor: pointer;
    color: #54656f; }
  .cc-th-list { max-height: 52vh; overflow-y: auto; padding: .7rem .9rem;
    display: flex; flex-direction: column; gap: .7rem; }
  .cc-th-msg .who { font-size: .78rem; font-weight: 700; color: hsl(var(--primary)); }
  .cc-th-msg .txt { font-size: .9rem; white-space: pre-wrap; word-break: break-word; }
  .cc-th-empty { color: #8696a0; font-size: .88rem; text-align: center; }
  .cc-th-form { display: flex; align-items: flex-end; gap: .5rem;
    padding: .6rem .9rem .8rem; border-top: 1px solid #eceff3; }
  .cc-th-form textarea { flex: 1; resize: none; border: 1px solid #dfe3e8;
    border-radius: 18px; padding: .5rem .8rem; font: inherit; font-size: .92rem; }
  .cc-th-form button { flex: 0 0 auto; width: 2.3rem; height: 2.3rem;
    border: none; border-radius: 50%; background: hsl(var(--primary)); color: #fff;
    cursor: pointer; }