<div class="row">

  <!-- Izquierda: Eficiencia de recolección por macrozona -->
  <div class="col-lg-4">
    <div class="card">
      <div class="d-flex card-header justify-content-between align-items-center">
        <h4 class="header-title">Eficiencia de recolección por macrozona</h4>
        <div class="dropdown">
          <a href="#" class="dropdown-toggle arrow-none card-drop" data-bs-toggle="dropdown" aria-expanded="false">
            <i class="ri-more-2-fill"></i>
          </a>
          <div class="dropdown-menu dropdown-menu-animated dropdown-menu-end">
            <a href="javascript:void(0);" class="dropdown-item">Reporte de eficiencia</a>
            <a href="javascript:void(0);" class="dropdown-item">Exportar</a>
            <a href="javascript:void(0);" class="dropdown-item">Anomalías</a>
          </div>
        </div>
      </div>

      <div class="card-body pt-0">
        <div id="average-sales" class="apex-charts mb-3 mt-n5"
             data-colors="#4254ba"
             title="Porcentaje de microzonas con recolección completa respecto al plan, por macrozona del estadio."></div>

        <h5 class="mb-1 mt-0 fw-normal">Cabecera Norte — Anillo 100</h5>
        <div class="progress-w-percent">
          <span class="progress-value fw-bold">72%</span>
          <div class="progress progress-sm">
            <div class="progress-bar" role="progressbar" style="width: 72%;" aria-valuenow="72"
                 aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>

        <h5 class="mb-1 mt-0 fw-normal">Lateral Oriente — Anillo 200</h5>
        <div class="progress-w-percent">
          <span class="progress-value fw-bold">39%</span>
          <div class="progress progress-sm">
            <div class="progress-bar" role="progressbar" style="width: 39%;" aria-valuenow="39"
                 aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>

        <h5 class="mb-1 mt-0 fw-normal">Cabecera Sur — Anillo 300</h5>
        <div class="progress-w-percent mb-0">
          <span class="progress-value fw-bold">61%</span>
          <div class="progress progress-sm">
            <div class="progress-bar" role="progressbar" style="width: 61%;" aria-valuenow="61"
                 aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Derecha: Reporte de impacto de optimización -->
  <div class="col-lg-8">
    <div class="card">
      <div class="d-flex card-header justify-content-between align-items-center">
        <h4 class="header-title">Impacto de la optimización de residuos</h4>
        <div class="dropdown">
          <a href="#" class="dropdown-toggle arrow-none card-drop" data-bs-toggle="dropdown" aria-expanded="false">
            <i class="ri-more-2-fill"></i>
          </a>
          <div class="dropdown-menu dropdown-menu-animated dropdown-menu-end">
            <a href="javascript:void(0);" class="dropdown-item">Comparar semanas</a>
            <a href="javascript:void(0);" class="dropdown-item">Exportar</a>
            <a href="javascript:void(0);" class="dropdown-item">Pronóstico</a>
            <a href="javascript:void(0);" class="dropdown-item">Deriva del modelo</a>
          </div>
        </div>
      </div>

      <div class="card-body p-0">
        <div class="bg-light-subtle border-top border-bottom border-light">
          <div class="row text-center">
            <div class="col">
              <p class="text-muted mt-3"><i class="ri-road-map-fill"></i> Km evitados (esta semana)</p>
              <h3 class="fw-normal mb-3">
                <span>114.3 km</span>
              </h3>
            </div>
            <div class="col">
              <p class="text-muted mt-3"><i class="ri-money-dollar-circle-line"></i> Costo operativo evitado</p>
              <h3 class="fw-normal mb-3">
                <span>$6,523.25 <i class="ri-corner-right-up-fill text-success"></i></span>
              </h3>
            </div>
            <div class="col">
              <p class="text-muted mt-3"><i class="ri-message-2-fill"></i> Cumplimiento de recolección</p>
              <h3 class="fw-normal mb-3">
                <span>82.7%</span>
              </h3>
            </div>
            <div class="col">
              <p class="text-muted mt-3"><i class="ri-shield-check-fill"></i> Exactitud del gemelo</p>
              <h3 class="fw-normal mb-3">
                <span>91% <i class="ri-corner-right-down-line text-danger"></i></span>
              </h3>
            </div>
          </div>
        </div>
      </div>

      <div class="card-body pt-0">
        <div dir="ltr">
          <div id="revenue-chart" class="apex-charts mt-1" data-colors="#4254ba,#17a497"
               title="Evolución semanal del ahorro operativo y de la distancia recorrida tras la optimización."></div>
        </div>
      </div>
    </div>
  </div>

</div>
