/* chat-grupal.css — Chat grupal de actividades */
    /* ===== Chat grupal mejorado ===== */
    .gc-head {
      display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: -4px -4px 8px;
      border-radius: 14px; background: linear-gradient(135deg, #ff9f1c22, #2d7ef722);
      border: 1px solid var(--line);
    }
    .gc-icon {
      width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 22px;
      background: linear-gradient(135deg, #ff9f1c, #ff7b00); box-shadow: 0 3px 10px #ff9f1c55; flex: 0 0 auto;
    }
    .gc-stack { display: flex; align-items: center; }
    .gc-av {
      width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--panel);
      background: var(--verde); display: grid; place-items: center; overflow: hidden;
      font-size: 11px; font-weight: 700; color: #07210f; flex: 0 0 auto;
    }
    .gc-av.gc-more { background: #3a4252; color: #fff; }
    .gc-msgs {
      flex: 1; overflow-y: auto; padding: 12px 4px; display: flex; flex-direction: column; gap: 8px;
      background:
        radial-gradient(circle at 20% 10%, #2d7ef70a, transparent 40%),
        radial-gradient(circle at 80% 90%, #4cd07d0a, transparent 40%);
      border-radius: 12px;
    }
    .gmsg { display: flex; align-items: flex-end; gap: 7px; align-self: flex-start; max-width: 88%; animation: bubIn .2s ease; }
    .gmsg-av {
      width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
      background: #2a3340; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff;
      border: 2px solid var(--panel);
    }
    .gc-inputbar { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
    .gc-inputbar input {
      flex: 1; padding: 12px 16px; border-radius: 24px; border: 1px solid var(--line);
      background: #11151c; color: var(--txt); outline: none; font-size: 14px;
    }
    .gc-inputbar input:focus { border-color: var(--azul); }
    .gc-send {
      width: 48px; height: 48px; border: none; border-radius: 50%; cursor: pointer; font-size: 17px; color: #fff;
      background: linear-gradient(135deg, var(--azul), #1f6ae0); box-shadow: 0 4px 12px #2d7ef755;
      transition: transform .1s;
    }
    .gc-send:active { transform: scale(.92); }

    .bell { cursor: pointer; position: relative; font-size: 16px; padding: 8px 11px; }
    .bell:hover { background: rgba(45,126,247,.2); }
    .bell.ring { animation: ring .5s ease; }
    @keyframes ring { 0%,100%{transform:rotate(0);} 20%{transform:rotate(15deg);} 40%{transform:rotate(-12deg);} 60%{transform:rotate(8deg);} 80%{transform:rotate(-4deg);} }
    .badge-count {
      position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
      background: #ff3b30; color: #fff; border-radius: 10px; font-size: 11px; font-weight: 700;
      display: grid; place-items: center; padding: 0 4px; border: 2px solid var(--panel);
    }
    .notif-item { display: flex; gap: 10px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
    .notif-item:hover { background: rgba(255,255,255,.03); }
    .notif-item .ico { font-size: 20px; }
    .notif-item.unread { background: rgba(45,126,247,.08); }

    .fab {
      position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
      z-index: 10; display: flex; flex-direction: column; gap: 10px;
    }
    .fab button {
      width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer; font-size: 20px;
      box-shadow: 0 6px 20px rgba(0,0,0,.4); color: #fff; background: var(--azul);
    }
    .fab button.add { background: var(--verde); color: #07210f; }
    .fab button.locate { background: #3a4252; }
    .fab button.people { background: var(--verde); color: #07210f; }
    .fab button.view3d { background: #3a4252; }
    .fab button.events { background: linear-gradient(135deg, #a78bfa, #8b5cf6); color: #fff; }