/* ======= Fijar el título principal ======= */
.fixed-title {
    position: sticky;      /* El título se mantiene fijo cuando alcanza el top */
    top: 0;                /* Se pega al borde superior del contenedor */
    background: #fff;      /* Fondo blanco para evitar que el texto se mezcle con el contenido */
    z-index: 10;           /* Prioridad alta para que se muestre encima de otros elementos */
    text-align: center;    /* Centra el texto horizontalmente */
    font-size: 22px;       /* Tamaño de fuente grande para destacar el título */
    padding: 10px;         /* Espacio interno para que no quede pegado al borde */
    border-bottom: 2px solid #337ab7; /* Línea azul inferior para separar visualmente */
}

/* ======= Contenedor de la tabla ======= */
.table-container {
    max-height: 52vh;      /* Limita la altura del contenedor al 40% del alto visible (viewport) */
    overflow-y: auto;      /* Activa el scroll vertical cuando el contenido es mayor a la altura */
    overflow-x: auto;      /* Activa el scroll horizontal cuando la tabla es muy ancha */
}

/* ======= Estilos generales de la tabla ======= */
.table-container table {
    width: 100%;           /* La tabla ocupa todo el ancho del contenedor */
    border-collapse: collapse; /* Elimina espacios entre los bordes de las celdas */
}

/* ======= Encabezado de la tabla (thead) ======= */
.table-container thead th {
    position: sticky;      /* Cada celda del encabezado se mantiene fija al hacer scroll */
    top: 0;                /* Se pega al borde superior del contenedor */
    background: #ecf3f9;   /* Fondo gris claro para diferenciar encabezados del resto */
    font-weight: bold;     /* Texto en negrita para destacar los títulos */
    font-size: 15px;       /* Tamaño de fuente pequeño pero legible */
    padding: 6px;          /* Espaciado interno para comodidad visual */
    z-index: 5;            /* Asegura que esté por encima de las filas del cuerpo */
}

/* ======= Celdas del cuerpo y del pie de la tabla ======= */
.table-container tbody td,
.table-container tfoot td {
    font-size: 13px;       /* Texto pequeño y uniforme */
    padding: 6px;          /* Espaciado interno para buena lectura */
    border: 1px solid #ddd; /* Bordes grises claros para separar celdas */
}

/* ======= Pie de la tabla (tfoot) ======= */
.table-container tfoot td {
    position: sticky;                /* El pie se mantiene visible al final del scroll */
    bottom: 0;                       /* Se pega al borde inferior del contenedor */
    background: #f9f9f9;             /* Fondo ligeramente diferente para distinguirlo */
    font-weight: bold;               /* Texto en negrita para resaltar totales */
    z-index: 6;                      /* Nivel superior al tbody, pero inferior al título */
    border-top: 2px solid #337ab7;   /* Línea superior azul para separar del contenido */
}