.centered {
    text-align: center !important;
    vertical-align: middle !important;

}
aside {
  z-index: 50; /* Barra lateral siempre sobre el contenido */
}

main {
  z-index: 1;
}
#chart {
    width: 100%;
    height: 500px;
    overflow-x: auto;
  }
  /* Reset de Tailwind para el contenedor de Bootstrap */
     /* Asegura que la barra lateral siempre tenga el mismo ancho */
     aside {
        width: 16rem; /* Esto es equivalente a w-64 */
    }
    /* Asegura que la navegación esté siempre centrada en la barra lateral */
    nav a {
        transition: background-color 0.3s ease, color 0.3s ease;
    }
    .checkbox-apple {
        position: relative;
        width: 35px; /* Reducido el tamaño */
        height: 20px; /* Reducido el tamaño */
        margin-right: 10px; /* Espacio entre el checkbox y el texto */
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        display: inline-block; /* Para que el label vaya al lado */
      }
      
      .checkbox-apple label {
        position: absolute;
        top: 0;
        left: 0;
        width: 35px; /* Reducido el tamaño */
        height: 20px; /* Reducido el tamaño */
        border-radius: 50px;
        background: linear-gradient(to bottom, #b3b3b3, #e6e6e6);
        cursor: pointer;
        transition: all 0.3s ease;
      }
      
      .checkbox-apple label:after {
        content: '';
        position: absolute;
        top: 1px;
        left: 1px;
        width: 18px; /* Reducido el tamaño */
        height: 18px; /* Reducido el tamaño */
        border-radius: 50%;
        background-color: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease;
      }
      
      .checkbox-apple input[type="checkbox"]:checked + label {
        background: linear-gradient(to bottom, #4cd964, #5de24e);
      }
      
      .checkbox-apple input[type="checkbox"]:checked + label:after {
        transform: translateX(15px); /* Ajustado para que se mueva correctamente */
      }
      
      .checkbox-apple label:hover {
        background: linear-gradient(to bottom, #b3b3b3, #e6e6e6);
      }
      
      .checkbox-apple label:hover:after {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
      }
      
      .yep {
        position: absolute;
        top: 0;
        left: 0;
        width: 35px; /* Reducido el tamaño */
        height: 20px; /* Reducido el tamaño */
        display: none;
      }
      
      label {
        font-size: 14px; /* Reducir el tamaño del texto */
        margin-left: 5px; /* Separar el texto del checkbox */
        vertical-align: middle; /* Alinear el texto con el centro del checkbox */
        display: inline-block;
      }
      /* Estilos adicionales para eliminar el borde de enfoque y el color predeterminado */
.checkbox-apple input[type="checkbox"]:focus + label {
    outline: none; /* Elimina el borde de enfoque */
    box-shadow: none; /* Elimina cualquier sombra alrededor del elemento */
  }
  
  .checkbox-apple input[type="checkbox"]:checked + label {
    background: linear-gradient(to bottom, #4cd964, #5de24e); /* Estilo cuando está seleccionado */
  }
  
  .checkbox-apple input[type="checkbox"]:checked + label:after {
    transform: translateX(15px); /* Asegura que el círculo se mueva correctamente */
  }
  
  /* Para que no se vea el borde azul al interactuar */
  .checkbox-apple input[type="checkbox"] {
    outline: none; /* Elimina el contorno en el checkbox */
    border: none; /* Elimina cualquier borde predeterminado */
    background-color: transparent; /* Asegura que el fondo no sea visible */
  }
  #data-table-buttons .btn {
    margin-right: 10px;  /* Espaciado entre los botones de exportación */
  }
  
  #reset-filters {
    margin-left: 10px;   /* Espaciado entre los botones de exportación y el botón de limpiar filtros */
  }

  .btn-spacing {
    margin-top: 10px; /* Espaciado hacia arriba */
    margin-bottom: 10px; /* Espaciado hacia abajo */
}
.dataTables_length {
  margin-bottom: 20px; /* Ajusta el valor según tus necesidades */
}
.button {
  --main-focus: #2d8cf0;
  --font-color: #323232;
  --bg-color-sub: #dedede;
  --bg-color: #eee;
  --main-color: #323232;
  position: relative;
  width: 200px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border: 2px solid var(--main-color);
  box-shadow: 4px 4px var(--main-color);
  background-color: var(--bg-color);
  border-radius: 10px;
  overflow: hidden;
  margin-right: 10px; /* Espacio a la derecha de cada botón */
}

.button, .button__icon, .button__text {
  transition: all 0.3s;
}

.button .button__text {
  transform: translateX(33px);
  color: var(--font-color);
  font-weight: 600;
}

.button .button__icon {
  position: absolute;
  transform: translateX(156px);
  height: 100%;
  width: 39px;
  background-color: var(--bg-color-sub);
  display: flex;
  align-items: center;
  justify-content: center;
}

.button .svg {
  width: 20px;
  fill: var(--main-color);
}

.button:hover {
  background: var(--bg-color);
}

.button:hover .button__text {
  color: transparent;
}

.button:hover .button__icon {
  width: 200px;
  transform: translateX(0);
}

.button:active {
  transform: translate(3px, 3px);
  box-shadow: 0px 0px var(--main-color);
}

.btn {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border-radius: 5px; /* Bordes redondeados */
  font-weight: bold; /* Texto en negrita */
  transition: background-color 0.3s, transform 0.3s; /* Transiciones suaves */
}

.btn:hover {
  transform: translateY(-2px); /* Efecto de elevación al pasar el mouse */
}

.btn-success {
  background-color: #28a745; /* Color de fondo verde */
  border: none; /* Sin borde */
  color: white; /* Color de texto blanco */
}

.btn-warning {
  background-color: #ffc107; /* Color de fondo amarillo */
  border: none; /* Sin borde */
  color: white; /* Color de texto blanco */
}

.button__icon {
  margin-left: 5px; /* Espaciado entre texto e icono */
  display: flex; /* Alinear icono */
  align-items: center; /* Centrar verticalmente */
}

.btn-spacing {
  margin-right: 10px; /* Espaciado entre botones */
}
.dt-buttons {
  display: flex !important; /* Forzar que el contenedor use flexbox */
  gap: 10px; /* Espacio entre los botones */
}

/* Contenedor principal */
.container.mb-4 {
  background: linear-gradient(135deg, #f9f9f9, #ffffff);
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  transition: all 0.3s ease;
}

/* Tarjeta */
.card {
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #ffffff, #f5f5f5);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* Cabecera */
.card-header {
  background: linear-gradient(135deg, #4caf50, #087f23); /* Gradiente verde */
  color: white;
  padding: 15px 20px;
  border-radius: 10px 10px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Título */
.card-header h5 {
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0;
}

/* Cuerpo */
.card-body {
  background: #ffffff;
  padding: 20px;
  border-radius: 0 0 10px 10px;
}

/* Animación en hover */
.container.mb-4:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-3px);
}


/* Asegura que el main no se superponga al sidebar */
main {
  margin-left: 16rem; /* Corresponde a la clase w-64 de Tailwind (16rem = 256px) */
  transition: margin-left 0.3s ease;
}

/* Opcional: Para ventanas pequeñas */
@media (max-width: 768px) {
  main {
    margin-left: 0; /* Permite que el contenido ocupe todo el ancho si el sidebar se oculta */
  }
}