/* =========================================================
       INVX4 - CARDS (Tailwindish)
       Scope: SOLO dentro de .invx4-ui
       ========================================================= */

/* layout */
.invx4-ui {
    /*min-height: 100vh;*/
}

    .invx4-ui > .container-fluid {
        /*min-height: 100vh;*/
        display: flex;
        flex-direction: column;
    }

    .invx4-ui .invx4-panels {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .invx4-ui #invx4PanelInv {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    /* base */
    .invx4-ui .invx4-card {
        border: 1px solid rgba(255,255,255,.10);
        border-radius: 16px;
        background: rgba(255,255,255,.03);
        box-shadow: 0 10px 30px rgba(0,0,0,.22);
    }

    .invx4-ui .invx4-card-body {
        padding: 16px;
    }

    .invx4-ui .invx4-muted {
        color: rgba(255,255,255,.55) !important;
    }

    /* kpis */
    .invx4-ui .invx4-kpi .invx4-card-body {
        display: flex;
        align-items: center;
        min-height: 84px;
    }

    .invx4-ui .invx4-kpi-lbl {
        font-weight: 950;
        font-size: .9rem;
    }

    .invx4-ui .invx4-kpi-val {
        font-weight: 950;
        font-size: 1.48rem;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .invx4-ui .invx4-ico {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(255,255,255,.10);
        font-size: 18px;
        flex: 0 0 auto;
    }

    .invx4-ui .invx4-ico-blue {
        background: rgba(13,110,253,.18);
        color: #8bbcff;
    }

    .invx4-ui .invx4-ico-red {
        background: rgba(220,53,69,.18);
        color: #ff9aa6;
    }

    .invx4-ui .invx4-ico-green {
        background: rgba(25,135,84,.18);
        color: #7af2b7;
    }

    .invx4-ui .invx4-ico-purple {
        background: rgba(111,66,193,.18);
        color: #d0b4ff;
    }

    /* alert */
    .invx4-ui .invx4-alert {
        border-color: rgba(220,53,69,.28);
        background: rgba(220,53,69,.10);
    }

    .invx4-ui .invx4-alert-ico {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(220,53,69,.28);
        background: rgba(220,53,69,.14);
        color: #ff9aa6;
        flex: 0 0 auto;
    }

    .invx4-ui .invx4-alert-title {
        font-weight: 950;
        color: #ff9aa6;
    }

    .invx4-ui .invx4-x {
        width: 34px;
        height: 34px;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,.10);
        background: rgba(255,255,255,.04);
        color: rgba(255,255,255,.85);
        display: grid;
        place-items: center;
        padding: 0;
    }

        .invx4-ui .invx4-x:hover {
            background: rgba(255,255,255,.06);
            border-color: rgba(255,255,255,.16);
            color: #fff;
        }

    /* tabs */
    .invx4-ui .invx4-tabsbar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: .55rem;
        padding: .55rem;
        border-radius: 16px;
        border: 1px solid rgba(255,255,255,.10);
        background: rgba(255,255,255,.03);
    }

    .invx4-ui .invx4-tabbtn {
        height: 44px;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,.12);
        background: rgba(255,255,255,.04);
        color: rgba(255,255,255,.86);
        font-weight: 950;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .55rem;
        padding: 0 .85rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
        user-select: none;
        transition: transform .08s ease, background .12s ease, border-color .12s ease;
    }

        .invx4-ui .invx4-tabbtn i {
            font-size: 16px;
            opacity: .95;
        }

        .invx4-ui .invx4-tabbtn:hover {
            background: rgba(255,255,255,.06);
            border-color: rgba(255,255,255,.18);
            color: #fff;
            transform: translateY(-1px);
        }

        .invx4-ui .invx4-tabbtn.is-active {
            background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08));
            border-color: rgba(255,255,255,.26);
            color: #fff;
            box-shadow: 0 10px 24px rgba(0,0,0,.22);
        }

@media (min-width: 992px) {
    .invx4-ui .invx4-tabsbar {
        grid-template-columns: repeat(4, minmax(0,1fr));
    }
}

/* input/select */
.invx4-ui .invx4-inputwrap, .invx4-ui .invx4-selectwrap {
    position: relative;
}

.invx4-ui .invx4-inico, .invx4-ui .invx4-selico {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,.55);
    pointer-events: none;
    z-index: 2;
}

.invx4-ui .invx4-input {
    height: 38px;
    border-radius: 12px;
    padding-left: 36px;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.10);
    color: #fff !important;
    box-shadow: none !important;
}

    .invx4-ui .invx4-input:focus {
        background: rgba(255,255,255,.04) !important;
        border-color: rgba(255,255,255,.18);
        color: #fff !important;
        box-shadow: 0 0 0 .2rem rgba(255,255,255,.06) !important;
        outline: 0;
    }

    .invx4-ui .invx4-input::placeholder {
        color: rgba(255,255,255,.40);
    }

.invx4-ui .invx4-select {
    height: 38px;
    border-radius: 12px;
    padding-left: 36px;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.10);
    color: #fff !important;
    box-shadow: none !important;
}

    .invx4-ui .invx4-select:focus {
        background: rgba(255,255,255,.04) !important;
        border-color: rgba(255,255,255,.18);
        box-shadow: 0 0 0 .2rem rgba(255,255,255,.06) !important;
        outline: 0;
        color: #fff !important;
    }

    .invx4-ui .invx4-select option {
        color: #000;
    }

/* botones */
.invx4-ui .invx4-btn {
    height: 38px;
    border-radius: 12px;
    font-weight: 950;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: 0 .95rem;
    white-space: nowrap;
}

.invx4-ui .invx4-btn-primary {
    background: rgba(13,110,253,.95);
    border: 1px solid rgba(13,110,253,.95);
    color: #fff;
}

.invx4-ui .invx4-btn-ghost {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    color: #fff;
}

    .invx4-ui .invx4-btn-ghost:hover {
        background: rgba(255,255,255,.06);
        border-color: rgba(255,255,255,.16);
        color: #fff;
    }

/* list card */
.invx4-ui .invx4-listcard {
/*    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;*/
}

.invx4-ui .invx4-listhead {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.invx4-ui .invx4-listtitle {
    font-weight: 950;
    color: rgba(255,255,255,.88);
    display: flex;
    align-items: center;
    gap: .25rem;
    white-space: nowrap;
}

.invx4-ui .invx4-cardswrap {
    /*flex: 1 1 auto;*/
    min-height: 0;
    overflow: auto;
    padding: 12px;
}

/* grid responsive */
.invx4-ui .invx4-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0,1fr));
    gap: 12px;
}

@media (min-width: 576px) {
    .invx4-ui .invx4-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (min-width: 992px) {
    .invx4-ui .invx4-grid {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}

@media (min-width: 1400px) {
    .invx4-ui .invx4-grid {
        grid-template-columns: repeat(4, minmax(0,1fr));
    }
}

/* card item */
.invx4-ui .invx4-item {
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    background: rgba(255,255,255,.03);
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
    overflow: hidden;
    transition: transform .08s ease, border-color .12s ease, background .12s ease;
}

    .invx4-ui .invx4-item:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.04);
        border-color: rgba(255,255,255,.16);
    }

/* header finito */
.invx4-ui .invx4-item-head {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.invx4-ui .invx4-item-title {
    font-weight: 950;
    color: rgba(255,255,255,.92);
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.invx4-ui .invx4-item-sub {
    margin-top: 2px;
    font-size: .78rem;
    color: rgba(255,255,255,.55);
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* chips */
.invx4-ui .invx4-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .30rem .55rem;
    border-radius: 999px;
    font-weight: 950;
    font-size: .75rem;
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.86);
    flex: 0 0 auto;
}

    .invx4-ui .invx4-chip.ok {
        background: rgba(25,135,84,.18);
        border-color: rgba(25,135,84,.28);
        color: #b7f7d0;
    }

    .invx4-ui .invx4-chip.low {
        background: rgba(220,53,69,.18);
        border-color: rgba(220,53,69,.28);
        color: #ffb9c2;
    }

    .invx4-ui .invx4-chip.opt {
        background: rgba(13,110,253,.16);
        border-color: rgba(13,110,253,.26);
        color: #bcd7ff;
    }

/* body */
.invx4-ui .invx4-item-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.invx4-ui .invx4-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.invx4-ui .invx4-label {
    font-size: .78rem;
    color: rgba(255,255,255,.55);
    font-weight: 900;
}

.invx4-ui .invx4-val {
    font-weight: 950;
    color: rgba(255,255,255,.90);
    white-space: nowrap;
}

/* stock */
.invx4-ui .invx4-stock {
    font-weight: 950;
}

    .invx4-ui .invx4-stock.low {
        color: #ff9aa6;
    }

    .invx4-ui .invx4-stock.mid {
        color: #ffd37a;
    }

    .invx4-ui .invx4-stock.ok {
        color: #7af2b7;
    }

.invx4-ui .invx4-bar {
    height: 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    overflow: hidden;
    width: 100%;
}

    .invx4-ui .invx4-bar > span {
        display: block;
        height: 100%;
        border-radius: 999px;
        background: rgba(13,110,253,.85);
    }

.invx4-ui .invx4-minmax {
    font-size: .78rem;
    color: rgba(255,255,255,.55);
    font-weight: 800;
}

/* actions */
.invx4-ui .invx4-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.invx4-ui .invx4-act {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.02);
    color: rgba(255,255,255,.86);
    display: inline-grid;
    place-items: center;
    padding: 0;
    transition: background .12s ease, border-color .12s ease, transform .08s ease;
}

    .invx4-ui .invx4-act:hover {
        background: rgba(255,255,255,.06);
        border-color: rgba(255,255,255,.16);
        color: #fff;
        transform: translateY(-1px);
    }

    .invx4-ui .invx4-act.up {
        color: #7af2b7;
    }

    .invx4-ui .invx4-act.down {
        color: #ff9aa6;
    }

/* pager bar */
.invx4-ui .invx4-pagerbar {
    padding: 10px 12px;
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
}

.invx4-ui .invx4-pagination {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.invx4-ui .invx4-page {
    height: 32px;
    min-width: 32px;
    padding: 0 .6rem;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.86);
    font-weight: 950;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    transition: background .12s ease, border-color .12s ease, transform .08s ease;
}

    .invx4-ui .invx4-page:hover {
        background: rgba(255,255,255,.06);
        border-color: rgba(255,255,255,.16);
        color: #fff;
        transform: translateY(-1px);
    }

    .invx4-ui .invx4-page.active {
        background: rgba(255,255,255,.10);
        border-color: rgba(255,255,255,.24);
        color: #fff;
        box-shadow: 0 10px 22px rgba(0,0,0,.22);
    }

    .invx4-ui .invx4-page.disabled {
        opacity: .45;
        pointer-events: none;
    }

/* empty state */
.invx4-ui .invx4-empty {
    border: 1px dashed rgba(255,255,255,.14);
    border-radius: 16px;
    padding: 26px 16px;
    text-align: center;
    background: rgba(255,255,255,.02);
}

.invx4-ui .invx4-empty-ico {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    margin: 0 auto 10px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.75);
    font-size: 22px;
}

.invx4-ui .invx4-empty-title {
    font-weight: 950;
    color: rgba(255,255,255,.90);
    margin-bottom: 4px;
}

/* mobile tweaks */
@media (max-width: 575.98px) {
    .invx4-ui .invx4-kpi-lbl {
        font-size: .78rem;
    }

    .invx4-ui .invx4-kpi-val {
        font-size: 1.10rem;
    }

    .invx4-ui .invx4-kpi .invx4-card-body {
       /* min-height: 76px;*/
        padding: 14px;
    }

    .invx4-ui .invx4-ico {
        width: 36px;
        height: 36px;
        border-radius: 11px;
        font-size: 16px;
    }

    .invx4-ui .invx4-item-head {
        padding: 9px 10px;
    }

    .invx4-ui .invx4-item-body {
        padding: 10px;
    }

    .invx4-ui .invx4-cardswrap {
        padding: 10px;
    }
}









/*MODAL CREAR INSUMO*/


select.lgx-input {
    color: #fff !important;
}

    select.lgx-input option {
        color: #111 !important;
    }

.lgx-modal .modal-backdrop, .modal-backdrop.show {
    opacity: .55;
}

.lgx-content {
    border-radius: 18px;
    overflow: hidden;
    background: rgba(20,20,20,.30);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.lgx-header, .lgx-footer {
    padding: .45rem .75rem;
    border-color: rgba(255,255,255,.12);
    background: linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));
}

.lgx-body {
    padding: .85rem .85rem;
    color: rgba(255,255,255,.92);
}

.lgx-label {
    color: rgba(255,255,255,.92);
}

.lgx-title {
    color: #fff !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

    .lgx-title i {
        color: #fff !important;
    }

.lgx-input, .lgx-addon {
    border-radius: 12px;
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    color: #fff !important;
    caret-color: #fff;
}

input.lgx-input, textarea.lgx-input {
    -webkit-text-fill-color: #fff;
}

.lgx-addon {
    color: #fff;
    white-space: nowrap;
}

.lgx-input::placeholder {
    color: rgba(255,255,255,.65);
}

.lgx-input:focus,
.lgx-input.form-control:focus,
select.lgx-input:focus {
    background: rgba(255,255,255,.16) !important;
    border-color: rgba(255,255,255,.55) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 .22rem rgba(255,255,255,.22) !important;
    color: #fff !important;
    caret-color: #fff;
}

.input-group:focus-within .lgx-addon,
.input-group:focus-within .lgx-input {
    border-color: rgba(255,255,255,.55) !important;
}

.lgx-close {
    filter: invert(1) grayscale(100%);
    opacity: .85;
}

    .lgx-close:hover {
        opacity: 1;
    }

.lgx-iconbtn {
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.92);
}

    .lgx-iconbtn:hover {
        background: rgba(255,255,255,.14);
        color: #fff;
    }

.lgx-btn {
    border-radius: 12px;
    padding: .35rem .7rem;
}

.lgx-help {
    margin-top: .25rem;
    font-size: .82rem;
    color: rgba(255,255,255,.55);
}

.lgx-badge {
    padding: .18rem .5rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.80);
    font-size: .78rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.lgx-ctl, .lgx-inv {
    border-radius: 16px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    overflow: hidden;
}

.lgx-ctl__header, .lgx-inv__header {
    padding: .45rem .65rem;
    border-bottom: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
    color: rgba(255,255,255,.92);
}

.lgx-ctl__body, .lgx-inv__body {
    padding: .65rem .65rem;
}

.lgx-ctl__switchlabel {
    color: rgba(255,255,255,.75);
    cursor: pointer;
}

/* ✅ Lock visual + click block */
.lgx-locked {
    opacity: .45;
    pointer-events: none;
    filter: saturate(.7);
}


.ocx-ui {
    min-height: 100vh;
    padding: 14px;
    color: #e5e7eb;
}

/* inputs compactos */
.ocx-input {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #020617;
    border: 1px solid #1f2937;
    border-radius: 12px;
    padding: 0 10px;
}

    .ocx-input i {
        opacity: .6;
        font-size: 14px
    }

    .ocx-input .form-control,
    .ocx-input .form-select {
        background: transparent;
        border: 0;
        color: #fff;
        height: 100%;
        padding: 0;
        font-size: .85rem;
    }

        .ocx-input .form-control::placeholder {
            color: #9ca3af
        }

        .ocx-input .form-control:focus,
        .ocx-input .form-select:focus {
            box-shadow: none;
        }

        .ocx-input .form-select option {
            color: #000; /* FIX texto visible */
        }

/* botón */
.ocx-btn-primary {
    height: 40px;
    border-radius: 12px;
    background: #2563eb;
    border: 1px solid #2563eb;
    font-weight: 800;
}

/* total card */
.ocx-totalcard {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-radius: 18px;
    background: radial-gradient(120% 120% at 0% 0%,rgba(59,130,246,.25),transparent 60%), linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.22);
}

    .ocx-totalcard small {
        opacity: .75;
        font-weight: 700;
    }

.ocx-total {
    font-size: 1.6rem;
    font-weight: 900;
}

.ocx-totalcard i {
    font-size: 32px;
    opacity: .7;
}

/* card */
.ocx-card {
    background: linear-gradient(180deg,#111827,#020617);
    border: 1px solid #1f2937;
    border-radius: 18px;
    padding: 14px;
    height: 100%;
    box-shadow: 0 18px 40px rgba(0,0,0,.45);
}

.ocx-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.ocx-title {
    font-weight: 900
}

.ocx-sub {
    font-size: .78rem;
    color: #9ca3af
}

/* body */
.ocx-body {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ocx-row {
    display: flex;
    justify-content: space-between;
    font-size: .85rem;
}

/* acciones */
.ocx-actions {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.ocx-act {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid #1f2937;
    background: #020617;
    display: grid;
    place-items: center;
    cursor: pointer;
}

    .ocx-act.view {
        color: #93c5fd
    }

    .ocx-act.print {
        color: #fde68a
    }

    .ocx-act.receive {
        color: #86efac
    }

    .ocx-act.approve {
        color: #86efac
    }

    .ocx-act.reject {
        color: #fca5a5
    }

/* badge bootstrap ajuste */
.badge.small {
}