/*==================================
    GRID DE TARJETAS
==================================*/


.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));

    gap:16px;

}



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


.card{

    background:#fff;

    border-radius:16px;

    padding:18px;

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

    transition:.25s;

}



.card:hover{

    transform:translateY(-3px);

}



.card h3{

    margin:0 0 12px;

    line-height:1.3;

    color:#111827;

}



.card p{

    margin:6px 0;

    color:#555;

    line-height:1.4;

}



/*==================================
    ACCIONES
==================================*/


.acciones{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}



/*==================================
    CARD CLIENTE
==================================*/


.card-cliente{

    background:#fff;

    border-radius:16px;

    padding:22px;

    box-shadow:0 4px 12px rgba(0,0,0,.08);

}



.card-cliente h3{

    color:#2563eb;

}



/*==================================
    CARD DASHBOARD
==================================*/


.card-dashboard{

    width:100%;

    background:#fff;

    border-radius:14px;

    padding:18px;

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

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    min-height:130px;

}



.card-dashboard h3{

    font-size:34px;

    color:#2563eb;

    margin:0 0 8px;

}



.card-dashboard p{

    margin:0;

    color:#666;

    font-size:15px;

}



.card-dashboard .btn{

    margin-top:12px;

}



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


@media(max-width:1100px){

    .cards{

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

    }

}



@media(max-width:768px){


    .cards{

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

        gap:10px;

    }



    .card-dashboard{

        padding:12px;

        min-height:95px;

    }



    .card-dashboard h3{

        font-size:24px;

    }



    .card-dashboard p{

        font-size:11px;

    }


}
.cards .card{
    min-height:220px;
}

.cards .card .acciones{
    margin-top:auto;
}