.container {
   max-width: 1200px;
   background-image: url(src/fondo.jpg);
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   
}
body{
   background-color: #e2e2e2;
}
.section{
   background-image: url(src/fondo.jpg);
}
.form{
   background-image: url(src/fondo.jpg);

}
.carousel-item {
   position: relative;
}

.carousel-item img {
   object-fit: cover;
   height: 650px;
   filter: brightness(100%);
}

.carousel-caption {
   position: absolute;
   left: 50%;
   transform: translate(-50%, -50%);
   color: #ac162b;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.377);
   background: 100px #ffffff7e ;
   width: 1920px;
}
@media (max-width: 576px) {
   .carousel-image-container img {
       height: 400px; 
   }
   .carousel-caption {
       font-size: 16px; 
       padding: 5px;
   }
   .col-md-6{
      flex: 0 0 100%;
      max-width: 100%;
   }
   .card {
      margin-top: 20px;
   }
}

.carousel-image-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(255, 255, 255, 0.247);
}

.empresas {
   padding: 40px 0;
}

.empresas h2 {
   font-size: 1.8rem;
   font-weight: bold;
   text-align: center;
   margin-bottom: 30px;
}

.empresas-logo {
   max-width: 150px;
   max-height: 100px;
   filter: grayscale(80%);
   transition: filter 0.3s ease-in-out;
}

.empresas-logo:hover {
   filter: grayscale(0%);
}

.numbers-section {
   background-color: #f8f9fa;
   padding: 50px 0;
   text-align: center;
}

.numbers-section h2 {
   font-size: 2rem;
   margin-bottom: 30px;
}

.number-box {
   font-size: 3rem;
   font-weight: bold;
   margin: 50px;
   color: rgb(255, 255, 255);
   background: rgba(0, 140, 255, 0.77);
}

.alertas-section,
.notificaciones-section {
   margin-top: 30px;
}

.alerta-item,
.notificacion-item {
   background-color: #f8f9fa;
   padding: 15px;
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   margin-bottom: 15px;
}

.card {
   border-radius: 12px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.profile-header {
   margin-bottom: 40px;
}

.profile-header h3 {
   font-size: 2rem;
   font-weight: 700;
}
.form-container {
   margin-top: 20px;
   background: #ffffff;
   padding: 20px;
   border-radius: 12px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   display: none;
}

.form-container input {
   border-radius: 8px;
   border: 1px solid #ced4da;
   box-shadow: none;
}

.form-control{
   border: 3px #ac162b solid;
   border-radius: 10px;
}

.toggle-button {
   background: #ac162b;
   color: white;
   border-radius: 8px;
}

.toggle-button:hover {
   background: #ac162b;
}

.profile-container {
   background-color: white;
   padding: 30px;
   border-radius: 12px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   width: 100%;
}

#map {
   height: 400px;
   width: 100%;
   margin-bottom: 20px;
}

.numbers-section {
   background-color: #ac162b; 
   color: white; 
   padding: 20px; 
   text-align: center; 
}

.number-box {
   background-color: white; 
   color: #ac162b; 
   font-size: 2rem; 
   font-weight: bold; 
   padding: 20px; 
   margin: 10px auto; 
   width: 100px; 
   height: 100px; 
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 10px; 
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
}


.nav-link{ 
   color: #ac162b; 
   font-weight: bold;
}

.card-header{
   text-align: center;
   background-color: #ac162b;
   color: white; 
   padding: 10px; 
   margin: 0; 
   border-bottom: 0; 
   font-size: 1.25rem; 
}

.form-select{
   border: 3px #ac162b solid ;
   border-radius: 10px;
}


.card {
   border: 1px solid #ddd;
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   margin-bottom: 1.5rem;
}

.card-body {
   padding: 1rem;
}

.card-title {
   font-size: 1.25rem;
   font-weight: bold;
   color: #ac162b;
   
}

.card-text {
   font-size: 1rem;
   color: #000000;
}

.card .btn {
   margin-top: 0.5rem;
   margin-right: 0.5rem;
   font-size: 0.875rem;
}

.card .btn-danger {
   background-color: #ac162b;
   border: none;
   max-width: 100%;
}

.card .btn i {
   margin-right: 0.25rem;
}

button.btn.btn-danger, a.btn.btn-danger {
   background-color: #ac162b;
   
}

label{
   color: #ac162b;
   font-weight: bold;
}

h1{
   color: #ac162b;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.377);
   text-align: center;
   margin-top: 10px;
}

h2, h3, h5, strong{
   color: #ac162b;
}



@media (max-width: 768px) {
   #sidebar {
       position: fixed;
       top: 0;
       left: 0;
       height: 100%;
       background-color: #343a40; 
       overflow-y: auto;
       z-index: 1000;
   }

   #sidebar-wrapper {
      overflow-y: auto;
      transition: all 0.3s;
      display: none !important; 
   }

   #sidebar.show {
       display: block; 
   }

   .sidebar-overlay {
       display: block; 
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.5);
       z-index: 999;
   }

   .sidebar-overlay.hidden {
       display: none; 
   }

   .content-container {
       margin-left: 0; 
   }
   
}