/* =================================================================
   UI-47-11.CSS - Componentes visuais (Gemini UI Upgrade)
   - Barras de Comparacao BILATERAIS (A Favor / Contra)
   - Matriz Comparativa de Planos
   - Tipografia TECH (Chakra Petch / Rajdhani)
   ================================================================= */

/* ---------- TIPOGRAFIA TECH ---------- */
.tech-title, .tech-sub, .tech-body {
  font-family: 'Chakra Petch', 'Rajdhani', 'Inter', sans-serif !important;
}
.tech-title { font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.tech-sub   { font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.tech-body  { font-weight: 500; }

/* ---------- GLOWS (text-shadow) ---------- */
.glow-gold   { text-shadow: 0 0 8px rgba(245,200,0,0.6); }
.glow-green  { text-shadow: 0 0 8px rgba(0,230,118,0.6); }
.glow-red    { text-shadow: 0 0 8px rgba(255,61,113,0.6); }
.glow-cyan   { text-shadow: 0 0 8px rgba(0,240,255,0.6); }
.glow-purple { text-shadow: 0 0 8px rgba(179,136,255,0.6); }

/* ---------- BARRA DE COMPARACAO BILATERAL ---------- */
/* Estrutura HTML:
   <div class="dual-bar">
     <div class="dual-bar-row">
       <div class="dual-bar-fav" style="width: 70%"><span>70%</span></div>
       <div class="dual-bar-center">Métrica</div>
       <div class="dual-bar-ctr" style="width: 30%"><span>30%</span></div>
     </div>
   </div>
*/
.dual-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.dual-bar-row {
  display: flex;
  align-items: stretch;  /* FASE 47.27: explicito para barra esticar */
  gap: 0;
  height: 32px;
  position: relative;
  white-space: nowrap;
  box-sizing: border-box;
}
.dual-bar-fav, .dual-bar-ctr {
  height: 26px;
  display: flex;
  align-items: center;
  font-family: 'Chakra Petch', 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 12px;
  position: relative;
  border-radius: 4px;
  transition: all 0.2s;
}
.dual-bar-fav {
  background: linear-gradient(90deg, #00E676 0%, rgba(0,230,118,0.4) 100%);
  color: #fff;
  justify-content: center;
  padding: 0 8px;
  box-shadow: 0 0 12px rgba(0,230,118,0.4);
  border: 1px solid #00E676;
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.dual-bar-ctr {
  background: linear-gradient(270deg, #FF3D71 0%, rgba(255,61,113,0.4) 100%);
  color: #fff;
  justify-content: center;
  padding: 0 8px;
  box-shadow: 0 0 12px rgba(255,61,113,0.4);
  border: 1px solid #FF3D71;
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.dual-bar-fav:hover, .dual-bar-ctr:hover {
  filter: brightness(1.15);
  transform: scale(1.02);
}
/* FASE 47.28: BARRA DUPLA = container 100% com verde a esquerda + gap + vermelha a direita */
.dual-bar-row {
  display: block;  /* FASE 47.28: nao precisa de flex (verdes/vermelha em absolute) */
  height: 32px;
  position: relative;  /* FASE 47.28: ancora para absolute das barras e circulo */
  white-space: nowrap;
  box-sizing: border-box;
}
.dual-bar-fav, .dual-bar-ctr {
  height: 100%;  /* FASE 47.27: esticar com row (alinhado com circulo) */
  display: flex;
  align-items: center;
  justify-content: center;  /* CENTRO */
  font-family: 'Chakra Petch', 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 12px;  /* FASE 47.29: 13 -> 12 (mais compacto, cabe em barras pequenas) */
  position: absolute;  /* FASE 47.28: absolute para alinhar independente da soma */
  top: 0;
  border-radius: 4px;
  transition: all 0.2s;
  text-shadow: 0 0 4px rgba(0,0,0,0.7);
  box-sizing: border-box;
  z-index: 1;  /* FASE 47.28: abaixo do circulo */
  white-space: nowrap;  /* FASE 47.29: nao quebra linha */
  overflow: hidden;  /* FASE 47.29: nao transborda */
}
.dual-bar-fav {
  left: 0;  /* FASE 47.28: verde a ESQUERDA */
  background: linear-gradient(90deg, #00E676 0%, rgba(0,230,118,0.5) 100%);
  color: #fff;
  box-shadow: 0 0 10px rgba(0,230,118,0.4);
  border: 1px solid #00E676;
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.dual-bar-ctr {
  /* FASE 47.29: vermelha COLADA na verde (left: ${favW}% inline, width: ${ctrW}%) */
  left: 0;  /* valor real vem inline */
  background: linear-gradient(270deg, #FF3D71 0%, rgba(255,61,113,0.5) 100%);
  color: #fff;
  box-shadow: 0 0 10px rgba(255,61,113,0.4);
  border: 1px solid #FF3D71;
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.dual-bar-fav:hover, .dual-bar-ctr:hover {
  filter: brightness(1.2);
}
/* FASE 47.17: Circulo MENOR, NA INTERSECAO exata */
/* FASE 47.21: circulo NA INTERSECAO EXATA das barras, PROPORCIONAL a menor barra */
.dual-bar-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #0a1224 0%, #1a2244 100%);
  border: 1.5px solid var(--y);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 3;
  box-shadow: 0 0 10px rgba(245,200,0,0.5), 0 0 4px rgba(0,0,0,0.6);
  flex-shrink: 0;
  overflow: hidden;
}
.dual-bar-center .metric-name {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 9px;  /* FASE 47.25: 7 -> 9 (circulo maior) */
  color: var(--y);
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  padding: 0 2px;
  letter-spacing: 0;
}
.dual-bar-center .metric-icon {
  font-size: 16px;  /* FASE 47.25: 12 -> 16 (circulo maior) */
  line-height: 1;
  margin-bottom: 2px;
}
.dual-bar-fav span, .dual-bar-ctr span { display: block; }  /* FASE 47.17: numero VISIVEL dentro da barra */
/* FASE 47.17: Labels abaixo (mantidos) */
.dual-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  margin-top: 6px;
  padding: 0 4px;
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.dual-bar-fav-lbl { color: #00E676; }
.dual-bar-ctr-lbl { color: #FF3D71; }
.dual-bar-fav { min-width: 40px; }
.dual-bar-ctr { min-width: 40px; }

/* Versao menor (cards compactos) */
.dual-bar.dual-bar-sm .dual-bar-row { height: 26px; }
.dual-bar.dual-bar-sm .dual-bar-fav, .dual-bar.dual-bar-sm .dual-bar-ctr { height: 100%; font-size: 11px; }
.dual-bar.dual-bar-sm .dual-bar-center { width: 50px; height: 50px; }

/* ---------- MATRIZ COMPARATIVA DE PLANOS ---------- */
.plan-matrix {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 0;
  background: var(--bg2);
  border: 1px solid var(--bdr);
  border-radius: 10px;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  margin: 16px 0;
}
.plan-matrix > div {
  padding: 12px 14px;
  border-bottom: 1px solid var(--bdr);
}
.plan-matrix .pm-head {
  background: linear-gradient(135deg, #0d1b2e 0%, #122038 100%);
  font-family: 'Chakra Petch', 'Rajdhani', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--y);
  border-bottom: 2px solid var(--y);
}
.plan-matrix .pm-feature {
  background: var(--bg3);
  font-weight: 600;
  color: var(--t);
}
.plan-matrix .pm-vip-apostador,
.plan-matrix .pm-vip-analitico,
.plan-matrix .pm-vip-master {
  text-align: center;
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 600;
  font-size: 13px;
}
.plan-matrix .pm-yes {
  color: #00E676;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(0,230,118,0.4);
}
.plan-matrix .pm-no {
  color: var(--t3);
}
.plan-matrix .pm-master {
  background: linear-gradient(135deg, rgba(245,200,0,0.12) 0%, rgba(179,136,255,0.12) 100%);
  color: #FFCC00;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(245,200,0,0.5);
  border-left: 2px solid var(--y);
  border-right: 2px solid var(--y);
}
.plan-matrix .pm-master-cell {
  background: linear-gradient(135deg, rgba(245,200,0,0.06) 0%, rgba(179,136,255,0.06) 100%);
  border-left: 2px solid var(--y);
  border-right: 2px solid var(--y);
}
.plan-matrix .pm-row-label {
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 600;
  font-size: 12px;
}
.plan-matrix .pm-crown {
  display: inline-block;
  font-size: 14px;
  margin-right: 4px;
  filter: drop-shadow(0 0 4px rgba(245,200,0,0.7));
}

/* Cores especificas da matriz (header) */
.plan-matrix .pm-vip-apostador.pm-head { color: #00E676; border-bottom-color: #00E676; }
.plan-matrix .pm-vip-analitico.pm-head { color: #00F0FF; border-bottom-color: #00F0FF; }
.plan-matrix .pm-vip-master.pm-head   { color: #FFCC00; border-bottom-color: #FFCC00; }

/* ---------- LOGO CANAL (TikTok style) ---------- */
.canal-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #0a2540 0%, #1a3a5c 100%);
  border: 2px solid var(--y);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 0 20px rgba(245,200,0,0.3);
  margin: 12px 0;
}
.canal-logo-img {
  width: 64px; height: 64px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0d1b2e 0%, #1a2244 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  border: 2px solid var(--y);
  box-shadow: 0 0 12px rgba(245,200,0,0.4);
  overflow: hidden;
  flex-shrink: 0;
}
.canal-logo-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.canal-logo-text {
  display: flex; flex-direction: column; gap: 2px;
}
.canal-logo-title {
  font-family: 'Chakra Petch', 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--y);
  letter-spacing: 0.03em;
  text-shadow: 0 0 8px rgba(245,200,0,0.4);
}
.canal-logo-sub {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--t2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---------- FAVOR/CONTRA CARDS (VIP Analitico) ---------- */
.fc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 8px 0;
}
.fc-card {
  background: var(--bg3);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.fc-card.fc-fav { border-left: 3px solid #00E676; }
.fc-card.fc-ctr { border-left: 3px solid #FF3D71; }
.fc-card .fc-label {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--t2);
}
.fc-card.fc-fav .fc-label { color: #00E676; }
.fc-card.fc-ctr .fc-label { color: #FF3D71; }
.fc-card .fc-value {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--t);
}
.fc-card.fc-fav .fc-value { color: #00E676; }
.fc-card.fc-ctr .fc-value { color: #FF3D71; }

/* FASE 47.26: Janelas ABERTURA & HT padronizadas (4 colunas fixas, sem barra rolagem) */
.dual-bar-host {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;  /* FASE 47.26: 4 colunas FIXAS */
  gap: 12px;
  align-items: stretch;
}
.dual-bar-host .sel-block {
  display: flex !important;
  flex-direction: column !important;
  /* FASE 47.28: min/max-height/overflow aplicados via INLINE (defesa dupla) */
  padding: 12px !important;
  box-sizing: border-box !important;
}
.dual-bar-host .sel-block .dual-bar {
  margin: 4px 0 !important;
}
.dual-bar-host .sel-block > div:last-child {
  margin-top: auto !important;  /* empurra label inferior para o fundo */
}
/* FASE 47.26: FORCAR texto da barra a nao ser cortado pelo circulo */
/* padding e alinhamento serao aplicados via inline style pelo _vm_g_dualBar */