/*
 * ==========================================================
 * ZERO BAR · V0.9 · PILOTO REAL
 * Responsive real + mobiliario top-view compartido
 * ==========================================================
 */

:root {
    --zb-v09-bg:
        #071016;

    --zb-v09-panel:
        rgba(13, 23, 30, .84);

    --zb-v09-panel-solid:
        #0d171e;

    --zb-v09-line:
        rgba(255,255,255,.09);

    --zb-v09-line-strong:
        rgba(255,255,255,.16);

    --zb-v09-blue:
        #45b9f2;

    --zb-v09-blue-soft:
        rgba(69,185,242,.18);

    --zb-v09-text:
        #f4f8fb;

    --zb-v09-muted:
        rgba(229,239,245,.55);

    --zb-v09-radius:
        22px;

    --zb-v09-touch:
        48px;
}


/* ----------------------------------------------------------
   BASE RESPONSIVE
   ---------------------------------------------------------- */

html,
body {
    min-width:
        0 !important;

    max-width:
        100%;

    overflow-x:
        hidden;
}


body.zb-v09-ready {
    background:
        radial-gradient(
            circle at 50% -20%,
            rgba(28,101,139,.14),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #081117,
            #050b0f 78%
        );
}


body.zb-v09-ready button,
body.zb-v09-ready input,
body.zb-v09-ready select {
    min-height:
        var(--zb-v09-touch);
}


body.zb-v09-ready button {
    touch-action:
        manipulation;
}


body.zb-v09-ready input,
body.zb-v09-ready select,
body.zb-v09-ready textarea {
    font-size:
        16px;
}


/* ----------------------------------------------------------
   SUPERFICIE DE SALÓN
   ---------------------------------------------------------- */

body.zb-v09-ready .op-stage,
body.zb-v09-ready .zb-plan-stage,
body.zb-v09-ready .zb-caja-map-stage {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        radial-gradient(
            circle at 50% 0%,
            rgba(62,94,109,.10),
            transparent 50%
        ),
        linear-gradient(
            145deg,
            #121a1f,
            #0a1116
        ) !important;

    background-size:
        42px 42px,
        42px 42px,
        auto,
        auto !important;
}


/* ----------------------------------------------------------
   HOST DEL MUEBLE
   ---------------------------------------------------------- */

.zb-furniture-host {
    isolation:
        isolate;

    overflow:
        visible !important;
}


.zb-furniture {
    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    display:
        block;

    pointer-events:
        none;
}


.zb-furniture-host > strong,
.zb-furniture-host > .op-table-status,
.zb-furniture-host > .zb-table-name,
.zb-furniture-host > .zb-table-capacity {
    position:
        relative;

    z-index:
        5;
}


/* ----------------------------------------------------------
   MESA TOP VIEW
   ---------------------------------------------------------- */

body.zb-v09-ready .op-table:not(.op-table-bar),
body.zb-v09-ready .zb-plan-table:not(.zb-operational-bar),
body.zb-v09-ready .zb-caja-map-table:not(.zb-operational-bar) {
    border:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}


.zb-furniture-table .zb-furniture-top,
.zb-furniture-round .zb-furniture-top {
    position:
        absolute;

    inset:
        17% 15%;

    overflow:
        hidden;

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

    border-radius:
        18px;

    background:
        linear-gradient(
            135deg,
            rgba(92,76,63,.98),
            rgba(47,42,38,.99) 58%,
            rgba(28,29,29,.99)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.13),
        inset 0 -8px 16px
        rgba(0,0,0,.25),
        0 9px 16px
        rgba(0,0,0,.28);
}


.zb-furniture-round .zb-furniture-top {
    inset:
        15%;

    border-radius:
        50%;
}


.zb-table-grain {
    position:
        absolute;

    inset:
        0;

    opacity:
        .23;

    background:
        repeating-linear-gradient(
            8deg,
            transparent 0 8px,
            rgba(255,255,255,.06) 9px,
            transparent 10px 17px
        );
}


.zb-table-reflection {
    position:
        absolute;

    left:
        10%;

    top:
        9%;

    width:
        54%;

    height:
        30%;

    border-radius:
        50%;

    background:
        radial-gradient(
            ellipse,
            rgba(255,255,255,.11),
            transparent 70%
        );

    transform:
        rotate(-10deg);
}


/* ----------------------------------------------------------
   SILLAS TOP VIEW
   ---------------------------------------------------------- */

.zb-furniture-chair {
    position:
        absolute;

    z-index:
        -1;

    width:
        22%;

    height:
        25%;

    min-width:
        18px;

    min-height:
        18px;

    max-width:
        34px;

    max-height:
        34px;
}


.zb-furniture-chair span {
    position:
        absolute;

    inset:
        18%;

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

    border-radius:
        7px;

    background:
        linear-gradient(
            145deg,
            #37434a,
            #1b252b
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.10),
        0 5px 8px
        rgba(0,0,0,.34);
}


.zb-chair-top {
    left:
        39%;

    top:
        -7%;
}


.zb-chair-bottom {
    left:
        39%;

    bottom:
        -7%;
}


.zb-chair-left {
    left:
        -6%;

    top:
        37%;
}


.zb-chair-right {
    right:
        -6%;

    top:
        37%;
}


.zb-chair-top-left {
    left:
        17%;

    top:
        -7%;
}


.zb-chair-top-right {
    right:
        17%;

    top:
        -7%;
}


.zb-chair-bottom-left {
    left:
        17%;

    bottom:
        -7%;
}


.zb-chair-bottom-right {
    right:
        17%;

    bottom:
        -7%;
}


/* ----------------------------------------------------------
   ESTADO OPERATIVO SOBRE EL MUEBLE
   ---------------------------------------------------------- */

body.zb-v09-ready
.op-table.free
.zb-furniture-top {
    filter:
        saturate(.72)
        brightness(.80);
}


body.zb-v09-ready
.op-table.occupied
.zb-furniture-top {
    border-color:
        rgba(76,190,246,.48);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.13),
        inset 0 -8px 16px
        rgba(0,0,0,.25),
        0 0 0 2px
        rgba(52,168,226,.10),
        0 0 24px
        rgba(40,156,218,.20),
        0 9px 16px
        rgba(0,0,0,.28);
}


body.zb-v09-ready
.op-table.occupied::after {
    right:
        24% !important;

    top:
        25% !important;

    opacity:
        .62 !important;
}


/* ----------------------------------------------------------
   BARRA REAL TOP VIEW
   ---------------------------------------------------------- */

body.zb-v09-ready .op-table-bar,
body.zb-v09-ready .zb-operational-bar {
    border:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}


.zb-furniture-bar {
    inset:
        4% 2%;
}


.zb-bar-counter {
    position:
        absolute;

    inset:
        10% 5% 26%;

    overflow:
        hidden;

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

    border-radius:
        16px;

    background:
        linear-gradient(
            180deg,
            #554a41,
            #302d2b 56%,
            #191d1f
        );

    box-shadow:
        inset 0 2px 0
        rgba(255,255,255,.10),
        inset 0 -12px 18px
        rgba(0,0,0,.28),
        0 10px 20px
        rgba(0,0,0,.32);
}


.zb-bar-highlight {
    position:
        absolute;

    left:
        4%;

    right:
        4%;

    top:
        8%;

    height:
        2px;

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


.zb-bar-service {
    position:
        absolute;

    right:
        8%;

    top:
        24%;

    width:
        24%;

    height:
        44%;

    border-radius:
        8px;

    border:
        1px solid
        rgba(121,211,250,.14);

    background:
        rgba(8,18,23,.40);
}


.zb-bar-stools {
    position:
        absolute;

    left:
        8%;

    right:
        8%;

    bottom:
        0;

    display:
        flex;

    justify-content:
        space-around;
}


.zb-bar-stools i {
    display:
        block;

    width:
        clamp(15px, 10%, 28px);

    aspect-ratio:
        1;

    border:
        2px solid
        rgba(116,132,141,.60);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            #303a40 0 46%,
            #172127 48% 100%
        );

    box-shadow:
        0 5px 8px
        rgba(0,0,0,.34);
}


body.zb-v09-ready
.op-table-bar.occupied
.zb-bar-counter {
    border-color:
        rgba(69,185,242,.44);

    box-shadow:
        inset 0 2px 0
        rgba(255,255,255,.10),
        0 0 24px
        rgba(38,159,218,.18),
        0 10px 20px
        rgba(0,0,0,.32);
}


/* ----------------------------------------------------------
   ELEMENTOS FÍSICOS
   ---------------------------------------------------------- */

.zb-v09-physical-element {
    box-shadow:
        none !important;
}


.zb-v09-physical-element[class*="wall"],
.zb-v09-physical-element[class*="pared"] {
    background:
        linear-gradient(
            180deg,
            #5b6469,
            #293137
        ) !important;

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

    box-shadow:
        0 6px 12px
        rgba(0,0,0,.30) !important;
}


.zb-v09-physical-element[class*="entrance"],
.zb-v09-physical-element[class*="entrada"] {
    border:
        1px dashed
        rgba(93,200,248,.35) !important;

    background:
        rgba(31,124,170,.10) !important;
}


/* ----------------------------------------------------------
   MESERO · TABLET / PC
   ---------------------------------------------------------- */

body.zbf-operation.zb-v09-ready .op-layout {
    gap:
        18px;
}


html[data-zb-device="tablet"]
body.zbf-operation .op-layout {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(330px, 38vw) !important;
}


html[data-zb-device="tablet"]
body.zbf-operation .op-drawer {
    width:
        100% !important;
}


/* ----------------------------------------------------------
   MESERO · TELÉFONO
   ---------------------------------------------------------- */

html[data-zb-device="phone"]
body.zbf-operation {
    padding-bottom:
        78px;
}


html[data-zb-device="phone"]
body.zbf-operation .op-layout {
    display:
        block !important;
}


html[data-zb-device="phone"]
body.zbf-operation .op-sidebar {
    display:
        flex !important;

    overflow-x:
        auto;

    gap:
        8px;

    width:
        100%;

    padding:
        8px 4px;

    scrollbar-width:
        none;
}


html[data-zb-device="phone"]
body.zbf-operation .op-sidebar::-webkit-scrollbar {
    display:
        none;
}


html[data-zb-device="phone"]
body.zbf-operation .op-stage-wrap {
    width:
        100%;

    min-height:
        calc(100dvh - 220px);

    overflow:
        auto;

    border-radius:
        18px;
}


html[data-zb-device="phone"]
body.zbf-operation .op-drawer {
    position:
        fixed !important;

    z-index:
        1200;

    left:
        0 !important;

    right:
        0 !important;

    bottom:
        0 !important;

    top:
        auto !important;

    width:
        100% !important;

    max-width:
        none !important;

    max-height:
        88dvh;

    overflow-y:
        auto;

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

    background:
        rgba(7,15,20,.97) !important;

    backdrop-filter:
        blur(24px);
}


html[data-zb-device="phone"]
body.zbf-operation .zb-ui-product-grid {
    grid-template-columns:
        repeat(2, minmax(0,1fr)) !important;
}


html[data-zb-device="phone"]
body.zbf-operation .zb-ui-product-card {
    min-height:
        170px;
}


/* ----------------------------------------------------------
   EDITOR RESPONSIVE
   ---------------------------------------------------------- */

html[data-zb-device="phone"]
body.zb-v09-ready .zb-editor-layout,
html[data-zb-device="tablet"]
body.zb-v09-ready .zb-editor-layout {
    grid-template-columns:
        1fr !important;
}


html[data-zb-device="phone"]
body.zb-v09-ready .zb-editor-sidebar {
    max-height:
        none !important;
}


/* ----------------------------------------------------------
   CAJA RESPONSIVE BASE
   La reconstrucción POS completa llega en Bloque 3.
   ---------------------------------------------------------- */

html[data-zb-device="phone"]
body.zb-v09-ready .zb-caja-shell,
html[data-zb-device="phone"]
body.zb-v09-ready .zb-caja-layout {
    grid-template-columns:
        1fr !important;
}


html[data-zb-device="tablet"]
body.zb-v09-ready .zb-caja-layout {
    grid-template-columns:
        minmax(0,1fr)
        minmax(330px,40%) !important;
}


/* ----------------------------------------------------------
   MODALES / DRAWERS GENERALES
   ---------------------------------------------------------- */

html[data-zb-device="phone"]
body.zb-v09-ready .zb-caja-modal-layer section,
html[data-zb-device="phone"]
body.zb-v09-ready #zbProductModal > *,
html[data-zb-device="phone"]
body.zb-v09-ready #zbStockModal > * {
    width:
        100% !important;

    max-width:
        none !important;

    max-height:
        92dvh !important;

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

    margin-top:
        auto !important;
}


/* ----------------------------------------------------------
   NAVEGACIÓN INFERIOR
   ---------------------------------------------------------- */

html[data-zb-device="phone"]
body.zb-v09-ready .zb-final-nav {
    left:
        10px !important;

    right:
        10px !important;

    bottom:
        max(
            10px,
            env(safe-area-inset-bottom)
        ) !important;

    transform:
        none !important;

    width:
        auto !important;

    justify-content:
        space-around;
}


html[data-zb-device="phone"]
body.zb-v09-ready .zb-final-nav a {
    min-width:
        0 !important;

    flex:
        1;

    padding-inline:
        8px !important;
}


/* ----------------------------------------------------------
   ACCESIBILIDAD TÁCTIL
   ---------------------------------------------------------- */

@media (pointer: coarse) {
    body.zb-v09-ready button,
    body.zb-v09-ready a,
    body.zb-v09-ready select {
        min-height:
            48px;
    }

    body.zb-v09-ready .op-table,
    body.zb-v09-ready .zb-caja-map-table {
        -webkit-tap-highlight-color:
            transparent;
    }
}


/* ==========================================================
   ZERO BAR · V0.9 · B2
   MESERO FINAL
   ========================================================== */


/* ---------- MAPA ---------- */

body.zbf-operation .op-plan-card {
    position:
        relative;
}


body.zbf-operation .op-viewport {
    position:
        relative;

    overscroll-behavior:
        contain;

    -webkit-overflow-scrolling:
        touch;
}


body.zbf-operation #zbWaiterStage {
    /*
     * Los objetos conservan sus coordenadas
     * reales. El zoom visual se aplica a cada
     * objeto para mantener scroll correcto.
     */

    --zb-map-zoom:
        1;
}


body.zbf-operation
#zbWaiterStage
> .op-grid {
    transform:
        scale(
            var(--zb-map-zoom)
        ) !important;

    width:
        1400px;

    height:
        900px;
}


body.zbf-operation
#zbWaiterStage
> .op-table,
body.zbf-operation
#zbWaiterStage
> .op-element {
    /*
     * La posición absoluta también debe
     * escalarse. CSS translate permite
     * hacerlo sin destruir la rotación
     * original guardada en inline style.
     */

    zoom:
        var(--zb-map-zoom);
}


/* Chrome soporta zoom y es el navegador
   objetivo actual del piloto. */


.zb-waiter-map-controls {
    position:
        absolute;

    z-index:
        30;

    right:
        20px;

    top:
        72px;

    display:
        flex;

    gap:
        6px;

    padding:
        6px;

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

    border-radius:
        16px;

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

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

    backdrop-filter:
        blur(18px);
}


.zb-waiter-map-controls button {
    min-width:
        44px;

    min-height:
        44px;

    padding:
        0 13px;

    border:
        0;

    border-radius:
        11px;

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

    color:
        rgba(245,250,253,.90);

    font-size:
        20px;

    font-weight:
        650;
}


.zb-waiter-map-controls
.zb-map-fit {
    min-width:
        82px;

    font-size:
        11px;

    letter-spacing:
        .02em;
}


/* ---------- SELECCIÓN ---------- */

body.zbf-operation
.op-table.zb-table-selected
.zb-furniture-top,
body.zbf-operation
.op-table.zb-table-selected
.zb-bar-counter {
    outline:
        2px solid
        rgba(93,205,255,.72);

    outline-offset:
        3px;

    box-shadow:
        0 0 0 5px
        rgba(42,169,230,.10),
        0 0 30px
        rgba(42,169,230,.25),
        0 12px 24px
        rgba(0,0,0,.30);
}


/* ---------- CUENTAS ---------- */

body.zbf-operation .op-drawer-content {
    padding-bottom:
        max(
            28px,
            env(safe-area-inset-bottom)
        );
}


body.zbf-operation .op-account-card {
    min-height:
        72px;

    padding:
        14px 15px !important;
}


body.zbf-operation
#opSharedAction,
body.zbf-operation
#opOpenCatalog {
    min-height:
        50px;

    border-radius:
        14px;
}


/* ---------- CATÁLOGO COMPARTIDO ---------- */

body.zbf-operation
#zbOperationSharedOrder:not([hidden]) {
    display:
        block;

    width:
        100%;
}


body.zbf-operation
#zbOperationSharedOrder
.zb-ui-product-card {
    position:
        relative;

    overflow:
        hidden;

    border-radius:
        18px;
}


body.zbf-operation
#zbOperationSharedOrder
.zb-ui-product-image {
    aspect-ratio:
        1.15 / 1;
}


body.zbf-operation
#zbOperationSharedOrder
.zb-ui-order-footer {
    position:
        sticky;

    z-index:
        20;

    bottom:
        -1px;

    margin:
        16px -2px -2px;

    padding:
        14px;

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

    border-radius:
        18px;

    background:
        rgba(7,14,19,.94);

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

    backdrop-filter:
        blur(20px);
}


/* ==========================================================
   TABLET · MESERO
   ========================================================== */

html[data-zb-device="tablet"]
body.zbf-operation .op-shell {
    padding:
        14px !important;
}


html[data-zb-device="tablet"]
body.zbf-operation .op-layout {
    display:
        block !important;
}


html[data-zb-device="tablet"]
body.zbf-operation .op-area-panel {
    padding:
        8px !important;

    margin-bottom:
        10px;
}


html[data-zb-device="tablet"]
body.zbf-operation .op-panel-title {
    display:
        none;
}


html[data-zb-device="tablet"]
body.zbf-operation .op-area-list {
    flex-direction:
        row;

    overflow-x:
        auto;

    gap:
        7px;

    scrollbar-width:
        none;
}


html[data-zb-device="tablet"]
body.zbf-operation .op-area-button {
    width:
        auto;

    flex:
        0 0 auto;

    min-width:
        100px;

    text-align:
        center;
}


html[data-zb-device="tablet"]
body.zbf-operation .op-viewport {
    height:
        calc(100dvh - 250px);

    min-height:
        540px;
}


html[data-zb-device="tablet"]
body.zbf-operation .op-drawer {
    width:
        min(
            480px,
            48vw
        ) !important;
}


html[data-zb-device="tablet"]
body.zbf-operation
#zbOperationSharedOrder
.zb-ui-product-grid {
    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        ) !important;
}


/* ==========================================================
   TELÉFONO · MESERO
   ========================================================== */

html[data-zb-device="phone"]
body.zbf-operation {
    padding-bottom:
        74px;
}


html[data-zb-device="phone"]
body.zbf-operation .op-shell {
    padding:
        8px !important;
}


html[data-zb-device="phone"]
body.zbf-operation .op-header {
    margin-bottom:
        8px !important;

    padding:
        10px 11px !important;

    border-radius:
        17px !important;
}


html[data-zb-device="phone"]
body.zbf-operation .op-header h1 {
    font-size:
        18px !important;
}


html[data-zb-device="phone"]
body.zbf-operation .op-header-actions {
    gap:
        5px !important;
}


html[data-zb-device="phone"]
body.zbf-operation
.op-header-actions
.op-admin-link {
    min-height:
        40px;

    padding:
        0 10px;

    font-size:
        10px;
}


/* Áreas como tabs */

html[data-zb-device="phone"]
body.zbf-operation .op-area-panel {
    margin:
        0 0 8px;

    padding:
        5px !important;

    border-radius:
        15px;
}


html[data-zb-device="phone"]
body.zbf-operation .op-panel-title {
    display:
        none;
}


html[data-zb-device="phone"]
body.zbf-operation .op-area-list {
    display:
        flex !important;

    flex-direction:
        row !important;

    overflow-x:
        auto;

    gap:
        5px;

    scrollbar-width:
        none;
}


html[data-zb-device="phone"]
body.zbf-operation .op-area-list::-webkit-scrollbar {
    display:
        none;
}


html[data-zb-device="phone"]
body.zbf-operation .op-area-button {
    flex:
        0 0 auto;

    width:
        auto !important;

    min-width:
        86px;

    min-height:
        42px;

    padding:
        0 13px;

    text-align:
        center;

    white-space:
        nowrap;
}


/* Plano ocupa la pantalla */

html[data-zb-device="phone"]
body.zbf-operation .op-plan-card {
    border-radius:
        18px;
}


html[data-zb-device="phone"]
body.zbf-operation .op-plan-toolbar {
    min-height:
        48px;

    padding:
        0 12px;
}


html[data-zb-device="phone"]
body.zbf-operation
.op-plan-toolbar
> div:first-child
> span {
    display:
        none;
}


html[data-zb-device="phone"]
body.zbf-operation .op-legend {
    display:
        none;
}


html[data-zb-device="phone"]
body.zbf-operation .op-viewport {
    height:
        calc(100dvh - 235px) !important;

    min-height:
        440px !important;

    border-radius:
        0 0 18px 18px;
}


html[data-zb-device="phone"]
body.zbf-operation .op-stage {
    margin:
        0 !important;

    border:
        0 !important;

    border-radius:
        0 !important;
}


html[data-zb-device="phone"]
body.zbf-operation
.zb-waiter-map-controls {
    position:
        absolute;

    top:
        56px;

    right:
        8px;

    gap:
        4px;

    padding:
        4px;

    border-radius:
        14px;
}


html[data-zb-device="phone"]
body.zbf-operation
.zb-waiter-map-controls button {
    min-width:
        40px;

    min-height:
        40px;

    padding:
        0 10px;
}


html[data-zb-device="phone"]
body.zbf-operation
.zb-waiter-map-controls
.zb-map-fit {
    min-width:
        70px;
}


/* Drawer = hoja operativa */

html[data-zb-device="phone"]
body.zbf-operation .op-drawer {
    position:
        fixed !important;

    left:
        0 !important;

    right:
        0 !important;

    top:
        auto !important;

    bottom:
        0 !important;

    width:
        100% !important;

    height:
        auto !important;

    max-height:
        92dvh !important;

    padding:
        12px
        12px
        max(
            14px,
            env(safe-area-inset-bottom)
        ) !important;

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

    border-bottom:
        0 !important;

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

    transform:
        translateY(105%) !important;

    transition:
        transform
        .24s
        cubic-bezier(.2,.8,.2,1) !important;
}


html[data-zb-device="phone"]
body.zbf-operation .op-drawer.open {
    transform:
        translateY(0) !important;
}


html[data-zb-device="phone"]
body.zbf-operation .op-drawer-head {
    position:
        sticky;

    z-index:
        50;

    top:
        -12px;

    margin:
        -12px -12px 8px;

    padding:
        15px 14px 12px;

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

    background:
        rgba(7,14,19,.96);

    backdrop-filter:
        blur(20px);
}


html[data-zb-device="phone"]
body.zbf-operation .op-close {
    width:
        46px;

    height:
        46px;
}


/* Catálogo móvil */

html[data-zb-device="phone"]
body.zbf-operation
#zbOperationSharedOrder
.zb-ui-order-shell {
    border:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}


html[data-zb-device="phone"]
body.zbf-operation
#zbOperationSharedOrder
.zb-ui-product-grid {
    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        ) !important;

    gap:
        9px !important;
}


html[data-zb-device="phone"]
body.zbf-operation
#zbOperationSharedOrder
.zb-ui-product-card {
    min-height:
        168px !important;

    padding:
        9px !important;

    border-radius:
        17px !important;
}


html[data-zb-device="phone"]
body.zbf-operation
#zbOperationSharedOrder
.zb-ui-product-image {
    min-height:
        92px;

    border-radius:
        13px;
}


html[data-zb-device="phone"]
body.zbf-operation
#zbOperationSharedOrder
.zb-ui-category-list {
    display:
        flex;

    overflow-x:
        auto;

    flex-wrap:
        nowrap !important;

    scrollbar-width:
        none;
}


html[data-zb-device="phone"]
body.zbf-operation
#zbOperationSharedOrder
.zb-ui-category-list::-webkit-scrollbar {
    display:
        none;
}


html[data-zb-device="phone"]
body.zbf-operation
#zbOperationSharedOrder
.zb-ui-category-list
button {
    flex:
        0 0 auto;
}


/* Footer pedido siempre accesible */

html[data-zb-device="phone"]
body.zbf-operation
#zbOperationSharedOrder
.zb-ui-order-footer {
    bottom:
        -12px;

    margin:
        14px -12px -12px;

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

    border-radius:
        20px 20px 0 0;
}


/* Botones principales con pulgar */

html[data-zb-device="phone"]
body.zbf-operation
#opSharedAction,
html[data-zb-device="phone"]
body.zbf-operation
#opOpenCatalog {
    width:
        100%;

    min-height:
        54px;

    font-size:
        14px;

    font-weight:
        700;
}


/* ==========================================================
   ESCRITORIO
   ========================================================== */

html[data-zb-device="desktop"]
body.zbf-operation .op-viewport {
    min-height:
        650px;
}


html[data-zb-device="desktop"]
body.zbf-operation
#zbOperationSharedOrder
.zb-ui-product-grid {
    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        ) !important;
}


/* Evitar selección accidental al operar mapa */

body.zbf-operation .op-stage,
body.zbf-operation .op-table {
    -webkit-user-select:
        none;

    user-select:
        none;
}


/* ==========================================================
   ZERO BAR · V0.9 · B3
   CAJA POS REAL
   ========================================================== */

body.zb-v09-ready .zb-pos-page {
    width:
        min(1500px, calc(100% - 32px));

    margin:
        28px auto 110px;
}


/* ---------- CABECERA ---------- */

.zb-pos-header {
    display:
        grid;

    grid-template-columns:
        minmax(260px,1fr)
        auto
        minmax(250px,auto)
        auto;

    align-items:
        center;

    gap:
        18px;

    padding:
        18px 20px;

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

    border-radius:
        24px;

    background:
        linear-gradient(
            135deg,
            rgba(15,27,35,.94),
            rgba(7,14,19,.94)
        );

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


.zb-pos-brand .eyebrow {
    display:
        block;

    margin-bottom:
        5px;

    color:
        rgba(151,174,188,.68);

    font-size:
        10px;

    font-weight:
        750;

    letter-spacing:
        .17em;
}


.zb-pos-brand h1 {
    margin:
        0;

    color:
        #f5f8fa;

    font-size:
        clamp(23px,2vw,32px);

    line-height:
        1.05;
}


.zb-pos-brand p {
    margin:
        6px 0 0;

    color:
        rgba(220,232,239,.52);

    font-size:
        12px;
}


/* Jornada */

.zb-pos-shift {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    min-height:
        56px;

    padding:
        8px 14px;

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

    border-radius:
        16px;

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


.zb-pos-shift small {
    display:
        block;

    color:
        rgba(190,208,218,.48);

    font-size:
        8px;

    font-weight:
        750;

    letter-spacing:
        .12em;
}


.zb-pos-shift strong {
    display:
        block;

    margin-top:
        3px;

    color:
        rgba(245,250,252,.90);
}


.zb-pos-live-dot {
    width:
        9px;

    height:
        9px;

    border-radius:
        50%;

    background:
        #42b9f1;

    box-shadow:
        0 0 15px
        rgba(66,185,241,.70);
}


.zb-pos-live-dot.off {
    background:
        rgba(255,255,255,.22);

    box-shadow:
        none;
}


/* Por cobrar dominante */

.zb-pos-pending-hero {
    min-width:
        230px;

    padding:
        10px 18px;

    border:
        1px solid
        rgba(67,183,239,.22);

    border-radius:
        18px;

    background:
        linear-gradient(
            135deg,
            rgba(31,116,158,.18),
            rgba(13,29,38,.44)
        );
}


.zb-pos-pending-hero > span {
    display:
        block;

    color:
        rgba(150,203,228,.70);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .14em;
}


.zb-pos-pending-hero > strong {
    display:
        block;

    margin:
        2px 0;

    color:
        #f7fbfd;

    font-size:
        clamp(27px,2.5vw,40px);

    line-height:
        1.05;

    letter-spacing:
        -.04em;
}


.zb-pos-pending-hero small {
    color:
        rgba(213,230,239,.54);
}


.zb-pos-pending-hero small b {
    color:
        rgba(241,248,251,.86);
}


.zb-pos-header-actions {
    display:
        flex;

    gap:
        8px;
}


/* ---------- MÉTRICAS SECUNDARIAS ---------- */

.zb-pos-secondary-metrics {
    display:
        flex;

    gap:
        10px;

    margin:
        12px 0 14px;
}


.zb-pos-secondary-metrics article {
    display:
        flex;

    align-items:
        baseline;

    gap:
        10px;

    padding:
        9px 14px;

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

    border-radius:
        13px;

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


.zb-pos-secondary-metrics span {
    color:
        rgba(180,199,210,.44);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .12em;
}


.zb-pos-secondary-metrics strong {
    color:
        rgba(240,247,250,.76);

    font-size:
        14px;
}


/* ---------- TABS POS ---------- */

.zb-pos-page .zb-caja-view-tabs {
    display:
        inline-flex;

    gap:
        5px;

    margin:
        0 0 12px;

    padding:
        5px;

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

    border-radius:
        15px;

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


.zb-pos-page .zb-caja-view-tab {
    min-height:
        44px;

    padding:
        0 20px;

    border:
        0;

    border-radius:
        11px;

    background:
        transparent;

    color:
        rgba(216,229,236,.52);

    font-weight:
        700;
}


.zb-pos-page
.zb-caja-view-tab.active {
    background:
        rgba(42,157,215,.17);

    color:
        #7fd4fc;

    box-shadow:
        inset 0 0 0 1px
        rgba(65,180,235,.20);
}


/* ---------- LISTA POR COBRAR ---------- */

.zb-pos-accounts-view {
    min-height:
        590px;

    overflow:
        hidden;

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

    border-radius:
        22px;

    background:
        linear-gradient(
            145deg,
            rgba(15,25,32,.82),
            rgba(7,14,19,.86)
        );
}


.zb-pos-page .zb-caja-toolbar {
    position:
        sticky;

    z-index:
        10;

    top:
        0;

    display:
        grid;

    grid-template-columns:
        minmax(190px,.55fr)
        minmax(280px,1fr);

    align-items:
        center;

    gap:
        18px;

    padding:
        17px 18px;

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

    background:
        rgba(9,18,24,.92);

    backdrop-filter:
        blur(18px);
}


.zb-pos-page
.zb-caja-toolbar strong {
    display:
        block;

    color:
        #f1f6f8;

    font-size:
        18px;
}


.zb-pos-page
#zbCajaResultText {
    display:
        block;

    margin-top:
        3px;

    color:
        rgba(197,215,225,.46);

    font-size:
        11px;
}


.zb-pos-page
.zb-caja-search {
    width:
        100%;

    min-height:
        50px;

    padding:
        0 17px;

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

    border-radius:
        14px;

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

    color:
        #f4f8fa;

    outline:
        none;
}


.zb-pos-page
.zb-caja-search:focus {
    border-color:
        rgba(70,188,243,.42);

    box-shadow:
        0 0 0 3px
        rgba(50,166,220,.09);
}


/* Tarjetas de cuenta más POS */

.zb-pos-page
.zb-caja-list {
    display:
        grid;

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

    gap:
        10px;

    padding:
        14px;
}


.zb-pos-page
.zb-caja-account {
    min-height:
        164px;

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

    border-radius:
        18px;

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

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


.zb-pos-page
.zb-caja-account:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(77,187,239,.24);

    background:
        linear-gradient(
            145deg,
            rgba(57,155,202,.07),
            rgba(255,255,255,.025)
        );
}


.zb-pos-page
.zb-caja-account-total {
    color:
        #f8fbfc;

    font-size:
        23px !important;

    letter-spacing:
        -.03em;
}


.zb-pos-page
.zb-caja-open {
    min-height:
        46px;

    border-radius:
        12px;
}


/* ==========================================================
   DRAWER = TERMINAL DE COBRO
   ========================================================== */

.zb-pos-page
+ .zb-caja-drawer-layer {
    z-index:
        1500;
}


.zb-caja-drawer {
    width:
        min(610px,46vw) !important;

    background:
        linear-gradient(
            155deg,
            rgba(15,27,35,.99),
            rgba(5,11,15,.99)
        ) !important;

    box-shadow:
        -28px 0 70px
        rgba(0,0,0,.42) !important;
}


.zb-caja-drawer-header {
    padding:
        20px !important;

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


.zb-caja-drawer-header h2 {
    font-size:
        26px !important;

    letter-spacing:
        -.025em;
}


.zb-caja-detail-totals {
    border:
        1px solid
        rgba(68,185,240,.16) !important;

    border-radius:
        18px !important;

    background:
        linear-gradient(
            135deg,
            rgba(41,148,199,.10),
            rgba(255,255,255,.02)
        ) !important;
}


.zb-caja-detail-footer {
    position:
        sticky;

    z-index:
        30;

    bottom:
        0;

    margin:
        18px -18px -18px !important;

    padding:
        16px 18px
        max(16px,env(safe-area-inset-bottom)) !important;

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

    background:
        rgba(6,13,18,.96);

    backdrop-filter:
        blur(20px);
}


.zb-caja-primary-inline {
    min-height:
        56px !important;

    border-radius:
        15px !important;

    font-size:
        15px !important;

    font-weight:
        800 !important;

    box-shadow:
        0 8px 25px
        rgba(24,139,195,.18);
}


/* ---------- MAPA SECUNDARIO ---------- */

.zb-pos-page .zb-caja-map-view {
    min-height:
        600px;

    overflow:
        hidden;

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

    border-radius:
        22px;
}


.zb-pos-page
.zb-caja-map-stage-wrap {
    min-height:
        560px;
}


/* ==========================================================
   TABLET
   ========================================================== */

html[data-zb-device="tablet"]
.zb-pos-header {
    grid-template-columns:
        1fr auto auto;

    gap:
        10px;
}


html[data-zb-device="tablet"]
.zb-pos-brand p {
    display:
        none;
}


html[data-zb-device="tablet"]
.zb-pos-shift {
    display:
        none;
}


html[data-zb-device="tablet"]
.zb-pos-page
.zb-caja-list {
    grid-template-columns:
        repeat(
            2,
            minmax(240px,1fr)
        );
}


html[data-zb-device="tablet"]
.zb-caja-drawer {
    width:
        min(560px,58vw) !important;
}


/* ==========================================================
   TELÉFONO
   ========================================================== */

html[data-zb-device="phone"]
body.zb-v09-ready
.zb-pos-page {
    width:
        auto;

    margin:
        8px 8px 88px;
}


html[data-zb-device="phone"]
.zb-pos-header {
    grid-template-columns:
        1fr auto;

    gap:
        8px;

    padding:
        12px;

    border-radius:
        18px;
}


html[data-zb-device="phone"]
.zb-pos-brand .eyebrow {
    font-size:
        8px;
}


html[data-zb-device="phone"]
.zb-pos-brand h1 {
    font-size:
        20px;
}


html[data-zb-device="phone"]
.zb-pos-brand p,
html[data-zb-device="phone"]
.zb-pos-shift,
html[data-zb-device="phone"]
.zb-pos-header-actions {
    display:
        none;
}


html[data-zb-device="phone"]
.zb-pos-pending-hero {
    min-width:
        150px;

    padding:
        9px 11px;

    border-radius:
        14px;

    text-align:
        right;
}


html[data-zb-device="phone"]
.zb-pos-pending-hero > strong {
    font-size:
        23px;
}


html[data-zb-device="phone"]
.zb-pos-pending-hero small {
    font-size:
        9px;
}


html[data-zb-device="phone"]
.zb-pos-secondary-metrics {
    margin:
        7px 0;
}


html[data-zb-device="phone"]
.zb-pos-secondary-metrics article {
    flex:
        1;

    justify-content:
        space-between;

    padding:
        7px 10px;
}


html[data-zb-device="phone"]
.zb-pos-page
.zb-caja-view-tabs {
    display:
        flex;

    width:
        100%;

    margin-bottom:
        7px;
}


html[data-zb-device="phone"]
.zb-pos-page
.zb-caja-view-tab {
    flex:
        1;
}


html[data-zb-device="phone"]
.zb-pos-accounts-view {
    min-height:
        calc(100dvh - 260px);

    border-radius:
        18px;
}


html[data-zb-device="phone"]
.zb-pos-page
.zb-caja-toolbar {
    display:
        block;

    padding:
        10px;
}


html[data-zb-device="phone"]
.zb-pos-page
.zb-caja-toolbar > div:first-child {
    display:
        none;
}


html[data-zb-device="phone"]
.zb-pos-page
.zb-caja-search {
    min-height:
        48px;
}


html[data-zb-device="phone"]
.zb-pos-page
.zb-caja-list {
    display:
        block;

    padding:
        8px;
}


html[data-zb-device="phone"]
.zb-pos-page
.zb-caja-account {
    min-height:
        0;

    margin-bottom:
        7px;

    border-radius:
        15px;
}


html[data-zb-device="phone"]
.zb-caja-drawer {
    position:
        fixed !important;

    inset:
        0 !important;

    width:
        100% !important;

    max-width:
        none !important;

    height:
        100dvh !important;

    max-height:
        none !important;

    border-radius:
        0 !important;
}


html[data-zb-device="phone"]
.zb-caja-drawer-header {
    position:
        sticky;

    z-index:
        40;

    top:
        0;

    padding:
        max(12px,env(safe-area-inset-top))
        14px 12px !important;

    background:
        rgba(7,15,20,.97);

    backdrop-filter:
        blur(20px);
}


html[data-zb-device="phone"]
.zb-caja-drawer-header h2 {
    font-size:
        21px !important;
}


html[data-zb-device="phone"]
.zb-caja-drawer-body {
    padding-bottom:
        100px !important;
}


html[data-zb-device="phone"]
.zb-caja-detail-footer {
    bottom:
        0;
}


/* Pago móvil = hoja completa y táctil */

html[data-zb-device="phone"]
#zbCajaPaymentModal
.zb-caja-modal-card {
    width:
        100% !important;

    max-width:
        none !important;

    max-height:
        94dvh !important;

    margin-top:
        auto;

    border-radius:
        25px 25px 0 0 !important;
}


html[data-zb-device="phone"]
.zb-caja-payment-grid {
    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        ) !important;
}


/* Tablet táctil */

@media (pointer: coarse) {

    .zb-pos-page
    .zb-caja-account {
        cursor:
            pointer;
    }

    .zb-pos-page
    .zb-caja-open,
    .zb-caja-primary-inline,
    .zb-caja-secondary-inline {
        min-height:
            50px;
    }
}