/* 1) Evita el bug de 100vw y asegura scroll solo vertical global */
html, body {
    height: auto;
    min-height: 100%;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;  /* No scroll horizontal */
    overflow-y: auto;    /* Scroll global */
    background-color: #f8f9fa;
    box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; }

/* 2) Contenedores principales */
.container-fluid, .container {
    max-width: 100%;
    padding: 20px;
}

/* 3) Evitar que .row cree desbordes */
.row {
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
}

/* 4) Canvas responsive */
canvas {
    display: block;
    max-width: 100% !important;
    height: 300px !important;
}

/* 5) Tarjetas generales */
.card, .kpi-card {
    overflow: hidden;
    margin-bottom: 20px;
    border: none;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    width: 100%;
    word-wrap: break-word;
}

/* 5.1) Estilo de KPIs */
.kpi-card {
    padding: 20px;
    background: linear-gradient(45deg, #f3f4f6, #ffffff);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}
.kpi-card:hover { transform: translateY(-3px); }
.kpi-card h6 { font-weight: bold; color: #333; }
.kpi-card h4 { font-weight: bold; color: #007bff; }

/* 6) Tablas y botones */
.table thead th { background-color: #007bff; color: #fff; }
.btn-export, .export-btn { width: 100%; margin-top: 10px; }

/* 7) Eliminar scroll interno en el dashboard */
#iframe-container,
#dashboardExport,
body > #dashboardExport,
html > body > #dashboardExport {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* 8) Botones con texto largo */
button {
    white-space: normal !important;
    word-break: break-word;
}

/* 9) Ajustes extra para pantallas pequeñas */
@media (max-width: 576px) {
    .kpi-card {
        padding: 15px;
    }
    canvas {
        height: 250px !important;
    }
}
