/* ── Reset & Variáveis (Dark/Neon Theme) ────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Paleta Light Pride: branco predominante, navy #00022D, dourado #CA991E */
  --bg-body: #ffffff;
  --bg-header: #ffffff;
  --bg-card: #ffffff;
  --bg-input: #ffffff;

  /* Brand */
  --navy: #00022D;
  --navy-2: #0a0e5c;
  --gold: #CA991E;
  --gold-2: #e0b440;

  /* Tons de Texto */
  --text-main: #00022D;
  --text-muted: rgba(0, 2, 45, 0.6);
  --text-dark: rgba(0, 2, 45, 0.8);

  /* Accents — cyan/purple antigos remapeados para gold/navy para preservar o restante do CSS */
  --cyan: #CA991E;
  --cyan-light: rgba(202, 153, 30, 0.12);
  --purple: #00022D;
  --purple-light: rgba(0, 2, 45, 0.08);

  /* Semânticas (success/warning/danger) — tons calibrados para fundo claro */
  --green: #2fa86b;
  --green-light: rgba(47, 168, 107, 0.12);
  --orange: #d07828;
  --orange-light: rgba(208, 120, 40, 0.12);
  --red: #d94040;
  --red-light: rgba(217, 64, 64, 0.1);

  /* Mapeamento das variáveis antigas para não quebrar o JS/CSS dependente */
  --blue: var(--cyan);
  --blue-dark: #a07c14;
  --blue-light: var(--cyan-light);
  --amber: var(--orange);
  --amber-light: var(--orange-light);
  --gray-50: #f6f7fb;
  --gray-100: #eef0f6;
  --gray-200: rgba(0, 2, 45, 0.1); /* Bordas */
  --gray-400: var(--text-muted);
  --gray-600: var(--text-dark);
  --gray-900: var(--text-main);

  /* Sombras (suaves sobre fundo claro) */
  --shadow-sm: 0 2px 4px rgba(0, 2, 45, 0.06);
  --shadow-md: 0 6px 16px rgba(0, 2, 45, 0.08);
  --shadow-lg: 0 16px 40px rgba(0, 2, 45, 0.12);
  --glow-cyan: 0 0 10px rgba(202, 153, 30, 0.2);

  --radius: 16px;
  --radius-sm: 8px;
}

body {
  font-family:
    "Segoe UI",
    system-ui,
    -apple-system,
    sans-serif;
  background: var(--bg-body);
  color: var(--text-main);
  min-height: 100vh;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f3f8;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 2, 45, 0.2);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 2, 45, 0.4);
}

/* ── Header ─────────────────────────────────────────────────────── */
header {
  background: var(--bg-header);
  padding: 0 40px;
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;
  height: 70px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.logo-icon {
  width: 38px;
  height: 38px;
  background: var(--navy);
  border: 1px solid var(--gold);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--gold);
  box-shadow: var(--glow-cyan);
}
.logo-text {
  color: var(--text-main);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.logo-sub {
  color: var(--cyan);
  font-size: 0.75rem;
  display: block;
  margin-top: -2px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ── Abas no header ─────────────────────────────────────────────── */
nav {
  display: flex;
  gap: 15px;
  height: 100%;
  margin-left: auto;
}
.nav-tab {
  padding: 0 15px;
  height: 100%;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-tab::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 0.25s;
  box-shadow: 0 -2px 10px rgba(202, 153, 30, 0.45);
}
.nav-tab:hover {
  color: var(--text-main);
}
.nav-tab.active {
  color: var(--cyan);
}
.nav-tab.active::after {
  transform: scaleX(1);
}
.nav-icon {
  font-size: 1.1rem;
}

/* ── Container ──────────────────────────────────────────────────── */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px;
}

/* ── Tab Panels ─────────────────────────────────────────────────── */
.tab-panel {
  display: none;
  animation: fadeIn 0.4s ease;
}
.tab-panel.active {
  display: block;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Card base ──────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--gray-200);
  padding: 24px;
  margin-bottom: 24px;
}
.card-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-title::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: var(--glow-cyan);
}

/* ── Seletor de meses ───────────────────────────────────────────── */
.meses-wrapper {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.mes-btn {
  padding: 8px 18px;
  border-radius: 24px;
  border: 1px solid var(--gray-200);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.mes-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: var(--cyan-light);
}
.mes-btn.active {
  background: var(--cyan-light);
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: var(--glow-cyan);
}

/* ── Form grid ──────────────────────────────────────────────────── */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  align-items: end;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
select,
input[type="date"] {
  padding: 12px 14px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--text-main);
  background: var(--bg-input);
  transition: all 0.2s;
  appearance: none;
  color-scheme: light;
}
select:focus,
input[type="date"]:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(202, 153, 30, 0.18);
}

/* ── Botões ─────────────────────────────────────────────────────── */
.btn {
  padding: 12px 24px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-primary {
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  color: #ffffff;
  border: 1px solid var(--navy);
  box-shadow: 0 4px 14px rgba(0, 2, 45, 0.18);
}
.btn-primary:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 6px 20px rgba(0, 2, 45, 0.25), 0 0 0 1px rgba(202, 153, 30, 0.35);
}
.btn-primary:disabled {
  background: #f1f3f8;
  color: var(--gray-400);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
  border: 1px solid var(--gray-200);
}
.btn-ghost {
  background: #ffffff;
  color: var(--text-dark);
  border: 1px solid var(--gray-200);
}
.btn-ghost:hover {
  background: #f1f3f8;
  color: var(--navy);
  border-color: var(--gold);
}

/* ── Spinner ────────────────────────────────────────────────────── */
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 2, 45, 0.2);
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Loading padrão de "herói" (overlay reutilizável via heroBusy) ───────── */
.hero-loading {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 30, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: inherit;
  animation: fadeIn 0.15s ease;
}
.hero-loading-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.hero-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: #7c5cff;
  animation: spin 0.7s linear infinite;
}
.hero-loading-txt {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* ── Cards de resumo (Neon Stats) ───────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.stat-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}
.stat-card .stat-val {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
}
.stat-card .stat-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.stat-card .stat-icon {
  font-size: 1.5rem;
  margin-bottom: 8px;
  opacity: 0.9;
}
.stat-card .stat-icon .ic { width: 24px; height: 24px; color: var(--navy); opacity: 0.85; }

/* Cores das Stats */
.stat-blue::after {
  background: var(--cyan);
  box-shadow: var(--glow-cyan);
}
.stat-green::after {
  background: var(--green);
  box-shadow: 0 0 10px rgba(0, 230, 118, 0.4);
}
.stat-red::after {
  background: var(--red);
  box-shadow: 0 0 10px rgba(255, 61, 0, 0.4);
}
.stat-amber::after {
  background: var(--orange);
  box-shadow: 0 0 10px rgba(255, 145, 0, 0.4);
}
.stat-purple::after {
  background: var(--purple);
  box-shadow: 0 0 10px rgba(176, 66, 255, 0.4);
}
.stat-gray::after {
  background: var(--text-muted);
}

.stat-blue .stat-val {
  color: var(--cyan);
  text-shadow: var(--glow-cyan);
}
.stat-green .stat-val {
  color: var(--green);
}
.stat-red .stat-val {
  color: var(--red);
}
.stat-amber .stat-val {
  color: var(--orange);
}
.stat-purple .stat-val {
  color: var(--purple);
}
.stat-gray .stat-val {
  color: var(--text-main);
}

/* ── Hero de comissão ───────────────────────────────────────────── */
/* ── Agenda ─────────────────────────────────────────────────────────── */
.ag-periodo-btn {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1.5px solid var(--gray-200);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}
.ag-periodo-btn:hover,
.ag-periodo-btn.active {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #000;
}
.ag-dia-grupo {
  margin-bottom: 28px;
}
.ag-dia-header {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--cyan);
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 12px;
}
.ev-card {
  background: var(--bg-card);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 10px;
  transition: border-color 0.2s;
}
.ev-card:hover {
  border-color: var(--cyan);
}
.ev-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.ev-titulo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
}
.ev-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.ev-row {
  font-size: 0.84rem;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.ev-horario {
  color: var(--cyan);
  font-weight: 600;
}
.ev-desc {
  color: var(--text-dark);
  font-style: italic;
}
.ev-att {
  display: inline-block;
  margin: 2px 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
}
.att-ok {
  background: rgba(0, 230, 118, 0.15);
  color: var(--green);
}
.att-no {
  background: rgba(255, 61, 0, 0.15);
  color: var(--red);
}
.att-q {
  background: rgba(255, 145, 0, 0.15);
  color: var(--orange);
}

.comissao-hero {
  border-radius: var(--radius);
  padding: 40px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.comissao-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='28'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.hero-tier {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.3);
  font-size: 0.85rem;
  font-weight: 700;
  color: white;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.hero-valor {
  font-size: 3.5rem;
  font-weight: 900;
  color: white;
  letter-spacing: -1px;
  line-height: 1;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}
.hero-sub {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 8px;
}
.hero-right {
  text-align: right;
}
.hero-reunioes {
  font-size: 4rem;
  font-weight: 900;
  color: var(--cyan);
  line-height: 1;
  text-shadow: var(--glow-cyan);
}
.hero-reunioes-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Progress bar */
.progress-wrap {
  margin-top: 32px;
  position: relative;
}
.progress-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.progress-label span {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 700;
  text-transform: uppercase;
}
.progress-track {
  height: 10px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.progress-bar {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--purple), var(--cyan));
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 10px var(--cyan);
}

/* Tier gradients (Atualizados para Dark Mode) */
.tier-bronze {
  background: linear-gradient(135deg, #2a1103, #4a2103);
}
.tier-prata {
  background: linear-gradient(135deg, #151821, #242a38);
}
.tier-ouro {
  background: linear-gradient(135deg, #3d2105, #5e3b00);
}
.tier-zero {
  background: linear-gradient(135deg, #12131a, #1a1c24);
}

/* ── Tabela ─────────────────────────────────────────────────────── */
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
thead th {
  background: var(--bg-input);
  padding: 14px 16px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-bottom: 1px solid var(--gray-200);
  white-space: nowrap;
}
tbody tr {
  border-bottom: 1px solid var(--gray-200);
  transition: background 0.2s;
}
tbody tr:last-child {
  border-bottom: none;
}
tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}
tbody td {
  padding: 14px 16px;
  vertical-align: middle;
  color: var(--text-main);
}
.td-num {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
}
.td-bold {
  font-weight: 600;
  color: var(--text-main);
}

/* ── Pills (Tags Neons) ─────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 99px;
  border: 1px solid transparent;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.p-sim {
  background: var(--green-light);
  color: var(--green);
  border-color: rgba(0, 230, 118, 0.2);
}
.p-nao {
  background: var(--red-light);
  color: var(--red);
  border-color: rgba(255, 61, 0, 0.2);
}
.p-remarcada {
  background: var(--orange-light);
  color: var(--orange);
  border-color: rgba(255, 145, 0, 0.2);
}
.p-vazio {
  background: var(--bg-input);
  color: var(--text-muted);
  border-color: var(--gray-200);
}
.p-feita {
  background: var(--cyan-light);
  color: var(--cyan);
  border-color: rgba(0, 242, 254, 0.2);
}
.p-recebida {
  background: var(--purple-light);
  color: var(--purple);
  border-color: rgba(176, 66, 255, 0.2);
}
.p-atendida {
  background: var(--green-light);
  color: var(--green);
  border-color: rgba(0, 230, 118, 0.2);
}
.p-curta {
  background: var(--orange-light);
  color: var(--orange);
  border-color: rgba(255, 145, 0, 0.2);
}
.p-naoatend {
  background: var(--red-light);
  color: var(--red);
  border-color: rgba(255, 61, 0, 0.2);
}
.p-desconhecido {
  background: var(--bg-input);
  color: var(--text-muted);
  border-color: var(--gray-200);
}

/* ── Mensagens ──────────────────────────────────────────────────── */
.msg {
  padding: 18px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 500;
  border: 1px solid transparent;
}
.msg-info {
  background: var(--cyan-light);
  color: var(--cyan);
  border-color: rgba(0, 242, 254, 0.2);
}
.msg-error {
  background: var(--red-light);
  color: var(--red);
  border-color: rgba(255, 61, 0, 0.2);
}
.msg-empty {
  text-align: center;
  padding: 80px 24px;
  color: var(--text-muted);
  font-size: 1rem;
}
.msg-empty .empty-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: 0.5;
}

/* ── Resultado header ───────────────────────────────────────────── */
.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.badge-count {
  background: var(--cyan-light);
  color: var(--cyan);
  border: 1px solid rgba(0, 242, 254, 0.2);
  padding: 6px 16px;
  border-radius: 99px;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: var(--glow-cyan);
}
.badge-count.zero {
  background: var(--red-light);
  color: var(--red);
  border-color: rgba(255, 61, 0, 0.2);
  box-shadow: none;
}

/* ── Player de gravação ─────────────────────────────────────────── */
.btn-play {
  padding: 6px 14px;
  border: 1px solid var(--cyan);
  border-radius: 99px;
  background: rgba(0, 242, 254, 0.05);
  color: var(--cyan);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  text-transform: uppercase;
}
.btn-play:hover {
  background: var(--cyan);
  color: var(--bg-body);
  box-shadow: var(--glow-cyan);
}
.btn-play:disabled {
  border-color: var(--gray-200);
  color: var(--text-muted);
  background: transparent;
  cursor: not-allowed;
}
.sem-gravacao {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Rodapé do render em blocos (renderTabelaEmBlocos) — listas longas como a de
   ligações desenham 200 linhas por vez em vez de milhares de uma só. */
.tbl-mais {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px 0 4px;
}
.btn-mais {
  padding: 8px 22px;
  border: 1px solid var(--cyan);
  border-radius: 99px;
  background: rgba(0, 242, 254, 0.05);
  color: var(--cyan);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  text-transform: uppercase;
}
.btn-mais:hover {
  background: var(--cyan);
  color: var(--bg-body);
  box-shadow: var(--glow-cyan);
}
.btn-mais-info {
  font-weight: 500;
  text-transform: none;
  opacity: 0.75;
}
.tbl-mais-fim {
  font-size: 0.78rem;
  color: var(--text-muted);
}
audio {
  width: 220px;
  height: 35px;
  border-radius: 8px;
  filter: invert(90%) hue-rotate(180deg); /* Truque para player escuro */
}

/* ── Modal ──────────────────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 11, 16, 0.8);
  z-index: 100;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}
.modal-overlay.open {
  display: flex;
  animation: fadeIn 0.2s;
}
.modal-box {
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  padding: 32px;
  width: 550px;
  max-width: 95vw;
  box-shadow: var(--shadow-lg);
}
.modal-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: white;
  margin-bottom: 8px;
}
.modal-sub {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}

/* ── Timeline de Atividade ─────────────────────────────────────── */
.tl-wrap {
  position: relative;
  padding-left: 36px;
}
.tl-wrap::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--gray-200);
}
.tl-item {
  position: relative;
  margin-bottom: 14px;
  background: var(--bg-card);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 12px 16px;
  transition: border-color 0.2s;
}
.tl-item:hover {
  border-color: var(--cyan);
}
.tl-dot {
  position: absolute;
  left: -28px;
  top: 14px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  z-index: 1;
}
.tl-item.tl-deal .tl-dot {
  border-color: var(--cyan);
}
.tl-item.tl-lead .tl-dot {
  border-color: var(--purple);
}
.tl-item.tl-contato .tl-dot {
  border-color: var(--text-muted);
}
.tl-item.tl-ligacao .tl-dot {
  border-color: var(--green);
}
.tl-item.tl-reuniao .tl-dot {
  border-color: var(--orange);
}
.tl-item.tl-email .tl-dot {
  border-color: #4fc3f7;
}
.tl-item.tl-tarefa .tl-dot {
  border-color: var(--purple);
}
.tl-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.tl-titulo {
  font-weight: 700;
  color: var(--text-main);
  font-size: 0.9rem;
}
.tl-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.tl-hora {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.tl-detalhe {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.tl-pill {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tl-pill-deal {
  background: var(--cyan-light);
  color: var(--cyan);
}
.tl-pill-lead {
  background: var(--purple-light);
  color: var(--purple);
}
.tl-pill-contato {
  background: var(--bg-input);
  color: var(--text-muted);
}
.tl-pill-ligacao {
  background: var(--green-light);
  color: var(--green);
}
.tl-pill-reuniao {
  background: var(--orange-light);
  color: var(--orange);
}
.tl-pill-email {
  background: rgba(79, 195, 247, 0.1);
  color: #4fc3f7;
}
.tl-pill-tarefa {
  background: var(--purple-light);
  color: var(--purple);
}
/* Filtro de tipo na timeline */
.tl-filtros {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.tl-filtro-btn {
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1.5px solid var(--gray-200);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}
.tl-filtro-btn.active {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #000;
}
.tl-filtro-btn:hover:not(.active) {
  border-color: var(--cyan);
  color: var(--cyan);
}
/* ── Sub-navegação Agenda ──────────────────────────────────────── */
.ag-subnav {
  background: var(--bg-card);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 14px 20px;
  margin-bottom: 24px;
  overflow-x: auto;
}
.ag-subnav-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: max-content;
}
.ag-subnav-label {
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 0 6px;
  white-space: nowrap;
}
.ag-subnav-sep {
  width: 1px;
  height: 22px;
  background: var(--gray-200);
  margin: 0 10px;
  flex-shrink: 0;
}
.ag-subnav-btn {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--gray-200);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.ag-subnav-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: var(--cyan-light);
}
.ag-subnav-btn.active {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #000;
  font-weight: 700;
}
/* ── User Status Cards ─────────────────────────────────────────── */
.ag-user-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.ag-user-card {
  background: var(--bg-card);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 16px;
  transition: border-color 0.2s;
}
.ag-user-card.status-reuniao {
  border-color: var(--orange);
  background: rgba(255, 145, 0, 0.04);
}
.ag-user-card.status-livre {
  border-color: rgba(0, 230, 118, 0.4);
}
.ag-user-card.status-conflito {
  border-color: var(--red);
  background: rgba(255, 61, 0, 0.04);
}
.ag-user-nome {
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
  font-size: 0.9rem;
}
.ag-user-status {
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.ag-user-status.em-reuniao {
  color: var(--orange);
}
.ag-user-status.livre {
  color: var(--green);
}
.ag-user-ev {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.ag-user-prox {
  font-size: 0.75rem;
  color: var(--cyan);
  margin-top: 4px;
}
.ag-ev-mini {
  font-size: 0.78rem;
  color: var(--text-muted);
  padding: 4px 0;
  border-top: 1px solid var(--gray-200);
}
.ag-ev-mini:first-child {
  border-top: none;
}
/* ── Ranking ────────────────────────────────────────────────────── */
.ag-ranking-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ag-ranking-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color 0.2s;
}
.ag-ranking-item:hover {
  border-color: var(--cyan);
}
.ag-rank-pos {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--text-muted);
  min-width: 30px;
  text-align: center;
}
.ag-rank-pos.top1 {
  color: #ffd700;
}
.ag-rank-pos.top2 {
  color: #c0c0c0;
}
.ag-rank-pos.top3 {
  color: #cd7f32;
}
.ag-rank-info {
  flex: 1;
  min-width: 0;
}
.ag-rank-nome {
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 6px;
  font-size: 0.9rem;
}
.ag-rank-bar-wrap {
  height: 6px;
  background: var(--bg-input);
  border-radius: 3px;
  overflow: hidden;
}
.ag-rank-bar {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--purple), var(--cyan));
}
.ag-rank-horas {
  font-size: 1rem;
  font-weight: 800;
  color: var(--cyan);
  white-space: nowrap;
  text-align: right;
  min-width: 70px;
}
.ag-rank-eventos {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
}
/* ── Heatmap ────────────────────────────────────────────────────── */
.hm-wrap {
  overflow-x: auto;
}
.hm-grid {
  display: grid;
  gap: 3px;
  min-width: max-content;
}
.hm-head {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  padding: 4px 6px;
  text-transform: uppercase;
}
.hm-hour {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-align: right;
  padding-right: 8px;
  line-height: 24px;
  white-space: nowrap;
}
.hm-cell {
  width: 52px;
  height: 24px;
  border-radius: 4px;
  background: var(--bg-input);
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  cursor: default;
  transition: all 0.2s;
  border: 1px solid transparent;
}
.hm-cell:hover {
  color: #000 !important;
  border-color: rgba(255, 255, 255, 0.2);
}
/* ── Taxa de Confirmação ────────────────────────────────────────── */
.conf-bar-wrap {
  height: 8px;
  background: var(--bg-input);
  border-radius: 4px;
  overflow: hidden;
  min-width: 80px;
  display: inline-block;
  vertical-align: middle;
}
.conf-bar {
  height: 100%;
  border-radius: 4px;
  background: var(--green);
}
/* ── Conflitos ──────────────────────────────────────────────────── */
.conflito-card {
  background: rgba(255, 61, 0, 0.04);
  border: 1px solid rgba(255, 61, 0, 0.3);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.conflito-user {
  font-weight: 700;
  color: var(--red);
  margin-bottom: 8px;
  font-size: 0.9rem;
}
.conflito-pair {
  font-size: 0.82rem;
  color: var(--text-muted);
  padding: 6px 0;
  border-top: 1px solid rgba(255, 61, 0, 0.2);
}
.conflito-pair:first-child {
  border-top: none;
}
/* ── Util ───────────────────────────────────────────────────────── */
.hidden {
  display: none !important;
}
.divider {
  height: 1px;
  background: var(--gray-200);
  margin: 24px 0;
}
.section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: white;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-title::before {
  content: "";
  width: 4px;
  height: 16px;
  background: var(--cyan);
  border-radius: 2px;
}

/* ── Aba Vendas ─────────────────────────────────────────────────── */
.vd-subnav {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--gray-200);
  overflow-x: auto;
}
.vd-tab {
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
}
.vd-tab:hover {
  color: var(--text-main);
}
.vd-tab.active {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}
.vd-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 18px;
  margin-bottom: 20px;
  background: var(--bg-card);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}
.vd-fl {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.vd-sel {
  background: var(--bg-input);
  border: 1px solid var(--gray-200);
  color: var(--text-main);
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  cursor: pointer;
  min-width: 100px;
}
.vd-sel:focus {
  outline: none;
  border-color: var(--cyan);
}
.vd-table-wrap {
  overflow-x: auto;
}
.vd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.vd-table thead th {
  background: var(--bg-input);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 8px 10px;
  text-align: right;
  border-bottom: 1px solid var(--gray-200);
  white-space: nowrap;
}
.vd-table thead th:first-child {
  text-align: left;
}
.vd-table tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text-main);
  text-align: right;
}
.vd-table tbody td:first-child {
  text-align: left;
}
.vd-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}
.vd-table tr.vd-eq-header td {
  background: var(--bg-input);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 5px 10px;
}
.vd-table tr.vd-total td {
  background: rgba(0, 242, 254, 0.06);
  color: var(--cyan);
  font-weight: 700;
  border-top: 1px solid rgba(0, 242, 254, 0.2);
}
.vd-num-val {
  color: var(--cyan);
  font-weight: 600;
}
.vd-num-z {
  color: rgba(255, 255, 255, 0.2);
}
.vd-badge-eq {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  white-space: nowrap;
}
.vd-b-bope {
  background: rgba(0, 242, 254, 0.1);
  color: var(--cyan);
}
.vd-b-adm {
  background: rgba(255, 145, 0, 0.1);
  color: var(--orange);
}
.vd-b-pods {
  background: rgba(176, 66, 255, 0.1);
  color: var(--purple);
}
.vd-b-relac {
  background: rgba(0, 230, 118, 0.1);
  color: var(--green);
}
.vd-b-fp {
  background: rgba(255, 61, 0, 0.1);
  color: var(--red);
}
.vd-b-lid {
  background: rgba(200, 152, 42, 0.15);
  color: #f0c040;
}
.vd-b-other {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-muted);
}
.vd-meta-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 5px;
  white-space: nowrap;
}
.vd-bar-wrap {
  width: 70px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  display: inline-block;
  vertical-align: middle;
}
.vd-bar-fill {
  height: 100%;
  border-radius: 2px;
}
.vd-empresa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.vd-empresa-card {
  background: var(--bg-card);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.vd-empresa-card .vd-ec-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.vd-empresa-card .vd-ec-val {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--cyan);
}
.vd-empresa-card .vd-ec-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.vd-meta-goal {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.vd-meta-goal-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}
.vd-meta-goal-fill {
  height: 100%;
  border-radius: 3px;
}
.vd-comp-table th,
.vd-comp-table td {
  white-space: nowrap;
}
.vd-comp-month {
  font-size: 0.7rem;
  color: var(--text-muted);
}
.vd-analise-card {
  background: var(--bg-card);
  border: 1px solid rgba(77, 216, 152, 0.2);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}
.vd-analise-subnav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 16px;
}
.vd-atab {
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.2s;
}
.vd-atab:hover {
  color: var(--green);
}
.vd-atab.active {
  color: var(--green);
  border-bottom-color: var(--green);
}
.vd-pend-row {
  background: var(--bg-card);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 8px;
}
.vd-status-pill {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
}

/* ── SIDEBAR ─────────────────────────────────────────────────────── */
.app-layout {
  display: flex;
  min-height: 100vh;
}
.sidebar {
  width: 228px;
  background: #00022D;
  border-right: 1px solid rgba(202, 153, 30, 0.2);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 14px 10px;
  gap: 4px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 50;
  transition: width 0.18s ease;
}
.sidebar.collapsed { width: 72px; align-items: center; padding: 14px 0; }
.sb-logo-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 12px;
  transition: transform 0.15s ease;
  width: 100%;
}
.sidebar.collapsed .sb-logo-wrap { flex-direction: column; justify-content: center; gap: 4px; padding: 4px; }
.sb-logo-wrap:hover { transform: translateY(-1px); }
.sb-logo-wrap.active .sb-logo-icon,
.sb-logo-wrap:hover .sb-logo-icon {
  box-shadow: 0 0 0 3px rgba(202, 153, 30, 0.25), 0 6px 16px rgba(202, 153, 30, 0.3);
}
.sb-logo-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #CA991E, #e0b440);
  border: 1px solid #CA991E;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00022D;
  box-shadow: 0 0 14px rgba(202, 153, 30, 0.35);
  transition: box-shadow 0.15s ease;
}
.sb-logo-icon .ic { width: 22px; height: 22px; }
.sb-logo-text {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #CA991E;
  white-space: nowrap;
}
.sidebar.collapsed .sb-logo-text { display: none; }
.sb-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  width: 100%;
  padding: 0 0 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(202, 153, 30, 0.4) transparent;
}
.sidebar.collapsed .sb-nav { align-items: center; padding: 0 8px 12px; }
/* WebKit (Chrome/Edge): scrollbar fina e discreta no fundo escuro */
.sb-nav::-webkit-scrollbar {
  width: 5px;
}
.sb-nav::-webkit-scrollbar-track {
  background: transparent;
}
.sb-nav::-webkit-scrollbar-thumb {
  background: rgba(202, 153, 30, 0.35);
  border-radius: 3px;
}
.sb-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(202, 153, 30, 0.6);
}
.sb-item {
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid transparent;
  background: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  text-align: left;
}
.sidebar.collapsed .sb-item { justify-content: center; padding: 10px 4px; gap: 0; }
.sb-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  flex-shrink: 0;
}
.sb-ic .ic { width: 21px; height: 21px; }
.sb-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.sidebar.collapsed .sb-label { display: none; }
/* Botão recolher/expandir */
.sb-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 9px 12px;
  margin-top: 2px;
  border-radius: 10px;
  border: 0;
  background: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.4);
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.sb-toggle:hover { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.8); }
.sb-toggle .sb-ic { flex-shrink: 0; }
.sb-toggle .sb-label { font-size: 12px; font-weight: 500; color: inherit; flex: 1; }
.sb-toggle .ic { transition: transform 0.2s ease; }
.sidebar.collapsed .sb-toggle { justify-content: center; padding: 10px 4px; gap: 0; }
.sidebar.collapsed .sb-toggle .ic { transform: rotate(180deg); }
.sb-item:hover:not(.active) {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
}
.sb-item.active {
  background: rgba(202, 153, 30, 0.14);
  border-color: rgba(202, 153, 30, 0.5);
  color: #CA991E;
}
.sb-item-game.active {
  background: rgba(255, 215, 0, 0.12);
  border-color: rgba(255, 215, 0, 0.45);
  color: #ffd700;
}
.sb-item-game:hover:not(.active) {
  color: rgba(255, 215, 0, 0.75);
}
.sb-item-dr.active {
  background: rgba(74, 222, 128, 0.12);
  border-color: rgba(74, 222, 128, 0.4);
  color: #4ade80;
}
.sb-item-dr:hover:not(.active) {
  color: rgba(74, 222, 128, 0.75);
}
.app-main {
  flex: 1;
  overflow-y: auto;
  min-width: 0;
}

/* ── GAMIFICADO ROOT — agora snap-scroll container ── */
.gm-root {
  background: #06080f;
  height: 100vh;
  position: relative;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  /* Esconde scrollbar nativa (mantém comportamento) */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gm-root::-webkit-scrollbar { display: none; }

/* Cada zona ocupa 1 viewport e ancora o snap */
.gm-zone {
  height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Zona 1 — Espaço: imagem fotográfica do universo + overlay de transição no fim
   (clareando pra azul-escuro no horizonte, batendo com o topo da zona céu). */
.gm-zone-space {
  background:
    url('/static/img/universo-bg.png') center center / cover no-repeat,
    #06080f; /* fallback */
  padding: 24px 28px;
}

/* Overlay no fim da zona-espaço: gradient de transição → azul-escuro → boundary com céu */
.gm-zone-space::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(10, 14, 34, 0.4) 40%,
    rgba(15, 28, 58, 0.7) 70%,
    rgba(26, 52, 96, 0.9) 90%,
    #2c4a72 100%); /* mesma cor do topo da zona céu */
  pointer-events: none;
  z-index: 4;
}

/* Elementos que a imagem JÁ tem — escondemos pra não duplicar */
.gm-zone-space .gm-moon,
.gm-zone-space .gm-planet-jupiter,
.gm-zone-space .gm-planet-saturn,
.gm-zone-space .gm-cosmic-back {
  display: none;
}

/* ═══ CENÁRIO ESPACIAL ═══ */

/* Atmosfera de fundo: leve tint cósmico (a foto já tem cor própria, manter sutil) */
.gm-zone-space::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 25% 30%, rgba(60, 30, 110, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(20, 50, 90, 0.06) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* Camada de trás (nebulosas, antes das estrelas) — relativa à zona */
/* Mask: nebulosas se apagam suavemente nos últimos 35% (fade na atmosfera) */
.gm-cosmic-back {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 65%, transparent 95%);
          mask-image: linear-gradient(180deg, black 0%, black 65%, transparent 95%);
}

/* Nebulosas — manchas grandes coloridas com drift muito lento */
.gm-nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  will-change: transform;
}
.gm-neb-roxa {
  width: 800px;
  height: 800px;
  top: -180px;
  left: -120px;
  background: radial-gradient(circle, rgba(140, 70, 220, 0.30) 0%, transparent 65%);
  animation: gm-neb-drift-1 80s ease-in-out infinite alternate;
}
.gm-neb-azul {
  width: 700px;
  height: 700px;
  bottom: -150px;
  left: 25%;
  background: radial-gradient(circle, rgba(50, 90, 220, 0.28) 0%, transparent 65%);
  animation: gm-neb-drift-2 95s ease-in-out infinite alternate;
}
.gm-neb-rosa {
  width: 650px;
  height: 650px;
  top: 25%;
  right: -100px;
  background: radial-gradient(circle, rgba(220, 80, 170, 0.26) 0%, transparent 65%);
  animation: gm-neb-drift-3 110s ease-in-out infinite alternate;
}
@keyframes gm-neb-drift-1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(40px, -25px) scale(1.06); }
}
@keyframes gm-neb-drift-2 {
  0%   { transform: translate(0, 0) scale(0.98); }
  100% { transform: translate(-30px, 35px) scale(1.04); }
}
@keyframes gm-neb-drift-3 {
  0%   { transform: translate(0, 0) scale(1.02); }
  100% { transform: translate(-25px, 20px) scale(0.96); }
}

/* STARS — fica acima das nebulosas, abaixo da lua, dentro da zona-espaço */
/* Mask: estrelas se apagam suavemente no fim — efeito "amanhecer apagando estrelas" */
.gm-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 60%, rgba(0,0,0,0.4) 80%, transparent 95%);
          mask-image: linear-gradient(180deg, black 0%, black 60%, rgba(0,0,0,0.4) 80%, transparent 95%);
}
.gm-star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: gm-twinkle var(--d) ease-in-out infinite var(--delay);
}
.gm-star.gm-star-bright {
  animation-name: gm-twinkle-bright;
}
@keyframes gm-twinkle {
  0%, 100% { opacity: 0.04; }
  50%      { opacity: 0.35; }
}
@keyframes gm-twinkle-bright {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* Camada da frente: lua + estrelas cadentes — relativa à zona */
/* Mask mais sutil: lua/UFO ficam intactos no topo, planetas baixos (Saturno) fadeiam suavemente */
.gm-cosmic-front {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 70%, rgba(0,0,0,0.6) 88%, transparent 100%);
          mask-image: linear-gradient(180deg, black 0%, black 70%, rgba(0,0,0,0.6) 88%, transparent 100%);
}

/* ─── Lua realista ─── */
/* Camadas (de cima pra baixo):
   1. mares lunares (manchas escuras grandes, tipo "rosto" da lua)
   2. crateras pequenas espalhadas (variação de claridade)
   3. crateras grandes com rim brilhante
   4. base lunar (gradiente esférico com luz vinda do top-left) */
.gm-moon {
  position: absolute;
  width: 240px;
  height: 240px;
  top: 5%;
  right: 4%;
  border-radius: 50%;
  background:
    /* MARES LUNARES — manchas escuras grandes (Mare Tranquillitatis style) */
    radial-gradient(ellipse 70px 50px at 38% 32%, rgba(70, 70, 95, 0.55) 0%, transparent 70%),
    radial-gradient(ellipse 55px 65px at 60% 50%, rgba(75, 75, 100, 0.45) 0%, transparent 75%),
    radial-gradient(ellipse 45px 35px at 32% 62%, rgba(80, 80, 105, 0.40) 0%, transparent 70%),
    radial-gradient(ellipse 38px 40px at 70% 70%, rgba(70, 70, 95, 0.45) 0%, transparent 75%),

    /* CRATERAS GRANDES com rim brilhante */
    radial-gradient(circle at 28% 28%, rgba(245, 245, 255, 0.45) 0%, rgba(120, 120, 145, 0.4) 40%, transparent 65%),
    radial-gradient(circle at 65% 30%, rgba(240, 240, 250, 0.4) 0%, rgba(110, 110, 135, 0.35) 50%, transparent 70%),
    radial-gradient(circle at 22% 80%, rgba(245, 245, 255, 0.5) 0%, rgba(125, 125, 150, 0.4) 45%, transparent 65%),
    radial-gradient(circle at 80% 55%, rgba(235, 235, 250, 0.35) 0%, rgba(100, 100, 125, 0.3) 50%, transparent 70%),

    /* CRATERAS PEQUENAS espalhadas (granulado) */
    radial-gradient(circle at 30% 20%, rgba(180, 180, 200, 0.5) 0%, transparent 3%),
    radial-gradient(circle at 50% 25%, rgba(200, 200, 220, 0.4) 0%, transparent 2%),
    radial-gradient(circle at 75% 22%, rgba(170, 170, 190, 0.5) 0%, transparent 3%),
    radial-gradient(circle at 18% 45%, rgba(190, 190, 210, 0.4) 0%, transparent 2%),
    radial-gradient(circle at 45% 42%, rgba(160, 160, 185, 0.5) 0%, transparent 3%),
    radial-gradient(circle at 78% 42%, rgba(180, 180, 200, 0.4) 0%, transparent 2%),
    radial-gradient(circle at 38% 70%, rgba(190, 190, 210, 0.4) 0%, transparent 3%),
    radial-gradient(circle at 60% 78%, rgba(170, 170, 190, 0.5) 0%, transparent 3%),
    radial-gradient(circle at 25% 92%, rgba(200, 200, 220, 0.3) 0%, transparent 2%),
    radial-gradient(circle at 88% 88%, rgba(160, 160, 185, 0.4) 0%, transparent 2%),
    radial-gradient(circle at 12% 65%, rgba(180, 180, 200, 0.4) 0%, transparent 2%),

    /* BASE — gradiente esférico (luz top-left, sombra bottom-right) */
    radial-gradient(circle at 28% 22%,
      #fafaff 0%,
      #e8e8f0 25%,
      #c8c8d4 55%,
      #888a9c 90%,
      #555766 100%);

  /* Sombras + glow externo multi-camada */
  box-shadow:
    /* Terminator forte: lado escuro */
    inset -32px -32px 65px rgba(15, 15, 35, 0.60),
    /* Highlight sutil no lado iluminado */
    inset 20px 20px 40px rgba(255, 255, 250, 0.08),
    /* Halo próximo (rim glow) */
    0 0 40px rgba(230, 240, 255, 0.45),
    /* Halo médio */
    0 0 100px rgba(180, 200, 255, 0.30),
    /* Aura distante */
    0 0 220px rgba(120, 150, 220, 0.18);

  animation: gm-moon-pulse 10s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(220, 230, 255, 0.3));
}

/* Pseudo-element pra adicionar mais brilho/textura na superfície */
.gm-moon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    /* Brilho especular do polo iluminado */
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.35) 0%, transparent 25%),
    /* Subtle noise/grain via gradient stripes finíssimos */
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255, 255, 255, 0.015) 0px,
      rgba(255, 255, 255, 0.015) 1px,
      transparent 1px,
      transparent 3px);
  pointer-events: none;
}

@keyframes gm-moon-pulse {
  0%, 100% {
    box-shadow:
      inset -32px -32px 65px rgba(15, 15, 35, 0.60),
      inset 20px 20px 40px rgba(255, 255, 250, 0.08),
      0 0 40px rgba(230, 240, 255, 0.45),
      0 0 100px rgba(180, 200, 255, 0.30),
      0 0 220px rgba(120, 150, 220, 0.18);
  }
  50% {
    box-shadow:
      inset -32px -32px 65px rgba(15, 15, 35, 0.60),
      inset 20px 20px 40px rgba(255, 255, 250, 0.08),
      0 0 55px rgba(230, 240, 255, 0.55),
      0 0 130px rgba(180, 200, 255, 0.40),
      0 0 280px rgba(120, 150, 220, 0.28);
  }
}

/* ─── Júpiter — gigante gasoso com faixas horizontais ─── */
.gm-planet-jupiter {
  position: absolute;
  width: 170px;
  height: 170px;
  top: 14%;
  left: 3%;
  border-radius: 50%;
  background:
    /* Faixas (latitude bands) características */
    repeating-linear-gradient(180deg,
      #c69058   0px,  #c69058   8px,
      #d8a878   8px,  #d8a878  16px,
      #b07840  16px,  #b07840  24px,
      #e0b880  24px,  #e0b880  34px,
      #b88858  34px,  #b88858  44px,
      #d4a070  44px,  #d4a070  52px,
      #c89060  52px,  #c89060  62px,
      #b88858  62px,  #b88858  72px,
      #d4a070  72px,  #d4a070  80px,
      #c89060  80px,  #c89060  90px,
      #b07840  90px,  #b07840  98px,
      #d4a070  98px,  #d4a070 108px,
      #c69058 108px,  #c69058 120px,
      #a87038 120px,  #a87038 132px,
      #d4a070 132px,  #d4a070 145px,
      #b88858 145px,  #b88858 170px);
  /* Esférica + glow */
  box-shadow:
    inset -28px -28px 55px rgba(40, 20, 0, 0.65),
    inset 18px 18px 35px rgba(255, 220, 180, 0.12),
    0 0 50px rgba(220, 170, 100, 0.30),
    0 0 130px rgba(180, 130, 70, 0.18);
  filter: drop-shadow(0 0 4px rgba(255, 200, 130, 0.25));
  animation: gm-planet-drift-1 90s ease-in-out infinite alternate;
}

/* Great Red Spot + highlight (camada de detalhes) */
.gm-planet-jupiter::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    /* Mancha vermelha de Júpiter (Great Red Spot) */
    radial-gradient(ellipse 32px 18px at 32% 58%,
      rgba(200, 70, 50, 0.65) 0%,
      rgba(150, 40, 30, 0.4) 50%,
      transparent 70%),
    /* Highlight especular do polo iluminado */
    radial-gradient(circle at 28% 22%,
      rgba(255, 255, 240, 0.18) 0%,
      transparent 30%);
  pointer-events: none;
}

/* ─── Saturno — corpo dourado com anéis em perspectiva ─── */
.gm-planet-saturn {
  position: absolute;
  width: 280px;
  height: 180px;
  bottom: 12%;
  left: 5%;
  pointer-events: none;
  animation: gm-planet-drift-2 100s ease-in-out infinite alternate;
}

.gm-saturn-body {
  position: absolute;
  width: 130px;
  height: 130px;
  top: 25px;
  left: 75px;
  border-radius: 50%;
  background:
    /* Bandas leves do hemisfério */
    radial-gradient(ellipse 80px 10px at 50% 35%, rgba(180, 130, 60, 0.35) 0%, transparent 70%),
    radial-gradient(ellipse 80px 8px at 50% 60%, rgba(170, 120, 50, 0.30) 0%, transparent 70%),
    /* Base dourada esférica */
    radial-gradient(circle at 30% 25%,
      #f6d595 0%,
      #e2b878 30%,
      #b88a4c 65%,
      #6b4520 100%);
  box-shadow:
    inset -22px -22px 42px rgba(60, 35, 5, 0.55),
    inset 12px 12px 25px rgba(255, 230, 170, 0.12),
    0 0 40px rgba(240, 200, 130, 0.30),
    0 0 100px rgba(200, 150, 80, 0.18);
  z-index: 2;
}

/* Anéis — duas camadas: trás (atrás do corpo) e frente (cobre o aro inferior) */
.gm-saturn-ring {
  position: absolute;
  width: 280px;
  height: 60px;
  top: 60px;
  left: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse,
      transparent 0%, transparent 30%,
      rgba(180, 150, 100, 0.5) 35%,
      rgba(220, 195, 145, 0.7) 42%,
      rgba(240, 220, 180, 0.85) 50%,
      rgba(220, 195, 145, 0.7) 58%,
      rgba(180, 150, 100, 0.5) 65%,
      transparent 70%);
  transform: rotate(-12deg);
  filter: drop-shadow(0 0 8px rgba(220, 200, 160, 0.35));
}

/* Anel traseiro: só metade superior visível (atrás do corpo) */
.gm-saturn-ring-back {
  z-index: 1;
  clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
}

/* Anel frontal: só metade inferior (à frente, cobre a borda do corpo) */
.gm-saturn-ring-front {
  z-index: 3;
  clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
}

/* Drifts MUITO lentos pra dar leve vida sem distrair */
@keyframes gm-planet-drift-1 {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(15px, 10px); }
}
@keyframes gm-planet-drift-2 {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-12px, -8px); }
}

/* ─── Disco voador (logo abaixo da lua) ─── */
.gm-ufo {
  position: absolute;
  width: 110px;
  height: 80px;
  top: 38%;
  right: 11%;
  pointer-events: none;
  animation: gm-ufo-hover 4.5s ease-in-out infinite;
}

/* Cabine de vidro (dome) */
.gm-ufo-dome {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 32px;
  border-radius: 50% 50% 0 0;
  background:
    radial-gradient(ellipse at 30% 25%,
      rgba(200, 230, 255, 0.7) 0%,
      rgba(80, 140, 200, 0.7) 50%,
      rgba(30, 60, 100, 0.85) 100%);
  box-shadow:
    inset -5px -3px 8px rgba(0, 0, 0, 0.4),
    inset 4px 4px 6px rgba(255, 255, 255, 0.25),
    0 0 12px rgba(120, 180, 220, 0.4);
}

/* Disco principal (corpo metálico) */
.gm-ufo-disc {
  position: absolute;
  top: 28px;
  left: 0;
  width: 110px;
  height: 22px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 25%,
      #e8eaf0 0%,
      #b0b0c0 35%,
      #6a6a7a 75%,
      #303040 100%);
  box-shadow:
    inset 0 -5px 9px rgba(0, 0, 0, 0.6),
    inset 0 2px 5px rgba(255, 255, 255, 0.3),
    0 5px 14px rgba(0, 0, 0, 0.4),
    0 0 18px rgba(150, 180, 220, 0.30);
}

/* Luzes piscantes embaixo do disco */
.gm-ufo-disc::before {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 22px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ff5060;
  box-shadow:
    18px  0 0 0 #ffd060,
    36px  0 0 0 #50ff80,
    54px  0 0 0 #50c0ff,
    72px  0 0 0 #ff5060,
    /* Halos de cada luz */
    0    0 6px 1px rgba(255, 80, 96, 0.7),
    18px 0 6px 1px rgba(255, 208, 96, 0.7),
    36px 0 6px 1px rgba(80, 255, 128, 0.7),
    54px 0 6px 1px rgba(80, 192, 255, 0.7),
    72px 0 6px 1px rgba(255, 80, 96, 0.7);
  animation: gm-ufo-lights 1.5s ease-in-out infinite;
}

/* Feixe trator (tractor beam) — cone de luz logo abaixo */
.gm-ufo-beam {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 90px;
  background: linear-gradient(180deg,
    rgba(150, 230, 255, 0.30) 0%,
    rgba(150, 220, 255, 0.18) 30%,
    rgba(150, 220, 255, 0.08) 65%,
    transparent 100%);
  clip-path: polygon(35% 0%, 65% 0%, 100% 100%, 0% 100%);
  filter: blur(2px);
  animation: gm-ufo-beam-pulse 2.4s ease-in-out infinite;
}

@keyframes gm-ufo-hover {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-7px) rotate(2deg); }
}
@keyframes gm-ufo-lights {
  0%, 100% { filter: brightness(1) saturate(1); }
  25%      { filter: brightness(1.4) saturate(1.2); }
  50%      { filter: brightness(0.8) saturate(0.9); }
  75%      { filter: brightness(1.5) saturate(1.3); }
}
@keyframes gm-ufo-beam-pulse {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scaleY(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scaleY(1.05); }
}

/* Mobile: encolhe o UFO */
@media (max-width: 800px) {
  .gm-ufo {
    width: 70px;
    height: 50px;
    top: 32%;
    right: 8%;
  }
  .gm-ufo-dome {
    width: 32px;
    height: 20px;
  }
  .gm-ufo-disc {
    top: 17px;
    width: 70px;
    height: 14px;
  }
  .gm-ufo-disc::before {
    left: 14px;
    box-shadow:
      11px 0 0 0 #ffd060,
      22px 0 0 0 #50ff80,
      33px 0 0 0 #50c0ff,
      44px 0 0 0 #ff5060;
  }
  .gm-ufo-beam {
    top: 30px;
    width: 30px;
    height: 50px;
  }
}

/* Mobile: encolhe planetas e ajusta posição */
@media (max-width: 800px) {
  .gm-planet-jupiter {
    width: 90px;
    height: 90px;
    top: 10%;
    left: 2%;
  }
  .gm-planet-saturn {
    width: 160px;
    height: 100px;
    bottom: 5%;
    left: 2%;
  }
  .gm-saturn-body {
    width: 70px;
    height: 70px;
    top: 15px;
    left: 45px;
  }
  .gm-saturn-ring {
    width: 160px;
    height: 36px;
    top: 32px;
  }
}

/* ─── Estrelas cadentes ─── */
/* 6 cadentes em direções, posições, velocidades e tamanhos diferentes.
   Delays escalonados pra parecer aleatório (não chove de uma vez). */
.gm-shooting-star {
  position: absolute;
  height: 1.5px;
  background: linear-gradient(to right,
    transparent,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(180, 200, 255, 0.7) 100%);
  border-radius: 1px;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.85));
  opacity: 0;
  pointer-events: none;
  transform-origin: left center;
  width: 120px;
}

/* Variantes por cor (mais variedade visual) */
.gm-shoot-blue {
  background: linear-gradient(to right,
    transparent,
    rgba(180, 220, 255, 0.95) 50%,
    rgba(140, 180, 255, 0.8) 100%);
  filter: drop-shadow(0 0 6px rgba(150, 200, 255, 0.9));
}
.gm-shoot-warm {
  background: linear-gradient(to right,
    transparent,
    rgba(255, 230, 200, 0.95) 50%,
    rgba(255, 200, 150, 0.7) 100%);
  filter: drop-shadow(0 0 5px rgba(255, 220, 180, 0.85));
}

/* ── 6 cadentes ─────────────────────────────────────────── */
/* Vai cair uma em média a cada ~5s (intervalos diferentes) */

/* A — diagonal suave esquerda→direita, alta */
.gm-shoot-a {
  top: 12%;
  left: -150px;
  animation: gm-shoot-a 14s linear infinite;
  animation-delay: 2s;
}
/* B — esquerda→direita, mais rápida e steeper */
.gm-shoot-b {
  top: 35%;
  left: -150px;
  width: 100px;
  animation: gm-shoot-b 18s linear infinite;
  animation-delay: 5s;
}
/* C — direita→esquerda (oposta), tom azulado */
.gm-shoot-c {
  top: 22%;
  right: -150px;
  left: auto;
  width: 140px;
  transform-origin: right center;
  animation: gm-shoot-c 22s linear infinite;
  animation-delay: 9s;
}
/* D — diagonal mais horizontal, lenta */
.gm-shoot-d {
  top: 60%;
  left: -150px;
  width: 160px;
  animation: gm-shoot-d 26s linear infinite;
  animation-delay: 13s;
}
/* E — meteoro grande quente (laranja-rosado), raro */
.gm-shoot-e {
  top: 8%;
  left: -200px;
  width: 180px;
  height: 2px;
  animation: gm-shoot-e 35s linear infinite;
  animation-delay: 18s;
}
/* F — pequena rapidinha, esquerda→direita baixa */
.gm-shoot-f {
  top: 78%;
  left: -150px;
  width: 80px;
  animation: gm-shoot-f 16s linear infinite;
  animation-delay: 24s;
}

/* Keyframes — cada uma tem ângulo, distância e velocidade próprios */
@keyframes gm-shoot-a {
  0%   { transform: translate(0, 0) rotate(18deg); opacity: 0; }
  2%   { opacity: 0.95; }
  9%   { transform: translate(70vw, 28vh) rotate(18deg); opacity: 0; }
  100% { transform: translate(70vw, 28vh) rotate(18deg); opacity: 0; }
}
@keyframes gm-shoot-b {
  0%   { transform: translate(0, 0) rotate(35deg); opacity: 0; }
  3%   { opacity: 0.9; }
  8%   { transform: translate(60vw, 50vh) rotate(35deg); opacity: 0; }
  100% { transform: translate(60vw, 50vh) rotate(35deg); opacity: 0; }
}
@keyframes gm-shoot-c {
  0%   { transform: translate(0, 0) rotate(160deg); opacity: 0; }
  3%   { opacity: 0.85; }
  10%  { transform: translate(-65vw, 30vh) rotate(160deg); opacity: 0; }
  100% { transform: translate(-65vw, 30vh) rotate(160deg); opacity: 0; }
}
@keyframes gm-shoot-d {
  0%   { transform: translate(0, 0) rotate(8deg); opacity: 0; }
  2%   { opacity: 0.85; }
  12%  { transform: translate(85vw, 12vh) rotate(8deg); opacity: 0; }
  100% { transform: translate(85vw, 12vh) rotate(8deg); opacity: 0; }
}
@keyframes gm-shoot-e {
  0%   { transform: translate(0, 0) rotate(25deg); opacity: 0; }
  2%   { opacity: 1; }
  10%  { transform: translate(80vw, 38vh) rotate(25deg); opacity: 0; }
  100% { transform: translate(80vw, 38vh) rotate(25deg); opacity: 0; }
}
@keyframes gm-shoot-f {
  0%   { transform: translate(0, 0) rotate(-8deg); opacity: 0; }
  3%   { opacity: 0.75; }
  9%   { transform: translate(70vw, -10vh) rotate(-8deg); opacity: 0; }
  100% { transform: translate(70vw, -10vh) rotate(-8deg); opacity: 0; }
}

/* Em telas pequenas (mobile/sidebar oculto), ajusta offset */
@media (max-width: 800px) {
  .gm-moon {
    width: 140px;
    height: 140px;
  }
}

/* TOP BAR */
.gm-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 12px;
}
.gm-title {
  font-family: "Cinzel Decorative", serif;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 3px;
  color: #f0f4ff;
  line-height: 1.2;
}
.gm-title-accent {
  color: #ffd700;
}
.gm-subtitle {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 3px;
  font-family: "Rajdhani", sans-serif;
}
.gm-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.gm-chip {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: "Rajdhani", sans-serif;
  transition: all 0.2s;
}
.gm-chip.active {
  border-color: rgba(255, 215, 0, 0.4);
  color: #ffd700;
  background: rgba(255, 215, 0, 0.06);
}

/* Seletor de período */
.gm-periodo-sel {
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  font-family: "Rajdhani", "Trebuchet MS", sans-serif;
  margin-right: 4px;
}
.gm-periodo-sel option {
  background: #1a1a2e;
  color: #f0f4ff;
}

/* ZONE LABEL */
.gm-zone-label {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 20px;
}
.gm-zone-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 215, 0, 0.3),
    transparent
  );
}
.gm-zone-text {
  font-family: "Cinzel", serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 3px;
  color: rgba(255, 215, 0, 0.5);
  white-space: nowrap;
  text-transform: uppercase;
}

/* DIVIDER */
.gm-divider {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 16px;
}
.gm-div-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );
}
.gm-div-text {
  font-family: "Cinzel", serif;
  font-size: 9px;
  letter-spacing: 2.5px;
  color: rgba(255, 255, 255, 0.18);
  text-transform: uppercase;
  white-space: nowrap;
}

/* PÓDIO */
.gm-podium {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
  margin-bottom: 8px;
  padding: 0 10px;
  flex-wrap: wrap;
}
.gm-podium::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 460px;
  background: radial-gradient(
    ellipse at 50% 100%,
    rgba(255, 215, 0, 0.12) 0%,
    rgba(176, 66, 255, 0.06) 40%,
    transparent 70%
  );
  pointer-events: none;
}

/* BANNER */
.gm-banner {
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.gm-banner:hover {
  transform: translateY(-6px) scale(1.02);
}

.gm-banner-shape {
  position: relative;
  overflow: hidden;
}
.gm-banner-1 .gm-banner-shape {
  width: 220px;
  height: 450px;
  clip-path: polygon(8% 0%, 92% 0%, 100% 4%, 100% 88%, 50% 100%, 0% 88%, 0% 4%);
}
.gm-banner-23 .gm-banner-shape {
  width: 188px;
  height: 400px;
  clip-path: polygon(8% 0%, 92% 0%, 100% 4%, 100% 88%, 50% 100%, 0% 88%, 0% 4%);
}

.gm-bg-ferro {
  background: #0a0c12;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(139, 155, 180, 0.03) 0px,
    rgba(139, 155, 180, 0.03) 1px,
    transparent 1px,
    transparent 8px
  );
}
.gm-bg-bronze {
  background: #0d0700;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(205, 127, 50, 0.04) 0px,
    rgba(205, 127, 50, 0.04) 1px,
    transparent 1px,
    transparent 8px
  );
}
.gm-bg-prata {
  background: #131a28;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(200, 215, 240, 0.13) 0px,
    rgba(200, 215, 240, 0.13) 1px,
    transparent 1px,
    transparent 8px
  );
}
.gm-bg-ouro {
  background: #0d0900;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 215, 0, 0.06) 0px,
    rgba(255, 215, 0, 0.06) 1px,
    transparent 1px,
    transparent 8px
  );
}
.gm-bg-platina {
  background: #003028;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0, 229, 212, 0.06) 0px,
    rgba(0, 229, 212, 0.06) 1px,
    transparent 1px,
    transparent 8px
  );
}
.gm-bg-diamante {
  background: #0e0618;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(176, 66, 255, 0.06) 0px,
    rgba(176, 66, 255, 0.06) 1px,
    transparent 1px,
    transparent 8px
  );
}
.gm-bg-radiante {
  background: #150e00;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 215, 0, 0.07) 0px,
    rgba(255, 215, 0, 0.07) 1px,
    transparent 1px,
    transparent 8px
  );
}

/* ── Halo externo (luz) em TODOS os banners do pódio ── */
/* Combina 2 drop-shadows: um próximo (rim) + um amplo (aura).
   Prata usa branco-azulado pra contrastar bem no fundo escuro. */
.gm-banner .gm-banner-shape {
  filter:
    drop-shadow(0 0 6px var(--gm-glow-rim,  rgba(255, 255, 255, 0.30)))
    drop-shadow(0 0 22px var(--gm-glow-aura, rgba(255, 255, 255, 0.18)));
}
.gm-banner .gm-bg-ferro {
  --gm-glow-rim:  rgba(180, 195, 220, 0.40);
  --gm-glow-aura: rgba(139, 155, 180, 0.30);
}
.gm-banner .gm-bg-bronze {
  --gm-glow-rim:  rgba(230, 165, 90, 0.55);
  --gm-glow-aura: rgba(205, 127, 50, 0.40);
}
.gm-banner .gm-bg-prata {
  /* Prateado é difícil de ver em preto — branco-azulado bem mais forte */
  --gm-glow-rim:  rgba(230, 240, 255, 0.95);
  --gm-glow-aura: rgba(180, 210, 245, 0.70);
}
.gm-banner .gm-bg-ouro {
  --gm-glow-rim:  rgba(255, 230, 100, 0.60);
  --gm-glow-aura: rgba(255, 215, 0,   0.45);
}
.gm-banner .gm-bg-platina {
  --gm-glow-rim:  rgba(80, 240, 220, 0.55);
  --gm-glow-aura: rgba(0, 229, 212,  0.40);
}
.gm-banner .gm-bg-diamante {
  --gm-glow-rim:  rgba(210, 150, 255, 0.60);
  --gm-glow-aura: rgba(176, 66, 255,  0.45);
}
.gm-banner .gm-bg-radiante {
  --gm-glow-rim:  rgba(255, 245, 200, 0.70);
  --gm-glow-aura: rgba(255, 215, 0,   0.55);
}
/* #1 (centro) com halo mais forte */
.gm-banner.gm-banner-1 .gm-banner-shape {
  filter:
    drop-shadow(0 0 8px var(--gm-glow-rim,  rgba(255, 255, 255, 0.40)))
    drop-shadow(0 0 32px var(--gm-glow-aura, rgba(255, 255, 255, 0.25)));
}

.gm-banner-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 8px 28px;
  overflow: hidden;
}

.gm-rank-num {
  font-family: "Cinzel", serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 2.5px;
  margin-bottom: 6px;
}
.gm-rn-1 {
  color: #ffd700;
  text-shadow: 0 0 14px rgba(255, 215, 0, 0.9);
}
.gm-rn-2 {
  color: #e8e8f0;
  text-shadow: 0 0 12px rgba(220, 220, 240, 0.85);
}
.gm-rn-3 {
  color: #d4883a;
  text-shadow: 0 0 12px rgba(205, 127, 50, 0.85);
}
.gm-rn-45 {
  color: #a0a8b8;
  text-shadow: 0 0 10px rgba(160, 168, 184, 0.7);
}

.gm-crown {
  font-size: 38px;
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  filter: drop-shadow(0 3px 10px rgba(255, 215, 0, 0.55));
  animation: gm-float 1.4s ease-in-out infinite alternate, gm-crown-glow 2.2s ease-in-out infinite;
}
@keyframes gm-float {
  from {
    transform: translateX(-50%) translateY(0);
  }
  to {
    transform: translateX(-50%) translateY(-5px);
  }
}

.gm-ring-outer {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  margin-bottom: 6px;
}
.gm-ring-1 {
  width: 118px;
  height: 118px;
}
.gm-ring-23 {
  width: 96px;
  height: 96px;
}

.gm-ring-ferro {
  border: 1.5px solid rgba(139, 155, 180, 0.4);
}
.gm-ring-bronze {
  border: 1.5px solid rgba(205, 127, 50, 0.5);
  box-shadow: 0 0 12px rgba(205, 127, 50, 0.25);
}
.gm-ring-prata {
  border: 1.5px solid rgba(192, 192, 192, 0.5);
  box-shadow: 0 0 12px rgba(192, 192, 192, 0.2);
}
.gm-ring-ouro {
  border: 1.5px solid rgba(255, 215, 0, 0.55);
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.3);
}
.gm-ring-platina {
  border: 1.5px solid rgba(0, 229, 212, 0.5);
  box-shadow: 0 0 18px rgba(0, 229, 212, 0.25);
}
.gm-ring-diamante {
  border: 1.5px solid rgba(176, 66, 255, 0.6);
  box-shadow: 0 0 22px rgba(176, 66, 255, 0.4);
}
.gm-ring-radiante {
  border: 2px solid rgba(255, 215, 0, 0.7);
  box-shadow: 0 0 28px rgba(255, 215, 0, 0.5);
}

.gm-ring-mid {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gm-ring-mid-1 {
  width: 106px;
  height: 106px;
}
.gm-ring-mid-23 {
  width: 84px;
  height: 84px;
}

.gm-ring-mid-ferro {
  border: 1px solid rgba(139, 155, 180, 0.15);
}
.gm-ring-mid-bronze {
  border: 1px solid rgba(205, 127, 50, 0.2);
}
.gm-ring-mid-prata {
  border: 1px solid rgba(192, 192, 192, 0.2);
}
.gm-ring-mid-ouro {
  border: 1px solid rgba(255, 215, 0, 0.2);
}
.gm-ring-mid-platina {
  border: 1px solid rgba(0, 229, 212, 0.2);
}
.gm-ring-mid-diamante {
  border: 1px solid rgba(176, 66, 255, 0.25);
  background: rgba(176, 66, 255, 0.04);
}
.gm-ring-mid-radiante {
  border: 1px solid rgba(255, 215, 0, 0.3);
  background: rgba(255, 215, 0, 0.04);
}

.gm-avatar {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cinzel", serif;
  font-weight: 700;
  overflow: hidden;
}
.gm-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.gm-av-1 {
  width: 88px;
  height: 88px;
  font-size: 26px;
}
.gm-av-23 {
  width: 70px;
  height: 70px;
  font-size: 20px;
}

.gm-av-ferro {
  background: #0e1018;
  color: #8b9bb4;
  border: 2px solid rgba(139, 155, 180, 0.3);
}
.gm-av-bronze {
  background: #1a0c00;
  color: #cd7f32;
  border: 2px solid rgba(205, 127, 50, 0.4);
}
.gm-av-prata {
  background: #0a1220;
  color: #c0c0c0;
  border: 2px solid rgba(192, 192, 192, 0.3);
}
.gm-av-ouro {
  background: #1a0e00;
  color: #ffd700;
  border: 2px solid rgba(255, 215, 0, 0.45);
}
.gm-av-platina {
  background: #002820;
  color: #00e5d4;
  border: 2px solid rgba(0, 229, 212, 0.4);
}
.gm-av-diamante {
  background: #1a0830;
  color: #c580ff;
  border: 2px solid rgba(176, 66, 255, 0.5);
}
.gm-av-radiante {
  background: #1a1200;
  color: #fff8dc;
  border: 2px solid rgba(255, 215, 0, 0.6);
}

.gm-cardinal {
  position: absolute;
  inset: -4px;
  pointer-events: none;
}
.gm-cardinal::before,
.gm-cardinal::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
}
.gm-cardinal-ferro::before {
  top: -2px;
  background: #8b9bb4;
}
.gm-cardinal-ferro::after {
  bottom: -2px;
  background: #8b9bb4;
}
.gm-cardinal-bronze::before {
  top: -2px;
  background: #cd7f32;
  box-shadow: 0 0 4px #cd7f32;
}
.gm-cardinal-bronze::after {
  bottom: -2px;
  background: #cd7f32;
  box-shadow: 0 0 4px #cd7f32;
}
.gm-cardinal-prata::before {
  top: -2px;
  background: #c0c0c0;
  box-shadow: 0 0 4px #c0c0c0;
}
.gm-cardinal-prata::after {
  bottom: -2px;
  background: #c0c0c0;
  box-shadow: 0 0 4px #c0c0c0;
}
.gm-cardinal-ouro::before {
  top: -2px;
  background: #ffd700;
  box-shadow: 0 0 5px #ffd700;
}
.gm-cardinal-ouro::after {
  bottom: -2px;
  background: #ffd700;
  box-shadow: 0 0 5px #ffd700;
}
.gm-cardinal-platina::before {
  top: -2px;
  background: #00e5d4;
  box-shadow: 0 0 5px #00e5d4;
}
.gm-cardinal-platina::after {
  bottom: -2px;
  background: #00e5d4;
  box-shadow: 0 0 5px #00e5d4;
}
.gm-cardinal-diamante::before {
  top: -2px;
  background: #c580ff;
  box-shadow: 0 0 6px #c580ff;
  width: 6px;
  height: 6px;
}
.gm-cardinal-diamante::after {
  bottom: -2px;
  background: #c580ff;
  box-shadow: 0 0 6px #c580ff;
  width: 6px;
  height: 6px;
}
.gm-cardinal-radiante::before {
  top: -2px;
  background: #fff8dc;
  box-shadow: 0 0 8px #ffd700;
  width: 7px;
  height: 7px;
}
.gm-cardinal-radiante::after {
  bottom: -2px;
  background: #fff8dc;
  box-shadow: 0 0 8px #ffd700;
  width: 7px;
  height: 7px;
}

.gm-elo-wrap {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

.gm-tier-badge {
  padding: 3px 12px;
  border-radius: 11px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  font-family: "Cinzel", serif;
  margin-top: 10px;
}
.gm-badge-ferro {
  color: #8b9bb4;
  background: rgba(139, 155, 180, 0.08);
  border: 1px solid rgba(139, 155, 180, 0.25);
}
.gm-badge-bronze {
  color: #cd7f32;
  background: rgba(205, 127, 50, 0.08);
  border: 1px solid rgba(205, 127, 50, 0.28);
}
.gm-badge-prata {
  color: #c0c0c0;
  background: rgba(192, 192, 192, 0.08);
  border: 1px solid rgba(192, 192, 192, 0.28);
}
.gm-badge-ouro {
  color: #ffd700;
  background: rgba(255, 215, 0, 0.08);
  border: 1px solid rgba(255, 215, 0, 0.3);
}
.gm-badge-platina {
  color: #00e5d4;
  background: rgba(0, 229, 212, 0.08);
  border: 1px solid rgba(0, 229, 212, 0.3);
}
.gm-badge-diamante {
  color: #c580ff;
  background: rgba(176, 66, 255, 0.1);
  border: 1px solid rgba(176, 66, 255, 0.4);
}
.gm-badge-radiante {
  color: #fff8dc;
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 220, 50, 0.45);
}

.gm-banner-name {
  font-family: "Cinzel", serif;
  font-weight: 700;
  text-align: center;
  color: #f0f4ff;
  margin-top: 8px;
  letter-spacing: 0.3px;
  line-height: 1.18;
  width: 100%;
  padding: 0 6px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
          line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-word;
  hyphens: auto;
}
.gm-banner-name-1 {
  font-size: 18px;
}
.gm-banner-name-23 {
  font-size: 15px;
}

.gm-banner-team {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  text-align: center;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  margin-top: 3px;
  margin-bottom: 8px;
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
}

.gm-banner-valor {
  font-family: "Cinzel Decorative", serif;
  font-weight: 900;
  text-align: center;
  line-height: 1;
  letter-spacing: 0.5px;
  margin-top: 2px;
}
.gm-valor-1 {
  font-size: 30px;
}
.gm-valor-23 {
  font-size: 24px;
}

.gm-val-ferro {
  color: #a8b8cc;
  text-shadow: 0 0 10px rgba(139, 155, 180, 0.4);
}
.gm-val-bronze {
  color: #e09040;
  text-shadow: 0 0 12px rgba(205, 127, 50, 0.5);
}
.gm-val-prata {
  color: #e8e8f0;
  text-shadow: 0 0 12px rgba(220, 220, 240, 0.55);
}
.gm-val-ouro {
  color: #ffd700;
  text-shadow: 0 0 16px rgba(255, 215, 0, 0.6);
}
.gm-val-platina {
  color: #00ffe8;
  text-shadow: 0 0 16px rgba(0, 229, 212, 0.6);
}
.gm-val-diamante {
  color: #d090ff;
  text-shadow: 0 0 20px rgba(176, 66, 255, 0.7);
}
.gm-val-radiante {
  color: #fff8dc;
  text-shadow: 0 0 24px rgba(255, 215, 0, 0.8);
}

.gm-valor-label {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.2);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  margin-top: 2px;
  margin-bottom: 6px;
  font-family: "Rajdhani", sans-serif;
}

.gm-xp-wrap {
  width: 100%;
  padding: 0 6px;
  margin-bottom: 6px;
}
.gm-xp-labels {
  display: flex;
  justify-content: space-between;
  font-size: 7px;
  color: rgba(255, 255, 255, 0.25);
  margin-bottom: 3px;
  font-family: "Rajdhani", sans-serif;
}
.gm-xp-track {
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
}
.gm-xp-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 1.2s ease;
}

.gm-xp-ferro {
  background: linear-gradient(90deg, #4a5568, #8b9bb4);
}
.gm-xp-bronze {
  background: linear-gradient(90deg, #8b5e1a, #cd7f32);
}
.gm-xp-prata {
  background: linear-gradient(90deg, #6a6a7a, #c0c0c0);
}
.gm-xp-ouro {
  background: linear-gradient(90deg, #b8860b, #ffd700);
}
.gm-xp-platina {
  background: linear-gradient(90deg, #007a6e, #00e5d4);
}
.gm-xp-diamante {
  background: linear-gradient(90deg, #7b2fff, #c580ff);
}
.gm-xp-radiante {
  background: linear-gradient(90deg, #ff9100, #ffd700, #fff8dc);
}

.gm-banner-stats {
  display: flex;
  gap: 8px;
  justify-content: center;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 8px;
  margin-top: auto;
}
.gm-bst {
  text-align: center;
}
.gm-bst-v {
  font-family: "Rajdhani", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #f0f4ff;
}
.gm-bst-l {
  font-size: 7px;
  color: rgba(255, 255, 255, 0.22);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gm-streak {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.35);
  font-family: "Rajdhani", sans-serif;
  margin-bottom: 4px;
}
.gm-streak-active {
  color: #ff9100;
}

.gm-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.gm-particle {
  position: absolute;
  border-radius: 50%;
  animation: gm-float-up var(--dur) ease-in infinite var(--del);
  left: var(--x);
  bottom: 10%;
}
@keyframes gm-float-up {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0);
  }
  20% {
    opacity: 0.9;
  }
  80% {
    opacity: 0.4;
  }
  100% {
    opacity: 0;
    transform: translateY(-180px) scale(0.4) translateX(var(--drift));
  }
}

.gm-glow-diamante {
  animation: gm-pulse-d 3s ease-in-out infinite;
}
@keyframes gm-pulse-d {
  0%,
  100% {
    filter: drop-shadow(0 0 6px rgba(176, 66, 255, 0.2));
  }
  50% {
    filter: drop-shadow(0 0 18px rgba(176, 66, 255, 0.55));
  }
}

.gm-glow-radiante {
  animation: gm-pulse-r 2.5s ease-in-out infinite;
}
@keyframes gm-pulse-r {
  0%,
  100% {
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 24px rgba(255, 215, 0, 0.7));
  }
}

/* ── MID TIER ── */
.gm-midgrid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 4px;
}
.gm-mid-card {
  background: #0a0d16;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  display: flex;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
}
.gm-mid-card:hover {
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateX(3px);
}
.gm-mid-stripe {
  width: 44px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  position: relative;
}
.gm-stripe-line {
  position: absolute;
  right: 0;
  top: 10%;
  bottom: 10%;
  width: 1.5px;
  border-radius: 1px;
}
.gm-stripe-ferro {
  background: #0a0c12;
}
.gm-stripe-bronze {
  background: linear-gradient(180deg, #120800, #0a0400);
}
.gm-stripe-prata {
  background: linear-gradient(180deg, #0a1020, #060c14);
}
.gm-stripe-ouro {
  background: linear-gradient(180deg, #180e00, #0d0700);
}
.gm-stripe-platina {
  background: linear-gradient(180deg, #002820, #001510);
}
.gm-stripe-diamante {
  background: linear-gradient(180deg, #0e0520, #080314);
}
.gm-stripe-radiante {
  background: linear-gradient(180deg, #1a1000, #0e0800);
}

.gm-sl-ferro {
  background: rgba(139, 155, 180, 0.3);
}
.gm-sl-bronze {
  background: linear-gradient(180deg, transparent, #cd7f32, transparent);
}
.gm-sl-prata {
  background: linear-gradient(180deg, transparent, #c0c0c0, transparent);
}
.gm-sl-ouro {
  background: linear-gradient(180deg, transparent, #ffd700, transparent);
}
.gm-sl-platina {
  background: linear-gradient(180deg, transparent, #00e5d4, transparent);
}
.gm-sl-diamante {
  background: linear-gradient(180deg, transparent, #c580ff, transparent);
}
.gm-sl-radiante {
  background: linear-gradient(180deg, transparent, #fff8dc, transparent);
}

.gm-mid-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  font-family: "Cinzel", serif;
  overflow: hidden;
}
.gm-mid-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.gm-mid-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.gm-mid-body {
  flex: 1;
  padding: 9px 10px;
  min-width: 0;
}
.gm-mid-top {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 1px;
}
.gm-mid-rn {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.18);
  font-weight: 700;
  width: 16px;
}
.gm-mid-name {
  font-family: "Cinzel", serif;
  font-size: 12px;
  font-weight: 700;
  color: #eef2ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gm-mid-meta {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.25);
  margin-bottom: 5px;
  font-family: "Rajdhani", sans-serif;
}
.gm-mid-xp {
  height: 2px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 1px;
  overflow: hidden;
}
.gm-mid-xp-fill {
  height: 100%;
  border-radius: 1px;
  transition: width 1s ease;
}

.gm-mid-right {
  padding: 9px 12px 9px 0;
  text-align: right;
  flex-shrink: 0;
}
.gm-mid-valor {
  font-family: "Cinzel Decorative", serif;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}
.gm-mid-cont {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.22);
  font-family: "Rajdhani", sans-serif;
}

/* ── LISTA ── */
.gm-list {
  position: relative;
  z-index: 2;
}
.gm-list-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 7px;
  margin-bottom: 2px;
  cursor: pointer;
  transition: background 0.15s;
}
.gm-list-item:hover {
  background: rgba(255, 255, 255, 0.02);
}
.gm-li-rn {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.15);
  width: 22px;
  text-align: center;
  font-weight: 700;
  flex-shrink: 0;
}
.gm-li-strip {
  width: 2px;
  height: 26px;
  border-radius: 1px;
  flex-shrink: 0;
}
.gm-li-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
  font-family: "Cinzel", serif;
  overflow: hidden;
}
.gm-li-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.gm-li-name {
  flex: 1;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
  font-family: "Rajdhani", sans-serif;
}
.gm-li-tier {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 6px;
  flex-shrink: 0;
  font-family: "Cinzel", serif;
}
.gm-li-xp {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  font-family: "Rajdhani", sans-serif;
  min-width: 55px;
  text-align: right;
}
.gm-li-valor {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  min-width: 76px;
  text-align: right;
  font-family: "Rajdhani", sans-serif;
}

/* ── LEGENDA DE TIERS ── */
.gm-legend {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 14px;
  background: #09060f;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  margin-top: 20px;
  margin-bottom: 20px;
}
.gm-legend-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.18);
  margin-right: 4px;
  font-family: "Cinzel", serif;
}

/* loading */
.gm-loading {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 60px 20px;
  color: rgba(255, 255, 255, 0.3);
  font-family: "Cinzel", serif;
  font-size: 13px;
  letter-spacing: 2px;
}
.gm-loading-icon {
  font-size: 32px;
  margin-bottom: 12px;
  animation: gm-spin 2s linear infinite;
}
@keyframes gm-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── BLOCO 8 — Font fallbacks seguros ── */
.gm-title,
.gm-tier-badge,
.gm-banner-name,
.gm-rank-num,
.gm-mid-name,
.gm-li-name,
.gm-legend-label {
  font-family: "Cinzel", "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.gm-banner-valor,
.gm-mid-valor {
  font-family: "Cinzel Decorative", "Palatino Linotype", Palatino, serif;
}
.gm-subtitle,
.gm-banner-team,
.gm-valor-label,
.gm-bst-l,
.gm-mid-meta,
.gm-mid-cont,
.gm-li-valor,
.gm-li-xp {
  font-family: "Rajdhani", "Trebuchet MS", sans-serif;
}

/* ── BLOCO 1 — Hover overlay nos banners ── */
.gm-banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 16px 12px;
  transition: background 0.25s ease;
  pointer-events: none;
  z-index: 4;
}
.gm-banner:hover .gm-banner-overlay {
  background: rgba(0, 0, 0, 0.35);
}
.gm-banner-extra {
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.gm-banner:hover .gm-banner-extra {
  opacity: 1;
  transform: translateY(0);
}
.gm-banner-extra-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 9px;
  font-family: "Rajdhani", "Trebuchet MS", sans-serif;
  color: rgba(255, 255, 255, 0.7);
  padding: 2px 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.3);
}
.gm-banner-extra-row span:last-child {
  color: #f0f4ff;
  font-weight: 600;
}

/* ── BLOCO 2 — Stagger de entrada ── */
@keyframes gm-slide-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.gm-banner {
  animation: gm-slide-up 0.5s ease forwards;
  opacity: 0;
}
.gm-banner:nth-child(1) {
  animation-delay: 0.1s;
}
.gm-banner:nth-child(2) {
  animation-delay: 0s;
}
.gm-banner:nth-child(3) {
  animation-delay: 0.2s;
}

@keyframes gm-fade-in {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.gm-mid-card {
  animation: gm-fade-in 0.4s ease forwards;
  opacity: 0;
}
.gm-mid-card:nth-child(1) {
  animation-delay: 0.3s;
}
.gm-mid-card:nth-child(2) {
  animation-delay: 0.35s;
}
.gm-mid-card:nth-child(3) {
  animation-delay: 0.4s;
}
.gm-mid-card:nth-child(4) {
  animation-delay: 0.45s;
}
.gm-mid-card:nth-child(5) {
  animation-delay: 0.5s;
}
.gm-mid-card:nth-child(6) {
  animation-delay: 0.55s;
}

@keyframes gm-fade-list {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.gm-list-item {
  animation: gm-fade-list 0.3s ease forwards;
  opacity: 0;
}
.gm-list-item:nth-child(1) {
  animation-delay: 0.6s;
}
.gm-list-item:nth-child(2) {
  animation-delay: 0.63s;
}
.gm-list-item:nth-child(3) {
  animation-delay: 0.66s;
}
.gm-list-item:nth-child(4) {
  animation-delay: 0.69s;
}
.gm-list-item:nth-child(5) {
  animation-delay: 0.72s;
}
.gm-list-item:nth-child(6) {
  animation-delay: 0.75s;
}
.gm-list-item:nth-child(7) {
  animation-delay: 0.78s;
}
.gm-list-item:nth-child(8) {
  animation-delay: 0.81s;
}
.gm-list-item:nth-child(9) {
  animation-delay: 0.84s;
}
.gm-list-item:nth-child(10) {
  animation-delay: 0.87s;
}

/* ── BLOCO 3 — Efeito Radiante especial ── */
.gm-banner.gm-glow-radiante .gm-banner-shape::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(255, 215, 0, 0.04) 30%,
    rgba(255, 248, 220, 0.08) 50%,
    rgba(255, 215, 0, 0.04) 70%,
    transparent 100%
  );
  background-size: 200% 200%;
  animation: gm-shimmer-bg 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes gm-shimmer-bg {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}
.gm-val-radiante {
  background: linear-gradient(
    90deg,
    #ff9100,
    #ffd700,
    #fff8dc,
    #ffd700,
    #ff9100
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gm-text-shimmer 2.5s linear infinite;
  /* override the text-shadow from earlier since it conflicts with text-fill */
  text-shadow: none;
}
@keyframes gm-text-shimmer {
  to {
    background-position: 200% center;
  }
}
.gm-badge-radiante {
  animation: gm-badge-pulse 2s ease-in-out infinite;
}
@keyframes gm-badge-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
  }
  50% {
    box-shadow: 0 0 8px 2px rgba(255, 215, 0, 0.3);
  }
}

/* ── BLOCO 4 — Tooltip no streak ── */
.gm-streak-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: help;
}
.gm-streak-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a2e;
  border: 1px solid rgba(255, 145, 0, 0.3);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.7);
  font-family: "Rajdhani", "Trebuchet MS", sans-serif;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 10;
}
.gm-streak-wrap:hover .gm-streak-tooltip {
  opacity: 1;
}

/* ── BLOCO 6 — Base do pódio ── */
.gm-podium-base {
  position: relative;
  z-index: 2;
  height: 2px;
  margin: 0 10% 20px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 215, 0, 0.15),
    rgba(255, 215, 0, 0.4),
    rgba(255, 215, 0, 0.15),
    transparent
  );
  border-radius: 1px;
}
.gm-podium-base::before {
  content: "✦";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  color: rgba(255, 215, 0, 0.5);
  background: #06080f;
  padding: 0 8px;
}

/* ── BLOCO 5 — Responsividade ── */
@media (max-width: 1200px) {
  .gm-banner-1 .gm-banner-shape {
    width: 178px;
    height: 362px;
  }
  .gm-banner-23 .gm-banner-shape {
    width: 152px;
    height: 323px;
  }
  .gm-ring-1 {
    width: 96px;
    height: 96px;
  }
  .gm-ring-23 {
    width: 80px;
    height: 80px;
  }
  .gm-ring-mid-1 {
    width: 84px;
    height: 84px;
  }
  .gm-ring-mid-23 {
    width: 68px;
    height: 68px;
  }
  .gm-av-1 {
    width: 70px;
    height: 70px;
    font-size: 21px;
  }
  .gm-av-23 {
    width: 58px;
    height: 58px;
    font-size: 17px;
  }
  .gm-valor-1 {
    font-size: 24px;
  }
  .gm-valor-23 {
    font-size: 19px;
  }
  .gm-banner-name-1 {
    font-size: 13px;
  }
  .gm-banner-name-23 {
    font-size: 11px;
  }
  .gm-title {
    font-size: 18px;
  }
}

@media (max-width: 900px) {
  .gm-root {
    padding: 16px 14px;
  }
  .gm-podium {
    gap: 10px;
    padding: 0;
  }
  .gm-banner-1 .gm-banner-shape {
    width: 154px;
    height: 316px;
  }
  .gm-banner-23 .gm-banner-shape {
    width: 132px;
    height: 280px;
  }
  .gm-midgrid {
    grid-template-columns: 1fr;
  }
  .gm-title {
    font-size: 15px;
    letter-spacing: 1.5px;
  }
  /* Telas estreitas: força o modo recolhido (só ícones) */
  .sidebar {
    width: 72px;
    align-items: center;
    padding: 14px 0;
  }
  .sidebar .sb-label,
  .sidebar .sb-logo-text,
  .sidebar .sb-user-name {
    display: none;
  }
  .sidebar .sb-item,
  .sidebar .sb-toggle {
    justify-content: center;
    padding: 10px 4px;
    gap: 0;
  }
  .sidebar .sb-nav { align-items: center; padding: 0 8px 12px; }
  .sidebar .sb-logo-wrap { flex-direction: column; gap: 4px; padding: 4px; }
  .sidebar .sb-user { flex-direction: column; gap: 4px; padding: 12px 0 2px; }
  .gm-stars {
    left: 72px;
  }
}

@media (max-width: 640px) {
  .gm-podium {
    flex-direction: column;
    align-items: center;
  }
  .gm-banner-1 .gm-banner-shape,
  .gm-banner-23 .gm-banner-shape {
    width: 160px;
    height: 300px;
  }
  .gm-podium::before {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   MODO TV — Hall of Champions · Kiosk / TV Display Mode
   ══════════════════════════════════════════════════════════════ */

/* --- Botão TV --- */
.gm-tv-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  font-size: 16px;
  padding: 5px 10px;
  transition: all 0.2s;
  line-height: 1;
  flex-shrink: 0;
}
.gm-tv-btn:hover {
  background: rgba(255, 215, 0, 0.08);
  border-color: rgba(255, 215, 0, 0.35);
  color: #ffd700;
}
.gm-tv-btn.active {
  background: rgba(255, 215, 0, 0.1);
  border-color: rgba(255, 215, 0, 0.45);
  color: #ffd700;
}

/* --- Período em TV --- */
.gm-tv-period {
  display: none;
  font-family: "Cinzel", serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.5px;
  color: rgba(255, 215, 0, 0.65);
  padding: 4px 16px;
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 20px;
  background: rgba(255, 215, 0, 0.04);
  white-space: nowrap;
}

/* --- TV Mode: esconde navegação --- */
.tv-mode .sidebar {
  display: none !important;
}
.tv-mode .app-main {
  padding: 0 !important;
}
.tv-mode .gm-root {
  padding: 20px 40px;
  min-height: 100vh;
}
.tv-mode .gm-stars {
  left: 0;
}
.tv-mode .gm-filters {
  display: none;
}
.tv-mode .gm-tv-period {
  display: block;
}
.tv-mode #gm-list {
  display: none;
}
.tv-mode #gm-divider-todos {
  display: none;
}
.tv-mode #gm-legend {
  display: none;
}

/* --- TV Mode: tipografia e título --- */
.tv-mode .gm-title {
  font-size: 32px;
  letter-spacing: 5px;
}
.tv-mode .gm-subtitle {
  font-size: 13px;
  letter-spacing: 3px;
}
.tv-mode .gm-zone-text {
  font-size: 12px;
  letter-spacing: 6px;
}
.tv-mode .gm-zone-label {
  margin: 28px 0 36px;
}
.tv-mode .gm-div-text {
  font-size: 11px;
  letter-spacing: 4px;
}

/* --- TV Mode: pódio --- */
.tv-mode .gm-podium {
  gap: 48px;
}
.tv-mode .gm-banner-1 .gm-banner-shape {
  width: 280px;
  height: 560px;
}
.tv-mode .gm-banner-23 .gm-banner-shape {
  width: 232px;
  height: 492px;
}
.tv-mode .gm-ring-1 {
  width: 152px;
  height: 152px;
}
.tv-mode .gm-ring-23 {
  width: 126px;
  height: 126px;
}
.tv-mode .gm-ring-mid-1 {
  width: 138px;
  height: 138px;
}
.tv-mode .gm-ring-mid-23 {
  width: 114px;
  height: 114px;
}
.tv-mode .gm-av-1 {
  width: 114px;
  height: 114px;
  font-size: 36px;
}
.tv-mode .gm-av-23 {
  width: 96px;
  height: 96px;
  font-size: 28px;
}
.tv-mode .gm-valor-1 {
  font-size: 54px;
  margin-top: 4px;
  /* Rajdhani renderiza numerais com clareza — sem "1" parecendo "I" */
  font-family: "Rajdhani", "Trebuchet MS", sans-serif;
  font-weight: 800;
  letter-spacing: -1px;
}
.tv-mode .gm-valor-23 {
  font-size: 42px;
  margin-top: 2px;
  font-family: "Rajdhani", "Trebuchet MS", sans-serif;
  font-weight: 800;
  letter-spacing: -1px;
}
.tv-mode .gm-banner-name-1 {
  font-size: 20px;
  letter-spacing: 0.3px;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.tv-mode .gm-banner-name-23 {
  font-size: 17px;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.tv-mode .gm-crown {
  font-size: 52px;
}
.tv-mode .gm-rank-num {
  font-size: 22px;
  letter-spacing: 3px;
  margin-bottom: 10px;
}
.tv-mode .gm-tier-badge {
  font-size: 12px;
  padding: 4px 18px;
  margin-top: 10px;
  letter-spacing: 2px;
}
/* Esconder ruído visual ilegível em TV */
.tv-mode .gm-banner-team {
  display: none;
}
.tv-mode .gm-xp-wrap {
  display: none;
}
.tv-mode .gm-streak {
  display: none;
}
.tv-mode .gm-valor-label {
  font-size: 10px;
  letter-spacing: 3px;
  margin-bottom: 8px;
}
.tv-mode .gm-banner-stats .gm-bst-v {
  font-size: 22px;
  font-weight: 700;
  font-family: "Rajdhani", "Trebuchet MS", sans-serif;
}
.tv-mode .gm-bst-l {
  font-size: 11px;
  letter-spacing: 0.5px;
}

/* --- TV Mode: mid-grid 4°–9° --- */
.tv-mode .gm-midgrid {
  gap: 14px;
}
.tv-mode .gm-mid-card {
  min-height: 80px;
}
.tv-mode .gm-mid-name {
  font-size: 18px;
}
.tv-mode .gm-mid-valor {
  font-size: 24px;
  font-weight: 900;
}
.tv-mode .gm-mid-av {
  width: 36px;
  height: 36px;
  font-size: 13px;
}
.tv-mode .gm-mid-rn {
  font-size: 12px;
  width: 20px;
}
.tv-mode .gm-mid-meta {
  font-size: 11px;
}
.tv-mode .gm-mid-cont {
  font-size: 11px;
}

/* ══ Coroa: brilho animado ══ */
@keyframes gm-crown-glow {
  0%, 100% {
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.7), 0 0 35px rgba(255, 215, 0, 0.35);
  }
  50% {
    text-shadow: 0 0 22px rgba(255, 215, 0, 1), 0 0 60px rgba(255, 215, 0, 0.65), 0 0 100px rgba(255, 150, 0, 0.35);
  }
}

/* ══ Pulso por posição no pódio ══ */
@keyframes gm-pulse-pos1 {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.28)); }
  50%       { filter: drop-shadow(0 0 38px rgba(255, 215, 0, 0.70)); }
}
@keyframes gm-pulse-pos2 {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(200, 200, 230, 0.22)); }
  50%       { filter: drop-shadow(0 0 28px rgba(210, 210, 245, 0.60)); }
}
@keyframes gm-pulse-pos3 {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(205, 127, 50, 0.22)); }
  50%       { filter: drop-shadow(0 0 28px rgba(205, 127, 50, 0.60)); }
}
.gm-banner.gm-pos-1 {
  animation: gm-slide-up 0.5s ease forwards, gm-pulse-pos1 3s 0.6s ease-in-out infinite;
}
.gm-banner.gm-pos-2 {
  animation: gm-slide-up 0.5s ease forwards, gm-pulse-pos2 3.5s 0.3s ease-in-out infinite;
}
.gm-banner.gm-pos-3 {
  animation: gm-slide-up 0.5s ease forwards, gm-pulse-pos3 3.5s 0.9s ease-in-out infinite;
}

/* ══ Reflexo no chão por posição ══ */
.gm-banner.gm-pos-1::after {
  content: "";
  position: absolute;
  bottom: -28px;
  left: 5%;
  right: 5%;
  height: 40px;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 215, 0, 0.38) 0%, transparent 70%);
  pointer-events: none;
}
.gm-banner.gm-pos-2::after {
  content: "";
  position: absolute;
  bottom: -22px;
  left: 8%;
  right: 8%;
  height: 30px;
  background: radial-gradient(ellipse at 50% 0%, rgba(200, 200, 230, 0.30) 0%, transparent 70%);
  pointer-events: none;
}
.gm-banner.gm-pos-3::after {
  content: "";
  position: absolute;
  bottom: -22px;
  left: 8%;
  right: 8%;
  height: 30px;
  background: radial-gradient(ellipse at 50% 0%, rgba(205, 127, 50, 0.30) 0%, transparent 70%);
  pointer-events: none;
}

/* ══ Challenger badge — 4° lugar ══ */
.gm-challenger-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 145, 0, 0.1);
  border: 1px solid rgba(255, 145, 0, 0.35);
  border-radius: 6px;
  padding: 1px 7px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #ff9100;
  font-family: "Cinzel", serif;
  margin-left: 5px;
  white-space: nowrap;
  animation: gm-challenger-pulse 2.5s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes gm-challenger-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 145, 0, 0);
  }
  50% {
    box-shadow: 0 0 8px 2px rgba(255, 145, 0, 0.25);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN
   ═══════════════════════════════════════════════════════════════════════════ */

.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: #ffffff;
  color: #00022D;
}
.login-bg {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(0, 2, 45, 0.06), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(202, 153, 30, 0.08), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.login-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  padding: 24px;
}
.login-card {
  background: #ffffff;
  border: 1px solid rgba(0, 2, 45, 0.1);
  border-top: 3px solid #CA991E;
  border-radius: 20px;
  padding: 40px 32px 28px;
  box-shadow: 0 20px 50px rgba(0, 2, 45, 0.12), 0 4px 12px rgba(0, 2, 45, 0.06);
}
.login-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 28px;
}
.login-logo-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #00022D, #0a0e5c);
  border: 1px solid #CA991E;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #CA991E;
  box-shadow: 0 6px 18px rgba(0, 2, 45, 0.25);
}
.login-brand {
  margin-top: 10px;
  font-family: "Cinzel", serif;
  font-weight: 700;
  letter-spacing: 6px;
  font-size: 20px;
  color: #00022D;
}
.login-brand-sub {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #CA991E;
  margin-top: 2px;
  font-weight: 600;
}
.login-title {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 4px;
  color: #00022D;
}
.login-sub {
  font-size: 13px;
  color: rgba(0, 2, 45, 0.6);
  text-align: center;
  margin-bottom: 20px;
}
.login-erro {
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.3);
  color: #b91c1c;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 16px;
  text-align: center;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.login-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(0, 2, 45, 0.7);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-top: 10px;
}
.login-input {
  background: #ffffff;
  border: 1px solid rgba(0, 2, 45, 0.15);
  border-radius: 10px;
  padding: 12px 14px;
  color: #00022D;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}
.login-input::placeholder {
  color: rgba(0, 2, 45, 0.35);
}
.login-input:focus {
  border-color: #CA991E;
  box-shadow: 0 0 0 3px rgba(202, 153, 30, 0.18);
}
.login-senha-wrap {
  position: relative;
}
.login-eye {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  color: rgba(0, 2, 45, 0.5);
  padding: 4px 8px;
}
.login-eye:hover { color: #CA991E; }
.login-btn {
  margin-top: 18px;
  background: #00022D;
  color: #ffffff;
  border: 1px solid #00022D;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 13px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
}
.login-btn:hover {
  background: #0a0e5c;
  border-color: #CA991E;
  box-shadow: 0 6px 18px rgba(0, 2, 45, 0.3), 0 0 0 1px rgba(202, 153, 30, 0.25);
  transform: translateY(-1px);
}
.login-btn:active { transform: translateY(0); }
.login-rodape {
  margin-top: 24px;
  text-align: center;
  font-size: 11px;
  color: rgba(0, 2, 45, 0.55);
  letter-spacing: 0.5px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   USUÁRIO NA SIDEBAR
   ═══════════════════════════════════════════════════════════════════════════ */

.sb-user {
  margin-top: auto;
  padding: 12px 6px 2px 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}
.sidebar.collapsed .sb-user { flex-direction: column; gap: 4px; padding: 12px 0 2px; }
.sidebar.collapsed .sb-user-name { display: none; }
.sb-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #CA991E, #e0b440);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: #00022D;
}
.sb-user-name {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  text-align: left;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-user-action {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  transition: all 0.15s;
}
.sb-user-action:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--cyan);
}
.sb-user-admin:hover { color: #ffd700; }
.sb-user-action .ic { width: 16px; height: 16px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN — Gerenciamento de usuários
   ═══════════════════════════════════════════════════════════════════════════ */

.adm-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-body);
}
.adm-topbar {
  background: var(--bg-header);
  border-bottom: 1px solid var(--gray-200);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
}
.adm-topbar-left { display: flex; align-items: center; gap: 18px; }
.adm-back {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.15s;
}
.adm-back:hover { color: var(--cyan); }
.adm-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-main);
}
.adm-topbar-right { display: flex; align-items: center; gap: 14px; }
.adm-user { font-size: 13px; color: var(--text-muted); }
.adm-logout {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
  border: 1px solid var(--gray-200);
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 0.15s;
}
.adm-logout:hover { color: #ff8b6b; border-color: rgba(255, 61, 0, 0.4); }

.adm-main {
  padding: 24px 28px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}
.adm-toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}
.adm-busca {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--gray-200);
  color: var(--text-main);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  outline: none;
}
.adm-busca:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 242, 254, 0.12);
}

.adm-btn {
  border: 0;
  border-radius: 10px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s;
}
.adm-btn-primary {
  background: linear-gradient(135deg, #00f2fe, #00acc1);
  color: #001218;
}
.adm-btn-primary:hover { box-shadow: 0 4px 14px rgba(0, 242, 254, 0.35); }
.adm-btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--gray-200);
}
.adm-btn-ghost:hover { color: var(--text-main); border-color: var(--gray-400); }
.adm-btn-mini {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--gray-200);
  color: var(--text-dark);
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.adm-btn-mini:hover {
  background: rgba(0, 242, 254, 0.08);
  color: var(--cyan);
  border-color: rgba(0, 242, 254, 0.3);
}

.adm-tabela-wrap {
  background: var(--bg-card);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  overflow: hidden;
}
.adm-tabela {
  width: 100%;
  border-collapse: collapse;
}
.adm-tabela thead th {
  background: rgba(0, 0, 0, 0.2);
  color: var(--text-muted);
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-200);
}
.adm-tabela tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 13px;
  color: var(--text-dark);
}
.adm-tabela tbody tr:last-child td { border-bottom: 0; }
.adm-tabela tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
.adm-row-inativo { opacity: 0.5; }
.adm-vazio {
  text-align: center;
  color: var(--text-muted);
  padding: 32px !important;
}
.adm-mono { font-family: "Consolas", monospace; font-size: 12px; }
.adm-acoes { display: flex; gap: 6px; }

.adm-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.adm-badge-on    { background: var(--green-light);  color: var(--green); }
.adm-badge-off   { background: rgba(255, 255, 255, 0.05); color: var(--text-muted); }
.adm-badge-admin { background: rgba(255, 215, 0, 0.1); color: #ffd700; }

/* ── Modal admin ── */
.adm-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.adm-modal.hidden { display: none; }
.adm-modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}
.adm-modal-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--gray-200);
  border-radius: 18px;
  width: 100%;
  max-width: 880px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.adm-modal-header {
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--gray-200);
}
.adm-modal-header h2 { font-size: 17px; font-weight: 600; }
.adm-modal-close {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 26px;
  cursor: pointer;
  line-height: 1;
}
.adm-modal-close:hover { color: var(--text-main); }
.adm-modal-body {
  padding: 22px 24px;
  overflow-y: auto;
  flex: 1;
}
.adm-modal-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--gray-200);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}
.adm-modal-erro {
  flex: 1;
  font-size: 12px;
  color: #ff8b6b;
}

.adm-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.adm-form-group { display: flex; flex-direction: column; gap: 6px; }
.adm-form-group-flag { grid-column: span 2; }
.adm-form-group label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.adm-form-group input[type="text"],
.adm-form-group input[type="email"] {
  background: var(--bg-input);
  border: 1px solid var(--gray-200);
  color: var(--text-main);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  outline: none;
}
.adm-form-group input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 242, 254, 0.12);
}
.adm-form-group small { font-size: 11px; color: var(--text-muted); }
.adm-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-dark);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.adm-check input { accent-color: var(--cyan); width: 16px; height: 16px; }

.adm-section-title {
  margin-top: 22px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.adm-section-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  margin-bottom: 14px;
}

.adm-perm-tabela {
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  overflow: hidden;
}
.adm-perm-head,
.adm-perm-row {
  display: grid;
  grid-template-columns: 160px 80px 220px 1fr;
  gap: 12px;
  padding: 12px 14px;
  align-items: center;
}
.adm-perm-head {
  background: rgba(0, 0, 0, 0.25);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.adm-perm-row {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 13px;
}
.adm-perm-aba { font-weight: 600; color: var(--text-main); }
.adm-select {
  width: 100%;
  background: var(--bg-input);
  color: var(--text-main);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  outline: none;
}
.adm-select:disabled { opacity: 0.4; cursor: not-allowed; }
.adm-select:focus { border-color: var(--cyan); }
.adm-eq-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.adm-eq-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-input);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  color: var(--text-dark);
  transition: all 0.15s;
}
.adm-eq-chip input { accent-color: var(--cyan); width: 13px; height: 13px; margin: 0; }
.adm-eq-chip:has(input:checked) {
  border-color: var(--cyan);
  background: var(--cyan-light);
  color: var(--cyan);
}

.adm-toggle {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  cursor: pointer;
}
.adm-toggle input { opacity: 0; width: 0; height: 0; }
.adm-toggle-slider {
  position: absolute;
  inset: 0;
  background: rgba(120, 130, 150, 0.4);
  border-radius: 22px;
  transition: background 0.2s;
}
.adm-toggle-slider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s;
}
.adm-toggle input:checked + .adm-toggle-slider {
  background: linear-gradient(135deg, #00f2fe, #00acc1);
}
.adm-toggle input:checked + .adm-toggle-slider::before {
  transform: translateX(16px);
}

@media (max-width: 720px) {
  .adm-form-grid { grid-template-columns: 1fr; }
  .adm-form-group-flag { grid-column: span 1; }
  .adm-perm-head { display: none; }
  .adm-perm-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ZONA CÉU (#6–#15) — atmosfera azul, nuvens, sol, foguetes puxando cards
   ═══════════════════════════════════════════════════════════════════════════ */

.gm-sky-zone {
  /* Já é .gm-zone (height: 100vh, scroll-snap-align), só precisa do tema */
  width: 100%;
  padding: 40px 40px 60px;
  /* Imagem fotográfica do céu como fundo */
  background:
    url('/static/img/ceu-bg.png') center center / cover no-repeat,
    #4a7db8; /* fallback */
  isolation: isolate;
  display: flex;
  flex-direction: column;
}

/* Overlay no TOPO: gradient que começa com a cor de fim do espaço (#2c4a72)
   e fadeia pra mostrar a foto — preserva a transição invisível com a zona-espaço */
.gm-sky-zone::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12%;
  background: linear-gradient(180deg,
    #2c4a72 0%,
    rgba(60, 100, 150, 0.6) 50%,
    transparent 100%);
  pointer-events: none;
  z-index: 7;
}

/* Overlay no FUNDO: clareia pra cor que vira a Terra (#8a9aac) — junção invisível com terra */
.gm-sky-zone::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 12%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(150, 165, 175, 0.4) 50%,
    #8a9aac 100%);
  pointer-events: none;
  z-index: 7;
}

/* Elementos que a imagem JÁ tem — escondemos pra não duplicar */
.gm-sky-zone .gm-sky-sun,
.gm-sky-zone .gm-sky-burst {
  display: none;
}

.gm-sky-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* ─── Burst de raios solares (disparado por JS ao entrar na zona céu) ─── */
.gm-sky-burst {
  position: absolute;
  /* Centro coincidindo com centro do sol (top:8%, right:5%, 110px diâmetro) */
  top: calc(8% + 55px);
  right: calc(5% + 55px);
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 3;
  /* Glow extra de fundo no momento do burst */
  filter: drop-shadow(0 0 30px rgba(255, 240, 180, 0.6));
}
.gm-ray {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 0;
  margin-left: -2px;
  background: linear-gradient(180deg,
    rgba(255, 250, 220, 1) 0%,
    rgba(255, 240, 180, 0.85) 30%,
    rgba(255, 220, 130, 0.5) 65%,
    rgba(255, 220, 130, 0) 100%);
  transform-origin: top center;
  transform: rotate(var(--angle));
  border-radius: 50%;
  filter: blur(1.5px);
  opacity: 0;
}
.gm-sky-burst.active .gm-ray {
  animation: gm-ray-burst 2.4s ease-out forwards;
}
/* Stagger leve entre raios pra dar dinâmica */
.gm-sky-burst.active .gm-ray:nth-child(2)  { animation-delay: 0.05s; }
.gm-sky-burst.active .gm-ray:nth-child(3)  { animation-delay: 0.10s; }
.gm-sky-burst.active .gm-ray:nth-child(4)  { animation-delay: 0.15s; }
.gm-sky-burst.active .gm-ray:nth-child(5)  { animation-delay: 0.20s; }
.gm-sky-burst.active .gm-ray:nth-child(6)  { animation-delay: 0.05s; }
.gm-sky-burst.active .gm-ray:nth-child(7)  { animation-delay: 0.10s; }
.gm-sky-burst.active .gm-ray:nth-child(8)  { animation-delay: 0.15s; }
.gm-sky-burst.active .gm-ray:nth-child(9)  { animation-delay: 0.20s; }
.gm-sky-burst.active .gm-ray:nth-child(10) { animation-delay: 0.05s; }
.gm-sky-burst.active .gm-ray:nth-child(11) { animation-delay: 0.10s; }
.gm-sky-burst.active .gm-ray:nth-child(12) { animation-delay: 0.15s; }
@keyframes gm-ray-burst {
  0%   { height: 0;     opacity: 0; }
  10%  { height: 60px;  opacity: 1; }
  35%  { height: 280px; opacity: 0.9; }
  70%  { height: 380px; opacity: 0.4; }
  100% { height: 460px; opacity: 0; }
}

/* ─── Sol ─── */
.gm-sky-sun {
  position: absolute;
  top: 8%;
  right: 5%;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    #fff8dc 0%,
    #ffe680 35%,
    #ffb84d 75%,
    #ff9020 100%);
  box-shadow:
    0 0 60px rgba(255, 200, 80, 0.7),
    0 0 130px rgba(255, 220, 120, 0.45),
    0 0 220px rgba(255, 200, 80, 0.22);
  animation: gm-sky-sun-pulse 8s ease-in-out infinite;
}
@keyframes gm-sky-sun-pulse {
  0%, 100% {
    box-shadow:
      0 0 60px rgba(255, 200, 80, 0.7),
      0 0 130px rgba(255, 220, 120, 0.45),
      0 0 220px rgba(255, 200, 80, 0.22);
  }
  50% {
    box-shadow:
      0 0 80px rgba(255, 200, 80, 0.85),
      0 0 160px rgba(255, 220, 120, 0.6),
      0 0 280px rgba(255, 200, 80, 0.32);
  }
}

/* ─── Nuvens fofas ─── */
.gm-sky-cloud {
  position: absolute;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 40%, rgba(220, 230, 245, 0.4) 70%, transparent 95%),
    radial-gradient(ellipse at 70% 40%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 50%, transparent 90%);
  border-radius: 50%;
  filter: blur(2px) drop-shadow(0 8px 12px rgba(60, 90, 130, 0.18));
}
.gm-cloud-1 {
  width: 240px; height: 75px;
  top: 18%; left: -260px;
  animation: gm-cloud-drift-1 75s linear infinite;
}
.gm-cloud-2 {
  width: 180px; height: 55px;
  top: 38%; left: -200px;
  opacity: 0.85;
  animation: gm-cloud-drift-2 95s linear infinite;
  animation-delay: -25s;
}
.gm-cloud-3 {
  width: 200px; height: 60px;
  top: 65%; left: -220px;
  opacity: 0.78;
  animation: gm-cloud-drift-3 88s linear infinite;
  animation-delay: -45s;
}
.gm-cloud-4 {
  width: 150px; height: 45px;
  top: 8%; left: -160px;
  opacity: 0.6;
  filter: blur(3px);
  animation: gm-cloud-drift-1 110s linear infinite;
  animation-delay: -60s;
}
.gm-cloud-5 {
  width: 280px; height: 80px;
  top: 80%; left: -300px;
  opacity: 0.55;
  filter: blur(3px);
  animation: gm-cloud-drift-2 130s linear infinite;
}
@keyframes gm-cloud-drift-1 {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(100vw + 300px)); }
}
@keyframes gm-cloud-drift-2 {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(100vw + 300px)); }
}
@keyframes gm-cloud-drift-3 {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(100vw + 300px)); }
}

/* ─── Avião (cruza tela em ~3 minutos) ─── */
.gm-sky-airplane {
  position: absolute;
  top: 28%;
  left: -50px;
  font-size: 22px;
  color: rgba(40, 50, 70, 0.85);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transform: rotate(-5deg);
  animation: gm-sky-airplane-cross 180s linear infinite;
  animation-delay: 8s;
}
@keyframes gm-sky-airplane-cross {
  0%   { transform: translateX(0) rotate(-5deg); opacity: 0; }
  3%   { opacity: 1; }
  97%  { opacity: 1; }
  100% { transform: translateX(calc(100vw + 100px)) rotate(-5deg); opacity: 0; }
}

/* ─── Pássaros (V de aves voando) ─── */
.gm-sky-birds {
  position: absolute;
  top: 14%;
  left: -100px;
  animation: gm-sky-birds-fly 130s linear infinite;
  animation-delay: 25s;
}
@keyframes gm-sky-birds-fly {
  0%   { transform: translateX(0) translateY(0); opacity: 0; }
  4%   { opacity: 0.7; }
  50%  { transform: translateX(50vw) translateY(-15px); }
  96%  { opacity: 0.7; }
  100% { transform: translateX(calc(100vw + 100px)) translateY(0); opacity: 0; }
}

/* ─── Header da seção ─── */
.gm-sky-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 0 60px;
  padding: 0 30px;
}
.gm-sky-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(40, 70, 110, 0.4) 30%,
    rgba(40, 70, 110, 0.4) 70%,
    transparent 100%);
}
.gm-sky-title {
  font-family: "Cinzel", serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 2px 6px rgba(40, 70, 110, 0.6);
  white-space: nowrap;
}

/* ─── Grid 2×5 dos cards ─── */
.gm-sky-grid {
  position: relative;
  z-index: 2;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: min-content;
  align-content: center;
  gap: 90px 28px; /* row gap maior pra caber rocket+rope da segunda linha */
  max-width: 1480px;
  width: 100%;
  margin: 0 auto;
  padding-top: 70px; /* espaço pros foguetes da primeira linha */
}

/* Wrapper de cada card (contém foguete + corda + card) */
.gm-sky-card-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ─── Foguete ─── */
.gm-rocket {
  position: absolute;
  top: -68px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 50px;
  z-index: 3;
  animation: gm-rocket-sway 3.4s ease-in-out infinite;
}
.gm-rocket-tip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 14px solid #e84d4d;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}
.gm-rocket-body {
  position: absolute;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 24px;
  background: linear-gradient(180deg,
    #fafafa 0%,
    #e0e0e8 40%,
    #b0b0bc 100%);
  border-radius: 4px 4px 30% 30%;
  box-shadow:
    inset -2px 0 3px rgba(0, 0, 0, 0.15),
    inset 2px 0 2px rgba(255, 255, 255, 0.4);
}
.gm-rocket-window {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 7px;
  background: radial-gradient(circle at 30% 30%, #aee0ff 0%, #4a90e2 60%, #1e4a80 100%);
  border-radius: 50%;
  border: 1px solid #c0c0cc;
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.3);
}
.gm-rocket-fin-l,
.gm-rocket-fin-r {
  position: absolute;
  bottom: 13px;
  width: 0;
  height: 0;
  border-bottom: 10px solid #e84d4d;
}
.gm-rocket-fin-l {
  left: -1px;
  border-right: 6px solid transparent;
}
.gm-rocket-fin-r {
  right: -1px;
  border-left: 6px solid transparent;
}
.gm-rocket-flame {
  position: absolute;
  top: 38px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 16px;
  background: radial-gradient(ellipse at 50% 30%,
    #fff 0%,
    #ffeb3b 25%,
    #ff9800 60%,
    #f44336 100%);
  border-radius: 50% 50% 30% 30% / 30% 30% 80% 80%;
  filter: blur(0.5px);
  animation: gm-rocket-flame 0.18s ease-in-out infinite alternate;
}

/* Corda entre foguete e card */
.gm-sky-rope {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5px;
  height: 16px;
  background: linear-gradient(180deg,
    rgba(50, 50, 70, 0.7) 0%,
    rgba(50, 50, 70, 0.4) 100%);
  z-index: 2;
}

@keyframes gm-rocket-sway {
  0%, 100% { transform: translateX(-50%) rotate(-3deg); }
  50%      { transform: translateX(-50%) rotate(3deg); }
}
@keyframes gm-rocket-flame {
  0%   { transform: translateX(-50%) scaleY(1)   scaleX(1); opacity: 0.95; }
  100% { transform: translateX(-50%) scaleY(1.2) scaleX(0.85); opacity: 1; }
}

/* ─── Card no céu ─── */
.gm-sky-card {
  position: relative;
  width: 100%;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 22px;
  padding: 16px 14px 14px;
  box-shadow:
    0 10px 28px rgba(50, 80, 120, 0.30),
    0 3px 8px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  text-align: center;
  animation: gm-sky-card-bob 4.5s ease-in-out infinite;
}
.gm-sky-card-wrap:nth-child(odd) .gm-sky-card {
  animation-duration: 4.2s;
  animation-delay: -1s;
}
.gm-sky-card-wrap:nth-child(3n) .gm-sky-card {
  animation-duration: 5s;
  animation-delay: -0.5s;
}

@keyframes gm-sky-card-bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-4px) rotate(-0.5deg); }
}

.gm-sky-rank {
  position: absolute;
  top: 8px;
  left: 10px;
  font-family: "Cinzel", serif;
  font-size: 11px;
  font-weight: 800;
  color: rgba(40, 70, 110, 0.6);
  letter-spacing: 1px;
}
.gm-sky-card-top {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
  margin-top: 4px;
}
.gm-sky-av {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background-size: cover;
  background-position: center top;
  box-shadow: 0 2px 8px rgba(40, 70, 110, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 17px;
  color: #2a4060;
  background-color: rgba(180, 200, 220, 0.8);
}
.gm-sky-av img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.gm-sky-name {
  font-family: "Cinzel", serif;
  font-size: 12.5px;
  font-weight: 700;
  color: #1a2540;
  line-height: 1.2;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}
.gm-sky-team {
  font-family: "Rajdhani", sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(60, 90, 130, 0.7);
  margin-bottom: 8px;
}
.gm-sky-value {
  font-family: "Cinzel Decorative", "Cinzel", serif;
  font-size: 17px;
  font-weight: 900;
  color: #1a2540;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
  margin-bottom: 6px;
}
.gm-sky-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 10px;
  color: rgba(50, 70, 100, 0.75);
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
}
.gm-sky-stats .gm-tier-badge {
  font-size: 9px;
  padding: 2px 8px;
  letter-spacing: 1px;
  border-radius: 8px;
}

/* Empty state */
.gm-sky-empty {
  grid-column: span 5;
  text-align: center;
  font-family: "Rajdhani", sans-serif;
  color: rgba(40, 60, 90, 0.5);
  padding: 40px;
  font-size: 13px;
  letter-spacing: 1px;
}

/* Mobile/tablet — colapsa pra menos colunas */
@media (max-width: 1100px) {
  .gm-sky-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 90px 18px;
  }
}
@media (max-width: 700px) {
  .gm-sky-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 80px 14px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ZONA TERRA (#16–#20) — Cidade perdida na floresta
   ═══════════════════════════════════════════════════════════════════════════ */

.gm-zone-terra {
  width: 100%;
  padding: 40px 40px 0;
  /* Imagem fotográfica de ruínas/floresta como fundo */
  background:
    url('/static/img/terra-bg.png') center center / cover no-repeat,
    #1a2418; /* fallback escuro */
  isolation: isolate;
  display: flex;
  flex-direction: column;
}

/* Camada de transição no topo: faz a foto começar com a cor do fim do céu (#8a9aac)
   e clarear pra mostrar a imagem — disfarça o boundary entre as zonas */
.gm-zone-terra::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 18%;
  background: linear-gradient(180deg,
    #8a9aac 0%,
    #6a8074 30%,
    rgba(60, 75, 60, 0.6) 70%,
    transparent 100%);
  pointer-events: none;
  z-index: 7;
}

/* Elementos que a foto JÁ tem — escondemos pra não duplicar */
.gm-zone-terra .gm-terra-treeline,
.gm-zone-terra .gm-terra-arch,
.gm-zone-terra .gm-terra-canopy,
.gm-zone-terra .gm-terra-fern,
.gm-zone-terra .gm-terra-statue,
.gm-zone-terra .gm-terra-ground {
  display: none;
}

/* Container do bg (atrás do conteúdo) */
.gm-terra-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* ─── Treeline distante (silhueta de floresta no fundo, blurred) ─── */
.gm-terra-treeline {
  position: absolute;
  bottom: 22%;
  left: 0;
  right: 0;
  width: 100%;
  height: 130px;
  filter: blur(1.5px);
  opacity: 0.85;
  pointer-events: none;
}

/* ─── Arcos de pedra góticos (substituem as pirâmides) ─── */
.gm-terra-arch {
  position: absolute;
  filter: blur(0.5px) drop-shadow(0 8px 14px rgba(0, 0, 0, 0.5));
  pointer-events: none;
}
.gm-arch-1 {
  bottom: 18%;
  left: 6%;
  width: 240px;
  height: 320px;
  opacity: 0.85;
  transform: rotate(-1deg);
}
.gm-arch-2 {
  bottom: 22%;
  right: 8%;
  width: 200px;
  height: 270px;
  opacity: 0.7;
  transform: rotate(1.5deg);
}

/* ─── Estátua moai/olmeca (peek-out) ─── */
.gm-terra-statue {
  position: absolute;
  bottom: 22%;
  right: 22%;
  font-size: 60px;
  filter:
    grayscale(0.4)
    sepia(0.3)
    hue-rotate(50deg)
    saturate(0.7)
    brightness(0.65)
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
  opacity: 0.85;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}

/* ─── God rays (raios de sol piercing canopy) ─── */
.gm-god-rays {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80%;
  pointer-events: none;
}
.gm-ray-light {
  position: absolute;
  top: 0;
  width: 90px;
  height: 100%;
  background: linear-gradient(180deg,
    rgba(220, 200, 130, 0) 0%,
    rgba(220, 200, 130, 0.18) 25%,
    rgba(180, 170, 100, 0.10) 60%,
    rgba(180, 170, 100, 0) 100%);
  filter: blur(8px);
  animation: gm-ray-pulse 8s ease-in-out infinite;
}
.gm-rl-1 { left: 12%; transform: skewX(-14deg); width: 100px; }
.gm-rl-2 { left: 30%; transform: skewX(-18deg); animation-delay: -2.5s; width: 70px; }
.gm-rl-3 { left: 52%; transform: skewX(-10deg); animation-delay: -5s;   width: 110px; opacity: 0.85; }
.gm-rl-4 { left: 70%; transform: skewX(-16deg); animation-delay: -3s;   width: 80px; }
.gm-rl-5 { left: 86%; transform: skewX(-8deg);  animation-delay: -7s;   width: 90px; opacity: 0.75; }
@keyframes gm-ray-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.95; }
}

/* ─── Névoa atmosférica (4 camadas em depths diferentes) ─── */
.gm-terra-mist {
  position: absolute;
  pointer-events: none;
  filter: blur(14px);
}

/* Camada de haze geral cobrindo toda a zona (estática, dá profundidade) */
.gm-mist-haze {
  inset: 0;
  background:
    radial-gradient(ellipse 60% 30% at 50% 25%, rgba(200, 220, 200, 0.15) 0%, transparent 70%),
    radial-gradient(ellipse 80% 40% at 50% 60%, rgba(180, 210, 180, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 90%, rgba(160, 190, 160, 0.08) 0%, transparent 70%);
  filter: blur(20px);
}

.gm-mist-1 {
  bottom: 18%;
  left: -350px;
  width: 800px;
  height: 110px;
  background: radial-gradient(ellipse,
    rgba(200, 220, 200, 0.55) 0%,
    rgba(180, 200, 180, 0.25) 50%,
    transparent 100%);
  animation: gm-mist-drift-1 95s linear infinite;
}
.gm-mist-2 {
  bottom: 10%;
  left: -400px;
  width: 700px;
  height: 100px;
  opacity: 0.75;
  background: radial-gradient(ellipse,
    rgba(190, 215, 190, 0.50) 0%,
    rgba(170, 195, 170, 0.22) 50%,
    transparent 100%);
  animation: gm-mist-drift-2 130s linear infinite;
  animation-delay: -40s;
}
.gm-mist-3 {
  bottom: 28%;
  left: -300px;
  width: 600px;
  height: 80px;
  opacity: 0.55;
  background: radial-gradient(ellipse,
    rgba(210, 230, 210, 0.4) 0%,
    rgba(180, 200, 180, 0.18) 50%,
    transparent 100%);
  animation: gm-mist-drift-1 160s linear infinite;
  animation-delay: -70s;
}
@keyframes gm-mist-drift-1 {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(100vw + 600px)); }
}
@keyframes gm-mist-drift-2 {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(100vw + 600px)); }
}

/* ─── Canopy denso (dossel de folhas no topo, 2 camadas) ─── */
.gm-terra-canopy {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 130px;
  background:
    /* Camada 2: folhas mais à frente (mais escuras, mais nítidas) */
    radial-gradient(ellipse 120px 65px at 5% 100%,  #182818 0%, transparent 60%),
    radial-gradient(ellipse 140px 75px at 18% 95%,  #1a2f22 0%, transparent 60%),
    radial-gradient(ellipse 100px 60px at 32% 100%, #142016 0%, transparent 60%),
    radial-gradient(ellipse 130px 70px at 48% 95%,  #1a2f22 0%, transparent 60%),
    radial-gradient(ellipse 110px 60px at 62% 100%, #182818 0%, transparent 60%),
    radial-gradient(ellipse 120px 65px at 78% 95%,  #1a2f22 0%, transparent 60%),
    radial-gradient(ellipse 130px 70px at 93% 100%, #142016 0%, transparent 60%),
    /* Camada 1: folhas atrás (mais claras, blur maior) */
    radial-gradient(ellipse 150px 50px at 12% 70%,  #2a3e2a 0%, transparent 60%),
    radial-gradient(ellipse 170px 55px at 38% 65%,  #2a3e2a 0%, transparent 60%),
    radial-gradient(ellipse 160px 50px at 65% 70%,  #2a3e2a 0%, transparent 60%),
    radial-gradient(ellipse 150px 55px at 88% 65%,  #2a3e2a 0%, transparent 60%);
  filter: blur(1.8px);
}

/* ─── Vinhas pendurando (6 vinhas mais grossas, com folhas em múltiplos pontos) ─── */
.gm-terra-vine {
  position: absolute;
  top: 80px;
  width: 4px;
  background: linear-gradient(180deg,
    #2a4530 0%,
    #233820 60%,
    #1a2818 100%);
  border-radius: 4px;
  transform-origin: top center;
  animation: gm-vine-sway 6s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}
/* Folhas em múltiplos pontos da vinha (via ::before) */
.gm-terra-vine::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 16px 10px at -6px 20%, #2a4530 0%, #1a2818 60%, transparent 100%),
    radial-gradient(ellipse 14px 9px  at 10px 45%, #2a4530 0%, #1a2818 60%, transparent 100%),
    radial-gradient(ellipse 18px 11px at -4px 70%, #2a4530 0%, #1a2818 60%, transparent 100%),
    radial-gradient(ellipse 16px 10px at 8px 90%,  #2a4530 0%, #1a2818 60%, transparent 100%);
  filter: blur(0.5px);
}
/* Folha grande pendurada na ponta */
.gm-terra-vine::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: -10px;
  width: 24px;
  height: 16px;
  background: radial-gradient(ellipse, #2a4530 0%, #1a2818 60%, transparent 100%);
  border-radius: 50%;
  filter: blur(0.5px);
}
.gm-vine-1 { left: 8%;  height: 240px; animation-delay: -1s; }
.gm-vine-2 { left: 22%; height: 180px; animation-delay: -2.5s; }
.gm-vine-3 { left: 38%; height: 280px; animation-delay: -1.8s; }
.gm-vine-4 { left: 62%; height: 200px; animation-delay: -3.2s; }
.gm-vine-5 { left: 78%; height: 260px; animation-delay: -0.5s; }
.gm-vine-6 { left: 92%; height: 220px; animation-delay: -2s; }
@keyframes gm-vine-sway {
  0%, 100% { transform: rotate(-1.8deg); }
  50%      { transform: rotate(1.8deg); }
}

/* ─── Samambaias / folhagem do primeiro plano (cantos inferiores) ─── */
.gm-terra-fern {
  position: absolute;
  bottom: 0;
  width: 320px;
  height: 200px;
  filter: blur(0.8px) drop-shadow(0 -4px 8px rgba(0, 0, 0, 0.5));
  pointer-events: none;
  opacity: 0.95;
  z-index: 4;
}
.gm-fern-l {
  left: -30px;
}
.gm-fern-r {
  right: -30px;
  transform: scaleX(-1);
}

/* ─── Vignette cinematográfica (cantos escuros, mais sutil agora que tem foto) ─── */
.gm-terra-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  background:
    radial-gradient(ellipse 130% 110% at 50% 45%,
      transparent 55%,
      rgba(8, 14, 10, 0.40) 100%);
}

/* ─── Atmospheric tint — agora MUITO sutil (foto já tem cor) ─── */
.gm-terra-tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(20, 35, 20, 0.05) 50%,
      rgba(15, 25, 15, 0.10) 100%);
}

/* ─── Borboleta cruzando a tela em zigue-zague ─── */
.gm-terra-butterfly {
  position: absolute;
  top: 30%;
  left: -50px;
  font-size: 22px;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.4));
  animation: gm-butterfly-fly 38s linear infinite;
  animation-delay: 6s;
}
@keyframes gm-butterfly-fly {
  0%   { transform: translate(0, 0)               rotate(-5deg); opacity: 0; }
  4%   { opacity: 1; }
  20%  { transform: translate(20vw, -40px)        rotate( 8deg); }
  40%  { transform: translate(40vw,  20px)        rotate(-5deg); }
  60%  { transform: translate(60vw, -25px)        rotate( 6deg); }
  80%  { transform: translate(80vw,  15px)        rotate(-4deg); }
  96%  { opacity: 1; }
  100% { transform: translate(calc(100vw + 80px), 0) rotate(-5deg); opacity: 0; }
}

/* ─── Folhas caindo (rotate + drift lateral) ─── */
.gm-terra-leaf {
  position: absolute;
  top: -40px;
  font-size: 16px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
  animation: gm-leaf-fall 14s linear infinite;
}
.gm-leaf-1 { left: 18%; animation-delay: 2s; }
.gm-leaf-2 { left: 38%; animation-delay: 8s;  font-size: 18px; }
.gm-leaf-3 { left: 56%; animation-delay: 14s; font-size: 14px; }
.gm-leaf-4 { left: 72%; animation-delay: 5s;  font-size: 17px; }
.gm-leaf-5 { left: 88%; animation-delay: 19s; font-size: 15px; }
@keyframes gm-leaf-fall {
  0%   { transform: translate(0, 0) rotate(0); opacity: 0; }
  8%   { opacity: 1; }
  25%  { transform: translate(15px, 20vh) rotate(120deg); }
  50%  { transform: translate(-10px, 45vh) rotate(220deg); }
  75%  { transform: translate(20px, 70vh) rotate(340deg); }
  92%  { opacity: 1; }
  100% { transform: translate(0, 95vh) rotate(450deg); opacity: 0; }
}

/* ─── Pólen / partículas de luz (motes) ─── */
.gm-terra-pollen {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.gm-terra-pollen .gm-mote {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(220, 200, 130, 0.7);
  box-shadow: 0 0 4px rgba(220, 200, 130, 0.5);
  animation: gm-mote-float var(--d) ease-in-out infinite var(--delay);
}
@keyframes gm-mote-float {
  0%, 100% { transform: translate(0, 0); opacity: 0.3; }
  50%      { transform: translate(var(--mx), var(--my)); opacity: 0.8; }
}

/* ─── Solo (musgo escuro com manchas) ─── */
.gm-terra-ground {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 90px;
  background:
    radial-gradient(ellipse 120px 30px at 25% 35%, rgba(80, 110, 60, 0.6) 0%, transparent 60%),
    radial-gradient(ellipse 100px 25px at 65% 50%, rgba(70, 100, 55, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse 80px 20px at 88% 30%,  rgba(75, 105, 60, 0.5) 0%, transparent 60%),
    linear-gradient(180deg, transparent 0%, #2a3526 30%, #1f2a1c 100%);
}

/* ─── Header da seção ─── */
.gm-terra-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 0 50px;
}
.gm-terra-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(220, 200, 130, 0.4) 30%,
    rgba(220, 200, 130, 0.4) 70%,
    transparent 100%);
}
.gm-terra-title {
  font-family: "Cinzel", serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(220, 230, 200, 0.95);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
}

/* ─── Grid de placas de pedra (5 cards orgânicos) ─── */
.gm-terra-grid {
  position: relative;
  z-index: 5;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-content: center;
  gap: 24px;
  max-width: 1480px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px 100px; /* bottom padding pra não tocar no solo */
}

/* Cada card recebe rotação/translateY próprio (irregularidade orgânica) */
.gm-terra-card-wrap {
  position: relative;
}
.gm-terra-card-wrap:nth-child(1) { transform: translateY(-12px) rotate(-3deg); }
.gm-terra-card-wrap:nth-child(2) { transform: translateY(14px)  rotate( 2deg); }
.gm-terra-card-wrap:nth-child(3) { transform: translateY(-6px)  rotate(-1.2deg); }
.gm-terra-card-wrap:nth-child(4) { transform: translateY(20px)  rotate( 4deg); }
.gm-terra-card-wrap:nth-child(5) { transform: translateY(0)     rotate(-2deg); }

/* Vinhas saindo do topo do card */
.gm-card-vine {
  position: absolute;
  top: -35px;
  width: 2px;
  height: 60px;
  background: linear-gradient(180deg,
    transparent 0%,
    #2a4530 30%,
    #2a4530 100%);
  z-index: 6;
  animation: gm-vine-sway 7s ease-in-out infinite;
  transform-origin: top center;
}
.gm-card-vine-l { left: 15%; animation-delay: -1s; }
.gm-card-vine-r { right: 15%; animation-delay: -3s; height: 50px; }
.gm-card-vine::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: -6px;
  width: 14px;
  height: 9px;
  background: radial-gradient(ellipse, #2a4530 0%, #1a2f22 60%, transparent 100%);
  border-radius: 50%;
}

/* ─── Placa de pedra escura desgastada (combinando com a foto) ─── */
.gm-terra-card {
  position: relative;
  width: 100%;
  padding: 18px 14px 14px;
  text-align: center;
  background:
    /* CAMADA 5: Manchas de musgo VIVO (verde forte, contrasta na pedra escura) */
    radial-gradient(ellipse 42px 22px at 5% 7%,    rgba(110, 160, 75, 0.75) 0%, transparent 65%),
    radial-gradient(ellipse 34px 18px at 94% 10%,  rgba(95, 145, 65, 0.70) 0%, transparent 65%),
    radial-gradient(ellipse 28px 15px at 3% 58%,   rgba(115, 165, 80, 0.65) 0%, transparent 65%),
    radial-gradient(ellipse 38px 20px at 97% 72%,  rgba(100, 150, 70, 0.70) 0%, transparent 65%),
    radial-gradient(ellipse 30px 16px at 48% 96%,  rgba(110, 160, 75, 0.65) 0%, transparent 65%),
    radial-gradient(ellipse 22px 12px at 32% 22%,  rgba(125, 175, 90, 0.55) 0%, transparent 65%),
    radial-gradient(ellipse 18px 10px at 68% 34%,  rgba(115, 165, 80, 0.50) 0%, transparent 65%),
    /* CAMADA 4: Manchas de musgo seco (esverdeado-acinzentado) */
    radial-gradient(ellipse 24px 14px at 18% 70%,  rgba(155, 165, 95, 0.45) 0%, transparent 65%),
    radial-gradient(ellipse 22px 12px at 78% 18%,  rgba(160, 170, 100, 0.42) 0%, transparent 65%),
    /* CAMADA 3: Líquen branco-acinzentado (típico de pedra antiga) */
    radial-gradient(ellipse 20px 11px at 42% 28%,  rgba(190, 195, 175, 0.35) 0%, transparent 65%),
    radial-gradient(ellipse 16px 9px  at 60% 78%,  rgba(180, 185, 165, 0.30) 0%, transparent 65%),
    /* CAMADA 2: Manchas de erosão (escuras, profundas) */
    radial-gradient(circle at 28% 42%, rgba(8, 6, 4, 0.55) 0%, transparent 22%),
    radial-gradient(circle at 72% 58%, rgba(8, 6, 4, 0.50) 0%, transparent 25%),
    radial-gradient(circle at 50% 55%, rgba(15, 12, 8, 0.40) 0%, transparent 18%),
    radial-gradient(ellipse 55px 28px at 22% 90%, rgba(5, 4, 2, 0.55) 0%, transparent 50%),
    radial-gradient(ellipse 40px 20px at 80% 90%, rgba(5, 4, 2, 0.45) 0%, transparent 50%),
    /* CAMADA 1: Highlight direcional (luz vinda do canto sup-esquerdo, integrando com a foto) */
    radial-gradient(ellipse 90px 60px at 25% 20%, rgba(180, 175, 155, 0.25) 0%, transparent 60%),
    /* CAMADA 0: Base PEDRA CINZA-ESCURA DESGASTADA */
    linear-gradient(155deg,
      #5a544a 0%,    /* topo-esquerdo (luz) */
      #423d35 25%,
      #2e2924 55%,
      #1f1c17 80%,
      #14110d 100%); /* fundo-direito (sombra) */
  border: 2px solid rgba(15, 12, 8, 0.85);
  border-radius: 6px;
  box-shadow:
    /* Shadow externa MUITO profunda (cards grounded na cena) */
    0 18px 38px rgba(0, 0, 0, 0.75),
    0 8px 16px rgba(0, 0, 0, 0.55),
    0 3px 6px rgba(0, 0, 0, 0.4),
    /* Shadow interna pra profundidade da pedra */
    inset 0 -5px 9px rgba(0, 0, 0, 0.55),
    inset 0 -3px 5px rgba(0, 0, 0, 0.4),
    inset 4px -4px 8px rgba(0, 0, 0, 0.35),
    /* Highlight sutil no topo-esquerdo (mesma direção da luz da foto) */
    inset 0 2px 3px rgba(220, 210, 180, 0.20),
    inset 2px 0 3px rgba(220, 210, 180, 0.15);
  /* Borda irregular (cantos quebrados, cada um diferente) */
  clip-path: polygon(
    2% 0%, 50% 1%, 97% 0%, 100% 6%,
    99% 50%, 100% 95%, 96% 100%,
    50% 99%, 4% 100%, 0% 94%,
    1% 50%, 0% 4%
  );
  animation: gm-terra-creak 5s ease-in-out infinite;
}
@keyframes gm-terra-creak {
  0%, 100% { transform: rotate(0); }
  50%      { transform: rotate(0.4deg); }
}

/* Rachadura DIAGONAL na pedra escura (escuro profundo + leve highlight pra dar volume) */
.gm-terra-card::before {
  content: "";
  position: absolute;
  top: 25%;
  left: 14%;
  width: 2px;
  height: 45%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.85) 15%,
    rgba(0, 0, 0, 0.95) 50%,
    rgba(0, 0, 0, 0.85) 85%,
    transparent 100%);
  transform: rotate(18deg);
  box-shadow:
    1px 0 0.5px rgba(180, 170, 140, 0.18),
    -1px 0 0.5px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/* Segunda rachadura horizontal (mais sutil) */
.gm-terra-card::after {
  content: "";
  position: absolute;
  top: 65%;
  right: 18%;
  width: 30%;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.75) 30%,
    rgba(0, 0, 0, 0.85) 50%,
    rgba(0, 0, 0, 0.75) 70%,
    transparent 100%);
  transform: rotate(-8deg);
  box-shadow:
    0 1px 0.5px rgba(180, 170, 140, 0.12),
    0 -1px 0.5px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/* TEXTO ENGRAVADO em pedra escura: cor-creme com sombra escura embaixo (cavada) */
.gm-terra-rank {
  position: absolute;
  top: 8px;
  left: 12px;
  font-family: "Cinzel", serif;
  font-size: 11px;
  font-weight: 800;
  color: rgba(220, 210, 180, 0.85);
  letter-spacing: 1px;
  text-shadow:
    0 -1px 0 rgba(0, 0, 0, 0.8),
    0 1px 0 rgba(255, 240, 200, 0.15);
}
.gm-terra-card-top {
  display: flex;
  justify-content: center;
  margin: 8px 0 8px;
}
.gm-terra-av {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-size: cover;
  background-position: center top;
  background-color: #4a5240;
  border: 2px solid rgba(15, 12, 8, 0.85);
  box-shadow:
    0 0 0 2px rgba(120, 110, 80, 0.5),
    0 0 0 3px rgba(15, 12, 8, 0.7),
    inset 0 -2px 4px rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 16px;
  color: #d4cfa8;
}
.gm-terra-name {
  font-family: "Cinzel", serif;
  font-size: 12px;
  font-weight: 700;
  color: #ddd0a8;
  line-height: 1.2;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.5px;
  /* Efeito engravado em pedra escura: sombra cavada (escura embaixo, leve highlight em cima) */
  text-shadow:
    0 -1px 1px rgba(0, 0, 0, 0.95),
    0 1px 0 rgba(220, 210, 180, 0.15);
}
.gm-terra-team {
  font-family: "Rajdhani", sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(190, 180, 150, 0.75);
  margin-bottom: 8px;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.7);
}
.gm-terra-value {
  font-family: "Cinzel Decorative", "Cinzel", serif;
  font-size: 17px;
  font-weight: 900;
  color: #e8dcb0;
  letter-spacing: 0.5px;
  text-shadow:
    0 -2px 2px rgba(0, 0, 0, 1),
    0 -1px 0 rgba(0, 0, 0, 0.95),
    0 1px 0 rgba(220, 210, 180, 0.2);
  margin-bottom: 6px;
}
.gm-terra-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 9px;
  color: rgba(200, 190, 160, 0.85);
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.7);
}
.gm-terra-stats .gm-tier-badge {
  font-size: 8px;
  padding: 2px 7px;
  letter-spacing: 1px;
  border-radius: 8px;
  /* Selo bronze oxidado */
  background: linear-gradient(135deg, #b8804a 0%, #8a5a2a 100%) !important;
  color: #f0e0c0 !important;
  border: 1px solid rgba(60, 40, 20, 0.6) !important;
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, 0.3),
              0 1px 2px rgba(0, 0, 0, 0.4);
}

.gm-terra-empty {
  grid-column: span 5;
  text-align: center;
  font-family: "Rajdhani", sans-serif;
  color: rgba(220, 230, 200, 0.5);
  padding: 40px;
  font-size: 13px;
  letter-spacing: 1px;
}

/* Mobile/tablet — colapsa colunas */
@media (max-width: 1100px) {
  .gm-terra-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 18px;
  }
}
@media (max-width: 700px) {
  .gm-terra-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ZONA INFERNO (zerados) — Vulcão/lava com cards de obsidiana
   ═══════════════════════════════════════════════════════════════════════════ */

.gm-zone-inferno {
  width: 100%;
  padding: 40px 40px 60px;
  background:
    url('/static/img/inferno-bg.png') center center / cover no-repeat,
    #1a0808;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}

/* Transição suave do topo (terra termina em #2a3526 / verde-musgo escuro,
   então o topo do inferno começa escuro também e clareia pra mostrar a foto) */
.gm-zone-inferno::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12%;
  background: linear-gradient(180deg,
    #1a1a16 0%,
    rgba(40, 25, 18, 0.5) 60%,
    transparent 100%);
  pointer-events: none;
  z-index: 7;
}

/* Container das camadas de bg (atrás do conteúdo) */
.gm-inferno-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* ─── Bolhas de lava pulsando (glows nas zonas da foto que têm lava) ─── */
.gm-lava-bubble {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(255, 230, 130, 0.65) 0%,
    rgba(255, 130, 30, 0.45) 30%,
    rgba(220, 60, 10, 0.25) 60%,
    transparent 100%);
  filter: blur(8px);
  animation: gm-lava-pulse 2.4s ease-in-out infinite;
  mix-blend-mode: screen;
}
.gm-lb-1 { left: 48%; top: 70%;  width: 130px; height: 130px; animation-delay: 0s; }
.gm-lb-2 { left: 18%; top: 65%;  width: 90px;  height: 90px;  animation-delay: -0.7s; }
.gm-lb-3 { left: 75%; top: 72%;  width: 100px; height: 100px; animation-delay: -1.4s; }
.gm-lb-4 { left: 60%; top: 88%;  width: 110px; height: 80px;  animation-delay: -1s; }
.gm-lb-5 { left: 12%; top: 82%;  width: 80px;  height: 60px;  animation-delay: -2s; }
@keyframes gm-lava-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50%      { opacity: 1;    transform: scale(1.08); }
}

/* ─── Colunas de fumaça subindo da lava ─── */
.gm-smoke-column {
  position: absolute;
  width: 60px;
  height: 380px;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(40, 30, 25, 0.4) 30%,
    rgba(60, 40, 35, 0.55) 60%,
    rgba(80, 55, 45, 0.45) 90%,
    transparent 100%);
  filter: blur(8px);
  border-radius: 30px;
  mix-blend-mode: multiply;
}
.gm-sc-1 { left: 50%; bottom: 22%; animation: gm-smoke-rise 18s ease-in-out infinite; }
.gm-sc-2 { left: 22%; bottom: 18%; height: 320px; opacity: 0.7;
  animation: gm-smoke-rise 24s ease-in-out infinite; animation-delay: -8s; }
.gm-sc-3 { left: 75%; bottom: 20%; height: 350px; opacity: 0.85;
  animation: gm-smoke-rise 21s ease-in-out infinite; animation-delay: -12s; }
@keyframes gm-smoke-rise {
  0%   { transform: translateY(0) scaleX(1)  scaleY(1);   opacity: 0.5; }
  50%  { transform: translateY(-30px) scaleX(1.3) scaleY(1.1); opacity: 0.85; }
  100% { transform: translateY(-60px) scaleX(0.9) scaleY(0.95); opacity: 0; }
}

/* ─── Heat shimmer (distorção sutil nas áreas próximas à lava) ─── */
.gm-heat-shimmer {
  position: absolute;
  inset: 50% 0 0 0;
  pointer-events: none;
  backdrop-filter: blur(0.4px);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.7) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.7) 100%);
  animation: gm-heat-wave 4s ease-in-out infinite;
}
@keyframes gm-heat-wave {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.005); }
}

/* ─── Brasas subindo (gerados via JS, partículas individuais) ─── */
.gm-embers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.gm-ember {
  position: absolute;
  bottom: 0;
  width: var(--sz);
  height: var(--sz);
  border-radius: 50%;
  background: var(--col);
  box-shadow: 0 0 var(--glow) var(--col);
  filter: blur(0.3px);
  animation: gm-ember-rise var(--d) ease-out infinite var(--delay);
  opacity: 0;
}
@keyframes gm-ember-rise {
  0%   { transform: translate(0, 0)              scale(1);   opacity: 0; }
  10%  { opacity: 1; }
  60%  { opacity: 0.85; }
  100% { transform: translate(var(--drift), var(--y)) scale(0.4); opacity: 0; }
}

/* ─── Cinzas voando (drift mais lento, partículas escuras) ─── */
.gm-ashes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.gm-ash {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(40, 30, 25, 0.7);
  animation: gm-ash-float var(--d) ease-in-out infinite var(--delay);
}
@keyframes gm-ash-float {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(15px, -20px); }
  50%      { transform: translate(-10px, -35px); }
  75%      { transform: translate(8px, -15px); }
}

/* ─── Demônios animados (escalando, pulando) ─── */
.gm-demon {
  position: absolute;
  font-size: 24px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7))
          drop-shadow(0 0 8px rgba(255, 100, 40, 0.4));
  pointer-events: none;
  z-index: 3;
}
.gm-demon-1 {
  left: 8%; bottom: 32%;
  animation: gm-demon-walk 12s ease-in-out infinite;
}
.gm-demon-2 {
  right: 12%; bottom: 38%;
  animation: gm-demon-jump 6s ease-in-out infinite;
  animation-delay: -3s;
}
.gm-demon-3 {
  left: 38%; bottom: 28%;
  animation: gm-demon-climb 14s linear infinite;
  animation-delay: -7s;
  font-size: 20px;
}
@keyframes gm-demon-walk {
  0%, 100% { transform: translateX(0)     rotate(-5deg) scaleX(1); }
  25%      { transform: translateX(40px)  rotate(5deg)  scaleX(1); }
  50%      { transform: translateX(70px)  rotate(-3deg) scaleX(-1); }
  75%      { transform: translateX(30px)  rotate(2deg)  scaleX(-1); }
}
@keyframes gm-demon-jump {
  0%, 100% { transform: translateY(0)    rotate(0); }
  30%      { transform: translateY(-25px) rotate(-15deg); }
  60%      { transform: translateY(0)    rotate(5deg); }
}
@keyframes gm-demon-climb {
  0%   { transform: translateY(0)    rotate(-3deg); }
  50%  { transform: translateY(-50px) rotate(3deg); }
  100% { transform: translateY(0)    rotate(-3deg); }
}

/* ─── Lava splash de boas-vindas (disparado ao snapar pra zona) ─── */
.gm-lava-welcome {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
}
.gm-lava-welcome.active {
  animation: gm-welcome-show 4s ease-out forwards;
}
@keyframes gm-welcome-show {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Gota grande caindo */
.gm-lava-drop {
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 38px;
  background: radial-gradient(ellipse at 50% 35%,
    #fff5b0 0%, #ffd060 20%, #ff8030 50%, #c43010 100%);
  border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
  filter: blur(0.5px) drop-shadow(0 0 10px rgba(255, 130, 40, 0.8));
  box-shadow: 0 0 20px rgba(255, 100, 40, 0.6);
}
.gm-lava-welcome.active .gm-lava-drop {
  animation: gm-drop-fall 1s cubic-bezier(0.5, 0, 0.8, 1) forwards;
}
@keyframes gm-drop-fall {
  0%   { top: -80px; opacity: 1; }
  90%  { top: 60vh;  opacity: 1; }
  100% { top: 65vh;  opacity: 0; }
}

/* Splash (8 partículas explodindo do impacto) */
.gm-lava-splash {
  position: absolute;
  top: 60vh;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
}
.gm-lava-splash span {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle,
    #ffe070 0%, #ff8030 50%, #c43010 100%);
  box-shadow: 0 0 12px rgba(255, 130, 40, 0.8);
  opacity: 0;
}
.gm-lava-welcome.active .gm-lava-splash span {
  animation: gm-splash-burst 1.4s cubic-bezier(0.3, 0, 0.7, 1) forwards;
  animation-delay: 0.85s;
}
.gm-lava-splash span:nth-child(1) { --sx: -120px; --sy: -40px; }
.gm-lava-splash span:nth-child(2) { --sx: -80px;  --sy: -90px; }
.gm-lava-splash span:nth-child(3) { --sx: -30px;  --sy: -100px; }
.gm-lava-splash span:nth-child(4) { --sx:  30px;  --sy: -100px; }
.gm-lava-splash span:nth-child(5) { --sx:  80px;  --sy: -90px; }
.gm-lava-splash span:nth-child(6) { --sx:  120px; --sy: -40px; }
.gm-lava-splash span:nth-child(7) { --sx: -160px; --sy: -10px; }
.gm-lava-splash span:nth-child(8) { --sx:  160px; --sy: -10px; }
@keyframes gm-splash-burst {
  0%   { transform: translate(0, 0) scale(0); opacity: 0; }
  15%  { transform: translate(0, 0) scale(1.2); opacity: 1; }
  100% { transform: translate(var(--sx), var(--sy)) scale(0.3); opacity: 0; }
}

/* ─── Vignette pulsante vermelha (cantos respirando calor) ─── */
.gm-inferno-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  background:
    radial-gradient(ellipse 130% 110% at 50% 50%,
      transparent 50%,
      rgba(120, 30, 10, 0.35) 90%,
      rgba(60, 10, 5, 0.55) 100%);
  animation: gm-inferno-breathe 4.5s ease-in-out infinite;
}
@keyframes gm-inferno-breathe {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* ─── Header da seção ─── */
.gm-inferno-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 0 50px;
}
.gm-inferno-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 130, 40, 0.5) 30%,
    rgba(255, 130, 40, 0.5) 70%,
    transparent 100%);
}
.gm-inferno-title {
  font-family: "Cinzel", serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #ffe0b0;
  text-shadow:
    0 0 10px rgba(255, 130, 40, 0.8),
    0 2px 6px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
}

/* ─── Grid auto-fit (adapta + centraliza) ─── */
.gm-inferno-grid {
  position: relative;
  z-index: 5;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
  justify-content: center;
  align-content: center;
  gap: 24px;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  padding: 20px 0;
}

/* ── Modo TINY (1-3 zerados): cards bem grandes, em destaque ── */
.gm-inferno-grid.gm-inferno-grid-tiny {
  grid-template-columns: repeat(auto-fit, minmax(280px, 340px));
  gap: 36px;
}
.gm-inferno-grid.gm-inferno-grid-tiny .gm-inferno-card {
  padding: 26px 20px 22px;
}
.gm-inferno-grid.gm-inferno-grid-tiny .gm-inferno-rank {
  font-size: 13px;
  top: 10px;
  left: 14px;
}
.gm-inferno-grid.gm-inferno-grid-tiny .gm-inferno-av {
  width: 76px;
  height: 76px;
  font-size: 22px;
}
.gm-inferno-grid.gm-inferno-grid-tiny .gm-inferno-name {
  font-size: 15px;
  margin-bottom: 4px;
}
.gm-inferno-grid.gm-inferno-grid-tiny .gm-inferno-team {
  font-size: 10px;
  margin-bottom: 10px;
}
.gm-inferno-grid.gm-inferno-grid-tiny .gm-inferno-status {
  font-size: 11px;
}
/* Cracks proporcionalmente maiores */
.gm-inferno-grid.gm-inferno-grid-tiny .gm-inferno-card::before {
  width: 3px;
}
.gm-inferno-grid.gm-inferno-grid-tiny .gm-inferno-card::after {
  height: 2.5px;
}

/* ── Modo FEW (4-6 zerados): cards um pouco maiores ── */
.gm-inferno-grid.gm-inferno-grid-few {
  grid-template-columns: repeat(auto-fit, minmax(230px, 270px));
  gap: 28px;
}
.gm-inferno-grid.gm-inferno-grid-few .gm-inferno-card {
  padding: 20px 14px 16px;
}
.gm-inferno-grid.gm-inferno-grid-few .gm-inferno-av {
  width: 60px;
  height: 60px;
  font-size: 17px;
}
.gm-inferno-grid.gm-inferno-grid-few .gm-inferno-name {
  font-size: 13px;
}

/* ── Modo MANY (14+ zerados): cards menores pra caber mais por linha ── */
.gm-inferno-grid.gm-inferno-grid-many {
  grid-template-columns: repeat(auto-fit, minmax(180px, 210px));
  gap: 18px;
}
.gm-inferno-grid.gm-inferno-grid-many .gm-inferno-card {
  padding: 14px 10px 10px;
}
.gm-inferno-grid.gm-inferno-grid-many .gm-inferno-av {
  width: 46px;
  height: 46px;
  font-size: 13px;
}
.gm-inferno-grid.gm-inferno-grid-many .gm-inferno-name {
  font-size: 11px;
}
.gm-inferno-grid.gm-inferno-grid-many .gm-inferno-team {
  font-size: 8px;
  margin-bottom: 4px;
}

/* ─── Empty state (todo mundo saiu do inferno) ─── */
.gm-inferno-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  font-family: "Cinzel", serif;
  color: #ffe0b0;
  text-align: center;
  text-shadow: 0 0 15px rgba(255, 130, 40, 0.7);
}
.gm-inferno-empty-icon { font-size: 56px; margin-bottom: 16px; }
.gm-inferno-empty-title { font-size: 22px; letter-spacing: 3px; font-weight: 800; }
.gm-inferno-empty-sub {
  font-family: "Rajdhani", sans-serif;
  font-size: 13px;
  letter-spacing: 2px;
  margin-top: 6px;
  color: rgba(255, 200, 150, 0.7);
}

/* ─── Card de OBSIDIANA com rachaduras incandescentes ─── */
.gm-inferno-card-wrap {
  position: relative;
}
.gm-inferno-card {
  position: relative;
  width: 100%;
  padding: 16px 12px 12px;
  text-align: center;
  background:
    /* Manchas de calor (zonas levemente alaranjadas — pedra ainda quente) */
    radial-gradient(ellipse 30px 16px at 22% 28%, rgba(255, 80, 30, 0.18) 0%, transparent 65%),
    radial-gradient(ellipse 24px 14px at 78% 65%, rgba(255, 100, 40, 0.16) 0%, transparent 65%),
    /* Reflexo metálico (obsidiana brilhante) */
    radial-gradient(ellipse 70px 30px at 30% 15%, rgba(180, 170, 200, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse 50px 25px at 70% 40%, rgba(150, 140, 170, 0.10) 0%, transparent 60%),
    /* Base obsidiana (preto-azulado vidro vulcânico) */
    linear-gradient(155deg,
      #2a2030 0%,
      #1a1218 30%,
      #0e0a14 65%,
      #050308 100%);
  border: 1.5px solid rgba(80, 30, 15, 0.85);
  border-radius: 4px;
  box-shadow:
    /* Sombra externa profunda */
    0 14px 30px rgba(0, 0, 0, 0.85),
    0 6px 12px rgba(0, 0, 0, 0.6),
    /* GLOW VERMELHO QUENTE atrás da placa (parecendo brasa) */
    0 8px 20px rgba(255, 80, 20, 0.35),
    0 0 30px rgba(255, 60, 15, 0.22),
    /* Sombra interna pra profundidade */
    inset 0 -3px 6px rgba(0, 0, 0, 0.65),
    inset 0 2px 3px rgba(180, 170, 200, 0.18),
    inset 0 0 8px rgba(0, 0, 0, 0.5);
  /* Cantos quebrados/queimados (clip-path mais agressivo que terra) */
  clip-path: polygon(
    0% 4%, 4% 0%, 48% 1%, 52% 0%, 96% 1%, 100% 5%,
    99% 50%, 100% 96%, 96% 100%,
    52% 99%, 48% 100%, 4% 99%, 0% 95%,
    1% 50%, 0% 4%
  );
  animation: gm-inferno-tremor 4s ease-in-out infinite;
}
@keyframes gm-inferno-tremor {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  20%      { transform: translate(0.5px, -0.3px) rotate(0.15deg); }
  40%      { transform: translate(-0.4px, 0.4px) rotate(-0.12deg); }
  60%      { transform: translate(0.3px, 0.5px) rotate(0.1deg); }
  80%      { transform: translate(-0.3px, -0.2px) rotate(-0.08deg); }
}

/* RACHADURAS INCANDESCENTES (luz vermelho-laranja pulsando através das fissuras) */
.gm-inferno-card::before {
  content: "";
  position: absolute;
  top: 18%;
  left: 12%;
  width: 2.5px;
  height: 60%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 80, 20, 0.7) 10%,
    rgba(255, 200, 80, 1) 35%,
    rgba(255, 130, 30, 0.95) 60%,
    rgba(255, 80, 20, 0.7) 90%,
    transparent 100%);
  transform: rotate(15deg);
  filter: blur(0.4px);
  box-shadow:
    0 0 8px rgba(255, 130, 40, 0.9),
    0 0 16px rgba(255, 100, 30, 0.6);
  animation: gm-crack-pulse 2.2s ease-in-out infinite;
  pointer-events: none;
}
.gm-inferno-card::after {
  content: "";
  position: absolute;
  top: 55%;
  right: 15%;
  width: 35%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 80, 20, 0.7) 15%,
    rgba(255, 200, 80, 0.95) 50%,
    rgba(255, 80, 20, 0.7) 85%,
    transparent 100%);
  transform: rotate(-12deg);
  filter: blur(0.3px);
  box-shadow:
    0 0 6px rgba(255, 130, 40, 0.8),
    0 0 12px rgba(255, 100, 30, 0.5);
  animation: gm-crack-pulse 2.8s ease-in-out infinite;
  animation-delay: -1s;
  pointer-events: none;
}
@keyframes gm-crack-pulse {
  0%, 100% { opacity: 0.55; filter: blur(0.5px) brightness(0.85); }
  50%      { opacity: 1;    filter: blur(0.3px) brightness(1.25); }
}

/* TEXTO em pedra obsidiana — branco-marfim com glow vermelho sutil */
.gm-inferno-rank {
  position: absolute;
  top: 7px;
  left: 10px;
  font-family: "Cinzel", serif;
  font-size: 11px;
  font-weight: 800;
  color: rgba(255, 200, 150, 0.85);
  letter-spacing: 1px;
  text-shadow:
    0 0 4px rgba(255, 100, 30, 0.7),
    0 -1px 0 rgba(0, 0, 0, 0.9);
}
.gm-inferno-card-top {
  display: flex;
  justify-content: center;
  margin: 6px 0 8px;
}
.gm-inferno-av {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-size: cover;
  background-position: center top;
  background-color: #2a1818;
  border: 2px solid rgba(40, 15, 10, 0.95);
  box-shadow:
    0 0 0 2px rgba(120, 50, 20, 0.5),
    0 0 0 3px rgba(20, 8, 5, 0.9),
    0 0 12px rgba(255, 100, 30, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 14px;
  color: #ffd0a0;
}
.gm-inferno-name {
  font-family: "Cinzel", serif;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff0d0;
  line-height: 1.2;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.3px;
  text-shadow:
    0 0 6px rgba(255, 130, 40, 0.7),
    0 -1px 1px rgba(0, 0, 0, 0.95);
}
.gm-inferno-team {
  font-family: "Rajdhani", sans-serif;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 180, 120, 0.7);
  margin-bottom: 6px;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.85);
}
.gm-inferno-status {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  color: rgba(255, 100, 50, 0.95);
  text-shadow:
    0 0 8px rgba(255, 80, 20, 0.8),
    0 -1px 1px rgba(0, 0, 0, 0.9);
}
.gm-inferno-status::before {
  content: "✕ ";
  margin-right: 4px;
}

/* Mobile/tablet — colapsa pra menos colunas (auto-fit já lida com isso) */

/* ── Ligações: Visão Geral (modernizada) ─────────────────────── */
.lig-visao-header {
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
  padding: 6px 10px;
  margin: -6px -10px;
  border-radius: 10px;
}
.lig-visao-header:hover {
  background: rgba(255, 255, 255, 0.025);
}
.lig-visao-toggle {
  font-size: 14px;
  color: var(--cyan);
  transition: transform 0.25s ease;
  filter: drop-shadow(0 0 6px rgba(0, 242, 254, 0.5));
}
.lig-visao-header.collapsed .lig-visao-toggle {
  transform: rotate(-90deg);
}
.lig-visao-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 20px;
  animation: lig-fade-in 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.lig-visao-grid.collapsed {
  display: none;
}
@keyframes lig-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.lig-visao-box {
  background: var(--bg-card);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 24px 22px 22px;
  position: relative;
  overflow: hidden;
  transition:
    border-color 0.25s,
    transform 0.2s,
    box-shadow 0.25s;
}
.lig-visao-box:hover {
  border-color: rgba(202, 153, 30, 0.35);
  box-shadow: 0 4px 18px rgba(0, 2, 45, 0.06);
}
.lig-visao-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(202, 153, 30, 0.55),
    transparent
  );
}
.lig-visao-wide {
  grid-column: 1 / -1;
}
.lig-visao-titulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}
.lig-visao-titulo::before {
  content: "";
  width: 3px;
  height: 14px;
  background: var(--cyan);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--cyan);
}
.lig-visao-subtitulo {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.lig-grafico {
  width: 100%;
}
.lig-grafico svg {
  display: block;
  max-width: 100%;
  height: auto;
}
.lig-grafico-empty {
  color: var(--text-muted);
  font-size: 13px;
  padding: 28px 0;
  text-align: center;
}

/* ── Donut ─────────────────────────────────────────────────── */
.lig-donut-wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.lig-donut-svg {
  filter: drop-shadow(0 2px 10px rgba(0, 2, 45, 0.08));
  flex-shrink: 0;
}
.lig-donut-arc {
  transition: opacity 0.2s;
}
.lig-donut-arc:hover {
  opacity: 0.85;
}
.lig-donut-center {
  fill: var(--text-main);
  font-size: 30px;
  font-weight: 800;
  font-family: ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.02em;
}
.lig-donut-center-sub {
  fill: var(--text-muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
}
.lig-legenda {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--text-dark);
  flex: 1;
  min-width: 150px;
}
.lig-legenda-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 7px;
  transition: background 0.15s;
}
.lig-legenda-item:hover {
  background: rgba(0, 2, 45, 0.04);
}
.lig-legenda-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
  flex-shrink: 0;
}
.lig-legenda-nome {
  font-weight: 500;
}
.lig-legenda-pct {
  margin-left: auto;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 12px;
}

/* ── Histograma ────────────────────────────────────────────── */
.lig-bar-row {
  display: grid;
  grid-template-columns: 90px 1fr 60px;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 12px;
}
.lig-bar-row.is-peak .lig-bar-label,
.lig-bar-row.is-peak .lig-bar-count {
  color: var(--cyan);
}
.lig-bar-label {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 500;
}
.lig-bar-track {
  background: rgba(0, 2, 45, 0.06);
  border-radius: 6px;
  height: 10px;
  overflow: hidden;
  position: relative;
}
.lig-bar-fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  box-shadow:
    0 0 8px rgba(202, 153, 30, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  animation: lig-bar-grow 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.lig-bar-fill.warm {
  background: linear-gradient(90deg, var(--orange), var(--red));
  box-shadow:
    0 0 10px rgba(255, 145, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
@keyframes lig-bar-grow {
  from {
    width: 0;
  }
}
.lig-bar-count {
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 13px;
}

/* ── Heatmap ───────────────────────────────────────────────── */
.lig-heatmap-wrap {
  overflow-x: auto;
  padding-bottom: 4px;
}
.lig-heatmap {
  border-collapse: separate;
  border-spacing: 3px;
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin: 0 auto;
}
.lig-heatmap th,
.lig-heatmap td {
  text-align: center;
  font-weight: normal;
}
.lig-heatmap th.hour-h {
  width: 28px;
  height: 22px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 500;
}
.lig-heatmap td.lig-day-label {
  padding-right: 12px;
  color: var(--text-dark);
  text-align: right;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.lig-heatmap-cell {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(0, 2, 45, 0.05);
  cursor: default;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.lig-heatmap-cell.has-val {
  color: var(--text-main);
  font-weight: 700;
  font-size: 10px;
}
.lig-heatmap-cell:hover {
  transform: scale(1.18);
  z-index: 2;
  position: relative;
  box-shadow:
    0 0 12px rgba(202, 153, 30, 0.45),
    0 0 0 1px rgba(0, 2, 45, 0.12);
}
.lig-heatmap-cell.peak {
  box-shadow:
    0 0 0 2px rgba(202, 153, 30, 0.7),
    0 0 12px rgba(202, 153, 30, 0.45);
}
.lig-heatmap-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  justify-content: center;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}
.lig-heatmap-legend-grad {
  width: 120px;
  height: 8px;
  background: linear-gradient(
    90deg,
    rgba(202, 153, 30, 0.15),
    rgba(202, 153, 30, 0.5),
    rgba(202, 153, 30, 1)
  );
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(202, 153, 30, 0.25);
}
.lig-heatmap-resumo {
  display: flex;
  gap: 18px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--gray-200);
  flex-wrap: wrap;
  justify-content: center;
  font-size: 12px;
  color: var(--text-muted);
}
.lig-heatmap-resumo strong {
  color: var(--cyan);
  font-weight: 700;
}

/* ── Top falhas ────────────────────────────────────────────── */
.lig-falha-row {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  margin-bottom: 7px;
  font-size: 13px;
  color: var(--text-dark);
  background: rgba(0, 2, 45, 0.025);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  transition:
    background 0.15s,
    border-color 0.15s,
    transform 0.15s;
}
.lig-falha-row:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 145, 0, 0.2);
  transform: translateX(2px);
}
.lig-falha-icon {
  font-size: 18px;
  text-align: center;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 145, 0, 0.08);
}
.lig-falha-meio {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.lig-falha-nome {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  color: var(--text-main);
}
.lig-falha-mini-bar {
  width: 100%;
  height: 4px;
  background: rgba(0, 2, 45, 0.06);
  border-radius: 2px;
  overflow: hidden;
}
.lig-falha-mini-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--orange), var(--red));
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(255, 145, 0, 0.4);
  animation: lig-bar-grow 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.lig-falha-count {
  color: var(--text-main);
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  min-width: 32px;
}
.lig-falha-pct {
  color: var(--text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 38px;
  text-align: right;
}

@media (max-width: 768px) {
  .lig-visao-grid {
    grid-template-columns: 1fr;
  }
  .lig-visao-box {
    padding: 18px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GAMIFICADO — mantém tema dark/cosmic (escopo restrito à aba)
   ═══════════════════════════════════════════════════════════════════════════ */
#aba-gamificado {
  /* Reescopa as variáveis dark originais para que toda a aba renderize como antes */
  --bg-body: #0f1115;
  --bg-header: #16181f;
  --bg-card: #1c1e26;
  --bg-input: #13141a;

  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-dark: #cbd5e1;

  --cyan: #00f2fe;
  --cyan-light: rgba(0, 242, 254, 0.1);
  --green: #00e676;
  --green-light: rgba(0, 230, 118, 0.1);
  --orange: #ff9100;
  --orange-light: rgba(255, 145, 0, 0.1);
  --red: #ff3d00;
  --red-light: rgba(255, 61, 0, 0.1);
  --purple: #b042ff;
  --purple-light: rgba(176, 66, 255, 0.1);

  --blue: var(--cyan);
  --blue-dark: #00acc1;
  --blue-light: var(--cyan-light);
  --amber: var(--orange);
  --amber-light: var(--orange-light);
  --gray-50: var(--bg-input);
  --gray-100: var(--bg-body);
  --gray-200: rgba(255, 255, 255, 0.08);
  --gray-400: var(--text-muted);
  --gray-600: var(--text-dark);
  --gray-900: var(--text-main);

  --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 15px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 15px 35px rgba(0, 0, 0, 0.5);
  --glow-cyan: 0 0 10px rgba(0, 242, 254, 0.2);

  background: var(--bg-body);
  color: var(--text-main);
}

/* ── Leads Qualificados · Fluxo Diário (lista de dias) ──────────── */

.lqd-dias-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lqd-dia-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.lqd-dia-card:hover {
  border-color: rgba(202, 153, 30, 0.35);
  box-shadow: 0 4px 14px rgba(0, 2, 45, 0.08);
}
.lqd-dia-card.is-fds {
  background: rgba(0, 2, 45, 0.02);
}

.lqd-dia-cabecalho {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
}

.lqd-dia-data {
  min-width: 110px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.lqd-dia-dia-semana {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.1em;
}
.lqd-dia-numero {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.lqd-dia-metricas {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.lqd-met {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 6px 9px;
  border-radius: 8px;
  background: rgba(0, 2, 45, 0.03);
  border: 1px solid transparent;
  transition: border-color 0.15s, transform 0.15s;
}
.lqd-met-icon {
  font-size: 13px;
  margin-bottom: 4px;
  opacity: 0.75;
  line-height: 1;
}
.lqd-met-val {
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-main);
  line-height: 1;
}
.lqd-met-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 700;
  margin-top: 4px;
}

/* Variações de cor por métrica */
.lqd-met-conv  { background: rgba(22, 163, 74, 0.08); }
.lqd-met-conv .lqd-met-val { color: #0e7a3a; }

.lqd-met-decl  { background: rgba(217, 64, 64, 0.08); }
.lqd-met-decl .lqd-met-val { color: #8e1b1b; }

.lqd-met-fluxo { background: rgba(202, 153, 30, 0.10); }
.lqd-met-fluxo .lqd-met-val { color: #8a6b16; }

.lqd-met-reun  { background: rgba(107, 70, 193, 0.08); }
.lqd-met-reun .lqd-met-val { color: #6b46c1; }

.lqd-met-pos18 { background: rgba(0, 2, 45, 0.04); }
.lqd-met-pos18 .lqd-met-val { color: #4a5568; }

.lqd-dia-taxa {
  min-width: 86px;
  text-align: center;
  padding: 4px 14px;
  border-left: 1px solid var(--gray-200);
}
.lqd-taxa-pct {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.lqd-taxa-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 700;
  margin-top: 5px;
}

.lqd-dia-caret {
  font-size: 12px;
  color: var(--text-muted);
  width: 14px;
  text-align: center;
  transition: color 0.15s;
}
.lqd-dia-card:hover .lqd-dia-caret {
  color: var(--gold);
}

.lqd-fontes-linha {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  padding: 12px 18px 14px;
  background: linear-gradient(180deg, rgba(0, 2, 45, 0.025), transparent);
  border-top: 1px solid var(--gray-200);
}
.lqd-fonte-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: #fff;
  border: 1px solid rgba(0, 2, 45, 0.18);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.5;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.12s;
  user-select: none;
}
.lqd-fonte-pill:hover {
  background: rgba(0, 2, 45, 0.04);
  border-color: rgba(0, 2, 45, 0.4);
  transform: translateY(-1px);
}
.lqd-fonte-pill.is-active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.lqd-fonte-pill.is-active .lqd-fonte-qtd {
  color: #fff;
  border-left-color: rgba(255, 255, 255, 0.35);
}
.lqd-fonte-nome {
  white-space: nowrap;
}
.lqd-fonte-qtd {
  font-weight: 800;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
  padding-left: 8px;
  border-left: 1px solid rgba(0, 2, 45, 0.15);
  line-height: 1;
}

.lqd-filtro-ativo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 12px;
  background: rgba(0, 2, 45, 0.06);
  border-left: 3px solid var(--navy);
  border-radius: 4px;
  font-size: 12px;
  color: var(--navy);
}
.lqd-filtro-ativo strong {
  font-weight: 700;
}
.lqd-filtro-limpar {
  margin-left: auto;
  padding: 3px 10px;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.lqd-filtro-limpar:hover {
  background: var(--navy-2);
}

.lqd-card-fonte {
  display: inline-block;
  font-size: 10px;
  color: #4a5568;
  background: rgba(0, 2, 45, 0.05);
  padding: 2px 7px;
  border-radius: 4px;
  margin-bottom: 8px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lqd-dia-barra-stack {
  display: flex;
  height: 4px;
  background: rgba(0, 2, 45, 0.04);
  overflow: hidden;
}
.lqd-barra-seg {
  height: 100%;
  transition: width 0.4s ease-out;
}
.lqd-barra-conv  { background: #16a34a; }
.lqd-barra-fluxo { background: #CA991E; }
.lqd-barra-decl  { background: #d94040; }

.lqd-detalhe-wrap {
  margin-top: -6px;
  margin-bottom: 4px;
}
.lqd-detalhe-conteudo {
  padding: 18px 22px;
  background: rgba(0, 2, 45, 0.025);
  border: 1px solid var(--gray-200);
  border-top: none;
  border-radius: 0 0 10px 10px;
}

@media (max-width: 1100px) {
  .lqd-dia-metricas {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Leads Qualificados · Fluxo Diário (kanban) ─────────────────── */

.lqd-sumario {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-200);
}
.lqd-sum-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-main);
}
.lqd-sum-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
}
.lqd-sum-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 10px;
}
.lqd-sum-num {
  font-weight: 800;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.lqd-kanban {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 2px 14px;
  scroll-behavior: smooth;
  align-items: flex-start;
}

.lqd-col {
  flex: 0 0 280px;
  background: rgba(0, 2, 45, 0.025);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 540px;
}

.lqd-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--gray-200);
}
.lqd-col-titulo {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lqd-col-count {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

/* Cores por classe */
.lqd-col-fluxo .lqd-col-header {
  background: linear-gradient(180deg, #fbecc7, #f5dea0);
  color: #8a6b16;
}
.lqd-col-convertido .lqd-col-header {
  background: linear-gradient(180deg, #d4f0e0, #b9e6cb);
  color: #0e7a3a;
}
.lqd-col-declinado .lqd-col-header {
  background: linear-gradient(180deg, #fbd8d8, #f5b9b9);
  color: #8e1b1b;
}

.lqd-col-cards {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  flex: 1;
}

.lqd-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-left: 3px solid;
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 1px 2px rgba(0, 2, 45, 0.04);
  transition: transform 0.15s, box-shadow 0.15s;
}
.lqd-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 2, 45, 0.1);
}
.lqd-col-fluxo .lqd-card      { border-left-color: #CA991E; }
.lqd-col-convertido .lqd-card { border-left-color: #16a34a; }
.lqd-col-declinado .lqd-card  { border-left-color: #d94040; }

.lqd-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.lqd-card-hora {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.lqd-card-id {
  font-size: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-muted);
  background: rgba(0, 2, 45, 0.05);
  padding: 1px 6px;
  border-radius: 4px;
}
.lqd-card-titulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 8px;
  line-height: 1.3;
  word-break: break-word;
}
.lqd-card-bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.lqd-card-qual {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.lqd-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.lqd-badge-reuniao {
  background: rgba(22, 163, 74, 0.12);
  color: #0e7a3a;
}
.lqd-badge-reuniao-nao {
  background: rgba(217, 64, 64, 0.1);
  color: #8e1b1b;
}
.lqd-badge-reuniao-rem {
  background: rgba(208, 120, 40, 0.12);
  color: #8a4818;
}


/* ── Cards das seções Ligações/Atividade dentro do Gerencial ── */
.glig-cl {
  font-size: 11px;
  color: rgba(0, 2, 45, 0.6);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
  font-weight: 600;
}
.glig-cv {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

/* ═══════════════ Gerencial — layout corporativo ═══════════════ */
.ger-head {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; cursor: pointer; user-select: none;
  border-left: 3px solid #ca991e;
  background: linear-gradient(90deg, rgba(202, 153, 30, 0.07), transparent 55%);
  border-radius: 8px;
}
.ger-head .ger-title { font-size: 13px; font-weight: 700; color: #00022d; letter-spacing: 0.4px; text-transform: uppercase; }
.ger-head .ger-badge { font-size: 11px; font-weight: 700; color: #00022d; background: rgba(0, 2, 45, 0.06); border-radius: 20px; padding: 2px 10px; }
.ger-head .ger-chevron { margin-left: auto; font-size: 12px; color: rgba(0, 2, 45, 0.4); }
.ger-head[data-vazio="1"] { cursor: default; border-left-color: rgba(0, 2, 45, 0.1); background: none; }
.ger-head[data-vazio="1"] .ger-title { color: rgba(0, 2, 45, 0.38); }
.ger-head[data-vazio="1"] .ger-chevron { display: none; }
.ger-head[data-vazio="1"] .ger-badge { background: rgba(0, 2, 45, 0.04); color: rgba(0, 2, 45, 0.4); }
.ger-body { padding: 14px 2px 2px; }
.ger-empty { padding: 16px 6px; color: rgba(0, 2, 45, 0.45); font-size: 13px; text-align: left; }
.ger-grp-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(0, 2, 45, 0.45); margin: 8px 2px 8px; }
.ger-subhead { display: flex; align-items: center; gap: 10px; padding: 9px 4px; cursor: pointer; user-select: none; border-top: 1px solid rgba(0, 2, 45, 0.06); margin-top: 8px; }
.ger-subhead .ger-subtitle { font-size: 12px; font-weight: 700; color: rgba(0, 2, 45, 0.6); letter-spacing: 0.3px; }
.ger-subhead .ger-badge { font-size: 10px; font-weight: 700; color: rgba(0, 2, 45, 0.55); background: rgba(0, 2, 45, 0.05); border-radius: 20px; padding: 1px 8px; }
.ger-subhead .ger-chevron { margin-left: auto; font-size: 11px; color: rgba(0, 2, 45, 0.4); }
.ger-subhead[data-vazio="1"] { cursor: default; }
.ger-subhead[data-vazio="1"] .ger-subtitle { color: rgba(0, 2, 45, 0.35); }
.ger-subhead[data-vazio="1"] .ger-chevron { display: none; }
/* Campo de data com botão de calendário */
.ger-datewrap { position: relative; display: inline-flex; align-items: center; }
.ger-datewrap .ger-cal { position: absolute; right: 6px; background: none; border: none; cursor: pointer; font-size: 15px; color: rgba(0, 2, 45, 0.45); padding: 0; line-height: 1; }
.ger-datewrap .ger-cal:hover { color: #ca991e; }
.ger-datewrap .ger-cal-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; right: 24px; bottom: 0; }

/* KPIs compactos (Pipeline Ativo / cards clicáveis) e cards compactos de emissão */
.dr-kpi { flex: 1 1 116px; min-width: 108px; text-align: center; padding: 9px 8px; background: #fff; border: 1px solid rgba(0, 2, 45, 0.08); border-top: 3px solid #3b6fc0; border-radius: 8px; cursor: pointer; transition: box-shadow 0.15s, transform 0.15s; }
.dr-kpi:hover { box-shadow: 0 4px 12px rgba(0, 2, 45, 0.1); transform: translateY(-1px); }
.dr-kpi.active { box-shadow: 0 0 0 2px rgba(59, 111, 192, 0.35); }
.dr-kpi-l { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: rgba(0, 2, 45, 0.55); font-weight: 700; line-height: 1.15; }
.dr-kpi-n { font-size: 21px; font-weight: 800; line-height: 1.1; margin-top: 2px; }
.dr-kpi-v { font-size: 11px; color: rgba(0, 2, 45, 0.55); margin-top: 1px; }
.dr-kpi-static { cursor: default; }
.dr-kpi-static:hover { box-shadow: none; transform: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   ÍCONES (linha / traço) — sprite SVG com currentColor
   ═══════════════════════════════════════════════════════════════════════════ */
.ic {
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.ic-sm { width: 15px; height: 15px; }
.ic-spin { animation: ov-spin 0.9s linear infinite; color: var(--gold); }
/* Itens de timeline clicáveis (Atividade → abre no Bitrix) */
.gatv-tl-clickable { cursor: pointer; border-radius: 6px; transition: background 0.12s; }
.gatv-tl-clickable:hover { background: rgba(202, 153, 30, 0.08); }
.gatv-tl-clickable:hover .gatv-tl-open { opacity: 0.9 !important; color: #CA991E; }

/* ═══════════════════════════════════════════════════════════════════════════
   VISÃO GERAL (Pride) — home executiva consolidada
   ═══════════════════════════════════════════════════════════════════════════ */
.ov-wrap { max-width: 1280px; margin: 0 auto; padding: 32px 40px 56px; }

.ov-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 24px;
}
.ov-title { font-size: 26px; font-weight: 700; color: var(--navy); letter-spacing: -0.4px; }
.ov-sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.ov-head-actions { display: flex; align-items: center; gap: 14px; }
.ov-updated { font-size: 11.5px; color: var(--text-muted); }
.ov-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 10px; border: 1px solid var(--gray-200);
  background: #fff; color: var(--navy); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.15s; font-family: inherit;
}
.ov-btn:hover { border-color: var(--gold); box-shadow: var(--shadow-sm); }
.ov-btn.is-loading { opacity: 0.6; pointer-events: none; }
.ov-btn.is-loading .ic { animation: ov-spin 0.8s linear infinite; }
@keyframes ov-spin { to { transform: rotate(360deg); } }

.ov-erro {
  background: var(--red-light); color: var(--red);
  border: 1px solid rgba(217, 64, 64, 0.25);
  padding: 12px 16px; border-radius: 12px; font-size: 13px; margin-bottom: 20px;
}
/* Aviso não-bloqueante: leitura parcial (alguma fonte não respondeu). Âmbar, não
   vermelho — os números na tela são reais, só podem estar incompletos/defasados. */
.ov-aviso {
  background: rgba(200, 164, 74, 0.12); color: #8a6d1f;
  border: 1px solid rgba(200, 164, 74, 0.35);
  padding: 10px 14px; border-radius: 12px; font-size: 12.5px; margin-bottom: 20px;
}

/* KPIs */
.ov-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 22px; }
.ov-kpi {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--gray-200); border-radius: 16px;
  padding: 16px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.ov-kpi::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold);
}
.ov-kpi-navy::before { background: var(--navy); }
.ov-kpi-green::before { background: var(--green); }
.ov-kpi-red::before { background: var(--red); }
.ov-kpi-ic {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(202, 153, 30, 0.12); color: var(--gold);
}
.ov-kpi-navy .ov-kpi-ic { background: rgba(0, 2, 45, 0.07); color: var(--navy); }
.ov-kpi-green .ov-kpi-ic { background: var(--green-light); color: var(--green); }
.ov-kpi-red .ov-kpi-ic { background: var(--red-light); color: var(--red); }
.ov-kpi-ic .ic { width: 20px; height: 20px; }
.ov-kpi-body { min-width: 0; }
.ov-kpi-rot { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; display: block; }
.ov-kpi-val { font-size: 19px; font-weight: 700; color: var(--navy); display: block; line-height: 1.15; margin-top: 2px; }
.ov-kpi-sub { font-size: 11px; color: var(--text-muted); display: block; margin-top: 1px; }
.ov-skel {
  height: 72px; border: 0; border-radius: 16px;
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-50) 50%, var(--gray-100) 75%);
  background-size: 200% 100%; animation: ov-shimmer 1.2s infinite;
}
.ov-skel::before { display: none; }
@keyframes ov-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Grid de cards */
.ov-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; margin-bottom: 18px; }
.ov-card {
  background: #fff; border: 1px solid var(--gray-200); border-radius: 16px;
  padding: 20px 22px; box-shadow: var(--shadow-sm);
}
.ov-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ov-card-head h2 { font-size: 15px; font-weight: 700; color: var(--navy); }
.ov-card-tag { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.ov-card-link { font-size: 12px; color: var(--gold); font-weight: 600; cursor: pointer; }
.ov-card-link:hover { text-decoration: underline; }

/* Resultados do ano */
.ov-res-summary {
  display: flex; gap: 28px; margin-bottom: 18px;
  padding-bottom: 16px; border-bottom: 1px solid var(--gray-200);
}
.ov-res-stat { display: flex; flex-direction: column; }
.ov-res-num { font-size: 20px; font-weight: 700; color: var(--navy); }
.ov-res-lbl { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.ov-res-meses { display: flex; flex-direction: column; gap: 9px; }
.ov-mes { display: grid; grid-template-columns: 34px 1fr 84px; align-items: center; gap: 12px; }
.ov-mes-nome { font-size: 12px; color: var(--text-muted); text-transform: uppercase; font-weight: 600; }
.ov-mes-bar { height: 8px; background: var(--gray-100); border-radius: 5px; overflow: hidden; }
.ov-mes-bar span { display: block; height: 100%; background: linear-gradient(90deg, #CA991E, #e0b440); border-radius: 5px; }
.ov-mes-val { font-size: 12.5px; font-weight: 600; color: var(--navy); text-align: right; }
.ov-mes.is-atual .ov-mes-nome, .ov-mes.is-atual .ov-mes-val { color: var(--gold); }
.ov-mes.is-atual .ov-mes-bar span { background: linear-gradient(90deg, #00022D, #0a0e5c); }

/* Ranking */
.ov-rank { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.ov-rank-item { display: grid; grid-template-columns: 26px 1fr auto auto; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px; }
.ov-rank-item:hover { background: var(--gray-50); }
.ov-rank-pos { width: 24px; height: 24px; border-radius: 7px; background: var(--gray-100); color: var(--text-dark); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ov-rank-pos-1 { background: linear-gradient(135deg, #CA991E, #e0b440); color: #00022D; }
.ov-rank-pos-2 { background: #c8ccd8; color: #00022D; }
.ov-rank-pos-3 { background: #e0a87e; color: #3a1e00; }
.ov-rank-nome { font-size: 13px; font-weight: 600; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.ov-rank-eq { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.4px; background: var(--purple-light); color: var(--navy); padding: 2px 6px; border-radius: 5px; font-weight: 700; }
.ov-rank-qtd { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.ov-rank-val { font-size: 12.5px; font-weight: 700; color: var(--gold); }
.ov-empty { font-size: 13px; color: var(--text-muted); padding: 12px 4px; }

/* Atalhos */
.ov-shortcuts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ov-shortcut {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 16px 8px; border-radius: 12px; border: 1px solid var(--gray-200);
  background: #fff; color: var(--navy); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all 0.15s; font-family: inherit;
}
.ov-shortcut:hover { border-color: var(--gold); color: var(--gold); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.ov-shortcut .ic { width: 22px; height: 22px; flex-shrink: 0; }
.ov-shortcut span { text-align: center; line-height: 1.25; }

/* Mapa da emissão (heatmap por dia) */
.ov-mapa-filtros { display: flex; gap: 6px; }
.ov-mapa-filtros select {
  padding: 5px 8px; border: 1px solid var(--gray-200); border-radius: 8px;
  font-size: 12px; background: #fff; color: var(--navy); font-family: inherit; cursor: pointer;
}
.ov-mapa-resumo { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 12px; font-size: 12px; color: var(--text-dark); }
.ov-mapa-tot { display: inline-flex; align-items: center; gap: 6px; }
.ov-mapa-dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.ov-mapa-row { display: flex; align-items: center; gap: 2px; margin-bottom: 2px; }
.ov-mapa-lbl { flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--navy); display: flex; align-items: center; gap: 6px; }
.ov-mapa-h { text-align: center; font-size: 9px; color: var(--text-muted); padding-bottom: 3px; }
.ov-mapa-h.sel { color: var(--gold); font-weight: 700; }
.ov-mapa-cell {
  height: 24px; border-radius: 3px; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600;
}
.ov-mapa-cell.sel { outline: 2px solid var(--gold); outline-offset: -2px; }

@media (max-width: 1100px) {
  .ov-kpis { grid-template-columns: repeat(3, 1fr); }
  .ov-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ov-wrap { padding: 24px 18px 40px; }
  .ov-kpis { grid-template-columns: repeat(2, 1fr); }
  .ov-shortcuts { grid-template-columns: repeat(2, 1fr); }
}

/* Barras clicáveis do bloco "Resultados de vendas" (drill-down por emissão) */
.dr-res-bar { transition: background 0.12s ease; }
.dr-res-bar:hover { background: rgba(0,2,45,0.05) !important; }

/* ── Aproveitamento de largura: menos espaço vazio nas laterais (página toda) ── */
.container { max-width: 1760px; }
.header-inner { max-width: 1760px; }

/* ── Filtros do bloco "Resultados de vendas" ── */
.dr-res-seg { display: inline-flex; background: rgba(0,2,45,0.05); border-radius: 8px; padding: 2px; gap: 2px; }
.dr-res-seg-btn { border: none; background: transparent; color: rgba(0,2,45,0.6); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 6px; cursor: pointer; transition: background .12s, color .12s; }
.dr-res-seg-btn:hover { color: #00022D; }
.dr-res-seg-btn.active { background: #fff; color: #00022D; box-shadow: 0 1px 3px rgba(0,2,45,0.12); }
.dr-res-inp { padding: 7px 10px; border-radius: 6px; border: 1px solid rgba(0,2,45,0.15); background: #fff; color: #00022D; font-size: 13px; box-sizing: border-box; }
select.dr-res-inp { cursor: pointer; }

/* Células-métrica da grade "Resultados de vendas" (clicáveis) */
.dr-res-cell { transition: background 0.12s ease; }
.dr-res-cell:hover { background: rgba(0,2,45,0.05); }

/* ═══════════════════════════════════════════════════════════════════════════
   NEXORA — visual dark/3D da aba Gerencial (ativado por body.theme-nexora).
   Escopado: só afeta a tela quando a aba Gerencial está ativa.
   ═══════════════════════════════════════════════════════════════════════════ */
body.theme-nexora { background: #f4f6fb; }
body.theme-nexora .app-main {
  background:
    radial-gradient(1100px 560px at 78% -8%, rgba(124,77,255,0.12), transparent 60%),
    radial-gradient(820px 460px at -5% 108%, rgba(59,111,192,0.10), transparent 55%),
    #f4f6fb;
  color: #00022D;
}

.nx-hero { --nx-fg: #00022D; --nx-mut: rgba(0,2,45,0.55); --nx-dim: rgba(0,2,45,0.38);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--nx-fg);
  padding: 4px 2px 8px; }

/* Topline: saudação + ações */
.nx-topline { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.nx-hi { font-size:26px; font-weight:800; letter-spacing:-0.02em; margin:0; color:#00022D; }
.nx-wave { display:inline-block; }
.nx-sub { margin:4px 0 0; font-size:13.5px; color:var(--nx-mut); }
.nx-actions { display:flex; align-items:center; gap:10px; }
.nx-search { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid rgba(0,2,45,0.08);
  border-radius:11px; padding:9px 14px; min-width:220px; }
.nx-search-ic { font-size:17px; color:var(--nx-dim); line-height:1; }
.nx-search input { background:transparent; border:none; outline:none; color:var(--nx-fg); font-size:13.5px; width:100%; }
.nx-search input::placeholder { color:var(--nx-dim); }
.nx-btn { display:inline-flex; align-items:center; gap:7px; background:linear-gradient(135deg,#7c5cff,#5b8def); color:#fff;
  border:none; border-radius:11px; padding:10px 16px; font-size:13.5px; font-weight:700; cursor:pointer;
  box-shadow:0 8px 22px rgba(124,92,255,0.35); transition:transform .12s, box-shadow .12s; }
.nx-btn:hover { transform:translateY(-1px); box-shadow:0 10px 26px rgba(124,92,255,0.45); }
.nx-btn.is-loading { opacity:.6; pointer-events:none; }
.nx-updated { font-size:12px; color:rgba(0,2,45,0.55); white-space:nowrap; }

/* Cards glass */
.nx-card { background:#fff; border:1px solid rgba(0,2,45,0.075); border-radius:18px;
  padding:18px 20px; box-shadow:0 12px 40px rgba(0,2,45,0.08); backdrop-filter:blur(8px); }
.nx-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:8px; }
.nx-card-title { font-size:14px; font-weight:700; color:#00022D; }
.nx-card-big { font-size:24px; font-weight:800; letter-spacing:-0.02em; color:#00022D; margin-top:2px; }
.nx-chip { font-size:11px; font-weight:700; color:#6a4bd0; background:rgba(124,92,255,0.16); border:1px solid rgba(124,92,255,0.3);
  padding:5px 11px; border-radius:9px; white-space:nowrap; }
.nx-chip-ghost { color:var(--nx-mut); background:#f4f6fb; border-color:rgba(0,2,45,0.1); }
.nx-chart { width:100%; }

/* KPI cards */
.nx-kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:16px; margin-bottom:16px; }
.nx-kpi { position:relative; background:#fff; border:1px solid rgba(0,2,45,0.075); border-radius:18px;
  padding:16px 18px 8px; overflow:hidden; box-shadow:0 12px 40px rgba(0,2,45,0.08); backdrop-filter:blur(8px);
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.nx-kpi-clk { cursor:pointer; }
.nx-kpi-clk:hover { transform:translateY(-3px); border-color:rgba(0,2,45,0.22); background:#eef1f7;
  box-shadow:0 18px 48px rgba(0,2,45,0.08); }
.nx-kpi-clk:focus-visible { outline:none; border-color:rgba(0,2,45,0.35); }
.nx-kpi.sel { background:#eef1f7; box-shadow:0 16px 44px rgba(0,2,45,0.08); }
.nx-kpi.sel::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:currentColor; opacity:.9; }
.nx-kpi-top { display:flex; align-items:center; justify-content:space-between; }
.nx-kpi-label { font-size:12px; color:var(--nx-mut); font-weight:600; }
.nx-kpi-ic { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.nx-kpi-ic .ic { width:17px; height:17px; }
.nx-kpi-val { font-size:24px; font-weight:800; letter-spacing:-0.02em; color:#00022D; margin-top:10px; }
.nx-kpi-qtd { font-size:12.5px; font-weight:700; color:rgba(0,2,45,0.78); margin-top:1px; }
.nx-kpi-qtd span { font-weight:500; color:var(--nx-dim); }
.nx-kpi-delta { font-size:12px; font-weight:700; margin-top:4px; }
.nx-kpi-delta .nx-vs { color:var(--nx-dim); font-weight:500; }
.nx-kpi-delta.up { color:#2fa86b; } .nx-kpi-delta.down { color:#d94040; }
.nx-kpi-spark { height:40px; margin:6px -18px -8px; }

/* Grade gráfico principal + funil */
.nx-grid2 { display:grid; grid-template-columns:1.55fr 1fr; gap:16px; margin-top:2px; }
.nx-card-lg { }

/* Toggle do painel legado */
.nx-legacy-toggle { width:100%; margin-top:16px; display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed rgba(0,2,45,0.14); border-radius:14px; padding:13px 18px;
  color:var(--nx-mut); font-size:13px; font-weight:600; cursor:pointer; font-family:system-ui,sans-serif; transition:background .12s; }
.nx-legacy-toggle:hover { background:#eef1f7; color:#00022D; }
.nx-legacy-chevron { transition:transform .18s; }
.nx-legacy-toggle.open .nx-legacy-chevron { transform:rotate(180deg); }
.dr-legacy { margin-top:16px; }

@media (max-width:1100px) { .nx-grid2 { grid-template-columns:1fr; } .nx-kpis { grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px) { .nx-kpis { grid-template-columns:1fr; } }

/* ── Funil 3D por imagem (fundo preto removido via mix-blend-mode: screen) ── */
.nx-funnel { position:relative; height:300px; display:flex; align-items:center; justify-content:center; }
.nx-funnel-img { max-height:296px; max-width:78%; object-fit:contain; mix-blend-mode:screen;
  filter:drop-shadow(0 0 22px rgba(124,92,255,0.22)); }
.nx-funnel.missing .nx-funnel-img { display:none; }
.nx-funnel-fallback { display:none; position:absolute; inset:0; align-items:center; justify-content:center;
  flex-direction:column; gap:6px; text-align:center; color:rgba(0,2,45,0.5); font-size:12.5px; }
.nx-funnel.missing .nx-funnel-fallback { display:flex; }
.nx-funnel-fallback code { background:#e8ebf3; padding:2px 7px; border-radius:5px; color:#6a4bd0; }
.nx-funnel-labels { position:absolute; inset:0 8px 0 0; pointer-events:none; }
.nx-funnel-lbl { position:absolute; right:0; transform:translateY(-50%); }
.nx-funnel-lbl .t { font-size:11px; color:rgba(0,2,45,0.62); display:flex; align-items:center; gap:5px; justify-content:flex-end; }
.nx-funnel-lbl .t .dot { width:7px; height:7px; border-radius:50%; display:inline-block; box-shadow:0 0 8px currentColor; }
.nx-funnel-lbl .n { font-size:16px; font-weight:800; color:#00022D; text-align:right; line-height:1.1; }

/* ── Donut por operadora + Top corretores (dashboard Nexora) ── */
.nx-grid-eq { grid-template-columns: 1.1fr 1fr; }
.nx-oper-wrap { display:flex; align-items:center; gap:14px; }
.nx-oper-legend { flex:1 1 auto; display:flex; flex-direction:column; gap:7px; min-width:0; }
.nx-leg-row { display:flex; align-items:center; gap:8px; font-size:12.5px; }
.nx-leg-row .dot { width:9px; height:9px; border-radius:3px; flex:0 0 auto; }
.nx-leg-row .nm { color:rgba(0,2,45,0.8); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto; }
.nx-leg-row .vl { color:#00022D; font-weight:700; flex:0 0 auto; }
.nx-leg-row .pc { color:rgba(0,2,45,0.45); font-size:11px; width:34px; text-align:right; flex:0 0 auto; }
.nx-toplist { display:flex; flex-direction:column; gap:2px; }
.nx-top-row { display:flex; align-items:center; gap:12px; padding:7px 4px; border-bottom:1px solid rgba(0,2,45,0.05); }
.nx-top-rank { width:22px; height:22px; border-radius:7px; background:rgba(124,92,255,0.16); color:#6a4bd0; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.nx-top-mid { flex:1 1 auto; min-width:0; }
.nx-top-name { font-size:13px; color:#00022D; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nx-top-bar { height:5px; margin-top:5px; background:#eef1f7; border-radius:3px; overflow:hidden; }
.nx-top-bar > div { height:100%; background:linear-gradient(90deg,#7c5cff,#5b8def); border-radius:3px; }
.nx-top-val { text-align:right; font-size:13px; font-weight:800; color:#00022D; flex:0 0 auto; }
.nx-top-val span { display:block; font-size:11px; font-weight:500; color:rgba(0,2,45,0.45); }

/* ── Filtros + interatividade do dashboard Nexora ── */
.nx-filters { display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin-bottom:16px; }
.nx-seg { display:inline-flex; background:#fff; border:1px solid rgba(0,2,45,0.08); border-radius:10px; padding:3px; gap:2px; }
.nx-seg-btn { border:none; background:transparent; color:rgba(0,2,45,0.6); font-size:12px; font-weight:600; padding:7px 13px; border-radius:7px; cursor:pointer; transition:background .12s,color .12s; }
.nx-seg-btn:hover { color:#00022D; }
.nx-seg-btn.active { background:#7c5cff; color:#fff; box-shadow:0 4px 12px rgba(124,92,255,0.35); }
.nx-inp { padding:8px 12px; border-radius:9px; border:1px solid rgba(0,2,45,0.1); background:#f4f6fb; color:#00022D; font-size:13px; box-sizing:border-box; }
select.nx-inp { cursor:pointer; }
select.nx-inp option { background:#ffffff; color:#00022D; }
.nx-inp::placeholder { color:rgba(0,2,45,0.35); }
.nx-drop { background:#ffffff; border:1px solid rgba(0,2,45,0.1); border-radius:10px; box-shadow:0 16px 40px rgba(0,2,45,0.08); }
.nx-drop-inp { width:100%; padding:7px 10px; border-radius:6px; border:1px solid rgba(0,2,45,0.12); background:#f4f6fb; color:#00022D; font-size:13px; margin-bottom:6px; box-sizing:border-box; }
.nx-drop-all { display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:5px; cursor:pointer; font-size:13px; font-weight:600; color:#00022D !important; border-bottom:1px solid rgba(0,2,45,0.08); margin-bottom:4px; }
/* itens do multiselect vêm com cor navy inline (compartilhado) — forçar claro no dark */
#gnx-corr-panel label, #gnx-corr-panel label span { color:#00022D !important; }
#gnx-corr-panel label:hover { background:#eef1f7 !important; }
.nx-clear { background:rgba(255,92,122,0.14); border:1px solid rgba(255,92,122,0.4); color:#d94040; font-size:12px; font-weight:700; padding:8px 14px; border-radius:9px; cursor:pointer; }
.nx-clear:hover { background:rgba(255,92,122,0.22); }

/* Legenda das 3 barras */
.nx-barleg { display:flex; gap:12px; font-size:10.5px; color:rgba(0,2,45,0.55); }
.nx-barleg span { display:inline-flex; align-items:center; gap:4px; }
.nx-barleg i { width:9px; height:9px; border-radius:2px; display:inline-block; }

/* Painel de detalhe (drill-down) no dashboard */
.nx-detalhe .nxd-box { background:#fff; border:1px solid rgba(0,2,45,0.08); border-radius:14px; overflow:hidden; }
.nx-detalhe .nxd-head { display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; padding:12px 16px; border-bottom:1px solid rgba(0,2,45,0.07); }
.nx-detalhe .nxd-title { font-weight:700; font-size:13.5px; color:#00022D; }
.nx-detalhe .nxd-sub { font-size:12px; color:rgba(0,2,45,0.55); }
.nx-detalhe table { width:100%; border-collapse:collapse; font-size:12.5px; }
.nx-detalhe thead th { background:#f4f6fb !important; text-align:left; padding:9px 14px; font-size:10.5px; text-transform:uppercase; letter-spacing:0.5px; color:rgba(0,2,45,0.6) !important; border-bottom:1px solid rgba(0,2,45,0.07); white-space:nowrap; }
.nx-detalhe tbody td { padding:9px 14px; color:rgba(0,2,45,0.82); border-bottom:1px solid rgba(0,2,45,0.04); white-space:nowrap; }
.nx-detalhe tbody tr:hover { background:#f4f6fb; }
.nx-detalhe a { color:#5b3fd6; text-decoration:none; }
.nx-detalhe .nxd-scroll { max-height:420px; overflow:auto; }

/* Linha clicável de Top corretores + seleção ativa */
.nx-top-row { cursor:pointer; border-radius:8px; transition:background .12s; }
.nx-top-row:hover { background:#f4f6fb; }
.nx-top-row.sel { background:rgba(124,92,255,0.14); box-shadow:inset 0 0 0 1px rgba(124,92,255,0.4); }
.nx-leg-row { cursor:pointer; padding:2px 4px; border-radius:6px; }
.nx-leg-row:hover { background:#f4f6fb; }
.nx-leg-row.sel { background:rgba(124,92,255,0.14); }

/* ── Toggle "Implantados: do que vendeu / por vigência" ── */
.nx-impl-toggle { display:flex; align-items:center; gap:4px; }
.nx-impl-lbl { font-size:10.5px; color:rgba(0,2,45,0.45); margin-right:2px; }
.nx-impl-btn { border:1px solid rgba(0,2,45,0.1); background:#fff; color:rgba(0,2,45,0.6); font-size:10.5px; font-weight:600; padding:4px 8px; border-radius:6px; cursor:pointer; }
.nx-impl-btn:hover { color:#00022D; }
.nx-impl-btn.active { background:rgba(38,198,255,0.16); border-color:rgba(38,198,255,0.4); color:#1f8fb0; }

/* ── Gerenciador de colunas do detalhamento (selecionar + reordenar) ── */
.nx-det-cfg { padding:12px 16px; border-bottom:1px solid rgba(0,2,45,0.07); background:rgba(0,2,45,0.03); }
.nxc-wrap { display:flex; flex-direction:column; gap:8px; }
.nxc-sec { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.nxc-lbl { font-size:10.5px; text-transform:uppercase; letter-spacing:0.5px; color:rgba(0,2,45,0.4); font-weight:700; margin-right:4px; }
.nxc-chip { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#00022D; background:rgba(124,92,255,0.16); border:1px solid rgba(124,92,255,0.35); border-radius:7px; padding:4px 9px; cursor:grab; user-select:none; }
.nxc-chip:active { cursor:grabbing; }
.nxc-chip b { cursor:pointer; color:rgba(0,2,45,0.55); font-weight:400; font-size:13px; }
.nxc-chip b:hover { color:#d94040; }
.nxc-add { display:inline-flex; font-size:12px; color:rgba(0,2,45,0.6); background:#f4f6fb; border:1px solid rgba(0,2,45,0.1); border-radius:7px; padding:4px 9px; cursor:pointer; }
.nxc-add:hover { color:#00022D; background:#e8ebf3; }
.nxd-gear { border:1px solid rgba(0,2,45,0.15); background:#f4f6fb; border-radius:8px; padding:5px 10px; font-size:12px; cursor:pointer; color:#00022D; display:inline-flex; align-items:center; gap:5px; }
.nxd-gear:hover { background:#e8ebf3; }

/* ══════════════ Subabas da Gerencial ══════════════ */
.ger-subnav { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:18px; border-bottom:1px solid rgba(0,2,45,0.1); }
.ger-subtab { background:none; border:none; color:rgba(0,2,45,0.5); font-size:13px; font-weight:600; padding:10px 18px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s, border-color .15s; }
.ger-subtab:hover { color:rgba(0,2,45,0.85); }
.ger-subtab.active { color:#00022D; border-bottom-color:#7c5cff; }
.ger-sub-panel { animation:nxFadeIn .18s ease; }
@keyframes nxFadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

/* ── Painel de filtros à esquerda (persistente em todas as subabas) ── */
.ger-shell { display:flex; align-items:flex-start; gap:18px; }
.ger-main { flex:1 1 auto; min-width:0; }
/* Rail FIXO ao rolar (sticky dentro do scroller .app-main) e SEM barra de rolagem
   própria: se ficar alto, usa a rolagem da página. */
.ger-filtros { flex:0 0 232px; width:232px; position:sticky; top:12px; align-self:flex-start;
  display:flex; flex-direction:column; gap:8px; padding-right:2px; }
.gerf-head { display:flex; align-items:center; justify-content:space-between; padding:2px 2px 2px 4px; }
.gerf-title { font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:rgba(0,2,45,0.55); }
.gerf-gear { background:#eef1f7; border:1px solid rgba(0,2,45,0.12); color:rgba(0,2,45,0.7);
  border-radius:8px; padding:4px 8px; font-size:11px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.gerf-gear:hover { background:#e8ebf3; color:#00022D; }
.gerf-block { position:relative; background:#fff; border:1px solid rgba(0,2,45,0.08); border-radius:12px; padding:8px 10px; }
.gerf-block.on { border-color:rgba(124,92,255,0.5); }
.gerf-lbl { font-size:11px; font-weight:600; color:rgba(0,2,45,0.5); margin-bottom:5px; letter-spacing:.2px; }
.gerf-btn { width:100%; display:flex; align-items:center; gap:6px; background:#f4f6fb;
  border:1px solid rgba(0,2,45,0.1); border-radius:9px; padding:8px 11px; cursor:pointer; color:#00022D; font-size:13px; box-sizing:border-box; }
.gerf-btn:hover { border-color:rgba(0,2,45,0.22); }
.gerf-btn .gms-txt { flex:1; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gerf-btn .gerf-chev { color:rgba(0,2,45,0.4); font-size:11px; }
/* Dropdown como menu suspenso flutuante (overlay, z-index alto): expande até quase
   a altura da tela SEM barra de rolagem no caso comum (listas curtas). */
.gerf-drop { position:absolute; left:0; top:100%; margin-top:4px; width:100%; min-width:210px; z-index:1200;
  display:flex; flex-direction:column; padding:8px; max-height:calc(100vh - 40px); }
.gerf-dates { display:flex; flex-direction:column; gap:6px; }
.gerf-dates input { width:100%; }
.gerf-clear { background:rgba(255,45,85,0.12); border:1px solid rgba(255,45,85,0.35); color:#d94040;
  border-radius:9px; padding:8px 10px; font-size:12px; font-weight:600; cursor:pointer; }
.gerf-clear:hover { background:rgba(255,45,85,0.2); }
/* Ferramentas movidas p/ o rail: Atualizar cache + Configurações (abaixo de Limpar filtros) */
.gerf-tools { display:flex; flex-direction:column; gap:6px; margin-top:8px; padding-top:10px; border-top:1px solid rgba(0,2,45,0.08); }
.gerf-tool { display:flex; align-items:center; gap:7px; width:100%; text-align:left; background:#f4f6fb;
  border:1px solid rgba(0,2,45,0.13); color:rgba(0,2,45,0.78); border-radius:9px; padding:8px 10px;
  font-size:12px; font-weight:600; cursor:pointer; }
.gerf-tool:hover { background:#e8ebf3; color:#00022D; }
.gerf-tool-ic { font-size:14px; line-height:1; width:13px; text-align:center; }
.gerf-cfg { background:#fff; border:1px solid rgba(0,2,45,0.1); border-radius:12px; padding:10px; }
.gerf-cfg-row { display:flex; align-items:center; gap:8px; padding:5px 4px; font-size:13px; color:#00022D; cursor:pointer; }
.gerf-cfg-row input { cursor:pointer; }
@media (max-width:1100px) { .ger-shell { flex-direction:column; } .ger-filtros { position:static; width:100%; flex:1 1 auto; max-height:none; flex-direction:row; flex-wrap:wrap; } .ger-filtros .gerf-block { flex:1 1 180px; } }

/* ══════════ ROTINA — menu fixo + lente + Visão Geral (dashboard neon) ══════════ */
.rot-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.rot-menu { display:flex; gap:4px; background:#fff; border:1px solid rgba(0,2,45,0.08); border-radius:12px; padding:4px; }
.rot-menu-btn { background:none; border:none; color:rgba(0,2,45,0.55); font-size:13px; font-weight:700; padding:8px 18px; border-radius:9px; cursor:pointer; letter-spacing:.3px; transition:all .15s; }
.rot-menu-btn:hover { color:#00022D; }
.rot-menu-btn.active { background:linear-gradient(90deg,#7c5cff,#5b8def); color:#fff; box-shadow:0 4px 14px rgba(124,92,255,.35); }
.rot-right { display:flex; align-items:center; gap:12px; }
.rot-lens { display:flex; gap:4px; background:#fff; border:1px solid rgba(0,2,45,0.08); border-radius:999px; padding:4px; }
.rot-lens-btn { background:none; border:none; color:rgba(0,2,45,0.55); font-size:12px; font-weight:700; padding:7px 16px; border-radius:999px; cursor:pointer; }
.rot-lens-btn.active { background:linear-gradient(90deg,#9b5cff,#c94bd0); color:#fff; box-shadow:0 4px 14px rgba(155,92,255,.3); }

.rv-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.rv-agente-sel { background:#ffffff; border:1px solid rgba(0,2,45,0.14); color:#00022D; border-radius:8px; padding:7px 10px; font-size:13px; }
.rv-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
.rv-card { background:#fff; border:1px solid rgba(0,2,45,0.08); border-radius:18px; padding:16px 18px; position:relative; overflow:hidden; }
.rv-card::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,2,45,.03),transparent 42%); pointer-events:none; }
.rv-ct { font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:rgba(0,2,45,0.5); margin-bottom:14px; text-align:center; }
.rv-c3{grid-column:span 3;} .rv-c4{grid-column:span 4;} .rv-c5{grid-column:span 5;} .rv-c6{grid-column:span 6;} .rv-c7{grid-column:span 7;} .rv-c8{grid-column:span 8;} .rv-c12{grid-column:span 12;}
@media (max-width:1200px){ .rv-c3,.rv-c4,.rv-c5{grid-column:span 6;} .rv-c7,.rv-c8{grid-column:span 12;} }
@media (max-width:760px){ .rv-c3,.rv-c4,.rv-c5,.rv-c6,.rv-c7,.rv-c8{grid-column:span 12;} }
/* Cards da Visão Geral sobem para o topo (sem esticar e ficar com espaço vazio) */
#rv-body > .rv-card { align-self:start; }
.rv-empty { color:rgba(0,2,45,0.4); font-size:13px; padding:14px 6px; text-align:center; }
/* Funil */
.rv-fbar { display:flex; align-items:center; gap:12px; margin-bottom:11px; }
.rv-fname { width:92px; font-size:12px; color:rgba(0,2,45,0.5); text-align:right; flex:0 0 auto; }
.rv-ftrack { flex:1; height:22px; background:#eef1f7; border-radius:12px; overflow:hidden; }
.rv-ffill { height:100%; border-radius:12px; display:flex; align-items:center; justify-content:flex-end; padding-right:10px; font-size:11px; font-weight:800; color:#06121a; }
/* Medidores */
.rv-gauges { display:flex; justify-content:space-around; align-items:flex-end; gap:6px; height:210px; }
.rv-gauge { display:flex; flex-direction:column; align-items:center; gap:7px; height:100%; }
.rv-gtrack { width:24px; flex:1; background:#f4f6fb; border-radius:14px; display:flex; align-items:flex-end; overflow:hidden; }
.rv-gfill { width:100%; border-radius:14px; }
.rv-gval { font-size:12px; font-weight:800; } .rv-glbl { font-size:10px; color:rgba(0,2,45,0.5); text-align:center; max-width:58px; line-height:1.2; }
/* Círculos (indicadores do agente) */
.rv-rings { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.rv-ring { display:flex; flex-direction:column; align-items:center; gap:6px; }
.rv-ring .lb { font-size:11px; color:rgba(0,2,45,0.5); }
/* Etapas 3D */
.rv-steps { display:flex; justify-content:space-around; align-items:flex-end; height:210px; padding-top:8px; }
.rv-step { display:flex; flex-direction:column; align-items:center; gap:5px; }
.rv-step .n { font-size:10px; color:rgba(0,2,45,0.5); text-align:center; } .rv-step .q { font-size:13px; font-weight:800; }
/* Donut */
.rv-donut-wrap { display:flex; align-items:center; gap:14px; }
.rv-donut { width:170px; height:170px; flex:0 0 170px; border-radius:50%; position:relative; }
.rv-donut::after { content:""; position:absolute; inset:22px; border-radius:50%; background:#ffffff; }
.rv-dctr { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:1; }
.rv-donut-leg { flex:1; display:flex; flex-direction:column; gap:6px; font-size:12px; color:rgba(0,2,45,0.7); min-width:0; }
.rv-donut-leg .row { display:flex; align-items:center; gap:7px; }
.rv-donut-leg .row b { margin-left:auto; color:#00022D; }
.rv-donut-leg i { width:9px; height:9px; border-radius:3px; flex:0 0 auto; }
/* Conversão por etapa */
.rv-pb { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.rv-pb .idx { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#08111c; flex:0 0 auto; }
.rv-pb .lbl { width:96px; font-size:12px; color:rgba(0,2,45,0.5); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rv-pb .track { flex:1; height:14px; background:#f4f6fb; border-radius:8px; overflow:hidden; }
.rv-pb .fill { height:100%; border-radius:8px; }
.rv-pb .pct { width:40px; text-align:right; font-size:12px; font-weight:800; }
/* Quartis */
.rv-q-metrics { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.rv-legend { display:flex; gap:14px; justify-content:center; margin-top:10px; font-size:11px; color:rgba(0,2,45,0.5); flex-wrap:wrap; }
.rv-legend i { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px; vertical-align:middle; }
/* Alturas dos gráficos ECharts (interativos/responsivos) da Visão Geral */
#rv-funil { height:210px; } #rv-gauges { height:222px; } #rv-rings { height:196px; }
#rv-steps { height:210px; } #rv-prog { height:150px; } #rv-quartis { height:240px; }
/* Donut agora é um mount de ECharts (pizza), não mais um círculo CSS */
.rv-donut { width:auto; height:206px; flex:1 1 auto; border-radius:0; }
.rv-donut::after { content:none; display:none; }

/* ═══ Visão Geral — Painel-comando do dia (Fase 1: Ligações + Atividades) ═══ */
.rvk-card { padding:14px 16px; }
.rvk-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.rvk-tile { background:#fbfcfe; border:1px solid rgba(0,2,45,0.07); border-radius:14px; padding:14px 16px 13px 18px; position:relative; overflow:hidden; }
.rvk-tile::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--rvk-c,#7c5cff); }
.rvk-n { font-size:26px; font-weight:800; color:#00022D; line-height:1.05; letter-spacing:-.5px; }
.rvk-l { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:rgba(0,2,45,0.5); margin-top:5px; }
.rvk-s { font-size:11px; color:rgba(0,2,45,0.45); margin-top:3px; line-height:1.25; }
.rv-note { font-size:11px; color:rgba(0,2,45,0.5); margin-top:12px; text-align:center; }
.rv-ct-sub { font-weight:500; text-transform:none; letter-spacing:0; color:rgba(0,2,45,0.4); }
/* Pausinhos (1 traço = 1 unidade real; cor por funil via segmentos) */
.ps-box { padding-top:4px; }
.ps-row { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.ps-row:last-child { margin-bottom:0; }
.ps-name { width:140px; flex:0 0 auto; text-align:right; font-size:12px; font-weight:600; color:rgba(0,2,45,0.58); }
.ps-track { flex:1; min-width:0; height:24px; display:flex; align-items:stretch; overflow-x:auto; overflow-y:hidden; background:#eef1f7; border-radius:7px; }
.ps-track::-webkit-scrollbar { height:5px; }
.ps-track::-webkit-scrollbar-thumb { background:rgba(0,2,45,0.18); border-radius:3px; }
.ps-seg { flex:0 0 auto; height:100%; background:var(--psc);
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,0.62) 0 1px, transparent 1px var(--psu)); }
.ps-seg:first-child { border-radius:7px 0 0 7px; }
.ps-seg:last-child { border-radius:0 7px 7px 0; }
.ps-empty { flex:1; }
.ps-val { width:58px; flex:0 0 auto; text-align:left; font-size:15px; font-weight:800; color:#00022D; }
/* Legenda de cores por funil */
.rv-legend-card { padding:11px 16px; }
.rv-flegend { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; font-size:11.5px; color:rgba(0,2,45,0.62); }
.rv-flegend .rv-leg-row { display:inline-flex; align-items:center; gap:6px; }
.rv-flegend i { width:11px; height:11px; border-radius:3px; display:inline-block; }
/* Tiles selecionáveis (seletor de atividade-chave) */
.rvk-tile.rvk-sel { cursor:pointer; text-align:left; font-family:inherit; transition:border-color .15s, box-shadow .15s, transform .05s; }
.rvk-tile.rvk-sel:hover { border-color:rgba(0,2,45,0.18); transform:translateY(-1px); }
.rvk-tile.rvk-on { border-color:var(--rvk-c); box-shadow:0 0 0 1px var(--rvk-c), 0 8px 20px -10px var(--rvk-c); }
.rvk-tile.rvk-on::before { width:4px; }
/* Painel de detalhe */
#rv-detail .rv-ct { text-align:left; }
.rvd-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:12px; }
.rvd-card { background:#fbfcfe; border:1px solid rgba(0,2,45,0.07); border-left:3px solid var(--rvk-c,#7c5cff); border-radius:12px; padding:12px 14px; }
.rvd-n { font-size:24px; font-weight:800; color:#00022D; line-height:1.05; letter-spacing:-.5px; }
.rvd-l { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:rgba(0,2,45,0.5); margin-top:5px; }
.rvd-s { font-size:11px; color:rgba(0,2,45,0.45); margin-top:3px; }
.rvd-ps { margin-top:16px; }
/* Lista de reuniões */
.rvd-list-wrap { margin-top:16px; overflow-x:auto; }
.rvd-list { width:100%; border-collapse:collapse; font-size:13px; }
.rvd-list th { text-align:left; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:rgba(0,2,45,0.42); padding:6px 10px; border-bottom:1px solid rgba(0,2,45,0.08); white-space:nowrap; }
.rvd-list td { padding:8px 10px; border-bottom:1px solid rgba(0,2,45,0.05); color:rgba(0,2,45,0.85); }
.rvd-fdot { display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:7px; vertical-align:middle; }
.rvd-arrow { color:var(--mid,#8892b0); font-weight:700; margin:0 4px; }
.rvd-block { margin-top:16px; padding:14px 14px 10px; background:#fbfcfe; border:1px solid rgba(0,2,45,0.07); border-radius:12px; }
.rvd-block-t { font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:rgba(0,2,45,0.5); margin-bottom:10px; }
.rvd-pie { width:100%; height:240px; }
.rvd-exp { margin-top:12px; }
.rvd-exp > summary { cursor:pointer; font-size:12px; font-weight:600; color:var(--mid,#8892b0); list-style:none; padding:6px 0; user-select:none; }
.rvd-exp > summary::-webkit-details-marker { display:none; }
.rvd-exp > summary::before { content:"▸ "; }
.rvd-exp[open] > summary::before { content:"▾ "; }
.rvd-exp[open] > summary { color:var(--fg,inherit); }
.rvd-badge { font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px; white-space:nowrap; }
.rvd-badge.rvd-ok { background:rgba(0,230,160,0.16); color:#0a8f63; }
.rvd-badge.rvd-ag { background:rgba(38,198,255,0.16); color:#1177a8; }
.rvd-badge.rvd-rm { background:rgba(255,176,32,0.20); color:#a9720a; }
.rvd-more { font-size:11px; color:rgba(0,2,45,0.45); padding:8px 10px; }
/* Seletor de métrica (ranking) */
.rv-msel { display:inline-flex; gap:4px; margin-left:10px; flex-wrap:wrap; vertical-align:middle; }
.rv-msel-btn { background:#eef1f7; border:1px solid rgba(0,2,45,0.1); color:rgba(0,2,45,0.6); font-size:11px; font-weight:600; padding:3px 10px; border-radius:999px; cursor:pointer; font-family:inherit; }
.rv-msel-btn:hover { color:#00022D; }
.rv-msel-btn.on { background:#7c5cff; border-color:#7c5cff; color:#fff; }
/* Ranking de corretores */
.rv-rank { display:flex; flex-direction:column; gap:7px; }
.rv-rank-row { display:flex; align-items:center; gap:10px; }
.rv-rank-row.on .rv-rank-nm { color:#7c5cff; font-weight:800; }
/* Linhas clicáveis (drill de depto/equipe) — hover + seleção */
.rv-rank-row[data-k] { cursor:pointer; border-radius:8px; padding:2px 5px; margin:0 -5px; transition:background .12s; }
.rv-rank-row[data-k]:hover { background:rgba(124,92,255,0.07); }
.rv-rank-row.on { background:rgba(124,92,255,0.10); border-radius:8px; padding:2px 5px; margin:0 -5px; }
.rv-drill-clear { margin-left:8px; border:1px solid rgba(124,92,255,0.35); background:rgba(124,92,255,0.08); color:#7c5cff; border-radius:6px; padding:2px 8px; font-size:11px; font-weight:700; cursor:pointer; text-transform:none; letter-spacing:0; vertical-align:middle; }
.rv-drill-clear:hover { background:rgba(124,92,255,0.16); }
/* Card HORÁRIO — mosaico atividade × hora (painel escuro estilo "display") */
.rvh-legend { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:12px; font-size:11px; color:rgba(0,2,45,0.6); }
.rvh-leg { display:inline-flex; align-items:center; gap:6px; }
.rvh-leg i { width:11px; height:11px; border-radius:3px; display:inline-block; }
.rvh-total { font-size:15px; font-weight:800; color:#00022D; margin-right:8px; }
.rvh-total b { font-weight:600; font-size:10.5px; color:rgba(0,2,45,0.5); text-transform:uppercase; letter-spacing:.6px; }
.rvh-unit { margin-left:auto; font-size:10.5px; color:rgba(0,2,45,0.4); }
.rvh-grid { display:flex; gap:8px; align-items:flex-end; justify-content:center; background-image:linear-gradient(180deg,#fbfcff,#eef2f9); border:1px solid rgba(0,2,45,0.08); border-radius:14px; padding:14px 16px 10px; overflow-x:auto; }
.rvh-col { display:flex; flex-direction:column; align-items:center; gap:5px; flex:0 0 auto; }
.rvh-num { font-size:11px; font-weight:800; color:rgba(0,2,45,0.55); font-variant-numeric:tabular-nums; min-height:14px; }
/* Estilo "pausinho": cada registro = 1 traço fino empilhado (1 célula = 1 registro) */
.rvh-stack { display:flex; flex-direction:column-reverse; gap:1.5px; }
.rvh-cell { width:22px; height:3px; border-radius:2px; }
.rvh-col:hover .rvh-cell { filter:brightness(1.12); }
.rvh-xlab { font-size:10.5px; color:rgba(0,2,45,0.55); font-variant-numeric:tabular-nums; letter-spacing:.5px; font-weight:600; }
@media (max-width:760px){ .rvh-cell{width:16px;} .rvh-grid{gap:5px;} }
/* Mapa de Atividades (por dia × tipo) — legenda de totais estilo "Mapa da emissão" */
.rvm-legend { display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-bottom:12px; font-size:12px; color:rgba(0,2,45,0.7); }
.rvm-tot { display:inline-flex; align-items:center; gap:6px; }
.rvm-tot b { font-weight:800; color:#00022D; }
.rvm-dot { width:10px; height:10px; border-radius:3px; display:inline-block; }
.rv-rank-pos { width:20px; flex:0 0 auto; text-align:center; font-size:11px; font-weight:800; color:rgba(0,2,45,0.4); }
.rv-rank-nm { width:150px; flex:0 0 auto; font-size:12.5px; color:rgba(0,2,45,0.82); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rv-rank-bar { flex:1; min-width:40px; height:12px; background:#eef1f7; border-radius:7px; overflow:hidden; }
.rv-rank-bar span { display:block; height:100%; border-radius:7px; }
.rv-rank-v { width:46px; flex:0 0 auto; text-align:right; font-size:13px; font-weight:800; color:#00022D; }
.rv-flegend-col { flex-direction:column; align-items:flex-start; gap:9px; }
/* Cards de atividade (grid, todos visíveis) */
.rva-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:16px; }
.rva-card { background:#fff; border:1px solid rgba(0,2,45,0.08); border-radius:18px; padding:14px 16px; }
.rva-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.rva-head.rva-clic { cursor:pointer; }
.rva-dot { width:11px; height:11px; border-radius:4px; flex:0 0 auto; }
.rva-title { font-size:13px; font-weight:700; color:#00022D; }
.rva-n { margin-left:auto; font-size:20px; font-weight:800; color:#00022D; letter-spacing:-.5px; }
.rva-chev { color:rgba(0,2,45,0.4); font-size:12px; width:14px; text-align:center; }
.rva-head.rva-clic:hover .rva-chev { color:#7c5cff; }
.rva-detail { margin-top:14px; padding-top:14px; border-top:1px solid rgba(0,2,45,0.07); }
/* Card "Visão Geral do Dia" — menu de atividades (esquerda) */
.rvo { display:flex; flex-direction:column; gap:6px; }
.rvo-row { display:flex; align-items:center; gap:10px; width:100%; background:#fbfcfe; border:1px solid rgba(0,2,45,0.07); border-radius:12px; padding:11px 13px; cursor:pointer; font-family:inherit; text-align:left; transition:border-color .12s, background .12s; }
.rvo-row:hover { border-color:rgba(0,2,45,0.16); }
.rvo-row.on { border-color:#7c5cff; box-shadow:0 0 0 1px #7c5cff; background:#fff; }
.rvo-dot { width:11px; height:11px; border-radius:4px; flex:0 0 auto; }
.rvo-nm { font-size:13px; font-weight:700; color:#00022D; }
.rvo-n { margin-left:auto; font-size:18px; font-weight:800; color:#00022D; letter-spacing:-.5px; }
.rvo-chev { color:rgba(0,2,45,0.28); font-size:16px; width:12px; text-align:center; }
.rvo-row.on .rvo-chev { color:#7c5cff; }
/* Linha "Total" do menu (primeira, padrão) — leve destaque + separador */
.rvo-total { background:#f4f6fb; margin-bottom:6px; }
.rvo-total .rvo-nm { font-weight:800; letter-spacing:.3px; }
.rvo-total .rvo-n { font-size:20px; }
.rvo-filter { margin-top:12px; min-height:1px; }
.rvo-chip { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:#00022D; background:#f4f6fb; border:1px solid rgba(0,2,45,0.1); border-radius:999px; padding:4px 6px 4px 11px; }
.rvo-chip i { width:10px; height:10px; border-radius:3px; background:var(--c,#8892b0); }
.rvo-chip button { border:none; background:rgba(0,2,45,0.08); color:rgba(0,2,45,0.6); width:18px; height:18px; border-radius:50%; cursor:pointer; font-size:11px; line-height:1; }
.rvo-chip button:hover { background:rgba(255,45,85,0.15); color:#c81e3e; }
/* Segmentos e nomes interativos (cross-filter) */
.ps-seg.ps-click { cursor:pointer; }
.ps-seg.ps-on { outline:2px solid rgba(0,2,45,0.55); outline-offset:-1px; }
.ps-seg.ps-dim { opacity:0.32; }
.ps-name.ps-click { cursor:pointer; }
.ps-name.ps-click:hover { color:#7c5cff; }
.ps-name.ps-name-on { color:#7c5cff; font-weight:800; }
/* Legenda de funil clicável */
.rv-leg-btn { border:1px solid transparent; background:none; font-family:inherit; cursor:pointer; padding:3px 10px; border-radius:999px; color:rgba(0,2,45,0.62); font-size:11.5px; display:inline-flex; align-items:center; gap:6px; }
.rv-leg-btn:hover { background:rgba(0,2,45,0.05); color:#00022D; }
.rv-leg-btn.on { border-color:#7c5cff; background:rgba(124,92,255,0.08); color:#00022D; font-weight:700; }
/* Detalhe (card ao lado) precisa de altura mínima confortável */
#rv-detail { min-height:280px; }

/* Seções legadas (Atividades / Gestão de Pipeline / filtros): a classe
   .ger-legacy-dark permanece no HTML, mas o tema agora é CLARO — as regras base
   (.card/.ger-*/.dr-kpi/.table light) já se aplicam, sem necessidade de override. */
/* Toolbar compacta das subabas Ligações/Atividades: tag do período + botões pequenos */
.ger-sub-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.ger-sub-tag { font-size:11px; font-weight:600; letter-spacing:.2px; padding:4px 11px; border-radius:999px;
  background:rgba(139,123,255,0.16); color:#6a4bd0; border:1px solid rgba(139,123,255,0.4); white-space:nowrap; }
.ger-sub-btn { font-size:12px; font-weight:600; padding:6px 13px; border-radius:7px; cursor:pointer; line-height:1.2;
  background:#eef1f7; border:1px solid rgba(0,2,45,0.14); color:rgba(0,2,45,0.82); }
.ger-sub-btn:hover { background:#e8ebf3; color:#00022D; }
.ger-sub-btn-primary { background:#7c5cff; border-color:#7c5cff; color:#fff; }
.ger-sub-btn-primary:hover { background:#6a49f0; color:#fff; }

/* ═══ Subaba Ligações — tema dark (Nexora), reforço sobre o CSS legado/injetado ═══ */
#gsub-ligacoes { color:rgba(0,2,45,0.85); }
/* Funil 3D: card com CABEÇALHO (título) + área do funil abaixo (não sobrepõe) */
#gsub-ligacoes .glig-funnel-3d { display:flex; flex-direction:column; min-height:380px; padding:16px 18px; background:#fff; border:1px solid rgba(0,2,45,0.075); border-radius:18px; }
#gsub-ligacoes .glig-funnel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; }
#gsub-ligacoes .glig-funnel-hint { font-size:11px; font-weight:500; color:rgba(0,2,45,0.5); margin-top:2px; }
#gsub-ligacoes .glig-funnel-gear { background:#eef1f7; border:1px solid rgba(0,2,45,0.12); color:rgba(0,2,45,0.7); border-radius:8px; padding:5px 10px; font-size:12px; cursor:pointer; white-space:nowrap; }
#gsub-ligacoes .glig-funnel-gear:hover { background:#e8ebf3; color:#00022D; }
#gsub-ligacoes .glig-funnel-area { position:relative; flex:1; min-height:300px; }
#gsub-ligacoes .glig-funnel-area .nx-funnel-cv { position:absolute; inset:0; width:100%; height:100%; }
/* Cards de pipeline (glgc-*) e cabeçalhos — sobre o CSS injetado light */
#gsub-ligacoes .glgf-card { background:#fff !important; border-color:rgba(0,2,45,0.075) !important; color:#00022D !important; box-shadow:none !important; }
#gsub-ligacoes .glgf-title { color:#00022D !important; }
#gsub-ligacoes .glgf-sub { color:rgba(0,2,45,0.5) !important; }
#gsub-ligacoes .glgc-lbl { color:rgba(0,2,45,0.66) !important; }
#gsub-ligacoes .glgc-val { color:#00022D !important; }
#gsub-ligacoes .glgc-track { background:#e8ebf3 !important; }
#gsub-ligacoes .glgc-row:hover { background:rgba(139,123,255,0.14) !important; }
#gsub-ligacoes .glgc-row.glgc-on { background:rgba(139,123,255,0.22) !important; }
#gsub-ligacoes .glgc-row.glgc-on .glgc-lbl { color:#00022D !important; }
#gsub-ligacoes .glgc-filtro { color:rgba(0,2,45,0.72) !important; background:rgba(139,123,255,0.14) !important; border-color:rgba(139,123,255,0.35) !important; }
#gsub-ligacoes .glgc-filtro-off { color:rgba(0,2,45,0.4) !important; background:#fff !important; border-color:rgba(0,2,45,0.08) !important; }
#gsub-ligacoes .glgc-filtro button { color:#6a4bd0 !important; border-color:rgba(139,123,255,0.45) !important; }
/* Painel de configuração de etapas do funil (abaixo do cabeçalho, fluxo normal) */
#gsub-ligacoes #glgf-cfg { background:#fff; border:1px solid rgba(0,2,45,0.1); border-radius:12px; padding:12px 14px; margin-bottom:10px; }
#gsub-ligacoes .glgf-cfg { margin-top:0 !important; border-top:none !important; padding-top:0 !important; }
#gsub-ligacoes .glgf-cfg-t { color:rgba(0,2,45,0.55) !important; }
#gsub-ligacoes .glgf-cfg-row label { color:rgba(0,2,45,0.85) !important; }
#gsub-ligacoes .glgf-cfg-row:hover { background:#f4f6fb !important; }
#gsub-ligacoes .glgf-cfg-row .tag { color:rgba(0,2,45,0.45) !important; border-color:rgba(0,2,45,0.18) !important; }
#gsub-ligacoes .glgf-cfg-mv { color:rgba(0,2,45,0.7) !important; border-color:rgba(0,2,45,0.2) !important; }
#gsub-ligacoes .glgf-cfg-foot { color:rgba(0,2,45,0.4) !important; }
/* Caixas de análise (hora×dia · status · duração) */
#gsub-ligacoes .lig-visao-box { background:#fff !important; border-color:rgba(0,2,45,0.075) !important; }
#gsub-ligacoes .lig-visao-titulo { color:rgba(0,2,45,0.6) !important; }
/* Select de status */
#gsub-ligacoes select { background:#ffffff !important; color:#00022D !important; border-color:rgba(0,2,45,0.14) !important; }
/* Alinhamento dos cards de barras "por Pipeline" (label com LARGURA FIXA — sem
   isso, o max-content por linha desalinha as barras) */
#gsub-ligacoes .glgc-pipe .glgc-row { grid-template-columns:172px minmax(60px,1fr) auto !important; }
#gsub-ligacoes .glgc-pipe .glgc-lbl { overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; text-align:left !important; }
/* Contraste: tabela por corretor */
#gsub-ligacoes .table td { color:rgba(0,2,45,0.85) !important; }
#gsub-ligacoes .table td b { color:#00022D !important; }
/* Contraste: donut de Status + legenda (fill/color eram var(--text-*) claros do tema light) */
#gsub-ligacoes .lig-donut-center { fill:#00022D !important; }
#gsub-ligacoes .lig-donut-center-sub { fill:rgba(0,2,45,0.55) !important; }
#gsub-ligacoes .lig-legenda { color:rgba(0,2,45,0.85) !important; }
#gsub-ligacoes .lig-legenda-pct { color:rgba(0,2,45,0.55) !important; }
#gsub-ligacoes .lig-legenda-item:hover { background:#f4f6fb !important; }
/* Contraste: histograma de Duração */
#gsub-ligacoes .lig-bar-label { color:rgba(0,2,45,0.6) !important; }
#gsub-ligacoes .lig-bar-count { color:rgba(0,2,45,0.85) !important; }
#gsub-ligacoes .lig-bar-track { background:#e8ebf3 !important; }
/* Chips do cross-filter cumulativo (empilhamento de filtros, como em Resultados) */
.glig-chips { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:14px; }
.glig-chips-lbl { font-size:12px; font-weight:600; color:rgba(0,2,45,0.5); }
.glig-chip { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:#6a4bd0;
  background:rgba(139,123,255,0.16); border:1px solid rgba(139,123,255,0.35); border-radius:999px; padding:5px 6px 5px 12px; }
.glig-chip-x { background:#e8ebf3; border:none; color:#00022D; width:18px; height:18px; border-radius:50%;
  cursor:pointer; font-size:11px; line-height:1; display:flex; align-items:center; justify-content:center; }
.glig-chip-x:hover { background:rgba(255,60,90,0.7); }
.glig-chips-clear { margin-left:4px; background:none; border:none; color:rgba(0,2,45,0.5); font-size:12px;
  font-weight:600; cursor:pointer; text-decoration:underline; }
.glig-chips-clear:hover { color:#00022D; }
/* Linhas da tabela por corretor: clicáveis (cross-filter) */
#gsub-ligacoes .glig-corr-row { cursor:pointer; transition:background .12s; }
#gsub-ligacoes .glig-corr-row:hover td { background:rgba(139,123,255,0.1) !important; }
#gsub-ligacoes .glig-corr-row.glig-corr-on td { background:rgba(139,123,255,0.2) !important; }

/* ═══════════ Impressão / PDF do Pipeline (Gerencial) ═══════════
   O botão "Gerar PDF" usa a impressão nativa do navegador (print-to-PDF), não
   html2canvas, pra que a coluna Cliente continue sendo um link clicável no PDF.
   Aqui isolamos só a seção #dr-sec-pipeline; todo o resto some. */
#dr-pa-print-head { display:none; }
#dr-pa-print-head .dr-ph-title { font-size:17px; font-weight:800; color:#00022D; }
#dr-pa-print-head .dr-ph-sub { font-size:11px; color:rgba(0,2,45,0.6); margin-top:3px; }

@media print {
  @page { size: A4 landscape; margin: 10mm; }
  html, body { background:#fff !important; height:auto !important; overflow:visible !important; }

  /* Neutraliza os containers do app que clipam no print (.app-main é um scroller
     de viewport; .ger-shell é flex rail+conteúdo; vários têm height:100vh). Sem
     isso, o PDF sai em branco. A cadeia real é:
     #aba-daily-report > .container > .ger-shell > .ger-main > #gsub-pipeline */
  body.dr-print-pipeline .app-layout,
  body.dr-print-pipeline .app-main,
  body.dr-print-pipeline #aba-daily-report,
  body.dr-print-pipeline #aba-daily-report .container,
  body.dr-print-pipeline .ger-shell,
  body.dr-print-pipeline .ger-main {
    display:block !important; overflow:visible !important; position:static !important;
    height:auto !important; min-height:0 !important; max-height:none !important;
    width:auto !important; background:#fff !important;
  }
  body.dr-print-pipeline .tab-panel { animation:none !important; opacity:1 !important; transform:none !important; }

  /* Esconde tudo o que não for a seção do pipeline */
  body.dr-print-pipeline .sidebar,
  body.dr-print-pipeline #ger-filtros,
  body.dr-print-pipeline .ger-subnav,
  body.dr-print-pipeline .rot-bar,
  body.dr-print-pipeline .tab-panel:not(#aba-daily-report),
  body.dr-print-pipeline .ger-main > *:not(#gsub-pipeline) { display:none !important; }

  /* Seção e lista sempre visíveis, tema claro, sem sombra/borda/corte */
  body.dr-print-pipeline #gsub-pipeline,
  body.dr-print-pipeline #dr-sec-pipeline {
    display:block !important; background:#fff !important; box-shadow:none !important;
    border:0 !important; margin:0 !important; overflow:visible !important;
  }
  body.dr-print-pipeline #dr-sec-pipeline { color:#00022D; }
  body.dr-print-pipeline #dr-pa-body { padding:0 !important; }
  body.dr-print-pipeline #dr-pa-opps-body { display:block !important; padding-top:0 !important; }
  body.dr-print-pipeline #dr-pa-print-head { display:block !important; margin-bottom:12px; }

  /* Remove os controles interativos do PDF */
  body.dr-print-pipeline #dr-pa-head,
  body.dr-print-pipeline .dr-pa-toolbar,
  body.dr-print-pipeline #dr-pa-opps-head,
  body.dr-print-pipeline #dr-pa-colcfg,
  body.dr-print-pipeline #dr-pa-scrolltop,
  body.dr-print-pipeline #dr-pa-loading,
  body.dr-print-pipeline #dr-pa-pdf-btn,
  body.dr-print-pipeline #dr-pa-opps-body > div:first-child { display:none !important; }

  /* Tabela ocupa a página inteira, sem rolagem horizontal, sem quebrar linha no meio */
  body.dr-print-pipeline #dr-pa-scrollwrap { overflow:visible !important; }
  body.dr-print-pipeline #dr-pa-tbl { width:100% !important; font-size:10px !important; table-layout:auto; }
  body.dr-print-pipeline #dr-pa-tbl th { color:#00022D !important; background:#f4f6fb !important; }
  body.dr-print-pipeline #dr-pa-tbl th,
  body.dr-print-pipeline #dr-pa-tbl td { white-space:normal !important; word-break:break-word; }
  body.dr-print-pipeline #dr-pa-tbl tr { page-break-inside:avoid; }
  body.dr-print-pipeline .dr-kpi { background:#fff !important; }
  body.dr-print-pipeline .dr-pa-cliente-lnk { text-decoration:underline !important; }

  /* Mantém as cores (KPIs, linha de projeção, links) na impressão */
  body.dr-print-pipeline #dr-sec-pipeline,
  body.dr-print-pipeline #dr-sec-pipeline * {
    -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   VENDAS · RANKING — variáveis do tema (port Apps Script) escopadas em #aba-vendas
   + classes usadas pelo static/vendas_ranking.js. Paleta light (app é light-only).
   ═══════════════════════════════════════════════════════════════════════════ */
#aba-vendas {
  --bg: #f0f2f8;
  --bg2: var(--bg-card, #ffffff);
  --bg3: #eef0f6;
  --bd: rgba(0, 0, 0, 0.1);
  --bd2: rgba(0, 0, 0, 0.16);
  --tx: var(--text-main, #1a1e2e);
  --t2: #3a4258;
  --t3: #6a7288;
  --gold: #7a5800;
  --gold2: #a07a10;
  --gbg: rgba(120, 90, 0, 0.08);
  --m-super-bar: #0090c0;  --m-super-tx: #0080b0;
  --m-desafio-bar: #a07000; --m-desafio-tx: #906000;
  --m-3-bar: #2060c0; --m-3-tx: #1060c0;
  --m-2-bar: #1a9060; --m-2-tx: #1a8050;
  --m-1-bar: #9a7800; --m-1-tx: #8a6800;
  --m-4-bar: #b040a0; --m-5-bar: #6030c0; --m-6-bar: #208060;
  --m-7-bar: #c06020; --m-8-bar: #2070b0; --m-9-bar: #b03050; --m-10-bar: #4ab830;
}
/* Toggle de modos (Equipes / Individual / Consolidado) */
#aba-vendas .vdr-modebar {
  display: flex;
  gap: 0;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--bd);
}
#aba-vendas .vdr-modetab {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--t2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  user-select: none;
  --on: var(--gold2);
}
#aba-vendas .vdr-modetab.on {
  color: var(--on);
  border-bottom-color: var(--on);
  font-weight: 700;
}
/* Cards do herói (reaproveita .vd-ec-*) */
#aba-vendas .vd-card {
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 14px 16px;
}
#aba-vendas .vd-card .vd-ec-label {
  font-size: 0.72rem;
  color: var(--t3);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
#aba-vendas .vd-card .vd-ec-val {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--tx);
  font-variant-numeric: tabular-nums;
}
#aba-vendas .vd-card .vd-ec-sub {
  font-size: 0.75rem;
  color: var(--t2);
  margin-top: 2px;
  line-height: 1.5;
}
#aba-vendas .vd-card-gold .vd-ec-val {
  color: var(--gold2);
}
/* Cards de corretor no ranking */
#aba-vendas .vd-rank-card {
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: 12px;
}
#aba-vendas .vd-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--t3);
}