/* PASO 2.1: Crear el contenedor con scroll */
.contenedor-scroll-g {
    /* Define una altura máxima para que el contenido de la tabla lo exceda */
    max-height: 400px; 
    /* Esta línea es la que activa el scroll vertical cuando el contenido supera la altura */
    overflow-y: auto; 
    /* Opcional: Establece un ancho para que la tabla no se estire indefinidamente */
    width: 150%;
    /* margin: 20px auto; */
    
    margin-left: 0; 
    margin-right: auto; 
    border: 1px solid #ccc;
}

/* PASO 2.2: Fijar el Encabezado (thead) */
.contenedor-scroll-g thead tr {
    /* Mantiene el encabezado pegado a la parte superior (top: 0) de su contenedor (.contenedor-scroll) */
    position: sticky;
    top: 0; 
    
    /* Fondo esencial: Evita que las celdas de la tabla pasen por debajo del texto del encabezado */
    background-color: ·#333; 
    color: white; 
    z-index: 10; /* Asegura que esté por encima del contenido que se desplaza */
}

/* Opcional: Estilo general para las celdas */
.contenedor-scroll-g th, .contenedor-scroll-g td {
    padding: 10px;
    text-align: left;
}
/* Estilo para los títulos con efecto de desenfoque */
.contenedor-scroll-g th.con-blur-g {

  /* Color Casi Opaco (95%) */
  /*background-color: rgba(255, 255, 255, 0.95);*/
  background-color: #003366;
  color: #fff; /* Texto oscuro */

  /* Aplica el desenfoque al contenido que pasa por detrás */
  backdrop-filter: blur(5px); 
 } 
  /* Importante para algunos navegadores: si el 'top' es 0, no uses 'fixed' */
/* Estilo para los títulos con efecto de desenfoque */