html {
    font-size: 14px;
    overflow: auto;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
    background-image: url('/images/NuevoFondo.jpeg');
    background-size: cover; /* Ajusta la imagen para que se vea completamente */
    background-repeat: no-repeat; /* No repite la imagen */
    background-position: bottom right; /* Centra la imagen en el fondo */
    background-attachment: fixed; /* Mantiene la imagen fija durante el desplazamiento */
    /*margin-bottom: 60px;*/
    color: white; /* Establece el color del texto a blanco */
    font-family: Arial, sans-serif; /* Cambia la fuente del campo de entrada */
    overflow: auto;
}

.navbar .nav-link {
    color: white; /* Cambia el color de los enlaces en la barra de navegación */
}

.footer {
    color: white; /* Cambia el color del texto en el pie de página */
}

.panel-container {
    background-color: #00aaff; /* Color celeste */
    color: white; /* Texto blanco */
    padding: 20px; /* Espaciado interno */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para dar profundidad */
    margin-bottom: 20px; /* Espaciado inferior */
}

    .panel-container h2, .panel-container h3 {
        color: white; /* Color blanco para los encabezados */
    }

    .panel-container .form-control {
        background-color: #e0f7fa; /* Color de fondo más claro para los campos de entrada */
        color: black; /* Texto negro en campos de entrada para mejor legibilidad */
        border: 1px solid #00bfff; /* Borde del mismo color que el fondo del panel */
    }

    .panel-container .btn-primary {
        background-color: #007bff; /* Color del botón primario */
        border-color: #007bff; /* Color del borde del botón primario */
    }

    .panel-container .text-danger {
        color: #ffdddd; /* Color para mensajes de validación */
    }

.form-floating {
    position: relative;
}

.icon-container {
    position: absolute;
    top: 80%;
    right: 0.75rem; /* Ajusta la distancia desde el borde derecho */
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 1; /* Asegura que el ícono esté encima de otros elementos */
}

.icon-color {
    color: #007bff; /* Cambia el color del ícono según sea necesario */
}

.text-danger {
    position: absolute;
    top: 100%; /* Coloca el mensaje de validación debajo del campo */
    left: 0; /* Alinea el mensaje de validación con el borde izquierdo del campo */
    width: 100%; /* Asegura que el mensaje de validación se extienda a lo ancho del campo */
    margin-top: 0.25rem; /* Espacio entre el campo y el mensaje de validación */
}

input, textarea {
    font-family: 'Roboto', sans-serif;
    font-size: 22px; /* Ajusta el tamaño de la fuente según tus necesidades */
    font-weight: normal; /* Ajusta el grosor de la fuente */
    color: #333; /* Cambia el color del texto */
}

.footer {
    height: 60px; /* Ajusta según la altura de tu pie de página */
    background-color: #f1f1f1;
    position: relative;
    bottom: 0;
    width: 100%;
}

/* Arranca lo mio */

.btn-logoIngreso {
    max-width: 220px; /* Tamaño máximo del botón */
    width: 220%; /* Tamaño relativo para dispositivos móviles */
    height: auto; /* Mantiene proporciones */
    background-color: transparent;
    border:none;
    
}
    .btn-logoIngreso img {
        max-width: 80%; /* Ajusta la imagen al tamaño del botón */
        height: auto; /* Mantiene proporciones */
    }


.btn-ingreseaqui {
    color: white;
    background-color: transparent;
    border: none;
}

/* Media Query para Pantallas Pequeñas */
@media (max-width: 768px) {
    .btn-logoIngreso {
        max-width: 120px; /* Ancho más pequeño en pantallas móviles */
        height: 80px; /* Menos altura para que no sea tan grande en móvil */
    }

    .btn-ingreseaqui {
        max-width: 100px; /* Tamaño máximo del botón */
    }
}

/*.fixed-bottom {
    position: fixed;
    bottom: 80px;*/ /* Ajusta según la separación necesaria del footer */
    /*left: 50%;*/ /* Posición horizontal centrada */
    /*transform: translateX(-50%);*/ /* Corrige el desplazamiento */
    /*width: 100%;*/ /* Asegura que ocupe todo el ancho */
    /*display: flex;*/ /* Flexbox para centrar el contenido */
    /*justify-content: center;*/ /* Centra horizontalmente el contenido */
    /*z-index: 9999;*/ /* Asegura que esté encima del contenido */
    /*padding: 0 10px;*/ /* Espaciado en los bordes laterales */
/*}*/

.boton-logoroto {
    max-width: 200px; /* Tamaño máximo del botón */
    width: auto; /* Tamaño relativo al contenido */
    height: auto; /* Mantener proporciones */
    padding: 0; /* Sin relleno adicional */
}

    /* La imagen dentro del botón */
    .boton-logoroto img {
        max-width: 100%; /* Ajusta la imagen al tamaño del botón */
        height: auto; /* Mantiene proporciones */
    }

/* Media query para pantallas medianas */
@media (max-width: 768px) {
    .boton-logoroto {
        max-width: 120px;
    }
}

/* Media query para pantallas pequeñas */
@media (max-width: 480px) {
    .boton-logoroto {
        max-width: 100px;
    }
}

.row.justify-content-center.fixed-bottom {
    position: sticky;
    bottom: 20px; /* Ajusta la distancia desde el borde inferior */
    margin-bottom: 0; /* Elimina solapamiento con el contenido */
    z-index: 999; /* Asegura que no quede por debajo de otros elementos */
}

.text-center h1 {
    text-align: center;
    margin: 0;
    color: white;
    display: flex; /* Alinea elementos en fila */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    flex-wrap: wrap; /* Permite que los elementos se adapten */
}

.text-center .software-text {
    font-size: 5vw; /* Ajuste dinámico basado en el ancho de la ventana */
    margin-right: 15px; /* Espaciado entre el texto y la imagen */
}

.text-center .display-4 {
    font-size: 5vw; /* Tamaño dinámico del texto principal */
}

.text-center h1:nth-of-type(2) {
    font-size: 2vw; /* Tamaño dinámico del texto secundario */
}

/* Imagen del logo */
.titulo-rotodiesel {
    max-width: 500px; /* Tamaño máximo más grande */
    width: 50vw; /* Tamaño dinámico basado en el ancho de la ventana */
    height: auto; /* Mantiene la proporción de la imagen */
}

/* Media Queries para pantallas pequeñas */
@media (max-width: 768px) {
    .text-center .software-text {
        font-size: 40px; /* Aumenta el tamaño del texto en móviles */
    }

    .text-center .display-4 {
        font-size: 40px; /* Ajusta el texto principal en móviles */
    }

    .text-center h1:nth-of-type(2) {
        font-size: 25px; /* Ajusta el texto secundario en móviles */
    }

    .titulo-rotodiesel {
        max-width: 200px; /* Reduce el tamaño máximo en móviles */
        width: 50vw; /* Más espacio relativo al ancho de pantalla */
    }
}

.d-flex {
    display: flex;
    justify-content: center; /* Centra los elementos horizontalmente */
    flex-wrap: wrap; /* Permite que los botones se ajusten en múltiples líneas si es necesario */
}

.btn {
    display: inline-block;
    padding: 0;
    margin: 10px; /* Espaciado entre los botones */
}

.boton-imagen {
    width: 220px; /* Establece un tamaño fijo o relativo para las imágenes */
    height: 120px;
    border-radius: 5px; /* Bordes redondeados */
    overflow: hidden; /* Oculta el desbordamiento de la imagen */
    position: relative; /* Asegura que la imagen se posicione bien dentro del contenedor */    
}

    .boton-imagen img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* Mantiene la proporción de la imagen sin recortarla */
    }

.bosch-color {    
    background-color: black;
}

.siemens-color {
    background-color: white;
}

.denso-color {
    background-color: red;
} 

.brand-image-bosch, .brand-image {
    width: 100%;
    height: auto;
}

/* Media Queries para pantallas más pequeñas */
@media (max-width: 768px) {
    .d-flex {
        flex-direction: column; /* Muestra los botones en una columna en pantallas pequeñas */
        align-items: center; /* Centra los botones horizontalmente */
    }

    .boton-imagen {
        width: 150px; /* Ajusta el tamaño de las imágenes en móviles */
        height: 70px;
    }
}

.boton-imagen-panel {
    display: inline-block;
    width: 320px; /* Establece un tamaño fijo o relativo para las imágenes */
    height: 100px;
    margin: 10px; /* Espaciado entre botones */
    border: none; /* Sin borde */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor al pasar el ratón */
    text-align: center; /* Centrar el texto */
    overflow: hidden; /* Oculta cualquier contenido que sobresalga */
   
}

    .boton-imagen-panel img {
        width: 100%; /* La imagen ocupa todo el ancho del botón */
        height: 100%; /* La imagen ocupa toda la altura del botón */
        object-fit: contain; /* Ajusta la imagen dentro del espacio sin recortarla */
        border-radius: 5px; /* Bordes redondeados para la imagen */
    }

/* Media Query para Pantallas Pequeñas */
@media (max-width: 768px) {
    .boton-imagen-panel {
        max-width: 250px; /* Ancho más pequeño en pantallas móviles */
        height: 80px; /* Menos altura para que no sea tan grande en móvil */
    }
}

/* Estilo base para el texto */
.animated-text {
    font-family: 'Arial', sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #00aaff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 2px;
    margin: 0;
    padding: 0;
    display: inline-block;
    position: relative;
    animation: bounce 2s infinite; /* Animación cíclica */
}

/* Animación de rebote */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Cambio de color al pasar el ratón */
.animated-text:hover {
    color: #007bff; /* Cambia a un color naranja */
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
    animation: shake 0.5s infinite;
}

/* Animación de sacudida */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

/* Diseño responsivo */
@media (max-width: 768px) {
    .btn-ingreseaqui, .btn-logoIngreso {
        width: 100%; /* Ajustar al ancho del contenedor */
        text-align: center;
    }

    .animated-text {
        font-size: 16px; /* Reducir el tamaño de texto */
    }
}