/* Extraído de index.html (bloque de estilo #5) */
                    /* Custom beautiful CSS styles for Reports panel */
                    .reports-dashboard {
                        display: grid;
                        grid-template-columns: 290px 1fr;
                        gap: 20px;
                        margin-top: 15px;
                    }

                    @media (max-width: 1024px) {
                        .reports-dashboard {
                            grid-template-columns: 1fr;
                        }
                    }

                    .reports-sidebar {
                        display: flex;
                        flex-direction: column;
                        gap: 15px;
                    }

                    .reports-content {
                        display: flex;
                        flex-direction: column;
                        gap: 20px;
                    }

                    .reports-kpi-grid {
                        display: grid;
                        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
                        gap: 15px;
                    }

                    .reports-card {
                        background: #ffffff;
                        border-radius: 16px;
                        padding: 20px;
                        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
                        border: 1px solid #e2e8f0;
                        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
                    }

                    .reports-card:hover {
                        transform: translateY(-2px);
                        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
                    }

                    .kpi-card {
                        position: relative;
                        overflow: hidden;
                    }

                    .kpi-card::before {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 4px;
                        height: 100%;
                    }

                    .kpi-ventas::before {
                        background: #10b981;
                    }

                    .kpi-facturado::before {
                        background: #0ea5e9;
                    }

                    .kpi-gastos::before {
                        background: #ef4444;
                    }

                    .kpi-utilidad::before {
                        background: #3b82f6;
                    }

                    .kpi-ticket::before {
                        background: #f59e0b;
                    }

                    .kpi-title {
                        font-size: 0.82rem;
                        font-weight: 700;
                        color: #64748b;
                        text-transform: uppercase;
                        letter-spacing: 0.5px;
                        margin-bottom: 8px;
                        display: flex;
                        align-items: center;
                        gap: 6px;
                    }

                    .kpi-value {
                        font-size: 1.75rem;
                        font-weight: 800;
                        color: #0f172a;
                        margin-bottom: 4px;
                        letter-spacing: -0.5px;
                    }

                    .kpi-subtext {
                        font-size: 0.78rem;
                        color: #64748b;
                        font-weight: 500;
                    }

                    .reports-chart-grid {
                        display: grid;
                        grid-template-columns: 1.7fr 1fr;
                        gap: 20px;
                    }

                    @media (max-width: 900px) {
                        .reports-chart-grid {
                            grid-template-columns: 1fr;
                        }
                    }

                    .reports-rankings-grid {
                        display: grid;
                        grid-template-columns: 1fr 1fr;
                        gap: 20px;
                    }

                    @media (max-width: 768px) {
                        .reports-rankings-grid {
                            grid-template-columns: 1fr;
                        }
                    }

                    /* Modern Period Buttons */
                    .period-btn-group {
                        display: grid;
                        grid-template-columns: repeat(2, 1fr);
                        gap: 8px;
                    }

                    .reports-btn {
                        background: #f8fafc;
                        color: #475569;
                        border: 1px solid #e2e8f0;
                        padding: 10px 12px;
                        border-radius: 10px;
                        font-size: 0.85rem;
                        font-weight: 600;
                        cursor: pointer;
                        transition: all 0.2s ease;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        gap: 6px;
                    }

                    .reports-btn:hover {
                        background: #f1f5f9;
                        border-color: #cbd5e1;
                        color: #1e293b;
                    }

                    .reports-btn.active {
                        background: linear-gradient(135deg, var(--primary) 0%, #1e40af 100%);
                        color: white;
                        border-color: transparent;
                        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
                    }

                    .reports-title-bar {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-bottom: 20px;
                        background: linear-gradient(135deg, #0066cc 0%, #004499 100%);
                        padding: 22px;
                        border-radius: 20px;
                        color: white;
                        box-shadow: 0 10px 25px -5px rgba(0, 102, 204, 0.15);
                    }

                    .reports-title-info h2 {
                        margin: 0;
                        font-size: 1.5rem;
                        font-weight: 800;
                        letter-spacing: -0.5px;
                        display: flex;
                        align-items: center;
                        gap: 10px;
                    }

                    .reports-title-info p {
                        margin: 5px 0 0 0;
                        color: #94a3b8;
                        font-size: 0.88rem;
                    }

                    /* Modern Lists for rankings */
                    .ranking-item {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 12px 16px;
                        border-radius: 12px;
                        background: #f8fafc;
                        border: 1px solid #f1f5f9;
                        transition: all 0.2s ease;
                    }

                    .ranking-item:hover {
                        background: #f1f5f9;
                        border-color: #e2e8f0;
                    }

                    .ranking-badge {
                        width: 28px;
                        height: 28px;
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-weight: 700;
                        font-size: 0.85rem;
                    }

                    .badge-1 {
                        background: #fef3c7;
                        color: #d97706;
                    }

                    .badge-2 {
                        background: #e2e8f0;
                        color: #475569;
                    }

                    .badge-3 {
                        background: #ffedd5;
                        color: #ea580c;
                    }

                    .badge-other {
                        background: #f1f5f9;
                        color: #64748b;
                    }

                    /* Quick Info Banner */
                    .info-banner {
                        background: #f0f9ff;
                        border: 1px solid #e0f2fe;
                        color: #0369a1;
                        padding: 14px 18px;
                        border-radius: 14px;
                        font-size: 0.85rem;
                        display: flex;
                        align-items: flex-start;
                        gap: 12px;
                        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
                    }

                    /* Print stylesheet */
                    @media print {
                        body * {
                            visibility: hidden;
                        }

                        #view-reportes,
                        #view-reportes * {
                            visibility: visible;
                        }

                        #view-reportes {
                            position: absolute;
                            left: 0;
                            top: 0;
                            width: 100% !important;
                            margin: 0 !important;
                            padding: 0 !important;
                        }

                        .reports-sidebar,
                        .info-banner,
                        .reports-title-bar,
                        button,
                        select,
                        input {
                            display: none !important;
                        }

                        .reports-dashboard {
                            grid-template-columns: 1fr !important;
                        }
                    }