/* ========================
   DASHBOARD RESUMEN PRO
======================== */
.kannuh-dashboard {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
/* HEADER */

.kannuh-dashboard-header {
    margin-bottom: 20px;
}

.kannuh-dashboard-header h1 {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 5px;
}

.kannuh-dashboard-header p {
    color: #64748b;
    font-size: 14px;
}
.kannuh-dashboard-header img {
    width: 1em;
    height: 1em;
    font-size: 22px; /* igual al h1 */
    filter: invert(36%) sepia(85%) saturate(600%) hue-rotate(185deg) brightness(90%);
}

/* GRID PRINCIPAL */
.kannuh-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0,1.4fr) minmax(0,1fr);
    gap: 25px;
}

/* CARDS BASE */

.kannuh-card {
background: rgba(255,255,255,0.72);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);

border: 1px solid rgba(255,255,255,0.6);

box-shadow:
0 10px 30px rgba(15,23,42,0.08),
inset 0 1px 0 rgba(255,255,255,0.6);

padding: 28px;
border-radius: 14px;

transition: all 0.25s ease;
}

.kannuh-card:hover {

transform: translateY(-4px) scale(1.01);

box-shadow:
0 20px 45px rgba(15,23,42,0.12),
inset 0 1px 0 rgba(255,255,255,0.6);

}

.kannuh-card h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #0f172a;
}

/* ========================
   CARD CIRCULAR (FINANZAS)
======================== */

.kannuh-card-circle {
    grid-row: span 2;
}

.kannuh-circle {
    width: 200px;
    height: 200px;
    margin: 20px auto;
    border-radius: 50%;
    background: conic-gradient(
        #2563eb 75%,
        #e2e8f0 75%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.kannuh-circle::after {
    content: "";
    width: 140px;
    height: 140px;
    background: rgba(255,255,255,0.85);
backdrop-filter: blur(10px);
    border-radius: 50%;
    position: absolute;
}

.kannuh-circle-inner {
    position: relative;
    text-align: center;
    z-index: 2;
}

.kannuh-circle-inner span {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    display: block;
}

.kannuh-circle-inner small {
    font-size: 12px;
    color: #64748b;
}

/* LEGEND */

.kannuh-circle-legend {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    font-size: 14px;
    color: #0F172A;
}
.kannuh-action-icon img {
    width: 28px;
    height: 28px;
    display: block;
    /* Si tus SVGs son negros/oscuros y querés que tomen color azul: */
    filter: invert(28%) sepia(88%) saturate(1800%) hue-rotate(215deg) brightness(92%) contrast(96%);
}

.kannuh-circle-legend span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kannuh-circle-legend .income::before {
    content: "";
    width: 10px;
    height: 10px;
    background: #2563eb;
    border-radius: 50%;
}

.kannuh-circle-legend .expense::before {
    content: "";
    width: 10px;
    height: 10px;
    background: #94a3b8;
    border-radius: 50%;
}

/* ========================
   CARD STATS
======================== */

.kannuh-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.stat {
    background: rgba(255,255,255,0.55);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.6);
    padding: 18px;
    border-radius: 10px;
    text-align: center;
    transition: 0.2s ease;
}

.stat:hover {
    background: rgba(37,99,235,0.12);
}

.stat span {
    font-size: 13px;
    color: #64748b;
    display: block;
}

.stat strong {
    font-size: 20px;
    color: #0f172a;
}

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

.kannuh-card-activity ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.kannuh-card-activity li {
    padding: 14px 0;
    border-bottom: 1px solid rgba(15,23,42,0.06);
    font-size: 14px;
    color: #334155;
}

.kannuh-card-activity li:last-child {
    border-bottom: none;
}

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

@media (max-width: 1024px) {
    
    .kannuh-dashboard-header h1 {
    font-size: 18px;
}

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

    .kannuh-card-circle {
        grid-row: span 1;
    }

}

@media (max-width: 600px) {

    .kannuh-card {
        padding: 20px;
    }

    .kannuh-circle {
        width: 170px;
        height: 170px;
    }

}

/* ========================
   QUICK ACTIONS COMPACTAS
======================== */

.kannuh-quick-actions {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 👈 3 columnas para 3 items */
    gap: 14px;
}

/* CARD */

.kannuh-action {
    background: rgba(255,255,255,0.55);
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.6);
    border-radius: 14px;
    padding: 14px;
    text-align: center;
    text-decoration: none;
    transition: 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;

    height: 95px; /* 👈 altura fija compacta */
    box-shadow: 0 12px 28px rgba(15,23,42,0.08);
}

.kannuh-action:hover {
   background: rgba(37,99,235,0.12);
    transform: translateY(-3px);
}

/* ICONO */

.kannuh-action span {
    font-size: 20px;
}

/* TEXTO */

.kannuh-action small {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
}

/* BADGE NUMERO */

.kannuh-action-number {
    position: absolute;
    top: 8px;
    right: 10px;
    background: linear-gradient(135deg,#2563eb,#3b82f6);
box-shadow: 0 6px 14px rgba(37,99,235,0.35);
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 20px;
    min-width: 22px;
}

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

@media (max-width: 480px) {

    .kannuh-action {
        height: 85px;
        padding: 12px;
    }

    .kannuh-action span {
        font-size: 18px;
    }

    .kannuh-action small {
        font-size: 11px;
    }

}