/* ==========================================================
   ZERO BAR · V0.7 · VISUAL TEST 01
   Identidad hospitality / nightlife
   Mesero · Caja · Admin
   ========================================================== */


/* ==========================================================
   1. FUNDACIÓN
   ========================================================== */

:root {

    --zbf-bg:
        #05080b;

    --zbf-bg-2:
        #080d12;

    --zbf-glass:
        rgba(14, 21, 28, .76);

    --zbf-glass-strong:
        rgba(12, 19, 26, .94);

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

    --zbf-line-strong:
        rgba(255,255,255,.13);

    --zbf-blue:
        #168bd0;

    --zbf-blue-soft:
        rgba(22,139,208,.13);

    --zbf-blue-glow:
        rgba(31,160,236,.25);

    --zbf-text:
        rgba(246,250,252,.96);

    --zbf-soft:
        rgba(224,234,240,.61);

    --zbf-muted:
        rgba(211,225,233,.34);

    --zbf-success:
        #66c09d;

    --zbf-warning:
        #d7aa62;

    --zbf-radius:
        22px;

    --zbf-radius-small:
        14px;

    --zbf-shadow:
        0 28px 90px rgba(0,0,0,.38);
}


html {
    background:
        var(--zbf-bg);
}


body {

    min-height: 100dvh;

    color:
        var(--zbf-text);

    background:
        radial-gradient(
            circle at 17% -15%,
            rgba(16,103,158,.15),
            transparent 35%
        ),
        radial-gradient(
            circle at 100% 85%,
            rgba(18,84,124,.08),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #05080b,
            #070b0f 55%,
            #05080b
        ) !important;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing:
        antialiased;
}


body::before {

    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    z-index: -1;

    opacity: .3;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,.013),
            transparent
        );
}


/* Scrollbars */

* {
    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(255,255,255,.12)
        transparent;
}


*::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}


*::-webkit-scrollbar-thumb {
    border-radius: 99px;

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


/* ==========================================================
   2. NAVEGACIÓN GLOBAL
   ========================================================== */

.zbf-role-nav {

    position: fixed;

    left: 50%;
    bottom: 18px;

    transform:
        translateX(-50%);

    z-index: 700;

    display: flex;
    align-items: center;

    gap: 4px;

    padding: 5px;

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

    border-radius:
        18px;

    background:
        rgba(8,13,18,.78);

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

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

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


.zbf-role-nav a {

    min-width: 84px;
    height: 42px;

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

    gap: 7px;

    padding: 0 13px;

    border-radius:
        13px;

    color:
        rgba(229,237,242,.50);

    text-decoration: none;

    font-size: 11px;
    font-weight: 600;

    transition:
        .15s ease;
}


.zbf-role-nav a:hover {

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

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


.zbf-role-nav a.active {

    color:
        white;

    background:
        linear-gradient(
            180deg,
            rgba(21,139,208,.92),
            rgba(8,83,133,.94)
        );

    box-shadow:
        0 7px 24px
        rgba(13,112,174,.22);
}


.zbf-role-dot {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        currentColor;

    opacity: .8;
}


/* ==========================================================
   3. BOTONES COMPARTIDOS
   ========================================================== */

.zb-btn,
.op-admin-link,
.zb-ui-button {

    box-sizing:
        border-box;

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

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

    color:
        rgba(238,246,250,.77) !important;

    box-shadow:
        none !important;

    text-decoration:
        none;

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


.zb-btn:hover,
.op-admin-link:hover,
.zb-ui-button:hover {

    border-color:
        rgba(255,255,255,.14) !important;

    background:
        rgba(255,255,255,.06) !important;
}


.zb-btn:active,
.op-admin-link:active,
.zb-ui-button:active {

    transform:
        scale(.985);
}


.zb-btn-primary,
.zb-ui-button.primary {

    border-color:
        rgba(68,184,251,.28) !important;

    background:
        linear-gradient(
            180deg,
            rgba(20,142,214,.94),
            rgba(8,87,140,.96)
        ) !important;

    color:
        white !important;

    box-shadow:
        0 9px 30px
        rgba(12,112,174,.18) !important;
}


/* ==========================================================
   4. OPERACIÓN / MESERO
   ========================================================== */

body.zbf-operation {

    padding-bottom:
        72px;
}


/* Header */

body.zbf-operation .op-header {

    position: relative;

    margin:
        18px 22px 10px;

    padding:
        20px 22px;

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

    border-radius:
        24px;

    background:
        linear-gradient(
            135deg,
            rgba(15,24,31,.76),
            rgba(6,10,14,.64)
        );

    box-shadow:
        0 20px 70px
        rgba(0,0,0,.22);

    backdrop-filter:
        blur(25px);

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


body.zbf-operation .op-header h1 {

    font-size:
        clamp(28px,3vw,44px);

    letter-spacing:
        -.045em;

    margin-bottom:
        4px;
}


/* Toolbar */

body.zbf-operation .op-plan-toolbar {

    margin:
        0 22px 10px;

    padding:
        10px 14px;

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

    border-radius:
        18px;

    background:
        rgba(8,13,18,.54);

    backdrop-filter:
        blur(18px);
}


/* Plano */

body.zbf-operation .op-stage {

    position:
        relative;

    overflow:
        hidden;

    margin:
        0 22px 24px;

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

    border-radius:
        30px;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(24,76,107,.11),
            transparent 50%
        ),
        linear-gradient(
            145deg,
            rgba(10,16,21,.96),
            rgba(4,7,10,.98)
        ) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.025),
        0 26px 90px
        rgba(0,0,0,.28);
}


body.zbf-operation .op-grid {

    opacity:
        .14 !important;
}


/* Mesas reales */

body.zbf-operation .op-table {

    position:
        absolute;

    overflow:
        visible;

    border:
        1px solid
        rgba(255,255,255,.12) !important;

    background:
        linear-gradient(
            145deg,
            rgba(38,48,56,.95),
            rgba(16,22,28,.98)
        ) !important;

    color:
        rgba(245,249,252,.84);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.08),
        inset 0 -8px 18px
        rgba(0,0,0,.14),
        0 13px 28px
        rgba(0,0,0,.28) !important;

    transition:
        border-color .16s ease,
        filter .16s ease,
        box-shadow .16s ease;
}


body.zbf-operation .op-table:hover {

    filter:
        brightness(1.10);

    border-color:
        rgba(255,255,255,.20) !important;
}


body.zbf-operation .op-table::before {

    content: "";

    position:
        absolute;

    inset:
        7px;

    pointer-events:
        none;

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

    border-radius:
        inherit;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.025),
            rgba(0,0,0,.04)
        );
}


body.zbf-operation .op-table strong {

    position:
        relative;

    z-index:
        2;

    font-size:
        12px;

    letter-spacing:
        -.02em;
}


body.zbf-operation .op-table-status {

    position:
        relative;

    z-index:
        2;

    margin-top:
        3px;

    font-size:
        8px !important;

    color:
        rgba(255,255,255,.38) !important;
}


/* Mesa libre */

body.zbf-operation .op-table.free {

    opacity:
        .78;
}


/* Mesa con movimiento */

body.zbf-operation .op-table.occupied {

    border-color:
        rgba(56,171,239,.34) !important;

    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(34,150,220,.14),
            transparent 55%
        ),
        linear-gradient(
            145deg,
            rgba(20,63,88,.96),
            rgba(8,27,39,.98)
        ) !important;

    box-shadow:
        inset 0 1px 0
        rgba(144,216,255,.09),
        0 0 0 1px
        rgba(30,146,211,.04),
        0 14px 35px
        rgba(0,0,0,.31) !important;
}


/*
 * Señal de actividad:
 * vaso + botella + plato abstractos
 */

body.zbf-operation
.op-table.occupied::after {

    content: "";

    position:
        absolute;

    z-index:
        3;

    right:
        13px;

    top:
        11px;

    width:
        28px;

    height:
        22px;

    pointer-events:
        none;

    opacity:
        .72;

    background:
        radial-gradient(
            circle at 5px 14px,
            rgba(138,211,250,.95)
            0 2px,
            transparent 3px
        ),
        radial-gradient(
            ellipse at 17px 15px,
            rgba(255,255,255,.46)
            0 4px,
            transparent 5px
        ),
        linear-gradient(
            90deg,
            transparent 21px,
            rgba(111,197,241,.70)
            21px 24px,
            transparent 24px
        );
}


/* Barra */

body.zbf-operation .op-table-bar {

    border-radius:
        16px !important;

    background:
        linear-gradient(
            180deg,
            rgba(42,48,53,.97),
            rgba(14,20,25,.98)
        ) !important;

    box-shadow:
        inset 0 2px 0
        rgba(255,255,255,.07),
        inset 0 -10px 20px
        rgba(0,0,0,.18),
        0 13px 30px
        rgba(0,0,0,.29) !important;
}


body.zbf-operation
.op-table-bar.occupied {

    border-color:
        rgba(55,172,239,.34) !important;

    background:
        linear-gradient(
            180deg,
            rgba(20,73,102,.97),
            rgba(8,29,41,.98)
        ) !important;
}


/* Elementos físicos */

body.zbf-operation .op-element-wall {

    opacity:
        .38;

    background:
        rgba(255,255,255,.16) !important;
}


body.zbf-operation .op-element-door {

    opacity:
        .48;
}


body.zbf-operation .op-element-label {

    color:
        rgba(255,255,255,.26) !important;
}


/* Drawer Mesero */

body.zbf-operation .op-drawer {

    width:
        min(450px,100%) !important;

    border-left:
        1px solid
        rgba(255,255,255,.085) !important;

    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(17,112,168,.12),
            transparent 31%
        ),
        rgba(8,13,18,.95) !important;

    box-shadow:
        -28px 0 80px
        rgba(0,0,0,.43);

    backdrop-filter:
        blur(30px)
        saturate(125%);

    -webkit-backdrop-filter:
        blur(30px)
        saturate(125%);
}


body.zbf-operation
.op-drawer-backdrop {

    background:
        rgba(0,3,6,.56) !important;

    backdrop-filter:
        blur(7px) !important;

    -webkit-backdrop-filter:
        blur(7px) !important;
}


/* Cuenta Mesero */

body.zbf-operation .op-account-card {

    min-height:
        64px;

    border:
        1px solid
        rgba(255,255,255,.075) !important;

    border-radius:
        16px !important;

    background:
        rgba(255,255,255,.028) !important;

    transition:
        .15s ease;
}


body.zbf-operation .op-account-card:hover {

    border-color:
        rgba(80,181,242,.18) !important;

    background:
        rgba(23,113,168,.07) !important;
}


body.zbf-operation
.op-account-card-shared {

    border-color:
        rgba(66,178,244,.16) !important;

    background:
        rgba(19,104,157,.07) !important;
}


body.zbf-operation .op-account-summary {

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

    border-radius:
        18px;

    padding:
        15px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.018)
        );
}


/* Acciones cuenta */

body.zbf-operation .op-account-actions {

    position:
        sticky;

    bottom:
        0;

    z-index:
        4;

    padding-top:
        12px;

    background:
        linear-gradient(
            transparent,
            rgba(8,13,18,.96)
            27%
        );
}


/* ==========================================================
   5. CATÁLOGO COMPARTIDO
   ========================================================== */

.zb-catalog-shell,
.zb-order-component {

    background:
        radial-gradient(
            circle at 50% -20%,
            rgba(22,131,194,.12),
            transparent 38%
        ),
        rgba(10,16,21,.97) !important;
}


.zb-ui-product {

    overflow:
        hidden;

    border:
        1px solid
        rgba(255,255,255,.075) !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.038),
            rgba(255,255,255,.018)
        ) !important;

    box-shadow:
        0 12px 28px
        rgba(0,0,0,.13);

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


.zb-ui-product:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(255,255,255,.15) !important;
}


.zb-ui-product.selected {

    border-color:
        rgba(57,175,243,.38) !important;

    box-shadow:
        0 0 0 1px
        rgba(30,141,205,.07),
        0 13px 28px
        rgba(0,0,0,.18);
}


.zb-ui-product-media {

    background:
        radial-gradient(
            circle at 50% 65%,
            rgba(21,105,157,.14),
            transparent 55%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.025),
            rgba(0,0,0,.12)
        ) !important;
}


.zb-ui-product-media img {

    object-fit:
        cover;

    transition:
        transform .25s ease;
}


.zb-ui-product:hover
.zb-ui-product-media img {

    transform:
        scale(1.025);
}


.zb-ui-product-placeholder {

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

    background:
        rgba(255,255,255,.022) !important;

    color:
        rgba(255,255,255,.20) !important;
}


/* ==========================================================
   6. CAJA
   ========================================================== */

body.zbf-caja {

    padding-bottom:
        72px;
}


/* Mapa Caja */

body.zbf-caja
.zb-caja-map-main {

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(22,96,137,.08),
            transparent 48%
        );
}


body.zbf-caja
.zb-caja-map-table {

    overflow:
        visible;

    border:
        1px solid
        rgba(255,255,255,.12) !important;

    background:
        linear-gradient(
            145deg,
            rgba(37,46,54,.95),
            rgba(14,19,24,.97)
        ) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.065),
        inset 0 -7px 15px
        rgba(0,0,0,.13),
        0 12px 28px
        rgba(0,0,0,.27) !important;
}


body.zbf-caja
.zb-caja-map-table.open {

    border-color:
        rgba(55,171,239,.34) !important;

    background:
        radial-gradient(
            circle at 50% 18%,
            rgba(39,157,224,.15),
            transparent 58%
        ),
        linear-gradient(
            145deg,
            rgba(20,64,90,.95),
            rgba(8,28,40,.97)
        ) !important;
}


body.zbf-caja
.zb-caja-map-table.warning {

    border-color:
        rgba(220,172,90,.33) !important;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(202,151,60,.10),
            transparent 58%
        ),
        linear-gradient(
            145deg,
            rgba(66,49,24,.93),
            rgba(24,19,12,.97)
        ) !important;
}


/* Actividad visual Caja */

body.zbf-caja
.zb-caja-map-table.open::after,
body.zbf-caja
.zb-caja-map-table.warning::after {

    content: "";

    position:
        absolute;

    top:
        8px;

    right:
        9px;

    width:
        24px;

    height:
        18px;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle at 4px 12px,
            rgba(142,217,255,.88)
            0 2px,
            transparent 3px
        ),
        radial-gradient(
            ellipse at 14px 12px,
            rgba(255,255,255,.43)
            0 4px,
            transparent 5px
        );

    opacity:
        .72;
}


/* Drawer Caja */

body.zbf-caja
.zb-caja-drawer {

    border-left:
        1px solid
        rgba(255,255,255,.085) !important;

    background:
        radial-gradient(
            circle at 85% 0%,
            rgba(18,111,167,.12),
            transparent 30%
        ),
        rgba(8,13,18,.965) !important;

    box-shadow:
        -28px 0 90px
        rgba(0,0,0,.42);

    backdrop-filter:
        blur(30px);

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


body.zbf-caja
.zb-caja-drawer-backdrop {

    background:
        rgba(0,3,6,.56) !important;

    backdrop-filter:
        blur(7px);

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


body.zbf-caja
.zb-caja-detail-totals > div {

    border:
        1px solid
        rgba(255,255,255,.075) !important;

    border-radius:
        16px !important;

    background:
        rgba(255,255,255,.027) !important;
}


body.zbf-caja
.zb-caja-detail-totals
.pending {

    border-color:
        rgba(48,166,234,.22) !important;

    background:
        rgba(17,107,161,.065) !important;
}


body.zbf-caja
.zb-caja-detail-line {

    border-color:
        rgba(255,255,255,.06) !important;
}


/* Botones footer Caja */

body.zbf-caja
.zb-caja-detail-footer {

    position:
        sticky;

    bottom:
        0;

    z-index:
        4;

    margin-top:
        12px;

    padding-top:
        16px !important;

    background:
        linear-gradient(
            transparent,
            rgba(8,13,18,.98) 30%
        );
}


/* ==========================================================
   7. PRODUCTOS / INVENTARIO
   ========================================================== */

body.zbf-products {

    padding-bottom:
        80px;
}


body.zbf-products
.zb-inventory-page {

    max-width:
        1440px;
}


body.zbf-products
.zb-inventory-summary article {

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

    background:
        linear-gradient(
            145deg,
            rgba(20,42,55,.54),
            rgba(12,17,22,.66)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.025);
}


body.zbf-products
.zb-product-admin-card {

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

    background:
        linear-gradient(
            145deg,
            rgba(17,25,31,.93),
            rgba(8,12,16,.95)
        );

    box-shadow:
        0 16px 38px
        rgba(0,0,0,.19);

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


body.zbf-products
.zb-product-admin-card:hover {

    transform:
        translateY(-2px);

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


body.zbf-products
.zb-product-admin-photo {

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(21,109,164,.13),
            transparent 55%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.025),
            rgba(0,0,0,.08)
        );
}


/*
 * Importantísimo:
 * elimina botones blancos que venían
 * heredados del CSS viejo.
 */

body.zbf-products
.zb-product-admin-body
.zb-btn,

body.zbf-products
.zb-inventory-toolbar
.zb-btn {

    min-height:
        43px;

    border:
        1px solid
        rgba(255,255,255,.095) !important;

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

    color:
        rgba(238,246,250,.74) !important;
}


body.zbf-products
.zb-product-admin-body
.zb-btn:hover {

    border-color:
        rgba(58,177,242,.20) !important;

    background:
        rgba(15,104,158,.075) !important;

    color:
        rgba(165,222,255,.94) !important;
}


/* ==========================================================
   8. MODALES
   ========================================================== */

.zb-product-editor,
.zb-stock-editor {

    border:
        1px solid
        rgba(255,255,255,.10) !important;

    background:
        radial-gradient(
            circle at 75% -10%,
            rgba(17,114,171,.12),
            transparent 34%
        ),
        rgba(9,15,20,.97) !important;

    box-shadow:
        0 40px 120px
        rgba(0,0,0,.58) !important;
}


/* ==========================================================
   9. MÓVIL / MESERO REAL
   ========================================================== */

@media (max-width: 700px) {

    .zbf-role-nav {

        left:
            8px;

        right:
            8px;

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

        width:
            auto;

        transform:
            none;

        justify-content:
            stretch;

        border-radius:
            18px;
    }


    .zbf-role-nav a {

        flex:
            1 1 0;

        min-width:
            0;

        height:
            48px;

        padding:
            0 7px;
    }


    body.zbf-operation {

        padding-bottom:
            76px;
    }


    body.zbf-operation
    .op-header {

        margin:
            8px;

        padding:
            14px;

        border-radius:
            20px;
    }


    body.zbf-operation
    .op-header h1 {

        font-size:
            27px;
    }


    body.zbf-operation
    .op-plan-toolbar {

        margin:
            0 8px 8px;

        border-radius:
            16px;
    }


    body.zbf-operation
    .op-stage {

        margin:
            0 8px 10px;

        border-radius:
            22px;
    }


    /*
     * Drawer Mesero pasa a ser
     * prácticamente una pantalla de app.
     */

    body.zbf-operation
    .op-drawer {

        width:
            100% !important;

        max-width:
            none !important;

        padding:
            max(
                15px,
                env(safe-area-inset-top)
            )
            13px
            calc(
                78px
                + env(safe-area-inset-bottom)
            ) !important;

        border-left:
            0 !important;
    }


    body.zbf-caja
    .zb-caja-drawer {

        width:
            100% !important;

        max-width:
            none !important;

        padding-bottom:
            calc(
                76px
                + env(safe-area-inset-bottom)
            );
    }


    .zb-ui-product-grid {

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


    .zb-ui-product-media {

        aspect-ratio:
            1.12 / 1;
    }


    .zb-ui-product-body {

        padding:
            10px;
    }


    body.zbf-products
    .zb-product-admin-grid {

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

}


@media (max-width: 390px) {

    .zbf-role-nav a {

        font-size:
            10px;
    }


    .zbf-role-nav
    .zbf-role-dot {

        display:
            none;
    }

}