/* =====================================================
   UNIVERSIDAD COOPERATIVA DE COLOMBIA
   INGENIEROVIZCAINO.COM
===================================================== */


* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    min-height: 100vh;

    background:

        radial-gradient(
            circle at 50% -20%,
            #063455 0%,
            #021422 40%,
            #00070d 100%
        );

    color: white;

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

    overflow-x: hidden;

}



/* =====================================================
   FONDO
===================================================== */


#fondoParticulas {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: -2;

    pointer-events: none;

}


.fondo-grid {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: -3;


    background-image:

        linear-gradient(
            rgba(0, 220, 255, 0.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(0, 220, 255, 0.035) 1px,
            transparent 1px
        );


    background-size:

        50px 50px;

}


.linea-superior {

    width: 100%;

    height: 4px;


    background:

        linear-gradient(

            90deg,

            transparent,

            #00eaff,

            #0088ff,

            #00eaff,

            transparent

        );


    box-shadow:

        0 0 20px #00eaff;

}



/* =====================================================
   NAVEGACIÓN
===================================================== */


nav {

    width: 100%;

    max-width: 1500px;

    margin: auto;

    padding: 25px 35px;


    display: flex;

    justify-content: space-between;

    align-items: center;

}


.volver {

    color: #8beeff;

    text-decoration: none;

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

    font-size: 13px;

    letter-spacing: 2px;

    transition: 0.3s;

}


.volver:hover {

    color: white;

    text-shadow:

        0 0 12px #00eaff;

}


.estado {

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

    font-size: 11px;

    letter-spacing: 2px;

    color: #55ffaa;

}


.punto-online {

    display: inline-block;

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background: #00ff88;

    margin-right: 8px;

    box-shadow:

        0 0 7px #00ff88,

        0 0 15px #00ff88;

}



/* =====================================================
   HEADER
===================================================== */


header {

    width: 100%;

    max-width: 1500px;

    margin: auto;

    text-align: center;

    padding:

        45px

        20px

        55px;

}


.codigo-superior {

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

    color: #00d9ff;

    font-size: 12px;

    letter-spacing: 6px;

    margin-bottom: 25px;

    opacity: 0.8;

}



header h1 {

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

    font-size:

        clamp(
            42px,
            5vw,
            78px
        );

    font-weight: 900;

    letter-spacing: 3px;

    line-height: 1.15;


    color: white;


    text-shadow:

        0 0 5px #00d9ff,

        0 0 15px rgba(0, 217, 255, 0.65),

        0 0 35px rgba(0, 120, 255, 0.45);

}



header h1 span {

    display: block;

    color: #00eaff;

}



.linea-titulo {

    width: min(
        900px,
        80%
    );

    height: 2px;

    margin:

        28px

        auto;


    background:

        linear-gradient(

            90deg,

            transparent,

            #00eaff,

            white,

            #00eaff,

            transparent

        );


    box-shadow:

        0 0 16px #00eaff;

}



header h2 {

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

    font-size:

        clamp(
            17px,
            2vw,
            25px
        );


    color: #d4f8ff;

    letter-spacing: 8px;

    margin-bottom: 12px;

}



.descripcion {

    font-size: 20px;

    color: #8ab7c4;

    letter-spacing: 2px;

}



/* =====================================================
   CONTENIDO
===================================================== */


main {

    width: 100%;

    padding: 0 25px;

}


.panel {

    max-width: 1450px;

    margin: auto;


    background:

        rgba(
            0,
            9,
            20,
            0.78
        );


    border:

        1px solid
        rgba(
            0,
            220,
            255,
            0.25
        );


    border-radius: 18px;


    box-shadow:

        0 0 35px
        rgba(
            0,
            180,
            255,
            0.10
        );


    backdrop-filter:

        blur(10px);

}



/* =====================================================
   ENCABEZADO DEL PANEL
===================================================== */


.encabezado-panel {

    display: flex;

    justify-content: space-between;

    align-items: center;


    padding:

        20px

        28px;


    border-bottom:

        1px solid
        rgba(
            0,
            220,
            255,
            0.20
        );


    font-family:

        'Orbitron',
        sans-serif;


    color: #00eaff;

    font-size: 14px;

    letter-spacing: 3px;

}


.indicador {

    display: inline-block;

    width: 8px;

    height: 8px;

    margin-right: 12px;

    background: #00eaff;

    box-shadow:

        0 0 10px #00eaff,

        0 0 18px #00eaff;

}


.cantidad {

    color: #779ca8;

    font-size: 11px;

}



/* =====================================================
   BUSCADOR
===================================================== */


.zona-buscador {

    padding:

        30px

        30px

        10px;

}


.buscador {

    max-width: 650px;

    margin: auto;

    position: relative;

}


.buscador input {

    width: 100%;

    padding:

        17px

        25px

        17px

        55px;


    border-radius: 8px;


    border:

        1px solid
        rgba(
            0,
            220,
            255,
            0.30
        );


    outline: none;


    background:

        rgba(
            0,
            20,
            35,
            0.75
        );


    color: white;


    font-family:

        'Rajdhani',
        sans-serif;


    font-size: 18px;


    transition: 0.3s;

}


.buscador input:focus {

    border-color: #00eaff;


    box-shadow:

        0 0 15px
        rgba(
            0,
            234,
            255,
            0.20
        );

}


.buscador input::placeholder {

    color: #63818b;

}


.lupa {

    position: absolute;

    left: 20px;

    top: 50%;

    transform: translateY(-50%);

    color: #00eaff;

    font-size: 25px;

}



/* =====================================================
   GRID
===================================================== */


.grid-materias {

    display: grid;


    grid-template-columns:

        repeat(

            auto-fit,

            minmax(
                360px,
                1fr
            )

        );


    gap: 22px;


    padding:

        30px;

}



/* =====================================================
   TARJETA
===================================================== */


.tarjeta-materia {

    position: relative;


    min-height: 135px;


    display: flex;

    align-items: center;


    padding:

        22px

        25px;


    text-decoration: none;


    color: white;


    border-radius: 10px;


    border:

        1px solid
        rgba(
            0,
            220,
            255,
            0.18
        );


    background:

        linear-gradient(

            120deg,

            rgba(
                7,
                32,
                50,
                0.88
            ),

            rgba(
                0,
                11,
                24,
                0.96
            )

        );


    overflow: hidden;


    transition:

        transform 0.3s,

        box-shadow 0.3s,

        border-color 0.3s,

        background 0.3s;

}



/* línea izquierda */

.tarjeta-materia::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 4px;

    height: 100%;


    background:

        linear-gradient(

            #00eaff,

            #0077ff

        );


    box-shadow:

        0 0 15px #00d9ff;

}



/* barrido luminoso */

.tarjeta-materia::after {

    content: "";

    position: absolute;

    top: 0;

    left: -130%;

    width: 100%;

    height: 100%;


    background:

        linear-gradient(

            110deg,

            transparent 35%,

            rgba(
                0,
                234,
                255,
                0.10
            ) 50%,

            transparent 65%

        );


    transition: 0.65s;

}


.tarjeta-materia:hover::after {

    left: 140%;

}



.tarjeta-materia:hover {

    transform:

        translateY(-6px)

        scale(1.01);


    border-color:

        rgba(
            0,
            234,
            255,
            0.75
        );


    background:

        linear-gradient(

            120deg,

            rgba(
                0,
                55,
                82,
                0.85
            ),

            rgba(
                0,
                15,
                35,
                0.98
            )

        );


    box-shadow:

        0 0 20px
        rgba(
            0,
            220,
            255,
            0.22
        ),

        0 20px 35px
        rgba(
            0,
            0,
            0,
            0.30
        );

}



/* =====================================================
   NÚMERO
===================================================== */


.numero {

    position: absolute;

    top: 10px;

    right: 13px;


    font-family:

        'Orbitron',
        sans-serif;


    font-size: 10px;


    color:

        rgba(
            0,
            234,
            255,
            0.38
        );

}



/* =====================================================
   ICONO
===================================================== */


.icono {

    width: 72px;

    min-width: 72px;

    height: 72px;


    display: flex;

    justify-content: center;

    align-items: center;


    margin-right: 20px;


    border-radius: 12px;


    border:

        1px solid
        rgba(
            0,
            234,
            255,
            0.30
        );


    background:

        rgba(
            0,
            234,
            255,
            0.06
        );


    color: #00eaff;


    font-family:

        'Orbitron',
        sans-serif;


    font-size: 30px;


    box-shadow:

        inset 0 0 20px
        rgba(
            0,
            234,
            255,
            0.05
        );


    transition: 0.3s;

}


.tarjeta-materia:hover .icono {

    transform: scale(1.08);


    box-shadow:

        0 0 18px
        rgba(
            0,
            234,
            255,
            0.25
        ),

        inset 0 0 18px
        rgba(
            0,
            234,
            255,
            0.12
        );

}



/* =====================================================
   INFORMACIÓN
===================================================== */


.info {

    flex: 1;

}


.etiqueta {

    color: #4e8798;

    font-family:

        'Orbitron',
        sans-serif;


    font-size: 9px;

    letter-spacing: 3px;

    margin-bottom: 7px;

}


.info h3 {

    font-family:

        'Orbitron',
        sans-serif;


    font-size: 18px;


    color: #ecfbff;


    letter-spacing: 0.5px;


    margin-bottom: 7px;


    transition: 0.3s;

}


.tarjeta-materia:hover h3 {

    color: #00eaff;

}


.info p {

    color: #789aa5;

    font-size: 16px;

}


.flecha {

    margin-left: 10px;


    font-family:

        'Orbitron',
        sans-serif;


    color: #00eaff;


    font-size: 27px;


    transition: 0.3s;

}


.tarjeta-materia:hover .flecha {

    transform: translateX(7px);


    text-shadow:

        0 0 10px #00eaff;

}



/* =====================================================
   ESQUINAS DECORATIVAS
===================================================== */


.esquina {

    position: absolute;

    width: 13px;

    height: 13px;

}


.superior {

    top: 7px;

    left: 8px;

    border-top:

        1px solid #00eaff;

    border-left:

        1px solid #00eaff;

}


.inferior {

    right: 8px;

    bottom: 7px;

    border-right:

        1px solid #00eaff;

    border-bottom:

        1px solid #00eaff;

}



/* =====================================================
   SIN RESULTADOS
===================================================== */


.sin-resultados {

    display: none;

    text-align: center;

    color: #6f929c;

    font-family:

        'Orbitron',
        sans-serif;

    padding: 50px;

    letter-spacing: 2px;

}



/* =====================================================
   FOOTER
===================================================== */


footer {

    text-align: center;

    padding:

        70px

        20px

        40px;

}


.linea-footer {

    max-width: 700px;

    height: 1px;

    margin:

        auto

        auto

        28px;


    background:

        linear-gradient(

            90deg,

            transparent,

            #00eaff,

            transparent

        );

}


.footer-dominio {

    font-family:

        'Orbitron',
        sans-serif;


    color: #00eaff;


    font-weight: 700;


    letter-spacing: 4px;


    margin-bottom: 8px;

}


.footer-universidad {

    color: #91adb5;

    letter-spacing: 2px;

}


.footer-texto {

    color: #526d76;

    margin-top: 7px;

}


.copyright {

    font-family:

        'Orbitron',
        sans-serif;


    font-size: 10px;

    color: #39515a;

    margin-top: 15px;

}



/* =====================================================
   CELULAR
===================================================== */


@media(max-width: 700px) {


    nav {

        padding:

            20px

            15px;

    }


    .estado {

        display: none;

    }


    .volver {

        font-size: 10px;

    }


    header {

        padding:

            30px

            15px

            40px;

    }


    .codigo-superior {

        font-size: 9px;

        letter-spacing: 2px;

    }


    header h1 {

        font-size: 35px;

    }


    header h2 {

        font-size: 15px;

        letter-spacing: 4px;

    }


    .descripcion {

        font-size: 16px;

    }


    main {

        padding:

            0

            12px;

    }


    .encabezado-panel {

        padding:

            17px

            15px;


        font-size: 11px;

    }


    .cantidad {

        display: none;

    }


    .zona-buscador {

        padding:

            20px

            15px

            5px;

    }


    .grid-materias {

        grid-template-columns:

            1fr;


        padding:

            18px

            15px;


        gap: 15px;

    }


    .tarjeta-materia {

        min-height: 110px;

        padding:

            15px;

    }


    .icono {

        width: 55px;

        min-width: 55px;

        height: 55px;

        font-size: 22px;

        margin-right: 14px;

    }


    .info h3 {

        font-size: 14px;

    }


    .info p {

        font-size: 14px;

    }


    .flecha {

        font-size: 21px;

    }


}