/*==========================================================
LicitaAI.club
card.css
Design System v2.0
Mobile First
Compatível com todos os HTMLs existentes
==========================================================*/

.card{
display:flex;
flex-direction:column;
gap:var(--space-5);
padding:var(--card-padding);
background:var(--bg-card);
border:1px solid var(--border-color);
border-radius:var(--card-radius);
box-shadow:var(--shadow-sm);
transition:all .25s ease;
}

.card:hover{
transform:translateY(-2px);
border-color:var(--color-primary-light);
box-shadow:var(--shadow-md);
}

.card-header{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:var(--space-4);
flex-wrap:wrap;
}

.card-title{
margin:0;
font-size:1.125rem;
font-weight:700;
color:var(--text-primary);
}

.card-subtitle{
margin-top:4px;
font-size:.9rem;
color:var(--text-secondary);
}

.card-body{
display:flex;
flex-direction:column;
gap:var(--space-4);
flex:1;
}

.card-footer{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
gap:12px;
padding-top:var(--space-4);
border-top:1px solid var(--border-color);
align-items:center;
}

.card-footer .btn{
width:100%;
min-width:0;
}

.card-icon{
display:flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
border-radius:12px;
background:var(--color-gray-100);
}

.card-icon svg{
width:24px;
height:24px;
}

.card-metric{
display:flex;
flex-direction:column;
gap:10px;
}

.card-metric-value{
font-size:2rem;
font-weight:700;
color:var(--color-primary);
line-height:1;
}

.card-metric-label{
font-size:.875rem;
color:var(--text-secondary);
}

.card-opportunity{
display:flex;
flex-direction:column;
gap:var(--space-4);
}

.card-opportunity h3,
.card-opportunity p{
margin:0;
}

.card-ai{
border-left:4px solid var(--color-primary);
}

.card-success{
border-left:4px solid var(--color-success);
}

.card-warning{
border-left:4px solid var(--color-warning);
}

.card-danger{
border-left:4px solid var(--color-danger);
}

.card-news img{
width:100%;
border-radius:12px;
object-fit:cover;
}

.card-empty{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
min-height:240px;
gap:16px;
}

.card-empty svg{
width:56px;
height:56px;
color:var(--color-gray-400);
}

.card-pricing{
position:relative;
}

.card-pricing-featured{
border:2px solid var(--color-primary);
box-shadow:var(--shadow-lg);
}

@media(max-width:767px){
.card{
padding:20px;
}
.card-footer{
grid-template-columns:1fr;
}
}