/* ==========================================================
   LAIREN AI
   CARDS.CSS
   Sistema global de tarjetas
========================================================== */


/*==========================================================
CARD BASE
==========================================================*/

.card{

    position:relative;

    display:flex;

    flex-direction:column;

    background:var(--color-surface);

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

    border-radius:18px;

    overflow:hidden;

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;

}


/*==========================================================
HOVER
==========================================================*/

.card:hover{

    transform:translateY(-4px);

    border-color:var(--color-primary);

    box-shadow:
        0 16px 40px rgba(0,0,0,.28);

}


/*==========================================================
BODY
==========================================================*/

.card-body{

    padding:22px;

    display:flex;

    flex-direction:column;

    flex:1;

}


/*==========================================================
HEADER
==========================================================*/

.card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

}


/*==========================================================
CONTENT
==========================================================*/

.card-content{

    flex:1;

}


/*==========================================================
FOOTER
==========================================================*/

.card-footer{

    margin-top:20px;

    padding-top:18px;

    border-top:1px solid rgba(255,255,255,.06);

}


/*==========================================================
TITLE
==========================================================*/

.card-title{

    font-size:1.25rem;

    font-weight:700;

}


/*==========================================================
SUBTITLE
==========================================================*/

.card-subtitle{

    margin-top:6px;

    color:var(--color-muted);

    font-size:.9rem;

}


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

.card-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 14px;

    border-radius:999px;

    background:rgba(66,179,255,.10);

    color:var(--color-primary);

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}


/*==========================================================
ESTADOS
==========================================================*/

.card-success{

    border-left:4px solid #45D483;

}

.card-warning{

    border-left:4px solid #FFC857;

}

.card-danger{

    border-left:4px solid #FF7272;

}

.card-info{

    border-left:4px solid var(--color-primary);

}