/* ════════════════════════════════════════════════════════ */
/*                        REUNIONES                         */
/* ════════════════════════════════════════════════════════ */

.room-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:14px;
  margin-bottom:20px;}

.room-c{
  padding:18px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--r);
  transition:.15s;}

.room-c:hover{
  border-color:var(--green);}

.room-c.active{
  border-color:rgba(34,197,94,.5);
  box-shadow:0 0 0 1px rgba(34,197,94,.12);}

.room-t{
  margin-bottom:6px;
  font-size:14px;
  font-weight:700;}

.room-d{
  margin-bottom:14px;
  font-size:12px;
  color:var(--text2);}

.room-count{
  margin-bottom:12px;
  font-size:11px;
  color:var(--text3);}

/* ════════════════════════════════════════════════════════ */
/*                       TEAM SECTION                       */
/* ════════════════════════════════════════════════════════ */

.team-section{
  margin-top:20px;}

.team-section-title{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:10px;
  font-size:12px;
  font-weight:700;
  color:var(--text2);
  text-transform:uppercase;
  letter-spacing:.05em;}

.team-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;}

.team-member{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:13px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:10px;
  cursor:pointer;
  transition:.15s;}

.team-member:hover{
  border-color:var(--border2);
  transform:translateY(-1px);}

/* ════════════════════════════════════════════════════════ */
/*                      TEAM AVATAR                         */
/* ════════════════════════════════════════════════════════ */

.tm-av{
  position:relative;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--acc);
  color:#fff;
  border-radius:50%;
  font-size:13px;
  font-weight:800;}

.tm-dot{
  position:absolute;
  bottom:0;
  right:0;
  width:9px;
  height:9px;
  border-radius:50%;
  border:2px solid var(--bg2);}

.tm-name{
  font-size:11.5px;
  font-weight:600;
  text-align:center;}

.tm-status{
  font-size:10px;
  color:var(--text2);}


/* ════════════════════════════════════════════════════════ */
/*                   PERFIL MIEMBRO POPUP                   */
/* ════════════════════════════════════════════════════════ */

.member-overlay{
  position:fixed;
  inset:0;
  z-index:600;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(5px);}

.member-popup{
  position:fixed;
  z-index:601;
  width:240px;
  padding:22px;
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  animation:fadeUp .2s ease;}

/* ════════════════════════════════════════════════════════ */
/*                       MEMBER AVATAR                      */
/* ════════════════════════════════════════════════════════ */

.mp-av{
  width:54px;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 10px;
  background:var(--acc);
  color:#fff;
  border-radius:50%;
  font-size:20px;
  font-weight:800;}

.mp-name{
  font-size:15px;
  font-weight:700;
  text-align:center;}

.mp-role{
  margin-bottom:6px;
  font-size:11px;
  color:var(--text2);
  text-align:center;}

.mp-status{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-bottom:16px;
  font-size:12px;}

.mp-dot{
  width:8px;
  height:8px;
  border-radius:50%;}

/* ════════════════════════════════════════════════════════ */
/*                     MEMBER ACTIONS                       */
/* ════════════════════════════════════════════════════════ */

.mp-actions{
  display:flex;
  flex-direction:column;
  gap:7px;}

.mp-btn{
  width:100%;
  padding:9px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  font-size:12.5px;
  font-weight:600;
  transition:.12s;}

.mp-wa{
  background:#25d366;
  color:#fff;}

.mp-wa:hover{
  background:#1da851;}

.mp-call{
  background:rgba(59,130,246,.15);
  color:var(--blue);
  border:1px solid rgba(59,130,246,.3);}

.mp-invite{
  background:var(--bg3);
  color:var(--text);
  border:1px solid var(--border);}

/* ════════════════════════════════════════════════════════ */
/*                      MEETING MODAL                      */
/* ════════════════════════════════════════════════════════ */

.meet-video{
  background:#000;
  height:300px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:60px;
  border-radius:10px;
  margin-bottom:14px;}

.meet-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-bottom:14px;}

.mc-btn{
  width:44px;
  height:44px;
  border:none;
  border-radius:50%;
  cursor:pointer;
  font-size:18px;
  background:var(--bg3);
  transition:var(--tr);}

.mc-btn.end{
  background:var(--red);
  color:#fff;}