.dashboard{
  min-height:calc(100vh - 70px);

  display:flex;
  flex-direction:column;

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

  padding:40px 20px;

  width:100%;
}

.title{
  color:#fff;
  font-size:34px;
  font-weight:700;
  margin-bottom:45px;
  text-align:center;
}

.dashboard-grid{
  width:100%;
  max-width:1150px;

  display:flex;
  flex-direction:column;
  gap:28px;

  margin:auto;
}

main.dashboard{
  margin:auto 0;
}

/* ===============================
   PRINCIPALES
================================= */

.main-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.card-main{
  min-height:190px;
  padding:28px 34px;
}
.main-cards,
.secondary-cards{
  width:100%;
}

.card-small{
  min-height:160px;
}

/* ===============================
   SECUNDARIAS
================================= */

.secondary-cards{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
}

.card-small{
  min-height:170px;
  padding:20px;
}

/* ===============================
   CARD GENERAL
================================= */

.card{
  position:relative;

  border-radius:22px;

  background:rgba(255,255,255,.05);

  backdrop-filter:blur(14px);

  border:1px solid rgba(255,255,255,.08);

  box-shadow:
    0 10px 35px rgba(0,0,0,.35);

  color:#fff;

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

  text-align:center;

  overflow:hidden;

  cursor:pointer;

  transition:
    transform .25s,
    border .25s,
    background .25s;
}

.card:hover{
  transform:translateY(-7px);
  border-color:rgba(59,130,246,.45);
  background:rgba(255,255,255,.07);
}

/* brillo moderno */
.card::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;

  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.06),
    transparent
  );

  transition:.7s;
}

.card:hover::before{
  left:100%;
}

/* ===============================
   ICONO
================================= */

.icon-box{
  width:60px;
  height:60px;

  border-radius:18px;

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

  background:linear-gradient(135deg,#1d4ed8,#2563eb);

  box-shadow:
    0 10px 25px rgba(37,99,235,.35);

  margin-bottom:18px;

  flex-shrink:0;
}

.icon-box i{
  font-size:24px;
  color:#fff;
}

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

.card h3{
  font-size:18px;
  font-weight:700;
  margin-bottom:8px;
}

.card-desc{
  font-size:13px;
  opacity:.72;
  line-height:1.5;
  max-width:260px;
}

/* ===============================
   BADGE
================================= */

.badge{
  position:absolute;

  top:14px;
  right:14px;

  min-width:28px;
  height:28px;

  padding:0 8px;

  border-radius:999px;

  background:#ef4444;

  color:#fff;

  font-size:12px;
  font-weight:700;

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

  box-shadow:
    0 0 0 5px rgba(239,68,68,.15);

  animation:pulse 1.7s infinite;
}

@keyframes pulse{
  0%{
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(239,68,68,.4);
  }

  70%{
    transform:scale(1.08);
    box-shadow:0 0 0 12px rgba(239,68,68,0);
  }

  100%{
    transform:scale(1);
  }
}

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

@media(max-width:1100px){

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

}

@media(max-width:750px){

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

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

}

/* hidden */
.hidden{
  display:none;
}