:root{
  --bg:#fbfaf7;
  --panel:#ffffff;
  --text:#111827;
  --muted:#6f6a63;
  --grid:#ebe5dc;
  --line:#e7ded2;

  --gold:#c79a43;
  --gold2:#d8b56d;

  --dark:#111827;

  --blue:#1f8ef1;
  --navy:#1f2aa3;
  --orange:#ef6b35;
  --purple:#6f008c;
  --green:#16a34a;
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:Inter,sans-serif;
  background:linear-gradient(
    180deg,
    #fbfaf7,
    #f1ece4
  );
  color:var(--text);
}

/* =========================
   ESTRUCTURA
========================= */

.shell{
  display:grid;
  grid-template-columns:305px 1fr;
  min-height:100vh;
}

/* =========================
   SIDEBAR
========================= */

.sidebar{
  padding:32px;
  background:#111827;
  color:white;
}

.brand{
  display:flex;
  gap:16px;
  align-items:center;
}

/* =========================
   LOGO
========================= */

.logo-container{
  width:72px;
  height:72px;
  background:white;
  border-radius:18px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  padding:8px;

  box-shadow:0 8px 20px rgba(0,0,0,.18);
}

.logo-img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* =========================
   TEXTOS
========================= */

h1,
h2,
h3,
p{
  margin:0;
}

.brand h1{
  font-size:22px;
  letter-spacing:2px;
  font-weight:900;
}

.brand p{
  color:#d1d5db;
  font-size:13px;
}

.hint{
  margin-top:18px;
  color:#d1d5db;
  font-size:13px;
  line-height:1.6;
}

.status{
  margin-top:16px;
  font-size:12px;
  color:#d1d5db;
  line-height:1.5;
}

/* =========================
   BOTÓN
========================= */

.refresh{
  width:100%;

  border:0;

  margin-top:28px;

  background:#c79a43;

  color:#111827;

  padding:14px 16px;

  border-radius:12px;

  text-align:center;

  font-weight:900;

  cursor:pointer;

  font-size:15px;

  transition:.2s;
}

.refresh:hover{
  transform:translateY(-2px);
  background:#d6a852;
}

/* =========================
   MAIN
========================= */

.main{
  padding:32px;
}

/* =========================
   TOPBAR
========================= */

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:end;

  margin-bottom:24px;

  border-bottom:1px solid var(--line);

  padding-bottom:20px;
}

.topbar h2{
  font-size:32px;
  font-weight:900;
}

.topbar p{
  color:var(--muted);
  margin-top:5px;
}

/* =========================
   FILTROS
========================= */

.filters{
  display:flex;
  gap:14px;
  align-items:end;
  flex-wrap:wrap;
}

.filters label{
  display:block;

  font-size:11px;

  text-transform:uppercase;

  color:var(--muted);

  font-weight:800;

  margin-bottom:6px;
}

select{
  border:1px solid var(--line);

  border-radius:10px;

  padding:10px 14px;

  background:white;

  min-width:150px;

  color:#111827;

  font-weight:600;
}

/* =========================
   KPIs
========================= */

.kpis{
  display:grid;

  grid-template-columns:repeat(7,1fr);

  gap:14px;

  margin-bottom:18px;
}

.card{
  background:var(--panel);

  border:1px solid var(--line);

  border-radius:16px;

  box-shadow:0 10px 28px rgba(47,36,20,.07);
}

.kpi{
  padding:18px;

  border-top:5px solid var(--gold2);
}

.kpi span{
  display:block;

  color:var(--muted);

  font-size:12px;

  font-weight:800;

  text-transform:uppercase;
}

.kpi strong{
  display:block;

  margin-top:10px;

  font-size:24px;

  font-weight:900;
}

.primary{
  border-top-color:#111827;
  background:#fffdf8;
}

.meta-card{
  border-top-color:var(--green);
}

/* =========================
   GRÁFICAS
========================= */

.grid{
  display:grid;

  grid-template-columns:2fr 1fr;

  gap:18px;
}

.chart{
  padding:22px;

  min-height:320px;
}

.chart h3{
  font-size:15px;

  text-transform:uppercase;

  letter-spacing:.7px;

  color:#3f3f46;

  margin-bottom:15px;

  font-weight:800;
}

.full{
  grid-column:1/-1;
}

.wide{
  min-height:360px;
}

canvas{
  max-width:100%;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

  .shell{
    grid-template-columns:1fr;
  }

  .kpis{
    grid-template-columns:repeat(2,1fr);
  }

  .grid{
    grid-template-columns:1fr;
  }

  .topbar{
    display:block;
  }

  .filters{
    margin-top:18px;
  }

}