h1 {
    color: #16A34A; /* Verde similar a bg-green-600 */
    font-size: 3em; /* Tamaño grande */
    font-weight: 600; /* Negrita */
    text-align: left; /* Alineación izquierda */
    margin-left: 10px; /* Margen izquierdo pequeño */
}


/* Estilos generales */
a {
  color: #4CAF50; /* Color del enlace en verde */
  text-decoration: $link-decoration; /* Decoración del texto (variable, depende de tu preprocesador) */
  background-color: transparent; /* Eliminar fondo en IE10 */

  &:active {
    background-color: transparent; /* Asegurar que no haya fondo en el enlace activo en IE10 */
  }

  @include hover() { /* Mezcla para hover (usa variables específicas) */
    color: $link-hover-color; /* Color en hover (variable) */
    text-decoration: $link-hover-decoration; /* Decoración en hover (variable) */
  }
}

table.dataTable tbody td {
  white-space: nowrap !important; /* Evitar saltos de línea en celdas */
  font-size: 15px !important; /* Tamaño de fuente específico */
}

#tbl_productos tbody th {
  white-space: nowrap !important; /* Evitar saltos de línea en encabezados */
}

.addNewRecord {} /* Clase vacía, sin reglas */

.sidebar-mini {
  height: 100vh !important; /* Altura completa del viewport */
}

.no-underlined-link {
  text-decoration: none; /* Sin subrayado */
}

/* Estilos generales para enlaces */
.nav-pills .nav-link {
  color: #4a5568; /* Gris oscuro por defecto */
}

.nav-pills .nav-link:not(.active-custom):hover {
  color: #4CAF50; /* Verde al hacer hover */
}

.nav-pills .nav-item.dropdown.show .nav-link:hover {
  color: #1a202c; /* Color texto dropdown en hover */
}

.nav-pills .nav-link.active-custom {
  background-color: #4CAF50; /* Fondo verde en activo */
  color: #fff; /* Texto blanco en activo */
}

.nav-pills .nav-link.active-custom p {
  color: #fff !important; /* Texto blanco en <p> dentro del enlace activo */
}

.nav-pills .nav-link.active-custom:hover {
  background-color: #45a049; /* Verde más oscuro en hover */
  color: #fff; /* Texto sigue siendo blanco */
}

/* Tabla 1: listaSuppliers */
/* Tabla 1: listaSuppliers */
#listaSuppliers {
  width: 100%;
  border-collapse: collapse; /* Unificar bordes */
  overflow: hidden; /* Evitar que el contenido salga del área visible */
  position: relative; /* Contenedor relativo */
}

/* Tabla 1: listaSuppliers */
#listaSuppliers {
  width: 100%;
  border-collapse: collapse; /* Unificar bordes */
  overflow: hidden; /* Evitar que el contenido salga del área visible */
  position: relative; /* Contenedor relativo */
}

#listaSuppliers tbody tr {
  background-color: #ffffff; /* Fondo blanco en todas las filas */
  transition: background-color 0.3s ease, transform 0.2s ease; /* Transición suave para color y tamaño */
  will-change: transform; /* Optimizamos la transición de escala */
}

#listaSuppliers tbody tr.selected {
  background-color: #d2f8d2; /* Verde claro para fila seleccionada */
  transform: scale(1.02); /* Aumenta un poco más el tamaño en selección */
  z-index: 2; /* Eleva la fila seleccionada para evitar solapamientos */
}

/* Borde estilo flag en la primera celda */
#listaSuppliers tbody tr.selected td:first-child {
  position: relative; /* Habilitar posicionamiento relativo */
  overflow: hidden; /* Asegura que el contenido no se desborde */
}

#listaSuppliers tbody tr.selected td:first-child::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px; /* Grosor del flag */
  height: 100%;
  background-color: #28a745; /* Verde oscuro */
  border-top-left-radius: 4px; /* Bordes redondeados opcionales */
  border-bottom-left-radius: 4px;
  z-index: 10; /* Asegura que el flag esté por encima de otros elementos */
  overflow: hidden; /* Asegura que el flag no se desborde */
}

/* Celdas de la tabla */
#listaSuppliers tbody td {
  font-size: 14px; /* Tamaño del texto */
  padding: 12px 10px; /* Espaciado interno */
  text-align: left; /* Alineación izquierda */
  border-bottom: 1px solid #f1f1f1; /* Bordes sutiles entre filas */
  vertical-align: middle; /* Centrado vertical */
  overflow: hidden; /* Evitar desbordamiento del contenido */
}
#listaSuppliers tbody tr:hover {
  background-color: #f1f8f5; /* Verde muy suave en hover */
  transform: scale(1.01); /* Aumenta ligeramente el tamaño en hover */
  z-index: 1; /* Asegura que el hover no se esconda */
}
/* Tabla 2: listaExpenses */
#listaExpenses {
  width: 100%;
  border-collapse: collapse; /* Unificar bordes */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
  overflow: hidden; /* Evitar que el contenido salga del área visible */
  position: relative; /* Contenedor relativo */
}

#listaExpenses tbody tr {
  background-color: #ffffff; /* Fondo blanco en todas las filas */
  transition: background-color 0.3s ease, transform 0.2s ease; /* Transición suave para color y tamaño */
  will-change: transform; /* Optimizamos la transición de escala */
}

#listaExpenses tbody tr:hover {
  background-color: #f1f8f5; /* Verde muy suave en hover */
  transform: scale(1.01); /* Aumenta ligeramente el tamaño en hover */
  z-index: 1; /* Asegura que el hover no se esconda */
}

#listaExpenses tbody tr.selected {
  background-color: #d2f8d2; /* Verde claro para fila seleccionada */
  transform: scale(1.02); /* Aumenta un poco más el tamaño en selección */
  z-index: 2; /* Eleva la fila seleccionada para evitar solapamientos */
}

/* Borde estilo flag en la primera celda */
#listaExpenses tbody tr.selected td:first-child {
  position: relative; /* Habilitar posicionamiento relativo */
  overflow: hidden; /* Asegura que el contenido no se desborde */
}

#listaExpenses tbody tr.selected td:first-child::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px; /* Grosor del flag */
  height: 100%;
  background-color: #28a745; /* Verde oscuro */
  border-top-left-radius: 4px; /* Bordes redondeados opcionales */
  border-bottom-left-radius: 4px;
  z-index: 10; /* Asegura que el flag esté por encima de otros elementos */
  overflow: hidden; /* Asegura que el flag no se desborde */
}

/* Celdas de la tabla */
#listaExpenses tbody td {
  font-size: 14px; /* Tamaño del texto */
  padding: 12px 10px; /* Espaciado interno */
  text-align: left; /* Alineación izquierda */
  border-bottom: 1px solid #f1f1f1; /* Bordes sutiles entre filas */
  vertical-align: middle; /* Centrado vertical */
  overflow: hidden; /* Evitar desbordamiento del contenido */
}