/*==================================================
    CZ UI 1.0
    Componentes reutilizables
==================================================*/


/*==================================================
    BOTONES
==================================================*/

.btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    padding:12px 28px;

    border-radius:var(--radio-pill);

    text-decoration:none;

    font-weight:bold;

    cursor:pointer;

    transition:var(--transicion);

    border:1px solid transparent;

    user-select:none;

}


/*------------------------------
    BOTÓN PRINCIPAL
------------------------------*/

.btn-primary{

    background:linear-gradient(
        90deg,
        var(--color-azul),
        var(--color-morado),
        var(--color-fucsia)
    );

    color:var(--texto);

    box-shadow:var(--sombra-boton);

}

.btn-primary:hover{

    transform:translateY(-2px) scale(1.03);

    box-shadow:var(--sombra-grande);

}


/*------------------------------
    BOTÓN SECUNDARIO
------------------------------*/

.btn-secondary{

    background:var(--cristal-claro);

    color:var(--texto);

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

}

.btn-secondary:hover{

    background:var(--cristal-hover);

    box-shadow:var(--sombra-neon);

}

/*------------------------------
    BOTÓN CHAT
------------------------------*/

.btn-chat{

    background:linear-gradient(
        90deg,
        var(--color-azul),
        var(--color-morado),
        var(--color-fucsia)
    );

    color:var(--texto);

    padding:18px 70px;

    font-size:24px;

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

    box-shadow:
        0 0 20px rgba(80,180,255,.55),
        0 0 45px rgba(120,110,255,.40),
        0 0 80px rgba(208,76,255,.25);

    animation:chatPulse 2.8s ease-in-out infinite;

}

.btn-chat:hover{

    transform:translateY(-3px) scale(1.05);

    box-shadow:
        0 0 35px rgba(90,210,255,.90),
        0 0 65px rgba(120,110,255,.70),
        0 0 100px rgba(208,76,255,.55);

}

@keyframes chatPulse{

    0%,100%{

        box-shadow:
            0 0 20px rgba(80,180,255,.55),
            0 0 45px rgba(120,110,255,.40),
            0 0 80px rgba(208,76,255,.25);

    }

    50%{

        box-shadow:
            0 0 35px rgba(90,210,255,.90),
            0 0 65px rgba(120,110,255,.70),
            0 0 100px rgba(208,76,255,.55);

    }

}


/*------------------------------
    BOTÓN OUTLINE
------------------------------*/

.btn-outline{

    background:transparent;

    color:var(--texto);

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

}

.btn-outline:hover{

    background:var(--cristal-hover);

}


/*==================================================
    TARJETAS
==================================================*/

.card{

    background:var(--cristal);

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

    border-radius:var(--radio-xl);

    backdrop-filter:blur(10px);

    padding:24px;

    transition:var(--transicion);

}

.card:hover{

    transform:translateY(-4px);

    box-shadow:var(--sombra-neon);

}


/*==================================================
    PANELES
==================================================*/

.panel{

    background:var(--cristal);

    border-radius:var(--radio-xl);

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

    padding:24px;

}


/*==================================================
    BADGES
==================================================*/

.badge{

    display:inline-block;

    padding:6px 14px;

    border-radius:var(--radio-pill);

    background:var(--color-azul);

    color:var(--texto);

    font-size:13px;

    font-weight:bold;

}


/*==================================================
    GLASS
==================================================*/

.glass{

    background:var(--cristal);

    backdrop-filter:blur(10px);

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

}


/*==================================================
    SOMBRAS
==================================================*/

.shadow{

    box-shadow:var(--sombra-boton);

}

.shadow-neon{

    box-shadow:var(--sombra-neon);

}

.shadow-big{

    box-shadow:var(--sombra-grande);

}


/*==================================================
    EFECTOS
==================================================*/

.hover-scale{

    transition:var(--transicion);

}

.hover-scale:hover{

    transform:scale(1.05);

}

.hover-glow{

    transition:var(--transicion);

}

.hover-glow:hover{

    box-shadow:var(--sombra-grande);

}