.kpi {
    padding: 20px;
    border-radius: 12px;
    color: #fff;
}

@media (max-width: 768px) {
    .kpi {
        padding: 12px;
        font-size: .9rem;
    }

    .kpi h3 {
        font-size: 1.2rem;
    }
}

.kpi-green { background: #2ecc71; }
.kpi-blue  { background: #3498db; }
.kpi-orange{ background: #f39c12; }
.kpi-dark  { background: #34495e; }

.loader-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,.85);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    font-size: 1.2rem;
}

.top-card .small {
    font-size: 0.75rem;
}

.top-card .margen {
    font-weight: 700;
    margin-top: 4px;
    color: #198754;
}

.top-card {
    border-radius: 10px;
    padding: 10px;
    background: #f8f9fa;
    border-left: 5px solid #0d6efd;
    font-size: .85rem;
}

.top-card .name {
    font-weight: 600;
    font-size: .9rem;
}

.top-card .margen {
    font-weight: 700;
    color: #198754;
}


table td { vertical-align: middle; }

@media print {

    body {
        background: white !important;
    }

    /* Ocultar botones, filtros, navegación */
    button, .btn, .no-print {
        display: none !important;
    }

    /* Ajustar cards */
    .card {
        border: none;
        box-shadow: none;
        page-break-inside: avoid;
    }

    /* Forzar ancho completo */
    .container {
        max-width: 100% !important;
    }

    /* Tablas */
    table {
        font-size: 11px;
    }

    /* Gráficas */
    canvas {
        max-height: 100% !important;
    }
}