body{
    min-width: 100%;
    max-width: 100%;
}

h1,
h2,
h3, 
h4{
    color: #A567FF;
}

.titulo-seccion{
    color: #8C8C8C;
}

#barra-navegacion{
    background-color: #A567FF;
}

#barra-navegacion:hover{
    cursor: hand;
}

#navbarNav:hover{
    cursor: hand;
}

#frm-login{
    width:80%;
    margin-left: 10%;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#alerta_sis{
    width:90%;
    margin-left: 5%;
    margin-top: 10%;;
    position: fixed;
    z-index: 3000;
    display: none;
}

#main-content{
    width:80%;
    margin-left: 10%;
}

#diario-alimentacion{
    margin-top: 2rem;
}

#fecha_alimentacion{
    text-align: center;
    color: #A567FF;
    margin-bottom: 1rem;
}

.div-btn-ame{
    width: 80%;
    margin-left: 10%;
    margin-top: 1rem;
}

#pie{
    text-align: center;
}








.btn-dia-alimentacion{
    margin: 1.5rem;
}


.btn{
    -webkit-box-shadow: 0px 0px 18px -7px rgba(0,0,0,0.33);
    -moz-box-shadow: 0px 0px 18px -7px rgba(0,0,0,0.33);
    box-shadow: 0px 0px 18px -7px rgba(0,0,0,0.33);
}

.btn:hiver{
    -webkit-box-shadow: 0px 0px 18px -7px rgba(0,0,0,0.66);
    -moz-box-shadow: 0px 0px 18px -7px rgba(0,0,0,0.66);
    box-shadow: 0px 0px 18px -7px rgba(0,0,0,0.66);
}



#div-entrenamiento{
    text-align: center;
}




.tarjeta-informativa{
    -webkit-box-shadow: 0px 0px 18px -7px rgba(0,0,0,0.33);
    -moz-box-shadow: 0px 0px 18px -7px rgba(0,0,0,0.33);
    box-shadow: 0px 0px 18px -7px rgba(0,0,0,0.33);
}



.card-entrenamiento{
    margin:.5rem .5rem 3rem .5rem;
    display: inline-block;

    -webkit-box-shadow: 0px 0px 18px -7px rgba(0,0,0,0.33);
    -moz-box-shadow: 0px 0px 18px -7px rgba(0,0,0,0.33);
    box-shadow: 0px 0px 18px -7px rgba(0,0,0,0.33);
}

.card-entrenamiento:hover{
    -webkit-box-shadow: 0px 0px 18px -2px rgba(0,0,0,0.66);
    -moz-box-shadow: 0px 0px 18px -2px rgba(0,0,0,0.66);
    box-shadow: 0px 0px 18px -2px rgba(0,0,0,0.66);

    cursor: pointer;
}


.card-entrenamiento{
    margin:.5rem .5rem 3rem .5rem;
    display: inline-block;

    -webkit-box-shadow: 0px 0px 18px -7px rgba(0,0,0,0.33);
    -moz-box-shadow: 0px 0px 18px -7px rgba(0,0,0,0.33);
    box-shadow: 0px 0px 18px -7px rgba(0,0,0,0.33);
}



#sel-fechas-peso{
    border:0;
    color:#A567FF;
    text-overflow:ellipsis;
    width: 100%;
}

#grafico-pesos{
    max-height: 350px;
}

#grafico-pesos:focus{
    outline: none;
    box-shadow: none;
}



.card-usuario{

}

.card-usuario:hover{
    font-weight: bold;
    /* -webkit-box-shadow: 0px 0px 18px -7px rgba(0,0,0,0.33);
    -moz-box-shadow: 0px 0px 18px -7px rgba(0,0,0,0.33);
    box-shadow: 0px 0px 18px -7px rgba(0,0,0,0.33); */
}






/* ======================== SOBRE BOOTSTRAP ===================== */

:root {
    --bs-primary: #A567FF; /* Cambia este valor al color que desees */
}

/* Sobrescribir la clase .btn-primary como ejemplo */
.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    opacity: 90%;
    /* color: #333333; */
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
/* .btn-primary.active, */
.btn-primary:focus-visible,
.btn-primary:focus-visible:active,
.btn-primary:focus-visible.active {
  /* background-color: darken(var(--bs-primary), 75%);
  border-color: darken(var(--bs-primary), 75%); */

  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  opacity: 100%;
}


.text-bg-primary{
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}


.btn-warning {
    color: #333333;
    opacity: 90%;
    /* text-shadow: 0px 0px 1px #000; */
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.btn-warning:focus-visible,
.btn-warning:focus-visible:active,
.btn-warning:focus-visible.active {
  opacity: 100%;
  /* color: white; */
}




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

canvas:hover{
    cursor: hand;
}


@media screen and (orientation: portrait) , (max-width: 600px){
    body{
        font-size: 3rem;
    }

    h2{
        font-size: 6rem;
    }

    h3{
        font-size: 5rem;
    }

    h4{
        font-size: 2.5rem;
    }

    .navbar-toggler{
        width: 5rem;
        height: 5rem;
    }

   /*  #select_alimentad{
        size: 0;
    } */


    .modal-footer{
        text-align: center;
    }

    .btn_modal{
        font-size: 3rem;
    }

    .form-select{
        font-size: 3rem;
    }

    .navbar-brand{
        font-size: 4rem;
    }
    
    
    .form-control{
        height: 5rem;
        font-size: 3rem;
    }


    #barra-navegacion{
        font-size: 2.5rem;
    }

    .btn{
        font-size: 2.5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .accordion-button{
        font-size: 2.5rem;
    }

    #main-content{
        width:98%;
        margin-left: 1%;
    }

    .tabla-alimentacion{
        font-size: 2.5rem;
    }

    .modal-dialog{
        width:100%;
    }
}