/*
===============================================================================
  GENESIS VISION ANALYTICS - Dashboard de métricas em tempo real
===============================================================================
  Classes isoladas com prefixo .gva-*
  Mini-dashboard flutuante estilo HUD futurista.
  Não conflita com nenhum CSS existente.
*/

.gva-dashboard{
  position: fixed;
  top: 100px;
  left: 20px;
  width: 300px;
  background: linear-gradient(180deg, rgba(0, 10, 25, 0.96), rgba(0, 20, 45, 0.92));
  border: 1px solid rgba(0, 240, 255, 0.45);
  border-radius: 12px;
  color: #e0f7ff;
  font-family: 'Orbitron', 'Rajdhani', Arial, sans-serif;
  z-index: 80;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 10px 40px rgba(0, 240, 255, 0.25),
              0 0 0 1px rgba(0, 240, 255, 0.15);
  animation: gvaEntry .35s cubic-bezier(.4,0,.2,1);
}
@keyframes gvaEntry{
  from { opacity: 0; transform: translateY(-10px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.gva-dashboard.gva-minimized .gva-body{ display: none; }

/* Header */
.gva-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.15), rgba(0, 240, 255, 0.06));
  border-bottom: 1px solid rgba(0, 240, 255, 0.35);
  cursor: move;
  user-select: none;
  border-radius: 12px 12px 0 0;
}
.gva-title{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2.5px;
  color: #00f0ff;
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.7);
}
.gva-live-dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #f05;
  box-shadow: 0 0 6px #f05;
  animation: gvaPulse 1.3s infinite;
}
@keyframes gvaPulse{
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.5; transform: scale(1.25); }
}
.gva-actions{ display: flex; gap: 4px; }
.gva-btn{
  width: 22px; height: 22px;
  background: transparent;
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: #00f0ff;
  border-radius: 50%;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 0;
  transition: .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gva-btn:hover{ background: rgba(0,240,255,.2); box-shadow: 0 0 8px #00f0ff; }
.gva-close:hover{ background: rgba(255,0,85,.3); border-color: #f05; color: #fff; box-shadow: 0 0 10px #f05; }

/* Body - lista rolável de seções */
.gva-body{
  max-height: 70vh;
  overflow-y: auto;
  padding: 12px 14px;
}
.gva-body::-webkit-scrollbar{ width: 4px; }
.gva-body::-webkit-scrollbar-track{ background: rgba(0,240,255,.05); }
.gva-body::-webkit-scrollbar-thumb{ background: rgba(0,240,255,.35); border-radius: 2px; }

/* Seções */
.gva-section{
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 240, 255, 0.12);
}
.gva-section:last-child{ border-bottom: none; margin-bottom: 0; }
.gva-section-title{
  font-size: 9px;
  letter-spacing: 2.5px;
  color: rgba(0, 240, 255, 0.75);
  margin-bottom: 8px;
  font-weight: 700;
}

/* Métricas em duas colunas */
.gva-row{ display: flex; gap: 10px; }
.gva-metric{
  flex: 1;
  background: rgba(0, 240, 255, 0.05);
  border: 1px solid rgba(0, 240, 255, 0.15);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
  transition: .2s;
}
.gva-metric:hover{ background: rgba(0, 240, 255, 0.1); border-color: rgba(0, 240, 255, 0.4); }
.gva-metric-value{
  font-size: 22px;
  font-weight: 900;
  color: #00f0ff;
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.5);
  font-family: 'Orbitron';
}
.gva-metric-label{
  font-size: 9px;
  letter-spacing: 1.5px;
  color: rgba(0, 240, 255, 0.7);
  margin-top: 2px;
}

/* Gauge horizontal (atenção) */
.gva-gauge{ display: flex; align-items: center; gap: 10px; }
.gva-gauge-bar{
  flex: 1;
  height: 8px;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.gva-gauge-fill{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00f0ff, #ff00ff);
  box-shadow: 0 0 8px #00f0ff;
  transition: width .45s cubic-bezier(.4,0,.2,1);
}
.gva-gauge-value{
  font-size: 16px;
  font-weight: 900;
  color: #00f0ff;
  min-width: 40px;
  text-align: right;
}

/* Score de produtividade (grande número) */
.gva-score{
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  padding: 8px 0;
}
.gva-score-value{
  font-size: 36px;
  font-weight: 900;
  color: #00f0ff;
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
  font-family: 'Orbitron';
  line-height: 1;
}
.gva-score-label{
  font-size: 11px;
  color: rgba(0, 240, 255, 0.6);
  letter-spacing: 2px;
}

/* Linhas de info simples (label: valor) */
.gva-row-full{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 11px;
}
.gva-label{
  color: rgba(0, 240, 255, 0.65);
  letter-spacing: 1.5px;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 10px;
}
.gva-val{
  color: #e0f7ff;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: 'Rajdhani';
  font-size: 12px;
}
.gva-status{
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  text-transform: uppercase;
}
.gva-status.gva-ativo{ background: rgba(0,255,136,.15); color: #0f8; border: 1px solid rgba(0,255,136,.35); }
.gva-status.gva-ocioso{ background: rgba(255,170,0,.12); color: #fa0; border: 1px solid rgba(255,170,0,.3); }
.gva-status.gva-interagindo{ background: rgba(255,0,255,.15); color: #f0f; border: 1px solid rgba(255,0,255,.35); }
.gva-status.gva-ausente{ background: rgba(120,120,120,.15); color: #aaa; border: 1px solid rgba(120,120,120,.3); }

/* Emoção colorida */
.gva-val.gva-emotion-feliz{ color: #0f8; }
.gva-val.gva-emotion-neutro{ color: #e0f7ff; }
.gva-val.gva-emotion-triste{ color: #6ab; }
.gva-val.gva-emotion-irritado{ color: #f05; }
.gva-val.gva-emotion-surpreso{ color: #ff0; }

/* Barra de tempo ativo vs ocioso */
.gva-time-bar{
  height: 10px;
  background: rgba(255, 170, 0, 0.2);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  margin-bottom: 6px;
  border: 1px solid rgba(0, 240, 255, 0.2);
}
.gva-time-active{
  height: 100%;
  background: linear-gradient(90deg, #00f0ff, #0f8);
  box-shadow: 0 0 8px #00f0ff;
  transition: width .6s;
  width: 0%;
}
.gva-time-labels{
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 1px;
}
.gva-time-labels strong{ color: #00f0ff; }

/* Mapa de zona (heatmap simplificado) */
.gva-heatmap{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: rgba(0, 240, 255, 0.03);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 6px;
  overflow: hidden;
  background-image:
    linear-gradient(rgba(0, 240, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.1) 1px, transparent 1px);
  background-size: 25% 33.33%;
}
.gva-dot{
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, #00f0ff 0%, rgba(0, 240, 255, 0) 70%);
  box-shadow: 0 0 10px #00f0ff;
  transform: translate(-50%, -50%);
  transition: left .4s, top .4s;
  animation: gvaPulse 1.5s infinite;
}

/* Histograma de emoções */
.gva-emotions{
  display: flex;
  gap: 4px;
  align-items: flex-end;
  height: 40px;
}
.gva-emo-bar{
  flex: 1;
  background: rgba(0, 240, 255, 0.15);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: height .5s;
  position: relative;
}
.gva-emo-bar::after{
  content: attr(data-emotion);
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  letter-spacing: 0.5px;
  color: rgba(0, 240, 255, 0.6);
}

/* Mobile adjust */
@media (max-width: 600px){
  .gva-dashboard{
    width: calc(100% - 20px);
    left: 10px;
    top: 70px;
  }
}

/* Tema claro - adapta cores */
body.light-theme .gva-dashboard{
  background: linear-gradient(180deg, rgba(238, 242, 246, 0.97), rgba(221, 228, 235, 0.94));
  border-color: rgba(0, 136, 200, 0.45);
  color: #18222f;
  box-shadow: 0 10px 40px rgba(0, 136, 200, 0.2),
              0 0 0 1px rgba(0, 136, 200, 0.15);
}
body.light-theme .gva-title{ color: #004870; text-shadow: 0 0 6px rgba(0, 136, 200, 0.4); }
body.light-theme .gva-header{
  background: linear-gradient(180deg, rgba(0, 168, 222, 0.12), rgba(0, 136, 200, 0.05));
  border-bottom-color: rgba(0, 136, 200, 0.3);
}
body.light-theme .gva-metric{ background: rgba(0,168,222,.06); border-color: rgba(0,136,200,.2); }
body.light-theme .gva-metric-value,
body.light-theme .gva-score-value,
body.light-theme .gva-gauge-value{ color: #0088c8; }
body.light-theme .gva-label{ color: #4a5664; }
body.light-theme .gva-val{ color: #18222f; }
body.light-theme .gva-section-title{ color: #004870; }