/*letras de toda la aplicación*/
body{
    font-family:"arial" !important;
}

/*fondo de pantalla general (para todos los modulos)*/
.general-background {
/*filter: blur(5px);*/
/*-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.9;
}

/*cuadro de inicio de sesión*/
#box-inicio{
    background-color:black;/*#e5e5e5; /*#0D676A */
    margin:30px auto;
    width: 400px;
    padding:30px;
    opacity:0.7;
    text-align:center;
    /*display: flex;*/
    /*flex-wrap: wrap;*/
}

/*campo para llenar datos (Para formularios)*/
.campo{
    height:45px;
    border-radius:7px;
    padding:4px;
    border: solid thin #aaa;
    width:90%;
    font-size:23px;
    }

/*boton*/
#boton-ingresar{
    padding:10px;
    width:180px;
    border-radius:20px;
    font-size:18px;
    text-align:center;
    border:solid #4ecdc4 4px;
    background-color:transparent;
    color:white;
}
#boton-ingresar:hover{
    background-color:#4ecdc4;
    font-size:18px;
    color:black;
    border:solid white 4px;
}


/*Barra de navegación*/
.navbar{
    /*height: 60px !important;*/
    background-color:#0D676A !important;
    /*background-color:black !important;*/
    margin-top: 10px;
    position: fixed !important; /*para fijar el menú de navegación*/
    width: 100vw;/*recuperamos la anchura maxima con "100vw" (vw=view width)*/
    /*opacity:0.8 !important;*/
    z-index:1; /*para que se sobreponga sobre cualquier elemento (que esté por encima del HERO SECTION)*/
    /*color:orange !important;*//*no se puede cambiar de color. La estrategia es usar <span>*/
}

/*se puede cambiar el color de los enlaces del navbar*/
.nav-item a{
    color: white !important;
}

/*hover sobre los enlaces del navbar*/
.enlace:hover{
    color:#4ecdc4;
    border-bottom: 4px solid #4ecdc4;
}

/*se puede modificar el borde del icono de la hamburguesa del menú. El icono es una imagen SVG. Quizas lo mejor sería usar font awesome para modificar el icono*/
.navbar-toggler{
    /*border: none !important;*/
    border-color:white !important;
    /*background-color:red !important;*/
}
.navbar-toggler:focus{
    box-shadow: none !important;
}


/*Para la pantalla de trabajo*/
#pantalla_principal{
    background-color:black;/*#e5e5e5; /*#0D676A */
    margin:5px auto;
    padding:90px 20px 20px 20px;
    opacity:0.8;
    text-align:center;
    width:auto;
    /*display: flex;
    flex-wrap: wrap;*/
}
#area_trabajo{
    background-color:none; /*para saber el tañamo de los div utilizamos colores*/
}
#pedidos_anteriores{
    /*background-color:wheat;*/
    padding: 10px 5px;
}
#pedidos_actuales{
    /*background-color: white;*/
    padding: 10px 5px;
}
#seccion_registro_pedido{
    background-color: black;
    padding: 10px 5px;
}

/*Para los campos (fieldsets)*/
fieldset{
    border: 2px gray solid !important;    
    border-radius: 7px;
}
#pedidos_actuales fieldset{
    background-color: white;
}
#pedidos_anteriores fieldset{
    background-color: wheat;
}

/*Sobre los tipos de letra*/
.titulo{
    font-size:24px; 
    font-weight:bold; 
    color:#4ecdc4;
}

/*sobre el pie de página*/
#footer{
    position: relative;
    background:#0D676A;
    color:white;
    text-align: center;
    opacity: 0.8;
    z-index: -1000 !important;
}

/*****Para el Spin de carga*****/
#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*****/