/* PASO 2.1: Crear el contenedor con scroll */
.contenedor-scroll {
    /* Define una altura máxima para que el contenido de la tabla lo exceda */
    max-height: 300px; 
    /* 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: 100%;
    margin: 20px auto; 
    border: 1px solid #ccc;
}

/* PASO 2.2: Fijar el Encabezado (thead) */
.contenedor-scroll 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 th, .contenedor-scroll td {
    padding: 10px;
    text-align: left;
}
/* Estilo para los títulos con efecto de desenfoque */
.contenedor-scroll th.con-blur {

  /* 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 */
.contenedor-scroll th.otro-blur {

  /* 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); 
 } 
/* Clase que usaremos para resaltar la fila encontrada */
.resaltada {
        background-color: #ffeb3b; /* Amarillo vibrante */
        border: 2px solid #f9a825;
        font-weight: bold;
}

.columna-ancha {
  /* Establece el ancho. Puedes usar píxeles (px), porcentajes (%), etc. */
  width: 1800px;
}