body{
background:#080c16;
color:#ffffff;
font-family:Arial,Helvetica,sans-serif;
}

.dashboard-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin:20px 0;
}

.card-premium{
background:#111827;
border-radius:18px;
padding:25px;
box-shadow:0 10px 30px rgba(0,0,0,.35);
border:1px solid rgba(255,255,255,.08);
}

.card-premium h3{
font-size:15px;
opacity:.8;
margin:0;
}

.card-premium .number{
font-size:32px;
font-weight:bold;
margin-top:15px;
}

.card-income{
border-left:5px solid #00e676;
}

.card-expense{
border-left:5px solid #ff5252;
}

.card-profit{
border-left:5px solid #2196f3;
}

.card-credit{
border-left:5px solid #ffc107;
}

@media(max-width:600px){

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

.card-premium{
padding:20px;
}

.card-premium .number{
font-size:26px;
}

}













































































.periodo-app{
background:#111827;
border:1px solid rgba(99,102,241,.35);
border-radius:24px;
padding:22px;
margin-bottom:25px;
}


.periodo-botones{
display:flex;
gap:15px;
}


.periodo-menu{
position:relative;
}










.periodo-menu{
position:relative;
}











.periodos{
display:flex;
gap:15px;
}


.dropdown{
position:relative;
}


.dropdown button{
background:#111827;
border:1px solid #6366f1;
color:white;
border-radius:16px;
padding:14px 25px;
font-weight:bold;
cursor:pointer;
}


.popup-periodo{
display:none;
position:absolute;
top:60px;
left:0;
background:#111827;
border:1px solid #6366f1;
border-radius:18px;
padding:10px;
min-width:160px;
z-index:99999;
box-shadow:0 20px 40px rgba(0,0,0,.6);
}


.popup-periodo a{
display:block;
color:white;
padding:10px;
text-decoration:none;
border-radius:10px;
}


.popup-periodo a:hover{
background:#312e81;
}