/*
 * Sena UI · panel de inicio (SenaInicio)
 * Tarjetas KPI con icono de color, cifra grande y minigráfico, como la referencia de diseño.
 */

html.sena-ui .sena-home-title {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

html.sena-ui .sena-pill {
    border: 1px solid var(--sena-border);
    border-radius: 999px;
    background: var(--sena-surface);
    color: var(--sena-text);
    font-weight: 600;
    font-size: .8rem;
    padding: .4rem .9rem;
}

html.sena-ui .sena-pill:hover {
    background: var(--sena-surface-2);
}

html.sena-ui .sena-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

html.sena-ui .sena-widget {
    position: relative;
}

/* ---------- tarjeta ---------- */
html.sena-ui .sena-kpi {
    --kc: 37, 99, 235;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 190px;
    padding: 1.1rem;
    border: 1px solid var(--sena-border);
    border-radius: 22px;
    background: var(--sena-surface);
    box-shadow: 0 6px 24px rgba(var(--kc), .10);
    color: var(--sena-text);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

html.sena-ui .sena-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(var(--kc), .18);
    color: var(--sena-text);
}

html.sena-ui .sena-c-blue { --kc: 59, 130, 246; --kcs: #3b82f6; }
html.sena-ui .sena-c-green { --kc: 34, 197, 94; --kcs: #16a34a; }
html.sena-ui .sena-c-red { --kc: 239, 68, 68; --kcs: #ef4444; }
html.sena-ui .sena-c-amber { --kc: 245, 158, 11; --kcs: #f59e0b; }
html.sena-ui .sena-c-cyan { --kc: 14, 165, 233; --kcs: #0ea5e9; }
html.sena-ui .sena-c-violet { --kc: 139, 92, 246; --kcs: #8b5cf6; }

html.sena-ui .sena-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: .7rem;
    border-radius: 12px;
    background: rgba(var(--kc), .14);
    color: var(--kcs);
    font-size: 1.15rem;
}

html.sena-ui .sena-kpi-value {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.03em;
}

html.sena-ui .sena-kpi-value small {
    margin-left: .2rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--sena-muted);
}

html.sena-ui .sena-kpi-label {
    margin-top: .25rem;
    font-weight: 500;
    color: var(--sena-muted);
}

html.sena-ui .sena-kpi-sub {
    margin-top: .1rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--sena-muted);
}

html.sena-ui .sena-delta.up { color: #16a34a; }
html.sena-ui .sena-delta.down { color: #dc2626; }

html.sena-ui .sena-spark {
    width: 100%;
    height: 38px;
    margin-top: auto;
    padding-top: .5rem;
    overflow: visible;
}

html.sena-ui .sena-spark polyline {
    fill: none;
    stroke: var(--kcs);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
}

html.sena-ui .sena-spark polygon {
    fill: rgba(var(--kc), .12);
}

html.sena-ui .sena-kpi-bar {
    display: block;
    height: 8px;
    margin-top: auto;
    border-radius: 99px;
    background: rgba(var(--kc), .15);
    overflow: hidden;
}

html.sena-ui .sena-kpi-bar i {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--kcs);
}

/* ---------- personalizar ---------- */
html.sena-ui .sena-widget-toggle {
    display: none;
}

html.sena-ui .sena-home.sena-customizing .sena-widget-toggle {
    display: flex;
    align-items: center;
    gap: .4rem;
    position: absolute;
    inset: auto .6rem .6rem .6rem;
    padding: .3rem .6rem;
    border-radius: 99px;
    background: var(--sena-surface);
    border: 1px solid var(--sena-border);
    font-size: .72rem;
    font-weight: 600;
    z-index: 2;
}

html.sena-ui .sena-home.sena-customizing .sena-widget {
    cursor: grab;
}

html.sena-ui .sena-home.sena-customizing .sena-kpi {
    pointer-events: none;
    outline: 2px dashed rgba(var(--kc), .5);
    outline-offset: -4px;
}

html.sena-ui .sena-widget.is-hidden {
    display: none;
}

html.sena-ui .sena-home.sena-customizing .sena-widget.is-hidden {
    display: block;
    opacity: .45;
}

html.sena-ui .sena-widget.is-dragging {
    opacity: .4;
}

/* ---------- oscuro y móvil ---------- */
html.sena-ui[data-bs-theme="dark"] .sena-kpi {
    box-shadow: 0 6px 24px rgba(var(--kc), .08);
}

@media (max-width: 767.98px) {
    html.sena-ui .sena-widgets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
    }

    html.sena-ui .sena-kpi {
        min-height: 170px;
        padding: .9rem;
        border-radius: 18px;
    }

    html.sena-ui .sena-kpi-value {
        font-size: 1.75rem;
    }

    html.sena-ui .sena-home-title {
        font-size: 1.4rem;
    }
}