/*======================================================================
    ATLAS UI
    --------------------------------------------------------------------
    Developed by Rojas Media

    Product:
    Atlas Business Management Platform

    Description:
    Central Design System used across all Atlas products.

    Current Version:
    v1.0

    Last Update:
    July 2026

======================================================================*/



/*======================================================================
    1. IMPORTS
======================================================================*/

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



/*======================================================================
    2. DESIGN TOKENS
======================================================================*/

:root{

    /*==================================================
        BRAND
    ==================================================*/

    --atlas-primary:#2563EB;
    --atlas-secondary:#0D1B2A;
    --atlas-accent:#06B6D4;



    /*==================================================
        SURFACES
    ==================================================*/

    --background:#07111F;
    --surface:#0F172A;
    --surface-light:#172554;



    /*==================================================
        TEXT
    ==================================================*/

    --text-primary:#FFFFFF;
    --text-secondary:#CBD5E1;
    --text-muted:#94A3B8;



    /*==================================================
        STATUS
    ==================================================*/

    --success:#22C55E;
    --warning:#F59E0B;
    --danger:#EF4444;
    --info:#38BDF8;



    /*==================================================
        BORDER
    ==================================================*/

    --border:#23324A;



    /*==================================================
        SHADOWS
    ==================================================*/

    --shadow-sm:
        0 4px 10px rgba(0,0,0,.15);

    --shadow-md:
        0 10px 30px rgba(0,0,0,.25);

    --shadow-lg:
        0 25px 60px rgba(0,0,0,.40);



    /*==================================================
        GLOW
    ==================================================*/

    --glow:
        0 0 35px rgba(37,99,235,.30);



    /*==================================================
        BORDER RADIUS
    ==================================================*/

    --radius-sm:8px;
    --radius-md:14px;
    --radius-lg:22px;
    --radius-xl:32px;



    /*==================================================
        TRANSITIONS
    ==================================================*/

    --transition-fast:.2s ease;

    --transition:.35s ease;

    --transition-slow:.55s ease;



    /*==================================================
        SPACING
    ==================================================*/

    --space-1:.25rem;
    --space-2:.5rem;
    --space-3:.75rem;
    --space-4:1rem;
    --space-5:1.5rem;
    --space-6:2rem;
    --space-7:3rem;
    --space-8:4rem;

}



/*======================================================================
    3. RESET
======================================================================*/

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

    font-family:'Inter',sans-serif;

    background:var(--background);

    color:var(--text-primary);

    line-height:1.6;

    overflow-x:hidden;

}

/*======================================================================
    4. SCROLLBAR
======================================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--surface);

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
        180deg,
        var(--atlas-primary),
        var(--atlas-accent)
    );

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--atlas-primary);

}



/*======================================================================
    5. TEXT SELECTION
======================================================================*/

::selection{

    background:var(--atlas-primary);

    color:#fff;

}
/*======================================================================
    6. CONTAINERS
======================================================================*/

.atlas-container{

    width:min(1280px,92%);

    margin:auto;

}

.atlas-section{

    padding:var(--space-8) 0;

}
/*======================================================================
    7. BUTTONS
======================================================================*/

.atlas-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    border:none;

    cursor:pointer;

    text-decoration:none;

    font-weight:600;

    font-size:.95rem;

    padding:14px 28px;

    border-radius:var(--radius-md);

    transition:var(--transition);

}

.atlas-btn-primary{

    background:var(--atlas-primary);

    color:#fff;

    box-shadow:var(--glow);

}

.atlas-btn-primary:hover{

    transform:translateY(-3px);

    background:#3B82F6;

}

.atlas-btn-secondary{

    background:transparent;

    border:1px solid var(--border);

    color:#fff;

}

.atlas-btn-secondary:hover{

    background:rgba(255,255,255,.05);

}
/*======================================================================
    8. CARDS
======================================================================*/

.atlas-card{

    background:rgba(15,23,42,.92);

    border:1px solid var(--border);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-md);

    padding:30px;

    transition:var(--transition);

}

.atlas-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-lg);

}
/*======================================================================
    9. GLASS EFFECT
======================================================================*/

.atlas-glass{

    background:rgba(255,255,255,.04);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

}
/*======================================================================
    10. FORMS
======================================================================*/

.atlas-form-group{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-bottom:22px;

}

.atlas-label{

    font-size:.9rem;

    font-weight:600;

    color:var(--text-secondary);

}

.atlas-input{

    width:100%;

    padding:15px 18px;

    background:rgba(255,255,255,.04);

    border:1px solid var(--border);

    border-radius:var(--radius-md);

    color:var(--text-primary);

    font-size:.95rem;

    transition:var(--transition);

    outline:none;

}

.atlas-input::placeholder{

    color:var(--text-muted);

}

.atlas-input:hover{

    border-color:#31537D;

}

.atlas-input:focus{

    border-color:var(--atlas-primary);

    box-shadow:
        0 0 0 4px rgba(37,99,235,.12),
        var(--glow);

    background:rgba(255,255,255,.06);

}
/*======================================================================
    11. TYPOGRAPHY
======================================================================*/

.atlas-title{

    font-size:2rem;

    font-weight:800;

    line-height:1.2;

    color:var(--text-primary);

}

.atlas-subtitle{

    color:var(--text-secondary);

    font-size:1rem;

    line-height:1.7;

}

.atlas-small{

    color:var(--text-muted);

    font-size:.85rem;

}
/*======================================================================
    12. ANIMATIONS
======================================================================*/

@keyframes atlasFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes atlasSlideUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.atlas-fade{

    animation:atlasFade .8s ease;

}

.atlas-slide{

    animation:atlasSlideUp .7s ease;

}
/*======================================================================
    13. ATLAS MOTION SYSTEM
======================================================================*/

/*
    Curvas oficiales
*/

:root {

    --atlas-ease-out:
        cubic-bezier(.22, 1, .36, 1);

    --atlas-ease-smooth:
        cubic-bezier(.4, 0, .2, 1);

    --atlas-ease-bounce:
        cubic-bezier(.34, 1.56, .64, 1);

}


/*======================================================================
    FADE
======================================================================*/

@keyframes atlasFadeIn {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}

.atlas-fade-in {

    animation:
        atlasFadeIn
        .65s
        var(--atlas-ease-smooth)
        both;

}


/*======================================================================
    SLIDE UP
======================================================================*/

@keyframes atlasSlideUp {

    from {

        opacity: 0;

        transform: translateY(28px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

.atlas-slide-up {

    animation:
        atlasSlideUp
        .75s
        var(--atlas-ease-out)
        both;

}


/*======================================================================
    SLIDE DOWN
======================================================================*/

@keyframes atlasSlideDown {

    from {

        opacity: 0;

        transform: translateY(-24px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

.atlas-slide-down {

    animation:
        atlasSlideDown
        .7s
        var(--atlas-ease-out)
        both;

}


/*======================================================================
    SLIDE LEFT
======================================================================*/

@keyframes atlasSlideLeft {

    from {

        opacity: 0;

        transform: translateX(30px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

.atlas-slide-left {

    animation:
        atlasSlideLeft
        .7s
        var(--atlas-ease-out)
        both;

}


/*======================================================================
    SLIDE RIGHT
======================================================================*/

@keyframes atlasSlideRight {

    from {

        opacity: 0;

        transform: translateX(-30px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

.atlas-slide-right {

    animation:
        atlasSlideRight
        .7s
        var(--atlas-ease-out)
        both;

}


/*======================================================================
    SCALE IN
======================================================================*/

@keyframes atlasScaleIn {

    from {

        opacity: 0;

        transform: scale(.94);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}

.atlas-scale-in {

    animation:
        atlasScaleIn
        .55s
        var(--atlas-ease-out)
        both;

}


/*======================================================================
    POP IN
======================================================================*/

@keyframes atlasPopIn {

    0% {

        opacity: 0;

        transform: scale(.88);

    }

    70% {

        opacity: 1;

        transform: scale(1.035);

    }

    100% {

        transform: scale(1);

    }

}

.atlas-pop-in {

    animation:
        atlasPopIn
        .65s
        var(--atlas-ease-bounce)
        both;

}


/*======================================================================
    BLUR IN
======================================================================*/

@keyframes atlasBlurIn {

    from {

        opacity: 0;

        filter: blur(12px);

        transform: translateY(12px);

    }

    to {

        opacity: 1;

        filter: blur(0);

        transform: translateY(0);

    }

}

.atlas-blur-in {

    animation:
        atlasBlurIn
        .8s
        var(--atlas-ease-out)
        both;

}


/*======================================================================
    FLOAT
======================================================================*/

@keyframes atlasFloat {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-8px);

    }

}

.atlas-float {

    animation:
        atlasFloat
        5s
        ease-in-out
        infinite;

}


/*======================================================================
    PULSE GLOW
======================================================================*/

@keyframes atlasPulseGlow {

    0%,
    100% {

        box-shadow:
            0 0 0 rgba(37, 99, 235, 0);

    }

    50% {

        box-shadow:
            0 0 38px rgba(37, 99, 235, .25);

    }

}

.atlas-pulse-glow {

    animation:
        atlasPulseGlow
        3s
        ease-in-out
        infinite;

}


/*======================================================================
    SHIMMER
======================================================================*/

.atlas-shimmer {

    position: relative;

    overflow: hidden;

}

.atlas-shimmer::before {

    content: "";

    position: absolute;

    top: -70%;

    left: -55%;

    width: 42%;

    height: 240%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .25),
            transparent
        );

    transform: rotate(20deg);

    transition:
        left
        .8s
        var(--atlas-ease-smooth);

    pointer-events: none;

}

.atlas-shimmer:hover::before {

    left: 120%;

}


/*======================================================================
    HOVER LIFT
======================================================================*/

.atlas-hover-lift {

    transition:
        transform
        var(--transition),
        box-shadow
        var(--transition),
        border-color
        var(--transition);

}

.atlas-hover-lift:hover {

    transform: translateY(-6px);

    box-shadow: var(--shadow-lg);

}


/*======================================================================
    HOVER GLOW
======================================================================*/

.atlas-hover-glow {

    transition:
        box-shadow
        var(--transition),
        border-color
        var(--transition),
        transform
        var(--transition);

}

.atlas-hover-glow:hover {

    border-color:
        rgba(6, 182, 212, .35);

    box-shadow:
        0 0 40px rgba(37, 99, 235, .18);

}


/*======================================================================
    STAGGER DELAYS
======================================================================*/

.atlas-delay-1 {

    animation-delay: .08s;

}

.atlas-delay-2 {

    animation-delay: .16s;

}

.atlas-delay-3 {

    animation-delay: .24s;

}

.atlas-delay-4 {

    animation-delay: .32s;

}

.atlas-delay-5 {

    animation-delay: .40s;

}

.atlas-delay-6 {

    animation-delay: .48s;

}


/*======================================================================
    LOADING SPINNER
======================================================================*/

@keyframes atlasSpin {

    to {

        transform: rotate(360deg);

    }

}

.atlas-spinner {

    width: 22px;

    height: 22px;

    border: 2px solid
        rgba(255, 255, 255, .18);

    border-top-color:
        var(--atlas-accent);

    border-radius: 50%;

    animation:
        atlasSpin
        .8s
        linear
        infinite;

}


/*======================================================================
    SKELETON LOADING
======================================================================*/

@keyframes atlasSkeleton {

    from {

        background-position: 200% 0;

    }

    to {

        background-position: -200% 0;

    }

}

.atlas-skeleton {

    border-radius: var(--radius-sm);

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .04) 25%,
            rgba(255, 255, 255, .09) 50%,
            rgba(255, 255, 255, .04) 75%
        );

    background-size: 200% 100%;

    animation:
        atlasSkeleton
        1.5s
        linear
        infinite;

}


/*======================================================================
    PAGE ENTER
======================================================================*/

@keyframes atlasPageEnter {

    from {

        opacity: 0;

        transform: translateY(12px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

.atlas-page-enter {

    animation:
        atlasPageEnter
        .55s
        var(--atlas-ease-out)
        both;

}


/*======================================================================
    ACCESSIBILITY
======================================================================*/

@media (prefers-reduced-motion: reduce) {

    .atlas-fade-in,
    .atlas-slide-up,
    .atlas-slide-down,
    .atlas-slide-left,
    .atlas-slide-right,
    .atlas-scale-in,
    .atlas-pop-in,
    .atlas-blur-in,
    .atlas-float,
    .atlas-pulse-glow,
    .atlas-spinner,
    .atlas-skeleton,
    .atlas-page-enter {

        animation: none !important;

    }

    .atlas-hover-lift:hover,
    .atlas-hover-glow:hover {

        transform: none;

    }

}