/* ==========================================================
   ZERO_BAR_UI_V07
   Sistema visual compartido · Admin / Caja / Mesero
   ========================================================== */

:root {
    --zb-bg: #07090b;
    --zb-bg-soft: #0b0f13;

    --zb-surface:
        rgba(18, 25, 31, .72);

    --zb-surface-strong:
        rgba(20, 28, 35, .90);

    --zb-surface-soft:
        rgba(255, 255, 255, .035);

    --zb-border:
        rgba(255, 255, 255, .075);

    --zb-border-strong:
        rgba(255, 255, 255, .12);

    --zb-text:
        rgba(245, 249, 252, .94);

    --zb-text-soft:
        rgba(224, 233, 239, .65);

    --zb-text-muted:
        rgba(207, 220, 229, .38);

    --zb-blue: #0a66a9;
    --zb-blue-light: #61baf2;

    --zb-accent-soft:
        rgba(10, 102, 169, .14);

    --zb-warning:
        #d5a45c;

    --zb-success:
        #65b996;

    --zb-radius-sm: 10px;
    --zb-radius-md: 15px;
    --zb-radius-lg: 21px;
    --zb-radius-xl: 28px;

    --zb-shadow:
        0 24px 80px rgba(0, 0, 0, .34);

    --zb-blur: 28px;

    --zb-touch: 44px;
}


/* ---------- superficies ---------- */

.zb-ui-glass {
    border: 1px solid var(--zb-border);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.012)
        ),
        var(--zb-surface);

    box-shadow: var(--zb-shadow);

    backdrop-filter:
        blur(var(--zb-blur))
        saturate(125%);

    -webkit-backdrop-filter:
        blur(var(--zb-blur))
        saturate(125%);
}


.zb-ui-panel {
    border: 1px solid var(--zb-border);
    border-radius: var(--zb-radius-lg);
    background: var(--zb-surface);
}


.zb-ui-card {
    border: 1px solid var(--zb-border);
    border-radius: var(--zb-radius-md);
    background: var(--zb-surface-soft);
}


/* ---------- texto ---------- */

.zb-ui-eyebrow {
    color: var(--zb-blue-light);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
}


.zb-ui-title {
    margin: 0;
    color: var(--zb-text);
    font-size: clamp(20px, 2vw, 30px);
    font-weight: 650;
    letter-spacing: -.035em;
}


.zb-ui-muted {
    color: var(--zb-text-muted);
}


/* ---------- botones ---------- */

.zb-ui-button {
    min-height: var(--zb-touch);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 0 15px;

    border: 1px solid var(--zb-border);
    border-radius: 13px;

    background:
        rgba(255,255,255,.035);

    color: var(--zb-text-soft);

    font: inherit;
    font-size: 12px;

    cursor: pointer;

    transition:
        transform .14s ease,
        border-color .14s ease,
        background .14s ease;
}


.zb-ui-button:hover {
    border-color:
        rgba(255,255,255,.14);

    background:
        rgba(255,255,255,.055);
}


.zb-ui-button:active {
    transform: scale(.985);
}


.zb-ui-button.primary {
    border-color:
        rgba(65, 169, 237, .26);

    background:
        linear-gradient(
            180deg,
            rgba(18, 119, 188, .92),
            rgba(8, 82, 137, .94)
        );

    color: white;

    box-shadow:
        0 9px 30px
        rgba(10,102,169,.17);
}


.zb-ui-button.secondary {
    border-color:
        rgba(62, 164, 232, .18);

    background:
        rgba(10,102,169,.09);

    color:
        rgba(150,216,255,.91);
}


.zb-ui-button:disabled {
    opacity: .30;
    cursor: default;
    transform: none;
}


/* ---------- inputs ---------- */

.zb-ui-input {
    width: 100%;
    min-height: var(--zb-touch);

    padding: 0 13px;

    border:
        1px solid var(--zb-border);

    border-radius: 13px;

    outline: none;

    background:
        rgba(0,0,0,.18);

    color: var(--zb-text);

    font: inherit;
}


.zb-ui-input:focus {
    border-color:
        rgba(74,177,244,.34);

    box-shadow:
        0 0 0 3px
        rgba(10,102,169,.07);
}


/* ---------- chips / categorías ---------- */

.zb-ui-chips {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    scrollbar-width: none;
}


.zb-ui-chips::-webkit-scrollbar {
    display: none;
}


.zb-ui-chip {
    min-height: 34px;
    flex: 0 0 auto;

    padding: 0 12px;

    border:
        1px solid var(--zb-border);

    border-radius: 999px;

    background:
        rgba(255,255,255,.025);

    color: var(--zb-text-muted);

    font: inherit;
    font-size: 10px;

    cursor: pointer;
}


.zb-ui-chip.active {
    border-color:
        rgba(72,176,244,.25);

    background:
        var(--zb-accent-soft);

    color:
        rgba(160,220,255,.95);
}


/* ---------- productos ---------- */

.zb-ui-product-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(145px, 1fr)
        );

    gap: 10px;
}


.zb-ui-product {
    position: relative;
    min-width: 0;
    overflow: hidden;

    border:
        1px solid var(--zb-border);

    border-radius:
        var(--zb-radius-md);

    background:
        rgba(255,255,255,.026);

    transition:
        transform .15s ease,
        border-color .15s ease,
        background .15s ease;
}


.zb-ui-product:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(255,255,255,.13);

    background:
        rgba(255,255,255,.04);
}


.zb-ui-product-media {
    position: relative;

    width: 100%;
    aspect-ratio: 1.32 / 1;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 65%,
            rgba(35,116,168,.13),
            transparent 58%
        ),
        rgba(0,0,0,.16);
}


.zb-ui-product-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.zb-ui-product-placeholder {
    width: 56px;
    height: 56px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius: 17px;

    background:
        rgba(255,255,255,.025);

    color:
        rgba(255,255,255,.18);

    font-size: 23px;
}


.zb-ui-product-body {
    display: grid;
    gap: 5px;

    padding: 11px;
}


.zb-ui-product-name {
    overflow: hidden;

    color: var(--zb-text);

    font-size: 12px;
    font-weight: 650;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.zb-ui-product-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;

    color: var(--zb-text-muted);
    font-size: 9px;
}


.zb-ui-product-price {
    color:
        rgba(209,231,244,.78);

    font-size: 11px;
    font-weight: 650;
}


/* ---------- estados ---------- */

.zb-ui-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    min-height: 25px;
    padding: 0 9px;

    border-radius: 999px;

    background:
        rgba(255,255,255,.035);

    color: var(--zb-text-muted);

    font-size: 9px;
}


.zb-ui-status::before {
    content: "";

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        currentColor;

    opacity: .75;
}


.zb-ui-status.active {
    color: var(--zb-blue-light);
    background: rgba(10,102,169,.10);
}


.zb-ui-status.warning {
    color: var(--zb-warning);
    background: rgba(213,164,92,.08);
}


.zb-ui-status.success {
    color: var(--zb-success);
    background: rgba(101,185,150,.08);
}


/* ---------- shell compartido ---------- */

.zb-app-shell {
    min-height: 100dvh;

    background:
        radial-gradient(
            circle at 75% -10%,
            rgba(10,102,169,.12),
            transparent 34%
        ),
        radial-gradient(
            circle at 10% 110%,
            rgba(38,91,126,.07),
            transparent 36%
        ),
        var(--zb-bg);
}


.zb-role-header {
    min-height: 62px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    padding:
        10px clamp(14px, 2vw, 24px);

    border-bottom:
        1px solid rgba(255,255,255,.055);

    background:
        rgba(7,9,11,.72);

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}


.zb-role-main {
    width: 100%;
    min-width: 0;
}


/* ---------- móvil ---------- */

@media (max-width: 700px) {

    :root {
        --zb-touch: 48px;
        --zb-radius-md: 16px;
        --zb-radius-lg: 19px;
    }

    .zb-ui-product-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;
    }

    .zb-ui-product-media {
        aspect-ratio: 1.15 / 1;
    }

    .zb-ui-product-body {
        padding: 10px;
    }

}


/* ---------- pantallas muy pequeñas ---------- */

@media (max-width: 360px) {

    .zb-ui-product-grid {
        grid-template-columns: 1fr;
    }

}



/* ==========================================================
   ZERO_BAR_CATALOG_CSS_V07_C01
   ========================================================== */

.zb-catalog-shell {
    width: min(920px, calc(100vw - 28px));
    max-height: min(860px, calc(100dvh - 28px));

    display: grid;

    grid-template-rows:
        auto
        auto
        minmax(180px, 1fr)
        auto
        auto
        auto;

    overflow: hidden;

    border-radius: var(--zb-radius-xl);
}


.zb-catalog-header {
    min-height: 76px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 16px 20px;

    border-bottom:
        1px solid var(--zb-border);
}


.zb-catalog-heading {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 4px;
}


.zb-catalog-title {
    margin: 0;

    overflow: hidden;

    color: var(--zb-text);

    font-size: 21px;
    font-weight: 650;
    letter-spacing: -.025em;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.zb-catalog-close {
    width: 40px;
    height: 40px;

    flex: 0 0 auto;

    border:
        1px solid var(--zb-border);

    border-radius: 13px;

    background:
        rgba(255,255,255,.03);

    color:
        var(--zb-text-soft);

    font-size: 22px;
    cursor: pointer;
}


.zb-catalog-toolbar {
    display: grid;
    gap: 10px;

    padding:
        14px 18px 11px;

    border-bottom:
        1px solid rgba(255,255,255,.04);
}


.zb-catalog-content {
    min-height: 0;

    padding: 14px 18px;

    overflow-y: auto;
}


.zb-ui-product.selected {
    border-color:
        rgba(70,174,242,.30);

    box-shadow:
        inset 0 0 0 1px
        rgba(10,102,169,.08);
}


.zb-catalog-qty-badge {
    position: absolute;
    top: 8px;
    right: 8px;

    min-width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    padding: 0 7px;

    border:
        1px solid
        rgba(125,204,255,.20);

    border-radius: 999px;

    background:
        rgba(7,76,122,.88);

    color: white;

    box-shadow:
        0 8px 26px
        rgba(0,0,0,.25);

    font-size: 11px;
    font-weight: 700;
}


.zb-catalog-stock {
    min-height: 18px;

    display: flex;
    align-items: center;

    color:
        rgba(255,255,255,.30);

    font-size: 9px;
}


.zb-catalog-stock.warning {
    color:
        rgba(221,176,108,.78);
}


.zb-catalog-stepper {
    display: grid;

    grid-template-columns:
        34px 1fr 34px;

    align-items: center;

    margin-top: 3px;
}


.zb-catalog-stepper button {
    width: 34px;
    height: 34px;

    border:
        1px solid var(--zb-border);

    border-radius: 10px;

    background:
        rgba(255,255,255,.03);

    color:
        rgba(255,255,255,.78);

    font: inherit;
    font-size: 17px;

    cursor: pointer;
}


.zb-catalog-stepper button:last-child {
    border-color:
        rgba(62,166,235,.22);

    background:
        rgba(10,102,169,.12);

    color:
        rgba(155,220,255,.96);
}


.zb-catalog-stepper button:disabled {
    opacity: .20;
    cursor: default;
}


.zb-catalog-stepper strong {
    text-align: center;

    color:
        rgba(255,255,255,.80);

    font-size: 12px;
}


.zb-catalog-order {
    margin: 0 18px 10px;

    padding: 12px 14px;

    border:
        1px solid
        rgba(63,166,234,.14);

    border-radius:
        var(--zb-radius-md);

    background:
        rgba(10,102,169,.055);
}


.zb-catalog-order-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    padding-bottom: 8px;
}


.zb-catalog-order-head > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.zb-catalog-order-head > div strong {
    color:
        rgba(255,255,255,.74);

    font-size: 12px;
}


.zb-catalog-order-total {
    color:
        rgba(230,245,253,.94);

    font-size: 18px;
}


.zb-catalog-order-lines {
    max-height: 112px;

    display: grid;
    gap: 5px;

    padding-top: 8px;

    overflow-y: auto;

    border-top:
        1px solid
        rgba(255,255,255,.055);
}


.zb-catalog-order-line {
    display: flex;
    justify-content: space-between;
    gap: 14px;

    color:
        rgba(255,255,255,.46);

    font-size: 10px;
}


.zb-catalog-order-line strong {
    color:
        rgba(255,255,255,.70);
}


.zb-catalog-footer {
    min-height: 68px;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;

    padding: 12px 18px;

    border-top:
        1px solid var(--zb-border);

    background:
        rgba(5,8,10,.26);
}


.zb-catalog-empty {
    grid-column: 1 / -1;

    padding: 50px 12px;

    color:
        var(--zb-text-muted);

    text-align: center;
    font-size: 11px;
}


.zb-catalog-open-button {
    width: calc(100% - 24px);
    margin: 0 12px 12px;
}


/* ---------- teléfono ---------- */

@media (max-width: 700px) {

    .zb-catalog-shell {
        width: calc(100vw - 10px);
        height: calc(100dvh - 10px);
        max-height: none;

        border-radius: 22px;
    }


    .zb-catalog-header {
        min-height: 68px;
        padding: 12px 14px;
    }


    .zb-catalog-title {
        font-size: 18px;
    }


    .zb-catalog-toolbar {
        padding:
            10px 12px 8px;
    }


    .zb-catalog-content {
        padding:
            10px 12px;
    }


    .zb-catalog-order {
        margin:
            0 12px 8px;
    }


    .zb-catalog-footer {
        padding:
            10px 12px;

        position: sticky;
        bottom: 0;
    }


    .zb-catalog-footer .zb-ui-button {
        flex: 1 1 0;
    }

}



/* ==========================================================
   ZERO_BAR_CATALOG_NATIVE_CAJA_R1
   ========================================================== */

.zb-catalog-native-order {
    border-color:
        rgba(71, 177, 244, .22) !important;

    background:
        rgba(10, 102, 169, .10) !important;

    color:
        rgba(143, 215, 255, .95) !important;
}



/* ==========================================================
   ZERO_BAR_SHARED_ORDER_CSS_V07_S02
   ========================================================== */

.zb-order-component {
    width: 100%;
    min-height: 0;

    display: grid;
    grid-template-rows:
        auto
        auto
        minmax(160px, 1fr)
        auto
        auto
        auto;

    overflow: hidden;

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


.zb-order-header {
    min-height: 68px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 14px 18px;

    border-bottom:
        1px solid var(--zb-border);
}


.zb-order-title {
    margin: 3px 0 0;

    color: var(--zb-text);

    font-size: 20px;
    font-weight: 650;
    letter-spacing: -.03em;
}


.zb-order-close {
    width: 40px;
    height: 40px;

    border:
        1px solid var(--zb-border);

    border-radius: 13px;

    background:
        rgba(255,255,255,.03);

    color: var(--zb-text-soft);

    font-size: 21px;
    cursor: pointer;
}


.zb-order-tools {
    display: grid;
    gap: 9px;

    padding: 12px 16px;

    border-bottom:
        1px solid rgba(255,255,255,.04);
}


.zb-order-products {
    min-height: 0;

    padding: 14px 16px;

    overflow-y: auto;
}


.zb-order-draft {
    margin: 0 16px 10px;

    padding: 11px 13px;

    border:
        1px solid rgba(65,169,237,.15);

    border-radius:
        var(--zb-radius-md);

    background:
        rgba(10,102,169,.055);
}


.zb-order-draft-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding-bottom: 7px;
}


.zb-order-draft-head > div {
    display: grid;
    gap: 3px;
}


.zb-order-draft-head strong {
    font-size: 11px;
}


.zb-order-total {
    font-size: 17px !important;
}


.zb-order-lines {
    max-height: 105px;

    display: grid;
    gap: 5px;

    overflow-y: auto;

    padding-top: 7px;

    border-top:
        1px solid rgba(255,255,255,.05);
}


.zb-order-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    color: var(--zb-text-soft);

    font-size: 10px;
}


.zb-order-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;

    padding: 11px 16px;

    border-top:
        1px solid var(--zb-border);

    background:
        rgba(5,8,10,.30);
}


/* Mesero / teléfono */

@media (max-width: 700px) {

    .zb-order-component {
        height: 100%;
    }


    .zb-order-header {
        min-height: 62px;
        padding: 10px 12px;
    }


    .zb-order-tools {
        padding: 9px 10px;
    }


    .zb-order-products {
        padding: 9px 10px 110px;
    }


    .zb-order-draft {
        margin: 0 10px 7px;
    }


    .zb-order-footer {
        position: sticky;
        bottom: 0;

        padding: 9px 10px;

        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }


    .zb-order-footer .zb-ui-button {
        flex: 1 1 0;
    }

}



/* ==========================================================
   ZERO_BAR_OPERATION_SHARED_ORDER_CSS_V07_S02
   ========================================================== */

.zb-operation-shared-order {
    width: 100%;
    min-height: 0;
    height: 100%;
}


.zb-operation-shared-order[hidden] {
    display: none !important;
}



/* ==========================================================
   ZERO BAR · PRODUCTS + INVENTORY · V0.7 P1
   ========================================================== */

.zb-inventory-page{
    min-height:100vh;
    padding:clamp(22px,4vw,56px);
    max-width:1500px;
    margin:0 auto;
}

.zb-inventory-hero{
    display:flex;
    justify-content:space-between;
    gap:28px;
    align-items:flex-end;
    margin-bottom:30px;
}

.zb-inventory-hero h1{
    margin:7px 0 6px;
    font-size:clamp(30px,4vw,52px);
    letter-spacing:-.045em;
}

.zb-inventory-hero p{
    margin:0;
    opacity:.58;
    max-width:620px;
}

.zb-inventory-hero-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.zb-inventory-summary{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin-bottom:18px;
}

.zb-inventory-summary article{
    padding:18px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018)
        );
    backdrop-filter:blur(20px);
}

.zb-inventory-summary span{
    display:block;
    font-size:10px;
    font-weight:800;
    letter-spacing:.14em;
    opacity:.45;
    margin-bottom:8px;
}

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

.zb-inventory-toolbar{
    display:grid;
    grid-template-columns:minmax(240px,1fr) 230px auto;
    gap:10px;
    margin-bottom:18px;
}

.zb-inventory-toolbar input,
.zb-inventory-toolbar select,
.zb-product-fields input,
.zb-product-fields select,
.zb-product-fields textarea,
.zb-stock-actions input{
    width:100%;
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,.09);
    background:rgba(255,255,255,.035);
    color:inherit;
    border-radius:14px;
    padding:13px 14px;
    outline:none;
}

.zb-product-admin-grid{
    display:grid;
    grid-template-columns:
        repeat(auto-fill,minmax(260px,1fr));
    gap:14px;
}

.zb-product-admin-card{
    overflow:hidden;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.08);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.022)
        );
    box-shadow:
        0 24px 60px rgba(0,0,0,.18);
}

.zb-product-admin-card.is-inactive{
    opacity:.52;
}

.zb-product-admin-photo{
    height:180px;
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(62,180,255,.13),
            transparent 55%
        ),
        rgba(255,255,255,.02);
}

.zb-product-admin-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.zb-product-admin-letter{
    height:100%;
    display:grid;
    place-items:center;
    font-size:56px;
    font-weight:700;
    opacity:.15;
}

.zb-product-off{
    position:absolute;
    top:12px;
    right:12px;
    border-radius:999px;
    padding:6px 9px;
    background:rgba(0,0,0,.7);
    font-size:9px;
    letter-spacing:.12em;
    font-weight:800;
}

.zb-product-admin-body{
    padding:16px;
}

.zb-product-admin-heading{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-bottom:16px;
}

.zb-product-admin-heading span{
    font-size:11px;
    opacity:.45;
}

.zb-product-admin-heading h3{
    margin:4px 0 0;
    font-size:18px;
}

.zb-product-admin-heading strong{
    white-space:nowrap;
}

.zb-stock-mini{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:15px;
}

.zb-stock-mini div{
    padding:11px;
    border-radius:14px;
    background:rgba(255,255,255,.035);
}

.zb-stock-mini span{
    display:block;
    font-size:9px;
    letter-spacing:.11em;
    opacity:.42;
    margin-bottom:5px;
}

.zb-stock-mini.is-low div:last-child{
    border:1px solid rgba(255,190,65,.26);
}

.zb-no-stock-control{
    min-height:50px;
    display:flex;
    align-items:center;
    opacity:.4;
    font-size:12px;
    margin-bottom:15px;
}

.zb-product-admin-body footer{
    display:flex;
    gap:8px;
}

.zb-product-admin-body footer .zb-btn{
    flex:1;
}

.zb-inventory-loading,
.zb-inventory-empty{
    grid-column:1/-1;
    min-height:260px;
    display:grid;
    place-items:center;
    opacity:.45;
}

.zb-product-editor,
.zb-stock-editor{
    position:relative;
    z-index:2;
    width:min(820px,calc(100vw - 30px));
    max-height:calc(100vh - 30px);
    overflow:auto;
    border-radius:26px;
    border:1px solid rgba(255,255,255,.1);
    background:rgba(14,20,26,.96);
    box-shadow:0 40px 120px rgba(0,0,0,.55);
}

.zb-stock-editor{
    width:min(520px,calc(100vw - 30px));
}

.zb-product-editor > header,
.zb-stock-editor > header{
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center;
    padding:20px 22px;
    border-bottom:1px solid rgba(255,255,255,.07);
}

.zb-product-editor h2,
.zb-stock-editor h2{
    margin:4px 0 0;
}

.zb-product-editor-layout{
    display:grid;
    grid-template-columns:260px 1fr;
    gap:20px;
    padding:22px;
}

.zb-product-photo-picker{
    height:330px;
    overflow:hidden;
    border-radius:22px;
    border:1px dashed rgba(255,255,255,.14);
    background:rgba(255,255,255,.025);
    cursor:pointer;
}

.zb-product-photo-picker img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.zb-photo-placeholder{
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    opacity:.45;
}

.zb-photo-placeholder span{
    font-size:12px;
}

.zb-product-fields{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.zb-product-fields label{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.zb-product-fields label > span,
.zb-stock-actions label > span{
    font-size:11px;
    opacity:.55;
}

.zb-product-fields label:nth-last-child(2){
    grid-column:1/-1;
}

.zb-switch-line{
    flex-direction:row!important;
    align-items:center;
}

.zb-switch-line input{
    width:auto!important;
}

.zb-product-editor form > footer{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    padding:18px 22px;
    border-top:1px solid rgba(255,255,255,.07);
}

.zb-stock-balance{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:22px;
}

.zb-stock-balance article{
    border-radius:18px;
    background:rgba(255,255,255,.035);
    padding:18px;
}

.zb-stock-balance span{
    display:block;
    font-size:10px;
    letter-spacing:.12em;
    opacity:.45;
    margin-bottom:8px;
}

.zb-stock-balance strong{
    font-size:28px;
}

.zb-stock-actions{
    padding:0 22px 24px;
    display:grid;
    gap:10px;
}

.zb-stock-actions label{
    display:grid;
    gap:7px;
}

.zb-stock-divider{
    height:1px;
    background:rgba(255,255,255,.07);
    margin:10px 0;
}

@media(max-width:760px){

    .zb-inventory-page{
        padding:18px 14px 90px;
    }

    .zb-inventory-hero{
        align-items:stretch;
        flex-direction:column;
    }

    .zb-inventory-hero-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .zb-inventory-summary{
        grid-template-columns:1fr 1fr;
    }

    .zb-inventory-toolbar{
        grid-template-columns:1fr;
    }

    .zb-product-admin-grid{
        grid-template-columns:1fr 1fr;
        gap:10px;
    }

    .zb-product-admin-photo{
        height:130px;
    }

    .zb-product-admin-body{
        padding:12px;
    }

    .zb-product-admin-heading{
        display:block;
    }

    .zb-product-admin-heading strong{
        display:block;
        margin-top:8px;
    }

    .zb-product-editor-layout{
        grid-template-columns:1fr;
    }

    .zb-product-photo-picker{
        height:230px;
    }

    .zb-product-fields{
        grid-template-columns:1fr;
    }

    .zb-product-fields label:nth-last-child(2){
        grid-column:auto;
    }
}


/* ==========================================================
   ZERO BAR · PRODUCTS UI R1
   MODALES FLOTANTES CENTRADOS
   ========================================================== */

#zbProductModal,
#zbStockModal {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;

    z-index: 10000 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 20px !important;
    box-sizing: border-box !important;

    overflow: hidden !important;

    background: transparent !important;
}


/*
 * El atributo hidden siempre debe ganar.
 * Evita que display:flex haga visibles los
 * modales cuando deberían estar cerrados.
 */

#zbProductModal[hidden],
#zbStockModal[hidden] {
    display: none !important;
}


/* Fondo detrás del modal */

#zbProductModal .zb-modal-backdrop,
#zbStockModal .zb-modal-backdrop {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    background:
        rgba(2, 7, 11, .72) !important;

    backdrop-filter:
        blur(12px)
        saturate(.75) !important;

    -webkit-backdrop-filter:
        blur(12px)
        saturate(.75) !important;
}


/* Ventana */

#zbProductModal .zb-product-editor,
#zbStockModal .zb-stock-editor {
    position: relative !important;

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

    margin: 0 !important;

    z-index: 2 !important;

    max-height:
        calc(100dvh - 40px) !important;

    overflow-y: auto !important;

    overscroll-behavior:
        contain;

    animation:
        zbProductModalIn
        .18s
        cubic-bezier(.2,.8,.2,1);
}


#zbProductModal .zb-product-editor {
    width:
        min(
            820px,
            calc(100vw - 40px)
        ) !important;
}


#zbStockModal .zb-stock-editor {
    width:
        min(
            520px,
            calc(100vw - 40px)
        ) !important;
}


/* Entrada sutil Zero Bar */

@keyframes zbProductModalIn {

    from {
        opacity: 0;
        transform:
            translateY(12px)
            scale(.985);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}


/* Mobile */

@media (max-width: 600px) {

    #zbProductModal,
    #zbStockModal {
        padding: 10px !important;
        align-items: center !important;
    }


    #zbProductModal .zb-product-editor,
    #zbStockModal .zb-stock-editor {
        width:
            calc(100vw - 20px) !important;

        max-height:
            calc(100dvh - 20px) !important;

        border-radius:
            22px !important;
    }

}