/* Estilos generales */
body {
  background-color: var(--primary-color);
  margin: 0;
  font-family: Arial, sans-serif;
}


/* Contenedor del botón de administrador */
.admin-button-container {
  position: fixed;
  top: 10px; /* Distancia desde la parte superior */
  right: 10px; /* Distancia desde la derecha */
  z-index: 1000; /* Asegura que el botón esté siempre visible */
}

/* Personalización del botón de administrador */
.admin-button {
  padding: 5px 10px; /* Hace el botón más pequeño */
  font-size: 12px; /* Tamaño de fuente reducido */
  background-color: #007bff; /* Color azul */
  border: none; /* Sin borde adicional */
  border-radius: 5px; /* Bordes redondeados */
  color: white; /* Texto blanco */
  cursor: pointer; /* Cursor de puntero */
  transition: background-color 0.3s ease; /* Efecto suave al pasar el ratón */
}

/* Efecto hover para el botón */
.admin-button:hover {
  background-color: #0056b3; /* Azul más oscuro al pasar el ratón */
}

/* Contenedor principal con imagen de fondo */
#main-container {
  background-image: url('/uploads/background.jpg'); /* URL dinámica */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0.5); /* Capa de transparencia */
  color: white; /* Texto blanco sobre fondo oscuro */
}

/* Variables CSS dinámicas */
:root {
  --primary-color: #6d7e74;
  --secondary-color: #13c357;
}

/* Personalización de colores usando variables */
.bg-primary {
  background-color: var(--primary-color) !important;
}

.text-primary {
  color: var(--primary-color) !important;
}

.btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.navbar-light .navbar-nav .nav-link {
  color: var(--primary-color) !important;
}

/* Efectos de hover usando variables */
.btn-primary:hover {
  background-color: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
}

.navbar-light .navbar-nav .nav-link:hover {
  color: var(--secondary-color) !important;
}

/* Ajuste de imágenes */
.quienes-somos-images img,
.diagnostico-images img,
.implementacion-images img,
.horas-extra-images img,
.brigadas-images img,
.auditorias-images img,
.pgirasa-images img,
.otras-actividades-images img {
  max-width: 100%;
  height: auto;
  margin: 10px;
}

/* Carousel image styling */
.carousel-image {
  width: 60%;
  height: 100px; /* Altura fija para estandarizar */
  object-fit: cover; /* Ajusta imagen sin deformarla y la recorta si es necesario */
  object-position: center; /* Centra la imagen para un recorte equilibrado */
  border-radius: 12px; /* Opcional: mejora estética */
}
.text-justify {
  text-align: justify;
}