<div class="row row-cols-1 row-cols-xxl-6 row-cols-lg-3 row-cols-md-2">

  <!-- Puntos de acopio monitoreados -->
  <div class="col">
    <div class="card widget-icon-box">
      <div class="card-body">
        <div class="d-flex justify-content-between">
          <div class="flex-grow-1 overflow-hidden">
            <h5 class="text-muted text-uppercase fs-13 mt-0"
                title="Secciones del estadio con contenedores monitoreados en tiempo real mediante el gemelo digital.">
              Puntos de acopio monitoreados
            </h5>
            <h3 class="my-3">128</h3>
            <p class="mb-0 text-muted text-truncate">
              <span class="badge bg-success me-1"><i class="ri-arrow-up-line"></i> 5%</span>
              <span>vs. ayer</span>
            </p>
          </div>
          <div class="avatar-sm flex-shrink-0">
            <span class="avatar-title text-bg-success rounded rounded-3 fs-3 widget-icon-box-avatar shadow">
              <i class="ri-map-pin-2-fill"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Circuitos optimizados hoy -->
  <div class="col">
    <div class="card widget-icon-box">
      <div class="card-body">
        <div class="d-flex justify-content-between">
          <div class="flex-grow-1 overflow-hidden">
            <h5 class="text-muted text-uppercase fs-13 mt-0"
                title="Número de circuitos de recolección optimizados y despachados hoy.">
              Circuitos optimizados hoy
            </h5>
            <h3 class="my-3">24</h3>
            <p class="mb-0 text-muted text-truncate">
              <span class="badge bg-info me-1"><i class="ri-arrow-up-line"></i> 2</span>
              <span>vs. ayer</span>
            </p>
          </div>
          <div class="avatar-sm flex-shrink-0">
            <span class="avatar-title text-bg-info rounded rounded-3 fs-3 widget-icon-box-avatar shadow">
              <i class="ri-road-map-fill"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Residuos previstos (kg) -->
  <div class="col">
    <div class="card widget-icon-box">
      <div class="card-body">
        <div class="d-flex justify-content-between">
          <div class="flex-grow-1 overflow-hidden">
            <h5 class="text-muted text-uppercase fs-13 mt-0"
                title="Total estimado de residuos generados hoy por sección (modelo + aforo).">
              Residuos previstos (kg)
            </h5>
            <h3 class="my-3">13,280</h3>
            <p class="mb-0 text-muted text-truncate">
              <span class="badge bg-danger me-1"><i class="ri-arrow-up-line"></i> 3.2%</span>
              <span>vs. promedio semanal</span>
            </p>
          </div>
          <div class="avatar-sm flex-shrink-0">
            <span class="avatar-title text-bg-danger rounded rounded-3 fs-3 widget-icon-box-avatar shadow">
              <i class="ri-weight-line"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Desviación operativa (%) -->
  <div class="col">
    <div class="card widget-icon-box">
      <div class="card-body">
        <div class="d-flex justify-content-between">
          <div class="flex-grow-1 overflow-hidden">
            <h5 class="text-muted text-uppercase fs-13 mt-0"
                title="Brecha entre lo planificado y lo ejecutado en duración y distancia de los circuitos.">
              Desviación operativa (%)
            </h5>
            <h3 class="my-3">+4.87%</h3>
            <p class="mb-0 text-muted text-truncate">
              <span class="badge bg-primary me-1"><i class="ri-arrow-up-line"></i> 1.2%</span>
              <span>vs. línea base</span>
            </p>
          </div>
          <div class="avatar-sm flex-shrink-0">
            <span class="avatar-title text-bg-primary rounded rounded-3 fs-3 widget-icon-box-avatar shadow">
              <i class="ri-line-chart-fill"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Reportes y alertas (24h) -->
  <div class="col">
    <div class="card widget-icon-box">
      <div class="card-body">
        <div class="d-flex justify-content-between">
          <div class="flex-grow-1 overflow-hidden">
            <h5 class="text-muted text-uppercase fs-13 mt-0"
                title="Reportes ciudadanos y alertas operativas procesadas por los bots en las últimas 24 horas.">
              Reportes y alertas (24h)
            </h5>
            <h3 class="my-3">310</h3>
            <p class="mb-0 text-muted text-truncate">
              <span class="badge bg-warning me-1"><i class="ri-arrow-up-line"></i> 9.2%</span>
              <span>vs. día promedio</span>
            </p>
          </div>
          <div class="avatar-sm flex-shrink-0">
            <span class="avatar-title text-bg-warning rounded rounded-3 fs-3 widget-icon-box-avatar">
              <i class="ri-message-3-fill"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Índice de confianza del gemelo -->
  <div class="col">
    <div class="card widget-icon-box">
      <div class="card-body">
        <div class="d-flex justify-content-between">
          <div class="flex-grow-1 overflow-hidden">
            <h5 class="text-muted text-uppercase fs-13 mt-0"
                title="Confianza del gemelo digital basada en precisión de datos y cumplimiento de rutas.">
              Índice de confianza del gemelo
            </h5>
            <h3 class="my-3">87%</h3>
            <p class="mb-0 text-muted text-truncate">
              <span class="badge bg-success me-1"><i class="ri-arrow-up-line"></i> 6%</span>
              <span>desde la última calibración</span>
            </p>
          </div>
          <div class="avatar-sm flex-shrink-0">
            <span class="avatar-title text-bg-dark rounded rounded-3 fs-3 widget-icon-box-avatar">
              <i class="ri-shield-check-fill"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
