/* ========== ERP-UNIV Dashboard Shell ========== */
.erp-dashboard {
    min-height: 100vh;
    background: radial-gradient(1200px 800px at 20% 0%, rgba(38, 98, 255, 0.16), transparent 55%), radial-gradient(900px 700px at 90% 10%, rgba(0, 199, 255, 0.10), transparent 50%), #0b1020;
    color: #e8eefc;
}

.erp-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px 16px 28px;
}

/* Topbar */
.erp-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(11, 16, 32, 0.72);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.erp-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 0;
}

.erp-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.erp-logo {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,.35);
}

.erp-title {
    font-weight: 700;
    letter-spacing: .2px;
    font-size: 14px;
    color: #dbe7ff;
}

.erp-subtitle {
    font-size: 12px;
    opacity: .75;
}

/* Cards */
.erp-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    box-shadow: 0 18px 45px rgba(0,0,0,.35);
}

.erp-card-inner {
    padding: 14px 14px;
}


.kpi::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle at 30% 20%, rgba(54, 130, 255, 0.35), transparent 55%);
    transform: rotate(12deg);
    opacity: .55;
    pointer-events: none;
}

.kpi-top {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 10px;
}

.kpi-label {
    font-size: 12px;
    opacity: .95;
}

.kpi-value {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .2px;
    margin-top: 6px;
}

.kpi-sub {
    margin-top: 8px;
    font-size: 12px;
    opacity: .78;
}

/* Status chip */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.15);
    white-space: nowrap;
}

.dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #b8c7ff;
    box-shadow: 0 0 0 3px rgba(184,199,255,.15);
}

.chip.ok .dot {
    background: #2ee59d;
    box-shadow: 0 0 0 3px rgba(46,229,157,.14);
}

.chip.warn .dot {
    background: #ffd166;
    box-shadow: 0 0 0 3px rgba(255,209,102,.14);
}

.chip.alert .dot {
    background: #ff5c7a;
    box-shadow: 0 0 0 3px rgba(255,92,122,.14);
}

/* Skeleton */
.skeleton {
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
    border-radius: 12px;
    min-height: 22px;
}

    .skeleton::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
        animation: shimmer 1.2s infinite;
    }

@keyframes shimmer {
    to {
        transform: translateX(100%);
    }
}

/* Helpers */
.mt-16 {
    margin-top: 16px;
}

.mt-12 {
    margin-top: 12px;
}



/* ===========================
   TOPBAR PRO (2 FILAS)
   =========================== */

.erp-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(11, 16, 32, 0.72);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.erp-topbar-row {
    display: flex;
    align-items: center;
    padding: 12px 0;
}

.erp-topbar-row--brand {
    padding-bottom: 10px;
}

.erp-topbar-row--filters {
    padding-top: 0;
    padding-bottom: 14px;
}

.erp-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.erp-logo {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,.35);
}

.erp-brand-text .erp-title {
    font-weight: 800;
    letter-spacing: .2px;
    font-size: 15px;
    color: #dbe7ff;
    line-height: 1.1;
}

.erp-brand-text .erp-subtitle {
    font-size: 12px;
    opacity: .75;
    line-height: 1.1;
}

/* Filtros en fila 2 */
.erp-filters {
    width: 100%;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end; /* desktop: derecha */
}

.erp-field {
    min-width: 150px;
}

    .erp-field label {
        display: block;
        font-size: 11px;
        opacity: .78;
        margin-bottom: 6px;
    }

    .erp-field input {
        width: 100%;
        height: 42px;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,0.10);
        background: rgba(0,0,0,0.18);
        color: #e8eefc;
        padding: 0 12px;
        outline: none;
    }

.erp-btn {
    height: 42px;
    min-width: 150px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(55, 130, 255, 0.85);
    color: white;
    font-weight: 700;
}

/* Responsive: filtros a la izquierda en móvil */
@media (max-width: 980px) {
    .erp-filters {
        justify-content: flex-start;
    }

    .erp-field {
        min-width: 160px;
        flex: 1 1 160px;
    }

    .erp-btn {
        width: 100%;
        max-width: 260px;
    }
}



/* ===========================
   FILTER BAR (SUB-CARD PREMIUM)
   =========================== */

.erp-filters-card {
    width: 100%;
    padding: 12px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    box-shadow: 0 18px 45px rgba(0,0,0,.28);
}

/* Un separador sutil entre la fila 1 y la 2 */
.erp-topbar-row--filters {
    padding-top: 0;
    padding-bottom: 14px;
}

.erp-filters {
    width: 100%;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
}

/* Campos más premium */
.erp-field input {
    width: 100%;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(0,0,0,0.16);
    color: #e8eefc;
    padding: 0 12px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .erp-field input:focus {
        border-color: rgba(55,130,255,0.65);
        box-shadow: 0 0 0 4px rgba(55,130,255,0.14);
    }

/* Botón “pro” */
.erp-btn {
    height: 42px;
    min-width: 150px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    background: linear-gradient(180deg, rgba(55,130,255,0.95), rgba(55,130,255,0.75));
    color: #ffffff;
    font-weight: 800;
    letter-spacing: .2px;
    box-shadow: 0 14px 30px rgba(55,130,255,0.18);
    transition: transform .12s ease, filter .12s ease, opacity .12s ease;
}

    .erp-btn:hover {
        transform: translateY(-1px);
        filter: brightness(1.05);
    }

    .erp-btn:disabled {
        opacity: .70;
        cursor: not-allowed;
        transform: none;
        filter: none;
    }

/* Responsive: filtros a la izquierda en móvil */
@media (max-width: 980px) {
    .erp-filters {
        justify-content: flex-start;
    }

    .erp-field {
        min-width: 160px;
        flex: 1 1 160px;
    }

    .erp-btn {
        width: 100%;
        max-width: 260px;
    }
}


/* ===========================
   TITULO PRINCIPAL (PRO)
   =========================== */

.erp-topbar-row--brand {
    justify-content: flex-start;
}

.erp-brand-text .erp-title {
    font-size: 24px;
    font-weight: 950;
    letter-spacing: .2px;
    line-height: 1.05;
    color: #e6eeff;
    text-shadow: 0 10px 26px rgba(0,0,0,.35);
}

.erp-brand-text .erp-subtitle {
    font-size: 13px;
    opacity: .80;
    margin-top: 2px;
}

@media (min-width: 980px) {
    .erp-brand-text .erp-title {
        font-size: 28px;
    }
}

/* ===========================
   KPI: TITULOS + VALORES
   =========================== */

.kpi-label {
    font-size: 15px;
    font-weight: 750;
    opacity: .92;
    letter-spacing: .2px;
}

.kpi-value {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: .5px;
}

.kpi-sub {
    margin-top: 12px;
    font-size: 12px;
    opacity: .75;
}

/* ===========================
   DIFERENCIAS SUTILES ENTRE CARDS
   - Accent bar superior
   - Micro gradiente por variante
   - Borde sutil por variante
   =========================== */

.kpi {
    position: relative;
    overflow: hidden;
}

    /* barra superior sutil */
    .kpi::after {
        content: "";
        position: absolute;
        left: 14px;
        right: 14px;
        top: 10px;
        height: 2px;
        border-radius: 999px;
        opacity: .60;
        background: linear-gradient(90deg, rgba(55,130,255,.75), rgba(0,199,255,.22), transparent);
    }

/* fondo sutil por variante */
.kpi--primary::before {
    background: radial-gradient(circle at 25% 20%, rgba(54,130,255,0.42), transparent 58%);
}

.kpi--info::before {
    background: radial-gradient(circle at 25% 20%, rgba(0,199,255,0.24), transparent 58%);
}

.kpi--violet::before {
    background: radial-gradient(circle at 25% 20%, rgba(160,90,255,0.18), transparent 60%);
}

.kpi--neutral::before {
    background: radial-gradient(circle at 25% 20%, rgba(255,255,255,0.10), transparent 60%);
}

/* barra superior por variante */
.kpi--primary::after {
    background: linear-gradient(90deg, rgba(55,130,255,.85), rgba(55,130,255,.25), transparent);
}

.kpi--info::after {
    background: linear-gradient(90deg, rgba(0,199,255,.55), rgba(0,199,255,.18), transparent);
}

.kpi--violet::after {
    background: linear-gradient(90deg, rgba(160,90,255,.55), rgba(160,90,255,.18), transparent);
}

.kpi--neutral::after {
    background: linear-gradient(90deg, rgba(255,255,255,.20), rgba(255,255,255,.08), transparent);
}

/* borde sutil por variante (mantiene elegancia) */
.kpi--primary {
    border-color: rgba(55,130,255,0.18) !important;
}

.kpi--info {
    border-color: rgba(0,199,255,0.12) !important;
}

.kpi--violet {
    border-color: rgba(160,90,255,0.10) !important;
}

.kpi--neutral {
    border-color: rgba(255,255,255,0.08) !important;
}


.kpi--primary {
    border-left: 4px solid #2ea3ff;
}

.kpi--info {
    border-left: 4px solid #17c1e8;
}

.kpi--violet {
    border-left: 4px solid #9c6bff;
}

.kpi--neutral {
    border-left: 4px solid #2b3445;
}




.erp-card {
    transition: all .15s ease;
}

    .erp-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 18px 45px rgba(0,0,0,.45);
        border-color: rgba(255,255,255,0.12);
    }

/* ===========================
   KPI GRID (PRO) - ÚNICO SISTEMA
   - Mobile: 1 columna
   - Desktop: 2 columnas
   - Hero: full width
   =========================== */

.erp-kpis {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 14px;
    padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* Cada KPI ocupa 1 celda normal */
.kpi {
    position: relative;
    overflow: hidden;
}

/* Desktop: 2 columnas */
@media (min-width: 980px) {
    .erp-kpis {
        grid-template-columns: 1fr 1fr;
    }

    /* Hero ocupa todo el ancho */
    .kpi--hero {
        grid-column: 1 / -1;
    }
}


@media (min-width: 980px) {
    .kpi--wide {
        grid-column: span 2;
    }
}