/*
paleta de colores:
dominantes: 
complementarios:
*/

:root{
    --borde-gris-suave: rgb(214, 212, 212);
}

/*estos 2 codigos (html,body) para que la página se ajuste a todo tipo de pantallas*/
html{
    max-width: 100vw !important;
    /*overflow-x: hidden !important;*//*overflow no permite trabajar con sitcky*/
}
body{
    /*font-family: Helvetica, sans-serif;*/
    max-width: 100vw !important;
    /*overflow-x: hidden !important;*//*overflow no permite trabajar con sitcky*/
}

/*fondo base para todos los modulos*/
.fondo-base{
    /*filter: blur(5px);*/ /*difumina la imagen*/
    /*--webkit-filter: blur(5px);*/
    background-size: cover !important;
    background-position: center center !important;
    position: fixed;
    top: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 100%;
    opacity:0.5;
    background-image: url('../../assets/img/cdda-1.jpeg');
    /*background-color: #d6dcde;*/
    }
    #area-de-trabajo{
        background-color: #f1f1f1;
        margin:0px auto;
        padding:15px 5px 20px 5px;
        /*opacity:0.9;*/
        filter: brightness(100%);/*para que se muestre colores originales a pesar del opacity de .general-background*/
        text-align:center;
        width:auto;
        /*display: flex;
        flex-wrap: wrap;*/
        color:black;
    }


/*Para mostrar varios cards dentro un carousel*/
@media screen and (min-width:576px) {
    .carousel-inner{
        display: flex;
    }
    .carousel-item{
        display: block;
        margin-right: 0;
        flex: 0 0 calc(100%/3); /*se muestran 3 cards*/
    }
    
}
.carousel-inner{
    padding: 1em;
}

.card{
    margin: 0.5em;
}

/*Fin Para mostrar varios cards dentro un carousel*/

.titulo_segunda_categoria{
    color:#fc6932;
    margin-bottom: 10px;
    /*background-color: rgba(255, 208, 127, 0.247);*/
}


/*****Para el Spin de carga (está ubicado en el header)*****/
#cover-spin {
    position:fixed;
    width:100%;
    left:0;right:0;top:0;bottom:0;
    /*background-color: rgba(255,255,255,0.7);*/
    background-color: rgba(255, 255, 255, 0.805);
    z-index:9999;
    display:none;
    color:green;
    text-align: center;
    padding-top:450px;
}

@-webkit-keyframes spin {
	from {-webkit-transform:rotate(0deg);}
	to {-webkit-transform:rotate(360deg);}
}

@keyframes spin {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}

#cover-spin::after {
    content:'';
    display:block;
    position:absolute;
    left:48%;top:40%;
    width:50px;height:50px;
    border-style:solid;
    border-color:black;
    border-top-color:transparent;
    border-width: 5px;
    border-radius:50%;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}
/*****Fin Para el Spin de carga*****/