:root{
    --grid-bg-primary-color : #414141;
    --grid-bg-secondary-color : #272727;
    --grid-thead-box-shadow : 0 1px 11px -5px rgb(0,0,0);
    --grid-th-text-color : #c7c7c7;
    --grid-text-color : #ebebeb;
    --grid-container-border-color : rgb(41,41,41);
    --grid-cell-border-color : rgb(57 57 57);
    --grid-row-hover :#3b3939; 
  }
  
  /* estilos basicos */

/* Espaciado */
.bm-p-0 { padding: 0; }
.bm-p-1 { padding: 0.25rem; }
.bm-p-2 { padding: 0.5rem; }
.bm-p-3 { padding: 1rem; }
.bm-p-4 { padding: 1.5rem; }
.bm-p-5 { padding: 3rem; }

/* Margen */
.bm-m-0 { margin: 0; }
.bm-m-1 { margin: 0.25rem; }
.bm-m-2 { margin: 0.5rem; }
.bm-m-3 { margin: 1rem; }
.bm-m-4 { margin: 1.5rem; }
.bm-m-5 { margin: 3rem; }

/* Borde */
.bm-border { border: 1px solid #000; }
.bm-border-rounded { border-radius: 4px; }
.bm-border-top { border-top: 1px solid #000; }
.bm-border-bottom { border-bottom: 1px solid #000; }
.bm-border-left { border-left: 1px solid #000; }
.bm-border-right { border-right: 1px solid #000; }

/* Flex */
.bm-flex { display: flex; }
.bm-flex-row { flex-direction: row; }
.bm-flex-column { flex-direction: column; }
.bm-justify-start { justify-content: flex-start; }
.bm-justify-end { justify-content: flex-end; }
.bm-justify-center { justify-content: center; }
.bm-align-start { align-items: flex-start; }
.bm-align-end { align-items: flex-end; }
.bm-align-center { align-items: center; }

.flex{
  display: flex;
}

.flex-row{
  flex-direction: row;
}

.flex-column{
  flex-direction: column;
}

.f-justify-center{
  justify-content: center;
}

.f-justify-left{
  justify-content: start;
}

.f-justify-right{
  justify-content: end;
}

.f-align-center{
  align-items: center;
}

.flex-row{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.flex-column{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.el-pointer{
  cursor: pointer;
}

.el-m-10{
  margin: 10px;
}

.bm-button {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    color: #fff;
    background-color: #2196f3;
    border: none;
  }
  
  .bm-button:hover {
    background-color: #1976d2;
  }
  
  .bm-button.primary {
    background-color: #2196f3;
  }
  
  .bm-button.primary:hover {
    background-color: #1976d2;
  }
  
  .bm-button.secondary {
    background-color: #9c27b0;
  }
  
  .bm-button.secondary:hover {
    background-color: #7b1fa2;
  }
  
  .bm-button.bm-success {
    background-color: #4caf50;
  }
  
  .bm-button.bm-success:hover {
    background-color: #388e3c;
  }
  
  .bm-button.bm-warning {
    background-color: #ffc107;
  }
  
  .bm-button.bm-warning:hover {
    background-color: #ffa000;
  }
  
  .bm-button.bm-danger {
    background-color: #f44336;
  }
  
  .bm-button.bm-danger:hover {
    background-color: #d32f2f;
  }


  /* grid clases */

  .bm-grid-container{
    border: 1px solid var(--grid-container-border-color);
    /* border-radius: 8px; */
    border-collapse: collapse;
    width: 100%;
    background-color: var(--grid-bg-primary-color);
    color: var(--grid-text-color);
    /* width: 400px; */
    overflow-x: auto;
  }


  .bm-grid-thead{
    background-color: var(--grid-bg-secondary-color);
    box-shadow: var(--grid-thead-box-shadow);
  }

  /*agrega separacion en los encabezados*/
  .bm-grid-thead-separation{
    border-right: 1px solid var(--grid-cell-border-color);
  }

  .bm-grid-th{
    font-weight: 500;
    color: var(--grid-th-text-color);
    font-size: small;
    /* min-width: 150px; */
  }

  .bm-grid-tr{
    position: relative;
  }

  .bm-grid-tr:hover{
    background-color: var(--hover-color); 
    transition: background-color 0.3s ease; 
  }

  .bm-grid-td{
    padding: 12px;
    cursor: pointer;
    font-size: 14px;
    /* background-color: #fff; */
  }

  .bm-grid-td-border-vertical{
    border-right: 1px solid var(--grid-cell-border-color);
  }

  .bm-grid-td-border-horizontal{
    border-bottom: 1px solid var(--grid-cell-border-color);
  }

  .bm-grid-td-border-all{
    border: 1px solid var(--grid-cell-border-color);
  }

  .bm-pagin-container{
    width: 100%;
    height: 50px;
    color: var(--grid-text-color);
    background-color: var(--grid-bg-primary-color);
    border-left: 1px solid var(--grid-container-border-color);
    border-right: 1px solid var(--grid-container-border-color);
    border-bottom: 1px solid var(--grid-container-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    /* border-radius: 0px 0px 8px 8px; */
  }

  .bm-showcolumns-container{
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: 10px;
    width: 200px;
    z-index: 3;
    background: var(--grid-bg-primary-color);
    position: absolute;
    right: 0;
    bottom: 0;
  }
  
  .bm-grid-action{
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    border-radius: 4px;
    transition: all 0.3s ease-in-out;
  }
  
  .bm-grid-action:hover{
    /* background-color: #1976d2; */
    box-shadow: 0 0 20px -5px rgba(0,0,0,0.2);
    transform: translate(0px, -2px);
  }

  /*Efecto ripple*/
  .ripple-wrapper {
    position: relative;
    overflow: hidden;
	transform: scale(1);
  }
  
  .ripple-wrapper .ripple {
    position: absolute;
    background-color: rgba(36, 35, 35, 0.2);
    border-radius: 50%;
    /* transform: scale(2); */
    pointer-events: none;
    animation: rippleEffect 0.4s infinite;
  }
  
  @keyframes rippleEffect {
    to {
      transform: scale(2);
      opacity: 0;
    }
  }

  /* ******************** */


.bm-grid-header {
  	display: flex;
	flex: 1;
  	background-color: var(--grid-bg-secondary-color);
	box-shadow: var(--grid-thead-box-shadow);
}

.bm-grid-header-stick{
  position: sticky;
  top: 0;
  z-index: 3;
}

.bm-grid-cell {
  flex: 1;
  padding: 10px;
  /* border-bottom: 1px solid #ccc; */
  font-size: 14px;
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  flex-shrink: 1;
  box-sizing: border-box;
  min-width: 50px;
}

.grid-header .grid-cell {
	
	box-sizing: border-box;
  }
  

.bm-grid-body {
  /* max-height: 200px; Ajusta la altura según tus necesidades */
  overflow-y: auto;
}

.bm-grid-body-scrollbar::-webkit-scrollbar {
  width: 10px;
}

/* Track */
.bm-grid-body-track::-webkit-scrollbar-track {
  /* background: transparent;  */
}
 
/* Handle */
.bm-grid-body-thumb::-webkit-scrollbar-thumb {
  background: grey; 
  border-radius: 4px;
}

/* Handle on hover */
.bm-grid-body-thumb::-webkit-scrollbar-thumb:hover {
  background: #272727; 
}

.bm-grid-row {
  display: flex;
  /* border-bottom: 1px solid #ccc; */
}

.bm-grid-row:hover{
    background-color: var(--grid-row-hover); 
    transition: background-color 0.3s ease; 
  }

.bm-grid-row .bm-grid-cell {
  flex: 1;
  padding: 15px;
  box-sizing: border-box;
}

@keyframes expandRow {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: auto; /* Altura final de la fila expandida */
    opacity: 1;
  }
}

.bm-row-expand {
  animation: expandRow 0.3s ease-in-out forwards; /* Duración de la animación y función de interpolación */
}
  

/*input search*/
.bm-input-search{
  outline: none;
  border: 1px solid var(--grid-container-border-color);
  padding: 10px;
  background-color: var(--grid-bg-primary-color);
  color: var(--grid-text-color);
}

.bm-showcolumns-container.showing {
  animation: showColumns 0.3s forwards; /* 0.3s es la duración, puedes ajustarla */
  display: block; /* o cualquier otro valor que necesites para mostrar el contenedor */
}

.bm-showcolumns-container.hiding {
  animation: hideColumns 0.3s forwards;
  display: none; /* o cualquier otro valor que necesites para ocultar el contenedor */
}

@keyframes showColumns {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hideColumns {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(10px);
  }
}