details.opcionesTabla {
    *padding: 0.5em 0.5em 0;
    *margin-bottom: 10px;
    *border-bottom: 1px solid var(--grey6);
    *padding: 0 16px;
}

details[open].opcionesTabla{
    border-bottom: 0px;
    margin-bottom: .5rem;
}

details.opcionesTabla > div:first-of-type{
    overflow: hidden; /* Oculta el contenido desbordado durante la animación */
    transition: max-height 0.4s ease-in-out; /* Suaviza la apertura */
    max-height: 0; /* Altura inicial cerrada */
}


details[open].opcionesTabla > div:first-of-type{
    background-color: var(--grey1);
    border: 1px solid var(--grey3);
    border-radius: 8px;
    *padding: 0.5em;  
    max-height: 500px; /* Ajusta a una altura lo suficientemente grande para el contenido */
}

/* ENCABEZADO */

details.opcionesTabla summary{
    font-weight: bold;
    margin: -0.5em -0.5em 0;
    padding: 0.5em;
    display: block;
    color: var(--grey3);
    
    cursor: pointer;
}

details[open].opcionesTabla summary {
    margin-bottom: 0.5em;  
    color: var(--grey9);
   
}

/* FLECHA */

details.opcionesTabla summary::before {
    color: var(--blue);
    content: '▶'; /* Flecha derecha como predeterminada */
    font-size: 16px;
    margin-right: 10px;
    transition: transform 0.4s ease-in-out; /* Suaviza la rotación */
  }
  
details[open].opcionesTabla summary::before {
    display: inline-block;
    transform: rotate(90deg); /* Gira la flecha hacia abajo */
}


details[open] h4{
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

/* FILTROS */
details[open] #filtros-avanzados{
    display: flex;
}

details[open] #filtros-avanzados .filtro-columna label{
   background-color: var(--grey5);
   color: white;
}

details[open] #filtros-avanzados .filtro-columna select{
    background-color:white;
    color: black;
 }

/* SELECTOR COLUMNAS */
#column-menu {
    display: flex;
    gap: 20px;
}

#column-menu h3 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Ajuste para que los botones de orden estén alineados verticalmente */
#column-menu {
    display: flex;
    justify-content: space-between; /* Distribuye el espacio entre los dos menús */
    gap: 20px;
}

#column-menu > div {
    width: 48%; /* Asignamos casi la mitad del ancho a cada div para los menús */
}

#column-menu h3 {
    text-align: center; /* Centramos el título de cada menú */
    margin-bottom: 10px;
}

#column-menu select {
    width: 100%; /* Hace que los select ocupen todo el ancho disponible */
    height: 150px; /* Ajusta la altura según tus necesidades */
    margin-bottom: 10px;
    padding: 5px;
    border: 1px solid var(--grey3);
    border-radius: 5px;
    box-sizing: border-box; /* Incluye el padding en el cálculo del ancho */
}

#column-menu #menu_columnasDisponibles,
#column-menu #menu_columnasSeleccionadas{
    background-color: var(--grey1);
}

#column-menu .column-order-buttons {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: flex-start;
    width: 100%; /* Hace que los botones de orden ocupen todo el ancho */
}