.error {
  color: red;
}


body {
  background-color: whitesmoke;
}



.hero {
  background: url(../img/fresco5.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 290px;
 

}

/* --- CSS EN ESTILOS.CSS --- */

/* 1. Hace transparente el marco de Bootstrap que envuelve el formulario. */
#ModalUnificado .modal-content {
    /* Fondo blanco que bloquea la vista de la página de fondo */
    background-color: #fff !important; 
    
    /* Mantener las esquinas redondeadas y la sombra */
    border-radius: 20px; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 
    border: none; 
}

/* 2. Quita el padding del modal-body para que el formulario se pegue a la barra superior y lateral. */
#ModalUnificadoBody {
    background-color: #fff !important; /* Fondo blanco sólido para el cuerpo */
    padding: 20px 30px !important; /* Restaurar un padding interno estándar */
    
    /* Eliminar el flex/justify-content si ya no son necesarios para el centrado */
    display: block; 
    justify-content: initial;
}

/* 3. Estilo para el contenedor del formulario (.login-box-modal) - ESTO DEFINE LA TARJETA BLANCA */
.login-box-modal {
    max-width: 450px; 
    width: 100%;
    margin: 0 auto; /* Centrar el bloque en el modal-body */
    padding: 0; /* Quitar el padding duplicado aquí si ya está en #ModalUnificadoBody */
    background: transparent; /* Quitar fondo blanco duplicado */
    box-shadow: none; /* Quitar sombra duplicada */
    border-radius: 0;
}
.login-box-modal .col-6 {
    /* Si quieres forzar que SÍ aparezcan lado a lado en el nuevo ancho de 450px: */
    width: 50%; 
}

/* 4. Estilo del Encabezado (para que la barra marrón se vea bien) */
#ModalUnificado .modal-header {
    background-color: #5E3D36 !important; /* Color sólido */
    color: white;
    /* Mantener las esquinas superiores redondeadas */
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom: none; 
}

.map {
  height: 500px;
  margin-top: 10px;
  background-color: #5E3D36;
}


.login-box {
  max-width: 400px;
  margin: 80px auto;
  padding: 30px;
  background-color: #fff;
  border-radius: 30px;
  box-shadow: 0 0 100px rgba(0, 0, 0, 0.1);
}

.login-box h2 {
  color: #a94442;
  font-weight: bold;
}

.btn-pineda {
  background-color: #5E3D36;
  color: #fff;
}

.btn-pinedaR {
  background-color: #DC7317;
  color: #fff;
}

.btn-pineda:hover {
  background-color: whitesmoke;
}

.btn-pinedaR:hover {
  background-color: whitesmoke;
}

label{
  font-weight: bold
}






@media (max-width: 900px) {
  .hero {
    background: url('../img/fresco6.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 250px;
   margin-top: 70px;


  }

 

  .hero h1 {
    font-size: 20px;
    color: whitesmoke;
  }

  .hero p {
    font-size: 17px;
    color: whitesmoke;
  }

  .hero a {
    width: 220px;
    height: 50px;
  }

  .map {
    height: 900px;
    margin-top: 5px;
    background-color: #5E3D36;
  }

}

/* Clase para asegurar que todas las imágenes tengan la misma altura y se ajusten correctamente */
.card-img-fixed {
    /* Define la altura deseada para todas las imágenes */
    height: 250px; /* Puedes ajustar este valor (250px es un buen inicio) */
    

}

/* Estilos personalizados para replicar el diseño */
.bg-pineda-orange {
  background-color: #e68a00 !important;
  color: white;
}

.text-pineda-brown {
  color: #4a4a4a !important;
}

.card-shadow {
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.05);
}

.dashboard-container {
  padding: 15px;
  /* Reducido en móviles */
  background-color: #f7f7f7;
  min-height: 100vh;
}

/* Ajuste de padding para pantallas grandes */
@media (min-width: 992px) {
  .dashboard-container {
    padding: 30px;
  }
}

.vehicle-details p {
  margin-bottom: 0.5rem;
  color: #6c757d;
  font-size: 0.95rem;
}

.card-warning-border {
  border: 1px solid #ffc107 !important;
  border-left: 5px solid #ffc107 !important;
}

.bg-light-gray {
  background-color: #f4f4f4;
}

/* Ajuste específico para móvil: alinear verticalmente los detalles del vehículo si no caben */
@media (max-width: 575.98px) {
  .vehicle-card-content {
    /* Forzar que el contenido del vehículo se apile en móviles pequeños */
    flex-direction: column;
    align-items: flex-start !important;
  }

  #offcanvasMenu {
        width: 70%; /* Ocupa un 70% de la pantalla en dispositivos pequeños */
    }

    .sidebar-pc-menu {
        display: none !important;
    }

    

  .vehicle-card-content .ms-3 {
    margin-left: 0 !important;
    margin-top: 10px;
  }
}

/* Estilo para el Scroll de la Barra Lateral */
.barra-con-scroll {
    overflow-y: auto;       /* Habilita scroll vertical */
    overflow-x: hidden;     /* Oculta scroll horizontal */
    flex-grow: 1;           /* Ocupa todo el espacio disponible en medio */
    width: 100%;
    
    /* Para Firefox */
    scrollbar-width: thin;
    scrollbar-color: #DC7317 #f1f1f1;
}

/* Para Chrome, Edge y Safari */
.barra-con-scroll::-webkit-scrollbar {
    width: 6px;
}
.barra-con-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.barra-con-scroll::-webkit-scrollbar-thumb {
    background-color: #DC7317;
    border-radius: 10px;
}