/*==================================================
HERO DASHBOARD
==================================================*/

.dashboard-hero{

    background:
    linear-gradient(
    135deg,
    var(--principal),
    var(--secundario)
    );

    border-radius:24px;

    padding:35px;

    color:#fff;

    box-shadow:
    0 15px 40px rgba(0,0,0,.18);

}

.dashboard-title{

    font-size:2.2rem;

    font-weight:700;

    margin-bottom:5px;

}

.dashboard-subtitle{

    text-transform:uppercase;

    letter-spacing:2px;

    opacity:.85;

}

.dashboard-text{

    opacity:.85;

    margin-bottom:0;

}

.dashboard-divider{

    opacity:.20;

    margin:25px 0;

}

.dashboard-total{

    font-size:3rem;

    font-weight:700;

    line-height:1;

}

.dashboard-date{

    background:
    var(--principal);

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:50px;

    backdrop-filter:blur(8px);

}

.dashboard-actions{

    display:flex;

    justify-content:flex-end;

    flex-wrap:wrap;

    gap:12px;

}

.btn-dashboard{

    background:
    var(--principal);

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

    color:#fff;

    backdrop-filter:blur(6px);

    border-radius:12px;

    padding:10px 18px;

    transition:.30s;

}

.btn-dashboard:hover{

    background:#fff;

    color:var(--principal);

    transform:translateY(-3px);

}

@media(max-width:768px){

.dashboard-hero{

padding:25px;

}


/*==================================
PLAN DEL USUARIO
==================================*/

.plan-card{

    margin-top:25px;

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

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

    border-radius:18px;

    padding:18px;

    backdrop-filter:blur(10px);

}

.plan-card h6{

    margin:0;

    font-weight:600;

}

.plan-card small{

    opacity:.9;

}

.plan-badge{

    background:#fff;

    color:var(--principal);

    padding:8px 15px;

    border-radius:50px;

    font-weight:700;

    font-size:.85rem;

}

.plan-progress{

    height:8px;

    border-radius:50px;

    overflow:hidden;

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

}

.plan-progress .progress-bar{

    background:#fff;

    border-radius:50px;

}
.dashboard-title{

font-size:1.7rem;

}

.dashboard-total{

font-size:2.3rem;

}

.dashboard-actions{

justify-content:flex-start;

margin-top:25px;

}

.btn-dashboard{

width:100%;

}

}

/*==================================
PLAN DEL USUARIO
==================================*/

.plan-card{

    margin-top:25px;

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

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

    border-radius:18px;

    padding:18px;

    backdrop-filter:blur(10px);

}

.plan-card h6{

    margin:0;

    font-weight:600;

}

.plan-card small{

    opacity:.9;

}

.plan-badge{

    background:#fff;

    color:var(--principal);

    padding:8px 15px;

    border-radius:50px;

    font-weight:700;

    font-size:.85rem;

}

.plan-progress{

    height:8px;

    border-radius:50px;

    overflow:hidden;

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

}

.plan-progress .progress-bar{

    background:#fff;

    border-radius:50px;

}

/*==================================
RESUMEN HERO
==================================*/

.dashboard-resumen{

    display:flex;

    gap:18px;

    margin-top:25px;

    flex-wrap:wrap;

}

.dashboard-mini{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 18px;

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

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

    border-radius:16px;

    backdrop-filter:blur(8px);

    transition:.30s;

}

.dashboard-mini:hover{

    transform:translateY(-3px);

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

}

.dashboard-mini i{

    font-size:1.5rem;

    color:#fff;

}

.dashboard-mini strong{

    display:block;

    font-size:1.15rem;

}

.dashboard-mini small{

    opacity:.85;

}


/* tarjetas */ 

/*==================================================
KPIs
==================================================*/

.dashboard-kpi{

display:block;

position:relative;

background:#fff;

border-radius:20px;

padding:24px;

text-decoration:none;

color:#222;

overflow:hidden;

height:100%;

border-top:5px solid var(--principal);

box-shadow:

0 8px 22px rgba(0,0,0,.08);

transition:.30s;

}

.dashboard-kpi:hover{

transform:translateY(-8px);

box-shadow:

0 18px 40px rgba(0,0,0,.14);

color:#222;

}

.dashboard-kpi::after{

content:"";

position:absolute;

right:-25px;

top:-25px;

width:90px;

height:90px;

border-radius:50%;

background:

rgba(0,0,0,.03);

transition:.35s;

}

.dashboard-kpi:hover::after{

transform:scale(1.4);

}

.dashboard-kpi-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:18px;

font-size:.85rem;

text-transform:uppercase;

letter-spacing:1px;

color:#777;

}

.dashboard-kpi-header i{

font-size:2rem;

color:var(--principal);

transition:.30s;

}

.dashboard-kpi:hover .dashboard-kpi-header i{

transform:rotate(-10deg) scale(1.15);

}

.dashboard-kpi-value{

font-size:2.6rem;

font-weight:700;

line-height:1;

margin-bottom:18px;

}

.dashboard-kpi-footer{

display:flex;

justify-content:space-between;

align-items:center;

font-weight:600;

font-size:.90rem;

color:var(--principal);

}

.dashboard-kpi-footer i{

transition:.30s;

}

.dashboard-kpi:hover .dashboard-kpi-footer i{

transform:translateX(8px);

}


/* TABLA /*

/*==================================
ACTIVIDAD
==================================*/

.dashboard-activity{

background:#fff;

border-radius:22px;

padding:25px;

box-shadow:

0 10px 30px rgba(0,0,0,.08);

}

.dashboard-section-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}

.dashboard-section-header h4{

margin:0;

font-size:1.2rem;

}

.dashboard-link{

color:var(--principal);

text-decoration:none;

font-weight:600;

}

.activity-item{

display:flex;

align-items:center;

justify-content:space-between;

padding:18px 0;

border-bottom:1px solid #eee;

gap:20px;

}

.activity-item:last-child{

border:none;

}

.activity-avatar{

width:55px;

height:55px;

border-radius:50%;

background:

linear-gradient(
135deg,
var(--principal),
var(--secundario)
);

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-weight:700;

font-size:1.2rem;

flex-shrink:0;

}

.activity-content{

flex:1;

}

.activity-content h6{

margin:0;

font-weight:700;

}

.activity-service{

color:#666;

margin-top:3px;

}

.activity-meta{

margin-top:6px;

font-size:.85rem;

color:#999;

}

.activity-right{

text-align:right;

}

.activity-price{

font-size:1.1rem;

font-weight:700;

margin-bottom:8px;

}

.activity-employee{

    margin-top:6px;

    color:#777;

    font-size:.90rem;

    display:flex;

    align-items:center;

    gap:6px;

}

.activity-employee i{

    color:var(--principal);

}