body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
    color: #333;
    height: 100%;
    min-height: 100vh; /* Hacer que el cuerpo ocupe al menos el 100% del viewport */
    display:flex;
    flex-direction: column;
}

html, body {
    height: 100%; /* Hacer que el body ocupe toda la altura de la pantalla */
    margin: 0;
    display: flex;
    flex-direction: column;
}

header { margin-bottom: 20px; }

img { border-radius: 10px; }

.is-invalid { border: 1px solid red; }

/* TOOTLE BUTTON */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
}

.switch input { display: none; }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 25px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 21px;
    width: 21px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

input:checked + .slider { background-color: #4CAF50; }

input:checked + .slider:before { transform: translateX(25px); }

/* FIN TOOGLE BUTTON */

#distanceInputContainer { margin-top: 10px; }
#alertContainer{ margin-top: 16px; }

.carousel-inner img {
    height: 400px;
    object-fit: cover;

    width: 100%; /* Asegura que la imagen ocupe todo el ancho del contenedor */
    /*height: auto;  Permite que la altura se ajuste proporcionalmente */
    object-fit: contain; /* Ajusta la imagen para que se mantenga completa dentro del contenedor */
    object-position: center; /* Centra la imagen dentro del contenedor */
    max-height: 500px; /* Ajusta la altura máxima del contenedor del carrusel */
}

.navbar-brand img { height: 50px; }

.login-container {
    display: flex;
    flex-direction:column;
    width:100%;
    /*max-width: 400px;*/
    align-items: center;
}

.btn-primary {
    background-color: #28a745;
    border-color: #28a745;
}

.btn-primary:hover {
    background-color: #218838;
    border-color: #1e7e34;
}
/* HEADER */

/* FOOTER */
footer {
    /* margin-top: 20px; */
    margin-top: auto;
    border-top: 1px solid #ddd;
    background-color: #2c3e50; /* Elige una de las opciones */
    color: #f8f9fa; /* Texto claro */
    position: relative; /* Establecer el footer como relativo */
    width: 100%; /* Asegurarse de que el footer ocupe todo el ancho */
    padding: 50px 0px;
}
.container{
    max-width: 90%;
    flex: 1; /* Permitir que el contenido principal ocupe el espacio disponible */
}

.row{
    /*flex-wrap: unset;*/
}
footer a {
    color: #42a745; /* Links verdes que contrastan bien */
}


.logo-footer{
    width: 9rem;
    max-width:115px;
}

/* INDEX */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 15px;
    text-align: center;
    z-index: 1000;
}

.cookie-consent-content p {
    margin: 0;
    display: inline-block;
}

.cookie-consent-content a {
    color: #ffc107;
    text-decoration: underline;
}

.cookie-consent-content button {
    margin-left: 20px;
}

.carousel-caption {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px 20px;
    border-radius: 5px;
    color: #fff;
    width: 100%;
    text-align: center;
    white-space: nowrap; /* Previene la separación del texto en líneas múltiples */
    overflow: hidden; /* Esconde el desbordamiento del texto fuera del contenedor */
    text-overflow: ellipsis; /* Muestra puntos suspensivos si el texto es muy largo */

}

.carousel-caption h5 {
    margin: 0;
    font-size: 1.5rem; /* Tamaño del texto */
    font-weight: bold;
}

.card {
    flex: 1 1 18%; /* Esto asegura que las tarjetas ocupen aproximadamente el 18% del ancho */
    margin: 10px;
}

.card-img-top {
    height: 150px; /* Fija la altura de las imágenes */
    object-fit: cover; /* Ajusta la imagen dentro del contenedor */
}

.tarjetas{
    gap:10px;
}


/* PERFIL */
.img-perfil{
    max-width: 150px;
}

#loading-spinner {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}

/* login */
#forgot_pass_wrap{
    display:flex;
    flex-direction: column;
    padding-top: 16px;
    align-items: flex-end;
}

/* USER PROFILE */
fieldset{
    border-radius: 5px; margin-bottom: 15px;
}

.image-wrapper img{
    max-width: 50px;
}


/* -- MODAL */

button.delete-btn {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background-color: #ff4d4d; /* Rojo suave */
    color: white;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

button.delete-btn:hover {
    background-color: #e60000; /* Rojo más intenso */
    transform: scale(1.1);
}

button.delete-btn:active {
    background-color: #cc0000; /* Rojo oscuro */
    transform: scale(1.05);
}




/* DISEÑO RESPONSIVE */
/* Diseño para pantallas pequeñas (móviles) */
@media (max-width: 576px) {
    .container {
        width: 100%;
        padding: 10px;
        max-width: 400px;
    }

    .card {
        margin-bottom: 20px;
        width: 100%;
    }

    .card img {
        width: 100%;
        height: auto;
    }
    footer > div.container>div.row{
        flex-direction: column;
    }

    footer > div.container > div.row > div.col-md-3{
        padding: 20px 0px;
    }

    div.col-md-3:first-child {
        text-align: center;
    }

}

/* Diseño para pantallas medianas (tablets) */
@media (min-width: 577px) and (max-width: 768px) {

}