:root {
    --z10-bg: #080d10;
    --z10-s1: #0d1418;
    --z10-s2: #121b20;
    --z10-s3: #182228;

    --z10-line:
        rgba(255,255,255,.075);

    --z10-line2:
        rgba(255,255,255,.13);

    --z10-text: #f4f7f8;
    --z10-muted: #84939a;
    --z10-faint: #59676e;

    --z10-accent: #5abce7;
    --z10-accent-bg:
        rgba(90,188,231,.12);

    --z10-nav: 72px;
}


html,
body {
    max-width: 100%;
    overflow-x: hidden;
}


body {
    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(89,151,176,.075),
            transparent 34%
        ),
        var(--z10-bg);
}


body.zb10-overlay-open {
    overflow: hidden;
}


/*
==============================================================
TOPBAR
==============================================================
*/

.zero-topbar {
    min-height: 58px !important;

    box-sizing: border-box;

    border-bottom:
        1px solid
        var(--z10-line) !important;

    background:
        rgba(8,13,16,.84) !important;

    backdrop-filter:
        blur(24px)
        saturate(130%);
}


.zero-mark {
    color:
        var(--z10-text) !important;
}


.zero-product,
.zero-user {
    color:
        var(--z10-muted) !important;
}


/*
==============================================================
NAV
==============================================================
*/

.zb10-nav {
    position: fixed;
    z-index: 9990;

    left: 50%;
    bottom:
        max(
            11px,
            env(safe-area-inset-bottom)
        );

    transform:
        translateX(-50%);

    display: flex;

    gap: 4px;

    width: max-content;
    max-width:
        calc(100vw - 20px);

    padding: 6px;

    box-sizing: border-box;

    border:
        1px solid
        var(--z10-line2);

    border-radius: 22px;

    background:
        rgba(13,20,24,.9);

    box-shadow:
        0 18px 60px
        rgba(0,0,0,.42);

    backdrop-filter:
        blur(26px)
        saturate(135%);
}


.zb10-nav a {
    display: grid;

    grid-template-columns:
        auto auto;

    align-items: center;

    gap: 7px;

    min-height: 48px;

    padding: 0 15px;

    border-radius: 16px;

    color: var(--z10-muted);

    text-decoration: none;
}


.zb10-nav a span {
    font-size: 18px;
    line-height: 1;
}


.zb10-nav a small {
    font-size: 11px;
    font-weight: 760;
}


.zb10-nav a.active {
    background:
        rgba(255,255,255,.075);

    color: var(--z10-text);
}


/*
==============================================================
INVENTARIO
==============================================================
*/

.zb-inventory-page {
    width:
        min(
            1180px,
            calc(100% - 30px)
        ) !important;

    margin:
        27px auto
        calc(var(--z10-nav) + 50px)
        !important;
}


.zb-inventory-hero {
    margin-bottom: 18px !important;
}


.zb-inventory-hero h1 {
    margin: 5px 0 !important;

    color:
        var(--z10-text) !important;

    font-size:
        clamp(
            30px,
            4vw,
            43px
        ) !important;

    line-height: 1;

    letter-spacing: -.045em;
}


.zb-inventory-hero p {
    margin: 0 !important;

    color:
        var(--z10-muted) !important;

    font-size: 13px !important;
}


.zb-inventory-tabs {
    display: inline-grid;

    grid-template-columns:
        repeat(3,auto);

    gap: 4px;

    margin-bottom: 13px;

    padding: 5px;

    border:
        1px solid
        var(--z10-line);

    border-radius: 16px;

    background: #0b1115;
}


.zb-inventory-tabs button {
    min-height: 43px;

    padding: 0 18px;

    border: 0;
    border-radius: 12px;

    background: transparent;

    color: var(--z10-muted);

    font-weight: 760;

    cursor: pointer;
}


.zb-inventory-tabs button.active {
    background:
        var(--z10-s3);

    color:
        var(--z10-text);
}


/*
Resumen
*/

.zb-inventory-summary {
    gap: 8px !important;
}


.zb-inventory-summary article {
    min-width: 0;

    border:
        1px solid
        var(--z10-line) !important;

    border-radius:
        16px !important;

    background:
        var(--z10-s1) !important;
}


.zb-inventory-summary article span {
    color:
        var(--z10-faint) !important;

    font-size: 9px !important;

    letter-spacing: .12em;
}


.zb-inventory-summary article strong {
    color:
        var(--z10-text) !important;

    font-size: 25px !important;

    letter-spacing: -.045em;
}


/*
Toolbar
*/

.zb-inventory-toolbar {
    gap: 8px !important;

    margin: 13px 0 !important;
}


.zb-inventory-toolbar input,
.zb-inventory-toolbar select {
    min-height: 48px !important;

    box-sizing: border-box;

    border:
        1px solid
        var(--z10-line) !important;

    border-radius:
        14px !important;

    background:
        var(--z10-s1) !important;

    color:
        var(--z10-text) !important;
}


/*
Cards
*/

.zb-product-admin-grid {
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(250px,1fr)
        ) !important;

    gap: 10px !important;
}


.zb-product-admin-card {
    overflow: hidden;

    border:
        1px solid
        var(--z10-line) !important;

    border-radius:
        19px !important;

    background:
        var(--z10-s1) !important;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.12);
}


.zb-product-admin-photo {
    aspect-ratio:
        1.5 / 1 !important;

    background:
        #0a1013 !important;
}


.zb-product-admin-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.zb-product-admin-body {
    padding: 14px !important;
}


.zb-product-admin-heading h3 {
    color:
        var(--z10-text) !important;

    font-size: 19px !important;

    line-height: 1.08;

    letter-spacing: -.025em;
}


.zb-product-admin-heading strong {
    color:
        var(--z10-text) !important;

    font-size: 22px !important;

    letter-spacing: -.045em;
}


.zb-stock-mini {
    margin-top: 12px !important;

    border:
        1px solid
        var(--z10-line) !important;

    border-radius:
        14px !important;

    background:
        #0a1013 !important;
}


.zb-stock-mini span {
    color:
        var(--z10-faint) !important;

    font-size: 9px !important;
}


.zb-stock-mini strong {
    color:
        var(--z10-text) !important;
}


/*
Vista Bodega:
solo domina Bodega.
*/

.zb-inventory-page[data-view="warehouse"]
.zb-stock-mini > div:nth-child(2) {
    display: none !important;
}


.zb-inventory-page[data-view="warehouse"]
.zb-stock-mini {
    grid-template-columns:
        1fr !important;
}


.zb-inventory-page[data-view="warehouse"]
.zb-stock-mini strong {
    font-size: 31px !important;
}


/*
Vista Jornada:
solo domina Jornada.
*/

.zb-inventory-page[data-view="shift"]
.zb-stock-mini > div:nth-child(1) {
    display: none !important;
}


.zb-inventory-page[data-view="shift"]
.zb-stock-mini {
    grid-template-columns:
        1fr !important;
}


.zb-inventory-page[data-view="shift"]
.zb-stock-mini strong {
    font-size: 31px !important;
}


/*
==============================================================
BOTONES
==============================================================
*/

.zb-btn,
.zb-btn-primary {
    min-height: 45px;

    border-radius:
        13px !important;

    font-weight: 760;
}


.zb-btn-primary {
    border-color:
        rgba(
            90,
            188,
            231,
            .25
        ) !important;

    background:
        var(--z10-accent-bg)
        !important;

    color:
        #a8e0f8 !important;
}


/*
==============================================================
MESERO + CAJA
==============================================================
*/

body.zbf-operation,
body.zbf-caja {
    padding-bottom:
        calc(
            var(--z10-nav)
            + 30px
        );
}


.op-drawer,
.op-account-drawer,
.zbc-drawer,
.zb-caja-drawer {
    border-color:
        var(--z10-line) !important;

    background:
        rgba(
            11,
            17,
            20,
            .98
        ) !important;
}


/*
==============================================================
CATALOGO COMPARTIDO
==============================================================
*/

.zbo-product,
.zb-order-product-card,
.zb-shared-product {
    border-color:
        var(--z10-line) !important;

    background:
        var(--z10-s1) !important;
}


.zbo-product strong,
.zb-order-product-card strong {
    font-size:
        19px !important;
}


.zbo-qty,
.zb-order-qty,
[data-order-qty] {
    min-width:
        42px !important;

    color:
        var(--z10-text) !important;

    font-size:
        20px !important;

    font-weight:
        850 !important;

    text-align: center;
}


/*
==============================================================
PHONE
==============================================================
*/

@media (max-width:700px) {

    :root {
        --z10-nav: 68px;
    }


    .zero-topbar {
        min-height:
            52px !important;

        padding-left:
            12px !important;

        padding-right:
            12px !important;
    }


    .zero-user > span {
        display: none;
    }


    /*
    Bottom nav
    */

    .zb10-nav {
        width:
            calc(100vw - 16px);

        bottom:
            max(
                8px,
                env(safe-area-inset-bottom)
            );

        justify-content: stretch;

        border-radius: 20px;
    }


    .zb10-nav a {
        flex: 1 1 0;

        min-width: 0;

        min-height: 53px;

        grid-template-columns: 1fr;

        justify-items: center;

        gap: 2px;

        padding: 4px;
    }


    .zb10-nav a span {
        font-size: 19px;
    }


    .zb10-nav a small {
        overflow: hidden;

        width: 100%;

        font-size: 9px;

        text-align: center;

        text-overflow: ellipsis;

        white-space: nowrap;
    }


    /*
    Inventario
    */

    .zb-inventory-page {
        width:
            calc(100% - 18px)
            !important;

        margin-top:
            15px !important;
    }


    .zb-inventory-hero {
        display: grid !important;

        gap: 14px !important;
    }


    .zb-inventory-hero h1 {
        font-size:
            31px !important;
    }


    .zb-inventory-hero-actions {
        display: flex !important;

        width: 100%;

        gap: 7px;
    }


    .zb-inventory-hero-actions > * {
        flex: 1 1 0;

        min-width: 0;

        text-align: center;
    }


    .zb-inventory-tabs {
        display: grid;

        grid-template-columns:
            repeat(3,1fr);

        width: 100%;

        box-sizing: border-box;
    }


    .zb-inventory-tabs button {
        min-width: 0;

        padding: 0 5px;

        font-size: 12px;
    }


    .zb-inventory-summary {
        display: grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;
    }


    .zb-inventory-summary article {
        padding: 12px !important;
    }


    .zb-inventory-summary article strong {
        font-size:
            22px !important;
    }


    .zb-inventory-toolbar {
        display: grid !important;

        grid-template-columns:
            1fr 1fr !important;
    }


    .zb-inventory-toolbar input {
        grid-column:
            1 / -1;

        width: 100% !important;
    }


    .zb-inventory-toolbar select,
    .zb-inventory-toolbar button {
        width: 100% !important;

        min-width: 0 !important;
    }


    /*
    Una fila por producto.
    Mucho más rápida de leer.
    */

    .zb-product-admin-grid {
        grid-template-columns:
            1fr !important;
    }


    .zb-product-admin-card {
        display: grid;

        grid-template-columns:
            104px
            minmax(0,1fr);

        min-height: 126px;
    }


    .zb-product-admin-photo {
        height: 100% !important;

        min-height: 126px;

        aspect-ratio:
            auto !important;
    }


    .zb-product-admin-body {
        min-width: 0;

        padding: 12px !important;
    }


    .zb-product-admin-heading h3 {
        font-size:
            18px !important;
    }


    .zb-product-admin-heading strong {
        font-size:
            20px !important;
    }


    /*
    Bodega/Jornada:
    cantidad mucho más importante.
    */

    .zb-inventory-page[data-view="warehouse"]
    .zb-product-admin-card,

    .zb-inventory-page[data-view="shift"]
    .zb-product-admin-card {

        grid-template-columns:
            78px
            minmax(0,1fr);
    }


    /*
    Drawers pasan a bottom sheet.
    */

    .op-drawer,
    .op-account-drawer,
    .zbc-drawer,
    .zb-caja-drawer {

        position: fixed !important;

        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width: 100% !important;
        max-width: 100% !important;

        max-height:
            84dvh !important;

        box-sizing: border-box;

        overflow-y: auto;

        border-radius:
            24px 24px 0 0
            !important;

        padding-bottom:
            calc(
                var(--z10-nav)
                + env(
                    safe-area-inset-bottom
                )
                + 14px
            ) !important;
    }


    /*
    Catálogo: dos columnas.
    */

    .zbo-grid,
    .zb-order-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;

        gap: 8px !important;
    }


    .zbo-product,
    .zb-order-product-card {
        min-width: 0;

        border-radius:
            16px !important;
    }


    .zbo-product h3,
    .zb-order-product-card h3 {
        font-size:
            15px !important;

        line-height: 1.08;
    }


    .zbo-product strong,
    .zb-order-product-card strong {
        font-size:
            19px !important;
    }


    button,
    .zb-btn {
        min-height: 44px;
    }
}