.inicio-page {
  width: 100%;
}

.inicio-heading {
  margin-bottom: 22px;
}

.inicio-eyebrow {
  display: block;

  margin-bottom: 6px;

  color:
    var(--text-muted);

  font-size: 9px;
  font-weight: 750;

  letter-spacing: 0.14em;
}

.inicio-heading h2 {
  margin: 0;

  color:
    var(--text-primary);

  font-size: 25px;
  font-weight: 750;

  letter-spacing: -0.035em;
}

.inicio-heading p {
  margin:
    7px 0 0;

  color:
    var(--text-secondary);

  font-size: 11px;
}

.inicio-metrics {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap: 12px;
}

.inicio-metric-card {
  min-height: 128px;

  display: flex;
  flex-direction: column;

  padding: 17px;

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

  border-radius: 12px;

  background:
    var(--surface);
}

.inicio-metric-label {
  color:
    var(--text-secondary);

  font-size: 10px;
  font-weight: 650;
}

.inicio-metric-value {
  margin:
    auto 0 5px;

  color:
    var(--text-primary);

  font-size: 27px;
  font-weight: 750;

  line-height: 1;

  letter-spacing: -0.04em;
}

.inicio-metric-card small {
  color:
    var(--text-muted);

  font-size: 9px;
}

.inicio-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap: 12px;

  margin-top: 12px;
}

.inicio-panel {
  min-height: 250px;

  padding: 17px;

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

  border-radius: 12px;

  background:
    var(--surface);
}

.inicio-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;
}

.inicio-panel-heading h3 {
  margin: 0;

  color:
    var(--text-primary);

  font-size: 13px;
  font-weight: 700;
}

.inicio-panel-heading > svg {
  width: 16px;
  height: 16px;

  color:
    var(--text-muted);
}

.inicio-empty {
  min-height: 175px;

  display: flex;
  flex-direction: column;

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

  text-align: center;
}

.inicio-empty svg {
  width: 22px;
  height: 22px;

  margin-bottom: 10px;

  color:
    var(--text-muted);
}

.inicio-empty strong {
  color:
    var(--text-secondary);

  font-size: 11px;
  font-weight: 650;
}

.inicio-empty span {
  max-width: 280px;

  margin-top: 4px;

  color:
    var(--text-muted);

  font-size: 9px;
}

@media (
  max-width: 1000px
) {
  .inicio-metrics {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}

@media (
  max-width: 720px
) {
  .inicio-grid {
    grid-template-columns:
      1fr;
  }
}

@media (
  max-width: 520px
) {
  .inicio-metrics {
    grid-template-columns:
      1fr;
  }
}