```blade
@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
<style>
    body {
        font-family: Arial, sans-serif;
    }

    /* Filtros */
    .filters {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
    }

    .filters input {
        padding: 8px 12px;
        border: 2px solid #FF7316;
        border-radius: 8px;
        background: #fff;
        color: #333;
    }

    /* Cards Totales */
    .cards-row {
        display: flex;
        gap: 15px;
        overflow-x: auto;
        margin-bottom: 20px;
    }

    .card-stat {
        flex: 1;
        min-width: 180px;
        background: #fff;
        color: #333;
        padding: 15px;
        border-radius: 10px;
        text-align: center;
        box-shadow: 0px 2px 6px rgba(0,0,0,0.1);
        position: relative;
    }

    .card-stat .header {
        height: 6px;
        background: #FF7316;
        border-radius: 10px 10px 0 0;
        margin: -15px -15px 10px -15px;
    }

    .card-stat h2 {
        font-size: 28px;
        margin: 0;
    }

    .card-stat p {
        margin: 5px 0;
        font-weight: bold;
        color: #666;
    }

    .card-stat small {
        display: block;
        margin-top: 5px;
        font-size: 12px;
        color: #999;
    }

    /* Sección inferior */
    .bottom-row {
        display: flex;
        gap: 20px;
        margin-top: 20px;
    }

    .bottom-card {
        flex: 1;
        background: #fff;
        border-radius: 10px;
        padding: 20px;
        min-height: 300px;
        overflow: hidden;
        box-shadow: 0px 2px 6px rgba(0,0,0,0.1);
        position: relative;
    }

    .bottom-card .header {
        height: 6px;
        background: #e0e0e0;
        border-radius: 10px 10px 0 0;
        margin: -20px -20px 15px -20px;
    }

    .bottom-card h3 {
        margin-bottom: 15px;
        font-size: 16px;
        color: #333;
    }

    /* Tabla */
    .table-container {
        max-height: 250px;
        overflow-y: auto;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
    }

    table th, table td {
        padding: 10px;
        text-align: center;
        border-bottom: 1px solid #ddd;
    }

    table th {
        color: #FF7316;
    }

    /* Responsive */
    @media(max-width: 900px) {
        .bottom-row {
            flex-direction: column;
        }
    }
</style>

<div class="container">
    <!-- Filtros -->
    <div class="filters">
        <input type="month" value="2025-04">
        <input type="date" value="2025-10-02">
    </div>

    <!-- Cards Totales -->
    <div class="cards-row">
        <div class="card-stat">
            <div class="header"></div>
            <h2>300</h2>
            <p>Total OS</p>
            <small>Información disponible desde 19/04/2024 hasta 17/02/2025</small>
        </div>
        <div class="card-stat">
            <div class="header"></div>
            <h2>150</h2>
            <p>En tránsito</p>
            <small>Información disponible desde 19/04/2024 hasta 17/02/2025</small>
        </div>
        <div class="card-stat">
            <div class="header"></div>
            <h2>140</h2>
            <p>Entregadas</p>
            <small>Información disponible desde 19/04/2024 hasta 17/02/2025</small>
        </div>
        <div class="card-stat">
            <div class="header"></div>
            <h2>60</h2>
            <p>En tránsito con incidencias</p>
            <small>Información disponible desde 19/04/2024 hasta 17/02/2025</small>
        </div>
        <div class="card-stat">
            <div class="header"></div>
            <h2>20</h2>
            <p>Entregadas con incidencias</p>
            <small>Información disponible desde 19/04/2024 hasta 17/02/2025</small>
        </div>
        <div class="card-stat">
            <div class="header"></div>
            <h2>4</h2>
            <p>OS Rechazadas</p>
            <small>Información disponible desde 19/04/2024 hasta 17/02/2025</small>
        </div>
        <div class="card-stat">
            <div class="header"></div>
            <h2>35</h2>
            <p>Logística inversa</p>
            <small>Información disponible desde 19/04/2024 hasta 17/02/2025</small>
        </div>
    </div>

    <!-- Sección inferior -->
    <div class="bottom-row">
        <!-- Gráfico Barras -->
        <div class="bottom-card">
            <div class="header"></div>
            <h3>Performance mes actual</h3>
            <canvas id="barChart"></canvas>
        </div>

        <!-- Gráfico Doughnut -->
        <div class="bottom-card">
            <div class="header"></div>
            <h3>Entrega actual</h3>
            <canvas id="doughnutChart"></canvas>
        </div>

        <!-- Tabla -->
        <div class="bottom-card">
            <div class="header"></div>
            <h3>Estadísticas de entrega</h3>
            <div class="table-container">
                <table>
                    <thead>
                        <tr>
                            <th>Agencia</th>
                            <th>Órdenes de ruta</th>
                            <th>Órdenes entregadas</th>
                            <th>Órdenes con incidencias</th>
                            <th>Total OS</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td>Antofagasta</td><td>50</td><td>40</td><td>5</td><td>95</td></tr>
                        <tr><td>Arica</td><td>30</td><td>25</td><td>2</td><td>57</td></tr>
                        <tr><td>Calama</td><td>45</td><td>40</td><td>3</td><td>88</td></tr>
                        <tr><td>Chillán</td><td>25</td><td>20</td><td>1</td><td>46</td></tr>
                        <tr><td>Santiago</td><td>80</td><td>70</td><td>10</td><td>160</td></tr>
                        <tr><td>Valparaíso</td><td>40</td><td>35</td><td>2</td><td>77</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Gráfico de Barras
    new Chart(document.getElementById('barChart').getContext('2d'), {
        type: 'bar',
        data: {
            labels: ['En tránsito', 'Entregadas', 'Con incidencias'],
            datasets: [
                {
                    label: 'Mes actual',
                    data: [150, 140, 80],
                    backgroundColor: '#FF7316'
                },
                {
                    label: 'Mes anterior',
                    data: [120, 130, 60],
                    backgroundColor: '#00000029'
                }
            ]
        },
        options: { responsive: true }
    });

    // Gráfico Doughnut
    new Chart(document.getElementById('doughnutChart').getContext('2d'), {
        type: 'doughnut',
        data: {
            labels: ['En tránsito', 'Entregadas', 'Con incidencias', 'Logística inversa'],
            datasets: [{
                data: [150, 140, 80, 35],
                backgroundColor: ['#FF7316', '#FF9800', '#999', '#666']
            }]
        },
        options: { responsive: true }
    });
</script>
@endsection
```