:root {
    --bg: #080a0d;
    --surface: rgba(255,255,255,.07);
    --surface-strong: rgba(255,255,255,.11);
    --border: rgba(255,255,255,.12);
    --text: #f4f7fb;
    --muted: rgba(244,247,251,.58);
    --accent: #0a66a9;
    --accent-soft: rgba(10,102,169,.22);
    --shadow: 0 24px 80px rgba(0,0,0,.35);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background:
        radial-gradient(
            circle at 20% 10%,
            rgba(10,102,169,.20),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(255,255,255,.06),
            transparent 30%
        ),
        var(--bg);

    color: var(--text);

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

body {
    min-height: 100vh;
}

button,
input {
    font: inherit;
}

.zero-topbar {
    height: 52px;

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

    padding: 0 24px;

    background: rgba(0,0,0,.72);
    border-bottom: 1px solid rgba(255,255,255,.08);

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

    position: sticky;
    top: 0;
    z-index: 50;
}

.zero-brand {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.zero-mark {
    font-weight: 800;
    letter-spacing: .18em;
}

.zero-product {
    font-size: 11px;
    letter-spacing: .20em;
    color: rgba(255,255,255,.48);
}

.zero-user {
    display: flex;
    align-items: center;
    gap: 18px;

    font-size: 13px;
    color: rgba(255,255,255,.65);
}

.zero-user a {
    color: #fff;
    text-decoration: none;
}

.operation-shell {
    width: min(1500px, calc(100% - 40px));
    margin: 0 auto;
    padding: 32px 0 70px;
}

.operation-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    margin-bottom: 34px;
}

.operation-header h1 {
    margin: 5px 0 2px;
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 700;
    letter-spacing: -.045em;
}

.operation-header p {
    margin: 0;
    color: var(--muted);
}

.eyebrow {
    font-size: 11px;
    letter-spacing: .20em;
    color: rgba(255,255,255,.42);
}

.soft-button {
    width: 44px;
    height: 44px;

    border-radius: 14px;
    border: 1px solid var(--border);

    background: var(--surface);
    color: white;

    cursor: pointer;

    backdrop-filter: blur(18px);
}

.area-section {
    margin-top: 32px;
}

.area-title {
    margin: 0 0 14px 2px;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;

    color: rgba(255,255,255,.55);
}

.table-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fill, minmax(190px, 1fr));

    gap: 14px;
}

.table-card {
    min-height: 145px;

    padding: 18px;

    border: 1px solid var(--border);
    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.035)
        );

    box-shadow: var(--shadow);

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

    color: var(--text);
    text-align: left;

    display: flex;
    flex-direction: column;

    cursor: pointer;

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

.table-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.24);
}

.table-card.occupied {
    background:
        radial-gradient(
            circle at 90% 0%,
            var(--accent-soft),
            transparent 50%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.11),
            rgba(255,255,255,.045)
        );

    border-color: rgba(10,102,169,.42);
}

.table-card strong {
    margin-top: 10px;

    font-size: 23px;
    letter-spacing: -.03em;
}

.table-state {
    font-size: 11px;
    color: rgba(255,255,255,.48);
}

.table-capacity {
    margin-top: auto;

    font-size: 12px;
    color: rgba(255,255,255,.40);
}

.account-list {
    margin-top: auto;

    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.account-list span {
    padding: 5px 8px;

    border-radius: 999px;

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

    font-size: 11px;
    color: rgba(255,255,255,.72);
}

.glass-card {
    border: 1px solid var(--border);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.11),
            rgba(255,255,255,.04)
        );

    box-shadow: var(--shadow);

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

.empty-state {
    padding: 60px 30px;
    border-radius: 28px;
    text-align: center;
}

.empty-state h2 {
    margin: 16px 0 8px;
}

.empty-state p {
    margin: auto;
    max-width: 480px;
    color: var(--muted);
}

.empty-icon {
    font-size: 38px;
}

.login-screen {
    min-height: 100vh;

    display: grid;
    place-items: center;

    padding: 24px;

    position: relative;
    overflow: hidden;
}

.login-glow {
    position: absolute;

    width: 480px;
    height: 480px;

    border-radius: 50%;

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

    filter: blur(90px);
}

.login-card {
    width: min(420px, 100%);

    padding: 38px;
    border-radius: 30px;

    position: relative;
}

.login-brand {
    margin-bottom: 50px;
}

.login-card h1 {
    margin: 0;

    font-size: 35px;
    letter-spacing: -.04em;
}

.login-card .muted {
    color: var(--muted);
    margin: 6px 0 32px;
}

.login-card label {
    display: block;

    margin: 18px 0 7px;

    font-size: 12px;
    color: rgba(255,255,255,.56);
}

.login-card input {
    width: 100%;
    height: 49px;

    padding: 0 14px;

    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);

    outline: none;

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

.login-card input:focus {
    border-color: rgba(10,102,169,.8);
}

.login-card button {
    width: 100%;
    height: 50px;

    margin-top: 25px;

    border: none;
    border-radius: 15px;

    background: var(--accent);
    color: white;

    font-weight: 650;
    cursor: pointer;
}

.powered {
    margin-top: 30px;

    text-align: center;

    font-size: 11px;
    letter-spacing: .10em;

    color: rgba(255,255,255,.27);
}

.notice {
    padding: 12px 14px;
    margin-bottom: 14px;

    border-radius: 13px;

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

    font-size: 13px;
}

@media (max-width: 680px) {

    .zero-topbar {
        height: 48px;
        padding: 0 15px;
    }

    .zero-user span {
        display: none;
    }

    .operation-shell {
        width: calc(100% - 24px);
        padding-top: 24px;
    }

    .operation-header {
        margin-bottom: 24px;
    }

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

        gap: 10px;
    }

    .table-card {
        min-height: 132px;
        border-radius: 20px;
        padding: 15px;
    }

    .table-card strong {
        font-size: 20px;
    }

    .login-card {
        padding: 28px 22px;
        border-radius: 25px;
    }

}

@media (max-width: 390px) {

    .table-grid {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================
   ZERO BAR SALON EDITOR V0.3
   ========================================================== */

.salon-editor {
    width: min(1700px, calc(100% - 34px));
    margin: 0 auto;
    padding: 28px 0 50px;
}

.salon-editor-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.salon-editor-head h1 {
    margin: 5px 0 4px;
    font-size: clamp(30px, 4vw, 48px);
    letter-spacing: -.045em;
}

.salon-editor-head p {
    margin: 0;
    color: var(--muted);
}

.salon-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.editor-primary,
.editor-secondary,
.editor-back {
    min-height: 43px;
    padding: 0 17px;

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

    border-radius: 14px;

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

    cursor: pointer;
    text-decoration: none;
}

.editor-primary {
    border: 1px solid rgba(255,255,255,.08);
    background: var(--accent);
    color: #fff;
}

.editor-secondary,
.editor-back {
    border: 1px solid var(--border);
    background: rgba(255,255,255,.055);
    color: rgba(255,255,255,.82);
}

.editor-workspace {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 16px;
}

.editor-sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.editor-panel,
.editor-tip {
    border: 1px solid var(--border);
    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.085),
            rgba(255,255,255,.035)
        );

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

.editor-panel {
    padding: 17px;
}

.editor-panel-title {
    margin-bottom: 14px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .10em;

    color: rgba(255,255,255,.46);
    text-transform: uppercase;
}

.editor-panel select,
.editor-panel input {
    width: 100%;
    height: 42px;

    padding: 0 11px;

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

    background: rgba(0,0,0,.22);
    color: #fff;

    outline: none;
}

.editor-panel select option {
    background: #15171b;
    color: white;
}

.editor-panel label {
    display: block;

    margin: 13px 0 6px;

    font-size: 11px;
    color: rgba(255,255,255,.48);
}

.editor-secondary {
    width: 100%;
    margin-top: 10px;
}

.editor-empty-selection {
    padding: 8px 0 4px;

    font-size: 13px;
    line-height: 1.5;

    color: rgba(255,255,255,.42);
}

.property-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.property-save {
    width: 100%;
    margin-top: 18px;
}

.rotation-value {
    margin-top: 3px;

    text-align: right;

    font-size: 11px;
    color: rgba(255,255,255,.42);
}

.editor-tip {
    padding: 16px;

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

.editor-tip strong {
    font-size: 12px;
}

.editor-tip span {
    font-size: 11px;
    line-height: 1.45;
    color: rgba(255,255,255,.42);
}

.floor-wrap {
    min-width: 0;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 27px;

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

    box-shadow: var(--shadow);

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

.floor-toolbar {
    height: 53px;

    padding: 0 18px;

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

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

    font-size: 12px;
    color: rgba(255,255,255,.63);
}

.floor-toolbar > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.floor-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--accent);

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

.floor-status {
    color: rgba(255,255,255,.38);
}

#saveStatus.saving {
    color: rgba(255,255,255,.7);
}

#saveStatus.error {
    color: #ffb9b9;
}

.floor-canvas {
    position: relative;

    width: 100%;
    min-width: 700px;
    height: min(72vh, 820px);
    min-height: 590px;

    overflow: hidden;

    touch-action: none;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255,255,255,.045),
            transparent 50%
        );
}

.floor-grid {
    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .22;

    background-image:
        linear-gradient(
            rgba(255,255,255,.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.055) 1px,
            transparent 1px
        );

    background-size: 24px 24px;
}

.design-table {
    position: absolute;

    min-width: 70px;
    min-height: 60px;

    padding: 10px;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.13),
            rgba(255,255,255,.055)
        );

    color: white;

    box-shadow:
        0 16px 32px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.08);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

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

    user-select: none;
    touch-action: none;

    cursor: grab;

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

.design-table.shape-square {
    border-radius: 18px;
}

.design-table.shape-round {
    border-radius: 999px;
}

.design-table.shape-rectangle {
    border-radius: 17px;
}

.design-table:hover {
    border-color: rgba(255,255,255,.32);
}

.design-table.selected {
    border-color: rgba(10,102,169,.95);

    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(10,102,169,.30),
            transparent 55%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.15),
            rgba(255,255,255,.06)
        );

    box-shadow:
        0 0 0 2px rgba(10,102,169,.12),
        0 20px 45px rgba(0,0,0,.30);
}

.design-table.dragging {
    cursor: grabbing;
    z-index: 20;

    transition: none;

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

.design-table-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.015em;
}

.design-table-capacity {
    margin-top: 4px;

    font-size: 10px;
    color: rgba(255,255,255,.46);
}

@media (max-width: 900px) {

    .salon-editor {
        width: calc(100% - 20px);
        padding-top: 20px;
    }

    .salon-editor-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .salon-head-actions {
        width: 100%;
    }

    .salon-head-actions > * {
        flex: 1;
    }

    .editor-workspace {
        display: flex;
        flex-direction: column;
    }

    .editor-sidebar {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .table-properties {
        grid-row: span 2;
    }

    .floor-wrap {
        overflow-x: auto;
    }

    .floor-canvas {
        height: 620px;
    }

}

@media (max-width: 620px) {

    .salon-editor-head h1 {
        font-size: 31px;
    }

    .editor-sidebar {
        display: flex;
    }

    .floor-canvas {
        min-width: 620px;
        height: 600px;
        min-height: 600px;
    }

}


/* ==========================================================
   ZERO BAR · MASTER FLOOR PLAN V0.4
   ========================================================== */

.zb-editor {
    width: min(1760px, calc(100% - 34px));
    margin: 0 auto;
    padding: 30px 0 54px;
}

.zb-editor-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.zb-editor-title h1 {
    margin: 5px 0 4px;
    font-size: clamp(32px, 4vw, 50px);
    letter-spacing: -.05em;
}

.zb-editor-title p {
    margin: 0;
    color: var(--muted);
}

.zb-header-actions {
    display: flex;
    gap: 10px;
}

.zb-btn {
    min-height: 43px;
    padding: 0 16px;

    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.11);

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

    color: white;
    text-decoration: none;

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

    cursor: pointer;
}

.zb-btn-primary {
    background:
        linear-gradient(
            180deg,
            rgba(18,122,194,.96),
            rgba(10,102,169,.96)
        );

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

.zb-btn-secondary {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.035)
        );
}

.zb-full {
    width: 100%;
    margin-top: 10px;
}

.zb-workspace {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 15px;
}

.zb-sidebar {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.zb-panel {
    padding: 17px;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.027)
        );

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

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

.zb-panel-kicker {
    margin-bottom: 13px;

    font-size: 10px;
    font-weight: 750;
    letter-spacing: .13em;

    color: rgba(255,255,255,.42);
}

.zb-panel label {
    display: block;
    margin: 13px 0 6px;

    font-size: 11px;

    color: rgba(255,255,255,.48);
}

.zb-control {
    width: 100%;
    min-height: 42px;

    padding: 0 11px;

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

    background: rgba(0,0,0,.25);
    color: #fff;

    outline: none;
}

select.zb-control option {
    background: #15181c;
}

.zb-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.zb-range {
    width: 100%;
}

.zb-range-value {
    margin-top: 3px;
    text-align: right;

    font-size: 10px;

    color: rgba(255,255,255,.4);
}

.zb-selection-empty {
    padding: 5px 0 3px;

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

    font-size: 12px;
    line-height: 1.5;
}

.zb-element-type {
    margin-bottom: 4px;

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

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

.zb-object-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.zb-object-grid button {
    min-height: 39px;

    border-radius: 11px;
    border: 1px solid rgba(255,255,255,.085);

    background: rgba(255,255,255,.045);
    color: rgba(255,255,255,.72);

    font-size: 11px;

    cursor: pointer;
}

.zb-object-grid button:last-child {
    grid-column: 1 / -1;
}

.zb-property-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

.zb-plan-shell {
    min-width: 0;

    overflow: hidden;

    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.11);

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

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

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

.zb-plan-toolbar {
    min-height: 56px;
    padding: 0 17px;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;

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

    background: rgba(5,7,10,.44);
}

.zb-plan-area {
    display: flex;
    flex-direction: column;
}

.zb-plan-area strong {
    font-size: 12px;
}

.zb-plan-area span {
    margin-top: 2px;

    font-size: 9px;
    letter-spacing: .07em;

    color: rgba(255,255,255,.35);
}

.zb-toolbar-center {
    height: 35px;

    display: flex;
    align-items: center;

    overflow: hidden;

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

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

.zb-toolbar-center button {
    min-width: 38px;
    height: 35px;

    border: 0;
    background: transparent;
    color: rgba(255,255,255,.72);

    cursor: pointer;
}

.zb-toolbar-center .zb-zoom-value {
    min-width: 62px;

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

    font-size: 10px;
}

.zb-toolbar-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

#zbSaveState {
    font-size: 10px;
    color: rgba(255,255,255,.36);
}

#zbSaveState.saving {
    color: rgba(255,255,255,.68);
}

#zbSaveState.error {
    color: #e3aaaa;
}

.zb-edit-toggle {
    min-height: 34px;
    padding: 0 12px;

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

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

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

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

    cursor: pointer;
}

.zb-edit-toggle.active {
    background: rgba(10,102,169,.16);
    border-color: rgba(10,102,169,.35);
    color: rgba(255,255,255,.86);
}

.zb-plan-viewport {
    position: relative;

    width: 100%;
    height: min(75vh, 880px);
    min-height: 630px;

    overflow: auto;

    background:
        radial-gradient(
            circle at 30% 10%,
            rgba(10,102,169,.055),
            transparent 36%
        ),
        #0a0d11;

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

.zb-plan-sizer {
    position: relative;
}

.zb-plan-stage {
    position: absolute;
    left: 0;
    top: 0;

    width: 1400px;
    height: 900px;

    transform-origin: 0 0;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.015),
            transparent 38%
        );

    touch-action: none;
}

.zb-grid {
    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .18;

    background-image:
        linear-gradient(
            rgba(255,255,255,.065) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.065) 1px,
            transparent 1px
        );

    background-size: 25px 25px;
}

.zb-plan-table,
.zb-plan-element {
    position: absolute;

    user-select: none;
    touch-action: none;

    cursor: grab;

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

.zb-plan-table {
    padding: 10px;

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

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

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

    color: #fff;

    box-shadow:
        0 14px 32px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.10);

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

.zb-table-square {
    border-radius: 18px;
}

.zb-table-round {
    border-radius: 999px;
}

.zb-table-rectangle {
    border-radius: 16px;
}

.zb-table-name {
    font-size: 14px;
    letter-spacing: -.02em;
}

.zb-table-capacity {
    margin-top: 3px;

    font-size: 9px;

    color: rgba(255,255,255,.43);
}

.zb-plan-element {
    display: flex;
    align-items: center;
    justify-content: center;

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

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

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

.zb-element-bar {
    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(10,102,169,.20),
            rgba(255,255,255,.05)
        );
}

.zb-element-wall {
    border-radius: 5px;

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

.zb-element-door {
    border-style: dashed;
    border-radius: 7px;

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

.zb-element-cashier {
    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.035)
        );
}

.zb-element-label {
    border: 0;

    background: transparent;

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

    font-size: 15px;
    letter-spacing: .08em;
}

.zb-selected {
    z-index: 30;

    border-color: rgba(38,143,215,.95);

    box-shadow:
        0 0 0 2px rgba(10,102,169,.18),
        0 24px 54px rgba(0,0,0,.34);
}

.zb-dragging {
    z-index: 50;

    cursor: grabbing;

    transition: none;

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

.zb-plan-locked
.zb-plan-table,

.zb-plan-locked
.zb-plan-element {
    cursor: default;
}

@media (max-width: 1050px) {

    .zb-editor {
        width: calc(100% - 20px);
    }

    .zb-workspace {
        grid-template-columns: 235px minmax(0,1fr);
    }

}

@media (max-width: 820px) {

    .zb-editor-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .zb-header-actions {
        width: 100%;
    }

    .zb-header-actions > * {
        flex: 1;
    }

    .zb-workspace {
        display: flex;
        flex-direction: column;
    }

    .zb-sidebar {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    #zbProperties {
        grid-column: 1 / -1;
    }

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

    .zb-toolbar-center {
        order: 3;
        grid-column: 1 / -1;
        justify-self: center;
        margin-bottom: 9px;
    }

    .zb-plan-viewport {
        min-height: 650px;
    }

}

@media (max-width: 560px) {

    .zb-sidebar {
        display: flex;
    }

    .zb-toolbar-right
    #zbSaveState {
        display: none;
    }

}


/* ==========================================================
   ZERO BAR · OPERATION MASTER PLAN V0.5
   ========================================================== */

.op-page {
    width: min(1760px, calc(100% - 34px));
    margin: 0 auto;
    padding: 30px 0 60px;
}

.op-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 22px;
}

.op-header h1 {
    margin: 5px 0 3px;

    font-size: clamp(34px, 4vw, 50px);
    letter-spacing: -.05em;
}

.op-header p {
    margin: 0;

    color: var(--muted);
}

.op-admin-link {
    min-height: 42px;
    padding: 0 15px;

    display: inline-flex;
    align-items: center;

    border: 1px solid rgba(255,255,255,.11);
    border-radius: 13px;

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

    color: rgba(255,255,255,.78);
    text-decoration: none;

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

.op-layout {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 14px;
}

.op-area-panel {
    padding: 17px;

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

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

.op-panel-title {
    display: block;

    margin-bottom: 12px;

    font-size: 10px;
    font-weight: 750;
    letter-spacing: .13em;

    color: rgba(255,255,255,.40);
}

.op-area-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.op-area-button {
    width: 100%;
    min-height: 43px;

    padding: 0 12px;

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

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

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

    text-align: left;

    cursor: pointer;
}

.op-area-button.active {
    border-color: rgba(10,102,169,.35);

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

    color: #fff;
}

.op-plan-card {
    min-width: 0;

    overflow: hidden;

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

    background: #090c10;

    box-shadow:
        0 30px 90px rgba(0,0,0,.26);
}

.op-plan-toolbar {
    min-height: 56px;

    padding: 0 18px;

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

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

.op-plan-toolbar > div:first-child {
    display: flex;
    flex-direction: column;
}

.op-plan-toolbar strong {
    font-size: 12px;
}

.op-plan-toolbar span {
    margin-top: 2px;

    font-size: 9px;

    color: rgba(255,255,255,.35);
}

.op-legend {
    display: flex;
    align-items: center;
    gap: 14px;
}

.op-legend > span {
    display: flex;
    align-items: center;
    gap: 5px;

    margin: 0;
}

.op-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    display: inline-block;
}

.op-dot.free {
    background: rgba(255,255,255,.35);
}

.op-dot.occupied {
    background: #0a66a9;

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

.op-viewport {
    width: 100%;
    height: min(75vh, 880px);
    min-height: 650px;

    overflow: auto;

    background:
        radial-gradient(
            circle at 20% 8%,
            rgba(10,102,169,.05),
            transparent 32%
        );
}

.op-stage {
    position: relative;

    width: 1400px;
    height: 900px;
}

.op-grid {
    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .12;

    background-image:
        linear-gradient(
            rgba(255,255,255,.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.06) 1px,
            transparent 1px
        );

    background-size: 25px 25px;
}

.op-table,
.op-element {
    position: absolute;
}

.op-table {
    padding: 10px;

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

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

    color: white;

    cursor: pointer;

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

.op-table.free {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.105),
            rgba(255,255,255,.04)
        );
}

.op-table.occupied {
    border-color: rgba(10,102,169,.55);

    background:
        radial-gradient(
            circle at 85% 5%,
            rgba(10,102,169,.34),
            transparent 58%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.12),
            rgba(255,255,255,.045)
        );

    box-shadow:
        0 0 0 1px rgba(10,102,169,.10),
        0 18px 40px rgba(0,0,0,.26);
}

.op-table:hover {
    border-color: rgba(255,255,255,.31);
}

.op-table-square {
    border-radius: 18px;
}

.op-table-round {
    border-radius: 999px;
}

.op-table-rectangle {
    border-radius: 16px;
}

.op-table strong {
    font-size: 14px;
}

.op-table-status {
    margin-top: 3px;

    font-size: 9px;

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

.op-element {
    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;

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

    font-size: 10px;
    font-weight: 650;
    letter-spacing: .04em;
}

.op-element-bar {
    border: 1px solid rgba(10,102,169,.24);
    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(10,102,169,.13),
            rgba(255,255,255,.025)
        );
}

.op-element-wall {
    border-radius: 4px;

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

.op-element-door {
    border: 1px dashed rgba(255,255,255,.18);
    border-radius: 7px;
}

.op-element-cashier {
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 13px;

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

.op-element-label {
    font-size: 14px;
    letter-spacing: .08em;
}

.op-drawer-backdrop {
    position: fixed;
    inset: 0;

    z-index: 150;

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

    opacity: 0;

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    transition: opacity .2s ease;
}

.op-drawer-backdrop.visible {
    opacity: 1;
}

.op-drawer {
    position: fixed;

    z-index: 160;

    top: 0;
    right: 0;

    width: min(430px, 100%);
    height: 100dvh;

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

    border-left:
        1px solid rgba(255,255,255,.11);

    background:
        linear-gradient(
            145deg,
            rgba(25,29,35,.96),
            rgba(10,12,16,.98)
        );

    box-shadow:
        -30px 0 80px rgba(0,0,0,.40);

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

    transform: translateX(105%);

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

.op-drawer.open {
    transform: translateX(0);
}

.op-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    padding-bottom: 20px;

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

.op-drawer-kicker {
    font-size: 9px;
    letter-spacing: .14em;

    color: rgba(255,255,255,.35);
}

.op-drawer h2 {
    margin: 4px 0 0;

    font-size: 31px;
    letter-spacing: -.045em;
}

.op-close {
    width: 39px;
    height: 39px;

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

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

    color: white;

    font-size: 24px;

    cursor: pointer;
}

.op-drawer-content {
    padding-top: 23px;
}

.op-section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 11px;

    font-size: 12px;
}

.op-section-title span {
    min-width: 24px;
    height: 24px;

    padding: 0 7px;

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

    border-radius: 999px;

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

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

    font-size: 10px;
}

.op-account-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.op-account-card {
    min-height: 65px;

    padding: 0 14px;

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

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.03)
        );

    color: white;

    text-align: left;

    cursor: pointer;
}

.op-account-card > div {
    display: flex;
    flex-direction: column;
}

.op-account-card strong {
    font-size: 14px;
}

.op-account-card span {
    margin-top: 3px;

    font-size: 10px;

    color: rgba(255,255,255,.40);
}

.op-account-arrow {
    font-size: 24px !important;
}

.op-account-empty {
    padding: 24px 16px;

    border: 1px dashed rgba(255,255,255,.10);
    border-radius: 15px;

    display: flex;
    flex-direction: column;

    text-align: center;
}

.op-account-empty strong {
    font-size: 13px;
}

.op-account-empty span {
    margin-top: 5px;

    font-size: 11px;

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

.op-new-account {
    margin-top: 28px;
    padding-top: 20px;

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

.op-new-account label {
    display: block;

    margin-bottom: 8px;

    font-size: 11px;

    color: rgba(255,255,255,.48);
}

.op-new-account-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.op-new-account input {
    min-width: 0;
    height: 45px;

    padding: 0 13px;

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

    background: rgba(255,255,255,.045);
    color: white;

    outline: none;
}

.op-new-account button {
    min-width: 76px;

    border: 0;
    border-radius: 13px;

    background: #0a66a9;
    color: white;

    font-weight: 650;

    cursor: pointer;
}

@media (max-width: 820px) {

    .op-page {
        width: calc(100% - 20px);
        padding-top: 20px;
    }

    .op-layout {
        display: flex;
        flex-direction: column;
    }

    .op-area-panel {
        padding: 10px;
    }

    .op-panel-title {
        display: none;
    }

    .op-area-list {
        flex-direction: row;
        overflow-x: auto;
    }

    .op-area-button {
        width: auto;
        min-width: max-content;
    }

    .op-viewport {
        min-height: 620px;
    }

}

@media (max-width: 560px) {

    .op-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .op-admin-link {
        display: none;
    }

    .op-plan-toolbar {
        align-items: flex-start;
        flex-direction: column;

        padding-top: 13px;
        padding-bottom: 13px;
    }

    .op-legend {
        width: 100%;
    }

}


/* ==========================================================
   ZERO BAR · ACCOUNT + CONSUMPTION V0.6
   ========================================================== */

.op-account-back {
    padding: 0;
    margin-bottom: 20px;

    border: 0;
    background: transparent;

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

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

    cursor: pointer;
}

.op-account-back:hover {
    color: white;
}

.op-account-summary {
    padding: 18px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;

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

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(10,102,169,.18),
            transparent 60%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.03)
        );
}

.op-account-summary span {
    font-size: 9px;
    letter-spacing: .13em;

    color: rgba(255,255,255,.35);
}

.op-account-summary h3 {
    margin: 5px 0 0;

    font-size: 22px;
    letter-spacing: -.035em;
}

.op-account-summary > strong {
    font-size: 25px;
    letter-spacing: -.04em;
}

.op-consumption-section {
    margin-top: 25px;
}

.op-add-consumption {
    min-height: 32px;
    padding: 0 11px;

    border: 1px solid rgba(10,102,169,.35);
    border-radius: 10px;

    background: rgba(10,102,169,.16);
    color: white;

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

    cursor: pointer;
}

.op-consumption-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.op-consumption-empty {
    padding: 28px 18px;

    display: flex;
    flex-direction: column;

    border: 1px dashed rgba(255,255,255,.10);
    border-radius: 15px;

    text-align: center;
}

.op-consumption-empty strong {
    font-size: 13px;
}

.op-consumption-empty span {
    margin-top: 5px;

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

    font-size: 11px;
    line-height: 1.45;
}

.op-consumption-row {
    padding: 13px 14px;

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

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

.op-consumption-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.op-consumption-main > div:first-child {
    display: flex;
    flex-direction: column;
}

.consumption-name {
    font-size: 13px;
}

.consumption-person {
    margin-top: 3px;

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

    font-size: 10px;
}

.op-consumption-price {
    font-size: 13px;
    font-weight: 700;
}

.op-consumption-meta {
    margin-top: 10px;

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

    padding-top: 9px;

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

.consumption-qty {
    color: rgba(255,255,255,.42);

    font-size: 9px;
}

.consumption-remove {
    border: 0;
    background: transparent;

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

    font-size: 9px;

    cursor: pointer;
}

.consumption-remove:hover {
    color: white;
}

.op-stock-warning {
    margin-top: 9px;
    padding: 7px 9px;

    border-radius: 9px;

    background: rgba(213,155,55,.10);

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

    font-size: 9px;
    line-height: 1.4;
}

.op-account-actions {
    margin-top: 26px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.op-account-actions button {
    min-height: 43px;

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

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

    color: rgba(255,255,255,.24);
}

.op-catalog-head span {
    font-size: 9px;
    letter-spacing: .13em;

    color: rgba(255,255,255,.35);
}

.op-catalog-head h3 {
    margin: 5px 0 17px;

    font-size: 26px;
    letter-spacing: -.04em;
}

.op-product-search {
    width: 100%;
    height: 44px;

    padding: 0 13px;

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

    background: rgba(255,255,255,.045);
    color: white;

    outline: none;
}

.op-category-list {
    margin: 12px 0 15px;

    display: flex;
    gap: 6px;

    overflow-x: auto;
    scrollbar-width: none;
}

.op-category-list::-webkit-scrollbar {
    display: none;
}

.op-category-list button {
    min-height: 31px;
    padding: 0 11px;

    flex: 0 0 auto;

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

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

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

    font-size: 9px;

    cursor: pointer;
}

.op-category-list button.active {
    border-color: rgba(10,102,169,.35);

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

    color: white;
}

.op-product-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.op-product-card {
    min-height: 75px;
    padding: 11px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.025)
        );

    color: white;

    text-align: left;

    cursor: pointer;
}

.op-product-card:hover {
    border-color: rgba(255,255,255,.20);
}

.op-product-card > div {
    display: flex;
    flex-direction: column;
}

.product-name {
    font-size: 12px;
}

.product-stock {
    margin-top: 3px;

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

    font-size: 8px;
}

.product-stock.warning {
    color: rgba(255,215,145,.70);
}

.product-stock.out {
    color: rgba(255,180,180,.64);
}

.product-price {
    margin-top: 9px;

    font-size: 11px;
}

.op-product-config {
    margin-top: 18px;
    padding-top: 18px;

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

.op-selected-product {
    display: flex;
    justify-content: space-between;
    gap: 15px;

    margin-bottom: 16px;
}

.op-selected-product > div {
    display: flex;
    flex-direction: column;
}

.op-selected-product span {
    margin-top: 3px;

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

    font-size: 9px;
}

.op-config-row {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 10px;
}

.op-config-row label {
    display: block;

    margin-bottom: 6px;

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

    font-size: 9px;
}

.op-config-row input {
    width: 100%;
    height: 42px;

    padding: 0 11px;

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

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

    color: white;
}

.op-qty-control {
    height: 42px;

    display: grid;
    grid-template-columns: 36px 1fr 36px;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
}

.op-qty-control button {
    border: 0;

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

    color: white;

    cursor: pointer;
}

.op-qty-control strong {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 12px;
}

.op-confirm-product {
    width: 100%;
    height: 45px;

    margin-top: 13px;

    border: 0;
    border-radius: 13px;

    background:
        linear-gradient(
            180deg,
            #0d78bd,
            #0a66a9
        );

    color: white;

    font-weight: 700;

    cursor: pointer;
}

@media (max-width: 520px) {

    .op-product-list {
        grid-template-columns: 1fr;
    }

    .op-config-row {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================
   ZERO BAR · OPERATIONAL BAR V0.6C
   ========================================================== */

.zb-operational-bar {
    border-radius: 18px !important;

    border-color:
        rgba(10,102,169,.38) !important;

    background:
        linear-gradient(
            145deg,
            rgba(10,102,169,.20),
            rgba(255,255,255,.055)
        ) !important;
}

.zb-operational-bar .zb-table-name {
    font-size: 15px;
}

.op-table-bar {
    border-radius: 18px !important;

    background:
        linear-gradient(
            145deg,
            rgba(10,102,169,.15),
            rgba(255,255,255,.035)
        );
}

.op-table-bar.free {
    border-color:
        rgba(10,102,169,.30);
}

.op-table-bar.occupied {
    border-color:
        rgba(10,102,169,.75);

    box-shadow:
        0 0 0 1px rgba(10,102,169,.12),
        0 20px 46px rgba(0,0,0,.28);
}



/* ==========================================================
   ZERO BAR · PEDIDO MÚLTIPLE V0.6D2
   ========================================================== */

.op-product-card.in-order {
    border-color:
        rgba(10,102,169,.52);

    background:
        linear-gradient(
            145deg,
            rgba(10,102,169,.14),
            rgba(255,255,255,.035)
        );
}

.op-product-order-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.op-product-add {
    font-size: 8px;
    color: rgba(255,255,255,.38);
}

.op-product-card.in-order
.op-product-add {
    color: rgba(116,190,255,.90);
}

.op-draft-order {
    position: sticky;
    bottom: 0;
    z-index: 10;

    margin-top: 14px;
    padding: 14px;

    border:
        1px solid rgba(10,102,169,.34);

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(24,30,37,.96),
            rgba(12,16,21,.98)
        );

    box-shadow:
        0 -18px 50px rgba(0,0,0,.30);

    backdrop-filter:
        blur(24px);

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

.op-draft-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;

    margin-bottom: 10px;
}

.op-draft-head > div {
    display: flex;
    flex-direction: column;
}

.op-draft-head span {
    font-size: 8px;
    letter-spacing: .13em;

    color:
        rgba(255,255,255,.35);
}

.op-draft-head > div strong {
    margin-top: 3px;
    font-size: 12px;
}

.op-draft-head > strong {
    font-size: 17px;
}

.op-draft-lines,
.op-review-lines {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.op-draft-line,
.op-review-line {
    min-height: 56px;
    padding: 9px 10px;

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

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

    border-radius: 12px;

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

.op-draft-line > div:first-child,
.op-review-line > div:first-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.op-draft-line > div:first-child strong,
.op-review-line > div:first-child strong {
    font-size: 11px;
}

.op-draft-line > div:first-child span,
.op-review-line > div:first-child span {
    margin-top: 2px;

    font-size: 8px;

    color:
        rgba(255,255,255,.40);
}

.op-draft-line > div:last-child,
.op-review-line > div:last-child {
    display: flex;
    align-items: center;
    gap: 9px;
}

.op-draft-qty {
    height: 30px;

    display: grid;

    grid-template-columns:
        28px 28px 28px;

    overflow: hidden;

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

    border-radius: 9px;
}

.op-draft-qty button {
    border: 0;

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

    color: white;

    cursor: pointer;
}

.op-draft-qty strong {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 9px;
}

.op-draft-line-total {
    min-width: 62px;

    text-align: right;

    font-size: 10px;
}

.op-review-order {
    width: 100%;
    min-height: 43px;

    margin-top: 11px;

    border: 0;
    border-radius: 12px;

    background: #0a66a9;
    color: white;

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

    cursor: pointer;
}

.op-order-review {
    padding-top: 4px;
}

.op-review-heading {
    margin-top: 18px;
}

.op-review-heading span {
    font-size: 8px;
    letter-spacing: .13em;

    color:
        rgba(255,255,255,.34);
}

.op-review-heading h3 {
    margin:
        5px 0 5px;

    font-size: 27px;
    letter-spacing: -.04em;
}

.op-review-heading p {
    margin:
        0 0 17px;

    font-size: 10px;
    line-height: 1.45;

    color:
        rgba(255,255,255,.43);
}

.op-review-line {
    min-height: 62px;
}

.op-review-total {
    margin-top: 15px;
    padding: 15px 2px;

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

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

.op-review-total span {
    font-size: 10px;

    color:
        rgba(255,255,255,.44);
}

.op-review-total strong {
    font-size: 22px;
    letter-spacing: -.035em;
}

#opConfirmOrder {
    width: 100%;
    margin-top: 4px;
}

#opConfirmOrder:disabled {
    opacity: .55;
    cursor: wait;
}


@media (max-width: 680px) {

    .op-draft-order {
        margin-left: -2px;
        margin-right: -2px;
        padding: 12px;
    }

    .op-draft-line {
        align-items: flex-start;
    }

    .op-draft-line > div:last-child {
        flex-direction: column;
        align-items: flex-end;
    }

    .op-review-heading h3 {
        font-size: 24px;
    }

}



/* ==========================================================
   ZERO BAR · ÁREAS INDEPENDIENTES · V0.6E1
   Un objeto de otra área nunca debe ocupar/renderizar espacio.
   ========================================================== */

[data-op-area][hidden] {
    display: none !important;
}



.op-area-hidden {
    display: none !important;
}



/* ==========================================================
   ZERO BAR · EDITOR POR ÁREAS · V0.6E1B
   ========================================================== */

#zbStage [data-kind][hidden],
#zbStage .zb-area-hidden {
    display: none !important;
}

.zb-area-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-top: 10px;
}

.zb-area-actions .zb-btn {
    margin: 0;
}

.zb-remove-area {
    min-width: 42px;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 18px;
}



/* ==========================================================
   ZERO BAR · JORNADA · V0.6E2C
   ========================================================== */

.op-shift-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.075),
            rgba(255,255,255,0.025)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 14px 35px rgba(0,0,0,0.16);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.op-shift-status {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 160px;
}

.op-shift-status > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.op-shift-status small {
    font-size: 9px;
    letter-spacing: 0.13em;
    color: rgba(255,255,255,0.44);
}

.op-shift-status strong {
    font-size: 13px;
    font-weight: 650;
    color: rgba(255,255,255,0.94);
}

.op-shift-status span:not(.op-shift-dot) {
    font-size: 11px;
    color: rgba(255,255,255,0.52);
}

.op-shift-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: rgba(255,255,255,0.22);
    box-shadow:
        0 0 0 4px rgba(255,255,255,0.04);
}

.op-shift-dot.active {
    background: #4fb9ff;
    box-shadow:
        0 0 0 4px rgba(79,185,255,0.10),
        0 0 16px rgba(79,185,255,0.42);
}

.op-shift-action {
    appearance: none;
    border: 1px solid rgba(92,190,255,0.22);
    border-radius: 12px;
    padding: 9px 12px;
    background: rgba(41,143,210,0.12);
    color: rgba(235,248,255,0.94);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}

.op-shift-action:hover {
    background: rgba(41,143,210,0.20);
    border-color: rgba(92,190,255,0.36);
    transform: translateY(-1px);
}

.op-shift-action.dangerless {
    background: rgba(255,255,255,0.045);
    border-color: rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.68);
}

.op-shift-action.dangerless:hover {
    background: rgba(255,255,255,0.075);
    border-color: rgba(255,255,255,0.16);
    color: rgba(255,255,255,0.90);
}

.op-shift-action:disabled {
    opacity: 0.48;
    cursor: wait;
    transform: none;
}


@media (max-width: 900px) {

    .op-header {
        gap: 14px;
    }

    .op-shift-card {
        width: 100%;
        justify-content: space-between;
    }

}


@media (max-width: 600px) {

    .op-shift-card {
        align-items: stretch;
        flex-direction: column;
    }

    .op-shift-action {
        width: 100%;
    }

}



/* ==========================================================
   ZERO BAR · COBRO · V0.6F1
   ========================================================== */

.op-payment-modal[hidden] {
    display: none !important;
}

.op-payment-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    padding: 20px;
}

.op-payment-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 7, 12, 0.70);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.op-payment-card {
    position: relative;
    z-index: 1;
    width: min(440px, 100%);
    padding: 26px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 26px;
    background:
        linear-gradient(
            145deg,
            rgba(24,35,45,0.96),
            rgba(10,17,24,0.94)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.09),
        0 30px 90px rgba(0,0,0,0.50);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
}

.op-payment-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.72);
    font-size: 20px;
    cursor: pointer;
}

.op-payment-kicker {
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: rgba(90,190,255,0.72);
}

.op-payment-card h2 {
    margin: 0;
    font-size: 25px;
    font-weight: 650;
    color: rgba(255,255,255,0.96);
}

.op-payment-name {
    margin: 6px 0 22px;
    color: rgba(255,255,255,0.52);
}

.op-payment-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.op-payment-total span {
    color: rgba(255,255,255,0.52);
}

.op-payment-total strong {
    font-size: 28px;
    font-weight: 650;
    color: rgba(255,255,255,0.97);
}

.op-payment-label {
    margin: 22px 0 10px;
    font-size: 11px;
    font-weight: 650;
    color: rgba(255,255,255,0.58);
}

.op-payment-methods {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.op-payment-methods button {
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
    background: rgba(255,255,255,0.045);
    color: rgba(255,255,255,0.78);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition:
        background 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}

.op-payment-methods button:hover {
    background: rgba(255,255,255,0.075);
    transform: translateY(-1px);
}

.op-payment-methods button.selected {
    border-color: rgba(80,185,255,0.48);
    background: rgba(49,151,220,0.16);
    color: rgba(240,250,255,0.98);
    box-shadow:
        inset 0 0 0 1px
        rgba(80,185,255,0.10);
}

.op-payment-selected {
    min-height: 18px;
    margin-top: 12px;
    font-size: 11px;
    color: rgba(255,255,255,0.48);
}

.op-payment-confirm {
    width: 100%;
    min-height: 50px;
    margin-top: 18px;
    border: 1px solid rgba(78,186,255,0.30);
    border-radius: 15px;
    background:
        linear-gradient(
            135deg,
            rgba(38,144,215,0.88),
            rgba(31,111,176,0.88)
        );
    color: white;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    box-shadow:
        0 12px 30px
        rgba(17,105,165,0.20);
}

.op-payment-confirm:disabled {
    opacity: 0.36;
    cursor: not-allowed;
    box-shadow: none;
}


@media (max-width: 520px) {

    .op-payment-card {
        padding: 22px 18px 18px;
        border-radius: 22px;
    }

    .op-payment-methods {
        grid-template-columns: 1fr;
    }

}



/* ==========================================================
   ZERO BAR · COBRAR ACTIVO · V0.6F1B
   ========================================================== */

.op-account-actions #opChargeAccount {
    border-color: rgba(74, 183, 255, 0.28);
    background:
        linear-gradient(
            135deg,
            rgba(36, 145, 218, 0.88),
            rgba(27, 105, 171, 0.88)
        );
    color: rgba(255, 255, 255, 0.96);
    font-weight: 650;
    cursor: pointer;
    box-shadow:
        0 10px 26px
        rgba(17, 105, 165, 0.18);

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;
}


.op-account-actions #opChargeAccount:hover {
    transform: translateY(-1px);

    border-color:
        rgba(92, 196, 255, 0.46);

    box-shadow:
        0 14px 32px
        rgba(17, 105, 165, 0.26);
}


.op-account-actions #opChargeAccount:active {
    transform: translateY(0);
}


.op-account-actions button:disabled {
    color: rgba(255, 255, 255, 0.24);
    cursor: not-allowed;
    opacity: 0.72;
}



/* ==========================================================
   ZERO BAR · CORTE / PRE-CUENTA · V0.6F2
   ========================================================== */

#opCutView[hidden] {
    display: none !important;
}


/* Botón Corte activo */

.op-account-actions #opCutAccount {
    border-color:
        rgba(255,255,255,.12);

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

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

    font-weight: 600;

    cursor: pointer;

    transition:
        transform 160ms ease,
        background 160ms ease,
        border-color 160ms ease;
}


.op-account-actions #opCutAccount:hover {
    transform:
        translateY(-1px);

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

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


/* Hoja de corte */

.op-cut-sheet {
    margin-top: 18px;

    padding: 22px 19px;

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

    border-radius: 21px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025)
        );

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


.op-cut-brand {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding-bottom: 19px;

    text-align: center;
}


.op-cut-brand span {
    font-size: 9px;
    font-weight: 700;

    letter-spacing: .18em;

    color:
        rgba(93,190,255,.72);
}


.op-cut-brand strong {
    margin-top: 5px;

    font-size: 16px;

    letter-spacing: .02em;

    color:
        rgba(255,255,255,.92);
}


.op-cut-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 18px;
}


.op-cut-header span,
.op-cut-table span {
    display: block;

    margin-bottom: 4px;

    font-size: 8px;

    letter-spacing: .13em;

    color:
        rgba(255,255,255,.32);
}


.op-cut-header h3 {
    margin: 0;

    font-size: 20px;

    letter-spacing: -.03em;
}


.op-cut-table {
    text-align: right;
}


.op-cut-table strong {
    font-size: 12px;

    color:
        rgba(255,255,255,.72);
}


.op-cut-rule {
    height: 1px;

    margin: 18px 0;

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


.op-cut-columns {
    display: flex;
    justify-content: space-between;

    margin-bottom: 8px;

    font-size: 8px;

    letter-spacing: .10em;

    text-transform: uppercase;

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


.op-cut-lines {
    display: flex;
    flex-direction: column;
}


.op-cut-line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;

    padding: 11px 0;

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


.op-cut-line:last-child {
    border-bottom: 0;
}


.op-cut-line > div {
    min-width: 0;

    display: flex;
    flex-direction: column;
}


.op-cut-line > div strong {
    font-size: 12px;

    color:
        rgba(255,255,255,.87);
}


.op-cut-line > div span {
    margin-top: 3px;

    font-size: 9px;

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


.op-cut-line-total {
    flex: 0 0 auto;

    font-size: 12px;

    color:
        rgba(255,255,255,.88);
}


.op-cut-empty {
    padding: 24px 0;

    text-align: center;

    font-size: 11px;

    color:
        rgba(255,255,255,.36);
}


.op-cut-total {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


.op-cut-total span {
    font-size: 11px;

    color:
        rgba(255,255,255,.48);
}


.op-cut-total strong {
    font-size: 27px;

    letter-spacing: -.04em;

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


.op-cut-note {
    margin:
        17px 0 0;

    padding-top: 14px;

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

    text-align: center;

    font-size: 9px;

    line-height: 1.5;

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


.op-cut-return {
    width: 100%;

    min-height: 44px;

    margin-top: 12px;

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

    border-radius: 13px;

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

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

    font: inherit;

    font-size: 11px;

    cursor: pointer;
}


.op-cut-return:hover {
    background:
        rgba(255,255,255,.075);

    color: white;
}



/* ZERO BAR · SHARED MINI · V0.6F3A3R */

.op-shared-mini {
    display: flex;
    flex-direction: column;
    gap: 14px;

    margin-bottom: 16px;
    padding: 16px;

    border: 1px solid
        rgba(73, 181, 255, .18);

    border-radius: 17px;

    background:
        rgba(30, 142, 218, .07);
}

.op-shared-mini > div {
    display: flex;
    flex-direction: column;
}

.op-shared-mini span {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .13em;

    color:
        rgba(90, 193, 255, .70);
}

.op-shared-mini strong {
    margin-top: 5px;

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

    font-size: 14px;
}

.op-shared-mini small {
    margin-top: 4px;

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

    font-size: 10px;
    line-height: 1.45;
}

#opSharedAction {
    min-height: 42px;

    border:
        1px solid rgba(65, 180, 255, .24);

    border-radius: 12px;

    background:
        rgba(32, 151, 229, .12);

    color:
        rgba(138, 213, 255, .96);

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

    cursor: pointer;
}

#opSharedAction:hover {
    background:
        rgba(32, 151, 229, .18);
}

#opSharedAction:disabled {
    opacity: .45;
    cursor: wait;
}



/* ZERO BAR · CUENTA COMPARTIDA · V0.6F3A4 */

.op-account-card-shared {
    border-color:
        rgba(76, 190, 255, .22);

    background:
        linear-gradient(
            135deg,
            rgba(31, 137, 204, .10),
            rgba(255, 255, 255, .025)
        );
}

.op-account-card-shared .account-name::after {
    content: "COMPARTIDA";

    display: inline-block;

    margin-left: 8px;
    padding: 2px 6px;

    border-radius: 999px;

    background:
        rgba(48, 168, 236, .11);

    color:
        rgba(108, 204, 255, .74);

    font-size: 7px;
    font-weight: 700;
    letter-spacing: .10em;
    vertical-align: middle;
}



/* ==========================================================
   ZERO BAR · SPLIT UI · V0.6F3B2C
   ========================================================== */

#opSplitAccount {
    border:
        1px solid rgba(84, 190, 255, .20);

    background:
        rgba(48, 148, 214, .08);

    color:
        rgba(198, 235, 255, .92);
}

.op-split-shell {
    display: grid;
    gap: 16px;
}

.op-split-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.op-split-head span,
.op-split-summary span,
.op-split-total-box span,
.op-split-unassigned-head span {
    display: block;

    font-size: 10px;
    letter-spacing: .12em;

    color:
        rgba(255, 255, 255, .42);
}

.op-split-head h3 {
    margin: 4px 0 0;
}

.op-split-total-box {
    text-align: right;
}

.op-split-total-box strong {
    display: block;
    margin-top: 4px;
    font-size: 20px;
}

.op-split-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.op-split-summary > div {
    padding: 12px 14px;

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

    border-radius: 14px;

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

.op-split-summary strong {
    display: block;
    margin-top: 4px;
}

.op-split-create {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.op-split-create input {
    min-width: 0;

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

    border-radius: 12px;

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

    color: inherit;

    padding: 12px 14px;
}

.op-split-create button {
    border:
        1px solid rgba(77, 190, 255, .18);

    border-radius: 12px;

    background:
        rgba(52, 157, 219, .10);

    color:
        rgba(210, 240, 255, .94);

    padding: 0 14px;
}

.op-split-people {
    display: grid;
    gap: 8px;
}

.op-split-person-card {
    padding: 12px 14px;

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

    border-radius: 14px;

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

.op-split-person-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.op-split-person-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;

    margin-top: 7px;

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

    font-size: 11px;
}

.op-split-empty {
    padding: 14px;

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

    border-radius: 14px;

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

    text-align: center;
}

.op-split-unassigned-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: end;

    margin-top: 2px;
}

.op-split-unassigned-head strong {
    font-size: 12px;
    font-weight: 500;

    color:
        rgba(255, 255, 255, .56);
}

.op-split-consumptions {
    display: grid;
    gap: 10px;
}

.op-split-consumption-card {
    padding: 13px;

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

    border-radius: 15px;

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

.op-split-consumption-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.op-split-consumption-head > div:first-child {
    display: grid;
    gap: 3px;
}

.op-split-consumption-head span {
    font-size: 11px;

    color:
        rgba(255, 255, 255, .45);
}

.op-split-availability {
    text-align: right;
}

.op-split-availability strong {
    display: block;
    margin-top: 2px;
}

.op-split-assign-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 12px;

    padding-top: 10px;
    margin-top: 10px;

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

.op-split-qty-controls {
    display: grid;
    grid-template-columns: 32px 34px 32px;
    gap: 5px;
    align-items: center;
}

.op-split-qty-controls button {
    width: 32px;
    height: 32px;

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

    border-radius: 10px;

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

    color: inherit;

    font-size: 18px;
}

.op-split-qty-controls button:disabled {
    opacity: .28;
}

.op-split-qty-controls strong {
    text-align: center;
}

@media (max-width: 640px) {

    .op-split-create {
        grid-template-columns: 1fr;
    }

    .op-split-create button {
        min-height: 44px;
    }

}



/* ==========================================================
   ZERO BAR · SPLIT POLISH · V0.6F3B2D
   ========================================================== */

.op-split-person-identity {
    display: grid;
    gap: 4px;
}

.op-split-person-state {
    width: max-content;

    padding: 2px 6px;

    border-radius: 999px;

    border:
        1px solid rgba(87, 190, 255, .12);

    background:
        rgba(55, 155, 220, .06);

    color:
        rgba(135, 211, 255, .64);

    font-size: 7px;
    font-weight: 700;
    letter-spacing: .12em;
}

.op-split-person-card.is-paid {
    opacity: .68;

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

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

.op-split-person-card.is-paid
.op-split-person-state {
    color:
        rgba(255, 255, 255, .54);

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

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



/* ==========================================================
   ZERO BAR · SPLIT PAYMENT · V0.6F3C2B
   ========================================================== */

.op-split-pay-button {
    width: 100%;

    margin-top: 12px;
    padding: 10px 12px;

    border:
        1px solid rgba(83, 191, 255, .18);

    border-radius: 11px;

    background:
        rgba(47, 157, 224, .09);

    color:
        rgba(211, 241, 255, .94);

    font-weight: 650;

    cursor: pointer;
}

.op-split-pay-button:hover {
    background:
        rgba(47, 157, 224, .14);
}



/* ==========================================================
   ZERO BAR · SPLIT BALANCE · V0.6F3C2C-R
   ========================================================== */

.op-split-remainder {
    width: 100%;

    margin:
        12px 0 4px;

    padding:
        11px 14px;

    border:
        1px solid rgba(92, 199, 255, .14);

    border-radius:
        12px;

    background:
        rgba(49, 161, 224, .055);

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

    font-weight:
        650;

    cursor:
        pointer;
}

.op-split-remainder:hover {
    background:
        rgba(49, 161, 224, .1);
}



/* ==========================================================
   ZERO BAR · OPERATION DRAWER SCROLL · V1
   Permite cuentas largas, splits y catálogos sin cortar
   contenido fuera de la pantalla.
   ========================================================== */

@media (min-width: 761px) {

    .operation-drawer,
    .op-drawer,
    #operationDrawer,
    #opDrawer {
        max-height: 100dvh;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

}


/* Fallback específico para las vistas internas.
   Si el contenedor exterior usa otro nombre, la pantalla
   de separación igualmente puede desplazarse. */

#opSplitView {
    max-height: calc(100dvh - 110px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;

    padding-bottom: 32px;
}


/* Scroll discreto, coherente con Zero. */

#opSplitView::-webkit-scrollbar,
.operation-drawer::-webkit-scrollbar,
.op-drawer::-webkit-scrollbar,
#operationDrawer::-webkit-scrollbar,
#opDrawer::-webkit-scrollbar {
    width: 7px;
}

#opSplitView::-webkit-scrollbar-track,
.operation-drawer::-webkit-scrollbar-track,
.op-drawer::-webkit-scrollbar-track,
#operationDrawer::-webkit-scrollbar-track,
#opDrawer::-webkit-scrollbar-track {
    background: transparent;
}

#opSplitView::-webkit-scrollbar-thumb,
.operation-drawer::-webkit-scrollbar-thumb,
.op-drawer::-webkit-scrollbar-thumb,
#operationDrawer::-webkit-scrollbar-thumb,
#opDrawer::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .13);
    border-radius: 999px;
}

#opSplitView::-webkit-scrollbar-thumb:hover,
.operation-drawer::-webkit-scrollbar-thumb:hover,
.op-drawer::-webkit-scrollbar-thumb:hover,
#operationDrawer::-webkit-scrollbar-thumb:hover,
#opDrawer::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .22);
}


/* Firefox */

#opSplitView,
.operation-drawer,
.op-drawer,
#operationDrawer,
#opDrawer {
    scrollbar-width: thin;
    scrollbar-color:
        rgba(255, 255, 255, .16)
        transparent;
}



/* ==========================================================
   ZERO BAR · DELIVERY + VOID UI · V0.6F4B-R
   ========================================================== */

.op-consumption-state-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.op-consumption-trace {
    display: block;
    max-width: 220px;

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

    font-size: 11px;

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

.op-consumption-delivered {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    padding:
        4px 8px;

    border:
        1px solid
        rgba(99, 210, 255, .14);

    border-radius: 999px;

    background:
        rgba(70, 173, 224, .08);

    color:
        rgba(196, 237, 255, .92);

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

.op-consumption-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 7px;

    flex-wrap: wrap;
}

.consumption-deliver {
    padding:
        7px 10px;

    border:
        1px solid
        rgba(94, 204, 255, .18);

    border-radius: 9px;

    background:
        rgba(57, 166, 221, .08);

    color:
        rgba(205, 241, 255, .94);

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

    cursor: pointer;
}

.consumption-deliver:hover {
    background:
        rgba(57, 166, 221, .14);
}

.consumption-deliver:disabled {
    opacity: .5;
    cursor: wait;
}


.zb-void-modal[hidden] {
    display: none !important;
}

.zb-void-modal {
    position: fixed;
    inset: 0;

    z-index: 99999;

    display: grid;
    place-items: center;

    padding: 20px;
}

.zb-void-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(4, 8, 13, .68);

    backdrop-filter:
        blur(13px);
}

.zb-void-card {
    position: relative;
    z-index: 1;

    width:
        min(470px, 100%);

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

    overflow-y: auto;

    padding: 20px;

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

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(29, 36, 46, .96),
            rgba(13, 18, 25, .96)
        );

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

    color:
        rgba(255, 255, 255, .93);
}

.zb-void-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 16px;
}

.zb-void-head span {
    display: block;

    margin-bottom: 5px;

    font-size: 10px;
    font-weight: 750;
    letter-spacing: .13em;

    color:
        rgba(129, 211, 255, .74);
}

.zb-void-head h3 {
    margin: 0;

    font-size: 21px;
    font-weight: 720;
}

.zb-void-x {
    width: 34px;
    height: 34px;

    flex:
        0 0 auto;

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

    border-radius: 50%;

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

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

    font-size: 20px;

    cursor: pointer;
}

.zb-void-explain {
    margin:
        14px 0 18px;

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

    font-size: 13px;
    line-height: 1.5;
}

.zb-void-field {
    display: grid;
    gap: 7px;

    margin-top: 14px;
}

.zb-void-field > span {
    font-size: 12px;
    font-weight: 650;

    color:
        rgba(255, 255, 255, .68);
}

.zb-void-field select,
.zb-void-field textarea {
    box-sizing: border-box;

    width: 100%;

    padding:
        11px 12px;

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

    border-radius: 11px;

    outline: none;

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

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

    font: inherit;
}

.zb-void-field select option {
    background:
        rgb(23, 29, 37);

    color: white;
}

.zb-void-field textarea {
    resize: vertical;
    min-height: 72px;
}

.zb-void-stock {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    margin-top: 18px;

    padding: 13px;

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

    border-radius: 12px;

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

    cursor: pointer;
}

.zb-void-stock input {
    margin-top: 3px;
}

.zb-void-stock span {
    display: grid;
    gap: 3px;
}

.zb-void-stock strong {
    font-size: 13px;
}

.zb-void-stock small {
    color:
        rgba(255, 255, 255, .48);

    line-height: 1.4;
}

.zb-void-warning {
    margin-top: 10px;

    font-size: 11px;
    line-height: 1.45;

    color:
        rgba(255, 255, 255, .42);
}

.zb-void-actions {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;

    margin-top: 20px;
}

.zb-void-cancel,
.zb-void-confirm {
    min-height: 42px;

    border-radius: 11px;

    font-weight: 700;

    cursor: pointer;
}

.zb-void-cancel {
    border:
        1px solid
        rgba(255, 255, 255, .09);

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

    color:
        rgba(255, 255, 255, .68);
}

.zb-void-confirm {
    border:
        1px solid
        rgba(92, 201, 255, .18);

    background:
        rgba(48, 157, 216, .13);

    color:
        rgba(213, 243, 255, .96);
}

.zb-void-confirm:disabled {
    opacity: .5;
    cursor: wait;
}

body.zb-modal-open {
    overflow: hidden;
}


@media (max-width: 600px) {

    .zb-void-modal {
        align-items: end;

        padding: 12px;
    }

    .zb-void-card {
        width: 100%;

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

    .zb-void-actions {
        grid-template-columns:
            1fr;
    }

}



/* ==========================================================
   ZERO_BAR_DELIVERY_WARNING_MODAL_R6D
   ========================================================== */

.op-delivery-warning-card {
    width: min(92vw, 520px);
}

.op-delivery-warning-copy {
    margin: 8px 0 18px;
    line-height: 1.55;
    opacity: .72;
}

.op-delivery-warning-items {
    display: grid;
    gap: 8px;
    margin: 0 0 18px;
}

.op-delivery-warning-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .035);
}

.op-delivery-warning-item strong {
    min-width: 42px;
    font-variant-numeric: tabular-nums;
}

.op-delivery-warning-item span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.op-delivery-warning-note {
    padding: 13px 14px;
    margin-bottom: 18px;
    border-radius: 14px;
    border: 1px solid rgba(10, 102, 169, .25);
    background: rgba(10, 102, 169, .08);
    line-height: 1.45;
    font-size: .9rem;
    opacity: .82;
}

.op-delivery-warning-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.op-delivery-warning-actions button {
    min-height: 48px;
    border-radius: 14px;
}

.op-delivery-warning-back {
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .04);
    color: inherit;
    cursor: pointer;
}

@media (max-width: 560px) {

    .op-delivery-warning-actions {
        grid-template-columns: 1fr;
    }

}



/* ==========================================================
   ZERO_BAR_DELIVERY_WARNING_LAYER_R6F
   El warning debe estar sobre cualquier modal de cobro.
   ========================================================== */

#opDeliveryWarningModal {
    z-index: 100000;
}

#opDeliveryWarningModal
.op-payment-backdrop {
    z-index: 0;
}

#opDeliveryWarningModal
.op-delivery-warning-card {
    z-index: 1;
}




/* ==========================================================
   ZERO_BAR_CAJA_CSS_G1
   Centro de Caja
   ========================================================== */

.zb-caja-page {
    width: min(1440px, calc(100% - 40px));
    margin: 0 auto;
    padding: 34px 0 70px;
}

.zb-caja-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.zb-caja-heading h1 {
    margin: 7px 0 4px;
    font-size: clamp(30px, 4vw, 46px);
    letter-spacing: -.035em;
}

.zb-caja-heading p {
    margin: 0;
    color: rgba(255,255,255,.48);
}

.zb-caja-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.zb-caja-nav-link,
.zb-caja-refresh {
    min-height: 42px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 13px;
    background: rgba(255,255,255,.045);
    color: rgba(255,255,255,.86);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.zb-caja-nav-link:hover,
.zb-caja-refresh:hover {
    background: rgba(255,255,255,.075);
}

.zb-caja-refresh:disabled {
    opacity: .48;
    cursor: default;
}

.zb-caja-shift {
    min-height: 68px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 17px;
    margin-bottom: 16px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.022)
        );
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.zb-caja-shift-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    box-shadow: 0 0 0 5px rgba(255,255,255,.035);
}

.zb-caja-shift-dot.active {
    background: rgba(65,173,245,.95);
    box-shadow:
        0 0 0 5px rgba(10,102,169,.12),
        0 0 18px rgba(52,157,229,.42);
}

.zb-caja-shift small {
    display: block;
    margin-bottom: 3px;
    font-size: 9px;
    letter-spacing: .16em;
    color: rgba(255,255,255,.40);
}

.zb-caja-shift strong {
    font-size: 14px;
    color: rgba(255,255,255,.86);
}

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

.zb-caja-metric {
    min-height: 116px;
    padding: 19px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(255,255,255,.085);
    border-radius: 20px;
    background:
        linear-gradient(
            145deg,
            rgba(31,38,47,.72),
            rgba(13,17,23,.68)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 18px 46px rgba(0,0,0,.15);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.zb-caja-metric.primary {
    border-color: rgba(56,158,228,.24);
    background:
        linear-gradient(
            145deg,
            rgba(25,63,91,.72),
            rgba(12,27,39,.74)
        );
}

.zb-caja-metric span {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
    color: rgba(255,255,255,.42);
}

.zb-caja-metric strong {
    font-size: clamp(22px, 2.6vw, 31px);
    letter-spacing: -.035em;
    color: rgba(255,255,255,.95);
}

.zb-caja-toolbar {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 16px;
    margin-bottom: 12px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 18px;
    background: rgba(255,255,255,.025);
}

.zb-caja-toolbar > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.zb-caja-toolbar strong {
    font-size: 15px;
}

.zb-caja-toolbar span {
    font-size: 12px;
    color: rgba(255,255,255,.42);
}

.zb-caja-search-wrap {
    width: min(340px, 100%);
}

.zb-caja-search {
    width: 100%;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 13px;
    outline: none;
    background: rgba(0,0,0,.16);
    color: rgba(255,255,255,.90);
    font: inherit;
}

.zb-caja-search:focus {
    border-color: rgba(58,158,226,.42);
    box-shadow: 0 0 0 3px rgba(10,102,169,.09);
}

.zb-caja-search::placeholder {
    color: rgba(255,255,255,.30);
}

.zb-caja-list {
    display: grid;
    gap: 10px;
}

.zb-caja-account {
    padding: 18px 19px 15px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 20px;
    background:
        linear-gradient(
            145deg,
            rgba(27,33,41,.74),
            rgba(12,16,21,.74)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.zb-caja-account-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.zb-caja-location {
    display: block;
    margin-bottom: 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
    color: rgba(89,180,242,.66);
}

.zb-caja-account-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.zb-caja-account-title h2 {
    margin: 0;
    font-size: 21px;
    letter-spacing: -.025em;
}

.zb-caja-badge {
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 999px;
    background: rgba(255,255,255,.035);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .12em;
    color: rgba(255,255,255,.44);
}

.zb-caja-badge.shared {
    border-color: rgba(52,155,226,.18);
    background: rgba(10,102,169,.08);
    color: rgba(102,191,252,.68);
}

.zb-caja-account-total {
    font-size: 23px;
    letter-spacing: -.035em;
    white-space: nowrap;
}

.zb-caja-account-status {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

.zb-caja-status {
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 10px;
    background: rgba(255,255,255,.035);
    color: rgba(255,255,255,.50);
}

.zb-caja-status.ok {
    background: rgba(38,133,105,.09);
    color: rgba(137,220,193,.74);
}

.zb-caja-status.warning {
    background: rgba(183,132,44,.10);
    color: rgba(239,203,136,.80);
}

.zb-caja-status.split {
    background: rgba(10,102,169,.09);
    color: rgba(112,194,248,.76);
}

.zb-caja-account-finance {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.zb-caja-account-finance > div {
    padding: 12px 13px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
}

.zb-caja-account-finance span {
    display: block;
    margin-bottom: 4px;
    font-size: 9px;
    letter-spacing: .12em;
    color: rgba(255,255,255,.36);
    text-transform: uppercase;
}

.zb-caja-account-finance strong {
    font-size: 16px;
}

.zb-caja-account-finance .pending {
    border-color: rgba(51,157,229,.15);
    background: rgba(10,102,169,.055);
}

.zb-caja-account-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid rgba(255,255,255,.06);
}

.zb-caja-account-actions > span {
    font-size: 11px;
    color: rgba(255,255,255,.34);
}

.zb-caja-open {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(63,163,232,.22);
    border-radius: 12px;
    background: rgba(10,102,169,.12);
    color: rgba(132,207,255,.84);
    font: inherit;
}

.zb-caja-open:disabled {
    opacity: .45;
    cursor: default;
}

.zb-caja-loading,
.zb-caja-empty {
    min-height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 30px;
    border: 1px dashed rgba(255,255,255,.08);
    border-radius: 20px;
    color: rgba(255,255,255,.42);
    text-align: center;
}

.zb-caja-empty strong {
    color: rgba(255,255,255,.78);
}

.zb-caja-empty span {
    max-width: 460px;
    font-size: 13px;
}


@media (max-width: 900px) {

    .zb-caja-metrics {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 620px) {

    .zb-caja-page {
        width: calc(100% - 24px);
        padding-top: 20px;
    }

    .zb-caja-header {
        flex-direction: column;
        align-items: stretch;
    }

    .zb-caja-header-actions {
        width: 100%;
    }

    .zb-caja-nav-link,
    .zb-caja-refresh {
        flex: 1;
    }

    .zb-caja-metrics {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .zb-caja-metric {
        min-height: 100px;
        padding: 15px;
    }

    .zb-caja-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .zb-caja-search-wrap {
        width: 100%;
    }

    .zb-caja-account-top {
        flex-direction: column;
        gap: 12px;
    }

    .zb-caja-account-total {
        font-size: 21px;
    }

    .zb-caja-account-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .zb-caja-open {
        width: 100%;
    }

}



/* ==========================================================
   ZERO_BAR_CAJA_DETAIL_CSS_G2A
   Drawer de cuenta
   ========================================================== */

html.zb-caja-drawer-open {
    overflow: hidden;
}

.zb-caja-drawer-layer[hidden] {
    display: none !important;
}

.zb-caja-drawer-layer {
    position: fixed;
    inset: 0;
    z-index: 90000;
}

.zb-caja-drawer-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(0,0,0,.58);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    cursor: default;
}

.zb-caja-drawer {
    position: absolute;
    top: 0;
    right: 0;
    width: min(560px, 100%);
    height: 100%;
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(255,255,255,.10);
    background:
        linear-gradient(
            150deg,
            rgba(23,31,39,.97),
            rgba(7,11,15,.98)
        );
    box-shadow:
        -28px 0 90px rgba(0,0,0,.46);
    backdrop-filter: blur(34px);
    -webkit-backdrop-filter: blur(34px);
}

.zb-caja-drawer-header {
    min-height: 102px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 23px 24px 18px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.zb-caja-drawer-location {
    display: block;
    margin-bottom: 5px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
    color: rgba(94,185,246,.68);
}

.zb-caja-drawer-header h2 {
    margin: 0;
    font-size: 25px;
    letter-spacing: -.03em;
}

.zb-caja-drawer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}

.zb-caja-drawer-close {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    background: rgba(255,255,255,.035);
    color: rgba(255,255,255,.72);
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

.zb-caja-drawer-close:hover {
    background: rgba(255,255,255,.07);
}

.zb-caja-drawer-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 20px 28px;
}

.zb-caja-detail-totals {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.zb-caja-detail-totals > div {
    min-height: 83px;
    padding: 13px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 15px;
    background: rgba(255,255,255,.028);
}

.zb-caja-detail-totals .pending {
    border-color: rgba(54,161,232,.20);
    background: rgba(10,102,169,.08);
}

.zb-caja-detail-totals span {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .13em;
    color: rgba(255,255,255,.38);
}

.zb-caja-detail-totals strong {
    font-size: 18px;
    letter-spacing: -.025em;
}

.zb-caja-detail-section {
    margin-top: 22px;
}

.zb-caja-detail-section-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    padding: 0 2px 10px;
}

.zb-caja-detail-section-title > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.zb-caja-detail-section-title > div > span {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .15em;
    color: rgba(255,255,255,.34);
}

.zb-caja-detail-section-title strong {
    font-size: 14px;
}

.zb-caja-detail-section-title > span {
    min-width: 27px;
    height: 27px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 999px;
    background: rgba(255,255,255,.035);
    font-size: 10px;
    color: rgba(255,255,255,.52);
}

.zb-caja-detail-lines {
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 17px;
    overflow: hidden;
}

.zb-caja-detail-line {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 14px;
    background: rgba(255,255,255,.018);
}

.zb-caja-detail-line
+ .zb-caja-detail-line {
    border-top: 1px solid rgba(255,255,255,.055);
}

.zb-caja-detail-product {
    min-width: 0;
}

.zb-caja-detail-product > strong {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
}

.zb-caja-detail-product > div {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.zb-caja-line-status {
    padding: 4px 6px;
    border-radius: 999px;
    font-size: 8px;
    background: rgba(255,255,255,.035);
    color: rgba(255,255,255,.42);
}

.zb-caja-line-status.delivered {
    background: rgba(38,133,105,.09);
    color: rgba(135,217,191,.72);
}

.zb-caja-line-status.registered {
    background: rgba(183,132,44,.10);
    color: rgba(237,199,128,.76);
}

.zb-caja-line-status.assigned {
    background: rgba(10,102,169,.10);
    color: rgba(111,194,249,.72);
}

.zb-caja-detail-numbers {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    text-align: right;
}

.zb-caja-detail-numbers span {
    font-size: 10px;
    color: rgba(255,255,255,.38);
}

.zb-caja-detail-numbers strong {
    font-size: 14px;
}

.zb-caja-detail-numbers small {
    font-size: 9px;
    color: rgba(101,188,246,.58);
}

.zb-caja-split-list {
    display: grid;
    gap: 7px;
}

.zb-caja-split-row {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 11px 13px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    background: rgba(255,255,255,.02);
}

.zb-caja-split-row > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.zb-caja-split-row > div > strong {
    font-size: 13px;
}

.zb-caja-split-row > div > span {
    font-size: 9px;
    color: rgba(237,199,128,.72);
}

.zb-caja-split-row > div > span.paid {
    color: rgba(135,217,191,.74);
}

.zb-caja-split-row > strong {
    font-size: 14px;
}

.zb-caja-unassigned {
    min-height: 55px;
    margin-top: 9px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border: 1px solid rgba(55,159,230,.15);
    border-radius: 14px;
    background: rgba(10,102,169,.055);
}

.zb-caja-unassigned span {
    font-size: 10px;
    color: rgba(255,255,255,.46);
}

.zb-caja-unassigned strong {
    font-size: 14px;
}

.zb-caja-detail-empty {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border: 1px dashed rgba(255,255,255,.08);
    border-radius: 16px;
    color: rgba(255,255,255,.40);
    text-align: center;
    font-size: 12px;
}

.zb-caja-detail-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 17px;
    margin-top: 23px;
    border-top: 1px solid rgba(255,255,255,.065);
}

.zb-caja-detail-footer > span {
    font-size: 10px;
    color: rgba(255,255,255,.30);
}

.zb-caja-detail-footer button {
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid rgba(56,159,229,.16);
    border-radius: 12px;
    background: rgba(10,102,169,.08);
    color: rgba(118,196,249,.48);
    font: inherit;
}


@media (max-width: 620px) {

    .zb-caja-drawer {
        width: 100%;
    }

    .zb-caja-drawer-header {
        padding:
            18px
            16px
            15px;
    }

    .zb-caja-drawer-body {
        padding:
            14px
            13px
            24px;
    }

    .zb-caja-detail-totals {
        grid-template-columns: 1fr;
    }

    .zb-caja-detail-totals > div {
        min-height: 68px;
    }

}



/* ==========================================================
   ZERO_BAR_CAJA_PAYMENT_CSS_G2B
   ========================================================== */

.zb-caja-modal-layer[hidden] {
    display: none !important;
}

.zb-caja-modal-layer {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.zb-caja-modal-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(0,0,0,.68);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

.zb-caja-modal-card {
    position: relative;
    z-index: 1;
    width: min(460px, 100%);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 22px;
    background:
        linear-gradient(
            145deg,
            rgba(24,32,40,.98),
            rgba(8,12,16,.98)
        );
    box-shadow:
        0 36px 110px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.045);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

.zb-caja-modal-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 21px 21px 16px;
    border-bottom: 1px solid rgba(255,255,255,.065);
}

.zb-caja-modal-header span {
    display: block;
    margin-bottom: 5px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .16em;
    color: rgba(87,180,243,.65);
}

.zb-caja-modal-header h3 {
    margin: 0;
    font-size: 21px;
    letter-spacing: -.025em;
}

.zb-caja-modal-close {
    width: 37px;
    height: 37px;
    flex: 0 0 37px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
    background: rgba(255,255,255,.035);
    color: rgba(255,255,255,.68);
    font-size: 23px;
    cursor: pointer;
}

.zb-caja-payment-amount {
    padding: 21px;
    text-align: center;
}

.zb-caja-payment-amount span {
    display: block;
    margin-bottom: 6px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .16em;
    color: rgba(255,255,255,.36);
}

.zb-caja-payment-amount strong {
    font-size: 32px;
    letter-spacing: -.04em;
}

.zb-caja-payment-methods {
    padding: 0 21px 20px;
}

.zb-caja-field-label {
    display: block;
    margin-bottom: 9px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .14em;
    color: rgba(255,255,255,.36);
}

.zb-caja-payment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.zb-caja-payment-method {
    min-height: 69px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    padding: 11px 12px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
    color: rgba(255,255,255,.75);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.zb-caja-payment-method strong {
    font-size: 13px;
}

.zb-caja-payment-method span {
    font-size: 9px;
    color: rgba(255,255,255,.34);
}

.zb-caja-payment-method.active {
    border-color: rgba(60,163,232,.38);
    background:
        linear-gradient(
            145deg,
            rgba(10,102,169,.17),
            rgba(10,102,169,.07)
        );
    box-shadow:
        inset 0 0 0 1px rgba(65,169,239,.06);
}

.zb-caja-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 21px 20px;
    border-top: 1px solid rgba(255,255,255,.055);
}

.zb-caja-secondary-action,
.zb-caja-primary-action {
    min-height: 42px;
    padding: 0 15px;
    border-radius: 12px;
    font: inherit;
    cursor: pointer;
}

.zb-caja-secondary-action {
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    color: rgba(255,255,255,.62);
}

.zb-caja-primary-action {
    border: 1px solid rgba(57,164,235,.30);
    background: rgba(10,102,169,.20);
    color: rgba(155,217,255,.93);
}

.zb-caja-primary-action:disabled {
    opacity: .45;
    cursor: default;
}

.zb-caja-modal-error {
    margin: 0 21px 15px;
    padding: 10px 12px;
    border: 1px solid rgba(222,164,74,.18);
    border-radius: 12px;
    background: rgba(181,127,42,.08);
    color: rgba(244,210,153,.82);
    font-size: 11px;
}

.zb-caja-warning-copy {
    padding: 18px 21px 4px;
}

.zb-caja-warning-copy p {
    margin: 0 0 14px;
    color: rgba(255,255,255,.55);
    font-size: 12px;
    line-height: 1.5;
}

.zb-caja-warning-items {
    display: grid;
    gap: 6px;
}

.zb-caja-warning-items > div {
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 9px 11px;
    border: 1px solid rgba(222,164,74,.12);
    border-radius: 12px;
    background: rgba(181,127,42,.055);
}

.zb-caja-warning-items strong {
    font-size: 11px;
}

.zb-caja-warning-items span {
    font-size: 10px;
    color: rgba(255,255,255,.42);
}

.zb-caja-split-payment {
    display: flex;
    align-items: center;
    gap: 10px;
}

.zb-caja-inline-pay,
.zb-caja-inline-action,
.zb-caja-primary-inline {
    min-height: 35px;
    padding: 0 11px;
    border: 1px solid rgba(56,162,232,.24);
    border-radius: 10px;
    background: rgba(10,102,169,.12);
    color: rgba(130,205,253,.88);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}

.zb-caja-primary-inline {
    min-height: 42px;
    padding: 0 16px;
}

.zb-caja-inline-pay:hover,
.zb-caja-inline-action:hover,
.zb-caja-primary-inline:hover {
    background: rgba(10,102,169,.20);
}

.zb-caja-inline-action:disabled {
    opacity: .5;
    cursor: default;
}

.zb-caja-unassigned-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}


@media (max-width: 620px) {

    .zb-caja-modal-layer {
        align-items: flex-end;
        padding: 10px;
    }

    .zb-caja-modal-card {
        width: 100%;
        border-radius: 21px;
    }

    .zb-caja-payment-grid {
        grid-template-columns: 1fr 1fr;
    }

    .zb-caja-modal-footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .zb-caja-secondary-action,
    .zb-caja-primary-action {
        width: 100%;
    }

    .zb-caja-unassigned {
        align-items: flex-start;
        flex-direction: column;
    }

    .zb-caja-unassigned-actions {
        width: 100%;
        justify-content: space-between;
    }

}



/* ==========================================================
   ZERO_BAR_CAJA_MAP_CSS_G3A
   ========================================================== */

.zb-caja-view-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 14px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
}

.zb-caja-view-tab {
    min-height: 38px;
    padding: 0 17px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(255,255,255,.45);
    font: inherit;
    cursor: pointer;
}

.zb-caja-view-tab.active {
    background: rgba(10,102,169,.16);
    color: rgba(153,216,255,.94);
    box-shadow:
        inset 0 0 0 1px rgba(67,166,233,.12);
}

.zb-caja-map-view[hidden],
.zb-caja-accounts-view[hidden] {
    display: none !important;
}

.zb-caja-map-shell {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    min-height: 650px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 20px;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            rgba(22,29,36,.70),
            rgba(8,12,16,.74)
        );
}

.zb-caja-map-areas {
    padding: 17px 12px;
    border-right: 1px solid rgba(255,255,255,.06);
    background: rgba(0,0,0,.12);
}

.zb-caja-map-label {
    display: block;
    padding: 0 8px 10px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .16em;
    color: rgba(255,255,255,.32);
}

.zb-caja-map-area-list {
    display: grid;
    gap: 5px;
}

.zb-caja-map-area-button {
    min-height: 41px;
    padding: 0 11px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    color: rgba(255,255,255,.48);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.zb-caja-map-area-button.active {
    border-color: rgba(59,163,232,.15);
    background: rgba(10,102,169,.10);
    color: rgba(146,211,253,.92);
}

.zb-caja-map-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.zb-caja-map-head {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 13px 16px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.zb-caja-map-head > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.zb-caja-map-head > div:first-child span {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .15em;
    color: rgba(255,255,255,.30);
}

.zb-caja-map-head > div:first-child strong {
    font-size: 15px;
}

.zb-caja-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
}

.zb-caja-map-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    color: rgba(255,255,255,.38);
}

.zb-caja-map-legend i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
}

.zb-caja-map-legend i.open {
    background: rgba(51,160,232,.92);
}

.zb-caja-map-legend i.warning {
    background: rgba(214,166,79,.94);
}

.zb-caja-map-stage-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 18px;
}

.zb-caja-map-stage {
    position: relative;
    width: 1100px;
    height: 700px;
    min-width: 100%;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 16px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 40% 25%,
            rgba(10,102,169,.05),
            transparent 36%
        ),
        rgba(0,0,0,.10);
}

.zb-caja-map-loading,
.zb-caja-map-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
    color: rgba(255,255,255,.32);
    font-size: 12px;
}

.zb-caja-map-element {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center center;
    pointer-events: none;
    font-size: 9px;
    color: rgba(255,255,255,.25);
}

.zb-caja-map-element.type-wall {
    background: rgba(255,255,255,.15);
    border-radius: 3px;
}

.zb-caja-map-element.type-door {
    border: 1px dashed rgba(255,255,255,.17);
    border-radius: 7px;
}

.zb-caja-map-element.type-cashier {
    border: 1px solid rgba(60,161,230,.12);
    border-radius: 9px;
    background: rgba(10,102,169,.045);
}

.zb-caja-map-element.type-label {
    font-size: 11px;
    color: rgba(255,255,255,.28);
}

.zb-caja-map-element.type-bar {
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
}

.zb-caja-map-table {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 7px;
    transform-origin: center center;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 50%;
    background:
        linear-gradient(
            145deg,
            rgba(29,36,44,.92),
            rgba(14,18,23,.92)
        );
    color: rgba(255,255,255,.70);
    font: inherit;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 10px 25px rgba(0,0,0,.18);
}

.zb-caja-map-table.bar {
    border-radius: 12px;
}

.zb-caja-map-table.open {
    border-color: rgba(57,164,233,.30);
    background:
        linear-gradient(
            145deg,
            rgba(19,63,91,.92),
            rgba(10,29,42,.94)
        );
}

.zb-caja-map-table.warning {
    border-color: rgba(214,166,79,.30);
    background:
        linear-gradient(
            145deg,
            rgba(77,58,28,.86),
            rgba(31,24,14,.93)
        );
}

.zb-caja-map-table-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 700;
}

.zb-caja-map-table strong {
    font-size: 12px;
    letter-spacing: -.02em;
}

.zb-caja-map-table small {
    font-size: 8px;
    color: rgba(255,255,255,.38);
}

.zb-caja-map-warning {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(227,178,84,.96);
    box-shadow:
        0 0 0 4px rgba(215,162,69,.08),
        0 0 12px rgba(215,162,69,.40);
}


@media (max-width: 760px) {

    .zb-caja-map-shell {
        grid-template-columns: 1fr;
    }

    .zb-caja-map-areas {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.06);
    }

    .zb-caja-map-area-list {
        display: flex;
        overflow-x: auto;
    }

    .zb-caja-map-area-button {
        flex: 0 0 auto;
    }

    .zb-caja-map-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .zb-caja-map-stage-wrap {
        padding: 10px;
    }

}



/* ==========================================================
   ZERO_BAR_CAJA_MANAGEMENT_CSS_G3B
   ========================================================== */

.zb-caja-line-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.zb-caja-line-action {
    min-height: 29px;
    padding: 0 9px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 9px;
    background: rgba(255,255,255,.028);
    color: rgba(255,255,255,.55);
    font: inherit;
    font-size: 9px;
    cursor: pointer;
}

.zb-caja-line-action.deliver {
    border-color: rgba(50,155,224,.18);
    background: rgba(10,102,169,.08);
    color: rgba(116,198,250,.80);
}

.zb-caja-line-action:disabled {
    opacity: .32;
    cursor: default;
}

.zb-caja-secondary-inline {
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 11px;
    background: rgba(255,255,255,.035);
    color: rgba(255,255,255,.67);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}

.zb-caja-detail-footer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
}

.zb-caja-detail-footer-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.zb-caja-split-editor-card {
    width: min(520px, 100%);
}

.zb-caja-split-editor-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 17px 20px;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

.zb-caja-split-editor-summary span {
    max-width: 330px;
    color: rgba(255,255,255,.43);
    font-size: 11px;
    line-height: 1.45;
}

.zb-caja-split-editor-summary strong {
    flex: 0 0 auto;
    font-size: 19px;
}

.zb-caja-split-editor-items {
    max-height: min(52vh, 500px);
    overflow-y: auto;
    padding: 10px 20px 18px;
}

.zb-caja-split-editor-row {
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

.zb-caja-split-editor-row:last-child {
    border-bottom: 0;
}

.zb-caja-split-editor-row > div:first-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.zb-caja-split-editor-row > div:first-child strong {
    font-size: 13px;
}

.zb-caja-split-editor-row > div:first-child span {
    font-size: 9px;
    color: rgba(255,255,255,.37);
}

.zb-caja-split-stepper {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 34px 40px 34px;
    align-items: center;
    text-align: center;
}

.zb-caja-split-stepper button {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(55,159,229,.19);
    border-radius: 10px;
    background: rgba(10,102,169,.08);
    color: rgba(131,204,251,.90);
    font-size: 18px;
    cursor: pointer;
}

.zb-caja-split-stepper button:disabled {
    opacity: .28;
    cursor: default;
}

.zb-caja-split-stepper strong {
    font-size: 13px;
}

.zb-caja-void-fields {
    display: grid;
    gap: 15px;
    padding: 19px 21px;
}

.zb-caja-void-fields label:not(.zb-caja-return-stock) {
    display: grid;
    gap: 6px;
}

.zb-caja-void-fields select,
.zb-caja-void-fields textarea {
    width: 100%;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    outline: none;
    background: rgba(0,0,0,.20);
    color: rgba(255,255,255,.84);
    font: inherit;
}

.zb-caja-void-fields select {
    min-height: 43px;
    padding: 0 11px;
}

.zb-caja-void-fields textarea {
    min-height: 75px;
    padding: 11px;
    resize: vertical;
}

.zb-caja-void-fields select:focus,
.zb-caja-void-fields textarea:focus {
    border-color: rgba(57,161,231,.36);
}

.zb-caja-return-stock {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 12px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
    color: rgba(255,255,255,.67);
    font-size: 11px;
    cursor: pointer;
}

.zb-caja-return-stock input {
    width: 16px;
    height: 16px;
    accent-color: #0a66a9;
}

.zb-caja-void-fields > small {
    margin-top: -7px;
    color: rgba(255,255,255,.31);
    font-size: 9px;
    line-height: 1.4;
}

.zb-caja-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 120000;
    transform: translateX(-50%);
    max-width: min(420px, calc(100% - 30px));
    padding: 11px 15px;
    border: 1px solid rgba(81,174,235,.20);
    border-radius: 13px;
    background: rgba(15,27,36,.94);
    box-shadow: 0 15px 50px rgba(0,0,0,.35);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    color: rgba(200,230,248,.92);
    font-size: 11px;
    text-align: center;
}

.zb-caja-toast[hidden] {
    display: none !important;
}


@media (max-width: 620px) {

    .zb-caja-detail-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .zb-caja-detail-footer-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }

    .zb-caja-secondary-inline,
    .zb-caja-primary-inline {
        width: 100%;
    }

    .zb-caja-split-editor-summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .zb-caja-split-editor-row {
        gap: 10px;
    }

}



/* ==========================================================
   ZERO_BAR_CAJA_CREATE_ACCOUNT_CSS_G3C
   ========================================================== */

.zb-caja-create-account-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    padding: 20px 20px 13px;
}

.zb-caja-create-option {
    min-height: 92px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 15px;
    background: rgba(255,255,255,.025);
    color: rgba(255,255,255,.72);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.zb-caja-create-option strong {
    font-size: 13px;
}

.zb-caja-create-option span {
    color: rgba(255,255,255,.36);
    font-size: 9px;
    line-height: 1.4;
}

.zb-caja-create-option.active {
    border-color: rgba(56,161,231,.32);
    background: rgba(10,102,169,.12);
    color: rgba(150,214,255,.95);
}

.zb-caja-create-name {
    padding: 4px 20px 18px;
}

.zb-caja-create-name label {
    display: grid;
    gap: 7px;
}

.zb-caja-create-name input {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    outline: none;
    background: rgba(0,0,0,.18);
    color: rgba(255,255,255,.87);
    font: inherit;
}

.zb-caja-create-name input:focus {
    border-color: rgba(57,161,231,.38);
}

.zb-caja-new-account-button {
    min-height: 42px;
    margin-left: auto;
    padding: 0 14px;
    border: 1px solid rgba(56,163,234,.22);
    border-radius: 12px;
    background: rgba(10,102,169,.10);
    color: rgba(137,208,253,.90);
    font: inherit;
    cursor: pointer;
}


@media (max-width: 620px) {

    .zb-caja-create-account-options {
        grid-template-columns: 1fr;
    }

    .zb-caja-new-account-button {
        width: 100%;
        margin-left: 0;
    }

}



/* ==========================================================
   ZERO_BAR_CAJA_ADD_PRODUCTS_CSS_G3D
   ========================================================== */

.zb-caja-add-products-button {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(61,166,235,.22);
    border-radius: 12px;
    background: rgba(10,102,169,.10);
    color: rgba(145,214,255,.94);
    font: inherit;
    cursor: pointer;
}

.zb-caja-products-card {
    width: min(620px, calc(100vw - 24px));
    max-height: min(780px, calc(100vh - 28px));
    display: flex;
    flex-direction: column;
}

.zb-caja-products-search {
    padding: 14px 18px 8px;
}

.zb-caja-products-search input {
    width: 100%;
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 13px;
    outline: none;
    background: rgba(0,0,0,.18);
    color: rgba(255,255,255,.90);
    font: inherit;
}

.zb-caja-products-search input:focus {
    border-color: rgba(59,164,232,.35);
}

.zb-caja-product-categories {
    display: flex;
    gap: 6px;
    padding: 4px 18px 10px;
    overflow-x: auto;
}

.zb-caja-category {
    flex: 0 0 auto;
    min-height: 31px;
    padding: 0 11px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 999px;
    background: rgba(255,255,255,.025);
    color: rgba(255,255,255,.48);
    font: inherit;
    font-size: 10px;
    cursor: pointer;
}

.zb-caja-category.active {
    border-color: rgba(57,164,235,.28);
    background: rgba(10,102,169,.14);
    color: rgba(145,215,255,.95);
}

.zb-caja-product-list {
    flex: 1 1 auto;
    min-height: 150px;
    padding: 2px 18px 12px;
    overflow-y: auto;
}

.zb-caja-product-row {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 3px;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

.zb-caja-product-row.selected {
    background: rgba(10,102,169,.045);
}

.zb-caja-product-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.zb-caja-product-info strong {
    color: rgba(255,255,255,.86);
    font-size: 13px;
}

.zb-caja-product-info span {
    color: rgba(255,255,255,.39);
    font-size: 10px;
}

.zb-caja-product-info small {
    color: rgba(255,255,255,.28);
    font-size: 9px;
}

.zb-caja-product-info small.stock-warning {
    color: rgba(255,194,105,.72);
}

.zb-caja-product-stepper {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 34px 30px 34px;
    align-items: center;
    text-align: center;
}

.zb-caja-product-stepper button {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    background: rgba(255,255,255,.035);
    color: rgba(255,255,255,.76);
    font: inherit;
    cursor: pointer;
}

.zb-caja-product-stepper button:last-child {
    border-color: rgba(58,163,233,.20);
    background: rgba(10,102,169,.11);
    color: rgba(143,213,255,.95);
}

.zb-caja-product-stepper button:disabled {
    opacity: .25;
    cursor: default;
}

.zb-caja-product-stepper strong {
    font-size: 12px;
    color: rgba(255,255,255,.80);
}

.zb-caja-order-summary {
    margin: 0 18px 10px;
    padding: 12px;
    border: 1px solid rgba(57,163,232,.12);
    border-radius: 14px;
    background: rgba(10,102,169,.055);
}

.zb-caja-order-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
}

.zb-caja-order-summary-head > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.zb-caja-order-summary-head span {
    color: rgba(255,255,255,.30);
    font-size: 8px;
    letter-spacing: .12em;
}

.zb-caja-order-summary-head strong {
    color: rgba(255,255,255,.78);
    font-size: 12px;
}

.zb-caja-order-lines {
    display: grid;
    gap: 5px;
    padding-top: 7px;
    border-top: 1px solid rgba(255,255,255,.055);
}

.zb-caja-order-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: rgba(255,255,255,.45);
    font-size: 10px;
}

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

.zb-caja-products-empty {
    padding: 32px 10px;
    color: rgba(255,255,255,.30);
    font-size: 11px;
    text-align: center;
}


@media (max-width: 620px) {

    .zb-caja-products-card {
        width: calc(100vw - 12px);
        max-height: calc(100vh - 12px);
    }

    .zb-caja-product-row {
        min-height: 74px;
    }

}