/* ══════════════════════════════════════════════
   SPACESHIELD AI v5.2 · head.css
   Tema: STAR WARS · HUD GALÁCTICO · SCI-FI
   Variáveis, reset, topbar, layout
══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&display=swap');

:root {
    /* ── GALACTIC PALETTE · HUD de nave/console imperial-rebelde ── */
    --bg:        #050a0f;
    --bg2:       #08121c;
    --bg3:       #0c1a26;
    --bg4:       #10222f;
    --accent:    #00d4ff;       /* neon cyan · cor primária do HUD */
    --accent2:   #38bdf8;       /* azul HUD secundário */
    --green:     #00ff9d;       /* matrix green */
    --red:       #ff3860;       /* hot red */
    --orange:    #ff8a3d;       /* neon orange */
    --yellow:    #ffd60a;       /* electric yellow */
    --purple:    #a855f7;       /* electric purple · uso pontual (IA) */
    --pink:      #ff2d95;       /* hot magenta · uso pontual (alertas críticos) */
    --neon-blue: #0055ff;
    --text:      #a8cbe0;
    --text1:     #d7ecff;
    --text2:     #86adc9;
    --text3:     #4d7290;
    --border:    rgba(0,212,255,0.16);
    --border2:   rgba(0,212,255,0.28);
    --iso-gold:  #ffd60a;
    --iso-green: #00ff9d;

    /* ── TIPOGRAFIA · console holográfico Star Wars ── */
    --three-d-font: 'Orbitron', sans-serif;
    --mono-font:  'Share Tech Mono', monospace;
    --body-font:  'Exo 2', 'Share Tech Mono', monospace;

    /* ── GLOW EFFECTS · mais contidos, tom "premium HUD" ── */
    --glow-cyan:   0 0 6px #00d4ff, 0 0 16px rgba(0,212,255,0.35);
    --glow-pink:   0 0 6px #ff2d95, 0 0 16px rgba(255,45,149,0.3);
    --glow-green:  0 0 6px #00ff9d, 0 0 16px rgba(0,255,157,0.32);
    --glow-yellow: 0 0 6px #ffd60a, 0 0 16px rgba(255,214,10,0.32);
    --glow-red:    0 0 6px #ff3860, 0 0 16px rgba(255,56,96,0.32);
    --glow-purple: 0 0 6px #a855f7, 0 0 16px rgba(168,85,247,0.32);

    /* ── SUPERFÍCIES · glassmorphism / elevação ── */
    --glass-bg:      linear-gradient(155deg, rgba(12,26,38,0.72), rgba(5,10,15,0.85));
    --glass-border:  rgba(0,212,255,0.16);
    --radius-sm:     6px;
    --radius-md:     10px;
    --radius-lg:     18px;
    --shadow-card:   0 4px 24px rgba(0,0,0,0.35);
    --shadow-elev:   0 12px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,212,255,0.08);

    /* Pentest vars */
    --phase-color: rgba(255,56,96,0.3);
    --fill-start:  #ff3860;
    --fill-end:    #ff7a95;
}

/* ══════════════════════════════════════════════
   RESET
══════════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

/* ══════════════════════════════════════════════
   BODY · CYBERPUNK CRT SCREEN
══════════════════════════════════════════════ */
html, body {
    height:      100%;
    background:  var(--bg);
    color:       var(--text1);
    font-family: var(--mono-font);
    font-size:   13px;
    overflow-x:  hidden;
}

/* CRT Scanlines overlay · sutil, tom "console de nave" premium */
body::before {
    content:    '';
    position:   fixed;
    top:        0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.09) 2px,
        rgba(0, 0, 0, 0.09) 4px
    );
    pointer-events: none;
    z-index:    9999;
    animation:  crtFlicker 8s ease-in-out infinite;
    opacity:    .7;
}

/* Cyberpunk grid background + glow radial no topo (efeito "plataforma futurista") */
body::after {
    content:    '';
    position:   fixed;
    top:        0; left: 0; right: 0; bottom: 0;
    background-image:
        radial-gradient(ellipse 900px 500px at 50% -10%, rgba(0,212,255,0.07), transparent 70%),
        linear-gradient(rgba(0,212,255,0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,212,255,0.028) 1px, transparent 1px);
    background-size: 100% 100%, 42px 42px, 42px 42px;
    pointer-events:  none;
    z-index:         0;
}

@keyframes crtFlicker {
    0%, 95%, 100% { opacity: 1; }
    96%            { opacity: 0.97; }
    97%            { opacity: 1; }
    98%            { opacity: 0.95; }
    99%            { opacity: 1; }
}

a { color: var(--accent); text-shadow: var(--glow-cyan); }

/* ══════════════════════════════════════════════
   TOPBAR · STAR WARS COMMAND HUD
══════════════════════════════════════════════ */
.topbar {
    display:        flex;
    align-items:    center;
    gap:            14px;
    padding:        0 16px;
    height:         52px;
    background:     linear-gradient(180deg, rgba(10,22,32,0.92) 0%, rgba(5,10,15,0.96) 100%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter:         blur(10px);
    border-bottom:  1px solid var(--border2);
    box-shadow:     0 1px 0 rgba(0,212,255,0.12),
                    0 8px 28px rgba(0,0,0,0.35),
                    inset 0 -1px 0 rgba(0,212,255,0.08);
    flex-shrink:    0;
    flex-wrap:      wrap;
    position:       relative;
    z-index:        100;
}

/* Neon top stripe · gradiente cyan→azul, sóbrio e contínuo */
.topbar::before {
    content:    '';
    position:   absolute;
    top:        0; left: 0; right: 0;
    height:     2px;
    background: linear-gradient(90deg, transparent, var(--accent), var(--accent2), var(--accent), transparent);
    background-size: 200% 100%;
    animation:  neonStripe 6s linear infinite;
    opacity:    .85;
}

@keyframes neonStripe {
    0%   { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

/* ── LOGO ── */
.logo-block {
    position:    relative;
    display:     flex;
    align-items: center;
    flex-shrink: 0;
}

.logo {
    font-family:    var(--three-d-font);
    font-size:      10px;
    color:          var(--accent);
    letter-spacing: 2px;
    white-space:    nowrap;
    text-shadow:    var(--glow-cyan);
    transform-style: preserve-3d;
}
.logo span        { color: var(--pink); text-shadow: var(--glow-pink); }
.version-label    {
    font-family:  var(--three-d-font);
    font-size:    6px;
    color:        var(--purple);
    margin-left:  8px;
    text-shadow:  var(--glow-purple);
}

.logo-actions {
    position:    relative;
    display:     flex;
    align-items: center;
    margin-left: 10px;
}

.logo-actions .topbar-menu-item {
    padding:     6px 9px;
    font-size:   9px;
    white-space: nowrap;
    text-align:  left;
}

/* ── CORP BADGE ── */
.corp-badge {
    font-family:    var(--three-d-font);
    font-size:      6px;
    color:          var(--text3);
    margin-left:    auto;
    white-space:    nowrap;
    letter-spacing: 1px;
}

/* ── STATUS BAR · STAR WARS COMMAND HUD ── */
.status-bar {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   wrap;
}

.status-dot {
    width:         8px;
    height:        8px;
    border-radius: 0;           /* 3D square */
    background:    var(--green);
    box-shadow:    var(--glow-green);
    animation:     threeDPulse 1.6s steps(2, end) infinite;
    flex-shrink:   0;
    transform-style: preserve-3d;
}
.status-dot-accent { background: var(--accent); box-shadow: var(--glow-cyan); }
.status-dot-purple { background: var(--purple); box-shadow: var(--glow-purple); }
.status-dot-gold   { background: var(--yellow); box-shadow: var(--glow-yellow); }

@keyframes threeDPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .2; }
}

/* legacy pulse alias */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .3; }
}

.status-text {
    font-family:    var(--three-d-font);
    font-size:      6px;
    color:          var(--text3);
    white-space:    nowrap;
    letter-spacing: 1px;
}
.status-text b {
    color:       var(--accent);
    text-shadow: var(--glow-cyan);
}

/* ── CLOCK ── */
.clock {
    font-family:    var(--three-d-font);
    font-size:      9px;
    color:          var(--yellow);
    white-space:    nowrap;
    text-shadow:    var(--glow-yellow);
    letter-spacing: 2px;
}

/* ── LIVE BADGE ── */
.live-badge {
    font-family:    var(--three-d-font);
    font-size:      6px;
    font-weight:    700;
    letter-spacing: 1px;
    color:          var(--green);
    background:     rgba(0,255,65,0.08);
    border:         1px solid rgba(0,255,65,0.5);
    padding:        4px 8px;
    box-shadow:     var(--glow-green);
    animation:      livePulse 1.5s steps(2,end) infinite;
    transform-style: preserve-3d;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; box-shadow: var(--glow-green); }
    50%       { opacity: .7; box-shadow: none; }
}


/* ── SSL BADGE ── */
.ssl-badge {
    display:     flex;
    align-items: center;
    gap:         5px;
    font-family: var(--three-d-font);
    font-size:   6px;
    color:       var(--green);
    background:  rgba(0,255,65,0.06);
    border:      1px solid rgba(0,255,65,0.3);
    padding:     3px 8px;
    cursor:      help;
    white-space: nowrap;
    box-shadow:  0 0 6px rgba(0,255,65,0.2);
}
.ssl-badge-dot {
    width:         6px;
    height:        6px;
    background:    var(--green);
    box-shadow:    var(--glow-green);
    animation:     threeDPulse 2s steps(2,end) infinite;
    flex-shrink:   0;
}
.ssl-badge-icon { font-size: 10px; }

/* ── MAIN NAV ── */
.main-nav {
    display:     flex;
    align-items: center;
    gap:         2px;
    margin-left: 8px;
}

.main-nav-link {
    font-family:    var(--three-d-font);
    font-size:      7px;
    letter-spacing: 1px;
    color:          var(--text3);
    text-decoration: none;
    padding:        4px 10px;
    border:         1px solid transparent;
    transition:     color .1s, border-color .1s, background .1s, box-shadow .1s;
    white-space:    nowrap;
    transform-style: preserve-3d;
}
.main-nav-link:hover {
    color:        var(--accent);
    border-color: rgba(0,212,255,0.4);
    background:   rgba(0,212,255,0.06);
    box-shadow:   0 0 8px rgba(0,212,255,0.2);
    border-radius: 3px;
}
.main-nav-active {
    color:        var(--accent) !important;
    border-color: rgba(0,212,255,0.5) !important;
    background:   rgba(0,212,255,0.1) !important;
    box-shadow:   var(--glow-cyan) !important;
    border-radius: 3px;
}

@media (max-width: 680px) {
    .main-nav { display: none; }
}

/* ══════════════════════════════════════════════
   LAYOUT GRID
══════════════════════════════════════════════ */
.grid-main {
    display:               grid;
    grid-template-columns: 230px 1fr 230px;
    gap:                   1px;
    height:                calc(100vh - 48px - 54px - 32px);
    overflow:              hidden;
    position:              relative;
    z-index:               1;
    background:            rgba(0,212,255,0.05);
}

/* ── SCROLLBAR · HUD refinada ── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb {
    background:    var(--accent);
    border-radius: 3px;
    box-shadow:    var(--glow-cyan);
}

/* ══════════════════════════════════════════════
   RESPONSIVIDADE
══════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .grid-main { grid-template-columns: 180px 1fr 180px; }
}

@media (max-width: 768px) {
    .produtos-bar    { height: auto; padding: 8px 0; }
    .produtos-bar-inner { flex-wrap: wrap; gap: 8px; padding: 0 12px; }
    .pb-cnaes        { display: none; }
    .pb-stats        { border-left: none; padding: 0; gap: 10px; }
    .site-footer     { height: auto; padding: 6px 12px; gap: 6px; }
    .footer-center   { display: none; }
}

@media (max-width: 860px) {
    .grid-main {
        grid-template-columns: 1fr;
        height: auto;
        overflow: visible;
    }
    .sidebar-left, .sidebar-right {
        max-height: none;
        border-right: none;
        border-left:  none;
        border-bottom: 2px solid var(--pink);
    }
    .center-panel {
        height: auto;
        overflow: visible;
    }
    .tab-content {
        max-height: none;
        overflow: visible;
    }
    .topbar {
        height:  auto;
        padding: 8px 12px;
        gap:     8px;
    }
    .corp-badge { margin-left: 0; }
}

@media (max-width: 580px) {
    .form-row { grid-template-columns: 1fr; }
    .topbar .status-bar { display: none; }
    .modal-box { padding: 16px; }
}

/* ══════════════════════════════════════════════
   GLITCH ANIMATION · DECORATIVA
══════════════════════════════════════════════ */
@keyframes glitch {
    0%   { transform: translate(0); }
    20%  { transform: translate(-2px, 1px); clip-path: inset(20% 0 30% 0); }
    40%  { transform: translate(2px, -1px); clip-path: inset(60% 0 10% 0); }
    60%  { transform: translate(-1px, 2px); clip-path: inset(40% 0 50% 0); }
    80%  { transform: translate(1px, -2px); clip-path: inset(80% 0 5% 0); }
    100% { transform: translate(0); clip-path: none; }
}

/* ══════════════════════════════════════════════
   3D BORDER UTILITY
══════════════════════════════════════════════ */
.three-d-border {
    border:       2px solid var(--accent);
    box-shadow:   var(--glow-cyan),
                  inset 0 0 10px rgba(0,255,255,0.05),
                  3px 3px 0 rgba(0,0,0,0.35);
    transform-style: preserve-3d;
}

.three-d-border-pink {
    border:     2px solid var(--pink);
    box-shadow: var(--glow-pink),
                inset 0 0 10px rgba(255,0,170,0.05),
                3px 3px 0 rgba(0,0,0,0.35);
}