/* ================================================================
   ORBYX GLOBAL VISUAL IDENTITY SYSTEM
   Version: 1.0 — Industrial Premium
   All components defined here are mandatory across every screen.
   ================================================================ */

/* ---------------------------------------------------------------
   DESIGN TOKENS
--------------------------------------------------------------- */
:root {
    /* Background */
    --bg-deep: #0b1220;
    --bg-base: #0f172a;
    --bg-surface: #1a2540;
    --bg-card: #1e2d4a;

    /* Brand Gold (warmer) */
    --gold-bright: #f1d77a;
    --gold-mid: #d4af37;
    --gold-dark: #b8860b;
    --gold-shadow: #5a3d05;

    /* Button Colors — Premium Vibrant */
    --blue-top: #3b82f6;
    --blue-base: #1f4ed8;
    --green-top: #22c55e;
    --green-base: #166534;
    --red-top: #ef4444;
    --red-base: #7f1d1d;

    /* Text */
    --text-main: #f0f4ff;
    --text-muted: #7a8db3;
    --text-white: #ffffff;

    /* Typography */
    --font-system: 'Inter', 'Segoe UI', sans-serif;

    /* Industrial Shadow (buttons) */
    --shadow-btn:
        0 8px 22px rgba(0, 0, 0, 0.75),
        inset 0 1px 4px rgba(255, 255, 255, 0.20),
        inset 0 -5px 10px rgba(0, 0, 0, 0.50);

    /* Shared Gradient Overlay (metallic sheen) */
    --metal-sheen:
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0.25) 0%,
            rgba(255, 255, 255, 0.04) 30%,
            rgba(0, 0, 0, 0.35) 100%);
}

/* ---------------------------------------------------------------
   GLOBAL RESET & STABILITY
--------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    overflow-x: hidden;
    /* Trava balanço lateral */
    width: 100%;
    position: relative;
}

body {
    font-family: var(--font-system);
    background: linear-gradient(135deg, var(--bg-base) 0%, var(--bg-deep) 100%);
    color: var(--text-main);
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* ---------------------------------------------------------------
   ORBYX LOGO OFICIAL (SVG)
   Usage: <img class="orbyx-logo-img" src="...orbyx-logo-gold-3d.svg">
--------------------------------------------------------------- */
.orbyx-logo-img {
    height: 52px;
    width: auto;
    display: block;
    /* Preserva o brilho e cores do SVG — não aplica filtros */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* ---------------------------------------------------------------
   ORBYX 3D BRUSHED GOLD LOGO (Fallback CSS)
   Usage: <div class="orbyx-logo-3d">ORBYX</div>
--------------------------------------------------------------- */
.orbyx-logo-3d {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 32px;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: inline-block;
    line-height: 1;
    user-select: none;
    position: relative;
    padding: 0 10px;

    /* OURO 24K POLIDO — Alto Contraste com Brilho Especular */
    background: linear-gradient(135deg,
            #4d3705 0%,
            #a67c00 15%,
            #bf9b30 30%,
            #ffffff 45%,
            /* Brilho Máximo */
            #fcf6ba 50%,
            #ffffff 55%,
            /* Segundo Reflexo */
            #b38728 75%,
            #4d3705 100%);
    background-size: 200% auto;
    /* Para animação */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    /* Brilho Animado (Shimmer) */
    animation: goldShine 4s linear infinite;

    /* Extrusão 3D Potente (Aspecto de Bloco Maciço) */
    text-shadow:
        0 1px 0 #d9a014,
        0 2px 0 #b8860b,
        0 3px 0 #946b06,
        0 4px 0 #735305,
        0 5px 0 #4d3705,
        0 8px 15px rgba(0, 0, 0, 0.9),
        0 0 20px rgba(255, 223, 0, 0.3);
    /* Aura de Ouro */

    /* Perspectiva para profundidade */
    transform: perspective(600px) rotateX(12deg);
}

@keyframes goldShine {
    0% {
        background-position: 100% center;
    }

    100% {
        background-position: -100% center;
    }
}

/* O ANEL ORBITAL (Ultra-Brilhante) */
.orbyx-logo-3d::before {
    content: "";
    position: absolute;
    width: 65px;
    height: 38px;
    border: 2px solid #ffdf00;
    border-radius: 50%;
    top: 50%;
    left: -8px;
    transform: translateY(-50%) rotate(-35deg);
    box-shadow:
        0 0 25px rgba(255, 223, 0, 0.6),
        /* Brilho Externo */
        inset 0 0 10px rgba(255, 223, 0, 0.5);
    /* Brilho Interno */
    z-index: -1;
    pointer-events: none;
    /* Efeito de corte no anel para parecer que passa 'pelas' letras */
    clip-path: polygon(0% 0%, 100% 0%, 100% 45%, 0% 45%, 0% 100%, 100% 100%);
    filter: brightness(1.2);
}

/* Login screen: larger logo */
.orbyx-logo-3d.orbyx-logo-login {
    font-size: 64px;
    letter-spacing: 6px;
    margin-bottom: 40px;
    transform: perspective(1000px) rotateX(15deg);
}

.orbyx-logo-3d.orbyx-logo-login::before {
    width: 130px;
    height: 75px;
    border-width: 2.5px;
    left: -20px;
    box-shadow:
        0 0 25px rgba(212, 175, 55, 0.5),
        inset 0 0 10px rgba(255, 255, 255, 0.4);
}

/* ---------------------------------------------------------------
   INDUSTRIAL METAL BUTTON — BASE
   Usage: apply .btn-industrial + a modifier
--------------------------------------------------------------- */
.btn-industrial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    font-family: var(--font-system);
    font-weight: 700;
    letter-spacing: 1px;
    padding: 10px 22px;
    font-size: 11px;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    border: none;
    color: var(--text-white) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    transition: all 0.2s ease-in-out;
    position: relative;
    user-select: none;
    box-sizing: border-box;
    box-shadow: var(--shadow-btn);
}

.btn-industrial:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.80);
}

.btn-industrial:active {
    transform: translateY(3px);
    box-shadow: inset 0 5px 12px rgba(0, 0, 0, 0.70);
}

/* EDITAR — Azul Metálico */
.btn-industrial--edit,
.btn-industrial--primary {
    background-image:
        var(--metal-sheen),
        linear-gradient(to bottom, var(--blue-top), var(--blue-base));
}

/* BAIXAR — Verde Industrial */
.btn-industrial--baixar {
    background-image:
        var(--metal-sheen),
        linear-gradient(to bottom, var(--green-top), var(--green-base));
}

/* EXCLUIR — Vermelho Profundo */
.btn-industrial--excluir {
    background-image:
        var(--metal-sheen),
        linear-gradient(to bottom, var(--red-top), var(--red-base));
}

/* Full-width variant (login button) */
.btn-industrial--full {
    width: 100%;
    padding: 14px 22px;
    font-size: 14px;
    border-radius: 10px;
}

/* ---------------------------------------------------------------
   HEADER GLOBAL
--------------------------------------------------------------- */
.orbyx-header {
    background: linear-gradient(to bottom, #070e1c, #0d1830);
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

/* ---------------------------------------------------------------
   UTILITY
--------------------------------------------------------------- */
.text-muted {
    color: var(--text-muted);
}

.text-gold {
    color: var(--gold-mid);
}

/* ---------------------------------------------------------------
   RESPONSIVE — MOBILE
--------------------------------------------------------------- */
@media (max-width: 768px) {

    /* Logo adapts for mobile header */
    .orbyx-logo-3d {
        font-size: 20px;
        letter-spacing: 2px;
    }

    .orbyx-logo-3d.orbyx-logo-login {
        font-size: 36px;
        letter-spacing: 5px;
    }

    /* Buttons shrink slightly */
    .btn-industrial {
        padding: 9px 16px;
        font-size: 10px;
        letter-spacing: 0.8px;
    }

    .btn-industrial--full {
        padding: 13px 16px;
        font-size: 13px;
    }

    /* Login card fills screen */
    .login-card {
        max-width: 100% !important;
        border-radius: 14px !important;
        padding: 30px 24px !important;
        margin: 12px !important;
    }
}

@media (max-width: 480px) {
    .orbyx-logo-3d {
        font-size: 18px;
        letter-spacing: 2px;
    }

    .orbyx-logo-3d.orbyx-logo-login {
        font-size: 30px;
        letter-spacing: 4px;
    }

    .btn-industrial {
        padding: 8px 14px;
        font-size: 10px;
    }
}