{% extends "base.html" %}

{% block title %}Dashboard Minimal | Sublimaciones Matiguan{% endblock %}

{% block content %}
<div class="space-y-6">
  <section class="rounded-3xl border border-slate-200 bg-white p-6 shadow-soft">
    <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
      <div>
        <p class="text-sm uppercase tracking-[0.18em] text-slate-500">Minimal</p>
        <h3 class="mt-2 text-3xl font-bold text-slate-900">Simple workflow</h3>
      </div>
      <button class="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-2 text-sm font-medium text-slate-700">Actualizar</button>
    </div>
  </section>

  <section class="grid gap-4 md:grid-cols-4">
    <article class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><p class="text-sm text-slate-500">Sales</p><p class="mt-4 text-3xl font-bold text-slate-900">$31K</p><p class="mt-2 text-sm text-emerald-600">+8.2%</p></article>
    <article class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><p class="text-sm text-slate-500">Orders</p><p class="mt-4 text-3xl font-bold text-slate-900">96</p><p class="mt-2 text-sm text-slate-600">+4.1%</p></article>
    <article class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><p class="text-sm text-slate-500">Stock</p><p class="mt-4 text-3xl font-bold text-slate-900">84%</p><p class="mt-2 text-sm text-blue-600">Healthy</p></article>
    <article class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><p class="text-sm text-slate-500">Leads</p><p class="mt-4 text-3xl font-bold text-slate-900">27</p><p class="mt-2 text-sm text-amber-600">Urgent</p></article>
  </section>

  <section class="grid gap-6 xl:grid-cols-[1.2fr_1fr]">
    <article class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
      <div class="mb-6 flex items-center justify-between"><h4 class="text-xl font-bold text-slate-900">Overview</h4><span class="text-xs text-slate-500">This week</span></div>
      <div class="flex h-52 items-end gap-3">
        <div class="flex-1 rounded-t-2xl bg-slate-200" style="height: 35%;"></div>
        <div class="flex-1 rounded-t-2xl bg-slate-300" style="height: 48%;"></div>
        <div class="flex-1 rounded-t-2xl bg-slate-400" style="height: 58%;"></div>
        <div class="flex-1 rounded-t-2xl bg-slate-500" style="height: 70%;"></div>
        <div class="flex-1 rounded-t-2xl bg-slate-600" style="height: 82%;"></div>
        <div class="flex-1 rounded-t-2xl bg-slate-700" style="height: 76%;"></div>
        <div class="flex-1 rounded-t-2xl bg-slate-800" style="height: 88%;"></div>
      </div>
    </article>

    <article class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
      <h4 class="text-xl font-bold text-slate-900">Checklist</h4>
      <div class="mt-5 space-y-3">
        <div class="flex items-center justify-between rounded-2xl bg-slate-50 p-3"><span class="text-slate-700">Confirmar materiales</span><span class="text-xs text-emerald-600">OK</span></div>
        <div class="flex items-center justify-between rounded-2xl bg-slate-50 p-3"><span class="text-slate-700">Pagar proveedores</span><span class="text-xs text-amber-600">Pend.</span></div>
        <div class="flex items-center justify-between rounded-2xl bg-slate-50 p-3"><span class="text-slate-700">Actualizar inventario</span><span class="text-xs text-slate-600">Hoy</span></div>
      </div>
    </article>
  </section>
</div>
{% endblock %}