/* ==========================================================================
   1. VARIÁVEIS E CORES GLOBAIS
   ========================================================================== */
:root {
    --win-blue: #007FFF;           /* Azul RX Mikrotik */
    --win-red: rgba(220, 53, 69, 0.7); /* Vermelho TX (70% Transparência) */
    --status-green: #28a745;       /* A Todo Vapor */
    --status-yellow: #ffc107;      /* Intervalo Almoço */
    --status-red: #dc3545;         /* Fechado / Feriado */
    --bg-dark-tech: #010a1a;       /* Dark Tech Profundo */
    --border-color: #e0e6ed;
    --text-main: #2c3e50;
}

/* ==========================================================================
   2. ESTRUTURA GERAL DO DASHBOARD
   ========================================================================== */
body {
    background-color: #f4f7f6;
    font-family: 'Segoe UI', Tahoma, sans-serif;
}

.dash-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   3. GRÁFICO MIKROTIK (INTERFACES TRAFFIC)
   ========================================================================== */
.latency-graph-container {
    height: 150px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 1px;
    border: 1px solid #333; /* Borda externa escura */
    
    /* BACKGROUND COMPOSTO: Cor de fundo + Grade Grafite */
    background: 
        linear-gradient(rgba(0, 0, 0, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.15) 1px, transparent 1px),
        #fafafa !important; /* Cor de fundo por último */
    
    /* Tamanho dos quadrados da grade */
    background-size: 100% 20px, 40px 100% !important;
}}Up {
    display: inline-block;
    min-width: 95px; /* Largura fixa para o texto não pular */
    text-align: right;
    font-family: 'Consolas', monospace;
    font-weight: bold;
}

.bar-wrapper {
    position: relative;
    width: 6px;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
}

.bar-down {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: var(--win-blue) !important;
    z-index: 1;
}

.bar-up {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: var(--win-red) !important;
    z-index: 2;
}


/* ==========================================================================
   4. ABRANGÊNCIA REGIONAL (MAPA TECH -  MIKROTIK)
   ========================================================================== */
.globo-wrapper {
    position: relative;
    background: #fafafa !important; 
    border-radius: 12px;
    overflow: hidden;
    height: 450px;
    border: 1px solid #333; 
    box-sizing: border-box;
}

/* Grade Mikrotik */
.globo-wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;

    /* MESMA GRADE DA ETHER1: Linhas escuras sobre fundo claro */
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.15) 1px, transparent 1px) !important;
    
    background-size: 40px 40px !important;
    pointer-events: none;
}

.map-placeholder-dynamic {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 2;
}

/* Ponto Centralizado */
.point-hub {
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--win-blue);
    border-radius: 50%;
    z-index: 10;
    box-shadow: 0 0 15px var(--win-blue);
    transform: translate(-50%, -50%); /* Centraliza no ponto exato */
    box-sizing: border-box;
}

/* Animação deAnimação de Pulso (Fixada no Centro) */
.point-hub::before {
    content: '';
    position: absolute;
    top: 0; left: 0; /* Alinha no topo esquerdo da bolinha pai */
    width: 100%; height: 100%;
    border: 2px solid var(--win-blue);
    border-radius: 50%;
    box-sizing: border-box;
    animation: pulse-ring 2s infinite;
}

/* Nome da Unidade */
.p{
    content: attr(data-label); 
    position: absolute;
    top: 25px; 
    left: 50%;
    transform: translateX(-50%); 
    color: #333; 
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
    text-shadow: none;
    letter-spacing: 0.5px;
}

/* Posições Estilo Mapa de Rede */
.point-belem { /* Belém fica mais à esquerda (Oeste) */
    top: 30%; 
    left: 15%; 
} 
.point-castanhal { /* Matriz Castanhal no centro do eixo */
    top: 45%; 
    left: 45%; 
} 
.point-sm-para { /* Santa Maria do Pará mais abaixo e à direita (Sudeste de Castanhal) */
    top: 50%; 
    left: 55%; 
}

/* Rodapé JNSOFT */
.globo-wrapper .mt-4 {
    position: absolute;
    bottom: 20px;
    width: 100%;
    z-index: 5;
    color: #666 !important; 
    pointer-events: none;
}

/* Animação que expande do centro */
@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(3.5); opacity: 0; }
}




/* ==========================================================================
   5. STATUS DAS UNIDADES (ESTILO CLEAN)
   ========================================================================== */
.status-indicator {
    font-size: 12px;
    font-weight: 700;
    padding: 2px 0;
    display: flex;
    align-items: center;
    background: transparent !important; /* Remove fundo */
    border: none !important;           /* Remove borda */
}

.status-online { color: var(--status-green) !important; }
.status-online i { color: var(--status-green); }

.status-lunch { color: var(--status-yellow) !important; }
.status-lunch i { color: var(--status-yellow); }

.status-closed { color: var(--status-red) !important; }
.status-closed i { color: var(--status-red); }

/* ==========================================================================
   6. RECURSOS DO SISTEMA (CPU/TEMP/UPTIME)
   ========================================================================== */
.robot-status-card {
    border-radius: 10px;
    background: #fff;
}

#valIntegridade, #valTemp, #valUptime {
    font-family: 'Consolas', monospace;
    font-weight: bold;
}

/* ==========================================================================
   7. AUXILIARES E ANIMAÇÕES
   ========================================================================== */
.text-primary { color: var(--win-blue) !important; }
.text-danger { color: var(--status-red) !important; }

@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(2.5); opacity: 0; }
}

.point-hub::before {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    border: 2px solid var(--win-blue);
    border-radius: 50%;
    animation: pulse-ring 2s infinite;
}