/* Configuración general */

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

/* Barra superior */

.top-bar {
  background-color: #04478A;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  color: white;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.left-section,
.center-section,
.right-section {
  flex: 1;
}
.menu-section{
 width: 50px;
}
.menu-section button{
  font-size: 12px;
  background-color: orange;
  border: none;
}

.left-section {
  text-align: left;
}

.center-section {
  text-align: left;
 
}

.right-section {
  text-align: right;
  font-size: 12px;
}

/* Menú */
.small-icon {
  font-size: 10px;
}

/* Cuadro blanco con sombra */
.sombra {
  border-color: #aaaaaa;
  border-width: 1px;
  border-style: solid;
  border-radius: 5px;
  box-shadow: 2px 2px 6px #666;
}

/* Contenido principal */

.content {
  background-color: #D9DDDF;
  min-height: calc(80vh - 100px);
  padding: 20px;
  margin-top: 50px;
}

/* Pie de página */

.footer {
  background-color: white;
  padding: 20px;
  text-align: center;
  color: #888888;
  font-size: 15px;
}

/* Estilos para resaltar el cuadro del menú al pasar el cursor sobre él */
.card-text {
  color: rgb(31, 30, 30);
  font-size: 12px;
}

form label,
form input,
form select {
  font-size: 15px;
}

.card-header {
  color: #2980B9;
}

.input-group {
  margin-bottom: 8px;
}

.form-ancho {
  width: 100px;
  /* Ajusta el ancho según tu preferencia */
}

.logo-image {
  width: auto;
  /* Ajusta el ancho según tu preferencia */
  height: 20px;
  ;
  /* Mantén el aspecto del logo al cambiar el ancho */
}

.logo-section {
  flex: 1;
  /* Ajusta este valor según la proporción deseada del ancho */
}

.title-section {
  flex: 2;
  /* Ajusta este valor según la proporción deseada del ancho */
  text-align: left;
  /* Alinear a la izquierda, como solicitado anteriormente */
  font-family: var(--bs-font-sans-serif);
  font-size: 19px;
  font-weight: bold;
}

.c_centro {
  width: 50%;
  margin-left: 25%;
}

.user-section {
  flex: 1;
  /* Ajusta este valor según la proporción deseada del ancho */
}


/* Esconde la sección seleccionada cuando cambia el tamaño */
@media (max-width: 767px) {
  .left-section {
    display: none;
  }

  .right-section {
    flex:none;
  }
  .center-section {
    align: left;
    flex:none;
  }

  .navbar-collapse {
    z-index: 9999;
  }

  .input-group button {
    margin-top: 1rem;
    z-index: 1;
  }

  .c_centro {
    width: 100%;
  }
}

.btn-custom {
  height: 16px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 13px;
  line-height: 16px;
}

.btn-medio {
  height: 16px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 13px;
  line-height: 16px;
}

.btn-chico {
  height: 16px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 13px;
  line-height: 16px;
}


.btn-color-primary {
  background-color: #1D9CE5;
  border-color: #1D9CE5;
  color: #ffffff;
}

.btn-color-success {
  background-color: #5CB85C;
  border-color: #5CB85C;
  color: #ffffff;
}

.btn-color-info {
  background-color: #337AB7;
  border-color: #337AB7;
  color: #ffffff;
}

.btn-color-warning {
  background-color: #F0AD4E;
  border-color: #F0AD4E;
  color: #ffffff;
}

.btn-color-danger {
  background-color: #D9534F;
  border-color: #D9534F;
  color: #ffffff;
}

.small-icon {
  font-size: 0.8rem;
}

/* Estilos del preloader */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
  z-index: 9999;
}

.spinner {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  background-color: #333;
  margin: -20px 0 0 -20px;
  border-radius: 100%;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}

@keyframes sk-scaleout {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1.0);
    opacity: 0;
  }
}

.paginate_button .--bs-pagination-font-size {
  font-size: 12px;
  /* Cambia el tamaño del texto según tus preferencias */
  padding: 2px;
  /* Ajusta el espacio interno de los botones de paginación */
}

/* Alineacion de celdas en Datatable */
.tabla-center {
  text-align: center;
}

.tabla-left {
  text-align: left;
}

.tabla-right {
  text-align: right;
}


.despacho a {
  color: #2fa4e7;
  /* color azul claro */
  text-decoration: none;
  font-weight: 600;
  /* sin subrayado */
}

.despacho a:hover {
  color: #2fa4e7;
  /* color azul más oscuro al pasar el cursor */
  text-decoration: underline;
  /* subrayado al pasar el cursor */
}
#menu {
  position: fixed;
  padding: 10px;
  padding-top: 55px;
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  background-color: #02274d;
  overflow-x: hidden;
  transition: transform 0.2s ease-in-out;
  transform: translateX(-100%);
  box-shadow: 5px 0 5px -2px rgba(0, 0, 0, 0.3);
  z-index: 90;
}

#menu ul {
  list-style: none;
  padding: 0;

}

#menu ul li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.322);
  line-height: 1.8;
  margin-left: 10px;
  /*padding: 8px 8px 8px 15px;*/
  text-decoration: none;
  font-size: 14px;
  color: white;
  /* Cambia el color de la fuente a naranja */
  font-family: 'Poppins', arial, sans-serif;
  /* Añade la fuente Poppins */
  display: block;
  transition: .2s all ease;
}

#menu ul li a {
  color: orange;
  text-decoration: none;
  padding: 5px 0;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#menu .sub-menu li a {
  color: white;
  /* Establece el color del texto del submenú a blanco */
  font-size: 12px;
}

#menu .sub-menu li a:hover {
  color: orange;
  /* Cambia el color del texto a naranja al pasar el ratón por encima */
  font-size: 12px;
}

@media screen and (max-width: 600px) {
  #menu ul li {
      font-size: 14px;
  }
}

a[data-toggle="collapse"] {
  position: relative;
}

.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

.dropdown-toggle::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}