/* styles.css */

/* Contenedor general para tablas dinámicas responsivas */
.pivot-table-responsive-container {
    overflow-x: auto; /* Permite desplazamiento horizontal si el contenido es demasiado ancho */
    -webkit-overflow-scrolling: touch; /* Mejora el desplazamiento en dispositivos iOS */
    margin-top: 20px; /* Margen superior para separación, ajústalo según necesites */
    border: 1px solid #e0e0e0; /* Un borde sutil para enmarcar la tabla */
    padding: 10px; /* Relleno interno */
    background-color: #fff; /* Fondo blanco */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Sombra suave */
}

/* Ajustes de fuente y espaciado para pantallas más pequeñas (opcional) */
@media (max-width: 768px) {
    .pivot-table-responsive-container {
        padding: 5px; /* Menos padding en pantallas pequeñas */
    }
    .pivot-table-responsive-container table {
        font-size: 0.8em; /* Tamaño de fuente ligeramente más pequeño para el contenido de la tabla */
    }
    /* Estilos para los controles de pivot-table.js */
    .pivot-table-responsive-container .pvtUi {
        font-size: 0.9em; /* Tamaño de fuente para la interfaz de usuario */
    }
    .pivot-table-responsive-container .pvtRenderer,
    .pivot-table-responsive-container .pvtAggregator,
    .pivot-table-responsive-container .pvtVals,
    .pivot-table-responsive-container .pvtAxisContainer label {
        padding: 3px 5px; /* Más compacto para los controles */
    }
    .pivot-table-responsive-container .pvtAxisContainer {
        min-height: 40px; /* Asegura que las áreas de arrastre no sean demasiado pequeñas */
    }
}

/* Puedes añadir más estilos específicos para embellecer o ajustar aún más */
.pivot-table-responsive-container table.pvtTable {
    width: 100%; /* Asegura que la tabla ocupe todo el ancho disponible */
    border-collapse: collapse; /* Elimina el espaciado entre celdas */
}

.pivot-table-responsive-container table.pvtTable th,
.pivot-table-responsive-container table.pvtTable td {
    padding: 8px 12px;
    border: 1px solid #dcdcdc;
    text-align: left;
    white-space: nowrap; /* Evita que el texto en celdas se rompa, contribuyendo al scroll horizontal */
}

.pivot-table-responsive-container .pvtFilterBox {
    /* Estilo para la caja de filtro que aparece al hacer click en las etiquetas */
    max-height: 200px;
    overflow-y: auto;
}