/* =========================================================
   panel.css — Panel principal, header, tabs, shared UI
   ========================================================= */

/* ── Tab nav ─────────────────────────────────────────────── */
.tab-nav {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}

.tab-btn {
  padding: 5px 13px;
  border-radius: 8px;
  border: 1px solid rgba(124,255,178,0.2);
  background: transparent;
  color: #7a8e87;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.tab-btn:hover {
  border-color: rgba(124,255,178,0.45);
  color: #b5ffe0;
  background: rgba(124,255,178,0.06);
}

.tab-btn.active {
  border-color: rgba(124,255,178,0.7);
  background: rgba(124,255,178,0.12);
  color: #7CFFB2;
  box-shadow: 0 0 10px rgba(124,255,178,0.2);
}

.tab-btn.tab-soon {
  border-style: dashed;
  color: #6b7280;
  opacity: 0.7;
}

.tab-btn.tab-soon:hover { opacity: 1; }

/* ── Panel header layout ─────────────────────────────────── */
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 16px;
  background: linear-gradient(180deg, #0a0f14, #05070a);
  border-bottom: 1px solid rgba(124,255,178,0.25);
  box-shadow: 0 0 16px rgba(124,255,178,0.12);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.header-logo  { font-size: 18px; color: #7CFFB2; font-weight: 600; }
.header-sub   { font-size: 11px; color: #9fb8a8; }

.minimize-btn {
  background: none;
  border: none;
  color: #9aa4ad;
  cursor: pointer;
  font-size: 18px;
  padding: 4px 8px;
  line-height: 1;
  border-radius: 6px;
  transition: color 0.15s;
}
.minimize-btn:hover { color: #e6e6e6; }

/* ── Tab content ─────────────────────────────────────────── */
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ── Shared buttons ──────────────────────────────────────── */
.btn-subtle {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #444;
  background: #111;
  color: #eee;
  cursor: pointer;
  font-size: 12px;
  transition: border-color 0.15s;
}
.btn-subtle:hover { border-color: #666; }

.btn-danger {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #7a3030;
  background: #1a0a0a;
  color: #f87171;
  cursor: pointer;
  font-size: 12px;
  transition: border-color 0.15s;
}
.btn-danger:hover { border-color: #f87171; }

/* ── "Próximamente" screen ───────────────────────────────── */
.soon-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  gap: 16px;
  text-align: center;
  color: #9aa4ad;
}
.soon-icon  { font-size: 52px; }
.soon-title { margin: 0; font-size: 22px; color: #7CFFB2; font-weight: 600; }
.soon-desc  { margin: 0; font-size: 14px; line-height: 1.6; }
.soon-tags  { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* ── Classic theme overrides for tabs ────────────────────── */
.theme-classic .tab-btn {
  border-color: #dcdfe4;
  color: #6b7280;
  background: #f5f7fa;
}
.theme-classic .tab-btn:hover {
  border-color: #0e72ed;
  color: #0e72ed;
  background: #eef2ff;
}
.theme-classic .tab-btn.active {
  border-color: #0e72ed;
  background: #eef2ff;
  color: #0e72ed;
  box-shadow: none;
}
.theme-classic .tab-btn.tab-soon { border-style: dashed; color: #9aa4ad; }
.theme-classic .panel-header { background: #ffffff; border-bottom: 1px solid #dcdfe4; box-shadow: none; }
.theme-classic .header-logo  { color: #0e72ed; }
.theme-classic .header-sub   { color: #6b7280; }
.theme-classic .minimize-btn { color: #6b7280; }
.theme-classic .soon-title   { color: #0e72ed; }

/* ── Row / toggle helpers (ya en app.css, por si acaso) ──── */
.row    { display: flex; gap: 8px; align-items: center; }
.toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; }
.tag    { display: inline-block; padding: 2px 7px; border-radius: 999px; border: 1px solid; font-size: 11px; }
.tag.host   { background: rgba(220,53,69,0.12); border-color: rgba(220,53,69,0.4); color: #f87171; }
.tag.cohost { background: rgba(14,114,237,0.12); border-color: rgba(14,114,237,0.4); color: #60a5fa; }
.tag.exempt { background: rgba(124,255,178,0.08); border-color: rgba(124,255,178,0.35); color: #7cffb2; }

#attendeesList {
  margin-top: 8px;
  border: 1px solid #1f2933;
  border-radius: 8px;
  overflow: hidden;
}
.attendee {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #0d1117;
  font-size: 13px;
}
.attendee:last-child { border-bottom: none; }
.meta { font-size: 11px; color: #6b7280; margin-top: 2px; }

#whitelistSearch {
  width: 100%;
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid #1f2933;
  font-size: 13px;
  box-sizing: border-box;
}

/* ── Pantalla de bloqueo Pro ─────────────────────────────── */
.pro-block {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 48px 24px; gap: 12px;
  height: 100%;
  min-height: 200px;
}
.pro-block-icon { font-size: 36px; opacity: 0.7; }
.pro-block-title {
  font-size: 16px; font-weight: 700;
  color: #e6e6e6; letter-spacing: 0.02em;
}
.pro-block-desc {
  font-size: 13px; color: #9aa4ad;
  max-width: 280px; line-height: 1.6;
}
.pro-block-desc strong { color: #e6e6e6; }
.pro-block-btn {
  margin-top: 8px;
  padding: 8px 20px; border-radius: 8px;
  border: 1px solid rgba(124,255,178,0.3);
  background: rgba(124,255,178,0.06);
  color: #7cffb2; font-size: 13px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: all 0.15s;
}
.pro-block-btn:hover {
  background: rgba(124,255,178,0.12);
  border-color: rgba(124,255,178,0.6);
}
.theme-classic .pro-block-title  { color: #1f2937; }
.theme-classic .pro-block-desc   { color: #6b7280; }
.theme-classic .pro-block-desc strong { color: #1f2937; }
.theme-classic .pro-block-btn    { border-color: #dcdfe4; background: #f5f7fa; color: #0e72ed; }
.theme-classic .pro-block-btn:hover { background: #eef2ff; border-color: #0e72ed; }

/* ─── Native Zoom participants companion mode ──────────────────────── */
body.zoom-native-participants .panel {
  right: auto;
  width: calc(100vw - 400px);
  min-width: min(720px, 100vw);
  box-shadow: 16px 0 40px rgba(0,0,0,0.45);
}

body.zoom-native-participants #openHostPanelBtn {
  left: 16px;
  transform: none;
}

body.zoom-native-participants #meetingSDKElement {
  padding-left: calc(100vw - 400px);
  box-sizing: border-box;
}

body.zoom-controls-visible .panel {
  bottom: 50px;
  height: auto;
  z-index: 2147483500;
}

body.zoom-controls-visible #sdkOverlay,
body.zoom-controls-visible #oauthScreen,
body.zoom-controls-visible #joinModal {
  bottom: 50px;
}

body.zoom-controls-visible #openHostPanelBtn {
  top: 12px;
  z-index: 2147483499 !important;
}

body.zoom-controls-visible.zoom-native-tool-active .panel {
  display: none !important;
}

body.zoom-controls-visible [role="menu"],
body.zoom-controls-visible [role="listbox"],
body.zoom-controls-visible [role="tooltip"],
body.zoom-controls-visible [role="dialog"],
body.zoom-controls-visible [aria-modal="true"],
body.zoom-controls-visible [class*="dropdown"],
body.zoom-controls-visible [class*="Dropdown"],
body.zoom-controls-visible [class*="popover"],
body.zoom-controls-visible [class*="Popover"],
body.zoom-controls-visible [class*="reaction"],
body.zoom-controls-visible [class*="Reaction"],
body.zoom-controls-visible [class*="more"],
body.zoom-controls-visible [class*="More"],
body.zoom-controls-visible [class*="breakout"],
body.zoom-controls-visible [class*="Breakout"] {
  z-index: 2147483647 !important;
}

@media (max-width: 1050px) {
  body.zoom-native-participants .panel {
    width: calc(100vw - 330px);
    min-width: 0;
  }

  body.zoom-native-participants #meetingSDKElement {
    padding-left: calc(100vw - 330px);
  }
}

@media (max-width: 820px) {
  body.zoom-native-participants .panel {
    width: 100vw;
  }

  body.zoom-native-participants #meetingSDKElement {
    padding-left: 0;
  }
}

.theme-neon .theme-toggle {
  border: 1px solid rgba(124,255,178,0.35);
  background: rgba(5,7,10,0.9);
  color: #e6e6e6;
  border-radius: 6px;
  padding: 5px 9px;
}

.theme-neon .theme-toggle:hover {
  border-color: rgba(124,255,178,0.7);
  color: #7cffb2;
}

.theme-classic .btn-subtle {
  background: #ffffff;
  color: #1f2937;
  border-color: #dcdfe4;
}

.theme-classic .btn-subtle:hover {
  border-color: #0e72ed;
  color: #0e72ed;
}

.theme-classic .btn-danger {
  background: #ffffff;
  color: #b02a37;
  border-color: #f1b6bd;
}

.theme-classic .btn-danger:hover {
  border-color: #dc3545;
  color: #8a1f2a;
}