body {

    background-color: #000;

    color: #fff;

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

}





header {

    text-align: center;

    padding: 20px;

    background-color: #222;

    border-bottom: 2px solid #ff4500;

    position: relative;

}





header h1 {

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

    font-size: 36px;

    color: #fff;

    position: relative;

    /*z-index: 1;*/

    text-transform: uppercase; 

}





header:after {

    content: "";

    background-image: url('640.jpg'); 

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 0;

    opacity: 0.2; 

}





nav {

    background-color: #111;

    padding: 10px;

    color: #ff4500;

    font-size: 18px;

}





button {

    padding: 10px 20px;

    border: none;

    cursor: pointer;

    font-size: 16px;

    transition: background-color 0.3s ease, color 0.3s ease; /* Agregar transiciones suaves */

}





button:not(:disabled) {

    background-color: #ff4500;

    color: #fff;

}





button:disabled {

    background-color: gray; 

    color: #000; 

}



button:hover:not(:disabled) {

    background-color: #ff6347;

}





form {

    margin-top: 20px;

}





#mensaje {

    background-color: #ff4500;

    color: #fff;

    padding: 10px;

    margin-top: 10px;

    text-align: center;

    animation: fade 5s linear infinite; 

}





@keyframes fade {

    0%, 100% {

        opacity: 0; 

    }

    50% {

        opacity: 1; 

    }

}





#coordenadasGeneradas {

    margin-top: 20px;

    font-size: 18px;

}





#map {
	height: 200px;
	width: 80%;
	border: 2px solid #ff4500;
}





.popup {
	display: none;
	position: fixed;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0%);
	background-color: #000;
	border: 2px solid red;
	padding: 20px;
	z-index: 1000;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	text-align: center;
	color: white;
}





#aceptarBtn {

    margin-top: 10px;

    padding: 5px 10px;

    background-color: red; 

    color: white;

    border: none;

    cursor: pointer;

}





.nav-list-item {
	margin-bottom: 10px;
	border-top-style: 20;
	border-right-style: 20;
	border-bottom-style: 20;
	border-left-style: 20;
	padding: 20px;
}





.nav-list-item strong {

    font-weight: bold; 

    color: #ff4500; 

}









footer {

    background-color: #222;

    color: #fff;

    text-align: center;

    padding: 20px;

}





footer p {

    font-size: 10px; 

    margin: 10px 0;

}





footer a {

    color: #ff4500;

    text-decoration: none;

    transition: color 0.3s ease;

}



footer a:hover {

    color: #ff6347;

}



.terminos-popup {

            display: none;

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background-color: rgba(0, 0, 0, 0.7);

            z-index: 1;

            overflow: auto;

        }



        .popup-contenido-terminos {

            background-color: black;

            color: white;

            border: 1px solid red;

            margin: 10% auto;

            padding: 20px;

            width: 70%;

            text-align: center;

        }



        #aceptar-terminos {

            background-color: red;

            color: white;

            padding: 10px 20px;

            border: none;

            cursor: pointer;

        }



        #aceptar-terminos:hover {

            background-color: darkred;

        }