/* /Layout/AdminLayout.razor.rz.scp.css */
/* Admin Layout - Dark Theme */
.admin-layout[b-9butiq3wqh] {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--adm-bg-0f172a);
    color: var(--adm-fgon-f8fafc-e2e8f0);
    /* Belt-and-braces: nothing inside the admin shell may widen the document.
       `clip` rather than `hidden` on purpose — `hidden` would make this a scroll
       container and break the `position: sticky` topbar; `clip` does not. The
       fixed sidebar is not clipped by this (fixed descendants are only clipped by
       ancestors that establish a containing block, which this is not). */
    overflow-x: clip;
}

/* ===== Sidebar =====
   The admin navigation (2026-10-13): a quiet surface, a dozen icons (the top links and the nine
   groups) instead of eighty, links inside a group on a thin guide line. Colours are local
   tokens on .admin-sidebar, dark by default and redefined for the light theme below, so the
   generated --adm-* layer is not touched. */
.admin-sidebar[b-9butiq3wqh] {
    --sb-bg: #0b1222;
    --sb-border: rgba(148, 163, 184, 0.12);
    --sb-fg: #9aa8bd;
    --sb-fg-strong: #e8eef7;
    --sb-fg-faint: #5d6b80;
    --sb-hover: rgba(148, 163, 184, 0.09);
    --sb-active-bg: rgba(96, 165, 250, 0.14);
    --sb-active-fg: #dbe8ff;
    --sb-accent: #60a5fa;
    --sb-guide: rgba(148, 163, 184, 0.16);
    --sb-focus: rgba(96, 165, 250, 0.55);
    --sb-tip-bg: #111a2e;
    --sb-tip-fg: #e8eef7;
    --sb-tpv: #a78bfa;
    --sb-star: #fbbf24;

    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 260px;
    background: var(--sb-bg);
    border-right: 1px solid var(--sb-border);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: width 0.2s ease, transform 0.2s ease;
    overflow: hidden;
}

:root[data-theme="light"] .admin-sidebar[b-9butiq3wqh] {
    --sb-bg: #ffffff;
    --sb-border: #e6eaf0;
    --sb-fg: #4b5768;
    --sb-fg-strong: #0f172a;
    --sb-fg-faint: #8a96a8;
    --sb-hover: rgba(15, 23, 42, 0.045);
    --sb-active-bg: rgba(37, 99, 235, 0.09);
    --sb-active-fg: #1d4ed8;
    --sb-accent: #2563eb;
    --sb-guide: #dfe5ee;
    --sb-focus: rgba(37, 99, 235, 0.45);
    --sb-tip-bg: #0f172a;
    --sb-tip-fg: #f8fafc;
    --sb-tpv: #7c3aed;
    --sb-star: #d97706;
}

.sidebar-header[b-9butiq3wqh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 12px 0 16px;
    /* = the top bar's height, so the two bottom borders meet in one line. */
    min-height: 64px;
    border-bottom: 1px solid var(--sb-border);
}

.sidebar-brand[b-9butiq3wqh] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: var(--sb-fg-strong);
    overflow: hidden;
}

/* The venue's logo, or its initials on the brand gradient. */
.venue-badge[b-9butiq3wqh] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    color: #fff;
    font-weight: 750;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Contain, not cover: a ticket logo is usually wide and must not be cropped. */
.venue-badge--logo[b-9butiq3wqh] {
    object-fit: contain;
    padding: 2px;
    background: #fff;
    box-shadow: 0 0 0 1px var(--sb-border);
}

.brand-text[b-9butiq3wqh] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
    transition: opacity 0.2s ease;
}

.brand-name[b-9butiq3wqh] {
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--sb-fg-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-caption[b-9butiq3wqh] {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--sb-fg-faint);
    white-space: nowrap;
}

.sidebar-collapse-btn[b-9butiq3wqh] {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--sb-fg-faint);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.sidebar-collapse-btn:hover[b-9butiq3wqh] {
    background: var(--sb-hover);
    color: var(--sb-fg-strong);
}

.sidebar-collapse-btn svg[b-9butiq3wqh] {
    width: 18px;
    height: 18px;
}

/* Sidebar Navigation */
.sidebar-nav[b-9butiq3wqh] {
    flex: 1;
    overflow-y: auto;
    /* overflow-x:hidden is load-bearing: with only overflow-y set, CSS promotes the other axis
       to auto and the whole nav could be dragged sideways on a phone (seen on a real iPhone). */
    overflow-x: hidden;
    padding: 10px 10px 14px;
    scrollbar-width: thin;
    scrollbar-color: var(--sb-guide) transparent;
}

.sidebar-nav[b-9butiq3wqh]::-webkit-scrollbar {
    width: 6px;
}

.sidebar-nav[b-9butiq3wqh]::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav[b-9butiq3wqh]::-webkit-scrollbar-thumb {
    background: var(--sb-guide);
    border-radius: 3px;
}

.nav-top[b-9butiq3wqh] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--sb-border);
}

/* A row with an icon: the top links, the footer, and each group's button. */
.nav-item[b-9butiq3wqh],
.nav-group-btn[b-9butiq3wqh] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 36px;
    padding: 0 10px;
    box-sizing: border-box;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--sb-fg);
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-item:hover[b-9butiq3wqh],
.nav-group-btn:hover[b-9butiq3wqh] {
    background: var(--sb-hover);
    color: var(--sb-fg-strong);
}

.nav-item:focus-visible[b-9butiq3wqh],
.nav-group-btn:focus-visible[b-9butiq3wqh],
.sidebar-collapse-btn:focus-visible[b-9butiq3wqh] {
    outline: 2px solid var(--sb-focus);
    outline-offset: -2px;
}

.nav-item--top.active[b-9butiq3wqh] {
    background: var(--sb-active-bg);
    color: var(--sb-active-fg);
}

.nav-icon[b-9butiq3wqh] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.9;
}

.nav-item--top.active .nav-icon[b-9butiq3wqh],
.nav-item--top:hover .nav-icon[b-9butiq3wqh],
.nav-group-btn:hover .nav-icon[b-9butiq3wqh] {
    opacity: 1;
}

.nav-stack[b-9butiq3wqh] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.nav-text[b-9butiq3wqh],
.nav-group-title[b-9butiq3wqh] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-group-title[b-9butiq3wqh] {
    flex: 1;
    min-width: 0;
}

/* Second line under a label («Para el equipo» under TPV, the happy-hour line under Promociones). */
.nav-sub[b-9butiq3wqh] {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--sb-fg-faint);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-item--top .nav-sub[b-9butiq3wqh] {
    margin-top: 0;
}

.nav-item--top:has(.nav-sub)[b-9butiq3wqh] {
    min-height: 44px;
}

/* Links that leave the admin (TPV, KDS) show a small arrow and open a new tab. */
.nav-external[b-9butiq3wqh] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--sb-fg-faint);
    transition: color 0.15s ease, transform 0.15s ease;
}

.nav-item--external:hover .nav-external[b-9butiq3wqh] {
    color: var(--sb-tpv);
    transform: translate(1px, -1px);
}

.nav-item--tpv .nav-icon[b-9butiq3wqh] {
    color: var(--sb-tpv);
    opacity: 1;
}

.nav-sr[b-9butiq3wqh] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ----- Groups: one open at a time ----- */
.nav-group + .nav-group[b-9butiq3wqh] {
    margin-top: 2px;
}

.nav-group-btn[b-9butiq3wqh] {
    color: var(--sb-fg);
    font-weight: 550;
}

/* The group holding the page you are on keeps a tinted icon while closed: "you are here". */
.nav-group.current > .nav-group-btn[b-9butiq3wqh] {
    color: var(--sb-fg-strong);
}

.nav-group.current > .nav-group-btn .nav-icon[b-9butiq3wqh] {
    color: var(--sb-accent);
    opacity: 1;
}

.nav-group-chevron[b-9butiq3wqh] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--sb-fg-faint);
    transition: transform 0.2s ease, color 0.15s ease;
}

.nav-group.open > .nav-group-btn .nav-group-chevron[b-9butiq3wqh] {
    transform: rotate(90deg);
    color: var(--sb-fg);
}

/* Height animates through grid rows (0fr → 1fr), which needs no measured height. Closed items
   stay in the DOM: `inert` keeps them out of the tab order and away from screen readers. */
.nav-group-items[b-9butiq3wqh] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.22s ease;
}

.nav-group.open > .nav-group-items[b-9butiq3wqh] {
    grid-template-rows: 1fr;
}

.nav-group-inner[b-9butiq3wqh] {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1px;
    /* The guide line sits under the centre of the group's icon (10px padding + 9px). */
    margin-left: 18px;
    padding-left: 9px;
    border-left: 1px solid var(--sb-guide);
}

.nav-group.open > .nav-group-items > .nav-group-inner[b-9butiq3wqh] {
    padding-top: 2px;
    padding-bottom: 8px;
}

.nav-item--sub[b-9butiq3wqh] {
    min-height: 32px;
    padding: 0 10px;
    border-radius: 7px;
    font-size: 0.84rem;
    font-weight: 450;
}

/* A page this person may not open (NavLink.LockWhenDenied, 2026-10-17): shown with who it is for, never a link. */
.nav-item--locked[b-9butiq3wqh] {
    cursor: default;
    opacity: 0.62;
}

.nav-item--locked:hover[b-9butiq3wqh] {
    background: none;
    color: inherit;
}

/* The locked row's disclosure: who the page is for, under the row (2026-10-18, the live tester via mesero-11). */
.nav-lock-note[b-9butiq3wqh] {
    margin: 2px 8px 6px 18px;
    padding: 6px 9px;
    border-radius: 6px;
    background: var(--sb-hover);
    font-size: 0.74rem;
    line-height: 1.35;
}

.nav-lock[b-9butiq3wqh] {
    margin-left: auto;
    padding-left: 8px;
    font-size: 0.72rem;
    white-space: nowrap;
}

.nav-item--sub.active[b-9butiq3wqh] {
    color: var(--sb-active-fg);
    background: var(--sb-active-bg);
    font-weight: 550;
}

/* The active link lights its stretch of the guide line. */
.nav-item--sub.active[b-9butiq3wqh]::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 7px;
    bottom: 7px;
    width: 2px;
    border-radius: 2px;
    background: var(--sb-accent);
}

.nav-item--sub:has(.nav-sub)[b-9butiq3wqh] {
    min-height: 44px;
}

.nav-subhead[b-9butiq3wqh] {
    padding: 10px 10px 4px;
    font-size: 0.66rem;
    font-weight: 650;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--sb-fg-faint);
}

.nav-subhead:first-child[b-9butiq3wqh] {
    padding-top: 6px;
}

.nav-badge[b-9butiq3wqh] {
    margin-left: auto;
    flex-shrink: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ef4444;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
}

/* Sidebar Footer */
.sidebar-footer[b-9butiq3wqh] {
    border-top: 1px solid var(--sb-border);
    padding: 8px 10px;
}

/* ----- Pinned links («Fijados») -----
   Each link sits in a row with its star (a sibling, never a button inside a link). The star shows
   on hover; a pinned link keeps a quiet filled star. */
.nav-row[b-9butiq3wqh] {
    position: relative;
}

.nav-row > .nav-item[b-9butiq3wqh] {
    padding-right: 32px;
}

.nav-pin[b-9butiq3wqh] {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--sb-fg-faint);
    display: grid;
    place-items: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.nav-pin svg[b-9butiq3wqh] {
    width: 14px;
    height: 14px;
}

.nav-row:hover .nav-pin[b-9butiq3wqh],
.nav-pin:focus-visible[b-9butiq3wqh] {
    opacity: 1;
}

.nav-pin:hover[b-9butiq3wqh] {
    color: var(--sb-star);
    background: var(--sb-hover);
}

.nav-pin:focus-visible[b-9butiq3wqh] {
    outline: 2px solid var(--sb-focus);
    outline-offset: -2px;
}

.nav-row.pinned .nav-pin[b-9butiq3wqh] {
    opacity: 1;
    color: var(--sb-star);
}

.nav-group .nav-row.pinned .nav-pin[b-9butiq3wqh] {
    opacity: 0.55;
}

.nav-group .nav-row.pinned:hover .nav-pin[b-9butiq3wqh] {
    opacity: 1;
}

/* Touch screens have no hover: the star shows on the page you are on (pin it from there) and on
   pinned links, nowhere else. */
@media (hover: none) {
    .nav-pin[b-9butiq3wqh] {
        opacity: 0;
        pointer-events: none;
    }

    .nav-row:has(> .nav-item.active) .nav-pin[b-9butiq3wqh],
    .nav-row.pinned .nav-pin[b-9butiq3wqh] {
        opacity: 1;
        pointer-events: auto;
    }
}

.nav-pinned[b-9butiq3wqh] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--sb-border);
}

.nav-pinned-title[b-9butiq3wqh] {
    padding: 2px 10px 6px;
    font-size: 0.66rem;
    font-weight: 650;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--sb-fg-faint);
}

.nav-item--pin .nav-icon[b-9butiq3wqh] {
    width: 16px;
    height: 16px;
    margin: 0 1px;
    color: var(--sb-fg-faint);
}

.nav-item--pin.active[b-9butiq3wqh] {
    background: var(--sb-active-bg);
    color: var(--sb-active-fg);
}

.nav-item--pin.active .nav-icon[b-9butiq3wqh] {
    color: var(--sb-accent);
}

/* ----- The rail: desktop sidebar collapsed to its icons -----
   Desktop only: below 1024px the sidebar is the phone drawer, which always shows the full nav
   (a narrow window used to get a 72px drawer of bare icons). A group in the rail is its icon;
   a click opens the sidebar on that group. */
@media (min-width: 1024px) {
    .sidebar-collapsed .admin-sidebar[b-9butiq3wqh] {
        width: 72px;
    }

    .sidebar-collapsed .sidebar-header[b-9butiq3wqh] {
        padding: 0;
        justify-content: center;
    }

    .sidebar-collapsed .sidebar-brand[b-9butiq3wqh] {
        display: none;
    }

    .sidebar-collapsed .sidebar-nav[b-9butiq3wqh] {
        padding: 10px 12px;
    }

    .sidebar-collapsed .nav-item[b-9butiq3wqh],
    .sidebar-collapsed .nav-group-btn[b-9butiq3wqh] {
        justify-content: center;
        padding: 0;
        min-height: 40px;
    }

    .sidebar-collapsed .nav-stack[b-9butiq3wqh],
    .sidebar-collapsed .nav-group-title[b-9butiq3wqh],
    .sidebar-collapsed .nav-group-chevron[b-9butiq3wqh],
    .sidebar-collapsed .nav-external[b-9butiq3wqh],
    .sidebar-collapsed .nav-group-items[b-9butiq3wqh] {
        display: none;
    }

    .sidebar-collapsed .nav-badge--group[b-9butiq3wqh] {
        position: absolute;
        top: 3px;
        right: 3px;
        min-width: 15px;
        height: 15px;
        padding: 0 4px;
        font-size: 0.6rem;
    }

    .sidebar-collapsed .nav-pinned[b-9butiq3wqh],
    .sidebar-collapsed .nav-pin[b-9butiq3wqh] {
        display: none;
    }

    /* The expanded sidebar shows the venue (logo + name), so the top bar does not repeat it. */
    .admin-layout:not(.sidebar-collapsed) .restaurant-info[b-9butiq3wqh] {
        display: none;
    }

    .sidebar-collapsed .nav-group.current > .nav-group-btn[b-9butiq3wqh] {
        background: var(--sb-active-bg);
    }

    /* The label as a tooltip beside the icon. */
    .sidebar-collapsed .nav-item[data-tip][b-9butiq3wqh]::after,
    .sidebar-collapsed .nav-group-btn[data-tip][b-9butiq3wqh]::after {
        content: attr(data-tip);
        position: absolute;
        left: calc(100% + 12px);
        top: 50%;
        transform: translateY(-50%) translateX(-4px);
        padding: 6px 10px;
        border-radius: 7px;
        background: var(--sb-tip-bg);
        color: var(--sb-tip-fg);
        border: 1px solid var(--sb-border);
        font-size: 0.8rem;
        font-weight: 500;
        white-space: nowrap;
        box-shadow: 0 6px 20px rgba(15, 23, 42, 0.25);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.12s;
        z-index: 1000;
    }

    .sidebar-collapsed .nav-item[data-tip]:hover[b-9butiq3wqh]::after,
    .sidebar-collapsed .nav-group-btn[data-tip]:hover[b-9butiq3wqh]::after,
    .sidebar-collapsed .nav-item[data-tip]:focus-visible[b-9butiq3wqh]::after,
    .sidebar-collapsed .nav-group-btn[data-tip]:focus-visible[b-9butiq3wqh]::after {
        opacity: 1;
        visibility: visible;
        transform: translateY(-50%) translateX(0);
        transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s;
    }

    /* The tooltip must escape the sidebar's clipping: let the rail overflow sideways. */
    .sidebar-collapsed .admin-sidebar[b-9butiq3wqh],
    .sidebar-collapsed .sidebar-nav[b-9butiq3wqh] {
        overflow: visible;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-group-items[b-9butiq3wqh],
    .nav-group-chevron[b-9butiq3wqh],
    .nav-item[b-9butiq3wqh],
    .nav-group-btn[b-9butiq3wqh],
    .admin-sidebar[b-9butiq3wqh] {
        transition: none;
    }
}

/* ===== Main Content Area ===== */
.admin-main[b-9butiq3wqh] {
    flex: 1;
    margin-left: 260px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left 0.2s ease;
    /* A flex item defaults to min-width:auto, i.e. it refuses to shrink below its
       content's min-content width. Any wide table/grid on a page therefore pushed
       .admin-main — and with it the whole document — wider than the phone viewport:
       cards clipped off the right edge, and (because .admin-sidebar is fixed, and
       iOS anchors fixed elements to the *layout* viewport) the open nav drawer slid
       left with the horizontal scroll. min-width:0 lets it shrink; wide content is
       then handled by the page/table scroll containers instead of the document. */
    min-width: 0;
}

.sidebar-collapsed .admin-main[b-9butiq3wqh] {
    margin-left: 72px;
}

/* Top Bar */
.admin-topbar[b-9butiq3wqh] {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 64px;
    background: var(--adm-bg-0f172a-a0_95);
    /* No backdrop-filter blur: at 0.95 opacity it's visually imperceptible, but a
       persistent full-width backdrop-filter forces macOS/Safari to re-composite the
       blurred strip every frame during nav-drawer / modal animations — a needless
       cost behind the sluggish hamburger menu on Mac. */
    border-bottom: 1px solid var(--adm-bdon-f8fafc-334155);
}

.topbar-left[b-9butiq3wqh] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mobile-menu-btn[b-9butiq3wqh] {
    display: none;
    /* 44px, not 40: this is the primary navigation trigger on a phone and was the
       smallest touch target in the whole shell (measured 30x40 in an audit).
       flex-shrink:0 is required — it is a flex item in the topbar, so a plain width
       still got squeezed (to 34px) when the restaurant name needed room. */
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: none;
    background: var(--adm-bg-1e293b);
    border-radius: 8px;
    color: var(--adm-fgon-ffffff-94a3b8);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.mobile-menu-btn:hover[b-9butiq3wqh] {
    background: var(--adm-bghov-ffffff-334155);
    color: var(--adm-fgon-eaf0f6-f8fafc);
}

.restaurant-info[b-9butiq3wqh] {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Allow the name to shrink + ellipsis instead of forcing the topbar wider
       than the viewport (which pushed signout off-screen on phones). */
    min-width: 0;
}

.restaurant-name[b-9butiq3wqh] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--adm-fg-f8fafc);
}

.restaurant-badge[b-9butiq3wqh] {
    padding: 4px 10px;
    background: linear-gradient(135deg, var(--adm-bggrad-3b82f6) 0%, var(--adm-bggrad-8b5cf6) 100%);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.topbar-right[b-9butiq3wqh] {
    display: flex;
    align-items: center;
    gap: 16px;
    /* Never let the controls (search/user/signout) be squeezed or pushed
       off-screen — the restaurant name truncates instead (flex-shrink above). */
    flex-shrink: 0;
}

.topbar-user[b-9butiq3wqh] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: var(--adm-bg-1e293b);
    border-radius: 8px;
}

.user-avatar[b-9butiq3wqh] {
    width: 32px;
    height: 32px;
    background: var(--adm-bg-334155);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--adm-fgon-f1f5f9-94a3b8);
}

.user-name[b-9butiq3wqh] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--adm-fg-e2e8f0);
}

/* "Mi cuenta" account dropdown (topbar) — scoped to AdminLayout. */
.topbar-user-wrap[b-9butiq3wqh] {
    position: relative;
}
.topbar-user-wrap.open[b-9butiq3wqh] {
    z-index: 1001;   /* lift the chip + menu above the click-away backdrop (1000) */
}
.topbar-user[b-9butiq3wqh] {
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}
.topbar-user:hover[b-9butiq3wqh] {
    background: var(--adm-bghov-ffffff-243349);
}
.user-caret[b-9butiq3wqh] {
    color: var(--adm-fg-94a3b8);
    flex-shrink: 0;
}
.mc-acct-backdrop[b-9butiq3wqh] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: transparent;
}
.mc-acct-menu[b-9butiq3wqh] {
    position: absolute;
    z-index: 1001;   /* above its own click-away backdrop: both sit inside the lifted wrap, and with
                        z-index auto the backdrop (1000) took every tap in the menu, so «Cambiar
                        contraseña» only closed it (measured with elementFromPoint, 2026-10-13) */
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    padding: 14px;
    background: var(--adm-bg-0f172a);
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 12px;
    box-shadow: 0 16px 38px var(--adm-sh-000000-a0_5);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mc-acct-title[b-9butiq3wqh] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--adm-fg-64748b);
}
.mc-acct-row[b-9butiq3wqh] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.mc-acct-label[b-9butiq3wqh] {
    font-size: 0.7rem;
    color: var(--adm-fg-64748b);
}
.mc-acct-value[b-9butiq3wqh] {
    font-size: 0.875rem;
    color: var(--adm-fg-e2e8f0);
    word-break: break-all;
}
/* «Entras con tu PIN»: why a PIN user gets «Cambiar PIN», in the label's quiet grey */
.mc-acct-note[b-9butiq3wqh] {
    font-size: 0.75rem;
    color: var(--adm-fg-64748b);
}
.mc-acct-link[b-9butiq3wqh] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--adm-fg-a78bfa);
    text-decoration: none;
}
.mc-acct-link:hover[b-9butiq3wqh] {
    color: var(--adm-fg-c4b5fd);
    text-decoration: underline;
}
/* «Mi cuenta» › Tema: Claro | Oscuro. The light/dark switch at every size (on a phone the
   topbar's moon is hidden, see the 640px block). */
.mc-acct-theme[b-9butiq3wqh] {
    display: flex;
    gap: 4px;
    padding: 3px;
    border-radius: 10px;
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-f8fafc-334155);
}
.mc-acct-theme button[b-9butiq3wqh] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--adm-fg-94a3b8);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}
.mc-acct-theme button.on[b-9butiq3wqh] {
    background: var(--adm-bg-334155);
    color: var(--adm-fg-e2e8f0);
}

.topbar-btn[b-9butiq3wqh] {
    width: 40px;
    height: 40px;
    border: none;
    background: var(--adm-bg-1e293b);
    border-radius: 8px;
    color: var(--adm-fgon-ffffff-94a3b8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.topbar-btn:hover[b-9butiq3wqh] {
    background: var(--adm-bghov-ffffff-334155);
    color: var(--adm-fgon-eaf0f6-f8fafc);
}

.logout-btn:hover[b-9butiq3wqh] {
    background: #dc2626;
    color: #fff;
}

/* Trial status pill (in-topbar, not a full-width bar).
   Default state is intentionally quiet — slate/neutral — so at day 85 of
   a 90-day trial the pill reads as "informational" rather than "act now".
   Graduated classes (trial-warning, trial-urgent) escalate the tone as
   the countdown approaches zero. */
.trial-pill[b-9butiq3wqh] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 12px;
    border-radius: 999px;
    background: var(--adm-bg-94a3b8-a0_09);
    border: 1px solid var(--adm-bd-94a3b8-a0_22);
    color: var(--adm-fgon-ebeef2-cbd5e1);
    font-size: 0.8125rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.trial-pill:hover[b-9butiq3wqh] {
    background: var(--adm-bg-94a3b8-a0_15);
    border-color: var(--adm-bd-94a3b8-a0_35);
}

.trial-pill-dot[b-9butiq3wqh] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px var(--adm-sh-94a3b8-a0_14);
    flex: 0 0 auto;
}
.trial-pill-label[b-9butiq3wqh] {
    font-weight: 600;
    letter-spacing: 0.01em;
}
.trial-pill-sep[b-9butiq3wqh] {
    opacity: 0.5;
}
.trial-pill-days[b-9butiq3wqh] {
    opacity: 0.85;
}
.trial-pill-cta[b-9butiq3wqh] {
    margin-left: 4px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--adm-bg-94a3b8-a0_2);
    border: 1px solid var(--adm-bd-94a3b8-a0_3);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--adm-fgon-dadfe5-f1f5f9);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.trial-pill:hover .trial-pill-cta[b-9butiq3wqh] {
    background: var(--adm-bg-94a3b8-a0_32);
    border-color: var(--adm-bd-94a3b8-a0_48);
    color: var(--adm-fgon-c9cfd8-ffffff);
}

/* Warning (7-14 days): amber — makes the pill read as "trial is ending soon". */
.trial-pill.trial-warning[b-9butiq3wqh] {
    background: var(--adm-bg-f59e0b-a0_1);
    border-color: var(--adm-bd-f59e0b-a0_3);
    color: var(--adm-fgon-f8f1e4-fbbf24);
}
.trial-pill.trial-warning:hover[b-9butiq3wqh] {
    background: var(--adm-bg-f59e0b-a0_18);
    border-color: var(--adm-bd-f59e0b-a0_45);
}
.trial-pill.trial-warning .trial-pill-dot[b-9butiq3wqh] {
    box-shadow: 0 0 0 3px var(--adm-sh-f59e0b-a0_18);
}
.trial-pill.trial-warning .trial-pill-cta[b-9butiq3wqh] {
    background: var(--adm-bg-f59e0b-a0_22);
    color: var(--adm-fgon-f7e6c7-fde68a);
}
.trial-pill.trial-warning:hover .trial-pill-cta[b-9butiq3wqh] {
    background: var(--adm-bg-f59e0b-a0_32);
    color: var(--adm-fgon-f7ddaf-ffffff);
}

/* Urgent (< 7 days): red — last-chance signal without being a marketing banner. */
.trial-pill.trial-urgent[b-9butiq3wqh] {
    background: var(--adm-bg-ef4444-a0_1);
    border-color: var(--adm-bd-ef4444-a0_3);
    color: var(--adm-fgon-f7e8ea-fca5a5);
}
.trial-pill.trial-urgent:hover[b-9butiq3wqh] {
    background: var(--adm-bg-ef4444-a0_18);
    border-color: var(--adm-bd-ef4444-a0_45);
}
.trial-pill.trial-urgent .trial-pill-dot[b-9butiq3wqh] {
    box-shadow: 0 0 0 3px var(--adm-sh-ef4444-a0_18);
}
.trial-pill.trial-urgent .trial-pill-cta[b-9butiq3wqh] {
    background: var(--adm-bg-ef4444-a0_22);
    color: var(--adm-fgon-f6d2d4-fecaca);
}
.trial-pill.trial-urgent:hover .trial-pill-cta[b-9butiq3wqh] {
    background: var(--adm-bg-ef4444-a0_32);
    color: var(--adm-fgon-f5c0c1-ffffff);
}

/* On narrow viewports collapse the prefix so only "N días restantes" + CTA show. */
@media (max-width: 720px) {
    .trial-pill-label[b-9butiq3wqh],
    .trial-pill-sep[b-9butiq3wqh] {
        display: none;
    }
}

/* Main Content */
.admin-content[b-9butiq3wqh] {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    /* Same min-content trap as .admin-main — this is a column flex item. */
    min-width: 0;
    max-width: 100%;
}

/* Mobile Overlay */
.mobile-overlay[b-9butiq3wqh] {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--adm-scrim-000000-a0_5);
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    /* NOT `transition: all`. `all` also transitions VISIBILITY — and per spec a transition
       at progress 0 still reports the *from* value, so for one tick after `.visible` is
       added, getComputedStyle still says visibility:hidden. The scroll lock reads computed
       style in a microtask (before the first frame), so it saw "hidden", concluded the
       drawer was not open, and did not lock until the NEXT FRAME — which under main-thread
       load is hundreds of milliseconds away. An audit measured a 370-730ms window in which
       the page could still be scrolled behind the opening drawer.
       Fade opacity only; flip visibility instantly on open, and delay it on close so the
       fade-out is still seen. */
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.mobile-overlay.visible[b-9butiq3wqh] {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0s linear 0s;
}

/* ===== Responsive =====
   1023, not 1024: iPad landscape is exactly 1024 CSS px, and `max-width: 1024px`
   matches it — so the tablet that most wants the pinned sidebar was getting the phone
   drawer instead. The drawer now stops one pixel short of it. */
@media (max-width: 1023px) {
    .admin-sidebar[b-9butiq3wqh] {
        transform: translateX(-100%);
    }

    .admin-layout.sidebar-open .admin-sidebar[b-9butiq3wqh] {
        transform: translateX(0);
    }

    .admin-main[b-9butiq3wqh] {
        margin-left: 0;
    }

    .sidebar-collapsed .admin-main[b-9butiq3wqh] {
        margin-left: 0;
    }

    .mobile-menu-btn[b-9butiq3wqh] {
        display: flex;
    }

    .mobile-overlay[b-9butiq3wqh] {
        display: block;
    }

    .sidebar-collapse-btn[b-9butiq3wqh] {
        display: none;
    }
}

@media (max-width: 640px) {
    .admin-topbar[b-9butiq3wqh] {
        padding: 0 16px;
    }

    .admin-content[b-9butiq3wqh] {
        padding: 16px;
    }

    /* Below 640px we keep the user-avatar (priority signal: "logged in
       as X") and drop the trial pill instead. Trial state is also reachable
       from /admin/billing; "who am I" is harder to discover without it.
       Pre-fix the order was reversed — trial pill stayed, user info hid.
       We also drop the name text on tiny screens to keep the row tidy:
       the avatar alone communicates session presence. */
    .topbar-user[b-9butiq3wqh] {
        display: flex;
    }

    .topbar-user .user-name[b-9butiq3wqh] {
        display: none;
    }

    .trial-pill[b-9butiq3wqh] {
        display: none;
    }

    /* No room for the moon: at 390px it pushed «Cerrar sesión» off-screen. The switch is in
       «Mi cuenta» › Tema at every size (2026-10-13). */
    .theme-btn[b-9butiq3wqh] {
        display: none;
    }

    .restaurant-name[b-9butiq3wqh] {
        font-size: 1rem;
    }
}

/* Small phones (iPhone SE/13 mini/15 at 375-390px). Every horizontal pixel spent
   on chrome is a pixel a KPI card or table column doesn't get, so trim the gutters
   once more. The drawer is capped so it can never exceed the viewport. */
@media (max-width: 480px) {
    .admin-topbar[b-9butiq3wqh] {
        padding: 0 12px;
    }

    .admin-content[b-9butiq3wqh] {
        padding: 12px;
    }

    .admin-sidebar[b-9butiq3wqh] {
        width: min(260px, 86vw);
    }
}

/* Touch-friendly nav rows on phones and tablets: the 44px floor. */
@media (max-width: 1023px) and (pointer: coarse) {
    .nav-item[b-9butiq3wqh],
    .nav-group-btn[b-9butiq3wqh] {
        min-height: 44px;
        font-size: 0.95rem;
    }

    .nav-icon[b-9butiq3wqh] {
        width: 20px;
        height: 20px;
    }

    .nav-subhead[b-9butiq3wqh] {
        font-size: 0.7rem;
    }
}


/* ──────────────────────────────────────────────────────────────────
   Command palette (Ctrl/⌘+K). Centered modal that floats above
   .admin-topbar (z 50). Selectors prefixed .cmdk-* so they don't
   collide with anything else; this file is scoped so they wouldn't
   leak anyway, but the prefix keeps grep / future refactor clean.
   ────────────────────────────────────────────────────────────── */
.cmdk-backdrop[b-9butiq3wqh] {
    position: fixed;
    inset: 0;
    background: var(--adm-scrim-000000-a0_5);
    backdrop-filter: blur(2px);
    z-index: 9000;
    animation: cmdk-fade-in-b-9butiq3wqh 0.12s ease-out;
}

.cmdk-modal[b-9butiq3wqh] {
    position: fixed;
    top: 15vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(640px, calc(100vw - 32px));
    max-height: 70vh;
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 12px;
    box-shadow: 0 25px 50px var(--adm-sh-000000-a0_4);
    z-index: 9001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cmdk-slide-in-b-9butiq3wqh 0.14s ease-out;
    color: var(--adm-fgon-ffffff-f1f5f9);
}

.cmdk-input-row[b-9butiq3wqh] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--adm-bd-334155);
}

.cmdk-search-icon[b-9butiq3wqh] {
    color: var(--adm-fg-94a3b8);
    display: inline-flex;
    flex: 0 0 auto;
}

.cmdk-input[b-9butiq3wqh] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 15px;
    color: var(--adm-fg-f1f5f9);
    font-family: inherit;
}

.cmdk-input[b-9butiq3wqh]::placeholder {
    color: var(--adm-fg-64748b);
}

.cmdk-esc-hint[b-9butiq3wqh] {
    font-size: 11px;
    color: var(--adm-fgon-f1f5f9-94a3b8);
    background: var(--adm-bg-334155);
    border: 1px solid var(--adm-bdon-f1f5f9-475569);
    border-radius: 4px;
    padding: 2px 6px;
    font-family: inherit;
}

.cmdk-results[b-9butiq3wqh] {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
    min-height: 80px;
}

.cmdk-section-label[b-9butiq3wqh] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--adm-fg-64748b);
    padding: 10px 16px 4px;
}

.cmdk-section-label:first-child[b-9butiq3wqh] {
    padding-top: 6px;
}

.cmdk-item[b-9butiq3wqh] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 16px;
    background: transparent;
    border: none;
    color: var(--adm-fg-e2e8f0);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.cmdk-item-icon[b-9butiq3wqh] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--adm-fg-64748b);
}

.cmdk-item-icon + .cmdk-item-label[b-9butiq3wqh] {
    flex: 1;
    min-width: 0;
}

/* With a query typed, each result names its group on the right (no header per row). */
.cmdk-item-group[b-9butiq3wqh] {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--adm-fg-64748b);
    white-space: nowrap;
}

.cmdk-item.active .cmdk-item-icon[b-9butiq3wqh] {
    color: #3b82f6;
}

.cmdk-item.active[b-9butiq3wqh] {
    background: var(--adm-bg-58a6ff-a0_16);
    color: var(--adm-fgon-dae7fb-ffffff);
}

.cmdk-item-label[b-9butiq3wqh] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A locked page in Buscar (2026-10-18): listed with who it is for, never opened; Enter or a click shows the note. */
.cmdk-item--locked[b-9butiq3wqh] {
    flex-wrap: wrap;
    opacity: 0.72;
    cursor: default;
}

.cmdk-item-lock[b-9butiq3wqh] {
    margin-left: auto;
    font-size: 0.75rem;
    white-space: nowrap;
}

.cmdk-item-lock-note[b-9butiq3wqh] {
    flex-basis: 100%;
    margin-top: 4px;
    font-size: 0.76rem;
    line-height: 1.35;
}

.cmdk-item-hint[b-9butiq3wqh] {
    font-size: 12px;
    color: var(--adm-fg-93c5fd);
}

.cmdk-empty[b-9butiq3wqh] {
    padding: 28px 16px;
    text-align: center;
    color: var(--adm-fg-64748b);
    font-size: 13px;
}

.cmdk-footer[b-9butiq3wqh] {
    display: flex;
    gap: 18px;
    padding: 10px 16px;
    border-top: 1px solid var(--adm-bd-334155);
    font-size: 11px;
    color: var(--adm-fg-94a3b8);
}

.cmdk-footer kbd[b-9butiq3wqh] {
    background: var(--adm-bg-334155);
    border: 1px solid var(--adm-bdon-f1f5f9-475569);
    border-radius: 3px;
    padding: 1px 5px;
    margin-right: 4px;
    font-size: 10px;
    font-family: inherit;
}

@keyframes cmdk-fade-in-b-9butiq3wqh {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes cmdk-slide-in-b-9butiq3wqh {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .cmdk-backdrop[b-9butiq3wqh], .cmdk-modal[b-9butiq3wqh] { animation: none; }
}

/* Tighter layout on small screens */
@media (max-width: 600px) {
    .cmdk-modal[b-9butiq3wqh] {
        top: 10vh;
        max-height: 80vh;
    }
    .cmdk-footer[b-9butiq3wqh] {
        gap: 12px;
        flex-wrap: wrap;
    }
}

/* ──────────────────────────────────────────────────────────────────
   Visible palette trigger in the admin topbar. Tablet + phone need a
   tappable affordance because Ctrl/⌘+K doesn't exist on touch
   devices. The ⌘K hint inside is desktop-only via the @media block
   below — on touch we just show the magnifier icon.
   ────────────────────────────────────────────────────────────── */
.topbar-search-trigger[b-9butiq3wqh] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--adm-bg-94a3b8-a0_12);
    border: 1px solid var(--adm-bd-94a3b8-a0_25);
    border-radius: 8px;
    color: var(--adm-fgon-e6eaee-cbd5e1);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    margin-right: 10px;
}

.topbar-search-trigger:hover[b-9butiq3wqh] {
    background: var(--adm-bg-94a3b8-a0_2);
    border-color: var(--adm-bd-94a3b8-a0_4);
    color: var(--adm-fgon-dadfe5-f1f5f9);
}

.topbar-search-trigger-label[b-9butiq3wqh] {
    font-weight: 500;
}

.topbar-search-trigger-kbd[b-9butiq3wqh] {
    font-size: 11px;
    background: var(--adm-bg-0f172a-a0_5);
    border: 1px solid var(--adm-bd-94a3b8-a0_3);
    border-radius: 4px;
    padding: 1px 5px;
    font-family: inherit;
    color: var(--adm-fgon-f8fafc-94a3b8);
}

/* On narrow widths (tablet portrait, phone) hide the text + kbd hint
   to keep the topbar compact — the magnifier icon alone is enough. */
@media (max-width: 768px) {
    .topbar-search-trigger[b-9butiq3wqh] {
        padding: 6px;
    }
    .topbar-search-trigger-label[b-9butiq3wqh],
    .topbar-search-trigger-kbd[b-9butiq3wqh] {
        display: none;
    }
}

/* Touch-only devices don't show the keyboard hint regardless of width
   (some tablets have wide landscape screens but no physical keyboard). */
@media (hover: none) and (pointer: coarse) {
    .topbar-search-trigger-kbd[b-9butiq3wqh] {
        display: none;
    }
}

/* Search match highlight inside palette result rows. Using <mark> so
   screen readers / search-extensions naturally pick up the emphasis. */
/* ::deep — the <mark> comes from a MarkupString, which carries no scope attribute, so a plain
   .cmdk-match never matched it and the browser's yellow showed instead. */
.cmdk-item-label[b-9butiq3wqh]  .cmdk-match {
    background: var(--adm-bg-58a6ff-a0_25);
    color: var(--adm-fgon-c9dcfa-ffffff);
    border-radius: 3px;
    /* Padding that a negative margin gives back, so the letters stay together. */
    padding: 0 1px;
    margin: 0 -1px;
    font-weight: 700;
}

/* "Videollamada con el asistente" (sidebar footer): a <button> among the <a> nav items, with a live-green camera. */
.nav-item--video[b-9butiq3wqh] { font: inherit; cursor: pointer; text-align: left; }
.nav-item--video .nav-icon[b-9butiq3wqh] { color: #16a34a; }
.nav-item--video:disabled[b-9butiq3wqh] { cursor: progress; opacity: .6; }
/* /Layout/CustomerLayout.razor.rz.scp.css */
/* Mirrors PublicLayout's shell so customer pages keep the same dark, full-height
   base; the only intentional difference from PublicLayout is that there is no
   marketing header/footer. Pages with their own full-bleed background (QR /
   reservation / waitlist) paint over this; the online-order page is a centred
   480px column that relies on this shell colour filling the gutters on wider
   screens. */
.customer-shell[b-k2jklwrxx5] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #0f1117;
    color: #f1f5f9;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.customer-main[b-k2jklwrxx5] {
    flex: 1 0 auto;
    width: 100%;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-iluq4m9wgc] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    background: #0f172a; /* dark background to prevent white gaps */
}

main[b-iluq4m9wgc] {
    flex: 1;
}

.sidebar[b-iluq4m9wgc] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-iluq4m9wgc] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-iluq4m9wgc]  a, .top-row[b-iluq4m9wgc]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-iluq4m9wgc]  a:hover, .top-row[b-iluq4m9wgc]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-iluq4m9wgc]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-iluq4m9wgc] {
        justify-content: space-between;
    }

    .top-row[b-iluq4m9wgc]  a, .top-row[b-iluq4m9wgc]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .top-row[b-iluq4m9wgc] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    /* only pad articles on non�full-bleed pages */
    .page.has-edge article.content[b-iluq4m9wgc] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }


}

@media (min-width: 641px) {
    .page.has-edge article.content.content--full[b-iluq4m9wgc] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}


/* Emphasize the Orders entry a bit without being flashy */
.nav-cta[b-iluq4m9wgc] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .75rem;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    background: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: transform .04s ease, background-color .12s ease, box-shadow .12s ease;
}

    .nav-cta .bi[b-iluq4m9wgc] {
        font-size: 1rem;
    }

    .nav-cta:hover[b-iluq4m9wgc] {
        background: #f9fafb;
        box-shadow: 0 2px 10px rgba(0,0,0,.06);
    }

    .nav-cta:active[b-iluq4m9wgc] {
        transform: translateY(1px);
    }




.page.with-tables.tables-docked article.content--full[b-iluq4m9wgc] {
    margin-right: 0 !important; /* Don't add extra margin */
}
/* /Layout/NavMenu.razor.rz.scp.css */
.nav-scrollable[b-96tobgrds0] {
    height: 100%;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.nav-scrollable[b-96tobgrds0]::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
}

.nav-vertical[b-96tobgrds0] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px;
    padding-top: 60px; /* Space for hamburger button */
}

.nav-group[b-96tobgrds0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* =============================================
   DARK SIDEBAR STYLES
   The sidebar has a dark gradient background,
   so all items need light text/icons
   ============================================= */

.nav-label[b-96tobgrds0] {
    text-transform: uppercase;
    letter-spacing: .08em;
    font: 700 11px/1 system-ui;
    color: rgba(255,255,255,.7);
    padding: 10px 12px 6px;
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,.1);
}

/* First label doesn't need top border */
.nav-group:first-child .nav-label[b-96tobgrds0] {
    border-top: none;
    margin-top: 0;
}

/* Base nav-link styles for dark sidebar.
   ::deep is required so styles also reach <NavLink>-rendered <a> tags —
   NavLink is a child component, and Blazor CSS isolation does not apply the
   scope attribute to nested-component output. Without ::deep, only the
   <button> nav links (rendered directly by this component) get styled, while
   NavLinks fall back to the browser's default link color. The result is a
   misleading "everything looks blue" sidebar where the active-state
   highlighting is silently inert. ::deep makes both branches consistent. */
.nav-vertical[b-96tobgrds0]  .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    /* 44px floor everywhere (not just the coarse-pointer ≤1024px block below):
       POS touchscreens often run ≥1025px, where padding alone left nav items
       at ~41px. Harmless for mouse users. */
    min-height: 44px;
    box-sizing: border-box;
    border-radius: 10px;
    text-decoration: none;
    color: rgba(255,255,255,.9);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s ease;
    width: 100%;
    text-align: left;
}

/* Force color for both anchor and button elements */
.nav-vertical[b-96tobgrds0]  a.nav-link,
.nav-vertical[b-96tobgrds0]  a.nav-link:link,
.nav-vertical[b-96tobgrds0]  a.nav-link:visited,
.nav-vertical[b-96tobgrds0]  button.nav-link {
    color: rgba(255,255,255,.9);
}

.nav-vertical[b-96tobgrds0]  .nav-link [class^="bi"] {
    font-size: 16px;
    width: 20px;
    text-align: center;
    color: rgba(255,255,255,.6);
    transition: color 0.15s ease;
}

/* Hover state */
.nav-vertical[b-96tobgrds0]  .nav-link:hover {
    background: rgba(255,255,255,.1);
    color: #fff;
}

.nav-vertical[b-96tobgrds0]  .nav-link:hover [class^="bi"] {
    color: #60a5fa;
}

/* Active state (current page) — bg tint + left-rail accent + bold weight +
   coloured icon. Now actually applies to NavLink-rendered <a> tags thanks
   to ::deep, so the operator can see at a glance which route they're on. */
.nav-vertical[b-96tobgrds0]  a.nav-link.active {
    position: relative;
    background: rgba(59,130,246,.2);
    color: #fff;
    font-weight: 600;
}

.nav-vertical[b-96tobgrds0]  a.nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    background: #60a5fa;
    border-radius: 0 4px 4px 0;
}

.nav-vertical[b-96tobgrds0]  a.nav-link.active [class^="bi"] {
    color: #60a5fa;
}

/* Download button */
.nav-download[b-96tobgrds0] {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.15);
}

.nav-vertical[b-96tobgrds0]  .nav-link.download {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
    position: relative;
}

.nav-vertical[b-96tobgrds0]  .nav-link.download [class^="bi"] {
    color: rgba(255, 255, 255, 0.9);
}

.nav-vertical[b-96tobgrds0]  .nav-link.download:hover {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 6px 16px rgba(5, 150, 105, 0.35);
    transform: translateY(-1px);
}

.nav-vertical[b-96tobgrds0]  .nav-link.download:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25);
}

.nav-vertical[b-96tobgrds0]  .nav-link.download .badge {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: auto;
}

/* ========================================
   TOUCH-FRIENDLY NAV (mobile & tablet)
   Minimum 44px touch targets per Apple HIG
   ======================================== */
@media (max-width: 1024px) and (pointer: coarse) {
    .nav-vertical[b-96tobgrds0]  .nav-link {
        min-height: 44px;
        padding: 12px 14px;
        font-size: 15px;
        gap: 14px;
        border-radius: 12px;
    }

    .nav-vertical[b-96tobgrds0]  .nav-link [class^="bi"] {
        font-size: 18px;
        width: 22px;
    }

    .nav-label[b-96tobgrds0] {
        font-size: 12px;
        padding: 12px 14px 6px;
    }

    .nav-group[b-96tobgrds0] {
        gap: 2px;
    }
}

/* Phone-specific: slightly more padding */
@media (max-width: 600px) {
    .nav-vertical[b-96tobgrds0] {
        padding: 10px;
        padding-top: 52px; /* Space for smaller hamburger */
        gap: 12px;
    }

    .nav-vertical[b-96tobgrds0]  .nav-link {
        min-height: 46px;
        padding: 13px 14px;
        font-size: 15px;
    }
}

/* Sign out: set apart from the navigation items with a divider + muted red
   tint so it reads as the terminal action, not just another destination. */
.nav-vertical[b-96tobgrds0]  .nav-logout {
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: rgba(248, 113, 113, .9);
}
.nav-vertical[b-96tobgrds0]  .nav-logout [class^="bi"] {
    color: rgba(248, 113, 113, .85);
}
.nav-vertical[b-96tobgrds0]  .nav-logout:hover {
    background: rgba(248, 113, 113, .12);
    color: #fca5a5;
}
.nav-vertical[b-96tobgrds0]  .nav-logout:hover [class^="bi"] {
    color: #fca5a5;
}
/* /Layout/PublicLayout.razor.rz.scp.css */
.public-shell[b-uuag429sqn] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #0f1117;
    color: #f1f5f9;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.public-main[b-uuag429sqn] {
    flex: 1 0 auto;
    width: 100%;
}
/* /Pages/Admin/Acquirers.razor.rz.scp.css */
.acq-container[b-1rhuthoh6u] { padding: 1.5rem; }
.page-header[b-1rhuthoh6u] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; }
.page-header h1[b-1rhuthoh6u] { font-size: 1.5rem; color: var(--adm-fg-f1f5f9); margin: 0; }
.subtitle[b-1rhuthoh6u] { color: var(--adm-fg-94a3b8); font-size: 0.875rem; margin-top: 0.25rem; }

.btn[b-1rhuthoh6u] { padding: 0.5rem 1rem; border-radius: 0.375rem; font-size: 0.875rem; cursor: pointer; border: none; transition: all 0.15s; }
.btn.primary[b-1rhuthoh6u] { background: #3b82f6; color: white; }
.btn.primary:hover[b-1rhuthoh6u] { background: #2563eb; }
.btn.outline[b-1rhuthoh6u] { background: transparent; border: 1px solid var(--adm-bd-334155); color: var(--adm-fg-e2e8f0); }
.btn.outline:hover[b-1rhuthoh6u] { border-color: var(--adm-bd-475569); }
.btn.danger-outline[b-1rhuthoh6u] { background: transparent; border: 1px solid var(--adm-bd-ef4444); color: var(--adm-fg-ef4444); }
.btn.danger-outline:hover[b-1rhuthoh6u] { background: var(--adm-bg-ef4444-a0_1); }
.btn:disabled[b-1rhuthoh6u] { opacity: 0.5; cursor: not-allowed; }

.acq-grid[b-1rhuthoh6u] { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.acq-card[b-1rhuthoh6u] { background: var(--adm-bg-1e293b); border: 1px solid var(--adm-bdon-ffffff-334155); border-radius: 0.5rem; padding: 1.25rem; }
.acq-card.inactive[b-1rhuthoh6u] { opacity: 0.6; }
.acq-card-head[b-1rhuthoh6u] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; gap: 0.5rem; }
.acq-card-head h3[b-1rhuthoh6u] { color: var(--adm-fg-f1f5f9); margin: 0; font-size: 1rem; }
.badge[b-1rhuthoh6u] { padding: 0.2rem 0.5rem; border-radius: 0.25rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; white-space: nowrap; }
.badge.active[b-1rhuthoh6u] { background: var(--adm-bg-22c55e-a0_15); color: var(--adm-fgon-d8f2e4-22c55e); }
.badge.inactive[b-1rhuthoh6u] { background: var(--adm-bg-94a3b8-a0_15); color: var(--adm-fgon-e2e6eb-94a3b8); }
.acq-info[b-1rhuthoh6u] { margin-bottom: 0.75rem; }
.detail-row[b-1rhuthoh6u] { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.8rem; color: var(--adm-fg-e2e8f0); padding: 0.15rem 0; }
.detail-row .label[b-1rhuthoh6u] { color: var(--adm-fg-94a3b8); flex-shrink: 0; }
.mono[b-1rhuthoh6u] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; word-break: break-all; }
.acq-actions[b-1rhuthoh6u] { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.card[b-1rhuthoh6u] { background: var(--adm-bg-1e293b); border: 1px solid var(--adm-bdon-ffffff-334155); border-radius: 0.5rem; padding: 1.25rem; }
.acq-mapping h3[b-1rhuthoh6u] { color: var(--adm-fg-f1f5f9); margin: 0 0 0.25rem; font-size: 1rem; }
.acq-mapping .subtitle[b-1rhuthoh6u] { margin: 0 0 1rem; }
.map-row[b-1rhuthoh6u] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-top: 1px solid var(--adm-bd-0f172a); }
.map-label[b-1rhuthoh6u] { color: var(--adm-fg-e2e8f0); font-size: 0.875rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.map-select[b-1rhuthoh6u] { max-width: 220px; }
.muted[b-1rhuthoh6u] { color: var(--adm-fg-64748b); font-size: 0.8rem; margin: 0.5rem 0 0; }

.acq-export[b-1rhuthoh6u] { margin-top: 1.5rem; }
.acq-export h3[b-1rhuthoh6u] { color: var(--adm-fg-f1f5f9); margin: 0 0 0.25rem; font-size: 1rem; }
.acq-export .subtitle[b-1rhuthoh6u] { margin: 0 0 1rem; }
.export-row[b-1rhuthoh6u] { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.export-row label[b-1rhuthoh6u] { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: var(--adm-fg-94a3b8); }
.export-row .form-input[b-1rhuthoh6u] { width: auto; }

.form-input[b-1rhuthoh6u] { background: var(--adm-bg-0f172a); border: 1px solid var(--adm-bdon-f8fafc-334155); color: var(--adm-fgon-f8fafc-e2e8f0); padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem; width: 100%; box-sizing: border-box; }
.form-input:focus[b-1rhuthoh6u] { border-color: var(--adm-bdon-f8fafc-3b82f6); outline: none; }

.modal-overlay[b-1rhuthoh6u] { position: fixed; inset: 0; background: var(--adm-scrim-000000-a0_6); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal[b-1rhuthoh6u] { background: var(--adm-bg-1e293b); border: 1px solid var(--adm-bdon-ffffff-334155); border-radius: 0.75rem; width: 90%; max-width: 480px; }
.modal-header[b-1rhuthoh6u] { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--adm-bd-334155); }
.modal-header h2[b-1rhuthoh6u] { font-size: 1.1rem; color: var(--adm-fg-f1f5f9); margin: 0; }
.close-btn[b-1rhuthoh6u] { background: none; border: none; color: var(--adm-fg-94a3b8); font-size: 1.2rem; cursor: pointer; }
.modal-body[b-1rhuthoh6u] { padding: 1.25rem; }
.form-group[b-1rhuthoh6u] { margin-bottom: 1rem; }
.form-group label[b-1rhuthoh6u] { display: block; font-size: 0.8rem; color: var(--adm-fg-94a3b8); margin-bottom: 0.25rem; }
.modal-footer[b-1rhuthoh6u] { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 1rem 1.25rem; border-top: 1px solid var(--adm-bd-334155); }

.loading-state[b-1rhuthoh6u] { display: flex; justify-content: center; padding: 3rem; }
.spinner[b-1rhuthoh6u] { width: 2rem; height: 2rem; border: 3px solid var(--adm-bd-334155); border-top: 3px solid var(--adm-bd-3b82f6); border-radius: 50%; animation: spin-b-1rhuthoh6u 0.8s linear infinite; }
@keyframes spin-b-1rhuthoh6u { to { transform: rotate(360deg); } }
.empty-state[b-1rhuthoh6u] { text-align: center; padding: 3rem; color: var(--adm-fg-94a3b8); }
.empty-state h2[b-1rhuthoh6u] { color: var(--adm-fg-e2e8f0); margin-bottom: 0.5rem; }

/* ===== 44px touch targets ===== */
.btn[b-1rhuthoh6u], .form-input[b-1rhuthoh6u] { min-height: 44px; }
.btn[b-1rhuthoh6u] { display: inline-flex; align-items: center; justify-content: center; }
.close-btn[b-1rhuthoh6u] { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* ===== Mobile ===== */
@media (max-width: 640px) {
    /* Shell already pads the content; our own 1.5rem left/right stole ~48px more. */
    .acq-container[b-1rhuthoh6u] { padding: 1rem 0; }

    /* minmax(320px, …) is wider than the usable width on a 360–390px phone. */
    .acq-grid[b-1rhuthoh6u] { grid-template-columns: 1fr; }
    .acq-card-head h3[b-1rhuthoh6u] { min-width: 0; overflow-wrap: anywhere; }
    .detail-row > span[b-1rhuthoh6u] { min-width: 0; overflow-wrap: anywhere; }

    /* Label + select side-by-side leaves ~80px for the terminal id — stack them. */
    .map-row[b-1rhuthoh6u] { flex-direction: column; align-items: stretch; gap: 0.35rem; }
    .map-label[b-1rhuthoh6u] { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
    .map-select[b-1rhuthoh6u] { max-width: none; }

    /* Two date inputs + button don't fit on one line at 16px font. */
    .export-row label[b-1rhuthoh6u] { flex: 1 1 100%; }
    .export-row .btn[b-1rhuthoh6u] { width: 100%; }
}
/* /Pages/Admin/AiMenuImport.razor.rz.scp.css */
/* The whole AI-import UI now lives in AiMenuImportPanel (own scoped CSS).
   This page just provides a dark full-height backdrop so the standalone route
   matches the panel's dark theme. */
.aimi-page[b-ja568l3x9l] {
    min-height: 100%;
    background: var(--adm-bg-0d1117);
    padding: 8px 0 24px;
}
/* /Pages/Admin/AllergenReport.razor.rz.scp.css */
/* Base classes for isolated CSS */
.btn[b-vfa3nag4xo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    min-height: 44px;
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    background: var(--adm-bg-1e293b);
    color: var(--adm-fgon-ffffff-e2e8f0);
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.btn:hover[b-vfa3nag4xo] { background: var(--adm-bghov-ffffff-334155); }
.btn:active[b-vfa3nag4xo] { transform: scale(0.97); }
.btn.primary[b-vfa3nag4xo] { background: #2563eb; color: #fff; border-color: #1e4fcb; }
.btn.primary:hover[b-vfa3nag4xo] { background: #1d4ed8; }
.btn.primary:active[b-vfa3nag4xo] { background: #1e40af; }
.btn.primary:disabled[b-vfa3nag4xo] { background: var(--adm-bg-475569); color: var(--adm-fgon-f9fafb-94a3b8); cursor: not-allowed; }
.btn.secondary[b-vfa3nag4xo] { background: var(--adm-bg-334155); color: var(--adm-fgon-f1f5f9-e2e8f0); }
.btn.secondary:hover[b-vfa3nag4xo] { background: var(--adm-bghov-f1f5f9-475569); }
.btn.secondary:active[b-vfa3nag4xo] { background: var(--adm-bg-556677); }
.btn.secondary:disabled[b-vfa3nag4xo] { background: var(--adm-bg-475569); color: var(--adm-fgon-f9fafb-64748b); cursor: not-allowed; }
.btn.outline[b-vfa3nag4xo] { background: transparent; border-color: var(--adm-bd-475569); color: var(--adm-fg-94a3b8); }
.btn.outline:hover[b-vfa3nag4xo] { border-color: var(--adm-bd-3b82f6); color: var(--adm-fg-e2e8f0); }
.btn.outline:active[b-vfa3nag4xo] { background: var(--adm-bg-1e293b); border-color: var(--adm-bdon-ffffff-3b82f6); }
.btn.outline:disabled[b-vfa3nag4xo] { color: var(--adm-fg-475569); border-color: var(--adm-bd-334155); cursor: not-allowed; }

.form-input[b-vfa3nag4xo], .form-select[b-vfa3nag4xo] {
    width: 100%;
    padding: 10px 12px;
    min-height: 44px;
    background: var(--adm-bg-0f172a);
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    color: var(--adm-fgon-f8fafc-e2e8f0);
    font-size: 0.85rem;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.form-input:focus[b-vfa3nag4xo], .form-select:focus[b-vfa3nag4xo] {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-3b82f6);
    box-shadow: 0 0 0 2px var(--adm-sh-3b82f6-a0_2);
}

.form-input[b-vfa3nag4xo]::placeholder { color: var(--adm-fgon-f8fafc-475569); }

.spinner[b-vfa3nag4xo] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--adm-bd-ffffff-a0_2);
    border-top-color: var(--adm-bd-3b82f6);
    border-radius: 50%;
    animation: spin-b-vfa3nag4xo 0.7s linear infinite;
    margin: 0 auto;
}

.loading-state[b-vfa3nag4xo] {
    text-align: center;
    padding: 40px;
    color: var(--adm-fg-94a3b8);
}

.allergen-report-page[b-vfa3nag4xo] {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-vfa3nag4xo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.header-left[b-vfa3nag4xo] {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.header-left h1[b-vfa3nag4xo] {
    margin: 0;
    font-size: 1.5rem;
    color: var(--adm-fg-f1f5f9);
}

.item-count[b-vfa3nag4xo] {
    font-size: 0.85rem;
    color: var(--adm-fgon-ffffff-64748b);
    background: var(--adm-bg-1e293b);
    padding: 4px 10px;
    border-radius: 12px;
}

.header-actions[b-vfa3nag4xo] {
    display: flex;
    gap: 8px;
}

.message-banner[b-vfa3nag4xo] {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.message-banner.error[b-vfa3nag4xo] {
    background: var(--adm-bg-7f1d1d);
    color: var(--adm-fgon-fee2e2-fca5a5);
}

.message-banner.success[b-vfa3nag4xo] {
    background: var(--adm-bg-14532d);
    color: var(--adm-fgon-def7e8-86efac);
}

.message-banner .dismiss[b-vfa3nag4xo] {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.2rem;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
}

.filter-bar[b-vfa3nag4xo] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.search-input[b-vfa3nag4xo] {
    max-width: 280px;
}

.filter-toggle[b-vfa3nag4xo] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--adm-fg-94a3b8);
    cursor: pointer;
    min-height: 44px;
    padding: 4px 8px;
}

.filter-toggle input[b-vfa3nag4xo] {
    accent-color: var(--adm-fg-3b82f6);
}

.report-table-wrapper[b-vfa3nag4xo] {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--adm-bd-1e293b);
}

.report-table[b-vfa3nag4xo] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.report-table thead[b-vfa3nag4xo] {
    background: var(--adm-bg-0f172a);
    position: sticky;
    top: 0;
    z-index: 1;
}

.report-table th[b-vfa3nag4xo] {
    padding: 10px 8px;
    text-align: center;
    color: var(--adm-fg-94a3b8);
    font-weight: 600;
    border-bottom: 2px solid var(--adm-bd-1e293b);
    white-space: nowrap;
}

.report-table th.col-name[b-vfa3nag4xo],
.report-table td.col-name[b-vfa3nag4xo] {
    text-align: left;
    padding-left: 16px;
    min-width: 180px;
}

.report-table th.col-cat[b-vfa3nag4xo],
.report-table td.col-cat[b-vfa3nag4xo] {
    text-align: left;
    min-width: 120px;
}

.report-table th.col-allergen[b-vfa3nag4xo] {
    width: 40px;
    font-size: 1.1rem;
}

.report-table td[b-vfa3nag4xo] {
    padding: 8px;
    border-bottom: 1px solid var(--adm-bd-1e293b);
    text-align: center;
    color: var(--adm-fg-cbd5e1);
}

.report-table tbody tr:hover[b-vfa3nag4xo] {
    background: var(--adm-bg-1e293b40);
}

.col-allergen.has[b-vfa3nag4xo] {
    background: var(--adm-bg-451a0340);
}

.col-allergen .check[b-vfa3nag4xo] {
    color: var(--adm-fg-f59e0b);
    font-size: 0.7rem;
}

/* Precautionary "puede contener / trazas" — hollow amber ring, visibly
   weaker than the solid ● for "contiene" so the two never get confused. */
.col-allergen.trace[b-vfa3nag4xo] {
    background: var(--adm-bg-45200310);
}

.col-allergen .trace-mark[b-vfa3nag4xo] {
    color: var(--adm-fg-b4791e);
    font-size: 0.72rem;
}

.allergen-legend[b-vfa3nag4xo] {
    display: flex;
    gap: 18px;
    margin: 0 0 10px;
    font-size: 0.8rem;
    color: var(--adm-fg-94a3b8);
}

.allergen-legend .check[b-vfa3nag4xo] { color: var(--adm-fg-f59e0b); }
.allergen-legend .trace-mark[b-vfa3nag4xo] { color: var(--adm-fg-b4791e); }

.recipe-badge[b-vfa3nag4xo] {
    background: var(--adm-bg-1e3a5f);
    color: var(--adm-fgon-eff6ff-93c5fd);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
}

.col-recipe[b-vfa3nag4xo] {
    white-space: nowrap;
}

.no-recipe[b-vfa3nag4xo] {
    color: var(--adm-fg-475569);
}

/* E1: item whose recipe couldn't fully resolve → allergens may be
   UNDER-reported. Amber, not red — it's a "verify manually" prompt,
   not a hard error; hover shows ResolutionNote via title=. */
.resolution-warning[b-vfa3nag4xo] {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--adm-bg-d97706-a0_18);
    color: var(--adm-fgon-f2e2d0-fcd34d);
    cursor: help;
}

.empty-state[b-vfa3nag4xo] {
    text-align: center;
    padding: 40px;
    color: var(--adm-fg-64748b);
}

.spinner-sm[b-vfa3nag4xo] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--adm-bd-ffffff-a0_3);
    border-top-color: var(--adm-bd-ffffff);
    border-radius: 50%;
    animation: spin-b-vfa3nag4xo 0.6s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
}

@keyframes spin-b-vfa3nag4xo {
    to { transform: rotate(360deg); }
}

/* admin-mobile.css turns any <table> that is NOT inside a .table-wrap into its
   own display:block scroll box — the app-wide fallback for unwrapped tables.
   This page already ships a purpose-built scroll box (.report-table-wrapper),
   so opt the matrix out of the fallback and keep it a real <table>: the
   fallback caps it at max-width:100%, which squashes the 17 columns down to
   min-content and wraps every item name onto several lines. The !important is
   needed because the global selector (.admin-content table:not(...)) outranks a
   scoped page rule. Desktop (>1024px) is untouched. */
@media (max-width: 1024px) {
    .report-table[b-vfa3nag4xo] {
        display: table !important;
        max-width: none !important;
        overflow-x: visible !important;
    }
}

@media (max-width: 768px) {
    .allergen-report-page[b-vfa3nag4xo] {
        padding: 12px;
    }

    .filter-bar[b-vfa3nag4xo] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-input[b-vfa3nag4xo] {
        max-width: none;
    }
}

/* Phone: the allergen matrix (Artículo + Categoría + 14 allergen columns +
   Receta) is far wider than ~390px. Make the table reachable by horizontal
   scroll INSIDE its wrapper instead of letting it widen the whole page off
   the right edge.
   - The page is bounded to the viewport and clips its own horizontal
     overflow so the table can't push the layout wide (the flex ancestors in
     AdminLayout otherwise grow to the table's intrinsic width).
   - min-width:0 lets .report-table-wrapper shrink below content width within
     that flex chain, so its existing overflow-x:auto actually engages.
   - width:max-content (overriding the base width:100%) lets the table keep
     its natural column widths and overflow the bounded wrapper, which then
     scrolls. min-width:100% keeps it full-bleed when the menu is narrow. */
@media (max-width: 600px) {
    .allergen-report-page[b-vfa3nag4xo] {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* The banner carries raw exception text (ex.Message), which can hold an
       unbreakable token — a URL or a status line — that a flex item won't
       shrink below. Let it wrap instead of widening the row. */
    .message-banner[b-vfa3nag4xo] {
        align-items: flex-start;
        gap: 8px;
    }

    .message-banner > span[b-vfa3nag4xo] {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .report-table-wrapper[b-vfa3nag4xo] {
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .report-table[b-vfa3nag4xo] {
        width: max-content;
        min-width: 100%;
    }

    /* Keep the first two columns readable without hogging the row; the
       allergen icon columns are reached by scrolling right. */
    .report-table th.col-name[b-vfa3nag4xo],
    .report-table td.col-name[b-vfa3nag4xo] {
        min-width: 150px;
    }

    .report-table th.col-cat[b-vfa3nag4xo],
    .report-table td.col-cat[b-vfa3nag4xo] {
        min-width: 100px;
    }
}

/* ── Phone: card view instead of the 17-column matrix ───────────────────────
   Kept at the END of the file on purpose: a media query adds no specificity, so a
   `display` override for .report-table-wrapper declared above its own base rule
   would lose to it. */

/* Desktop keeps the matrix; the cards are markup-only until the phone breakpoint. */
.allergen-cards[b-vfa3nag4xo] {
    display: none;
}

@media (max-width: 640px) {
    /* The matrix is ~870px wide: at 360px the allergen dots (the point of the page)
       are off-screen, and scrolling to them scrolls the item name out of view. */
    .report-table-wrapper[b-vfa3nag4xo] {
        display: none;
    }

    .allergen-cards[b-vfa3nag4xo] {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .ac-card[b-vfa3nag4xo] {
        background: var(--adm-bg-1e293b);
        border: 1px solid var(--adm-bdon-ffffff-334155);
        border-radius: 10px;
        padding: 12px 14px;
    }

    .ac-head[b-vfa3nag4xo] {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 8px;
    }

    .ac-name[b-vfa3nag4xo] {
        font-weight: 600;
        color: var(--adm-fgon-ffffff-f1f5f9);
        font-size: 0.95rem;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .ac-cat[b-vfa3nag4xo] {
        font-size: 0.75rem;
        color: var(--adm-fgon-ffffff-94a3b8);
        flex: 0 0 auto;
    }

    .ac-chips[b-vfa3nag4xo] {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Only the allergens the item actually has are listed, so a chip is meaningful
       on its own — no legend lookup and no empty cells to scan past. */
    .ac-chip[b-vfa3nag4xo] {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 9px;
        border-radius: 999px;
        font-size: 0.78rem;
        line-height: 1.3;
        white-space: nowrap;
    }

    .ac-chip.has[b-vfa3nag4xo] {
        background: var(--adm-bg-ef4444-a0_14);
        border: 1px solid var(--adm-bd-ef4444-a0_4);
        color: var(--adm-fgon-ffffff-fca5a5);
    }

    /* Traces ("puede contener") must stay visually distinct from a declared allergen. */
    .ac-chip.trace[b-vfa3nag4xo] {
        background: var(--adm-bg-f59e0b-a0_12);
        border: 1px dashed var(--adm-bd-f59e0b-a0_45);
        color: var(--adm-fgon-ffffff-fcd34d);
    }

    .ac-none[b-vfa3nag4xo] {
        font-size: 0.85rem;
        color: var(--adm-fgon-ffffff-64748b);
    }

    .ac-foot[b-vfa3nag4xo] {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 10px;
        padding-top: 8px;
        border-top: 1px solid var(--adm-bdon-ffffff-334155);
    }
}
/* /Pages/Admin/AsistentesIa.razor.rz.scp.css */
/* Asistentes IA (ChatGPT / Claude connector). Scoped; light-first with
   :root[data-theme="dark"] overrides, like the WhatsApp hub it sits beside. */

.ai-page[b-gh27r2oifd] { max-width: 760px; margin: 0 auto; padding: 1rem 1rem 3rem; }

.ai-header[b-gh27r2oifd] { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.ai-header h1[b-gh27r2oifd] { font-size: 1.5rem; font-weight: 700; margin: 0; color: #111827; }
.ai-header .bi-stars[b-gh27r2oifd] { color: #7c3aed; margin-right: .35rem; }

.ai-back[b-gh27r2oifd] {
    border: 1px solid #e5e7eb; background: #fff; border-radius: 10px;
    width: 44px; height: 44px; font-size: 1.1rem; cursor: pointer; color: #374151;
}
.ai-back:hover[b-gh27r2oifd] { background: #f9fafb; }

.ai-loading[b-gh27r2oifd], .ai-error[b-gh27r2oifd] { display: flex; align-items: center; gap: .75rem; padding: 2rem; color: #6b7280; }
.ai-error button[b-gh27r2oifd] { border: 1px solid #d1d5db; background: #fff; border-radius: 8px; padding: .35rem .75rem; cursor: pointer; }
.ai-spinner[b-gh27r2oifd] {
    width: 20px; height: 20px; border: 3px solid #e5e7eb; border-top-color: #7c3aed;
    border-radius: 50%; animation: ai-spin-b-gh27r2oifd .8s linear infinite;
}
@keyframes ai-spin-b-gh27r2oifd { to { transform: rotate(360deg); } }

.ai-card[b-gh27r2oifd] { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 1.1rem 1.15rem; margin-bottom: 1rem; }
.ai-card h2[b-gh27r2oifd] { font-size: 1rem; font-weight: 700; margin: 0; color: #111827; }
.ai-card-head[b-gh27r2oifd] { display: flex; align-items: center; gap: .5rem; margin-bottom: .65rem; }
.ai-card-head .bi[b-gh27r2oifd] { color: #7c3aed; font-size: 1.05rem; }

.ai-intro h2[b-gh27r2oifd] { font-size: 1.1rem; margin-bottom: .5rem; }
.ai-intro p[b-gh27r2oifd] { font-size: .92rem; color: #374151; line-height: 1.5; margin: 0 0 .6rem; }
.ai-safe[b-gh27r2oifd] { display: flex; gap: .5rem; align-items: flex-start; color: #065f46 !important; }
.ai-safe .bi[b-gh27r2oifd] { color: #10b981; margin-top: .1rem; }

.ai-sub[b-gh27r2oifd] { font-size: .88rem; color: #6b7280; line-height: 1.45; margin: 0; }

.ai-steps[b-gh27r2oifd] { margin: 0; padding-left: 1.2rem; font-size: .9rem; color: #374151; line-height: 1.55; }
.ai-steps li[b-gh27r2oifd] { margin-bottom: .55rem; }

.ai-url[b-gh27r2oifd] { display: flex; gap: .5rem; align-items: center; margin-top: .4rem; flex-wrap: wrap; }
.ai-url code[b-gh27r2oifd] {
    flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere;
    background: #f3f4f6; border-radius: 8px; padding: .55rem .7rem; font-size: .88rem; color: #111827;
}
.ai-copy[b-gh27r2oifd], .ai-disconnect[b-gh27r2oifd] {
    min-height: 44px; padding: 0 1rem; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: .88rem;
}
.ai-copy[b-gh27r2oifd] { border: 1px solid #c4b5fd; background: #f5f3ff; color: #5b21b6; }
.ai-disconnect[b-gh27r2oifd] { border: 1px solid #fecaca; background: #fff; color: #b91c1c; }
.ai-disconnect:disabled[b-gh27r2oifd] { opacity: .5; cursor: default; }

.ai-list[b-gh27r2oifd] { list-style: none; margin: 0; padding: 0; }
.ai-row[b-gh27r2oifd] { display: flex; gap: .75rem; align-items: center; justify-content: space-between; padding: .7rem 0; border-top: 1px solid #f3f4f6; }
.ai-row:first-child[b-gh27r2oifd] { border-top: 0; padding-top: 0; }
.ai-row-main[b-gh27r2oifd] { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ai-row-main strong[b-gh27r2oifd] { color: #111827; font-size: .95rem; }
.ai-meta[b-gh27r2oifd] { font-size: .8rem; color: #6b7280; }

@media (max-width: 520px) {
    .ai-row[b-gh27r2oifd] { flex-direction: column; align-items: stretch; }
}

:root[data-theme="dark"] .ai-header h1[b-gh27r2oifd],
:root[data-theme="dark"] .ai-card h2[b-gh27r2oifd],
:root[data-theme="dark"] .ai-row-main strong[b-gh27r2oifd] { color: #f3f4f6; }
:root[data-theme="dark"] .ai-intro p[b-gh27r2oifd],
:root[data-theme="dark"] .ai-steps[b-gh27r2oifd] { color: #d1d5db; }
:root[data-theme="dark"] .ai-sub[b-gh27r2oifd],
:root[data-theme="dark"] .ai-meta[b-gh27r2oifd] { color: #9ca3af; }
:root[data-theme="dark"] .ai-safe[b-gh27r2oifd] { color: #6ee7b7 !important; }
:root[data-theme="dark"] .ai-back[b-gh27r2oifd] { background: #1f2937; border-color: #374151; color: #e5e7eb; }
:root[data-theme="dark"] .ai-card[b-gh27r2oifd] { background: #1f2937; border-color: #374151; }
:root[data-theme="dark"] .ai-url code[b-gh27r2oifd] { background: #374151; color: #f3f4f6; }
:root[data-theme="dark"] .ai-copy[b-gh27r2oifd] { background: rgba(124,58,237,.15); border-color: rgba(167,139,250,.45); color: #c4b5fd; }
:root[data-theme="dark"] .ai-disconnect[b-gh27r2oifd] { background: transparent; border-color: rgba(248,113,113,.45); color: #fca5a5; }
:root[data-theme="dark"] .ai-row[b-gh27r2oifd] { border-top-color: #374151; }
/* /Pages/Admin/AuditLog.razor.rz.scp.css */
/* Audit log — premium visual language to match the UserPermissions page:
   gradient surfaces, quiet labels, colored action badges, and expandable
   rows with JSON pretty-print for old/new value diffs. */

.audit-page[b-bufsfqq7u9] {
    padding: 1.5rem;
    max-width: 1240px;
}

.page-header[b-bufsfqq7u9] {
    margin-bottom: 1.5rem;
}

.page-header h1[b-bufsfqq7u9] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--adm-fg-f1f5f9);
    letter-spacing: -0.01em;
}

.page-header p[b-bufsfqq7u9] {
    margin: 0.3rem 0 0;
    color: var(--adm-fg-94a3b8);
    font-size: 0.88rem;
    max-width: 640px;
}

/* ----- Filter bar ----- */

.filter-bar[b-bufsfqq7u9] {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 0.9fr 0.9fr auto;
    gap: 0.75rem;
    align-items: end;
    padding: 1rem 1.1rem;
    background: linear-gradient(180deg, var(--adm-bggrad-1f2a3d) 0%, var(--adm-bggrad-1a2436) 100%);
    border: 1px solid var(--adm-bd-94a3b8-a0_14);
    border-radius: 14px;
    margin-bottom: 1.2rem;
}

.filter-group[b-bufsfqq7u9] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.filter-group label[b-bufsfqq7u9] {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--adm-fg-94a3b8);
    letter-spacing: 0.02em;
}

.filter-input[b-bufsfqq7u9] {
    width: 100%;
    padding: 0.55rem 0.75rem;
    background: var(--adm-bg-0e1624);
    border: 1px solid var(--adm-bd-94a3b8-a0_18);
    border-radius: 8px;
    color: var(--adm-fgon-ffffff-f1f5f9);
    font-size: 0.88rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.filter-input:focus[b-bufsfqq7u9] {
    outline: none;
    border-color: var(--adm-bdon-ffffff-3b82f6);
    box-shadow: 0 0 0 3px var(--adm-sh-3b82f6-a0_18);
}

.filter-actions[b-bufsfqq7u9] {
    display: flex;
    gap: 0.5rem;
}

/* ----- Buttons ----- */

.btn[b-bufsfqq7u9] {
    padding: 0.55rem 0.95rem;
    border-radius: 9px;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.btn-primary[b-bufsfqq7u9] {
    background: linear-gradient(180deg, var(--adm-bggrad-3b82f6) 0%, var(--adm-bggrad-2563eb) 100%);
    color: var(--adm-fgon-dde9fd-ffffff);
    box-shadow:
        inset 0 1px 0 var(--adm-sh-ffffff-a0_18),
        0 1px 2px var(--adm-sh-1d4ed8-a0_35);
}

.btn-primary:hover[b-bufsfqq7u9] { filter: brightness(1.08); }
.btn-primary:active[b-bufsfqq7u9] { transform: translateY(1px); }
.btn-primary:disabled[b-bufsfqq7u9] { opacity: 0.5; cursor: not-allowed; }

.btn-ghost[b-bufsfqq7u9] {
    background: transparent;
    color: var(--adm-fg-94a3b8);
    border-color: var(--adm-bd-94a3b8-a0_18);
}

.btn-ghost:hover:not(:disabled)[b-bufsfqq7u9] {
    background: var(--adm-bg-94a3b8-a0_08);
    color: var(--adm-fgon-eceff3-e2e8f0);
    border-color: var(--adm-bd-94a3b8-a0_3);
}

.btn-ghost:disabled[b-bufsfqq7u9] { opacity: 0.4; cursor: not-allowed; }

/* ----- Empty / loading / gated states (shared card shell) ----- */

.state-card[b-bufsfqq7u9] {
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 14px;
    padding: 3rem 2rem;
    text-align: center;
    color: var(--adm-fgon-ffffff-cbd5e1);
}

.state-card h2[b-bufsfqq7u9] {
    margin: 0 0 0.3rem;
    font-size: 1.15rem;
    color: var(--adm-fgon-ffffff-f1f5f9);
}

.state-card .muted[b-bufsfqq7u9] {
    color: var(--adm-fgon-ffffff-94a3b8);
    font-size: 0.88rem;
    margin: 0;
}

.state-card.gated .gated-icon[b-bufsfqq7u9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--adm-bg-3b82f6-a0_12);
    color: var(--adm-fgon-e1ecfb-60a5fa);
    margin-bottom: 1rem;
}

.state-card.gated h2[b-bufsfqq7u9] {
    margin-bottom: 1.2rem;
}

.spinner[b-bufsfqq7u9] {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--adm-bd-334155);
    border-top-color: var(--adm-bd-3b82f6);
    border-radius: 50%;
    animation: spin-b-bufsfqq7u9 0.8s linear infinite;
    margin: 0 auto;
}

@keyframes spin-b-bufsfqq7u9 { to { transform: rotate(360deg); } }

/* ----- Table ----- */

.audit-table-wrap[b-bufsfqq7u9] {
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.audit-table[b-bufsfqq7u9] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.audit-table th[b-bufsfqq7u9] {
    text-align: left;
    padding: 0.85rem 1rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--adm-fgon-f8fafc-94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--adm-bg-0f172a);
    border-bottom: 1px solid var(--adm-bdon-f8fafc-334155);
    white-space: nowrap;
}

.audit-table td[b-bufsfqq7u9] {
    padding: 0.8rem 1rem;
    color: var(--adm-fg-e2e8f0);
    border-bottom: 1px solid var(--adm-bd-94a3b8-a0_08);
    vertical-align: top;
}

.audit-table tbody tr:last-child td[b-bufsfqq7u9] {
    border-bottom: none;
}

.audit-table tbody tr:hover[b-bufsfqq7u9] {
    background: var(--adm-bg-334155-a0_28);
}

.audit-table tbody tr.expanded[b-bufsfqq7u9] {
    background: var(--adm-bg-334155-a0_18);
}

/* Expand toggle */
.expand-cell[b-bufsfqq7u9] {
    padding: 0.65rem 0.5rem 0.65rem 1rem !important;
    width: 42px;
}

.expand-btn[b-bufsfqq7u9] {
    background: transparent;
    border: none;
    padding: 0.3rem;
    cursor: pointer;
    color: var(--adm-fg-64748b);
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.expand-btn:hover[b-bufsfqq7u9] { background: var(--adm-bg-94a3b8-a0_12); color: var(--adm-fgon-e6eaee-e2e8f0); }
.expand-btn:focus-visible[b-bufsfqq7u9] { outline: 2px solid var(--adm-bd-3b82f6); outline-offset: 1px; }
.expand-btn svg[b-bufsfqq7u9] { transition: transform 0.18s cubic-bezier(.2,.8,.3,1); }
.expand-btn svg.rot[b-bufsfqq7u9] { transform: rotate(90deg); color: var(--adm-fg-93c5fd); }

/* Date two-line cell */
.date-cell[b-bufsfqq7u9] {
    white-space: nowrap;
}

.date-primary[b-bufsfqq7u9] {
    color: var(--adm-fg-e2e8f0);
    font-weight: 500;
    font-size: 0.88rem;
}

.date-secondary[b-bufsfqq7u9] {
    color: var(--adm-fg-64748b);
    font-size: 0.74rem;
    margin-top: 2px;
}

/* User cell with avatar */
.user-cell[b-bufsfqq7u9] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.user-avatar[b-bufsfqq7u9] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--adm-bggrad-64748b), var(--adm-bggrad-334155));
    color: var(--adm-fgon-cbd5e1-ffffff);
    font-size: 0.68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 var(--adm-sh-ffffff-a0_14);
    flex-shrink: 0;
}

/* Entity cell */
.entity-cell[b-bufsfqq7u9] {
    color: var(--adm-fg-cbd5e1);
}

.entity-type[b-bufsfqq7u9] {
    font-weight: 500;
}

.entity-id[b-bufsfqq7u9] {
    color: var(--adm-fg-64748b);
    font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
    font-size: 0.82rem;
    margin-left: 0.3rem;
}

/* Details cell — muted, truncated */
.details-cell[b-bufsfqq7u9] {
    color: var(--adm-fg-94a3b8);
    font-size: 0.82rem;
    max-width: 280px;
}

/* ----- Action badges: category-colored pills ----- */

.action-badge[b-bufsfqq7u9] {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    white-space: nowrap;
    background: var(--adm-bg-94a3b8-a0_15);
    color: var(--adm-fgon-e2e6eb-cbd5e1);
}

.action-badge.cat-crud[b-bufsfqq7u9] {
    background: var(--adm-bg-3b82f6-a0_18);
    color: var(--adm-fgon-d6e4fb-93c5fd);
}

.action-badge.cat-money[b-bufsfqq7u9] {
    background: var(--adm-bg-10b981-a0_18);
    color: var(--adm-fgon-ceeee6-6ee7b7);
}

.action-badge.cat-destructive[b-bufsfqq7u9] {
    background: var(--adm-bg-ef4444-a0_18);
    color: var(--adm-fgon-f6d9db-fca5a5);
}

.action-badge.cat-config[b-bufsfqq7u9] {
    background: var(--adm-bg-f59e0b-a0_18);
    color: var(--adm-fgon-f7e9d1-fcd34d);
}

.action-badge.cat-auth[b-bufsfqq7u9] {
    background: var(--adm-bg-a855f7-a0_2);
    color: var(--adm-fgon-e8d9fb-d8b4fe);
}

.action-badge.cat-neutral[b-bufsfqq7u9] {
    background: var(--adm-bg-94a3b8-a0_15);
    color: var(--adm-fgon-e2e6eb-cbd5e1);
}

/* ----- Expanded row: JSON diff-style blocks ----- */

.expanded-row td[b-bufsfqq7u9] {
    background: var(--adm-bg-0f172a);
    border-bottom: 1px solid var(--adm-bdon-f8fafc-334155);
    padding: 1rem 1rem 1.2rem !important;
}

.expanded-grid[b-bufsfqq7u9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.expanded-block[b-bufsfqq7u9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.expanded-block.expanded-ip[b-bufsfqq7u9] {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    grid-column: 1 / -1;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--adm-bd-94a3b8-a0_15);
}

.expanded-block.expanded-ip code[b-bufsfqq7u9] {
    background: var(--adm-bg-94a3b8-a0_1);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--adm-fgon-e9edf1-cbd5e1);
}

.expanded-label[b-bufsfqq7u9] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--adm-fg-94a3b8);
}

.expanded-label.old[b-bufsfqq7u9] { color: var(--adm-fg-fca5a5); }
.expanded-label.new[b-bufsfqq7u9] { color: var(--adm-fg-6ee7b7); }

.json-block[b-bufsfqq7u9] {
    margin: 0;
    padding: 0.75rem 0.9rem;
    background: var(--adm-bg-070b14);
    border: 1px solid var(--adm-bd-94a3b8-a0_14);
    border-radius: 8px;
    color: var(--adm-fgon-ffffff-e2e8f0);
    font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
    font-size: 0.78rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 280px;
    overflow: auto;
}

.json-block.json-old[b-bufsfqq7u9] {
    border-left: 3px solid var(--adm-bd-ef4444-a0_6);
}

.json-block.json-new[b-bufsfqq7u9] {
    border-left: 3px solid var(--adm-bd-10b981-a0_6);
}

/* ----- Pagination ----- */

.pagination[b-bufsfqq7u9] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 0 1rem;
}

.page-info[b-bufsfqq7u9] {
    color: var(--adm-fg-cbd5e1);
    font-size: 0.88rem;
}

.page-info .muted[b-bufsfqq7u9] {
    color: var(--adm-fg-64748b);
    font-size: 0.82rem;
    margin-left: 0.2rem;
}

/* ----- Narrower viewports ----- */

@media (max-width: 1024px) {
    .filter-bar[b-bufsfqq7u9] {
        grid-template-columns: 1fr 1fr;
    }
    .filter-actions[b-bufsfqq7u9] {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
    .expanded-grid[b-bufsfqq7u9] {
        grid-template-columns: 1fr;
    }
    .details-cell[b-bufsfqq7u9] {
        display: none;
    }
}

@media (max-width: 640px) {
    /* The admin shell already pads the content area on a phone; the page's own
       1.5rem gutter on top of that left ~318px of usable width at 390px. Drop
       the horizontal padding and let the shell provide the edge gutter. */
    .audit-page[b-bufsfqq7u9] {
        padding: 1rem 0;
    }

    /* Search / user / action take the full width; the two date pickers keep a
       row to themselves so the bar doesn't eat the whole first screen. A native
       date input needs ~150px, which is exactly what two columns leave at 360px
       — anything narrower and the picker clips. */
    .filter-bar[b-bufsfqq7u9] {
        grid-template-columns: 1fr 1fr;
        padding: 0.85rem;
        gap: 0.6rem;
    }

    .filter-group:nth-child(-n+3)[b-bufsfqq7u9] {
        grid-column: 1 / -1;
    }

    /* Both button rows are nowrap flex lines — let them break instead of
       pushing past the viewport. */
    .filter-actions[b-bufsfqq7u9] {
        flex-wrap: wrap;
    }

    .pagination[b-bufsfqq7u9] {
        flex-wrap: wrap;
        gap: 0.6rem;
    }
}
/* /Pages/Admin/AutoPurchaseOrders.razor.rz.scp.css */
.auto-po-container[b-xlxsb2owyj] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-xlxsb2owyj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.page-title h1[b-xlxsb2owyj] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--adm-fg-f1f5f9);
    margin: 0 0 0.25rem 0;
}

.subtitle[b-xlxsb2owyj] {
    font-size: 0.9375rem;
    color: var(--adm-fg-94a3b8);
    margin: 0;
}

.header-actions[b-xlxsb2owyj] {
    display: flex;
    gap: 0.75rem;
}

/* Buttons */
.btn[b-xlxsb2owyj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    min-height: 44px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.btn:active:not(:disabled)[b-xlxsb2owyj] {
    transform: scale(0.98);
}

.btn.outline[b-xlxsb2owyj] {
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    color: var(--adm-fgon-ffffff-e2e8f0);
}

.btn.outline:hover[b-xlxsb2owyj] {
    background: var(--adm-bghov-ffffff-334155);
}

.btn.primary[b-xlxsb2owyj] {
    background: #3b82f6;
    border: none;
    color: white;
}

.btn.primary:hover:not(:disabled)[b-xlxsb2owyj] {
    background: #2563eb;
}

.btn.primary:disabled[b-xlxsb2owyj] {
    background: var(--adm-keep-bg-475569);
    cursor: not-allowed;
}

.btn.large[b-xlxsb2owyj] {
    padding: 1rem 2rem;
    font-size: 1rem;
}

.btn-spinner[b-xlxsb2owyj] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--adm-bd-ffffff-a0_3);
    border-top-color: var(--adm-bd-ffffff);
    border-radius: 50%;
    animation: spin-b-xlxsb2owyj 0.8s linear infinite;
}

.btn-link[b-xlxsb2owyj] {
    background: none;
    border: none;
    color: var(--adm-fg-3b82f6);
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0;
}

.btn-link:hover[b-xlxsb2owyj] {
    text-decoration: underline;
}

.btn-icon[b-xlxsb2owyj] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--adm-bg-334155);
    border-radius: 8px;
    color: var(--adm-fgon-f1f5f9-94a3b8);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.btn-icon:hover[b-xlxsb2owyj] {
    background: #3b82f6;
    color: white;
}

.btn-icon:active[b-xlxsb2owyj] {
    transform: scale(0.95);
}

/* Status Card */
.status-card[b-xlxsb2owyj] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--adm-bg-1e293b);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    border-left: 4px solid;
    border: 1px solid var(--adm-bdon-ffffff-334155);
}

.status-card.enabled[b-xlxsb2owyj] {
    border-left-color: var(--adm-bdon-ffffff-10b981);
    background: linear-gradient(to right, var(--adm-bg-10b981-a0_1) 0%, var(--adm-bg-1e293b) 100%);
}

.status-card.disabled[b-xlxsb2owyj] {
    border-left-color: var(--adm-bd-64748b);
}

.status-icon[b-xlxsb2owyj] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.status-card.enabled .status-icon[b-xlxsb2owyj] {
    background: var(--adm-bg-10b981-a0_2);
    color: var(--adm-fgon-cff1e6-4ade80);
}

.status-card.disabled .status-icon[b-xlxsb2owyj] {
    background: var(--adm-bg-334155);
    color: var(--adm-fgon-f1f5f9-94a3b8);
}

.status-content[b-xlxsb2owyj] {
    flex: 1;
}

.status-title[b-xlxsb2owyj] {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--adm-fg-f1f5f9);
}

.status-detail[b-xlxsb2owyj] {
    font-size: 0.875rem;
    color: var(--adm-fg-94a3b8);
}

/* Section */
.section[b-xlxsb2owyj] {
    background: var(--adm-bg-1e293b);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--adm-bdon-ffffff-334155);
}

.section h2[b-xlxsb2owyj] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--adm-fgon-ffffff-f1f5f9);
    margin: 0 0 1rem 0;
}

.section-header[b-xlxsb2owyj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-header h2[b-xlxsb2owyj] {
    margin: 0;
}

.section-count[b-xlxsb2owyj] {
    font-size: 0.875rem;
    color: var(--adm-fg-94a3b8);
}

/* Reorder Grid */
.reorder-grid[b-xlxsb2owyj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.reorder-card[b-xlxsb2owyj] {
    background: var(--adm-bg-0f172a);
    border-radius: 10px;
    padding: 1rem;
    border-left: 3px solid transparent;
}

.reorder-card.urgency-critical[b-xlxsb2owyj] {
    border-left-color: var(--adm-bdon-f5e5e7-dc2626);
    background: var(--adm-bg-dc2626-a0_1);
}

.reorder-card.urgency-high[b-xlxsb2owyj] {
    border-left-color: var(--adm-bdon-f8f1e4-f59e0b);
    background: var(--adm-bg-f59e0b-a0_1);
}

.reorder-card.urgency-medium[b-xlxsb2owyj] {
    border-left-color: var(--adm-bd-3b82f6);
}

.reorder-header[b-xlxsb2owyj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.reorder-header .item-name[b-xlxsb2owyj] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--adm-fg-f1f5f9);
}

.urgency-badge[b-xlxsb2owyj] {
    font-size: 0.6875rem;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-weight: 500;
    text-transform: uppercase;
}

.urgency-badge.critical[b-xlxsb2owyj] {
    background: var(--adm-bg-dc2626-a0_2);
    color: var(--adm-fgon-f2d0d1-f87171);
}

.urgency-badge.high[b-xlxsb2owyj] {
    background: var(--adm-bg-f59e0b-a0_2);
    color: var(--adm-fgon-f7e8cc-fbbf24);
}

.urgency-badge.medium[b-xlxsb2owyj] {
    background: var(--adm-bg-3b82f6-a0_2);
    color: var(--adm-fgon-d2e2fb-60a5fa);
}

.urgency-badge.low[b-xlxsb2owyj] {
    background: var(--adm-bg-22c55e-a0_2);
    color: var(--adm-fgon-cdefdc-4ade80);
}

.reorder-stats[b-xlxsb2owyj] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.reorder-stats .stat[b-xlxsb2owyj] {
    text-align: center;
}

.reorder-stats .stat-value[b-xlxsb2owyj] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--adm-fg-f1f5f9);
    display: block;
}

.reorder-stats .stat-label[b-xlxsb2owyj] {
    font-size: 0.6875rem;
    color: var(--adm-fg-94a3b8);
}

.reorder-footer[b-xlxsb2owyj] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--adm-fg-94a3b8);
    padding-top: 0.75rem;
    border-top: 1px solid var(--adm-bd-334155);
}

.show-more[b-xlxsb2owyj] {
    text-align: center;
    padding-top: 1rem;
}

/* Preview Section */
.preview-summary[b-xlxsb2owyj] {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--adm-fg-94a3b8);
}

.preview-summary .total[b-xlxsb2owyj] {
    font-weight: 600;
    color: var(--adm-fg-f1f5f9);
}

.preview-list[b-xlxsb2owyj] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.preview-card[b-xlxsb2owyj] {
    border: 1px solid var(--adm-bd-334155);
    border-radius: 10px;
    overflow: hidden;
}

.preview-header[b-xlxsb2owyj] {
    display: flex;
    align-items: center;
    padding: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}

.preview-header:hover[b-xlxsb2owyj] {
    background: var(--adm-bg-334155);
}

.supplier-info[b-xlxsb2owyj] {
    flex: 1;
}

.supplier-name[b-xlxsb2owyj] {
    font-weight: 600;
    color: var(--adm-fg-f1f5f9);
}

.item-count[b-xlxsb2owyj] {
    font-size: 0.875rem;
    color: var(--adm-fg-94a3b8);
    margin-left: 0.5rem;
}

.preview-value[b-xlxsb2owyj] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--adm-fg-f1f5f9);
    margin-right: 1rem;
}

.expand-icon[b-xlxsb2owyj] {
    color: var(--adm-fg-94a3b8);
    transition: transform 0.2s;
}

.preview-card.expanded .expand-icon[b-xlxsb2owyj] {
    transform: rotate(180deg);
}

.preview-items[b-xlxsb2owyj] {
    border-top: 1px solid var(--adm-bdon-f8fafc-334155);
    background: var(--adm-bg-0f172a);
}

.items-table[b-xlxsb2owyj] {
    width: 100%;
    border-collapse: collapse;
}

.items-table th[b-xlxsb2owyj] {
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--adm-fg-94a3b8);
}

.items-table td[b-xlxsb2owyj] {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--adm-fg-e2e8f0);
    border-top: 1px solid var(--adm-bd-334155);
}

.items-table .line-total[b-xlxsb2owyj] {
    font-weight: 500;
}

/* Action Bar */
.action-bar[b-xlxsb2owyj] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid var(--adm-bd-334155);
}

/* Generate Section */
.generate-section[b-xlxsb2owyj] {
    background: var(--adm-bg-1e293b);
    border-radius: 12px;
    padding: 3rem;
    text-align: center;
    margin-bottom: 1.5rem;
    border: 1px solid var(--adm-bdon-ffffff-334155);
}

.generate-section .help-text[b-xlxsb2owyj] {
    font-size: 0.9375rem;
    color: var(--adm-fgon-ffffff-94a3b8);
    margin: 1rem 0 0 0;
}

/* Recent POs Table */
.recent-pos-table-container[b-xlxsb2owyj] {
    overflow-x: auto;
}

.recent-pos-table[b-xlxsb2owyj] {
    width: 100%;
    border-collapse: collapse;
}

.recent-pos-table th[b-xlxsb2owyj] {
    text-align: left;
    padding: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--adm-fgon-f8fafc-94a3b8);
    background: var(--adm-bg-0f172a);
}

.recent-pos-table td[b-xlxsb2owyj] {
    padding: 0.75rem;
    font-size: 0.875rem;
    color: var(--adm-fg-e2e8f0);
    border-bottom: 1px solid var(--adm-bd-334155);
}

.recent-pos-table tbody tr:hover[b-xlxsb2owyj] {
    background: var(--adm-bg-334155);
}

.recent-pos-table .po-number[b-xlxsb2owyj] {
    font-weight: 500;
    color: var(--adm-fg-3b82f6);
}

.recent-pos-table .total[b-xlxsb2owyj] {
    font-weight: 500;
}

.status-badge[b-xlxsb2owyj] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.draft[b-xlxsb2owyj] {
    background: var(--adm-bg-334155);
    color: var(--adm-fgon-f1f5f9-94a3b8);
}

.status-badge.sent[b-xlxsb2owyj] {
    background: var(--adm-bg-3b82f6-a0_2);
    color: var(--adm-fgon-d2e2fb-60a5fa);
}

.status-badge.received[b-xlxsb2owyj] {
    background: var(--adm-bg-22c55e-a0_2);
    color: var(--adm-fgon-cdefdc-4ade80);
}

.status-badge.partialreceived[b-xlxsb2owyj] {
    background: var(--adm-bg-f59e0b-a0_2);
    color: var(--adm-fgon-f7e8cc-fbbf24);
}

.status-badge.cancelled[b-xlxsb2owyj] {
    background: var(--adm-bg-dc2626-a0_2);
    color: var(--adm-fgon-f2d0d1-f87171);
}

/* Empty State */
.empty-state[b-xlxsb2owyj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    color: var(--adm-fg-94a3b8);
}

.empty-state svg[b-xlxsb2owyj] {
    opacity: 0.4;
    margin-bottom: 0.75rem;
}

.empty-state p[b-xlxsb2owyj] {
    margin: 0;
}

/* Loading State */
.loading-state[b-xlxsb2owyj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    color: var(--adm-fg-94a3b8);
}

.spinner[b-xlxsb2owyj] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--adm-bd-334155);
    border-top-color: var(--adm-bd-3b82f6);
    border-radius: 50%;
    animation: spin-b-xlxsb2owyj 1s linear infinite;
}

@keyframes spin-b-xlxsb2owyj {
    to { transform: rotate(360deg); }
}

/* Modal */
.modal-overlay[b-xlxsb2owyj] {
    position: fixed;
    inset: 0;
    background: var(--adm-scrim-000000-a0_6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal[b-xlxsb2owyj] {
    background: var(--adm-bg-1e293b);
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header[b-xlxsb2owyj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--adm-bd-334155);
}

.modal-header h2[b-xlxsb2owyj] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: var(--adm-fg-f1f5f9);
}

.btn-close[b-xlxsb2owyj] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--adm-bg-334155);
    color: var(--adm-fgon-f1f5f9-94a3b8);
    cursor: pointer;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
}

.btn-close:hover[b-xlxsb2owyj] {
    background: var(--adm-bg-dc2626-a0_2);
    color: var(--adm-fgon-edcccf-f87171);
}

.btn-close:active[b-xlxsb2owyj] {
    transform: scale(0.95);
}

.modal-body[b-xlxsb2owyj] {
    padding: 1.5rem;
}

.modal-footer[b-xlxsb2owyj] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--adm-bd-334155);
}

/* Form Elements */
.form-group[b-xlxsb2owyj] {
    margin-bottom: 1.25rem;
}

.form-group label[b-xlxsb2owyj] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--adm-fg-e2e8f0);
    margin-bottom: 0.5rem;
}

.form-select[b-xlxsb2owyj],
.form-input[b-xlxsb2owyj] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    font-size: 0.9375rem;
    color: var(--adm-fgon-f8fafc-e2e8f0);
    background: var(--adm-bg-0f172a);
}

.form-select:focus[b-xlxsb2owyj],
.form-input:focus[b-xlxsb2owyj] {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-3b82f6);
}

.form-select[b-xlxsb2owyj] {
    appearance: none;
    background: var(--adm-bg-0f172a) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 0.75rem center;
    padding-right: 2.5rem;
}

.form-select option[b-xlxsb2owyj] {
    background: var(--adm-bg-1e293b);
    color: var(--adm-fgon-ffffff-e2e8f0);
}

.form-row[b-xlxsb2owyj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-help[b-xlxsb2owyj] {
    display: block;
    font-size: 0.75rem;
    color: var(--adm-fg-94a3b8);
    margin-top: 0.25rem;
}

.input-group[b-xlxsb2owyj] {
    display: flex;
    align-items: center;
}

.input-prefix[b-xlxsb2owyj] {
    padding: 0.75rem;
    background: var(--adm-bg-334155);
    border: 1px solid var(--adm-bdon-f1f5f9-334155);
    border-right: none;
    border-radius: 8px 0 0 8px;
    color: var(--adm-fgon-f1f5f9-94a3b8);
}

.input-group .form-input[b-xlxsb2owyj] {
    border-radius: 0 8px 8px 0;
}

.checkbox-label[b-xlxsb2owyj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: var(--adm-fg-e2e8f0);
}

.checkbox-label input[type="checkbox"][b-xlxsb2owyj] {
    width: 18px;
    height: 18px;
    accent-color: var(--adm-fg-3b82f6);
}

/* Responsive */
@media (max-width: 768px) {
    .auto-po-container[b-xlxsb2owyj] {
        padding: 1rem;
    }

    .page-header[b-xlxsb2owyj] {
        flex-direction: column;
        gap: 1rem;
    }

    .status-card[b-xlxsb2owyj] {
        flex-direction: column;
        text-align: center;
    }

    .reorder-grid[b-xlxsb2owyj] {
        grid-template-columns: 1fr;
    }

    .action-bar[b-xlxsb2owyj] {
        flex-direction: column;
    }

    .form-row[b-xlxsb2owyj] {
        grid-template-columns: 1fr;
    }
}

/* Phone. At 390px the usable width inside the shell is ~366px, and the
   container + .section gutters eat 80px of it before any content is drawn. */
@media (max-width: 640px) {
    .auto-po-container[b-xlxsb2owyj] {
        padding: 0;
    }

    .section[b-xlxsb2owyj] {
        padding: 1rem;
    }

    .generate-section[b-xlxsb2owyj] {
        padding: 2rem 1rem;
    }

    /* "Generar Vista Previa de Pedidos" is a long label — give it the row. */
    .generate-section .btn.large[b-xlxsb2owyj] {
        width: 100%;
        padding: 1rem;
    }

    /* Item name must be allowed to wrap; the urgency badge must not be
       squeezed to nothing next to it. */
    .reorder-header .item-name[b-xlxsb2owyj] {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .urgency-badge[b-xlxsb2owyj] {
        flex-shrink: 0;
    }

    /* Supplier + "pedir antes de" wrap onto two lines rather than widening
       the card past the viewport when the supplier name is long. */
    .reorder-footer[b-xlxsb2owyj] {
        flex-wrap: wrap;
        gap: 0.25rem 0.75rem;
    }

    /* The three counters sit under the h2 once .section-header stacks. */
    .preview-summary[b-xlxsb2owyj] {
        flex-wrap: wrap;
        gap: 0.25rem 0.75rem;
    }

    /* Collapsible supplier row: the name (flex:1) needs min-width:0 or its
       min-content width pushes the total + chevron off the card edge. */
    .preview-header[b-xlxsb2owyj] {
        gap: 0.5rem;
        padding: 0.875rem;
    }

    .supplier-info[b-xlxsb2owyj] {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .preview-value[b-xlxsb2owyj] {
        margin-right: 0;
        white-space: nowrap;
    }

    .expand-icon[b-xlxsb2owyj] {
        flex-shrink: 0;
    }
}
/* /Pages/Admin/Autorizacion.razor.rz.scp.css */
/* Authorization wizard — scoped (Blazor CSS isolation). No global selectors.
   Light + dark (:root[data-theme="dark"]) themed. */

.gauth[b-ifghvexhyf] {
    max-width: 760px;
    margin: 0 auto;
    padding: 8px 16px 64px;
    color: #0f172a;
}

.gauth-back[b-ifghvexhyf] {
    display: inline-block;
    margin: 4px 0 18px;
    color: #64748b;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}
.gauth-back:hover[b-ifghvexhyf] { color: #0f172a; }

/* ----- hero ----- */
.gauth-hero[b-ifghvexhyf] { text-align: center; margin-bottom: 28px; }
.gauth-hero-badge[b-ifghvexhyf] {
    width: 64px; height: 64px; border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; margin: 0 auto 14px;
    background: linear-gradient(135deg, #eef2ff, #e0f2fe);
    box-shadow: 0 8px 24px rgba(79, 70, 229, .14);
}
.gauth-hero h1[b-ifghvexhyf] { font-size: 27px; font-weight: 800; margin: 0 0 8px; letter-spacing: -.5px; }
.gauth-hero p[b-ifghvexhyf] { margin: 0 auto; max-width: 560px; color: #475569; line-height: 1.55; font-size: 15px; }

.gauth-skeleton[b-ifghvexhyf] { text-align: center; color: var(--adm-fg-94a3b8); padding: 40px 0; }

/* ----- locked / empty ----- */
.gauth-locked[b-ifghvexhyf] {
    background: #fff8e6; border: 1px solid #fde68a; color: #92600a;
    border-radius: 12px; padding: 16px 18px;
}
.gauth-locked a[b-ifghvexhyf] { color: #92600a; font-weight: 700; }

.gauth-empty[b-ifghvexhyf] {
    text-align: center; padding: 40px 24px;
    background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 16px;
}
.gauth-empty-icon[b-ifghvexhyf] { font-size: 40px; margin-bottom: 10px; }
.gauth-empty h2[b-ifghvexhyf] { font-size: 19px; margin: 0 0 6px; font-weight: 700; }
.gauth-empty p[b-ifghvexhyf] { color: #64748b; max-width: 420px; margin: 0 auto 18px; line-height: 1.5; }

/* ----- complete banner ----- */
.gauth-complete[b-ifghvexhyf] {
    display: flex; gap: 14px; align-items: center;
    background: linear-gradient(135deg, #ecfdf5, #f0fdfa);
    border: 1px solid #a7f3d0; border-radius: 14px;
    padding: 16px 18px; margin-bottom: 22px; color: #065f46; line-height: 1.5;
}
.gauth-complete-icon[b-ifghvexhyf] { font-size: 26px; }

/* ----- card ----- */
.gauth-card[b-ifghvexhyf] {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px rgba(15, 23, 42, .06);
    margin-bottom: 22px; overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.gauth-card.is-done[b-ifghvexhyf] { border-color: #a7f3d0; background: #fbfffe; }

/* secondary (optional) card — apoderamiento */
.gauth-card-secondary[b-ifghvexhyf] { border-style: dashed; box-shadow: 0 1px 2px rgba(15, 23, 42, .03); background: #fcfdff; }
.gauth-step.optional[b-ifghvexhyf] { background: #eef2f7; color: #94a3b8; font-weight: 700; }
.gauth-optional-tag[b-ifghvexhyf] {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    background: #f1f5f9; color: #94a3b8; padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle;
}

.gauth-card-head[b-ifghvexhyf] {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 22px; border-bottom: 1px solid #f1f5f9;
}
.gauth-step[b-ifghvexhyf] {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 16px;
    background: #eef2ff; color: #4338ca;
}
.gauth-step.done[b-ifghvexhyf] { background: #10b981; color: #fff; }

.gauth-card-title[b-ifghvexhyf] { flex: 1 1 auto; min-width: 0; }
.gauth-card-title h2[b-ifghvexhyf] { font-size: 17px; font-weight: 700; margin: 0; letter-spacing: -.2px; }
.gauth-sub[b-ifghvexhyf] { font-size: 13px; color: #64748b; }

.gauth-pill[b-ifghvexhyf] {
    flex: 0 0 auto; font-size: 12px; font-weight: 700; padding: 5px 11px;
    border-radius: 999px; white-space: nowrap;
}
.gauth-pill.todo[b-ifghvexhyf] { background: #f1f5f9; color: #64748b; }
.gauth-pill.wait[b-ifghvexhyf] { background: #fef3c7; color: #92600a; }
.gauth-pill.ok[b-ifghvexhyf]   { background: #d1fae5; color: #047857; }

.gauth-card-body[b-ifghvexhyf] { padding: 20px 22px 22px; }
.gauth-lead[b-ifghvexhyf] { margin: 0 0 16px; color: #475569; line-height: 1.55; font-size: 14.5px; }

/* gestor chip */
.gauth-gestor-chip[b-ifghvexhyf] {
    display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 9px 14px; margin-bottom: 16px;
}
.gauth-gestor-name[b-ifghvexhyf] { font-weight: 700; }
.gauth-gestor-meta[b-ifghvexhyf] { font-size: 13px; color: #64748b; font-family: ui-monospace, SFMono-Regular, monospace; }

/* signature pad */
.gauth-sig-label[b-ifghvexhyf] { display: block; font-size: 13px; font-weight: 600; color: var(--adm-fg-475569); margin-bottom: 8px; }
.gauth-sig[b-ifghvexhyf] {
    position: relative; border: 2px dashed #cbd5e1; border-radius: 12px;
    background: repeating-linear-gradient(0deg, #fff, #fff 27px, #f1f5f9 27px, #f1f5f9 28px);
    overflow: hidden;
}
.gauth-sig canvas[b-ifghvexhyf] {
    display: block; width: 100%; height: 170px;
    touch-action: none; cursor: crosshair;
}
.gauth-sig-clear[b-ifghvexhyf] {
    position: absolute; top: 8px; right: 8px;
    background: rgba(255, 255, 255, .9); border: 1px solid #e2e8f0; border-radius: 8px;
    font-size: 12px; font-weight: 600; color: #64748b; padding: 4px 10px; cursor: pointer;
}
.gauth-sig-clear:hover[b-ifghvexhyf] { color: #0f172a; border-color: #cbd5e1; }

.gauth-fineprint[b-ifghvexhyf] { margin: 12px 0 0; font-size: 12.5px; color: var(--adm-fg-94a3b8); line-height: 1.45; }

/* field */
.gauth-field[b-ifghvexhyf] { display: block; margin-bottom: 16px; }
.gauth-field > span[b-ifghvexhyf] { display: block; font-size: 13px; font-weight: 600; color: #475569; margin-bottom: 6px; }
.gauth-field input[b-ifghvexhyf] {
    width: 100%; box-sizing: border-box; padding: 11px 13px;
    border: 1px solid #cbd5e1; border-radius: 10px; font-size: 15px; background: #fff; color: #0f172a;
}
.gauth-field input:focus[b-ifghvexhyf] { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .15); }
.gauth-field small[b-ifghvexhyf] { display: block; margin-top: 6px; font-size: 12.5px; color: #94a3b8; line-height: 1.4; }

/* how-to */
.gauth-how[b-ifghvexhyf] {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 4px 16px; margin-bottom: 16px;
}
.gauth-how summary[b-ifghvexhyf] { cursor: pointer; font-weight: 600; font-size: 14px; padding: 10px 0; color: #334155; }
.gauth-how ol[b-ifghvexhyf] { margin: 4px 0 10px; padding-left: 20px; color: #475569; line-height: 1.6; font-size: 14px; }
.gauth-how li[b-ifghvexhyf] { margin-bottom: 6px; }
.gauth-how-note[b-ifghvexhyf] { font-size: 13px; color: #64748b; margin: 0 0 10px; }

/* result block */
.gauth-result[b-ifghvexhyf] { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.gauth-result-icon[b-ifghvexhyf] { font-size: 24px; line-height: 1.2; }
.gauth-result-text[b-ifghvexhyf] { display: flex; flex-direction: column; gap: 3px; line-height: 1.5; }
.gauth-result-text strong[b-ifghvexhyf] { font-size: 15px; }
.gauth-result-text span[b-ifghvexhyf] { color: #64748b; font-size: 14px; }

/* actions / buttons */
.gauth-actions[b-ifghvexhyf] { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.gauth-btn[b-ifghvexhyf] {
    appearance: none; border: 1px solid #cbd5e1; background: #fff; color: #0f172a;
    font-size: 14.5px; font-weight: 600; padding: 11px 18px; border-radius: 11px; cursor: pointer;
    transition: transform .05s ease, box-shadow .2s ease, background .2s ease;
}
.gauth-btn:hover:not(:disabled)[b-ifghvexhyf] { box-shadow: 0 4px 14px var(--adm-sh-0f172a-a0_1); }
.gauth-btn:active:not(:disabled)[b-ifghvexhyf] { transform: translateY(1px); }
.gauth-btn:disabled[b-ifghvexhyf] { opacity: .6; cursor: default; }
.gauth-btn.primary[b-ifghvexhyf] {
    border-color: transparent; color: var(--adm-fgon-dedffc-ffffff);
    background: linear-gradient(135deg, var(--adm-bggrad-6366f1), var(--adm-bggrad-4f46e5));
    box-shadow: 0 6px 18px var(--adm-sh-4f46e5-a0_28);
}
.gauth-btn.primary:hover:not(:disabled)[b-ifghvexhyf] { box-shadow: 0 8px 22px var(--adm-sh-4f46e5-a0_38); }
.gauth-btn.ghost[b-ifghvexhyf] { border-color: transparent; background: transparent; color: #64748b; }
.gauth-btn.ghost:hover:not(:disabled)[b-ifghvexhyf] { box-shadow: none; color: #0f172a; background: #f1f5f9; }

.gauth-error[b-ifghvexhyf] {
    background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
    border-radius: 10px; padding: 10px 13px; margin-bottom: 14px; font-size: 14px;
}

/* ===================== dark mode ===================== */
:root[data-theme="dark"] .gauth[b-ifghvexhyf] { color: #e2e8f0; }
:root[data-theme="dark"] .gauth-back[b-ifghvexhyf] { color: #94a3b8; }
:root[data-theme="dark"] .gauth-back:hover[b-ifghvexhyf] { color: #e2e8f0; }
:root[data-theme="dark"] .gauth-hero p[b-ifghvexhyf] { color: #94a3b8; }
:root[data-theme="dark"] .gauth-hero-badge[b-ifghvexhyf] { background: linear-gradient(135deg, #312e81, #075985); box-shadow: none; }

:root[data-theme="dark"] .gauth-empty[b-ifghvexhyf] { background: #1e293b; border-color: #334155; }
:root[data-theme="dark"] .gauth-empty p[b-ifghvexhyf] { color: #94a3b8; }

:root[data-theme="dark"] .gauth-complete[b-ifghvexhyf] { background: #0f2e23; border-color: #14532d; color: #6ee7b7; }

:root[data-theme="dark"] .gauth-card[b-ifghvexhyf] { background: #1e293b; border-color: #334155; box-shadow: 0 12px 32px rgba(0, 0, 0, .35); }
:root[data-theme="dark"] .gauth-card.is-done[b-ifghvexhyf] { background: #14241f; border-color: #14532d; }
:root[data-theme="dark"] .gauth-card-secondary[b-ifghvexhyf] { background: #182234; border-color: #3a4658; }
:root[data-theme="dark"] .gauth-step.optional[b-ifghvexhyf] { background: #334155; color: #94a3b8; }
:root[data-theme="dark"] .gauth-optional-tag[b-ifghvexhyf] { background: #334155; color: #94a3b8; }
:root[data-theme="dark"] .gauth-card-head[b-ifghvexhyf] { border-bottom-color: #334155; }
:root[data-theme="dark"] .gauth-step[b-ifghvexhyf] { background: #312e81; color: #c7d2fe; }
:root[data-theme="dark"] .gauth-step.done[b-ifghvexhyf] { background: #10b981; color: #06241a; }
:root[data-theme="dark"] .gauth-sub[b-ifghvexhyf] { color: #94a3b8; }
:root[data-theme="dark"] .gauth-lead[b-ifghvexhyf] { color: #cbd5e1; }

:root[data-theme="dark"] .gauth-pill.todo[b-ifghvexhyf] { background: #334155; color: #cbd5e1; }
:root[data-theme="dark"] .gauth-pill.wait[b-ifghvexhyf] { background: #422006; color: #fcd34d; }
:root[data-theme="dark"] .gauth-pill.ok[b-ifghvexhyf]   { background: #064e3b; color: #6ee7b7; }

:root[data-theme="dark"] .gauth-gestor-chip[b-ifghvexhyf] { background: #0f172a; border-color: #334155; }
:root[data-theme="dark"] .gauth-gestor-meta[b-ifghvexhyf] { color: #94a3b8; }

:root[data-theme="dark"] .gauth-sig[b-ifghvexhyf] { border-color: #475569; background: repeating-linear-gradient(0deg, #0f172a, #0f172a 27px, #1e293b 27px, #1e293b 28px); }
:root[data-theme="dark"] .gauth-sig canvas[b-ifghvexhyf] { filter: invert(0); }
:root[data-theme="dark"] .gauth-sig-clear[b-ifghvexhyf] { background: rgba(15, 23, 42, .8); border-color: #334155; color: #cbd5e1; }

:root[data-theme="dark"] .gauth-field > span[b-ifghvexhyf] { color: #cbd5e1; }
:root[data-theme="dark"] .gauth-field input[b-ifghvexhyf] { background: #0f172a; border-color: #475569; color: #e2e8f0; }
:root[data-theme="dark"] .gauth-field small[b-ifghvexhyf] { color: #64748b; }

:root[data-theme="dark"] .gauth-how[b-ifghvexhyf] { background: #0f172a; border-color: #334155; }
:root[data-theme="dark"] .gauth-how summary[b-ifghvexhyf] { color: #cbd5e1; }
:root[data-theme="dark"] .gauth-how ol[b-ifghvexhyf] { color: #cbd5e1; }
:root[data-theme="dark"] .gauth-how-note[b-ifghvexhyf] { color: #94a3b8; }

:root[data-theme="dark"] .gauth-result-text span[b-ifghvexhyf] { color: #94a3b8; }

:root[data-theme="dark"] .gauth-btn[b-ifghvexhyf] { background: #0f172a; border-color: #475569; color: #e2e8f0; }
:root[data-theme="dark"] .gauth-btn.ghost[b-ifghvexhyf] { background: transparent; color: #94a3b8; }
:root[data-theme="dark"] .gauth-btn.ghost:hover:not(:disabled)[b-ifghvexhyf] { background: #334155; color: #e2e8f0; }

:root[data-theme="dark"] .gauth-error[b-ifghvexhyf] { background: #2a1416; border-color: #7f1d1d; color: #fca5a5; }

@media (max-width: 560px) {
    /* The admin shell already pays the side gutter; our own 16px on top of it ate
       ~32px of a 366px phone viewport. Let the cards reach the shell padding. */
    .gauth[b-ifghvexhyf] { padding-left: 0; padding-right: 0; }

    /* flex-wrap alone did not work here: the title's flex base size is its
       max-content (the long .gauth-sub line), which never fits beside the 38px
       step circle on a phone — so the title wrapped to its own row and stranded
       the circle. Grid keeps step + title together and drops the pill below. */
    .gauth-card-head[b-ifghvexhyf] {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 12px;
        row-gap: 8px;
        align-items: center;
        padding: 16px;
    }
    .gauth-card-title[b-ifghvexhyf] { grid-column: 2; }
    .gauth-pill[b-ifghvexhyf] { grid-column: 2; justify-self: start; }

    .gauth-card-body[b-ifghvexhyf] { padding: 18px 16px 20px; }
    .gauth-empty[b-ifghvexhyf] { padding: 32px 18px; }

    /* Several actions are <a class="gauth-btn">, which the global 44px touch rule
       misses (it only targets <button>). Size them by hand and let them fill the
       row so every target is thumb-sized. */
    .gauth-btn[b-ifghvexhyf] {
        display: inline-flex; align-items: center; justify-content: center;
        min-height: 44px; text-align: center;
    }
    .gauth-actions .gauth-btn[b-ifghvexhyf] { flex: 1 1 auto; }
}

/* Light admin (the default since 2026-10-12). Measured light-only contrast, now 4.5:1 or more; dark untouched. */
:root[data-theme="light"] .gauth-step.optional[b-ifghvexhyf],
:root[data-theme="light"] .gauth-optional-tag[b-ifghvexhyf] { color: #475569; } /* #94a3b8 on #eef2f7 / #f1f5f9: 2.3:1 */
:root[data-theme="light"] .gauth-field small[b-ifghvexhyf] { color: #64748b; }  /* #94a3b8 on white: 2.56:1 */
/* /Pages/Admin/BarcodeLabels.razor.rz.scp.css */
.labels-container[b-9wk1dgjpvz] {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.page-header[b-9wk1dgjpvz] {
    margin-bottom: 1.5rem;
}

.page-header h1[b-9wk1dgjpvz] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--adm-fg-f1f5f9);
    margin: 0 0 0.25rem 0;
}

.subtitle[b-9wk1dgjpvz] {
    font-size: 0.9375rem;
    color: var(--adm-fg-94a3b8);
    margin: 0;
}

/* Tabs */
.tabs[b-9wk1dgjpvz] {
    display: flex;
    gap: 0.25rem;
    background: var(--adm-bg-1e293b);
    padding: 0.25rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
}

.tab[b-9wk1dgjpvz] {
    flex: 1;
    padding: 0.75rem 1rem;
    border: none;
    background: transparent;
    color: var(--adm-fg-94a3b8);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.tab:hover[b-9wk1dgjpvz] {
    color: var(--adm-fg-f1f5f9);
}

.tab.active[b-9wk1dgjpvz] {
    background: var(--adm-bg-334155);
    color: var(--adm-fgon-f1f5f9-3b82f6);
    box-shadow: 0 1px 3px var(--adm-sh-000000-a0_2);
}

/* Content Grid */
.content-grid[b-9wk1dgjpvz] {
    display: grid;
    grid-template-columns: 1fr minmax(280px, 360px);
    gap: 1.5rem;
}

/* Selection Panel */
.selection-panel[b-9wk1dgjpvz] {
    background: var(--adm-bg-1e293b);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 280px);
    border: 1px solid var(--adm-bdon-ffffff-334155);
}

.panel-header[b-9wk1dgjpvz] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--adm-bdon-f8fafc-334155);
    background: var(--adm-bg-0f172a);
}

.panel-header h2[b-9wk1dgjpvz] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--adm-fgon-f8fafc-f1f5f9);
    margin: 0 0 0.75rem 0;
}

.filter-row[b-9wk1dgjpvz] {
    display: flex;
    gap: 0.75rem;
}

.form-select[b-9wk1dgjpvz] {
    flex: 1;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 6px;
    font-size: 0.875rem;
    background: var(--adm-bg-0f172a) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 0.5rem center;
    appearance: none;
    color: var(--adm-fgon-f8fafc-e2e8f0);
}

.form-select option[b-9wk1dgjpvz] {
    background: var(--adm-bg-1e293b);
    color: var(--adm-fgon-ffffff-e2e8f0);
}

.checkbox-filter[b-9wk1dgjpvz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
    color: var(--adm-fg-e2e8f0);
}

.select-actions[b-9wk1dgjpvz] {
    display: flex;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--adm-bd-334155);
}

.btn-link[b-9wk1dgjpvz] {
    background: none;
    border: none;
    color: var(--adm-fg-3b82f6);
    font-size: 0.8125rem;
    cursor: pointer;
    padding: 0;
}

.btn-link:hover[b-9wk1dgjpvz] {
    text-decoration: underline;
}

/* Item List */
.item-list[b-9wk1dgjpvz] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.item-row[b-9wk1dgjpvz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.item-row:hover[b-9wk1dgjpvz] {
    background: var(--adm-bg-334155);
}

.item-row.selected[b-9wk1dgjpvz] {
    background: var(--adm-bg-3b82f6-a0_15);
}

.item-row input[type="checkbox"][b-9wk1dgjpvz] {
    width: 18px;
    height: 18px;
    accent-color: var(--adm-fg-3b82f6);
}

.item-info[b-9wk1dgjpvz] {
    flex: 1;
    min-width: 0;
}

.item-name[b-9wk1dgjpvz] {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--adm-fg-f1f5f9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-details[b-9wk1dgjpvz] {
    display: block;
    font-size: 0.75rem;
    color: var(--adm-fg-94a3b8);
}

.expiry-badge[b-9wk1dgjpvz] {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 500;
    margin-left: 0.5rem;
}

.expiry-badge.warning[b-9wk1dgjpvz] {
    background: var(--adm-bg-fbbf24-a0_2);
    color: var(--adm-fgon-f9eed1-fbbf24);
}

.expiry-badge.expired[b-9wk1dgjpvz] {
    background: var(--adm-bg-dc2626-a0_2);
    color: var(--adm-fgon-f2d0d1-f87171);
}

.item-row.expired[b-9wk1dgjpvz] {
    background: var(--adm-bg-dc2626-a0_1);
}

.item-row.expiring-soon[b-9wk1dgjpvz] {
    background: var(--adm-bg-fbbf24-a0_1);
}

/* Preview Panel */
.preview-panel[b-9wk1dgjpvz] {
    background: var(--adm-bg-1e293b);
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid var(--adm-bdon-ffffff-334155);
}

.preview-panel h2[b-9wk1dgjpvz] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--adm-fgon-ffffff-f1f5f9);
    margin: 0 0 1rem 0;
}

.config-section[b-9wk1dgjpvz] {
    margin-bottom: 1.5rem;
}

.config-label[b-9wk1dgjpvz] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--adm-fg-e2e8f0);
    margin-bottom: 0.75rem;
}

.size-options[b-9wk1dgjpvz] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.size-option[b-9wk1dgjpvz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 2px solid var(--adm-bd-334155);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.size-option:hover[b-9wk1dgjpvz] {
    border-color: var(--adm-bd-475569);
}

.size-option.selected[b-9wk1dgjpvz] {
    border-color: var(--adm-bdon-e5eefb-3b82f6);
    background: var(--adm-bg-3b82f6-a0_1);
}

.size-option input[b-9wk1dgjpvz] {
    display: none;
}

.size-preview[b-9wk1dgjpvz] {
    background: white;
    border: 1px solid #1a1a2e;
    border-radius: 2px;
}

.size-name[b-9wk1dgjpvz] {
    font-size: 0.875rem;
    color: var(--adm-fg-e2e8f0);
}

/* Selection Summary */
.selection-summary[b-9wk1dgjpvz] {
    background: var(--adm-bg-0f172a);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    margin-bottom: 1rem;
}

.summary-count .count[b-9wk1dgjpvz] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--adm-fg-3b82f6);
}

.summary-count .label[b-9wk1dgjpvz] {
    display: block;
    font-size: 0.8125rem;
    color: var(--adm-fg-94a3b8);
}

/* Barcode Preview */
.barcode-preview[b-9wk1dgjpvz] {
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--adm-bg-0f172a);
    border-radius: 8px;
    text-align: center;
}

.barcode-preview h3[b-9wk1dgjpvz] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--adm-fgon-f8fafc-94a3b8);
    margin: 0 0 0.75rem 0;
}

.preview-barcode[b-9wk1dgjpvz] {
    background: white;
    padding: 0.5rem;
    border-radius: 4px;
}

/* Buttons */
.action-buttons[b-9wk1dgjpvz] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.btn[b-9wk1dgjpvz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn.primary[b-9wk1dgjpvz] {
    background: #3b82f6;
    border: none;
    color: white;
}

.btn.primary:hover:not(:disabled)[b-9wk1dgjpvz] {
    background: #2563eb;
}

.btn.primary:disabled[b-9wk1dgjpvz] {
    background: var(--adm-bg-475569);
    cursor: not-allowed;
    color: var(--adm-fgon-f9fafb-94a3b8);
}

.btn.outline[b-9wk1dgjpvz] {
    background: var(--adm-bg-334155);
    border: 1px solid var(--adm-bdon-f1f5f9-475569);
    color: var(--adm-fgon-f1f5f9-f1f5f9);
}

.btn.outline:hover:not(:disabled)[b-9wk1dgjpvz] {
    background: var(--adm-bg-475569);
}

.btn-spinner[b-9wk1dgjpvz] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--adm-bd-ffffff-a0_3);
    border-top-color: var(--adm-bd-ffffff);
    border-radius: 50%;
    animation: spin-b-9wk1dgjpvz 0.8s linear infinite;
}

@keyframes spin-b-9wk1dgjpvz {
    to { transform: rotate(360deg); }
}

/* Quick Actions */
.quick-actions[b-9wk1dgjpvz] {
    border-top: 1px solid var(--adm-bd-334155);
    padding-top: 1rem;
}

.quick-actions h3[b-9wk1dgjpvz] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--adm-fg-94a3b8);
    margin: 0 0 0.75rem 0;
}

.quick-btn[b-9wk1dgjpvz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem;
    background: var(--adm-bg-0f172a);
    border: none;
    border-radius: 8px;
    font-size: 0.8125rem;
    color: var(--adm-fgon-f8fafc-e2e8f0);
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 0.5rem;
}

.quick-btn:hover[b-9wk1dgjpvz] {
    background: var(--adm-bg-3b82f6-a0_15);
    color: var(--adm-fgon-dce8fb-3b82f6);
}

/* Responsive */
@media (max-width: 900px) {
    .content-grid[b-9wk1dgjpvz] {
        grid-template-columns: 1fr;
    }

    .selection-panel[b-9wk1dgjpvz] {
        max-height: 50vh;
    }
}

@media (max-width: 600px) {
    .labels-container[b-9wk1dgjpvz] {
        padding: 0.875rem;
        max-width: 100%;
        overflow-x: hidden;
    }

    .tabs[b-9wk1dgjpvz] {
        flex-direction: column;
    }

    /* Single-column layout already at 900px; ensure both panels can shrink */
    .content-grid[b-9wk1dgjpvz] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .selection-panel[b-9wk1dgjpvz],
    .preview-panel[b-9wk1dgjpvz] {
        min-width: 0;
    }

    /* Category filter select fits full width */
    .filter-row[b-9wk1dgjpvz] {
        flex-wrap: wrap;
    }

    .form-select[b-9wk1dgjpvz] {
        width: 100%;
        flex: 1 1 100%;
        box-sizing: border-box;
        /* Scoped CSS loads after admin-mobile.css and wins at equal specificity,
           so the global 16px input rule never reaches this select: restate it
           here (iOS zooms the viewport on focus below 16px) and give it a 44px
           touch target: the global min-height only covers .btn/button/.tab. */
        font-size: 16px;
        min-height: 44px;
    }

    /* Item rows keep checkbox + truncating text within width */
    .item-info[b-9wk1dgjpvz] {
        min-width: 0;
    }

    /* SKU / barcode / batch number is an unbroken token: let it break instead of
       forcing the item list into a horizontal scroll */
    .item-details[b-9wk1dgjpvz] {
        overflow-wrap: anywhere;
    }

    /* Size-option preview tiles wrap/fit; label text can shrink */
    .size-options[b-9wk1dgjpvz] {
        min-width: 0;
    }

    .size-option[b-9wk1dgjpvz] {
        min-width: 0;
    }

    .size-name[b-9wk1dgjpvz] {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* Preview barcode SVG never forces horizontal scroll */
    .preview-barcode[b-9wk1dgjpvz] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Action + quick buttons already full-width column; keep labels readable */
    .quick-btn[b-9wk1dgjpvz] {
        text-align: left;
    }
}
/* /Pages/Admin/Billing.razor.rz.scp.css */
.billing-container[b-o6c8cksdfm] {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.page-header[b-o6c8cksdfm] {
    margin-bottom: 2rem;
}

.page-header h1[b-o6c8cksdfm] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--adm-fg-f4f4f5);
    margin: 0 0 0.25rem;
}

.subtitle[b-o6c8cksdfm] {
    color: var(--adm-fg-71717a);
    font-size: 0.875rem;
}

.loading-state[b-o6c8cksdfm] {
    display: flex;
    justify-content: center;
    padding: 4rem;
}

.spinner[b-o6c8cksdfm] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--adm-bd-2a2a3a);
    border-top-color: var(--adm-bd-6366f1);
    border-radius: 50%;
    animation: spin-b-o6c8cksdfm 0.8s linear infinite;
}

@keyframes spin-b-o6c8cksdfm {
    to { transform: rotate(360deg); }
}

/* Plan Card */
.plan-card[b-o6c8cksdfm] {
    background: var(--adm-bg-16161e);
    border: 1px solid var(--adm-bdon-ffffff-2a2a3a);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.plan-card.plan-warning[b-o6c8cksdfm] {
    border-color: var(--adm-bd-f59e0b);
}

.plan-header[b-o6c8cksdfm] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.plan-tier[b-o6c8cksdfm] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--adm-fg-f4f4f5);
}

.plan-status[b-o6c8cksdfm] {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 0.375rem;
}

.status-active[b-o6c8cksdfm], .status-trialing[b-o6c8cksdfm] {
    background: var(--adm-bg-22c55e-a0_15);
    color: var(--adm-fgon-d8f2e4-22c55e);
}

.status-past_due[b-o6c8cksdfm] {
    background: var(--adm-bg-f59e0b-a0_15);
    color: var(--adm-fgon-f8ecd8-f59e0b);
}

.status-expired[b-o6c8cksdfm], .status-cancelled[b-o6c8cksdfm], .status-restricted[b-o6c8cksdfm], .status-suspended[b-o6c8cksdfm] {
    background: var(--adm-bg-ef4444-a0_15);
    color: var(--adm-fgon-f7dfe0-ef4444);
}

.plan-days[b-o6c8cksdfm] {
    text-align: right;
}

.days-number[b-o6c8cksdfm] {
    font-size: 2rem;
    font-weight: 800;
    color: var(--adm-fg-f4f4f5);
    line-height: 1;
}

.days-label[b-o6c8cksdfm] {
    display: block;
    font-size: 0.6875rem;
    color: var(--adm-fg-71717a);
}

.plan-info[b-o6c8cksdfm] {
    color: var(--adm-fg-a1a1aa);
    font-size: 0.875rem;
    margin-top: 1rem;
    line-height: 1.5;
}

.plan-message[b-o6c8cksdfm] {
    background: var(--adm-bg-6366f1-a0_08);
    border: 1px solid var(--adm-bd-6366f1-a0_2);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    color: var(--adm-fgon-eceefb-a5b4fc);
    margin-top: 1rem;
}

.plan-message.warning[b-o6c8cksdfm] {
    background: var(--adm-bg-f59e0b-a0_08);
    border-color: var(--adm-bd-f59e0b-a0_2);
    color: var(--adm-fgon-f8f3e9-fbbf24);
}

/* Plans Grid */
.billing-actions h3[b-o6c8cksdfm] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--adm-fg-f4f4f5);
    margin-bottom: 1.25rem;
}

.plans-grid[b-o6c8cksdfm] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.plan-option[b-o6c8cksdfm] {
    background: var(--adm-bg-16161e);
    border: 1px solid var(--adm-bdon-ffffff-2a2a3a);
    border-radius: 14px;
    padding: 1.5rem;
    text-align: center;
    position: relative;
}

.plan-option.featured[b-o6c8cksdfm] {
    border-color: var(--adm-bdon-ffffff-6366f1);
    background: linear-gradient(180deg, var(--adm-bg-6366f1-a0_06) 0%, var(--adm-bg-16161e) 100%);
}

.plan-badge[b-o6c8cksdfm] {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #6366f1;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    text-transform: uppercase;
    white-space: nowrap;
}

.plan-option h4[b-o6c8cksdfm] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--adm-fgon-ffffff-f4f4f5);
    margin: 0 0 0.5rem;
}

.plan-price[b-o6c8cksdfm] {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--adm-fg-f4f4f5);
    margin-bottom: 1rem;
}

.plan-price span[b-o6c8cksdfm] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--adm-fg-71717a);
}

/* May promo */
.may-promo-note[b-o6c8cksdfm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--adm-bd-f59e0b-a0_32);
    background: var(--adm-bg-f59e0b-a0_08);
    color: var(--adm-fgon-f8f3e9-fcd9a0);
    font-size: 0.875rem;
    line-height: 1.45;
}
.may-promo-note strong[b-o6c8cksdfm] { color: var(--adm-fg-fde9c8); font-weight: 700; }
.may-promo-tag[b-o6c8cksdfm] {
    flex-shrink: 0;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--adm-bg-f59e0b-a0_16);
    border: 1px solid var(--adm-bd-f59e0b-a0_4);
    color: var(--adm-fgon-f8ebd5-fbbf24);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.plan-price.promo[b-o6c8cksdfm] { display: flex; align-items: baseline; justify-content: center; gap: 0.4rem; }
.plan-price .price-was[b-o6c8cksdfm] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--adm-fg-71717a);
    text-decoration: line-through;
}
.plan-price .price-now[b-o6c8cksdfm] { color: var(--adm-fg-fbbf24); }

.plan-option .btn[b-o6c8cksdfm] {
    width: 100%;
    justify-content: center;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    font-size: 0.8125rem;
}

/* Manage Section */
.manage-section[b-o6c8cksdfm] {
    background: var(--adm-bg-16161e);
    border: 1px solid var(--adm-bdon-ffffff-2a2a3a);
    border-radius: 14px;
    padding: 1.5rem;
}

.manage-section h3[b-o6c8cksdfm] {
    margin-bottom: 0.5rem;
}

.manage-section p[b-o6c8cksdfm] {
    color: var(--adm-fgon-ffffff-71717a);
    font-size: 0.875rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}

/* Buttons */
.btn[b-o6c8cksdfm] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
    text-decoration: none;
}

.btn.primary[b-o6c8cksdfm] {
    background: #6366f1;
    color: #fff;
}

.btn.primary:hover[b-o6c8cksdfm] {
    background: #4f46e5;
}

.btn.outline[b-o6c8cksdfm] {
    background: transparent;
    color: var(--adm-fg-a1a1aa);
    border-color: var(--adm-bd-2a2a3a);
}

.btn.outline:hover[b-o6c8cksdfm] {
    background: var(--adm-bg-1e1e2a);
}

.btn:disabled[b-o6c8cksdfm] {
    opacity: 0.5;
    cursor: not-allowed;
}

.error-banner[b-o6c8cksdfm] {
    background: var(--adm-bg-ef4444-a0_1);
    border: 1px solid var(--adm-bd-ef4444-a0_2);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: var(--adm-fgon-f7e8ea-ef4444);
    font-size: 0.8125rem;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .plans-grid[b-o6c8cksdfm] {
        grid-template-columns: 1fr;
    }
}

/* "Tu plan incluye" + "Pasar a X anade" pair below the plan card. Two
   cards on one row on desktop; stacked on narrow viewports. */
.features-block[b-o6c8cksdfm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}
@media (max-width: 768px) {
    .features-block[b-o6c8cksdfm] {
        grid-template-columns: 1fr;
    }
}

.features-card[b-o6c8cksdfm] {
    background: var(--adm-bg-16161e);
    border: 1px solid var(--adm-bdon-ffffff-2a2a3a);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
}
.features-card.upgrade[b-o6c8cksdfm] {
    border-color: var(--adm-bd-7c5cff-a0_35);
    background: linear-gradient(180deg, var(--adm-bg-7c5cff-a0_06), var(--adm-bg-16161e));
}

.features-head[b-o6c8cksdfm] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.features-head h3[b-o6c8cksdfm] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--adm-fg-f1f5f9);
}
.features-tier[b-o6c8cksdfm] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--adm-bg-7c5cff-a0_15);
    color: var(--adm-fgon-e5e2fc-c4b5fd);
    letter-spacing: 0.02em;
}

.features-base[b-o6c8cksdfm] {
    margin: 0 0 0.75rem;
    color: var(--adm-fg-94a3b8);
    font-size: 0.8125rem;
    line-height: 1.5;
}
.features-limits[b-o6c8cksdfm] {
    margin: 0 0 0.75rem;
    padding: 0.625rem 0.875rem;
    background: var(--adm-bg-7c5cff-a0_08);
    border: 1px solid var(--adm-bd-7c5cff-a0_18);
    border-radius: 8px;
    color: var(--adm-fgon-eeedfc-e2e8f0);
    font-size: 0.8125rem;
    line-height: 1.55;
}
.features-limits strong[b-o6c8cksdfm] {
    color: var(--adm-fg-c4b5fd);
    font-weight: 600;
    margin-right: 0.25rem;
}
.features-empty[b-o6c8cksdfm] {
    margin: 0;
    color: var(--adm-fg-cbd5e1);
    font-size: 0.875rem;
    line-height: 1.55;
}

.features-list[b-o6c8cksdfm] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 1rem;
}
@media (max-width: 480px) {
    .features-list[b-o6c8cksdfm] { grid-template-columns: 1fr; }
}
.features-list li[b-o6c8cksdfm] {
    color: var(--adm-fg-e2e8f0);
    font-size: 0.875rem;
    line-height: 1.4;
    padding-left: 0.25rem;
}
.features-list.upgrade-list li[b-o6c8cksdfm] {
    color: var(--adm-fg-c4b5fd);
}

/* Bucket chips — the compact default view replacing the old flat
   alphabetical tick list. Each chip answers "do I have X area?" with
   a count. Expanded detail is one tap away. */
.feature-buckets[b-o6c8cksdfm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.875rem;
}
.bucket-chip[b-o6c8cksdfm] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem 0.35rem 0.875rem;
    background: var(--adm-bg-1f1f2c);
    border: 1px solid var(--adm-bdon-ffffff-2a2a3a);
    border-radius: 999px;
    font-size: 0.8125rem;
    line-height: 1;
    color: var(--adm-fgon-ffffff-e2e8f0);
    transition: border-color 0.15s, background 0.15s;
}
.bucket-chip-name[b-o6c8cksdfm] {
    font-weight: 600;
    letter-spacing: 0.01em;
}
.bucket-chip-count[b-o6c8cksdfm] {
    font-weight: 700;
    font-size: 0.75rem;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--adm-bg-7c5cff-a0_2);
    color: var(--adm-fgon-dfdafd-c4b5fd);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bucket-chip.upgrade-chip[b-o6c8cksdfm] {
    border-color: var(--adm-bd-7c5cff-a0_35);
    background: var(--adm-bg-7c5cff-a0_08);
    color: var(--adm-fgon-eeedfc-e9e4ff);
}
.bucket-chip.upgrade-chip .bucket-chip-count[b-o6c8cksdfm] {
    background: var(--adm-bg-7c5cff-a0_35);
    color: var(--adm-fgon-cdc3fd-ffffff);
}
.features-tier.upgrade-delta[b-o6c8cksdfm] {
    background: var(--adm-bg-7c5cff-a0_3);
    color: var(--adm-fgon-d3cbfd-ffffff);
}

/* Collapse toggle ("Ver detalle completo"). Flat, borderless so it
   reads as a UI affordance not a marketing CTA. */
.features-toggle[b-o6c8cksdfm] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0;
    margin-bottom: 0.5rem;
    background: none;
    border: none;
    color: var(--adm-fg-a78bfa);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s;
}
.features-toggle:hover[b-o6c8cksdfm] {
    color: var(--adm-fg-c4b5fd);
}
.features-toggle-caret[b-o6c8cksdfm] {
    display: inline-block;
    font-size: 0.75rem;
    transition: transform 0.2s;
    line-height: 1;
}
.features-toggle-caret.open[b-o6c8cksdfm] {
    transform: rotate(180deg);
}

/* Expanded bucket detail — one titled group per bucket, tick list
   inside. Replaces the old flat two-column grid when expanded. */
.bucket-detail-list[b-o6c8cksdfm] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin-top: 0.5rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--adm-bd-2a2a3a);
}
.bucket-group-head[b-o6c8cksdfm] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.4rem;
}
.bucket-group-head h4[b-o6c8cksdfm] {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--adm-fg-c4b5fd);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.bucket-group-desc[b-o6c8cksdfm] {
    font-size: 0.75rem;
    color: var(--adm-fg-94a3b8);
    line-height: 1.4;
}
.bucket-group-list[b-o6c8cksdfm] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 1rem;
}
@media (max-width: 480px) {
    .bucket-group-list[b-o6c8cksdfm] { grid-template-columns: 1fr; }
}
.bucket-group-list li[b-o6c8cksdfm] {
    color: var(--adm-fg-e2e8f0);
    font-size: 0.875rem;
    line-height: 1.4;
}
.bucket-group-list.upgrade-list li[b-o6c8cksdfm] {
    color: var(--adm-fg-c4b5fd);
}

/* Upgrade CTA inside the upgrade card — lives after the bucket chips
   so active subscribers (who are already reading "what's in it for
   me") can act immediately. Links to Stripe Customer Portal. */
.upgrade-cta[b-o6c8cksdfm] {
    width: 100%;
    margin-top: 1rem;
}

/* Downgrade link — deliberately underplayed. Rendered for active
   Pro / Enterprise customers only. Hiding it would be dark-pattern;
   promoting it would hurt ARR. */
.downgrade-row[b-o6c8cksdfm] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: -0.75rem 0 1.75rem;
    padding: 0.5rem 0;
    color: var(--adm-fg-94a3b8);
    font-size: 0.8125rem;
}
.downgrade-label[b-o6c8cksdfm] {
    color: var(--adm-fg-94a3b8);
}
.downgrade-link[b-o6c8cksdfm] {
    background: none;
    border: none;
    color: var(--adm-fg-cbd5e1);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--adm-fg-cbd5e1-a0_3);
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    transition: color 0.15s, text-decoration-color 0.15s;
}
.downgrade-link:hover[b-o6c8cksdfm] {
    color: var(--adm-fg-e2e8f0);
    text-decoration-color: var(--adm-fg-cbd5e1-a0_7);
}
.downgrade-link:disabled[b-o6c8cksdfm] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ─────────────────────────── Downgrade preview modal ─────────────────────────── */
/* Fired when picking a tier with a smaller feature set than the current
   one. Trial→Barra is the headline case (Trial = full Enterprise surface,
   Barra = QrDineIn only) but the same UX catches Pro→Starter, etc. */
.modal-overlay[b-o6c8cksdfm] {
    position: fixed;
    inset: 0;
    background: var(--adm-scrim-000000-a0_55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.modal[b-o6c8cksdfm] {
    background: var(--adm-bg-1e293b);
    color: var(--adm-fgon-ffffff-e2e8f0);
    border-radius: 12px;
    box-shadow: 0 20px 50px -12px var(--adm-sh-000000-a0_6);
    width: min(560px, 92vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--adm-bd-ffffff-a0_08);
}
.modal-header[b-o6c8cksdfm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--adm-bd-ffffff-a0_06);
}
.modal-header h2[b-o6c8cksdfm] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--adm-fg-f1f5f9);
}
.btn-close[b-o6c8cksdfm] {
    background: transparent;
    border: none;
    color: var(--adm-fg-94a3b8);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.btn-close:hover[b-o6c8cksdfm] {
    background: var(--adm-bg-ffffff-a0_06);
    color: var(--adm-fgon-ebedf0-e2e8f0);
}
.modal-body[b-o6c8cksdfm] {
    padding: 18px 24px;
    overflow-y: auto;
    flex: 1;
}
.modal-body h3[b-o6c8cksdfm] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--adm-fg-cbd5e1);
    margin: 18px 0 8px;
}
.modal-body h3:first-child[b-o6c8cksdfm] {
    margin-top: 0;
}
.modal-actions[b-o6c8cksdfm] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px 18px;
    border-top: 1px solid var(--adm-bd-ffffff-a0_06);
}
.downgrade-intro[b-o6c8cksdfm] {
    margin: 0 0 8px;
    color: var(--adm-fg-cbd5e1);
    line-height: 1.5;
}
.downgrade-intro strong[b-o6c8cksdfm] {
    color: var(--adm-fg-f1f5f9);
}
.downgrade-list[b-o6c8cksdfm] {
    margin: 0 0 4px;
    padding-left: 22px;
    color: var(--adm-fg-cbd5e1);
    line-height: 1.6;
}
.downgrade-list li[b-o6c8cksdfm] {
    margin-bottom: 4px;
}
/* Capacity warnings get a calmer amber tone — they're informational
   (your existing seats keep working) rather than destructive. */
.downgrade-list--warn[b-o6c8cksdfm] {
    color: var(--adm-fg-fcd34d);
}
.downgrade-info[b-o6c8cksdfm] {
    margin-top: 16px;
    padding: 10px 12px;
    background: var(--adm-bg-94a3b8-a0_08);
    border-left: 3px solid var(--adm-bdon-eceff3-64748b);
    border-radius: 4px;
    font-size: 0.88rem;
    color: var(--adm-fgon-eceff3-94a3b8);
    line-height: 1.5;
}

/* ─────────────────────────────── Phone ─────────────────────────────── */
/* The admin shell already pads the content area (16px <=640, 12px <=480),
   so the container's own 1.5rem gutter was double-padding: at 390px the
   cards only got 270px of inner width. Drop it and let the cards use the
   full column. Grid collapses are handled above (768px). */
@media (max-width: 640px) {
    .billing-container[b-o6c8cksdfm] {
        padding: 1.25rem 0;
    }

    /* Non-wrapping flex rows carrying a large number + a label. They fit
       at 390px but shrink-squash at 360px; let them wrap instead. */
    .plan-header[b-o6c8cksdfm] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    .plan-days[b-o6c8cksdfm] {
        text-align: left;
    }
    .plan-price.promo[b-o6c8cksdfm] {
        flex-wrap: wrap;
    }

    /* Modal footer: "Cancelar" + "Cambiar a Plan Enterprise" side by side
       want ~325px but the modal only offers ~310px (92vw minus padding),
       so the primary CTA's label shrink-wraps to 2-3 lines inside a
       squeezed button. Stack them full-width; primary stays last / lowest
       so it sits in the thumb zone. */
    .modal-actions[b-o6c8cksdfm] {
        flex-direction: column;
        align-items: stretch;
    }
    .modal-actions .btn[b-o6c8cksdfm] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    /* Reclaim the last of the horizontal budget on small Androids. */
    .plan-card[b-o6c8cksdfm],
    .plan-option[b-o6c8cksdfm],
    .manage-section[b-o6c8cksdfm] {
        padding: 1.25rem;
    }
    .features-card[b-o6c8cksdfm] {
        padding: 1.25rem;
    }
}
/* /Pages/Admin/BuffetKiosk.razor.rz.scp.css */
.bk-container[b-jdg1jm0mxx] {
    max-width: 1200px;
    padding: 20px;
    color: var(--adm-fg-f1f5f9);
    color-scheme: dark;
}

.bk-header[b-jdg1jm0mxx] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.bk-header h2[b-jdg1jm0mxx] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.bk-header .muted[b-jdg1jm0mxx] {
    margin: 4px 0 0;
    color: var(--adm-fg-94a3b8);
    font-size: 0.9rem;
}

.bk-actions[b-jdg1jm0mxx] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bk-link[b-jdg1jm0mxx] {
    color: var(--adm-fg-cbd5e1);
    text-decoration: none;
    font-size: 0.92rem;
    padding: 8px 14px;
    border: 1px solid var(--adm-bd-334155);
    border-radius: 8px;
}

.bk-link:hover[b-jdg1jm0mxx] {
    border-color: var(--adm-bd-f59e0b);
    color: var(--adm-fg-f1f5f9);
}

.bk-btn[b-jdg1jm0mxx] {
    padding: 8px 16px;
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

.bk-btn:disabled[b-jdg1jm0mxx] {
    opacity: 0.6;
    cursor: not-allowed;
}

.bk-error[b-jdg1jm0mxx] {
    background: var(--adm-bg-ef4444-a0_12);
    border: 1px solid var(--adm-bd-ef4444-a0_4);
    color: var(--adm-fgon-f7e4e6-fca5a5);
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 16px;
}

.bk-empty[b-jdg1jm0mxx] {
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 12px;
    padding: 40px 24px;
    text-align: center;
}

.bk-empty .muted[b-jdg1jm0mxx] {
    color: var(--adm-fgon-ffffff-94a3b8);
    font-size: 0.9rem;
    margin: 6px 0 0;
}

.bk-grid[b-jdg1jm0mxx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.bk-card[b-jdg1jm0mxx] {
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.bk-card.active[b-jdg1jm0mxx] {
    border-color: var(--adm-bd-34d399);
    box-shadow: 0 0 0 1px var(--adm-sh-34d399-a0_3);
}

.bk-card.cooldown[b-jdg1jm0mxx] {
    border-color: var(--adm-bd-38bdf8);
}

.bk-card.last-call[b-jdg1jm0mxx] {
    border-color: var(--adm-bd-ef4444);
    box-shadow: 0 0 0 1px var(--adm-sh-ef4444-a0_5), 0 0 14px var(--adm-sh-ef4444-a0_2);
    animation: bk-blink-b-jdg1jm0mxx 2s ease-in-out infinite;
}

.bk-card.expired[b-jdg1jm0mxx] {
    border-color: var(--adm-bd-475569);
    opacity: 0.7;
}

.bk-card.awaiting[b-jdg1jm0mxx] {
    border-color: var(--adm-bd-fbbf24);
    box-shadow: 0 0 0 1px var(--adm-sh-fbbf24-a0_5), 0 0 16px var(--adm-sh-fbbf24-a0_18);
}

.bk-card.awaiting .bk-status[b-jdg1jm0mxx] {
    background: var(--adm-bg-422006);
    color: var(--adm-fgon-fef3c7-fef9c3);
}

.bk-confirm-btn[b-jdg1jm0mxx] {
    width: 100%;
    margin-top: 12px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.15s;
}

.bk-confirm-btn:hover:not(:disabled)[b-jdg1jm0mxx] {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px var(--adm-sh-10b981-a0_35);
}

.bk-confirm-btn:disabled[b-jdg1jm0mxx] {
    opacity: 0.6;
    cursor: not-allowed;
}

.bk-actions-row[b-jdg1jm0mxx] {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.bk-action-btn[b-jdg1jm0mxx] {
    flex: 1;
    padding: 7px 10px;
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    color: var(--adm-fgon-ffffff-cbd5e1);
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.bk-action-btn:hover:not(:disabled)[b-jdg1jm0mxx] {
    border-color: var(--adm-bd-f59e0b);
    color: var(--adm-fg-f1f5f9);
}

.bk-action-btn:disabled[b-jdg1jm0mxx] {
    opacity: 0.5;
    cursor: not-allowed;
}

.bk-action-btn.selected[b-jdg1jm0mxx] {
    border-color: var(--adm-bdon-f7e9d1-f59e0b);
    background: var(--adm-bg-f59e0b-a0_18);
    color: var(--adm-fgon-f7e9d1-fde68a);
}

.bk-action-btn.bk-danger[b-jdg1jm0mxx] {
    border-color: var(--adm-bd-ef4444-a0_4);
    color: var(--adm-fg-fca5a5);
}
.bk-action-btn.bk-danger:hover:not(:disabled)[b-jdg1jm0mxx] {
    border-color: var(--adm-bdon-f7e4e6-ef4444);
    background: var(--adm-bg-ef4444-a0_12);
    color: var(--adm-fgon-f7e4e6-fecaca);
}

.bk-paused-banner[b-jdg1jm0mxx] {
    margin: 6px 0 0;
    padding: 6px 10px;
    background: var(--adm-bg-f59e0b-a0_12);
    border: 1px solid var(--adm-bd-f59e0b-a0_35);
    border-radius: 8px;
    color: var(--adm-fgon-f8efdf-fcd34d);
    font-size: 0.82rem;
    font-weight: 600;
}

.bk-pause-presets[b-jdg1jm0mxx] {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

.bk-modal-bg[b-jdg1jm0mxx] {
    position: fixed;
    inset: 0;
    background: var(--adm-scrim-000000-a0_7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.bk-modal[b-jdg1jm0mxx] {
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 16px;
    padding: 24px;
    min-width: 360px;
    max-width: 90vw;
}

.bk-modal h3[b-jdg1jm0mxx] {
    margin: 0 0 4px;
    color: var(--adm-fgon-ffffff-f1f5f9);
}

.bk-modal .muted[b-jdg1jm0mxx] {
    color: var(--adm-fgon-ffffff-94a3b8);
    font-size: 0.88rem;
    margin: 0 0 16px;
}

.bk-guest-grid[b-jdg1jm0mxx] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 18px;
}

.bk-guest-btn[b-jdg1jm0mxx] {
    padding: 12px 0;
    background: var(--adm-bg-0f172a);
    border: 2px solid var(--adm-bdon-f8fafc-334155);
    color: var(--adm-fgon-f8fafc-f1f5f9);
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}

.bk-guest-btn:hover[b-jdg1jm0mxx] {
    border-color: var(--adm-bdon-f8fafc-f59e0b);
}

.bk-guest-btn.selected[b-jdg1jm0mxx] {
    border-color: var(--adm-bdon-fef3c7-f59e0b);
    background: var(--adm-bg-422006);
    box-shadow: 0 0 0 3px var(--adm-sh-f59e0b-a0_2);
}

.bk-modal-footer[b-jdg1jm0mxx] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.bk-modal-wide[b-jdg1jm0mxx] {
    min-width: 480px;
}

.bk-field[b-jdg1jm0mxx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.bk-field span[b-jdg1jm0mxx] {
    font-size: 0.82rem;
    color: var(--adm-fg-cbd5e1);
}

.bk-field input[type="text"][b-jdg1jm0mxx],
.bk-field input[type="number"][b-jdg1jm0mxx],
.bk-field textarea[b-jdg1jm0mxx] {
    background: var(--adm-bg-0f172a);
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    padding: 9px 10px;
    color: var(--adm-fgon-f8fafc-f1f5f9);
    font-size: 0.92rem;
    font-family: inherit;
    resize: vertical;
}

.bk-field input:focus[b-jdg1jm0mxx],
.bk-field textarea:focus[b-jdg1jm0mxx] {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-f59e0b);
    box-shadow: 0 0 0 3px var(--adm-sh-f59e0b-a0_15);
}

.bk-field .hint[b-jdg1jm0mxx] {
    color: var(--adm-fg-94a3b8);
    font-size: 0.78rem;
}

@keyframes bk-blink-b-jdg1jm0mxx {
    0%, 100% { box-shadow: 0 0 0 1px var(--adm-sh-ef4444-a0_5), 0 0 14px var(--adm-sh-ef4444-a0_2); }
    50% { box-shadow: 0 0 0 1px var(--adm-sh-ef4444-a0_8), 0 0 22px var(--adm-sh-ef4444-a0_45); }
}

.bk-card-head[b-jdg1jm0mxx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--adm-bg-0f172a-a0_5);
    border-bottom: 1px solid var(--adm-bdon-f8fafc-334155);
}

.bk-table[b-jdg1jm0mxx] {
    font-weight: 700;
    font-size: 1.05rem;
}

.bk-status[b-jdg1jm0mxx] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--adm-bg-ffffff-a0_06);
}

.bk-card.active .bk-status[b-jdg1jm0mxx] { background: var(--adm-bg-064e3b); color: var(--adm-fgon-d1fae5-d1fae5); }
.bk-card.cooldown .bk-status[b-jdg1jm0mxx] { background: var(--adm-bg-082f49); color: var(--adm-fgon-daeefb-bae6fd); }
.bk-card.last-call .bk-status[b-jdg1jm0mxx] { background: var(--adm-bg-7f1d1d); color: var(--adm-fgon-fee2e2-fecaca); }
.bk-card.expired .bk-status[b-jdg1jm0mxx] { background: var(--adm-bg-1f2937); color: var(--adm-fgon-ffffff-94a3b8); }

.bk-card-body[b-jdg1jm0mxx] {
    padding: 12px 16px 14px;
}

.bk-row[b-jdg1jm0mxx] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 0;
    font-size: 0.9rem;
    color: var(--adm-fg-cbd5e1);
}

.bk-row strong[b-jdg1jm0mxx] {
    color: var(--adm-fg-f1f5f9);
}

.bk-row.warn strong[b-jdg1jm0mxx] {
    color: var(--adm-fg-fbbf24);
}

/* Phone. Covers the kiosk-specific layout the shared admin-mobile layer can't
   see: the bespoke header/action bar, the button row inside each card, and the
   modals' fixed min-widths. Desktop is untouched. */
@media (max-width: 640px) {
    /* The admin shell already pads the content area — don't pad it twice. */
    .bk-container[b-jdg1jm0mxx] {
        padding: 16px 0;
    }

    /* Title block stacked over a wrapping action bar instead of one nowrap row. */
    .bk-header[b-jdg1jm0mxx] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .bk-actions[b-jdg1jm0mxx] {
        flex-wrap: wrap;
    }

    .bk-link[b-jdg1jm0mxx],
    .bk-btn[b-jdg1jm0mxx] {
        flex: 1 1 auto;
        justify-content: center;
        text-align: center;
    }

    .bk-link[b-jdg1jm0mxx] {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* flex:1 never shrinks a button below its min-content ("Desperdicio"), so
       the 5-button row outgrew the card and .bk-card's overflow:hidden clipped
       it. Wrap to two per row instead. */
    .bk-actions-row[b-jdg1jm0mxx] {
        flex-wrap: wrap;
    }

    .bk-actions-row .bk-action-btn[b-jdg1jm0mxx] {
        flex: 1 1 calc(50% - 3px);
        min-width: 0;
    }

    /* min-width wins over max-width, so the 90vw cap never applied and the wide
       modal forced 480px into a 390px screen. Let both fill the viewport, and
       scroll internally when the fields don't fit (soft keyboard open). */
    .bk-modal-bg[b-jdg1jm0mxx] {
        padding: 12px;
    }

    .bk-modal[b-jdg1jm0mxx],
    .bk-modal-wide[b-jdg1jm0mxx] {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        padding: 18px 16px;
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
    }
}
/* /Pages/Admin/BuffetReport.razor.rz.scp.css */
.br-container[b-quxia2fw6i] {
    max-width: 1100px;
    padding: 20px;
    color: var(--adm-fg-f1f5f9);
    /* Native date-picker widgets use OS theme; force dark so the
       calendar popup and the picker icon match the dark-mode page
       instead of rendering with light system chrome. */
    color-scheme: dark;
}

.br-header[b-quxia2fw6i] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.br-header h2[b-quxia2fw6i] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.br-header .muted[b-quxia2fw6i] {
    margin: 4px 0 0;
    color: var(--adm-fg-94a3b8);
    font-size: 0.9rem;
}

.br-controls[b-quxia2fw6i] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.br-controls input[type="date"][b-quxia2fw6i] {
    background: var(--adm-bg-0f172a);
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--adm-fgon-f8fafc-f1f5f9);
    font-size: 0.9rem;
}

.br-controls .muted[b-quxia2fw6i] {
    color: var(--adm-fg-94a3b8);
}

.br-preset[b-quxia2fw6i] {
    padding: 8px 14px;
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    color: var(--adm-fgon-ffffff-cbd5e1);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.br-preset:hover[b-quxia2fw6i] {
    border-color: var(--adm-bdon-ffffff-f59e0b);
    color: var(--adm-fgon-ffffff-f1f5f9);
}

.br-back[b-quxia2fw6i] {
    color: var(--adm-fg-cbd5e1);
    text-decoration: none;
    font-size: 0.92rem;
    padding: 8px 14px;
    border: 1px solid var(--adm-bd-334155);
    border-radius: 8px;
}

.br-back:hover[b-quxia2fw6i] {
    border-color: var(--adm-bd-f59e0b);
}

.br-loading[b-quxia2fw6i], .br-empty[b-quxia2fw6i] {
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 12px;
    padding: 40px 24px;
    text-align: center;
}

.br-empty .muted[b-quxia2fw6i] {
    color: var(--adm-fgon-ffffff-94a3b8);
    font-size: 0.9rem;
    margin: 6px 0 0;
}

.br-error[b-quxia2fw6i] {
    background: var(--adm-bg-ef4444-a0_12);
    border: 1px solid var(--adm-bd-ef4444-a0_4);
    color: var(--adm-fgon-f7e4e6-fca5a5);
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 16px;
}

.br-kpis[b-quxia2fw6i] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.kpi[b-quxia2fw6i] {
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
}

.kpi-v[b-quxia2fw6i] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--adm-fg-f59e0b);
}

.kpi-l[b-quxia2fw6i] {
    color: var(--adm-fg-94a3b8);
    font-size: 0.78rem;
    margin-top: 4px;
}

.br-grid[b-quxia2fw6i] {
    display: grid;
    /* min(420px, 100%) so a viewport narrower than the 420px track collapses to
       one column instead of forcing a 420px track and overflowing the page.
       Identical to minmax(420px, 1fr) whenever the container is >= 420px. */
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.card[b-quxia2fw6i] {
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 12px;
    padding: 18px 20px;
}

.card h3[b-quxia2fw6i] {
    margin: 0 0 12px;
    font-size: 1.05rem;
    color: var(--adm-fgon-ffffff-f1f5f9);
}

.card .muted[b-quxia2fw6i] {
    color: var(--adm-fgon-ffffff-94a3b8);
    margin: 0;
}

.br-table[b-quxia2fw6i] {
    width: 100%;
    border-collapse: collapse;
}

.br-table th[b-quxia2fw6i] {
    text-align: left;
    color: var(--adm-fg-94a3b8);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--adm-bd-334155);
    padding: 8px 4px;
    font-weight: 600;
}

.br-table td[b-quxia2fw6i] {
    padding: 8px 4px;
    border-bottom: 1px solid var(--adm-bd-1e293b);
    color: var(--adm-fg-cbd5e1);
    font-size: 0.92rem;
}

.br-table tbody tr:hover[b-quxia2fw6i] {
    background: var(--adm-bg-f59e0b-a0_04);
}

.br-table .rank[b-quxia2fw6i] {
    color: var(--adm-fg-f59e0b);
    font-weight: 700;
    width: 30px;
}

.br-status-row[b-quxia2fw6i] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.status-pill[b-quxia2fw6i] {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.status-pill.closed[b-quxia2fw6i] { background: var(--adm-bg-064e3b); color: var(--adm-fgon-d1fae5-d1fae5); }
.status-pill.expired[b-quxia2fw6i] { background: var(--adm-bg-7c2d12); color: var(--adm-fgon-fae3db-fed7aa); }
.status-pill.other[b-quxia2fw6i] { background: #1e3a8a; color: #bfdbfe; }

.hint[b-quxia2fw6i] {
    color: var(--adm-fg-fbbf24);
    font-size: 0.88rem;
    margin: 8px 0 0;
}

.br-funnel[b-quxia2fw6i] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.funnel-row[b-quxia2fw6i] {
    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: center;
    gap: 12px;
}

.funnel-label[b-quxia2fw6i] {
    color: var(--adm-fg-94a3b8);
    font-size: 0.85rem;
}

.funnel-bar[b-quxia2fw6i] {
    background: linear-gradient(90deg, var(--adm-bggrad-6366f1) 0%, var(--adm-bggrad-818cf8) 100%);
    color: var(--adm-fgon-dedffc-ffffff);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    min-width: 60px;
    white-space: nowrap;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.funnel-bar.paid[b-quxia2fw6i] {
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}

/* Phone. The shared admin-mobile layer covers the generic vocabulary (tables,
   buttons, inputs); these are the BuffetReport-specific squeezes. */
@media (max-width: 640px) {
    /* AdminLayout already insets .admin-content on phones — a second 20px of
       side padding here just eats the ~366px we have to lay out in. */
    .br-container[b-quxia2fw6i] {
        padding: 16px 0;
    }

    .card[b-quxia2fw6i] {
        padding: 14px;
    }

    /* The date range should own its own line rather than fight the h2 for it. */
    .br-controls[b-quxia2fw6i] {
        width: 100%;
    }

    /* Both dates side by side; 16px stops iOS Safari zooming the page on focus. */
    .br-controls input[type="date"][b-quxia2fw6i] {
        flex: 1 1 40%;
        min-width: 0;
        font-size: 16px;
    }

    /* A 150px label column is over half the card here, and .funnel-bar is
       nowrap — stack the label above its bar so the bars keep full width. */
    .br-funnel[b-quxia2fw6i] {
        gap: 14px;
    }

    .funnel-row[b-quxia2fw6i] {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}
/* /Pages/Admin/BuffetSettings.razor.rz.scp.css */
.buf-container[b-meg3v7hcmf] {
    max-width: 880px;
    padding: 20px;
    color: var(--adm-fg-f1f5f9);
    /* Native number/text/checkbox widgets use OS theme; force dark
       so the spinner arrows, focus rings and selection highlight
       match the dark page chrome. */
    color-scheme: dark;
}

.buf-header[b-meg3v7hcmf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
}

.buf-header .header-main[b-meg3v7hcmf] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.buf-header .header-right[b-meg3v7hcmf] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kiosk-link[b-meg3v7hcmf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 8px;
    color: var(--adm-fgon-ffffff-cbd5e1);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}

.kiosk-link:hover[b-meg3v7hcmf] {
    border-color: var(--adm-bdon-ffffff-f59e0b);
    color: var(--adm-fgon-ffffff-f1f5f9);
}

.preview-card[b-meg3v7hcmf] {
    border-color: var(--adm-bd-f59e0b-a0_3);
    background: linear-gradient(135deg, var(--adm-bg-f59e0b-a0_04), var(--adm-bg-ef4444-a0_02));
}

.table-grid[b-meg3v7hcmf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.table-tile[b-meg3v7hcmf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: var(--adm-bg-0f172a);
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 10px;
    color: var(--adm-fgon-f8fafc-f1f5f9);
    text-decoration: none;
    transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
    position: relative;
}

.table-tile:hover[b-meg3v7hcmf] {
    border-color: var(--adm-bdon-f8fafc-f59e0b);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px var(--adm-sh-f59e0b-a0_15);
}

.table-tile .t-label[b-meg3v7hcmf] {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--adm-fgon-f8fafc-f1f5f9);
}

.table-tile .t-code[b-meg3v7hcmf] {
    font-size: 0.7rem;
    color: var(--adm-fgon-f8fafc-cbd5e1);
    font-family: 'Courier New', monospace;
}

.table-tile .t-no-code[b-meg3v7hcmf] {
    color: var(--adm-fgon-f8fafc-64748b);
    font-style: italic;
    font-family: inherit;
}

.table-tile .t-arrow[b-meg3v7hcmf] {
    position: absolute;
    top: 8px;
    right: 10px;
    color: var(--adm-fgon-f8fafc-64748b);
    font-size: 0.85rem;
}

.table-tile:hover .t-arrow[b-meg3v7hcmf] {
    color: var(--adm-fgon-f8fafc-f59e0b);
}

/* QR preview image inside the tile — render at thumbnail size; admin
   clicks ⬇ PNG for the print-resolution copy. White background so the
   QR pattern actually shows against the dark theme. */
.table-tile .t-preview[b-meg3v7hcmf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
}

.table-tile .t-qr-img[b-meg3v7hcmf] {
    width: 110px;
    height: 110px;
    background: #fff;
    border-radius: 6px;
    padding: 6px;
    object-fit: contain;
    image-rendering: pixelated;
}

.table-tile .t-dl[b-meg3v7hcmf] {
    display: inline-block;
    text-align: center;
    margin-top: 6px;
    padding: 4px 8px;
    background: var(--adm-bg-f59e0b-a0_1);
    border: 1px solid var(--adm-bd-f59e0b-a0_35);
    color: var(--adm-fgon-f8f1e4-fbbf24);
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s;
}

.table-tile .t-dl:hover[b-meg3v7hcmf] {
    background: var(--adm-bg-f59e0b-a0_2);
}

.bf-qr-actions[b-meg3v7hcmf] {
    display: flex;
    gap: 8px;
    margin: 8px 0 16px;
}

.bf-qr-btn[b-meg3v7hcmf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--adm-bg-f59e0b-a0_15);
    border: 1px solid var(--adm-bd-f59e0b-a0_4);
    border-radius: 8px;
    color: var(--adm-fgon-f8ecd8-fbbf24);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s;
}

.bf-qr-btn:hover[b-meg3v7hcmf] {
    background: var(--adm-bg-f59e0b-a0_25);
}

.bf-qr-btn.primary[b-meg3v7hcmf] {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    border-color: transparent;
    color: white;
}

.bf-qr-btn.primary:hover[b-meg3v7hcmf] {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.35);
}

.buf-header h2[b-meg3v7hcmf] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.buf-header p[b-meg3v7hcmf] {
    margin: 4px 0 0;
    color: var(--adm-fg-94a3b8);
    font-size: 0.95rem;
}

.buf-header .icon[b-meg3v7hcmf] {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
}

.badge[b-meg3v7hcmf] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.badge.on[b-meg3v7hcmf] {
    background: var(--adm-bg-064e3b);
    border: 1px solid var(--adm-bdon-d1fae5-10b981);
    color: var(--adm-fgon-d1fae5-d1fae5);
}

.badge.off[b-meg3v7hcmf] {
    background: var(--adm-bg-1f2937);
    border: 1px solid var(--adm-bdon-ffffff-475569);
    color: var(--adm-fgon-ffffff-94a3b8);
}

.card[b-meg3v7hcmf] {
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 14px;
}

.card-title[b-meg3v7hcmf] {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--adm-fg-f1f5f9);
}

.card-subtitle[b-meg3v7hcmf] {
    color: var(--adm-fg-94a3b8);
    font-size: 0.88rem;
    margin: 0 0 14px;
}

.toggle[b-meg3v7hcmf] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    color: var(--adm-fg-e2e8f0);
}

.toggle input[type="checkbox"][b-meg3v7hcmf] {
    width: 18px;
    height: 18px;
    accent-color: var(--adm-fg-f59e0b);
}

.radio[b-meg3v7hcmf] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--adm-bd-334155);
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
}

.radio input[type="radio"][b-meg3v7hcmf] {
    margin-top: 4px;
    accent-color: var(--adm-fg-f59e0b);
}

.radio strong[b-meg3v7hcmf] {
    display: block;
    color: var(--adm-fg-f1f5f9);
    margin-bottom: 2px;
}

.radio .hint[b-meg3v7hcmf] {
    display: block;
    color: var(--adm-fg-94a3b8);
    font-size: 0.85rem;
}

.field[b-meg3v7hcmf] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.field label[b-meg3v7hcmf] {
    font-size: 0.85rem;
    color: var(--adm-fg-cbd5e1);
}

.field .hint[b-meg3v7hcmf] {
    font-size: 0.8rem;
    color: var(--adm-fg-94a3b8);
}

.field input[type="number"][b-meg3v7hcmf] {
    background: var(--adm-bg-0f172a);
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--adm-fgon-f8fafc-f1f5f9);
    width: 200px;
    font-size: 0.95rem;
}

.field input[type="number"]:focus[b-meg3v7hcmf] {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-f59e0b);
    box-shadow: 0 0 0 3px var(--adm-sh-f59e0b-a0_15);
}

textarea[b-meg3v7hcmf] {
    width: 100%;
    background: var(--adm-bg-0f172a);
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    padding: 10px;
    color: var(--adm-fgon-f8fafc-f1f5f9);
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
}

textarea:focus[b-meg3v7hcmf] {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-f59e0b);
    box-shadow: 0 0 0 3px var(--adm-sh-f59e0b-a0_15);
}

.actions[b-meg3v7hcmf] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
}

.btn[b-meg3v7hcmf] {
    padding: 10px 22px;
    border-radius: 10px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.95rem;
    transition: transform 0.1s, box-shadow 0.15s;
}

.btn:disabled[b-meg3v7hcmf] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary[b-meg3v7hcmf] {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    color: #fff;
}

.btn-primary:hover:not(:disabled)[b-meg3v7hcmf] {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px var(--adm-sh-f59e0b-a0_3);
}

.status[b-meg3v7hcmf] {
    font-size: 0.9rem;
}

.status.ok[b-meg3v7hcmf] {
    color: var(--adm-fg-34d399);
}

.status.error[b-meg3v7hcmf] {
    color: var(--adm-fg-f87171);
}

.bf-i18n-tabs[b-meg3v7hcmf] {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}

.bf-i18n-tab[b-meg3v7hcmf] {
    flex: 0 0 auto;
    padding: 5px 12px;
    background: var(--adm-bg-ffffff-a0_04);
    border: 1px solid var(--adm-bd-94a3b8-a0_25);
    border-radius: 6px;
    color: var(--adm-fgon-eff2f4-94a3b8);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.15s;
}

.bf-i18n-tab:hover[b-meg3v7hcmf] {
    color: var(--adm-fg-cbd5e1);
    border-color: var(--adm-bd-94a3b8-a0_45);
}

.bf-i18n-tab.active[b-meg3v7hcmf] {
    background: var(--adm-bg-f59e0b-a0_15);
    border-color: var(--adm-bd-f59e0b-a0_45);
    color: var(--adm-fgon-f8ecd8-fbbf24);
}

/* Fixed column widths so the Etiqueta input + remove button stay
   inside the card. Without `table-layout: fixed` the browser auto-
   sizes columns to content and the Etiqueta input balloons past the
   right edge of the parent .card. The card itself never gets a
   horizontal scrollbar, so the X-button (last col) was being clipped. */
.bf-tier-table[b-meg3v7hcmf] {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin-bottom: 8px;
}
.bf-tier-table colgroup[b-meg3v7hcmf],
.bf-tier-table col[b-meg3v7hcmf] { display: table-column; }

.bf-tier-table th:nth-child(1)[b-meg3v7hcmf],
.bf-tier-table td:nth-child(1)[b-meg3v7hcmf],
.bf-tier-table th:nth-child(2)[b-meg3v7hcmf],
.bf-tier-table td:nth-child(2)[b-meg3v7hcmf] { width: 80px; }
.bf-tier-table th:nth-child(3)[b-meg3v7hcmf],
.bf-tier-table td:nth-child(3)[b-meg3v7hcmf] { width: 100px; }
.bf-tier-table th:nth-child(5)[b-meg3v7hcmf],
.bf-tier-table td:nth-child(5)[b-meg3v7hcmf] { width: 48px; text-align: right; }
.bf-tier-table th:nth-child(4)[b-meg3v7hcmf],
.bf-tier-table td:nth-child(4)[b-meg3v7hcmf] { width: auto; }

.bf-tier-table th[b-meg3v7hcmf] {
    text-align: left;
    color: var(--adm-fg-94a3b8);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 6px;
    border-bottom: 1px solid var(--adm-bd-94a3b8-a0_18);
}
.bf-tier-table td[b-meg3v7hcmf] {
    padding: 4px 6px;
}
.bf-tier-table td input[type="number"][b-meg3v7hcmf],
.bf-tier-table td input[type="text"][b-meg3v7hcmf] {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    background: var(--adm-bg-ffffff-a0_04);
    border: 1px solid var(--adm-bd-94a3b8-a0_2);
    border-radius: 6px;
    color: var(--adm-fgon-eff2f4-f1f5f9);
    font-size: 0.9rem;
}
.bf-tier-remove[b-meg3v7hcmf] {
    background: var(--adm-bg-ef4444-a0_12);
    border: 1px solid var(--adm-bd-ef4444-a0_35);
    color: var(--adm-fgon-f7e4e6-fca5a5);
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
}
.bf-tier-add[b-meg3v7hcmf] {
    background: var(--adm-bg-6366f1-a0_12);
    border: 1px dashed var(--adm-bd-6366f1-a0_4);
    color: var(--adm-fgon-e6e8fb-a5b4fc);
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}
.bf-tier-add:hover[b-meg3v7hcmf] {
    background: var(--adm-bg-6366f1-a0_2);
}

/* Inline help box for time tiers — explains 0-24 range, overnight wrap,
   overlap precedence. Sits between the section subtitle and the table. */
.bf-tier-help[b-meg3v7hcmf] {
    background: var(--adm-bg-6366f1-a0_06);
    border-left: 3px solid var(--adm-bdon-eff1fb-6366f1);
    padding: 10px 14px;
    margin: 0 0 12px;
    border-radius: 6px;
    color: var(--adm-fgon-eff1fb-cbd5e1);
    font-size: 0.85rem;
    line-height: 1.55;
}
.bf-tier-help strong[b-meg3v7hcmf] { color: var(--adm-fg-f1f5f9); }
.bf-tier-help ul[b-meg3v7hcmf] { margin: 6px 0 0; padding-left: 18px; }
.bf-tier-help li[b-meg3v7hcmf] { margin: 2px 0; }

/* Pause/resume card — red-tinted banner when actively paused so the
   operator can see at a glance that the buffet isn't accepting rounds. */
.card-paused[b-meg3v7hcmf] {
    border-color: var(--adm-bd-ef4444-a0_45);
    background: linear-gradient(180deg, var(--adm-bg-ef4444-a0_08), var(--adm-bg-0f172a-a0));
}
.paused-banner[b-meg3v7hcmf] {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: var(--adm-bg-ef4444-a0_12);
    border: 1px solid var(--adm-bd-ef4444-a0_35);
    padding: 12px 16px;
    border-radius: 8px;
    color: var(--adm-fgon-f7e4e6-fee2e2);
}
.paused-banner strong[b-meg3v7hcmf] { font-size: 1rem; }
.paused-reason[b-meg3v7hcmf] { color: var(--adm-fg-fca5a5); font-size: 0.85rem; flex: 1; }
.pause-grid[b-meg3v7hcmf] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}
@media (max-width: 600px) {
    .pause-grid[b-meg3v7hcmf] { grid-template-columns: repeat(2, 1fr); }
}
.btn-soft[b-meg3v7hcmf] {
    background: var(--adm-bg-94a3b8-a0_12);
    border: 1px solid var(--adm-bd-94a3b8-a0_3);
    color: var(--adm-fgon-e6eaee-e2e8f0);
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}
.btn-soft:hover[b-meg3v7hcmf] { background: var(--adm-bg-94a3b8-a0_2); }
.btn-soft:disabled[b-meg3v7hcmf] { opacity: 0.55; cursor: not-allowed; }

/* Sticky save bar — pinned to viewport bottom. Re-uses .btn-primary and
   .status from the main page. Backdrop-blur keeps content readable when
   the bar overlays cards. */
.buf-sticky-save[b-meg3v7hcmf] {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    margin-top: 32px;
    background: var(--adm-bg-0f172a-a0_92);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--adm-bd-94a3b8-a0_2);
}
.buf-sticky-save-inner[b-meg3v7hcmf] {
    max-width: 920px;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex; align-items: center; justify-content: flex-end; gap: 14px;
}
.buf-sticky-save-hint[b-meg3v7hcmf] {
    color: var(--adm-fg-94a3b8);
    font-size: 0.85rem;
    flex: 1;
}

/* Conditional-disabled section — when a parent toggle (e.g. AllowChildren)
   is off, render the dependent fields as visibly disabled instead of
   hiding them. Operators can still see the values without flipping the
   toggle. */
.bf-disabled-block[b-meg3v7hcmf] {
    opacity: 0.55;
    pointer-events: none;
    border-left: 3px dashed var(--adm-bd-94a3b8-a0_3);
    padding-left: 10px;
    margin-left: -10px;
}
.bf-disabled-note[b-meg3v7hcmf] {
    color: var(--adm-fg-94a3b8);
    font-size: 0.8rem;
    margin: 6px 0 8px;
    font-style: italic;
}
/* Per-field disabled — when only ONE field is blocked (e.g. KidsAreFree
   is on so the factor is moot). Keeps the rest of the card interactive. */
.bf-field-disabled input[b-meg3v7hcmf],
.bf-field-disabled select[b-meg3v7hcmf],
.bf-field-disabled textarea[b-meg3v7hcmf] {
    opacity: 0.5;
    cursor: not-allowed;
}
.bf-field-disabled label[b-meg3v7hcmf] { color: var(--adm-fg-94a3b8); }

/* Validation summary card — listed above the inline save row when the
   form has blocking errors. Red border + amber list so it doesn't read
   like a generic info card. */
.bf-validation[b-meg3v7hcmf] {
    border-color: var(--adm-bd-ef4444-a0_45);
    background: linear-gradient(180deg, var(--adm-bg-ef4444-a0_08), var(--adm-bg-0f172a-a0));
    color: var(--adm-fgon-f7ebed-fee2e2);
}
.bf-validation strong[b-meg3v7hcmf] { font-size: 1rem; color: var(--adm-fg-fca5a5); }
.bf-validation ul[b-meg3v7hcmf] { margin: 8px 0 0; padding-left: 22px; color: var(--adm-fg-fde68a); }
.bf-validation li[b-meg3v7hcmf] { margin: 3px 0; line-height: 1.5; }

/* Error variant of the sticky-save hint — same text role as the default
   gray hint but red so a 1-glance scan tells the operator they can't save. */
.buf-sticky-save-hint.error[b-meg3v7hcmf] { color: var(--adm-fg-fca5a5); font-weight: 600; }

/* Collapsible card for advanced / rarely-touched settings (KDS theme,
   kitchen language, CSV import). Renders as a normal card but the body
   is hidden until the operator clicks the header. Matches the QR-card
   collapse affordance — prominent chevron in a colored circle so the
   toggle isn't easy to miss. */
.bf-advanced[b-meg3v7hcmf] { padding: 0; overflow: hidden; }
.bf-advanced > summary[b-meg3v7hcmf] {
    cursor: pointer;
    padding: 18px 22px;
    list-style: none;
    display: flex; align-items: center; gap: 14px;
    color: var(--adm-fg-f1f5f9);
    user-select: none;
    transition: background 0.12s ease;
}
.bf-advanced > summary:hover[b-meg3v7hcmf] {
    background: var(--adm-bg-6366f1-a0_06);
}
.bf-advanced > summary[b-meg3v7hcmf]::-webkit-details-marker { display: none; }
.bf-advanced > summary[b-meg3v7hcmf]::before {
    content: "▸";
    font-size: 1rem;
    line-height: 1;
    color: var(--adm-fgon-dddffa-f1f5f9);
    background: var(--adm-bg-6366f1-a0_18);
    border: 1px solid var(--adm-bd-6366f1-a0_45);
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform 0.18s ease, background 0.12s ease;
    flex-shrink: 0;
}
.bf-advanced > summary:hover[b-meg3v7hcmf]::before {
    background: var(--adm-bg-6366f1-a0_32);
}
.bf-advanced[open] > summary[b-meg3v7hcmf]::before {
    transform: rotate(90deg);
    background: var(--adm-bg-6366f1-a0_32);
}
.bf-advanced[open] > summary[b-meg3v7hcmf] { border-bottom: 1px solid var(--adm-bd-94a3b8-a0_15); }
.bf-advanced > *:not(summary)[b-meg3v7hcmf] { padding-left: 22px; padding-right: 22px; }
.bf-advanced > *:not(summary):last-child[b-meg3v7hcmf] { padding-bottom: 18px; }
.bf-advanced-hint[b-meg3v7hcmf] {
    font-size: 0.8rem;
    color: var(--adm-fg-94a3b8);
    font-weight: 400;
    margin-left: 4px;
}

/* QR preview <details> — collapsed by default. The summary is styled
   like an obvious button (large prominent chevron in a colored circle,
   hover state, "ver/ocultar" hint) because the bare disclosure triangle
   was easy to miss at this card size. */
.bf-qr-details[b-meg3v7hcmf] { padding: 0; }
.bf-qr-details > summary[b-meg3v7hcmf] {
    cursor: pointer;
    padding: 18px 22px;
    list-style: none;
    user-select: none;
    transition: background 0.12s ease;
}
.bf-qr-details > summary:hover[b-meg3v7hcmf] {
    background: var(--adm-bg-6366f1-a0_06);
}
.bf-qr-details > summary[b-meg3v7hcmf]::-webkit-details-marker { display: none; }
.bf-qr-summary[b-meg3v7hcmf] {
    display: flex; align-items: center; gap: 14px;
}
.bf-qr-summary > div:first-child[b-meg3v7hcmf] { flex: 1; }
.bf-qr-summary[b-meg3v7hcmf]::before {
    content: "▸";
    font-size: 1rem;
    line-height: 1;
    color: var(--adm-fgon-dddffa-f1f5f9);
    background: var(--adm-bg-6366f1-a0_18);
    border: 1px solid var(--adm-bd-6366f1-a0_45);
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform 0.18s ease, background 0.12s ease;
    flex-shrink: 0;
}
.bf-qr-details > summary:hover .bf-qr-summary[b-meg3v7hcmf]::before {
    background: var(--adm-bg-6366f1-a0_32);
}
.bf-qr-details[open] .bf-qr-summary[b-meg3v7hcmf]::before {
    transform: rotate(90deg);
    background: var(--adm-bg-6366f1-a0_32);
}
.bf-qr-count[b-meg3v7hcmf] {
    margin-left: 10px;
    font-size: 0.85rem;
    color: var(--adm-fg-94a3b8);
    font-weight: 400;
}
.bf-qr-toggle-hint[b-meg3v7hcmf] {
    font-size: 0.78rem;
    color: var(--adm-fg-94a3b8);
    margin-top: 3px;
}
.bf-qr-details[open] > summary[b-meg3v7hcmf] { border-bottom: 1px solid var(--adm-bd-94a3b8-a0_15); }
.bf-qr-details > *:not(summary)[b-meg3v7hcmf] { padding-left: 22px; padding-right: 22px; }
.bf-qr-details > *:not(summary):last-child[b-meg3v7hcmf] { padding-bottom: 18px; }

/* Search + counter toolbar inside the QR <details>. Filters tables by
   label or zone name. Clear button shows up only when there's input. */
.bf-qr-toolbar[b-meg3v7hcmf] {
    display: flex; align-items: center; gap: 10px;
    margin: 8px 0 14px;
}
.bf-qr-search[b-meg3v7hcmf] {
    flex: 1;
    background: var(--adm-bg-0f172a-a0_6);
    border: 1px solid var(--adm-bd-94a3b8-a0_3);
    color: var(--adm-fgon-f8fafc-f1f5f9);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
}
.bf-qr-search[b-meg3v7hcmf]::placeholder { color: var(--adm-fg-64748b); }
.bf-qr-search-count[b-meg3v7hcmf] {
    font-size: 0.8rem;
    color: var(--adm-fg-94a3b8);
    white-space: nowrap;
}
.bf-qr-search-clear[b-meg3v7hcmf] {
    background: transparent;
    border: 1px solid var(--adm-bd-94a3b8-a0_3);
    color: var(--adm-fg-94a3b8);
    width: 28px; height: 28px;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
}
.bf-qr-search-clear:hover[b-meg3v7hcmf] { background: var(--adm-bg-94a3b8-a0_15); }

/* Zone heading inside the QR grid — only rendered when the restaurant
   has more than one zone (sala). Visually separates "Interior" from
   "Terraza" without making each group its own card. */
.bf-zone-heading[b-meg3v7hcmf] {
    margin: 18px 0 10px;
    color: var(--adm-fg-cbd5e1);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--adm-bd-94a3b8-a0_15);
}
.bf-zone-heading:first-of-type[b-meg3v7hcmf] { margin-top: 8px; }
.bf-zone-count[b-meg3v7hcmf] {
    color: var(--adm-fg-64748b);
    font-size: 0.8rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

/* KDS theme preview swatch row — three chips under the theme <select>
   showing the colors operators will see on the kitchen board for each
   urgency tier. Updates live as the operator picks a different theme. */
.kds-swatch-row[b-meg3v7hcmf] {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 10px 0 6px;
}
.kds-swatch-label[b-meg3v7hcmf] {
    font-size: 0.8rem;
    color: var(--adm-fg-94a3b8);
    margin-right: 4px;
}
.kds-swatch-chip[b-meg3v7hcmf] {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    /* color and border come from the inline style per chip — see the
       themeSwatches table in BuffetSettings.razor. Default is white text
       which works for the saturated themes; Alto contraste flips to
       black-on-yellow and adds a real black border. */
    border: 1px solid var(--adm-bd-ffffff-a0_12);
}

/* Section anchor nav — sticky under the page header so the operator can
   jump between sections on a long settings form. Pill buttons stay flat
   on light hover so they don't compete with the colored Save bar. */
.bf-anchor-nav[b-meg3v7hcmf] {
    position: sticky;
    top: 0;
    z-index: 40;
    margin: 0 0 20px;
    padding: 10px 4px;
    background: var(--adm-bg-0f172a-a0_94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--adm-bd-94a3b8-a0_18);
    display: flex; flex-wrap: wrap; gap: 8px;
    overflow-x: auto;
}
.bf-anchor-nav a[b-meg3v7hcmf] {
    color: var(--adm-fgon-fcfdfe-cbd5e1);
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--adm-bd-94a3b8-a0_25);
    background: var(--adm-bg-1e293b-a0_6);
    font-size: 0.85rem;
    white-space: nowrap;
    transition: all 0.12s ease;
}
.bf-anchor-nav a:hover[b-meg3v7hcmf] {
    background: var(--adm-bg-6366f1-a0_18);
    border-color: var(--adm-bd-6366f1-a0_5);
    color: var(--adm-fgon-dddffa-f1f5f9);
}
.bf-anchor-nav a.active[b-meg3v7hcmf] {
    background: var(--adm-bg-6366f1-a0_32);
    border-color: var(--adm-bd-6366f1-a0_7);
    color: var(--adm-fgon-c8cbf8-ffffff);
    font-weight: 600;
}

/* Setup checklist — quick at-a-glance view of "what's still missing".
   Green check + green text for done items; amber ⚠ for warn ones
   (sin límite, etc.). Items are anchor links to their section. */
.bf-checklist-list[b-meg3v7hcmf] {
    list-style: none;
    padding: 0;
    margin: 0;
}
.bf-checklist-list li[b-meg3v7hcmf] {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--adm-bd-94a3b8-a0_1);
}
.bf-checklist-list li:last-child[b-meg3v7hcmf] { border-bottom: none; }
.bf-checklist-list li a[b-meg3v7hcmf] {
    color: var(--adm-fg-cbd5e1);
    text-decoration: none;
    flex: 1;
}
.bf-checklist-list li a:hover[b-meg3v7hcmf] { color: var(--adm-fg-f1f5f9); text-decoration: underline; }
.bf-check-icon[b-meg3v7hcmf] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--adm-fgon-e6eaee-64748b);
    background: var(--adm-bg-94a3b8-a0_12);
    border: 1px solid var(--adm-bd-94a3b8-a0_3);
    flex-shrink: 0;
}
.bf-checklist-list li.done .bf-check-icon[b-meg3v7hcmf] {
    color: var(--adm-fgon-d8f2e4-4ade80);
    background: var(--adm-bg-22c55e-a0_15);
    border-color: var(--adm-bd-22c55e-a0_5);
}
.bf-checklist-list li.done a[b-meg3v7hcmf] { color: var(--adm-fg-e2e8f0); }
.bf-checklist-list li.warn .bf-check-icon[b-meg3v7hcmf] {
    color: var(--adm-fgon-f8ecd8-fbbf24);
    background: var(--adm-bg-f59e0b-a0_15);
    border-color: var(--adm-bd-f59e0b-a0_5);
}

/* Recommended presets — 4 quick-fill buttons for common AYCE configs.
   Each card-button shows an icon + title + short summary. Hover lifts
   the card slightly so users see they're clickable. */
.bf-preset-grid[b-meg3v7hcmf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 6px;
}
.bf-preset[b-meg3v7hcmf] {
    display: flex; flex-direction: column; gap: 4px;
    text-align: left;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--adm-bg-1e293b-a0_6);
    border: 1px solid var(--adm-bd-94a3b8-a0_25);
    color: var(--adm-fgon-fcfdfe-e2e8f0);
    cursor: pointer;
    transition: all 0.12s ease;
}
.bf-preset:hover[b-meg3v7hcmf] {
    background: var(--adm-bg-6366f1-a0_12);
    border-color: var(--adm-bd-6366f1-a0_45);
    transform: translateY(-1px);
}
.bf-preset.is-selected[b-meg3v7hcmf] {
    position: relative;
    background: var(--adm-bg-6366f1-a0_18);
    border-color: var(--adm-bdon-dddffa-6366f1);
    box-shadow: 0 0 0 2px var(--adm-sh-6366f1-a0_45);
}
.bf-preset.is-selected[b-meg3v7hcmf]::after {
    content: "✓";
    position: absolute;
    top: 8px;
    right: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #6366f1;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.bf-preset-icon[b-meg3v7hcmf] {
    font-size: 1.6rem;
    line-height: 1;
}
.bf-preset strong[b-meg3v7hcmf] {
    font-size: 0.95rem;
    color: var(--adm-fg-f1f5f9);
    margin-top: 2px;
}
.bf-preset-desc[b-meg3v7hcmf] {
    font-size: 0.78rem;
    color: var(--adm-fg-94a3b8);
    line-height: 1.4;
}

/* Styled file upload — hides the native input and renders a button-shaped
   label. Operators see "📤 Seleccionar archivo CSV…" instead of the OS
   default "Choose File / No file chosen" which read as unfinished. The
   InputFile still works because it's inside the <label>. */
.bf-file-upload[b-meg3v7hcmf] {
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: 6px;
    cursor: pointer;
}
.bf-file-upload :where(input[type="file"])[b-meg3v7hcmf] {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}
.bf-file-upload-btn[b-meg3v7hcmf] {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--adm-bg-6366f1-a0_18);
    border: 1px solid var(--adm-bd-6366f1-a0_5);
    color: var(--adm-fgon-dddffa-e0e7ff);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
}
.bf-file-upload:hover .bf-file-upload-btn[b-meg3v7hcmf] {
    background: var(--adm-bg-6366f1-a0_3);
}
.bf-file-upload-hint[b-meg3v7hcmf] {
    font-size: 0.8rem;
    color: var(--adm-fg-94a3b8);
}

/* Color picker row: native picker + hex text + reset button side by
   side so operators can fine-tune by either method. */
.bf-color-row[b-meg3v7hcmf] {
    display: flex; align-items: center; gap: 10px;
    margin-top: 6px;
}
.bf-color-picker[b-meg3v7hcmf] {
    width: 56px;
    height: 40px;
    padding: 2px;
    border: 1px solid var(--adm-bd-94a3b8-a0_3);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}
.bf-color-text[b-meg3v7hcmf] {
    flex: 1;
    max-width: 180px;
    font-family: 'JetBrains Mono', monospace;
}
.bf-color-reset[b-meg3v7hcmf] {
    background: var(--adm-bg-94a3b8-a0_12);
    border: 1px solid var(--adm-bd-94a3b8-a0_3);
    color: var(--adm-fgon-e6eaee-cbd5e1);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
}
.bf-color-reset:hover[b-meg3v7hcmf] { background: var(--adm-bg-94a3b8-a0_22); }

/* Upload row — thumbnail of the current asset (or empty placeholder),
   the file-picker button, and a remove button. Renders above the URL
   field so operators see the live state before tweaking. */
.bf-upload-row[b-meg3v7hcmf] {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: 6px;
}
.bf-upload-thumb[b-meg3v7hcmf] {
    width: 64px; height: 64px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--adm-bg-94a3b8-a0_1);
    border: 1px solid var(--adm-bd-94a3b8-a0_25);
    flex-shrink: 0;
}
.bf-upload-thumb.hero[b-meg3v7hcmf] {
    width: 120px; height: 64px;
}
.bf-upload-thumb.empty[b-meg3v7hcmf] {
    display: flex; align-items: center; justify-content: center;
    color: var(--adm-fg-64748b);
    font-size: 1.5rem;
    font-weight: 700;
}

/* Subsection title inside a card — used by the promo banner block
   under Apariencia so the operator sees a clear visual break. */
.bf-subsection-title[b-meg3v7hcmf] {
    margin: 20px 0 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--adm-fg-94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-top: 12px;
    border-top: 1px solid var(--adm-bd-94a3b8-a0_15);
}

/* Two-column grid for the promo banner colour pickers — compact so
   they sit side by side instead of stacking. */
.bf-promo-grid[b-meg3v7hcmf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Subsection title smaller than .bf-subsection-title — used inside the
   promo banner block to separate "what the banner says" from "when to
   show it" without making the whole card feel deeply nested. */
.bf-mini-title[b-meg3v7hcmf] {
    margin: 16px 0 4px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--adm-fg-cbd5e1);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Day-of-week toggle chips for the promo scheduling. Two-letter Spanish
   abbreviations (Lu Ma Mi Ju Vi Sa Do) so they read fast and fit on a
   single row on mobile. "on" = day is included; off = excluded. */
.bf-days-row[b-meg3v7hcmf] {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;
}
.bf-day-chip[b-meg3v7hcmf] {
    min-width: 38px;
    padding: 6px 10px;
    background: var(--adm-bg-94a3b8-a0_12);
    border: 1px solid var(--adm-bd-94a3b8-a0_3);
    border-radius: 8px;
    color: var(--adm-fgon-e6eaee-94a3b8);
    font-weight: 600;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.12s ease;
}
.bf-day-chip:hover[b-meg3v7hcmf] { background: var(--adm-bg-94a3b8-a0_2); }
.bf-day-chip.on[b-meg3v7hcmf] {
    background: var(--adm-bg-6366f1-a0_32);
    border-color: var(--adm-bd-6366f1-a0_7);
    color: var(--adm-fgon-c8cbf8-ffffff);
}

/* Live preview of the customer QR welcome card. Honors --qr-accent +
   optional --qr-hero (background image with overlay). Sized like a
   mobile portrait so operators visualise what the customer sees. */
.bf-qr-preview[b-meg3v7hcmf] {
    --qr-accent: var(--adm-bg-f59e0b);
    position: relative;
    max-width: 280px;
    margin-top: 6px;
    border-radius: 16px;
    padding: 28px 22px 24px;
    background: var(--qr-hero, linear-gradient(135deg, var(--adm-bggrad-1e293b) 0%, var(--adm-bggrad-0f172a) 100%));
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-align: center;
    border: 1px solid var(--adm-bd-94a3b8-a0_25);
}
.bf-qr-preview-overlay[b-meg3v7hcmf] {
    position: absolute; inset: 0;
    background: var(--adm-scrim-0f172a-a0_65);
    z-index: 0;
}
.bf-qr-preview > *:not(.bf-qr-preview-overlay)[b-meg3v7hcmf] { position: relative; z-index: 1; }
.bf-qr-preview-logo[b-meg3v7hcmf] {
    width: 60px; height: 60px;
    object-fit: contain;
    border-radius: 12px;
    background: var(--adm-bg-ffffff-a0_08);
    padding: 6px;
}
.bf-qr-preview-mark[b-meg3v7hcmf] {
    width: 56px; height: 56px;
    background: var(--qr-accent);
    color: #0f172a;
    border-radius: 14px;
    font-size: 1.8rem;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.bf-qr-preview-title[b-meg3v7hcmf] {
    color: var(--adm-fg-f1f5f9);
    font-size: 1.1rem;
    margin: 6px 0 0;
}
.bf-qr-preview-sub[b-meg3v7hcmf] {
    color: var(--adm-fg-cbd5e1);
    font-size: 0.85rem;
    margin: 0;
}
.bf-qr-preview-btn[b-meg3v7hcmf] {
    margin-top: 12px;
    background: var(--qr-accent);
    color: #0f172a;
    border: none;
    padding: 10px 24px;
    border-radius: 999px;
    font-weight: 700;
    cursor: default;
    font-size: 0.95rem;
}

/* ========================================================================
   Mobile (≤600px) — additive only. Fixes the iPhone-width header overflow:
   the Informes / Ver mesas activas buttons ran off the right edge and the
   "Modo Buffet" title got squeezed/wrapped, while the orange "B" icon was
   clipped at the far left. On phones we stack the header vertically — title
   row on top, action buttons wrapping onto their own row beneath — and make
   the container + cards full-width so nothing is cut off. Desktop/base rules
   above are untouched; this block is appended last so it wins source order. */
@media (max-width: 600px) {
    /* Root + cards must never exceed the viewport. */
    .buf-container[b-meg3v7hcmf] {
        max-width: 100%;
        padding: 14px;
        overflow-x: hidden;
    }
    .card[b-meg3v7hcmf] {
        max-width: 100%;
        padding: 16px;
    }

    /* Stack the header: title block on its own row, actions wrap beneath. */
    .buf-header[b-meg3v7hcmf] {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin-bottom: 18px;
    }
    /* Keep the "B" icon at its real size so it can't be squashed/clipped,
       and let the title text take the remaining width and wrap naturally. */
    .buf-header .header-main[b-meg3v7hcmf] {
        align-items: flex-start;
        gap: 12px;
        min-width: 0;
    }
    .buf-header .header-main > div[b-meg3v7hcmf] {
        min-width: 0;
    }
    .buf-header .icon[b-meg3v7hcmf] {
        flex-shrink: 0;
    }
    .buf-header h2[b-meg3v7hcmf] {
        font-size: 1.3rem;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    /* Action buttons drop to their own row and wrap instead of overflowing. */
    .buf-header .header-right[b-meg3v7hcmf] {
        flex-wrap: wrap;
        gap: 8px;
    }
    .buf-header .header-right .kiosk-link[b-meg3v7hcmf] {
        flex: 1 1 auto;
        justify-content: center;
    }
    /* The ACTIVO/INACTIVO badge sits inline with the buttons, not stretched. */
    .buf-header .header-right .badge[b-meg3v7hcmf] {
        flex: 0 0 auto;
    }

    /* The <details> cards opt out of .card padding (they set padding:0 and inset
       each child by 22px instead), so the 16px card padding above never reached
       them. Match it so their contents get the full phone width. */
    .bf-advanced > summary[b-meg3v7hcmf],
    .bf-qr-details > summary[b-meg3v7hcmf] {
        padding: 14px 16px;
    }
    .bf-advanced > *:not(summary)[b-meg3v7hcmf],
    .bf-qr-details > *:not(summary)[b-meg3v7hcmf] {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Anchor nav: the 7 pills wrapped onto 3 rows and, being sticky, ate a third
       of the phone screen on every scroll. Scroll them sideways in one row
       instead — the strip already has overflow-x:auto. */
    .bf-anchor-nav[b-meg3v7hcmf] {
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    /* QR summary row: chevron + title + "Descargar todos (.zip)" don't fit on one
       phone-width line, and the button (last item) was the part getting clipped.
       Let it wrap onto its own full-width row under the title. */
    .bf-qr-summary[b-meg3v7hcmf] {
        flex-wrap: wrap;
        gap: 10px;
    }
    .bf-qr-summary .bf-qr-btn[b-meg3v7hcmf] {
        flex: 1 1 100%;
        justify-content: center;
    }

    /* The file-upload label is an inline-flex that never wrapped: the button plus
       the "Máx 2 MB…" hint together are wider than the card. */
    .bf-file-upload[b-meg3v7hcmf] {
        flex-wrap: wrap;
    }

    /* Franjas table: the fixed columns (80+80+100+48 + padding) already exceed the
       card, leaving the Etiqueta column nothing. Give Etiqueta a real width and let
       the .table-wrap around the table (see the markup) scroll it. */
    .bf-tier-table th:nth-child(4)[b-meg3v7hcmf],
    .bf-tier-table td:nth-child(4)[b-meg3v7hcmf] {
        width: 160px;
    }

    /* Promo banner pairs stack: a native date input can't shrink to half a phone
       card without clipping its picker. */
    .bf-promo-grid[b-meg3v7hcmf] {
        grid-template-columns: 1fr;
    }

    /* Sticky save bar: the support FAB (fixed, 56px, bottom-right, z-index 900)
       lands exactly on top of the right-aligned "Guardar cambios" button once the
       bar spans the full phone width — the FAB wins the tap. Inset the bar's right
       edge so the button clears it. */
    .buf-sticky-save-inner[b-meg3v7hcmf] {
        padding: 10px 14px;
        padding-right: 86px;
    }
}

/* Light admin (the default since 2026-10-12). Measured light-only contrast, now 4.5:1 or more; dark untouched. */
/* White on the amber end of the gradient read at 2.15:1: the same gradient, deeper. */
:root[data-theme="light"] .btn-primary[b-meg3v7hcmf] { background: linear-gradient(135deg, #b45309 0%, #dc2626 100%); }
/* /Pages/Admin/BuffetTv.razor.rz.scp.css */
/* Full-screen kitchen / floor TV. Optimized for ≥1080p displays viewed
   from 2-3m away. Saturated colors so glanceable across the room; large
   numeric typography because every metric needs to read at a distance. */

.tv-root[b-269w5kshwz] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: radial-gradient(ellipse at top, var(--adm-bggrad-0f172a) 0%, var(--adm-bggrad-020617) 100%);
    color: var(--adm-fgon-f8fafc-f1f5f9);
    font-family: 'Inter', system-ui, sans-serif;
    overflow: hidden;
}

.tv-header[b-269w5kshwz] {
    flex: 0 0 auto;
    padding: 18px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--adm-bd-ffffff-a0_08);
}

.tv-brand[b-269w5kshwz] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tv-dot[b-269w5kshwz] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.8);
    animation: tv-pulse-b-269w5kshwz 1.8s ease-in-out infinite;
}

@keyframes tv-pulse-b-269w5kshwz {
    0%, 100% { box-shadow: 0 0 0 0 var(--adm-sh-ef4444-a0_7); }
    50% { box-shadow: 0 0 0 12px var(--adm-sh-ef4444-a0); }
}

.tv-title[b-269w5kshwz] {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.tv-stats[b-269w5kshwz] {
    display: flex;
    align-items: center;
    gap: 24px;
}

.tv-stat[b-269w5kshwz] {
    font-size: 1.05rem;
    color: var(--adm-fg-cbd5e1);
}

.tv-stat strong[b-269w5kshwz] {
    color: var(--adm-fg-f1f5f9);
    font-weight: 800;
    margin-right: 4px;
}

.tv-stat.warn[b-269w5kshwz] {
    color: var(--adm-fg-fbbf24);
    font-weight: 700;
}

.tv-clock[b-269w5kshwz] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--adm-fg-94a3b8);
    letter-spacing: 0.02em;
}

.tv-cols[b-269w5kshwz] {
    display: flex;
    gap: 4px;
    margin-left: 12px;
}

.tv-col-btn[b-269w5kshwz] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--adm-bd-94a3b8-a0_3);
    background: var(--adm-bg-ffffff-a0_04);
    border-radius: 6px;
    color: var(--adm-fgon-eff2f4-94a3b8);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}

.tv-col-btn.active[b-269w5kshwz] {
    border-color: var(--adm-bd-f59e0b-a0_6);
    background: var(--adm-bg-f59e0b-a0_18);
    color: var(--adm-fgon-f7e9d1-fbbf24);
}

.tv-back[b-269w5kshwz] {
    color: var(--adm-fg-94a3b8);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--adm-bd-94a3b8-a0_25);
}

.tv-back:hover[b-269w5kshwz] {
    color: var(--adm-fg-f1f5f9);
    border-color: var(--adm-bd-94a3b8-a0_55);
}

/* Grid + tiles */

.tv-grid[b-269w5kshwz] {
    flex: 1 1 auto;
    display: grid;
    gap: 16px;
    padding: 16px 24px;
    overflow: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(220px, 1fr);
}

.tv-grid-cols-2[b-269w5kshwz] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tv-grid-cols-3[b-269w5kshwz] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tv-grid-cols-4[b-269w5kshwz] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tv-grid-cols-5[b-269w5kshwz] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tv-grid-cols-6[b-269w5kshwz] { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.tv-tile[b-269w5kshwz] {
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, var(--adm-bggrad-1e293b) 0%, var(--adm-bggrad-0f172a) 100%);
    border: 2px solid var(--adm-bd-94a3b8-a0_25);
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 6px 18px var(--adm-sh-000000-a0_35);
    position: relative;
    overflow: hidden;
}

/* State-driven borders + accent */
.tv-tile.active[b-269w5kshwz] {
    border-color: var(--adm-bd-10b981-a0_4);
}
.tv-tile.cooldown[b-269w5kshwz] {
    border-color: var(--adm-bd-6366f1-a0_5);
}
.tv-tile.awaiting[b-269w5kshwz] {
    border-color: var(--adm-bd-f59e0b-a0_7);
    background: linear-gradient(160deg, var(--adm-bggrad-2a1e0b) 0%, var(--adm-bggrad-1c1306) 100%);
    animation: tv-glow-amber-b-269w5kshwz 1.6s ease-in-out infinite;
}
.tv-tile.last-call[b-269w5kshwz] {
    border-color: var(--adm-bd-ef4444-a0_7);
    background: linear-gradient(160deg, var(--adm-bggrad-2a0f0f) 0%, var(--adm-bggrad-1c0808) 100%);
    animation: tv-glow-red-b-269w5kshwz 1.2s ease-in-out infinite;
}
.tv-tile.expired[b-269w5kshwz] {
    border-color: var(--adm-bd-94a3b8-a0_4);
    background: linear-gradient(160deg, var(--adm-bggrad-1e293b) 0%, var(--adm-bggrad-0a0a0a) 100%);
    opacity: 0.55;
}

@keyframes tv-glow-amber-b-269w5kshwz {
    0%, 100% { box-shadow: 0 0 0 0 var(--adm-sh-f59e0b-a0_4); }
    50% { box-shadow: 0 0 24px 4px var(--adm-sh-f59e0b-a0_4); }
}

@keyframes tv-glow-red-b-269w5kshwz {
    0%, 100% { box-shadow: 0 0 0 0 var(--adm-sh-ef4444-a0_5); }
    50% { box-shadow: 0 0 32px 6px var(--adm-sh-ef4444-a0_5); }
}

.tv-tile-top[b-269w5kshwz] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.tv-label[b-269w5kshwz] {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 900;
    color: var(--adm-fg-f1f5f9);
    letter-spacing: -0.02em;
    line-height: 1;
}

.tv-status[b-269w5kshwz] {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--adm-fg-94a3b8);
}

.tv-tile.awaiting .tv-status[b-269w5kshwz] { color: var(--adm-fgon-f8f0e3-fbbf24); }
.tv-tile.last-call .tv-status[b-269w5kshwz] { color: var(--adm-fgon-f6e5e5-fca5a5); }
.tv-tile.active .tv-status[b-269w5kshwz] { color: var(--adm-fg-6ee7b7); }
.tv-tile.cooldown .tv-status[b-269w5kshwz] { color: var(--adm-fg-a5b4fc); }

.tv-tile-mid[b-269w5kshwz] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
}

.tv-ring[b-269w5kshwz] {
    position: relative;
    width: 130px;
    height: 130px;
}

.tv-ring svg[b-269w5kshwz] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.tv-ring-bg[b-269w5kshwz] {
    fill: none;
    stroke: var(--adm-fg-94a3b8-a0_15);
    stroke-width: 10;
}

.tv-ring-fg[b-269w5kshwz] {
    fill: none;
    stroke: var(--adm-fg-a5b4fc);
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.tv-ring-text[b-269w5kshwz] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--adm-fg-f1f5f9);
}

.tv-icon-big[b-269w5kshwz] {
    font-size: 4.2rem;
    line-height: 1;
}

/* Replaces the bare ✓ — pairs an icon with a small status label so a
   cook walking past the TV doesn't have to guess what "✓" means. The
   idle variant is desaturated (this state needs no kitchen action);
   awaiting is amber to draw attention. */
.tv-state-block[b-269w5kshwz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.tv-state-block.idle .tv-icon-big[b-269w5kshwz] {
    opacity: 0.55;
}
.tv-state-block.idle .tv-state-text[b-269w5kshwz] {
    color: var(--adm-fg-94a3b8);
}
.tv-state-block.awaiting .tv-icon-big[b-269w5kshwz] {
    animation: tv-bell-shake 1.2s ease-in-out infinite;
}
.tv-state-block.awaiting .tv-state-text[b-269w5kshwz] {
    color: var(--adm-fg-fbbf24);
    font-weight: 700;
}
.tv-state-text[b-269w5kshwz] {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
@@keyframes tv-bell-shake {
    0%[b-269w5kshwz], 100%[b-269w5kshwz] { transform: rotate(0); }
    25%[b-269w5kshwz]      { transform: rotate(-12deg); }
    75%[b-269w5kshwz]      { transform: rotate(12deg); }
}

/* Caption under the cooldown ring countdown — "próx. ronda" so the
   number's role is obvious (otherwise it could read as a wall-clock
   time). */
.tv-ring-caption[b-269w5kshwz] {
    position: absolute;
    bottom: -6px;
    left: 0; right: 0;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--adm-fg-a5b4fc);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tv-tile-bot[b-269w5kshwz] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 0.92rem;
    color: var(--adm-fg-cbd5e1);
    font-weight: 600;
    margin-top: 10px;
}

.tv-mini.warn[b-269w5kshwz] {
    color: var(--adm-fg-fbbf24);
}

.tv-empty[b-269w5kshwz] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    color: var(--adm-fg-94a3b8);
    font-size: 1.2rem;
}

.tv-empty-icon[b-269w5kshwz] {
    font-size: 6rem;
    opacity: 0.6;
}

.tv-empty .muted[b-269w5kshwz] {
    color: var(--adm-fg-64748b);
}

.tv-footer[b-269w5kshwz] {
    flex: 0 0 auto;
    padding: 10px 24px;
    border-top: 1px solid var(--adm-bd-ffffff-a0_05);
    color: var(--adm-fg-475569);
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

/* TV legend strip — explains each state icon so a new cook walking up
   doesn't have to ask what the symbols mean. Subdued by default; the
   awaiting/last-call rows get accent colors that match the tile
   variants above. */
.tv-legend[b-269w5kshwz] {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    color: var(--adm-fg-94a3b8);
    font-size: 0.85rem;
}
.tv-legend-item[b-269w5kshwz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tv-legend-icon[b-269w5kshwz] {
    font-size: 1.05rem;
}
.tv-legend-item.warn[b-269w5kshwz] { color: var(--adm-fg-fbbf24); }
.tv-legend-item.urgent[b-269w5kshwz] { color: var(--adm-fg-fca5a5); }

.tv-help kbd[b-269w5kshwz] {
    background: var(--adm-bg-ffffff-a0_06);
    border: 1px solid var(--adm-bd-ffffff-a0_12);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    color: var(--adm-fgon-ebedf0-94a3b8);
    margin: 0 2px;
}
/* /Pages/Admin/Campaigns.razor.rz.scp.css */
/* Dark theme admin page — Marketing Campaigns */
.campaigns-page[b-yyjujpk7gv] { padding: 24px; max-width: 1200px; margin: 0 auto; color: var(--adm-fg-e2e8f0); }

.page-header[b-yyjujpk7gv] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.page-header h1[b-yyjujpk7gv] { font-size: 1.5rem; margin: 0; color: var(--adm-fg-f1f5f9); }

.message-banner[b-yyjujpk7gv] { padding: 12px 16px; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.message-banner.success[b-yyjujpk7gv] { background: var(--adm-bg-064e3b); color: var(--adm-fgon-d1fae5-6ee7b7); border: 1px solid var(--adm-bdon-d1fae5-065f46); }
.message-banner.error[b-yyjujpk7gv] { background: var(--adm-bg-450a0a); color: var(--adm-fgon-fee2e2-fca5a5); border: 1px solid var(--adm-bdon-fee2e2-7f1d1d); }
.dismiss[b-yyjujpk7gv] { background: none; border: none; color: inherit; font-size: 1.2rem; cursor: pointer; }

.loading-state[b-yyjujpk7gv] { text-align: center; padding: 60px 0; color: var(--adm-fg-64748b); }
.spinner[b-yyjujpk7gv] { width: 32px; height: 32px; border: 3px solid var(--adm-bd-334155); border-top-color: var(--adm-bd-3b82f6); border-radius: 50%; animation: spin-b-yyjujpk7gv 0.8s linear infinite; margin: 0 auto 12px; }
@keyframes spin-b-yyjujpk7gv { to { transform: rotate(360deg); } }

/* Tabs */
.tabs[b-yyjujpk7gv] { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--adm-bd-334155); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tab[b-yyjujpk7gv] {
    padding: 10px 20px; border: none; background: transparent; color: var(--adm-fg-94a3b8); font-size: 0.85rem;
    font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s;
    display: flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap;
}
.tab:hover[b-yyjujpk7gv] { color: var(--adm-fg-e2e8f0); }
.tab.active[b-yyjujpk7gv] { color: var(--adm-fg-3b82f6); border-bottom-color: var(--adm-bd-3b82f6); }
.tab-badge[b-yyjujpk7gv] { font-size: 0.7rem; background: var(--adm-bg-334155); color: var(--adm-fgon-f1f5f9-94a3b8); padding: 2px 6px; border-radius: 10px; }
.tab.active .tab-badge[b-yyjujpk7gv] { background: var(--adm-bg-1e3a5f); color: var(--adm-fgon-eff6ff-60a5fa); }

/* Form */
.input[b-yyjujpk7gv] {
    width: 100%; padding: 10px 12px; min-height: 44px;
    background: var(--adm-bg-0f172a); border: 1px solid var(--adm-bdon-f8fafc-334155); border-radius: 8px;
    color: var(--adm-fgon-f8fafc-e2e8f0); font-size: 0.85rem; box-sizing: border-box;
}
.input:focus[b-yyjujpk7gv] { outline: none; border-color: var(--adm-bdon-f8fafc-3b82f6); box-shadow: 0 0 0 2px var(--adm-sh-3b82f6-a0_2); }
textarea.input[b-yyjujpk7gv] { resize: vertical; min-height: 80px; }

.form-group[b-yyjujpk7gv] { display: flex; flex-direction: column; gap: 4px; }
.form-label[b-yyjujpk7gv] { font-size: 0.75rem; color: var(--adm-fg-94a3b8); font-weight: 600; }

/* Buttons */
.btn[b-yyjujpk7gv] {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 18px; min-height: 44px; border: 1px solid var(--adm-bdon-ffffff-334155); border-radius: 8px;
    font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.15s;
    background: var(--adm-bg-1e293b); color: var(--adm-fgon-ffffff-e2e8f0); white-space: nowrap;
}
.btn:hover[b-yyjujpk7gv] { background: var(--adm-bghov-ffffff-334155); }
.btn:active[b-yyjujpk7gv] { transform: scale(0.97); }
.btn:disabled[b-yyjujpk7gv] { opacity: 0.5; cursor: not-allowed; }
.btn-primary[b-yyjujpk7gv] { background: #2563eb; color: #fff; border-color: #1e4fcb; }
.btn-primary:hover[b-yyjujpk7gv] { background: #1d4ed8; }
.btn-ghost[b-yyjujpk7gv] { background: transparent; border-color: var(--adm-bd-475569); color: var(--adm-fg-94a3b8); }
.btn-ghost:hover[b-yyjujpk7gv] { border-color: var(--adm-bd-3b82f6); color: var(--adm-fg-e2e8f0); }
.btn-sm[b-yyjujpk7gv] { padding: 6px 10px; min-height: 32px; font-size: 0.75rem; }
.btn-danger[b-yyjujpk7gv] { color: var(--adm-fg-fca5a5); border-color: var(--adm-bd-7f1d1d); }
.btn-danger:hover[b-yyjujpk7gv] { background: var(--adm-bg-450a0a); }

/* Campaign cards */
.campaign-card[b-yyjujpk7gv] {
    background: var(--adm-bg-1e293b); border: 1px solid var(--adm-bdon-ffffff-334155); border-radius: 10px;
    padding: 16px; transition: border-color 0.15s;
}
.campaign-card:hover[b-yyjujpk7gv] { border-color: var(--adm-bdon-ffffff-475569); }
.campaign-card.inactive[b-yyjujpk7gv] { opacity: 0.6; }

.type-badge[b-yyjujpk7gv] {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    padding: 3px 8px; border-radius: 4px;
}
.type-win_back[b-yyjujpk7gv] { background: var(--adm-bg-78350f); color: var(--adm-fgon-fef3c7-fbbf24); }
.type-birthday[b-yyjujpk7gv] { background: var(--adm-bg-3b1f4a); color: var(--adm-fgon-eedff6-c084fc); }
.type-post_visit[b-yyjujpk7gv] { background: var(--adm-bg-365314); color: var(--adm-fgon-ecf7de-86efac); }
.type-welcome[b-yyjujpk7gv] { background: var(--adm-bg-1e3a5f); color: var(--adm-fgon-eff6ff-60a5fa); }
.type-announcement[b-yyjujpk7gv] { background: var(--adm-bg-1e293b); color: var(--adm-fgon-ffffff-94a3b8); border: 1px solid var(--adm-bdon-ffffff-475569); }

.channel-badge[b-yyjujpk7gv] {
    font-size: 0.65rem; font-weight: 600; padding: 2px 6px; border-radius: 4px;
    text-transform: uppercase;
}
.channel-email[b-yyjujpk7gv] { background: var(--adm-bg-1e3a5f); color: var(--adm-fgon-eff6ff-60a5fa); }
.channel-sms[b-yyjujpk7gv] { background: var(--adm-bg-365314); color: var(--adm-fgon-ecf7de-86efac); }

.status-dot[b-yyjujpk7gv] {
    width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.status-dot.active[b-yyjujpk7gv] { background: #22c55e; }
.status-dot.paused[b-yyjujpk7gv] { background: var(--adm-bg-64748b); }

/* Stat cards */
.stat-card[b-yyjujpk7gv] {
    background: var(--adm-bg-0f172a); border: 1px solid var(--adm-bdon-f8fafc-334155); border-radius: 10px;
    padding: 14px 16px; text-align: center;
}
.stat-value[b-yyjujpk7gv] { font-size: 1.25rem; font-weight: 700; color: var(--adm-fg-f1f5f9); }
.stat-label[b-yyjujpk7gv] { font-size: 0.7rem; color: var(--adm-fg-64748b); margin-top: 2px; }

/* Data table */
.data-table[b-yyjujpk7gv] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.data-table thead tr[b-yyjujpk7gv] { color: var(--adm-fg-94a3b8); border-bottom: 1px solid var(--adm-bd-334155); }
.data-table th[b-yyjujpk7gv] { text-align: left; padding: 8px 12px; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; }
.data-table td[b-yyjujpk7gv] { padding: 10px 12px; border-bottom: 1px solid var(--adm-bd-1e293b); }
.data-table tbody tr[b-yyjujpk7gv] { transition: background 0.1s; }
.data-table tbody tr:hover[b-yyjujpk7gv] { background: var(--adm-bg-1e293b); }

/* Empty state */
.empty-state[b-yyjujpk7gv] { text-align: center; padding: 60px 0; color: var(--adm-fg-64748b); }

/* Premium section */
.premium-section[b-yyjujpk7gv] { background: var(--adm-bg-1e293b); border-radius: 12px; padding: 24px; }

/* Placeholder pills — click to insert a {token}. Were ~56×21 (fiddly on a
   touch tablet); lift to a 44px touch target with inline-flex centering. */
.placeholder-pill[b-yyjujpk7gv] {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 6px 12px; border-radius: 8px;
    background: var(--adm-bg-334155); color: var(--adm-fgon-f1f5f9-cbd5e1); font-size: 0.8rem; font-family: monospace;
    cursor: pointer; transition: background 0.15s;
}
.placeholder-pill:hover[b-yyjujpk7gv] { background: var(--adm-bghov-f1f5f9-475569); color: var(--adm-fgon-e1e6eb-e2e8f0); }

/* "Envios por dia" chart is an inline flex row of one column per day (up to 90
   with the 90d period). Each column is `flex:1` but its min-content width is the
   dd/MM label, so 30+ days blow past the panel on a phone (and past a portrait
   tablet too). Let the row scroll instead, and keep each column wide enough for
   its label. Scroll only engages when the columns don't fit, so a short 7d chart
   still spreads out normally. */
@media (max-width: 1024px) {
    .day-chart[b-yyjujpk7gv] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
    .day-chart > div[b-yyjujpk7gv] { min-width: 28px; }
}

@media (max-width: 768px) {
    .campaigns-page[b-yyjujpk7gv] { padding: 12px; }

    /* Campaign card: the header row puts the text block next to SIX nowrap action
       buttons (Vista previa / Enviar / Pausar / Editar / Historial / Eliminar) in
       a `flex-shrink:0` group — ~450px of buttons that refuse to shrink, so they
       run off the right edge. Stack the row and let the button group wrap. */
    .campaign-card > div[b-yyjujpk7gv] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .campaign-card > div > div:last-child[b-yyjujpk7gv] { flex-wrap: wrap; }

    /* Title row (name + badges) and the meta row (Enviados / Trigger / Cooldown /
       Segmento / Ultimo envio) are single-line flex rows: allow both to wrap. */
    .campaign-card > div > div:first-child > div[b-yyjujpk7gv] {
        flex-wrap: wrap;
        min-width: 0;
    }

    /* A long single-word campaign name has no break opportunity. */
    .campaign-card h3[b-yyjujpk7gv] { overflow-wrap: anywhere; }
}

/* iPhone ~390px: the "Nueva campana" form rows are laid out with inline
   `display:grid;grid-template-columns:1fr 1fr` / `1fr 1fr 1fr` (e.g. Canal |
   Dias de inactividad | Enfriamiento). On a narrow phone the right-hand
   field(s) overflow past the screen edge. Collapse every multi-column form
   row to a single column and hard-cap field widths so nothing overflows.
   Additive, scoped, phone-only. The inline grid-template-columns needs
   !important to be overridden. */
@media (max-width: 600px) {
    .campaigns-page .premium-section > div[style*="1fr 1fr"][b-yyjujpk7gv] {
        grid-template-columns: 1fr !important;
    }

    /* Inputs/selects/textareas must never push past the viewport. */
    .campaigns-page .input[b-yyjujpk7gv] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Defensive: any grid cell shouldn't impose its own min-content width. */
    .campaigns-page .form-group[b-yyjujpk7gv] { min-width: 0; }

    /* 24px of panel padding on top of the page + shell padding leaves under 300px
       of usable width for the form and the tables. Claw some back. */
    .premium-section[b-yyjujpk7gv] { padding: 16px; }
}

/* ── Premium pass (19 Oct): what campaigns are, a clear on/off state, and five templates to start from. ── */
.cmp-head[b-yyjujpk7gv] { align-items: flex-start; gap: 16px; }
.cmp-head-text[b-yyjujpk7gv] { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cmp-head-text h1[b-yyjujpk7gv] { margin: 0; }
.cmp-sub[b-yyjujpk7gv] { margin: 0; max-width: 760px; font-size: .92rem; line-height: 1.45; color: var(--adm-fg-94a3b8); }
.cmp-field-hint[b-yyjujpk7gv] { margin-top: 6px; font-size: .8rem; line-height: 1.4; color: var(--adm-fg-94a3b8); }
.status-text[b-yyjujpk7gv] { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.status-text.on[b-yyjujpk7gv] { background: #dcfce7; color: #166534; }
.status-text.off[b-yyjujpk7gv] { background: #f1f5f9; color: #475569; }
.cmp-failed[b-yyjujpk7gv] { color: var(--adm-fg-fca5a5); }
.cmp-empty[b-yyjujpk7gv] { text-align: center; padding: 28px 8px 8px; }
.cmp-empty h2[b-yyjujpk7gv] { margin: 0 0 6px; font-size: 1.25rem; color: var(--adm-fg-f1f5f9); }
.cmp-empty > p[b-yyjujpk7gv] { margin: 0 auto 22px; max-width: 560px; color: var(--adm-fg-94a3b8); line-height: 1.5; }
.cmp-templates[b-yyjujpk7gv] { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; text-align: left; }
.cmp-template[b-yyjujpk7gv] {
    display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 14px;
    border: 1px solid var(--adm-bd-334155); background: var(--adm-bg-1e293b);
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.cmp-template:hover[b-yyjujpk7gv] { border-color: #3b82f6; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 23, 42, .12); }
.cmp-template-icon[b-yyjujpk7gv] { font-size: 1.6rem; }
.cmp-template h3[b-yyjujpk7gv] { margin: 0; font-size: 1rem; color: var(--adm-fg-f1f5f9); }
.cmp-template p[b-yyjujpk7gv] { margin: 0; flex: 1; font-size: .84rem; line-height: 1.45; color: var(--adm-fg-94a3b8); }
.cmp-template .btn[b-yyjujpk7gv] { align-self: flex-start; }
:root[data-theme="dark"] .status-text.on[b-yyjujpk7gv] { background: rgba(34, 197, 94, .18); color: #86efac; }
:root[data-theme="dark"] .status-text.off[b-yyjujpk7gv] { background: rgba(148, 163, 184, .18); color: #cbd5e1; }
@media (max-width: 640px) { .cmp-head[b-yyjujpk7gv] { flex-direction: column; } }
/* /Pages/Admin/Catalog.razor.rz.scp.css */
/* ============================================
   CATALOG.RAZOR STYLES - Phases 1-8
   ============================================ */

/* ============================================
   Phase 1: Category Panel Improvements
   ============================================ */
[b-6m0wrct77r] .cat-panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

[b-6m0wrct77r] .cat-panel-header {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[b-6m0wrct77r] .cat-panel-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

[b-6m0wrct77r] .cat-panel-header h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--adm-fgon-f1f5f9-334155);
}

[b-6m0wrct77r] .cat-all-btn {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--adm-fg-64748b);
    background: transparent;
    border: 1px solid var(--adm-bd-e2e8f0);
    border-radius: 4px;
    cursor: pointer;
    transition: all .15s;
}

[b-6m0wrct77r] .cat-all-btn:hover {
    background: #f1f5f9;
    color: #334155;
}

[b-6m0wrct77r] .cat-all-btn.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}

[b-6m0wrct77r] .cat-search-row {
    display: flex;
    gap: 6px;
    align-items: stretch;
}

[b-6m0wrct77r] .cat-search {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 12px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

[b-6m0wrct77r] .cat-search:focus {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-3b82f6);
    box-shadow: 0 0 0 3px var(--adm-sh-3b82f6-a0_1);
}

[b-6m0wrct77r] .cat-archive-toggle,
[b-6m0wrct77r] .cat-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
}

[b-6m0wrct77r] .cat-archive-toggle:hover,
[b-6m0wrct77r] .cat-add-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

[b-6m0wrct77r] .cat-archive-toggle.active {
    background: #fef3c7;
    border-color: #f59e0b;
}

[b-6m0wrct77r] .cat-add-btn {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
}

[b-6m0wrct77r] .cat-add-btn:hover {
    background: #2563eb;
    border-color: #2563eb;
}

[b-6m0wrct77r] .cat-list {
    max-height: 400px;
    overflow-y: auto;
}

/* Two-row card: row 1 (.cat-item-top) = drag handle + name/count +
   active toggle; row 2 (.cat-item-controls) = zone/QR/edit/archive,
   always its own row so they align across every category. */
[b-6m0wrct77r] .cat-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--adm-bd-f8fafc);
    cursor: pointer;
    transition: background .1s, transform .15s, box-shadow .15s;
}

[b-6m0wrct77r] .cat-item-top {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* Active toggle pinned to the far right of row 1. */
[b-6m0wrct77r] .cat-item-top .cat-active-toggle {
    margin-left: auto;
    flex-shrink: 0;
}

[b-6m0wrct77r] .cat-item.dragging {
    opacity: 0.5;
    background: #f8fafc;
}

[b-6m0wrct77r] .cat-item.drop-target {
    background: #eff6ff;
    border-top: 2px solid #3b82f6;
}

[b-6m0wrct77r] .cat-item:hover {
    background: #f8fafc;
}

[b-6m0wrct77r] .cat-item.active {
    background: #eff6ff;
    border-left: 3px solid #3b82f6;
}

[b-6m0wrct77r] .cat-drag-handle {
    cursor: grab;
    color: var(--adm-fg-94a3b8);
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background .15s, color .15s;
}

[b-6m0wrct77r] .cat-drag-handle:hover {
    background: #e2e8f0;
    color: #475569;
}

[b-6m0wrct77r] .cat-drag-handle:active {
    cursor: grabbing;
}

[b-6m0wrct77r] .cat-thumb {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid var(--adm-bd-e2e8f0);
    flex-shrink: 0;
}

[b-6m0wrct77r] .cat-item-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--adm-fg-334155);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* No max-width - let flex container handle it */
}

/* Placeholder name "Sin nombre" — paint amber + italic so it visibly
   reads as "this needs renaming" rather than as a legitimate menu
   label. Once the operator commits a real name the class is removed
   and the regular slate text returns. Codex audit flagged "Nueva
   categoría" as the kind of thing an operator might ship live to
   customers without realising it was a default placeholder. */
[b-6m0wrct77r] .cat-item-name.unnamed {
    color: var(--adm-fg-b45309); /* amber-700 — same family as the .zone-pill.no-zone "Sin impresora" pill */
    font-style: italic;
    font-weight: 600;
}

[b-6m0wrct77r] .cat-name-edit-backdrop {
    position: fixed;
    inset: 0;
    z-index: 98;
    background: transparent;
}

/* Premium iOS-style toggle for the category active flag. Replaces the
   bare HTML checkbox (which read as "selected for an action" rather
   than "visible to customers"). Hidden during inline-rename — operator
   is naming the category, not configuring it. */
[b-6m0wrct77r] .cat-active-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
    user-select: none;
}

[b-6m0wrct77r] .cat-active-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

[b-6m0wrct77r] .cat-active-track {
    width: 36px;
    height: 20px;
    background: #cbd5e1;
    border-radius: 999px;
    transition: background-color 0.18s ease;
    position: relative;
    display: inline-block;
}

[b-6m0wrct77r] .cat-active-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.18s ease;
}

[b-6m0wrct77r] .cat-active-toggle input:checked + .cat-active-track {
    background: #10b981;
}

[b-6m0wrct77r] .cat-active-toggle input:checked + .cat-active-track .cat-active-knob {
    transform: translateX(16px);
}

[b-6m0wrct77r] .cat-active-toggle input:disabled + .cat-active-track {
    opacity: 0.5;
    cursor: not-allowed;
}

[b-6m0wrct77r] .cat-active-toggle:hover input:not(:disabled) + .cat-active-track {
    box-shadow: 0 0 0 4px var(--adm-sh-10b981-a0_12);
}

/* Input + action buttons must stack ABOVE the fullscreen backdrop or
   clicks "inside the input" hit the backdrop instead and immediately
   commit the (empty) buffer — same bug bit both editing existing
   categories AND naming a freshly-created one. position:relative makes
   z-index take effect; 99 > backdrop's 98. */
[b-6m0wrct77r] .cat-name-input {
    position: relative;
    z-index: 99;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    padding: 8px 12px;
    border: 2px solid #3b82f6;
    border-radius: 8px;
    outline: none;
    width: 100%;
    max-width: 180px;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(59,130,246,.15), 0 4px 12px rgba(0,0,0,.1);
    transition: all .15s;
}

[b-6m0wrct77r] .cat-edit-actions {
    position: relative;
    z-index: 99;
}

[b-6m0wrct77r] .cat-name-input:focus {
    border-color: var(--adm-bdon-f8fafc-2563eb);
    box-shadow: 0 0 0 4px var(--adm-sh-2563eb-a0_2), 0 4px 16px var(--adm-sh-000000-a0_12);
}

/* When editing category name, expand info area */
[b-6m0wrct77r] .cat-item-info.editing {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 100;
}

[b-6m0wrct77r] .cat-edit-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

[b-6m0wrct77r] .cat-edit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    transition: all .15s;
}

[b-6m0wrct77r] .cat-edit-btn.save {
    background: #22c55e;
    color: #fff;
}

[b-6m0wrct77r] .cat-edit-btn.save:hover {
    background: #16a34a;
}

[b-6m0wrct77r] .cat-edit-btn.cancel {
    background: #f1f5f9;
    color: #64748b;
}

[b-6m0wrct77r] .cat-edit-btn.cancel:hover {
    background: #e2e8f0;
    color: #334155;
}

[b-6m0wrct77r] .cat-item-count {
    font-size: 11px;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 10px;
}

[b-6m0wrct77r] .cat-item-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .15s;
}

[b-6m0wrct77r] .cat-item:hover .cat-item-actions,
[b-6m0wrct77r] .cat-item:focus-within .cat-item-actions {
    opacity: 1;
}

[b-6m0wrct77r] .cat-item-btn {
    min-width: 40px;
    min-height: 40px;
    padding: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .1s, transform .1s;
}

[b-6m0wrct77r] .cat-item-btn:hover {
    background: #e2e8f0;
}

[b-6m0wrct77r] .cat-item-btn:active {
    background: #cbd5e1;
    transform: scale(0.92);
}

/* Touch-capable devices: always show category actions. any-pointer:coarse
   is true whenever ANY input is a touchscreen — so it also catches
   touchscreen + mouse hybrid POS terminals, which a primary-pointer query
   (pointer:coarse) misses because their primary pointer reports as fine. */
@media (any-pointer: coarse) {
    [b-6m0wrct77r] .cat-item-actions {
        opacity: 1;
    }
    [b-6m0wrct77r] .cat-item-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Category item info (name + count) */
[b-6m0wrct77r] .cat-item-info {
    /* Controls now live on their own row, so the name no longer competes
       for horizontal space — it can take the full top row width. */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Wrapper for the right-side controls (zone pill, QR toggle, edit/archive
   actions). Pre-fix these were three siblings of cat-item-info competing
   for space on the same row — on the 380px-wide cat panel that pushed
   the category name to a single ellipsis-truncated letter (E…, T…, C…).
   Wrapping them lets flex-wrap break the whole control group to a new
   line as a unit when there isn't room beside the name. */
[b-6m0wrct77r] .cat-item-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    /* Indent so row 2 reads as a sub-row of the card, and aligns to the
       category name (past the drag handle) rather than the panel edge. */
    padding-left: 26px;
}

/* Edit/archive pushed to the right edge of the controls row; zone/QR
   stay left-aligned and therefore line up across every category. */
[b-6m0wrct77r] .cat-item-controls .cat-item-actions {
    margin-left: auto;
}

[b-6m0wrct77r] .cat-item-count {
    font-size: 11px;
    color: var(--adm-fgon-f1f5f9-94a3b8);
    background: transparent;
    padding: 0;
}

/* Zone pill/dropdown */
[b-6m0wrct77r] .cat-item-zone {
    position: relative;
}

[b-6m0wrct77r] .zone-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #f8fafc;
    font-size: 12px;
    color: #64748b;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}

/* Shown, not changeable: a login without menu-edit rights (Catalog.razor _canEditMenu). */
[b-6m0wrct77r] .zone-pill.zone-pill--readonly {
    cursor: default;
}

[b-6m0wrct77r] .zone-pill:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

[b-6m0wrct77r] .zone-pill.has-zone {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}

[b-6m0wrct77r] .zone-pill.no-zone {
    background: #fef3c7;
    border-color: #fcd34d;
    color: #92400e;
}

[b-6m0wrct77r] .zone-pill.no-zone:hover {
    background: #fde68a;
}

[b-6m0wrct77r] .zone-icon {
    font-size: 14px;
    flex-shrink: 0;
}

[b-6m0wrct77r] .zone-label {
    /* Text label next to the printer icon. Truncates with ellipsis on
       narrow rows so a long zone name like "Cocina principal" doesn't
       blow out the category row layout. The full name still shows in
       the title tooltip. */
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
    font-weight: 600;
}

[b-6m0wrct77r] .zone-hint {
    font-size: 10px;
    font-weight: 700;
    color: var(--adm-fg-d97706);
    margin-left: -2px;
}

[b-6m0wrct77r] .zone-dropdown-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: transparent;
}

/* QR toggle button for categories */
[b-6m0wrct77r] .qr-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
    position: relative;
}

[b-6m0wrct77r] .qr-toggle-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

/* ON state - clearly visible, bright green with glow */
[b-6m0wrct77r] .qr-toggle-btn.on {
    background: linear-gradient(135deg, #bbf7d0 0%, #86efac 100%);
    border-color: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

[b-6m0wrct77r] .qr-toggle-btn.on:hover {
    background: linear-gradient(135deg, #86efac 0%, #4ade80 100%);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
}

/* OFF state - grayed out with strike-through indicator */
[b-6m0wrct77r] .qr-toggle-btn.off {
    background: #f1f5f9;
    border-color: #cbd5e1;
    opacity: 0.6;
}

[b-6m0wrct77r] .qr-toggle-btn.off::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 2px;
    background: #ef4444;
    transform: rotate(-45deg);
    border-radius: 1px;
}

[b-6m0wrct77r] .qr-toggle-btn.off:hover {
    background: #e2e8f0;
    opacity: 0.8;
}

[b-6m0wrct77r] .qr-toggle-btn .qr-icon {
    /* "QR" text instead of the previous 📱 phone emoji — Codex audit
       feedback: emoji didn't communicate "QR menu visibility" without
       a tooltip. Bold uppercase "QR" reads at a glance. Letter-spacing
       slightly negative so the two characters read as a tight badge,
       not two letters that happen to be adjacent.
       Pure black for highest contrast — dark green on light green was
       readable at desktop zoom but blurred to "just a green chip" at
       the small 28×11px chip size on a dark page canvas. */
    font-size: 11px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--adm-fgon-f1f5f9-0f172a);
}

[b-6m0wrct77r] .qr-toggle-btn.off .qr-icon {
    /* Muted slate for OFF state so the strikeline overlay (::after) is
       the dominant visual cue rather than the text itself. */
    color: var(--adm-fgon-f1f5f9-64748b);
}

/* Drinks/extras (buffet) toggle uses a cyan accent so it doesn't
   visually clash with the green QR-on / slate-off pattern. ON = the
   category is treated as à-la-carte extras when buffet's
   DrinksIncluded=false. OFF = a regular kitchen category. */
[b-6m0wrct77r] .qr-toggle-btn.drinks.on {
    background: #cffafe;
    border-color: #67e8f9;
}

[b-6m0wrct77r] .qr-toggle-btn.drinks.on:hover {
    background: #a5f3fc;
}

[b-6m0wrct77r] .qr-toggle-btn.drinks .qr-icon {
    color: var(--adm-fg-0e7490);
}

[b-6m0wrct77r] .qr-toggle-btn.drinks.off .qr-icon {
    color: var(--adm-fg-94a3b8);
}

[b-6m0wrct77r] .zone-dropdown {
    /* Fixed (not absolute) so it escapes the .cat-list overflow:auto scroll
       container — otherwise the printer-route list is clipped and appears
       to slide under the next section. left/top are set inline from the
       pill's getBoundingClientRect (see ToggleZoneDropdown). */
    position: fixed;
    min-width: 180px;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 -4px 12px rgba(0,0,0,.1);
    z-index: 100;
    padding: 4px 0;
}

[b-6m0wrct77r] .zone-dropdown-header {
    padding: 6px 12px 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--adm-fg-94a3b8);
    border-bottom: 1px solid var(--adm-bd-e2e8f0);
    margin-bottom: 4px;
}

[b-6m0wrct77r] .zone-option {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 12px;
    color: var(--adm-fg-334155);
    cursor: pointer;
    transition: background .1s;
}

[b-6m0wrct77r] .zone-option:hover {
    background: #f1f5f9;
}

[b-6m0wrct77r] .zone-option.selected {
    background: #eff6ff;
    color: #1e40af;
    font-weight: 500;
}

/* Actions dropdown */
[b-6m0wrct77r] .actions-dropdown-wrap {
    position: relative;
}

[b-6m0wrct77r] .actions-dropdown-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: transparent;
}

[b-6m0wrct77r] .actions-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 180px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    z-index: 100;
    padding: 4px 0;
}

[b-6m0wrct77r] .actions-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 13px;
    color: var(--adm-fg-334155);
    cursor: pointer;
    transition: background .15s;
    text-decoration: none;
}

[b-6m0wrct77r] .actions-dropdown-item:hover {
    background: #f1f5f9;
}

/* ============================================
   Phase 2: Toolbar & Quick Filters
   ============================================ */
[b-6m0wrct77r] .catalog-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

[b-6m0wrct77r] .toolbar-search {
    flex: 1 1 200px;
    min-width: 0;
    position: relative;
}

[b-6m0wrct77r] .toolbar-search input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border: 1px solid var(--adm-bdon-f8fafc-e2e8f0);
    border-radius: 8px;
    font-size: 14px;
    transition: border-color .15s, box-shadow .15s;
}

[b-6m0wrct77r] .toolbar-search input:focus {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-3b82f6);
    box-shadow: 0 0 0 3px var(--adm-sh-3b82f6-a0_1);
}

[b-6m0wrct77r] .toolbar-search::before {
    content: "🔍";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    opacity: .5;
}

[b-6m0wrct77r] .search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: none;
    background: #e2e8f0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}

[b-6m0wrct77r] .search-clear:hover {
    background: #cbd5e1;
    color: #334155;
}

[b-6m0wrct77r] .search-clear:active {
    transform: translateY(-50%) scale(0.95);
    background: #94a3b8;
}

/* Adjust input padding when clear button is visible */
[b-6m0wrct77r] .toolbar-search input {
    padding-right: 52px;
}

/* Filter bar - grouped filters */
/* Collapsible filters: a quiet header chip that hides the filter bar
   (and advanced panel) so the items grid isn't pushed down. Dashed
   border + blue dot when collapsed-with-active-filters so the operator
   knows filtering is still in effect even though the chips are hidden. */
[b-6m0wrct77r] .filters-collapse-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid var(--adm-bd-30363d);
    border-radius: 8px;
    color: var(--adm-fg-8b949e);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}

[b-6m0wrct77r] .filters-collapse-toggle:hover {
    background: var(--adm-bg-21262d);
    color: var(--adm-fgon-f1f5f9-e6edf3);
    border-color: var(--adm-bdon-f1f5f9-484f58);
}

[b-6m0wrct77r] .filters-collapse-toggle .fct-chevron {
    font-size: 10px;
    line-height: 1;
}

[b-6m0wrct77r] .filters-collapse-toggle.collapsed {
    border-style: dashed;
}

[b-6m0wrct77r] .filters-collapse-toggle .fct-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #58a6ff;
    display: inline-block;
}

[b-6m0wrct77r] .filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    flex: 0 1 auto;
    max-width: fit-content;
}

[b-6m0wrct77r] .filter-bar-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--adm-fg-64748b);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

[b-6m0wrct77r] .filter-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #3b82f6;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 8px;
}

[b-6m0wrct77r] .filter-bar-chips {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

[b-6m0wrct77r] .filter-divider {
    width: 1px;
    height: 16px;
    background: #cbd5e1;
    flex-shrink: 0;
}

/* Make filter chips more compact */
/* 32px is a deliberate desktop density for the filter bar, but it is below the 44px
   touch floor — and it beats the global rule in admin-mobile.css on specificity
   ((0,3,0) vs (0,1,1)), so it has to be raised here. See the phone override below. */
[b-6m0wrct77r] .filter-bar .filter-chip {
    padding: 6px 10px;
    min-height: 32px;
    font-size: 12px;
    border-radius: 16px;
}

[b-6m0wrct77r] .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    min-height: 44px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    font-size: 13px;
    color: #475569;
    cursor: pointer;
    transition: all .15s;
    user-select: none;
}

[b-6m0wrct77r] .filter-chip:hover {
    background: #e2e8f0;
}

[b-6m0wrct77r] .filter-chip:active {
    background: #cbd5e1;
    transform: scale(0.97);
}

[b-6m0wrct77r] .filter-chip.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}

[b-6m0wrct77r] .filter-chip.active:active {
    background: #2563eb;
}

[b-6m0wrct77r] .filter-chip input {
    display: none;
}

[b-6m0wrct77r] .toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

[b-6m0wrct77r] .toolbar-btn {
    padding: 10px 16px;
    min-height: 44px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #1e293b;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

[b-6m0wrct77r] .toolbar-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

[b-6m0wrct77r] .toolbar-btn:active {
    background: #e2e8f0;
    transform: scale(0.97);
}

[b-6m0wrct77r] .toolbar-btn.primary {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}

[b-6m0wrct77r] .toolbar-btn.primary:hover {
    background: #2563eb;
}

[b-6m0wrct77r] .toolbar-btn.primary:active {
    background: #1d4ed8;
    transform: scale(0.97);
}

/* Preset group - keeps dropdown and buttons together when toolbar wraps */
[b-6m0wrct77r] .preset-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ============================================
   Phase 3: Table Styling
   ============================================ */
[b-6m0wrct77r] .items-table-wrap {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: auto;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    position: relative;
    max-height: calc(100vh - 320px);
}

[b-6m0wrct77r] .items-table-wrap.loading {
    pointer-events: none;
}

[b-6m0wrct77r] .items-table-wrap.loading tbody {
    opacity: 0.5;
}

[b-6m0wrct77r] .datagrid {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

[b-6m0wrct77r] .datagrid thead {
    background: #f8fafc;
    position: sticky;
    top: 0;
    z-index: 2;
}

[b-6m0wrct77r] .datagrid thead::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: #e2e8f0;
}

[b-6m0wrct77r] .datagrid th {
    padding: 12px 14px;
    text-align: left;
    font-weight: 600;
    color: var(--adm-fgon-f1f5f9-475569);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .025em;
    border-bottom: 1px solid var(--adm-bdon-f1f5f9-e2e8f0);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background .1s;
}

[b-6m0wrct77r] .datagrid th:hover {
    background: #f1f5f9;
}

[b-6m0wrct77r] .datagrid th.sortable::after {
    content: "↕";
    margin-left: 4px;
    opacity: .3;
}

[b-6m0wrct77r] .datagrid th.sorted-asc::after {
    content: "▲";
    opacity: 1;
}

[b-6m0wrct77r] .datagrid th.sorted-desc::after {
    content: "▼";
    opacity: 1;
}

[b-6m0wrct77r] .datagrid tbody tr {
    border-bottom: 1px solid var(--adm-bdon-ffffff-f1f5f9);
    transition: background .1s;
}

[b-6m0wrct77r] .datagrid tbody tr:hover {
    background: #f8fafc;
}

[b-6m0wrct77r] .datagrid tbody tr.selected {
    background: #eff6ff;
}

[b-6m0wrct77r] .datagrid td {
    padding: 10px 14px;
    vertical-align: middle;
    color: var(--adm-fgon-ffffff-1e293b);
}

[b-6m0wrct77r] .datagrid td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

[b-6m0wrct77r] .datagrid td.center {
    text-align: center;
}

/* Status column headers with icon + label */
[b-6m0wrct77r] .datagrid th.status-col {
    width: 72px;
    min-width: 72px;
    max-width: 72px;
    padding: 8px 8px !important;
    text-align: center;
    vertical-align: middle;
}

[b-6m0wrct77r] .datagrid th .col-icon {
    display: block;
    font-size: 15px;
    line-height: 1;
    margin-bottom: 3px;
    opacity: 0.8;
}

[b-6m0wrct77r] .datagrid th .col-label {
    display: block;
    font-size: 9px;
    font-weight: 600;
    color: var(--adm-fgon-f1f5f9-94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Toggle cell - entire cell is clickable */
[b-6m0wrct77r] .datagrid td.toggle-cell {
    width: 72px;
    min-width: 72px;
    max-width: 72px;
    padding: 10px 8px !important;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
}

[b-6m0wrct77r] .datagrid td.toggle-cell:hover {
    background: var(--adm-bg-3b82f6-a0_04);
}

[b-6m0wrct77r] .datagrid td.toggle-cell.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

[b-6m0wrct77r] .datagrid td.toggle-cell.disabled:hover {
    background: transparent;
}

/* Pill toggle - iOS style switch (larger for touch) */
[b-6m0wrct77r] .pill-toggle {
    display: inline-flex;
    align-items: center;
    width: 40px;
    height: 22px;
    background: #d1d5db;
    border-radius: 11px;
    padding: 2px;
    transition: background .2s ease;
    cursor: pointer;
}

[b-6m0wrct77r] .pill-toggle .pill-knob {
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
    transition: transform .2s ease;
}

[b-6m0wrct77r] .pill-toggle.on {
    background: #22c55e;
}

[b-6m0wrct77r] .pill-toggle.on .pill-knob {
    transform: translateX(18px);
}

[b-6m0wrct77r] .pill-toggle.warning.on {
    background: #eab308;
}

[b-6m0wrct77r] .pill-toggle.disabled {
    cursor: not-allowed;
    background: #e5e7eb;
}

/* De-emphasize "off" toggles in light theme */
[b-6m0wrct77r] .pill-toggle:not(.on) {
    opacity: 0.65;
}

[b-6m0wrct77r] .datagrid td.toggle-cell:hover .pill-toggle:not(.on) {
    opacity: 1;
}

[b-6m0wrct77r] .datagrid td.toggle-cell:hover .pill-toggle:not(.disabled) {
    filter: brightness(0.97);
}

[b-6m0wrct77r] .datagrid .cell-img {
    width: 60px;
    padding: 6px !important;
}

/* Image upload label wrapper */
[b-6m0wrct77r] .img-upload-label {
    display: block;
    position: relative;
    width: 48px;
    height: 48px;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
}

[b-6m0wrct77r] .img-upload-label:hover .img-upload-overlay {
    opacity: 1;
}

[b-6m0wrct77r] .item-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--adm-bd-e2e8f0);
    transition: filter .15s;
}

[b-6m0wrct77r] .img-upload-label:hover .item-thumb {
    filter: brightness(0.7);
}

[b-6m0wrct77r] .img-upload-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--adm-scrim-000000-a0_4);
    color: var(--adm-fg-ffffff);
    font-size: 18px;
    opacity: 0;
    transition: opacity .15s;
    border-radius: 8px;
}

/* Image placeholder for items without image */
[b-6m0wrct77r] .img-placeholder {
    width: 48px;
    height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    color: #94a3b8;
    transition: all .15s;
}

[b-6m0wrct77r] .img-placeholder span {
    font-size: 16px;
}

[b-6m0wrct77r] .img-placeholder small {
    font-size: 9px;
    margin-top: 2px;
    font-weight: 600;
}

[b-6m0wrct77r] .img-upload-label:hover .img-placeholder {
    background: #e2e8f0;
    border-color: #94a3b8;
    color: #64748b;
}

/* Empty-state placeholder: indigo accent so operators recognize it as
   an actionable invite, not a "no image available" status icon. The
   default slate-on-slate styling read as an inert badge in user
   testing — operators ignored the cell and shipped image-less items
   to QR menus and POS. Indigo border + faint indigo wash + bolder
   icon surfaces it as a real CTA without being loud. */
[b-6m0wrct77r] .img-upload-label.empty .img-placeholder {
    background: var(--adm-bg-6366f1-a0_06);
    border-color: var(--adm-bd-6366f1-a0_45);
    color: var(--adm-fgon-eff1fb-a5b4fc);
}

[b-6m0wrct77r] .img-upload-label.empty .img-placeholder span {
    font-size: 18px;
}

[b-6m0wrct77r] .img-upload-label.empty:hover .img-placeholder {
    background: var(--adm-bg-6366f1-a0_14);
    border-color: var(--adm-bdon-e3e5fa-a5b4fc);
    color: var(--adm-fgon-e3e5fa-4338ca);
    transform: scale(1.04);
}

/* Quick-add inline row — only renders in IsSimplified mode (sheet
   contexts: wizard step 3, POS empty-state, etc.). Three inputs +
   button on a single horizontal line; on small screens it wraps so
   each control gets full width. Press Enter on Name or Price to
   submit; the button is the explicit submit control for mouse users.
   Dark indigo accent keeps it visually grouped with the rest of the
   "primary action" surfaces in the page (Nuevo artículo button,
   active filter chips). */
[b-6m0wrct77r] .quick-add-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--adm-bg-6366f1-a0_06), var(--adm-bg-8b5cf6-a0_04));
    border: 1px solid var(--adm-bd-6366f1-a0_22);
    border-radius: 12px;
    margin-bottom: 12px;
}
[b-6m0wrct77r] .quick-add-row .quick-add-name,
[b-6m0wrct77r] .quick-add-row .quick-add-cat {
    flex: 1 1 200px;
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    font-size: 0.9rem;
}
[b-6m0wrct77r] .quick-add-row .quick-add-name:focus,
[b-6m0wrct77r] .quick-add-row .quick-add-price:focus,
[b-6m0wrct77r] .quick-add-row .quick-add-cat:focus {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-a5b4fc);
    box-shadow: 0 0 0 3px var(--adm-sh-6366f1-a0_15);
}
[b-6m0wrct77r] .quick-add-row .quick-add-price-wrap {
    position: relative;
    flex: 0 0 110px;
}
[b-6m0wrct77r] .quick-add-row .quick-add-price {
    width: 100%;
    height: 38px;
    padding: 0 22px 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    font-size: 0.9rem;
    text-align: right;
}
[b-6m0wrct77r] .quick-add-row .quick-add-currency {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--adm-fg-64748b);
    font-size: 0.85rem;
    pointer-events: none;
}
[b-6m0wrct77r] .quick-add-row .quick-add-btn {
    flex: 0 0 auto;
    height: 38px;
    white-space: nowrap;
}
[b-6m0wrct77r] .quick-add-row .quick-add-error {
    flex: 1 1 100%;
    color: var(--adm-fg-dc2626);
    font-size: 0.82rem;
    font-weight: 600;
    margin-top: -2px;
}
[b-6m0wrct77r] .quick-add-row input:disabled,
[b-6m0wrct77r] .quick-add-row select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* "Para opciones avanzadas…" tertiary link at the bottom of the
   simplified view. Quiet on purpose — only the curious operator will
   notice it, but it's enough to break the dead-end perception. */
[b-6m0wrct77r] .advanced-link-row {
    text-align: center;
    margin: 18px 0 6px;
    font-size: 0.82rem;
}
[b-6m0wrct77r] .advanced-link-row .advanced-link {
    color: var(--adm-fg-a5b4fc);
    text-decoration: none;
    font-weight: 600;
}
[b-6m0wrct77r] .advanced-link-row .advanced-link:hover {
    text-decoration: underline;
}

[b-6m0wrct77r] .datagrid .item-name {
    font-weight: 500;
    color: var(--adm-fgon-ffffff-1e293b);
}

[b-6m0wrct77r] .datagrid .item-badges {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

[b-6m0wrct77r] .item-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
}

[b-6m0wrct77r] .item-badge.pos {
    background: #dcfce7;
    color: #166534;
}

[b-6m0wrct77r] .item-badge.online {
    background: #dbeafe;
    color: #1e40af;
}

[b-6m0wrct77r] .item-badge.out-of-stock {
    background: #fef3c7;
    color: #92400e;
}

[b-6m0wrct77r] .item-badge.archived {
    background: #f1f5f9;
    color: #64748b;
}

[b-6m0wrct77r] .row-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    opacity: .6;
    transition: opacity .15s;
}

[b-6m0wrct77r] .datagrid tr:hover .row-actions,
[b-6m0wrct77r] .datagrid tr:focus-within .row-actions {
    opacity: 1;
}

[b-6m0wrct77r] .row-action-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 8px;
    font-size: 16px;
    transition: background .1s, transform .1s;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-6m0wrct77r] .row-action-btn:hover {
    background: #e2e8f0;
}

[b-6m0wrct77r] .row-action-btn:active {
    background: #cbd5e1;
    transform: scale(0.95);
}

/* Row actions wrap */
[b-6m0wrct77r] .row-actions-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}

[b-6m0wrct77r] .row-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
}

[b-6m0wrct77r] .row-menu {
    position: fixed;
    min-width: 160px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    z-index: 1000;
    padding: 6px 0;
}

[b-6m0wrct77r] .row-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    min-height: 44px;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 13px;
    color: var(--adm-fg-334155);
    cursor: pointer;
    transition: background .15s;
}

[b-6m0wrct77r] .row-menu-item:hover {
    background: #f1f5f9;
}

[b-6m0wrct77r] .row-menu-item.danger {
    color: var(--adm-fg-dc2626);
}

[b-6m0wrct77r] .row-menu-item.danger:hover {
    background: #fef2f2;
}

/* Touch-capable devices (incl. touchscreen+mouse hybrids): always show
   datagrid row actions. See the any-pointer note on .cat-item-actions. */
@media (any-pointer: coarse) {
    [b-6m0wrct77r] .row-actions {
        opacity: 1;
    }
    [b-6m0wrct77r] .row-action-btn {
        min-width: 48px;
        min-height: 48px;
    }
}

/* ============================================
   Phase 4: Bulk Action Bar
   ============================================ */
[b-6m0wrct77r] .bulk-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--adm-bggrad-1e3a5f) 0%, var(--adm-bggrad-1e293b) 100%);
    border-radius: 10px;
    color: var(--adm-fgon-e4ecf6-ffffff);
    box-shadow: 0 4px 12px var(--adm-sh-000000-a0_15);
}

[b-6m0wrct77r] .bulk-bar-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 12px;
    border-right: 1px solid var(--adm-bd-ffffff-a0_2);
}

[b-6m0wrct77r] .bulk-bar-count {
    font-weight: 600;
}

[b-6m0wrct77r] .bulk-select-options {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

[b-6m0wrct77r] .bulk-link {
    background: none;
    border: none;
    color: var(--adm-fg-ffffff-a0_7);
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    font-size: 11px;
}

[b-6m0wrct77r] .bulk-link:hover {
    color: var(--adm-fg-ffffff);
}

[b-6m0wrct77r] .bulk-divider {
    color: var(--adm-fg-ffffff-a0_3);
}

[b-6m0wrct77r] .bulk-bar-actions {
    display: flex;
    gap: 8px;
    flex: 1;
    flex-wrap: wrap;
}

[b-6m0wrct77r] .bulk-btn {
    padding: 6px 12px;
    border: 1px solid var(--adm-bd-ffffff-a0_2);
    border-radius: 6px;
    background: var(--adm-bg-ffffff-a0_1);
    color: var(--adm-fgon-e2e5e9-ffffff);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
}

[b-6m0wrct77r] .bulk-btn:hover {
    background: var(--adm-bg-ffffff-a0_2);
    border-color: var(--adm-bd-ffffff-a0_3);
}

[b-6m0wrct77r] .bulk-btn.danger {
    background: var(--adm-bg-ef4444-a0_2);
    border-color: var(--adm-bd-ef4444-a0_3);
}

[b-6m0wrct77r] .bulk-btn.danger:hover {
    background: var(--adm-bg-ef4444-a0_3);
}

[b-6m0wrct77r] .bulk-bar-clear {
    padding: 6px 10px;
    border: none;
    background: transparent;
    color: var(--adm-fg-ffffff-a0_7);
    cursor: pointer;
    font-size: 12px;
}

[b-6m0wrct77r] .bulk-bar-clear:hover {
    color: var(--adm-fg-ffffff);
}

/* ============================================
   Phase 5: General Polish
   ============================================ */
/* Force no horizontal scroll on catalog page */
:host[b-6m0wrct77r] {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

[b-6m0wrct77r] .catalog-page {
    padding: 16px;
    background: #f8fafc;
    min-height: 100vh;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

[b-6m0wrct77r] .catalog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

[b-6m0wrct77r] .catalog-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--adm-fg-1e293b);
    margin: 0;
}

[b-6m0wrct77r] .catalog-grid {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 16px;
    max-width: 100%;
    min-width: 0;
}

[b-6m0wrct77r] .pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-top: 1px solid var(--adm-bd-e2e8f0);
    flex-wrap: wrap;
    font-size: 13px;
}

[b-6m0wrct77r] .pagination-left,
[b-6m0wrct77r] .pagination-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-6m0wrct77r] .pagination-center {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-6m0wrct77r] .pagination-label {
    font-size: 13px;
    color: var(--adm-fg-64748b);
}

[b-6m0wrct77r] .page-size-select {
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    cursor: pointer;
}

[b-6m0wrct77r] .page-size-select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59,130,246,.15);
}

[b-6m0wrct77r] .pagination-btn {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: all .1s;
    font-size: 12px;
}

[b-6m0wrct77r] .pagination-btn:hover:not(:disabled) {
    background: #f8fafc;
}

[b-6m0wrct77r] .pagination-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

[b-6m0wrct77r] .pagination-info {
    font-size: 13px;
    color: var(--adm-fg-64748b);
    display: flex;
    align-items: center;
    gap: 6px;
}

[b-6m0wrct77r] .page-jump-input {
    width: 50px;
    padding: 4px 8px;
    border: 1px solid var(--adm-bd-e2e8f0);
    border-radius: 4px;
    text-align: center;
    font-size: 13px;
}

[b-6m0wrct77r] .page-jump-input:focus {
    outline: none;
    border-color: var(--adm-bd-3b82f6);
    box-shadow: 0 0 0 2px var(--adm-sh-3b82f6-a0_15);
}

[b-6m0wrct77r] .page-jump-input::-webkit-outer-spin-button,
[b-6m0wrct77r] .page-jump-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

[b-6m0wrct77r] .pagination-total {
    font-size: 13px;
    color: var(--adm-fg-64748b);
    font-weight: 500;
}

/* Compact pagination style - Touch-friendly (44px min targets) */
[b-6m0wrct77r] .pagination-bar.compact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px;
    font-size: 13px;
}

[b-6m0wrct77r] .pagination-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

[b-6m0wrct77r] .pagination-bar.compact .pagination-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 8px;
}

[b-6m0wrct77r] .pagination-compact-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--adm-fg-64748b);
}

[b-6m0wrct77r] .pagination-bar.compact .page-jump-input {
    width: 52px;
    min-height: 44px;
    padding: 8px;
    font-size: 14px;
    text-align: center;
    border-radius: 8px;
}

[b-6m0wrct77r] .pagination-sep {
    color: var(--adm-fg-94a3b8);
    font-size: 14px;
}

[b-6m0wrct77r] .pagination-pages {
    color: var(--adm-fg-64748b);
    min-width: 20px;
    font-size: 14px;
}

[b-6m0wrct77r] .pagination-total-compact {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
    padding: 8px 12px;
    background: #f1f5f9;
    border-radius: 8px;
    min-height: 44px;
    display: flex;
    align-items: center;
}

[b-6m0wrct77r] .pagination-total-compact::after {
    content: " items";
    font-weight: 400;
    opacity: 0.7;
    margin-left: 4px;
}

[b-6m0wrct77r] .page-size-select.compact {
    padding: 8px 12px;
    min-height: 44px;
    font-size: 13px;
    border-radius: 8px;
}

/* ============================================
   Phase 6: Column Toggle
   ============================================ */
[b-6m0wrct77r] .col-toggle-wrap {
    position: relative;
}

[b-6m0wrct77r] .col-toggle-btn {
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

[b-6m0wrct77r] .col-toggle-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 180px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,.1);
    padding: 8px 0;
    z-index: 100;
}

[b-6m0wrct77r] .col-toggle-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background .1s;
}

[b-6m0wrct77r] .col-toggle-item:hover {
    background: #f8fafc;
}

/* Additional form controls */
[b-6m0wrct77r] .toolbar-select {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
    min-width: 180px;
    cursor: pointer;
}

[b-6m0wrct77r] .toolbar-select:focus {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-3b82f6);
    box-shadow: 0 0 0 3px var(--adm-sh-3b82f6-a0_1);
}

[b-6m0wrct77r] .bulk-select {
    padding: 6px 10px;
    border: 1px solid var(--adm-bd-ffffff-a0_2);
    border-radius: 6px;
    background: var(--adm-bg-ffffff-a0_1);
    color: var(--adm-fgon-e2e5e9-ffffff);
    font-size: 12px;
    cursor: pointer;
}

[b-6m0wrct77r] .bulk-select option {
    background: var(--adm-bg-1e293b);
    color: var(--adm-fgon-ffffff-ffffff);
}

[b-6m0wrct77r] .cat-printer-select {
    font-size: 11px;
    padding: 4px 6px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    min-width: 70px;
}

[b-6m0wrct77r] .catalog-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    overflow: hidden;
}

/* ============================================
   Phase 7: Final Polish & Animations
   ============================================ */
[b-6m0wrct77r] .fade-in {
    animation: fadeIn-b-6m0wrct77r .2s ease-out;
}

[b-6m0wrct77r] .slide-up {
    animation: slideUp-b-6m0wrct77r .2s ease-out;
}

/* Smooth transitions for interactive elements */
[b-6m0wrct77r] button, [b-6m0wrct77r] input, [b-6m0wrct77r] select {
    transition: all .15s ease;
}

/* Better focus states */
[b-6m0wrct77r] input:focus, [b-6m0wrct77r] select:focus, [b-6m0wrct77r] button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--adm-sh-3b82f6-a0_3);
}

/* Loading state */
[b-6m0wrct77r] .loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

[b-6m0wrct77r] .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--adm-bd-e2e8f0);
    border-top-color: var(--adm-bd-3b82f6);
    border-radius: 50%;
    animation: spin-b-6m0wrct77r 1s linear infinite;
}

/* ============================================
   Phase 8: Context Menu & Keyboard Nav
   ============================================ */
.ctx-backdrop[b-6m0wrct77r] {
    position: fixed;
    inset: 0;
    z-index: 999;
}

.ctx-menu[b-6m0wrct77r] {
    position: fixed;
    z-index: 1000;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
    padding: 4px 0;
    min-width: 180px;
}

.ctx-menu button[b-6m0wrct77r] {
    display: block;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
}

.ctx-menu button:hover[b-6m0wrct77r] {
    background: #f3f4f6;
}

.ctx-menu button.danger[b-6m0wrct77r] {
    color: var(--adm-fgon-ffffff-dc2626);
}

.ctx-menu hr[b-6m0wrct77r] {
    margin: 4px 0;
    border: none;
    border-top: 1px solid var(--adm-bdon-ffffff-e5e7eb);
}

[b-6m0wrct77r] .datagrid tr.focused {
    outline: 2px solid #3b82f6;
    outline-offset: -2px;
    background: #eff6ff;
}

/* ============================================
   Animations
   ============================================ */
@keyframes fadeIn-b-6m0wrct77r {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp-b-6m0wrct77r {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@keyframes spin-b-6m0wrct77r {
    to { transform: rotate(360deg); }
}

/* Inline spinner for loading states */
[b-6m0wrct77r] .spinner-inline {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--adm-bd-ffffff-a0_3);
    border-top-color: var(--adm-bd-ffffff);
    border-radius: 50%;
    animation: spin-b-6m0wrct77r .6s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
}

/* Bulk loading state */
[b-6m0wrct77r] .bulk-bar.bulk-loading {
    opacity: 0.85;
    pointer-events: none;
}

[b-6m0wrct77r] .bulk-bar.bulk-loading .bulk-btn,
[b-6m0wrct77r] .bulk-bar.bulk-loading .bulk-select {
    opacity: 0.6;
}

/* ============================================
   Phase 6: Bulk Price Modal
   ============================================ */

.modal-backdrop[b-6m0wrct77r] {
    position: fixed;
    inset: 0;
    background: var(--adm-scrim-000000-a0_5);
    z-index: 1000;
}

.bulk-price-modal[b-6m0wrct77r] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,.2);
    z-index: 1001;
    width: 100%;
    max-width: 420px;
    animation: modalSlideIn-b-6m0wrct77r .2s ease-out;
}

@keyframes modalSlideIn-b-6m0wrct77r {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

[b-6m0wrct77r] .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--adm-bdon-f1f5f9-e2e8f0);
}

[b-6m0wrct77r] .modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--adm-fgon-f1f5f9-1e293b);
}

[b-6m0wrct77r] .modal-close {
    /* 44px min so the close affordance is a real touch target on a phone
       (was ~28px from 6px/10px padding alone). */
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    color: var(--adm-fg-64748b);
    border-radius: 6px;
}

[b-6m0wrct77r] .modal-close:hover {
    background: #f1f5f9;
    color: #1e293b;
}

[b-6m0wrct77r] .modal-body {
    padding: 20px;
}

[b-6m0wrct77r] .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--adm-bd-e2e8f0);
}

[b-6m0wrct77r] .modal-btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
}

[b-6m0wrct77r] .modal-btn.secondary {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
}

[b-6m0wrct77r] .modal-btn.secondary:hover {
    background: #e2e8f0;
}

[b-6m0wrct77r] .modal-btn.primary {
    background: #3b82f6;
    border: 1px solid #3b82f6;
    color: #fff;
}

[b-6m0wrct77r] .modal-btn.primary:hover {
    background: #2563eb;
}

[b-6m0wrct77r] .modal-btn.danger {
    background: #b91c1c;
    border: 1px solid #b91c1c;
    color: #fff;
}

[b-6m0wrct77r] .modal-btn.danger:hover {
    background: var(--adm-keep-bghov-b91c1c-991b1b);
}

[b-6m0wrct77r] .modal-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* Styled archive confirm — replaces the un-themable native confirm().
   Self-contained dark surface (no light base to override). */
.confirm-modal[b-6m0wrct77r] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--adm-bg-161b22);
    border: 1px solid var(--adm-bdon-ffffff-30363d);
    color: var(--adm-fgon-ffffff-e6edf3);
    border-radius: 16px;
    box-shadow: 0 25px 60px var(--adm-sh-000000-a0_5);
    z-index: 1001;
    width: 100%;
    max-width: 440px;
    animation: modalSlideIn-b-6m0wrct77r .2s ease-out;
}

.confirm-modal .modal-header[b-6m0wrct77r],
.confirm-modal .modal-footer[b-6m0wrct77r] {
    border-color: var(--adm-bdon-ffffff-30363d);
}

.confirm-modal .modal-header h3[b-6m0wrct77r] {
    color: var(--adm-fgon-ffffff-e6edf3);
}

.confirm-modal .modal-close[b-6m0wrct77r] {
    color: var(--adm-fgon-ffffff-8b949e);
}

.confirm-body[b-6m0wrct77r] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 24px;
}

.confirm-icon[b-6m0wrct77r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--adm-bg-b91c1c-a0_15);
    font-size: 20px;
}

.confirm-body p[b-6m0wrct77r] {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--adm-fg-c9d1d9);
}

.confirm-body strong[b-6m0wrct77r] {
    color: var(--adm-fg-e6edf3);
}

[b-6m0wrct77r] .price-adjust-options {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

[b-6m0wrct77r] .price-adjust-option {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid var(--adm-bd-e2e8f0);
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s;
}

[b-6m0wrct77r] .price-adjust-option input {
    accent-color: var(--adm-fg-3b82f6);
}

[b-6m0wrct77r] .price-adjust-option:hover {
    background: #f8fafc;
}

[b-6m0wrct77r] .price-adjust-option.active {
    border-color: #3b82f6;
    background: #eff6ff;
}

[b-6m0wrct77r] .price-adjust-input {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

[b-6m0wrct77r] .price-adjust-input input {
    flex: 1;
    padding: 12px 14px;
    border: 1px solid var(--adm-bd-e2e8f0);
    border-radius: 8px;
    font-size: 16px;
}

[b-6m0wrct77r] .price-adjust-input input:focus {
    outline: none;
    border-color: var(--adm-bd-3b82f6);
    box-shadow: 0 0 0 2px var(--adm-sh-3b82f6-a0_15);
}

[b-6m0wrct77r] .price-suffix {
    font-size: 16px;
    font-weight: 600;
    color: var(--adm-fg-64748b);
}

[b-6m0wrct77r] .price-adjust-hint {
    margin: 0;
    font-size: 13px;
    color: var(--adm-fg-64748b);
}

/* ============================================
   Phase 4: Advanced Filtering
   ============================================ */

/* Clear filters button */
[b-6m0wrct77r] .filter-chip.clear-filters {
    background: #fee2e2;
    border-color: #fecaca;
    color: #b91c1c;   /* AA: #dc2626 on #fee2e2 was 3.95:1 */
}

[b-6m0wrct77r] .filter-chip.clear-filters:hover {
    background: #fecaca;
}

/* Advanced Filters Panel */
[b-6m0wrct77r] .advanced-filters-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

[b-6m0wrct77r] .filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 160px;
}

[b-6m0wrct77r] .filter-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--adm-fg-64748b);
    text-transform: uppercase;
    letter-spacing: .025em;
}

[b-6m0wrct77r] .price-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-6m0wrct77r] .price-input {
    width: 80px;
    padding: 8px 10px;
    border: 1px solid var(--adm-bdon-f8fafc-e2e8f0);
    border-radius: 6px;
    font-size: 13px;
    text-align: right;
}

[b-6m0wrct77r] .price-input:focus {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-3b82f6);
    box-shadow: 0 0 0 2px var(--adm-sh-3b82f6-a0_15);
}

[b-6m0wrct77r] .price-input::-webkit-outer-spin-button,
[b-6m0wrct77r] .price-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

[b-6m0wrct77r] .price-separator {
    color: var(--adm-fg-94a3b8);
    font-size: 14px;
}

[b-6m0wrct77r] .price-currency {
    color: var(--adm-fg-64748b);
    font-size: 13px;
    font-weight: 500;
}

[b-6m0wrct77r] .filter-select {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
    min-width: 140px;
}

[b-6m0wrct77r] .filter-select:focus {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-3b82f6);
    box-shadow: 0 0 0 2px var(--adm-sh-3b82f6-a0_15);
}

/* ============================================
   Phase 3B: Card/Grid View
   ============================================ */

/* View Toggle Buttons */
[b-6m0wrct77r] .view-toggle {
    display: flex;
    border: 1px solid var(--adm-bd-e2e8f0);
    border-radius: 8px;
    overflow: hidden;
}

[b-6m0wrct77r] .view-btn {
    padding: 8px 12px;
    border: none;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    transition: all .15s;
}

[b-6m0wrct77r] .view-btn:not(:last-child) {
    border-right: 1px solid var(--adm-bdon-f1f5f9-e2e8f0);
}

[b-6m0wrct77r] .view-btn:hover {
    background: #f8fafc;
}

[b-6m0wrct77r] .view-btn.active {
    background: #3b82f6;
    color: #fff;
}

/* Compact Toolbar - Touch-friendly (44px min targets) */
[b-6m0wrct77r] .compact-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px !important;
    flex-wrap: wrap;
}

[b-6m0wrct77r] .toolbar-group {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: #f1f5f9;
    border-radius: 10px;
}

[b-6m0wrct77r] .toolbar-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    transition: all .15s;
}

[b-6m0wrct77r] .toolbar-icon-btn:hover {
    background: #e2e8f0;
}

[b-6m0wrct77r] .toolbar-icon-btn.active {
    background: #3b82f6;
    color: #fff;
}

[b-6m0wrct77r] .toolbar-icon-btn.danger:hover {
    background: #fee2e2;
}

[b-6m0wrct77r] .toolbar-select.compact {
    padding: 10px 12px;
    font-size: 13px;
    min-width: 80px;
    max-width: 110px;
    min-height: 44px;
    border-radius: 8px;
}

[b-6m0wrct77r] .presets-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}

[b-6m0wrct77r] .compact-toolbar .view-toggle {
    border-radius: 8px;
}

[b-6m0wrct77r] .compact-toolbar .view-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 14px;
}

/* Items Grid Container */
[b-6m0wrct77r] .items-grid-wrap {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    position: relative;
    min-height: 400px;
}

[b-6m0wrct77r] .items-grid-wrap.loading {
    pointer-events: none;
}

[b-6m0wrct77r] .items-grid-wrap.loading .items-grid {
    opacity: 0.5;
}

[b-6m0wrct77r] .items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

/* Item Card */
[b-6m0wrct77r] .item-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: all .2s;
    position: relative;
}

[b-6m0wrct77r] .item-card:hover {
    border-color: var(--adm-bdon-ffffff-cbd5e1);
    box-shadow: 0 4px 12px var(--adm-sh-000000-a0_08);
    transform: translateY(-2px);
}

[b-6m0wrct77r] .item-card.selected {
    border-color: var(--adm-bd-3b82f6);
    box-shadow: 0 0 0 2px var(--adm-sh-3b82f6-a0_2);
}

[b-6m0wrct77r] .item-card.archived {
    opacity: 0.6;
}

/* Card Image */
[b-6m0wrct77r] .card-img {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    /* Transparent so the image area blends into the card on BOTH themes — the
       old near-white #f8fafc read as a big light block on the dark Carta page
       (Catalog has no dark-theme rules). Real images still cover it. */
    background: transparent;
    overflow: hidden;
}

[b-6m0wrct77r] .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

[b-6m0wrct77r] .card-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;          /* was 48px — the camera dominated each card */
    color: var(--adm-fgon-e9edf1-94a3b8);           /* mid-slate: visible on light AND dark */
    background: var(--adm-bg-94a3b8-a0_1);  /* subtle translucent wash, theme-agnostic */
}

/* Card Overlay (appears on hover) */
[b-6m0wrct77r] .card-overlay {
    position: absolute;
    inset: 0;
    background: var(--adm-scrim-000000-a0_5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transition: opacity .2s;
}

[b-6m0wrct77r] .item-card:hover .card-overlay {
    opacity: 1;
}

/* Dark translucent chips, not white circles. The buttons held emoji, which needed a
   white disc to stay legible; now they hold currentColor strokes, so they can sit on
   the dark theme like every other control in the admin. */
[b-6m0wrct77r] .card-action {
    width: 40px;
    height: 40px;
    border: 1px solid var(--adm-bd-94a3b8-a0_25);
    border-radius: 10px;
    background: var(--adm-bg-0f172a-a0_72);
    backdrop-filter: blur(4px);
    color: var(--adm-fgon-f8fafc-cbd5e1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s, background .15s, color .15s, border-color .15s;
}

[b-6m0wrct77r] .card-action:hover {
    background: var(--adm-bg-1e293b-a0_95);
    border-color: var(--adm-bd-94a3b8-a0_5);
    color: var(--adm-fgon-ffffff-f1f5f9);
    transform: scale(1.08);
}

/* Archive is destructive — say so on hover rather than relying on a 🗑 glyph. */
[b-6m0wrct77r] .card-action:last-child:hover {
    background: var(--adm-bg-ef4444-a0_18);
    border-color: var(--adm-bd-ef4444-a0_5);
    color: var(--adm-fgon-f6d9db-fca5a5);
}

/* Selected Badge */
[b-6m0wrct77r] .card-selected-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: #3b82f6;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(59,130,246,.4);
}

/* Card Body */
[b-6m0wrct77r] .card-body {
    padding: 12px;
}

[b-6m0wrct77r] .card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--adm-fg-1e293b);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-6m0wrct77r] .card-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--adm-fg-059669);
    margin-bottom: 8px;
}

[b-6m0wrct77r] .card-meta {
    margin-bottom: 8px;
}

[b-6m0wrct77r] .card-category {
    font-size: 12px;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 4px;
}

/* Card Badges */
[b-6m0wrct77r] .card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

[b-6m0wrct77r] .card-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
}

[b-6m0wrct77r] .card-badge.pos {
    background: #dcfce7;
    color: #166534;
}

[b-6m0wrct77r] .card-badge.online {
    background: #dbeafe;
    color: #1e40af;
}

[b-6m0wrct77r] .card-badge.out-of-stock {
    background: #fef3c7;
    color: #92400e;
}

[b-6m0wrct77r] .card-badge.archived {
    background: #f1f5f9;
    color: #64748b;
}

/* Shared Pagination Bar */
[b-6m0wrct77r] .pagination-bar {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 8px 8px;
    margin-top: -1px;
}

/* ============================================
   Phase 8: Pro Table Features
   ============================================ */

/* Row hover quick actions */
[b-6m0wrct77r] .row-quick-actions {
    display: none;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    gap: 4px;
    z-index: 5;
}

[b-6m0wrct77r] .items-row:hover .row-quick-actions {
    display: flex;
}

[b-6m0wrct77r] .row-action-btn {
    padding: 6px 10px;
    border: none;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
    transition: all .15s;
}

[b-6m0wrct77r] .row-action-btn:hover {
    background: #f8fafc;
    transform: scale(1.05);
}

/* Image preview tooltip */
[b-6m0wrct77r] .image-tooltip {
    position: relative;
    display: inline-block;
}

[b-6m0wrct77r] .image-tooltip-popup {
    display: none;
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 12px;
    padding: 4px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    z-index: 100;
}

[b-6m0wrct77r] .image-tooltip:hover .image-tooltip-popup {
    display: block;
}

[b-6m0wrct77r] .image-tooltip-popup img {
    width: 180px;
    height: 135px;
    object-fit: cover;
    border-radius: 6px;
}

/* Enhanced row styling */
[b-6m0wrct77r] .items-row {
    position: relative;
    transition: background .15s, box-shadow .15s;
}

[b-6m0wrct77r] .items-row:hover {
    background: #f8fafc;
    box-shadow: inset 0 1px 0 #e2e8f0, inset 0 -1px 0 #e2e8f0;
}

[b-6m0wrct77r] .items-row.selected {
    background: #eff6ff;
}

/* ============================================
   Phase 9: Performance & UX
   ============================================ */

/* Empty state */
[b-6m0wrct77r] .empty-state-table {
    text-align: center;
    padding: 60px 40px;
    color: var(--adm-fg-64748b);
}

[b-6m0wrct77r] .empty-state-table .empty-icon {
    font-size: 64px;
    display: block;
    margin-bottom: 16px;
    opacity: 0.5;
}

[b-6m0wrct77r] .empty-state-table h4 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--adm-fg-334155);
}

[b-6m0wrct77r] .empty-state-table p {
    margin: 0 0 20px;
    font-size: 14px;
}

[b-6m0wrct77r] .empty-btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
}

[b-6m0wrct77r] .empty-btn.primary {
    background: #3b82f6;
    color: #fff;
    border: none;
}

[b-6m0wrct77r] .empty-btn.primary:hover {
    background: #2563eb;
}

[b-6m0wrct77r] .empty-btn.secondary {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

[b-6m0wrct77r] .empty-btn.secondary:hover {
    background: #e2e8f0;
}

/* Skeleton loading animation */
[b-6m0wrct77r] .skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-6m0wrct77r 1.5s infinite;
    border-radius: 4px;
}

@keyframes skeleton-loading-b-6m0wrct77r {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

[b-6m0wrct77r] .skeleton-row td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--adm-bd-f1f5f9);
}

[b-6m0wrct77r] .skeleton-row:nth-child(odd) {
    animation-delay: 0.1s;
}

[b-6m0wrct77r] .skeleton-row:nth-child(even) {
    animation-delay: 0.2s;
}

/* Empty grid state */
[b-6m0wrct77r] .empty-state-grid {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 40px;
    color: var(--adm-fg-64748b);
}

[b-6m0wrct77r] .empty-state-grid .empty-icon {
    font-size: 64px;
    display: block;
    margin-bottom: 16px;
    opacity: 0.5;
}

[b-6m0wrct77r] .empty-state-grid h4 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--adm-fg-334155);
}

[b-6m0wrct77r] .empty-state-grid p {
    margin: 0 0 20px;
    font-size: 14px;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 900px) {
    [b-6m0wrct77r] .catalog-grid {
        grid-template-columns: 1fr;
    }

    [b-6m0wrct77r] .cat-panel {
        order: -1;
    }
}

@media (max-width: 600px) {
    [b-6m0wrct77r] .catalog-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    /* In the column toolbar, .toolbar-search's `flex: 1 1 200px` (a WIDTH basis
       on desktop) made the search box GROW VERTICALLY to fill the column — a
       ~300px empty void with the magnifier floating in it. Pin it to its
       natural height so the toolbar stacks compactly. */
    [b-6m0wrct77r] .toolbar-search {
        flex: 0 0 auto;
        width: 100%;
    }

    [b-6m0wrct77r] .quick-filters {
        width: 100%;
    }

    [b-6m0wrct77r] .bulk-bar {
        flex-direction: column;
        align-items: stretch;
    }

    [b-6m0wrct77r] .bulk-bar-count {
        border-right: none;
        border-bottom: 1px solid var(--adm-bd-ffffff-a0_2);
        padding-bottom: 8px;
        margin-bottom: 8px;
    }

    [b-6m0wrct77r] .items-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }

    [b-6m0wrct77r] .card-action {
        /* Phone is where these edit/quick-action buttons need the LARGEST
           target, not a 32px shrink. Keep the 44px touch floor. */
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

    [b-6m0wrct77r] .view-toggle {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   Phase 10A: Quick Stats Bar
   ============================================ */
[b-6m0wrct77r] .stats-bar {
    display: flex;
    gap: 12px;
    padding: 0 0 16px 0;
    flex-wrap: wrap;
    max-width: 100%;
    /* Reserve a stat-card-height row so the bar doesn't pop layout when
       the price-range card appears (it's gated on items >= 3). The
       fallback prevents a 60→80px height jump when the operator adds
       their 3rd item. */
    min-height: 80px;
}

[b-6m0wrct77r] .stat-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    min-width: 0;
    flex: 1 1 150px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    transition: box-shadow .15s, transform .15s, border-color .15s;
    cursor: pointer;
    text-align: left;
}

[b-6m0wrct77r] button.stat-card {
    font-family: inherit;
}

[b-6m0wrct77r] .stat-card:hover {
    box-shadow: 0 4px 12px var(--adm-sh-000000-a0_08);
    transform: translateY(-2px);
}

[b-6m0wrct77r] .stat-card:active {
    transform: scale(0.98);
}

[b-6m0wrct77r] .stat-card.stat-active {
    border-color: var(--adm-bdon-eff6ff-3b82f6);
    box-shadow: 0 0 0 3px var(--adm-sh-3b82f6-a0_15), 0 4px 12px var(--adm-sh-000000-a0_08);
}

[b-6m0wrct77r] .stat-card.stat-neutral {
    cursor: default;
}

[b-6m0wrct77r] .stat-card.stat-neutral:hover {
    transform: none;
}

[b-6m0wrct77r] .stat-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border-radius: 10px;
    font-size: 18px;
}

[b-6m0wrct77r] .stat-card.stat-success .stat-icon {
    background: #dcfce7;
    color: #166534;
}

[b-6m0wrct77r] .stat-card.stat-warning .stat-icon {
    background: #fef3c7;
    color: #92400e;
}

[b-6m0wrct77r] .stat-card.stat-info .stat-icon {
    background: #dbeafe;
    color: #1e40af;
}

[b-6m0wrct77r] .stat-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

[b-6m0wrct77r] .stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--adm-fg-1e293b);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    transition: transform .2s ease, color .2s ease;
}

[b-6m0wrct77r] .stat-value.stat-changed {
    animation: statPulse-b-6m0wrct77r .4s ease-out;
}

@keyframes statPulse-b-6m0wrct77r {
    0% { transform: scale(1); }
    30% { transform: scale(1.15); color: var(--adm-fg-3b82f6); }
    100% { transform: scale(1); }
}

[b-6m0wrct77r] .stat-label {
    font-size: 12px;
    color: var(--adm-fg-64748b);
    font-weight: 500;
}

/* Stats collapse toggle button */
[b-6m0wrct77r] .stats-collapse-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    color: #64748b;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}

[b-6m0wrct77r] .stats-collapse-btn:hover {
    background: #f1f5f9;
    color: #334155;
}

[b-6m0wrct77r] .stats-bar {
    position: relative;
    padding-right: 44px;
}

/* Collapsed stats bar - compact mode */
[b-6m0wrct77r] .stats-bar.stats-collapsed {
    gap: 8px;
    padding-bottom: 8px;
}

[b-6m0wrct77r] .stats-bar.stats-collapsed .stat-card {
    padding: 6px 10px;
    gap: 6px;
    flex: 0 0 auto;
    min-width: 0;
    border-radius: 8px;
}

[b-6m0wrct77r] .stats-bar.stats-collapsed .stat-icon {
    width: 24px;
    height: 24px;
    font-size: 12px;
    border-radius: 6px;
}

[b-6m0wrct77r] .stats-bar.stats-collapsed .stat-content {
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
}

[b-6m0wrct77r] .stats-bar.stats-collapsed .stat-value {
    font-size: 14px;
}

[b-6m0wrct77r] .stats-bar.stats-collapsed .stat-label {
    font-size: 11px;
}

/* ============================================
   Phase 10B: Column Customization
   ============================================ */
[b-6m0wrct77r] .column-settings-wrap {
    position: relative;
}

[b-6m0wrct77r] .column-settings-btn {
    display: flex;
    align-items: center;
    gap: 6px;
}

[b-6m0wrct77r] .column-settings-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
}

[b-6m0wrct77r] .column-settings-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 100;
    min-width: 180px;
    padding: 8px 0;
    animation: dropdownFadeIn-b-6m0wrct77r .15s ease-out;
    /* With 7+ columns this ran off the bottom of the screen and could not be scrolled
       (it had max-height:none; overflow:visible), so the last checkboxes were simply
       unreachable — worse in landscape. Cap it to what is left below the trigger and
       let it scroll inside itself. */
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

@keyframes dropdownFadeIn-b-6m0wrct77r {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

[b-6m0wrct77r] .column-settings-header {
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 600;
    color: var(--adm-fg-64748b);
    text-transform: uppercase;
    letter-spacing: .025em;
    border-bottom: 1px solid var(--adm-bd-f1f5f9);
    margin-bottom: 4px;
}

[b-6m0wrct77r] .column-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background .1s;
    font-size: 13px;
    color: var(--adm-fg-334155);
}

[b-6m0wrct77r] .column-option:hover {
    background: #f8fafc;
}

[b-6m0wrct77r] .column-option input[type="checkbox"] {
    accent-color: var(--adm-fg-3b82f6);
    width: 16px;
    height: 16px;
}

[b-6m0wrct77r] .column-settings-footer {
    padding: 8px 14px;
    border-top: 1px solid var(--adm-bd-f1f5f9);
    margin-top: 4px;
}

[b-6m0wrct77r] .column-reset-btn {
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: #f1f5f9;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: background .15s;
}

[b-6m0wrct77r] .column-reset-btn:hover {
    background: #e2e8f0;
}

/* Responsive: Stats bar */
@media (max-width: 900px) {
    [b-6m0wrct77r] .stats-bar {
        gap: 10px;
    }

    [b-6m0wrct77r] .stat-card {
        flex: 1 1 calc(50% - 10px);
        min-width: 0;
    }
}

@media (max-width: 600px) {
    [b-6m0wrct77r] .stats-bar {
        gap: 10px;
    }

    [b-6m0wrct77r] .stat-card {
        padding: 10px 14px;
        min-width: 120px;
    }

    [b-6m0wrct77r] .stat-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    [b-6m0wrct77r] .stat-value {
        font-size: 16px;
    }

    [b-6m0wrct77r] .stat-label {
        font-size: 11px;
    }
}

/* ============================================
   Phase 11A: Keyboard Shortcuts Panel
   ============================================ */
.shortcuts-modal[b-6m0wrct77r] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0,0,0,.25);
    z-index: 1001;
    width: 100%;
    max-width: 500px;
    animation: modalSlideIn-b-6m0wrct77r .2s ease-out;
}

.shortcuts-body[b-6m0wrct77r] {
    padding: 20px 24px 24px;
    max-height: 60vh;
    overflow-y: auto;
}

.shortcuts-section[b-6m0wrct77r] {
    margin-bottom: 20px;
}

.shortcuts-section:last-child[b-6m0wrct77r] {
    margin-bottom: 0;
}

.shortcuts-section h4[b-6m0wrct77r] {
    margin: 0 0 10px 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--adm-fg-64748b);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.shortcut-item[b-6m0wrct77r] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    color: var(--adm-fg-334155);
}

.shortcut-item kbd[b-6m0wrct77r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 26px;
    padding: 0 8px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.shortcut-item span[b-6m0wrct77r] {
    flex: 1;
    color: var(--adm-fg-64748b);
}

/* ============================================
   Phase 11B: Copy Item Modal
   ============================================ */
.copy-item-name[b-6m0wrct77r] {
    margin: 0 0 16px 0;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 8px;
    font-weight: 600;
    color: #1e293b;
}

/* ============================================
   Phase 11C: Compact/Dense View
   ============================================ */
[b-6m0wrct77r] .items-table-wrap.compact .datagrid th {
    padding: 8px 10px;
    font-size: 11px;
}

[b-6m0wrct77r] .items-table-wrap.compact .datagrid td {
    padding: 6px 10px;
}

[b-6m0wrct77r] .items-table-wrap.compact .item-thumb {
    width: 32px;
    height: 32px;
}

[b-6m0wrct77r] .items-table-wrap.compact .img-upload-label {
    width: 32px;
    height: 32px;
}

[b-6m0wrct77r] .items-table-wrap.compact .img-placeholder {
    width: 32px;
    height: 32px;
}

[b-6m0wrct77r] .items-table-wrap.compact .img-placeholder span {
    font-size: 12px;
}

[b-6m0wrct77r] .items-table-wrap.compact .img-placeholder small {
    display: none;
}

[b-6m0wrct77r] .items-table-wrap.compact .cell-img {
    width: 42px;
}

[b-6m0wrct77r] .items-table-wrap.compact .item-name {
    font-size: 13px;
}

[b-6m0wrct77r] .items-table-wrap.compact .item-badges {
    margin-top: 2px;
}

[b-6m0wrct77r] .items-table-wrap.compact .item-badge {
    padding: 1px 4px;
    font-size: 9px;
}

[b-6m0wrct77r] .items-table-wrap.compact .row-action-btn {
    padding: 4px 6px;
    font-size: 12px;
}

[b-6m0wrct77r] .toolbar-btn.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}

/* ============================================
   Phase 11D: Duplicate Finder Modal
   ============================================ */
.duplicates-modal[b-6m0wrct77r] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0,0,0,.25);
    z-index: 1001;
    width: 100%;
    max-width: 600px;
    animation: modalSlideIn-b-6m0wrct77r .2s ease-out;
}

.duplicates-body[b-6m0wrct77r] {
    padding: 20px 24px;
    max-height: 60vh;
    overflow-y: auto;
}

.duplicates-info[b-6m0wrct77r] {
    margin: 0 0 16px 0;
    font-size: 14px;
    color: var(--adm-fg-64748b);
}

.no-duplicates[b-6m0wrct77r] {
    text-align: center;
    padding: 40px 20px;
}

.no-dup-icon[b-6m0wrct77r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: #dcfce7;
    border-radius: 50%;
    font-size: 28px;
    color: #166534;
    margin-bottom: 16px;
}

.no-duplicates p[b-6m0wrct77r] {
    margin: 0;
    font-size: 16px;
    color: var(--adm-fg-64748b);
}

.duplicate-group[b-6m0wrct77r] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
}

.dup-group-header[b-6m0wrct77r] {
    padding: 10px 14px;
    background: #f1f5f9;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    border-bottom: 1px solid #e2e8f0;
}

.dup-item[b-6m0wrct77r] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--adm-bd-f1f5f9);
}

.dup-item:last-child[b-6m0wrct77r] {
    border-bottom: none;
}

.dup-name[b-6m0wrct77r] {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--adm-fg-1e293b);
}

.dup-category[b-6m0wrct77r] {
    font-size: 12px;
    color: #64748b;
    background: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}

.dup-price[b-6m0wrct77r] {
    font-size: 13px;
    font-weight: 600;
    color: var(--adm-fg-059669);
    min-width: 60px;
    text-align: right;
}

.dup-action[b-6m0wrct77r] {
    padding: 6px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all .15s;
}

.dup-action:hover[b-6m0wrct77r] {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}

/* ============================================
   Phase 12A: Multi-Select Hint
   ============================================ */
[b-6m0wrct77r] .datagrid tr.selected {
    background: #eff6ff !important;
}

/* ============================================
   Phase 12B: Item Quick Preview Panel
   ============================================ */
.preview-backdrop[b-6m0wrct77r] {
    position: fixed;
    inset: 0;
    background: var(--adm-scrim-000000-a0_3);
    z-index: 1000;
}

.preview-panel[b-6m0wrct77r] {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 360px;
    max-height: 90vh;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0,0,0,.25);
    z-index: 1001;
    overflow: hidden;
    animation: previewSlideIn-b-6m0wrct77r .2s ease-out;
}

@keyframes previewSlideIn-b-6m0wrct77r {
    from { opacity: 0; transform: translateY(-50%) translateX(20px); }
    to { opacity: 1; transform: translateY(-50%) translateX(0); }
}

.preview-header[b-6m0wrct77r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--adm-bd-e2e8f0);
}

.preview-header h3[b-6m0wrct77r] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--adm-fg-1e293b);
}

.preview-body[b-6m0wrct77r] {
    padding: 20px;
    max-height: calc(90vh - 140px);
    overflow-y: auto;
}

.preview-image[b-6m0wrct77r] {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
    background: #f8fafc;
}

.preview-image img[b-6m0wrct77r] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-no-image[b-6m0wrct77r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--adm-fg-94a3b8);
}

.preview-no-image span[b-6m0wrct77r] {
    font-size: 48px;
    margin-bottom: 8px;
}

.preview-no-image small[b-6m0wrct77r] {
    font-size: 14px;
}

.preview-info[b-6m0wrct77r] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.preview-name[b-6m0wrct77r] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--adm-fg-1e293b);
}

.preview-price[b-6m0wrct77r] {
    font-size: 24px;
    font-weight: 700;
    color: var(--adm-fg-059669);
}

.preview-category[b-6m0wrct77r] {
    font-size: 14px;
    color: #64748b;
    background: #f1f5f9;
    padding: 6px 12px;
    border-radius: 6px;
    display: inline-block;
}

.preview-badges[b-6m0wrct77r] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.preview-badge[b-6m0wrct77r] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    text-transform: uppercase;
}

.preview-badge.pos[b-6m0wrct77r] {
    background: #dcfce7;
    color: #166534;
}

.preview-badge.online[b-6m0wrct77r] {
    background: #dbeafe;
    color: #1e40af;
}

.preview-badge.out-of-stock[b-6m0wrct77r] {
    background: #fef3c7;
    color: #92400e;
}

.preview-badge.archived[b-6m0wrct77r] {
    background: #f1f5f9;
    color: #64748b;
}

.preview-description[b-6m0wrct77r] {
    margin-top: 8px;
}

.preview-description label[b-6m0wrct77r] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--adm-fg-64748b);
    text-transform: uppercase;
    letter-spacing: .025em;
    margin-bottom: 6px;
}

.preview-description p[b-6m0wrct77r] {
    margin: 0;
    font-size: 14px;
    color: var(--adm-fg-334155);
    line-height: 1.5;
}

.preview-footer[b-6m0wrct77r] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--adm-bd-e2e8f0);
}

/* ============================================
   Phase 12C: Drag Item to Category
   ============================================ */
[b-6m0wrct77r] .cat-item.item-drop-target {
    background: #dbeafe;
    border: 2px dashed #3b82f6;
}

/* ============================================
   Phase 12: Responsive
   ============================================ */
@media (max-width: 600px) {
    .preview-panel[b-6m0wrct77r] {
        right: 10px;
        left: 10px;
        width: auto;
    }
}

/* ============================================
   Phase 13D: Bulk Modifier Assignment Modal
   ============================================ */
[b-6m0wrct77r] .bulk-mod-options {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

[b-6m0wrct77r] .bulk-mod-groups {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 300px;
    overflow-y: auto;
}

[b-6m0wrct77r] .bulk-mod-group-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s;
}

[b-6m0wrct77r] .bulk-mod-group-item:hover {
    background: #f1f5f9;
}

[b-6m0wrct77r] .bulk-mod-group-item.selected {
    background: #eff6ff;
    border-color: #3b82f6;
}

[b-6m0wrct77r] .bulk-mod-group-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #3b82f6;
}

[b-6m0wrct77r] .bulk-mod-group-item .mod-group-name {
    flex: 1;
    font-weight: 500;
    color: #1e293b;
}

[b-6m0wrct77r] .bulk-mod-group-item .mod-group-info {
    font-size: 11px;
    color: #64748b;
}

[b-6m0wrct77r] .form-hint {
    font-size: 12px;
    color: var(--adm-fg-94a3b8);
}

/* ============================================
   Modifier Groups Manager Modal
   ============================================ */
[b-6m0wrct77r] .modifiers-manager-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 25px 50px rgba(0,0,0,.25);
    width: 90%;
    max-width: 700px;
    z-index: 1001;
    animation: modalIn .2s ease-out;
}

[b-6m0wrct77r] .modifiers-manager-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--adm-bdon-ffffff-e2e8f0);
}

[b-6m0wrct77r] .modifiers-manager-modal .modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--adm-fgon-ffffff-1e293b);
}

[b-6m0wrct77r] .modifiers-manager-modal .modal-body {
    padding: 16px 20px;
}

[b-6m0wrct77r] .mod-manager-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}

[b-6m0wrct77r] .mod-groups-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[b-6m0wrct77r] .mod-group-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    transition: all .15s;
}

[b-6m0wrct77r] .mod-group-card.expanded {
    background: #fff;
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59,130,246,.1);
}

[b-6m0wrct77r] .mod-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
    transition: background .1s;
}

[b-6m0wrct77r] .mod-group-header:hover {
    background: #f1f5f9;
}

[b-6m0wrct77r] .mod-group-summary {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

[b-6m0wrct77r] .mod-group-summary .mod-group-name {
    font-weight: 600;
    color: var(--adm-fg-1e293b);
    font-size: 14px;
}

[b-6m0wrct77r] .mod-group-summary .mod-group-meta {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: var(--adm-fg-64748b);
}

[b-6m0wrct77r] .badge-required {
    color: var(--adm-fg-ef4444);
    font-weight: 500;
}

[b-6m0wrct77r] .badge-items {
    color: #3b82f6;
    font-weight: 500;
    background: #eff6ff;
    padding: 1px 6px;
    border-radius: 4px;
}

[b-6m0wrct77r] .mod-group-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-6m0wrct77r] .icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 6px;
    transition: background .1s;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-6m0wrct77r] .icon-btn:hover {
    background: #e2e8f0;
}

[b-6m0wrct77r] .icon-btn.danger:hover {
    background: #fee2e2;
}

[b-6m0wrct77r] .expand-icon {
    color: var(--adm-fg-94a3b8);
    font-size: 11px;
}

[b-6m0wrct77r] .mod-group-body {
    padding: 0 16px 16px;
    border-top: 1px solid var(--adm-bd-e2e8f0);
    animation: slideDown-b-6m0wrct77r .2s ease-out;
}

@keyframes slideDown-b-6m0wrct77r {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        max-height: 1000px;
        transform: translateY(0);
    }
}

[b-6m0wrct77r] .mod-group-fields {
    padding: 16px 0;
}

[b-6m0wrct77r] .field-row {
    margin-bottom: 12px;
}

[b-6m0wrct77r] .field-row label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--adm-fg-64748b);
    margin-bottom: 4px;
}

[b-6m0wrct77r] .field-row-inline {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

[b-6m0wrct77r] .field-row-inline label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--adm-fg-475569);
}

[b-6m0wrct77r] .input {
    padding: 8px 12px;
    border: 1px solid var(--adm-bd-e2e8f0);
    border-radius: 6px;
    font-size: 14px;
    width: 100%;
}

[b-6m0wrct77r] .input:focus {
    outline: none;
    border-color: var(--adm-bd-3b82f6);
    box-shadow: 0 0 0 3px var(--adm-sh-3b82f6-a0_1);
}

[b-6m0wrct77r] .input.small {
    width: 80px;
    padding: 6px 10px;
}

[b-6m0wrct77r] .checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--adm-fg-475569);
    cursor: pointer;
}

[b-6m0wrct77r] .checkbox-label.small {
    font-size: 11px;
}

[b-6m0wrct77r] .mod-options-section {
    border-top: 1px dashed var(--adm-bd-e2e8f0);
    padding-top: 12px;
}

[b-6m0wrct77r] .mod-options-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

[b-6m0wrct77r] .mod-options-header span {
    font-weight: 600;
    font-size: 13px;
    color: var(--adm-fg-475569);
}

[b-6m0wrct77r] .btn-small {
    padding: 4px 10px;
    font-size: 12px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    transition: all .1s;
}

[b-6m0wrct77r] .btn-small:hover {
    background: #e2e8f0;
}

[b-6m0wrct77r] .mod-options-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[b-6m0wrct77r] .mod-option-header {
    display: grid;
    grid-template-columns: 1fr 90px 55px 55px 28px;
    gap: 8px;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--adm-fg-64748b);
    padding: 0 4px 6px;
    border-bottom: 1px solid var(--adm-bd-e2e8f0);
    margin-bottom: 6px;
}

[b-6m0wrct77r] .mod-option-header span:nth-child(2),
[b-6m0wrct77r] .mod-option-header span:nth-child(3),
[b-6m0wrct77r] .mod-option-header span:nth-child(4) {
    text-align: center;
}

[b-6m0wrct77r] .mod-option-row {
    display: grid;
    grid-template-columns: 1fr 90px 55px 55px 28px;
    gap: 8px;
    align-items: center;
    padding: 6px 4px;
    border-radius: 8px;
    transition: background .15s ease, transform .1s ease, opacity .2s ease;
}

[b-6m0wrct77r] .mod-option-row:hover {
    background: #f8fafc;
}

[b-6m0wrct77r] .mod-option-row.inactive {
    opacity: 0.45;
    background: #fafafa;
}

[b-6m0wrct77r] .mod-option-row.inactive:hover {
    opacity: 0.65;
}

[b-6m0wrct77r] .mod-option-row .checkbox-label {
    display: flex;
    justify-content: center;
}

/* Hide number input spinners for cleaner look */
[b-6m0wrct77r] .mod-option-row input[type="number"]::-webkit-outer-spin-button,
[b-6m0wrct77r] .mod-option-row input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

[b-6m0wrct77r] .mod-option-row input[type="number"] {
    -moz-appearance: textfield;
    text-align: right;
    padding: 6px 8px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Ensure inputs don't overflow their grid cells */
[b-6m0wrct77r] .mod-option-row input.input {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

[b-6m0wrct77r] .mod-option-row input.input.small {
    width: 100%;
    padding: 6px 8px;
}

/* Styled checkboxes for options */
[b-6m0wrct77r] .mod-option-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--adm-fg-3b82f6);
    cursor: pointer;
    transition: transform .1s ease;
}

[b-6m0wrct77r] .mod-option-row input[type="checkbox"]:hover {
    transform: scale(1.1);
}

[b-6m0wrct77r] .mod-option-row input[type="checkbox"]:checked {
    animation: checkPop-b-6m0wrct77r .2s ease;
}

@keyframes checkPop-b-6m0wrct77r {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Delete button for option row */
[b-6m0wrct77r] .mod-option-row .icon-btn.danger {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 6px;
    font-size: 14px;
    color: var(--adm-fg-94a3b8);
    transition: all .15s ease;
}

[b-6m0wrct77r] .mod-option-row .icon-btn.danger:hover {
    background: #fee2e2;
    color: #dc2626;
    transform: scale(1.1);
}

/* Add option button styling */
[b-6m0wrct77r] .btn-small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all .15s ease;
}

[b-6m0wrct77r] .btn-small:hover {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
    transform: translateY(-1px);
}

/* Save group button */
[b-6m0wrct77r] .mod-group-save-row .toolbar-btn.primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all .15s ease;
}

[b-6m0wrct77r] .mod-group-save-row .toolbar-btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--adm-sh-3b82f6-a0_3);
}

[b-6m0wrct77r] .mod-group-save-row {
    display: flex;
    justify-content: flex-end;
    padding-top: 16px;
    border-top: 1px solid var(--adm-bd-e2e8f0);
    margin-top: 16px;
}

/* ============================================
   Undo Toast
   ============================================ */
[b-6m0wrct77r] .undo-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--adm-bg-1e293b);
    color: var(--adm-fgon-ffffff-ffffff);
    border-radius: 12px;
    box-shadow: 0 8px 24px var(--adm-sh-000000-a0_25);
    z-index: 1000;
    font-size: 14px;
    animation: undoSlideUp-b-6m0wrct77r .3s ease-out;
}

@keyframes undoSlideUp-b-6m0wrct77r {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

[b-6m0wrct77r] .undo-btn {
    padding: 8px 14px;
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}

[b-6m0wrct77r] .undo-btn:hover {
    background: #2563eb;
    transform: scale(1.02);
}

[b-6m0wrct77r] .undo-btn:active {
    transform: scale(0.98);
}

[b-6m0wrct77r] .undo-dismiss {
    padding: 4px 8px;
    background: transparent;
    color: var(--adm-fg-ffffff-a0_6);
    border: none;
    font-size: 18px;
    cursor: pointer;
    border-radius: 6px;
    transition: all .15s;
}

[b-6m0wrct77r] .undo-dismiss:hover {
    background: var(--adm-bg-ffffff-a0_1);
    color: var(--adm-fgon-e2e5e9-ffffff);
}

/* ============================================
   Load Error Banner & Slow Load Indicator
   ============================================ */
[b-6m0wrct77r] .load-error-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #fecaca;
    border-radius: 10px;
    margin-bottom: 12px;
    animation: errorSlideIn-b-6m0wrct77r .3s ease-out;
}

@keyframes errorSlideIn-b-6m0wrct77r {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

[b-6m0wrct77r] .load-error-banner span {
    font-size: 14px;
    color: var(--adm-fgon-fae0e0-dc2626);
    font-weight: 500;
}

[b-6m0wrct77r] .retry-btn {
    padding: 8px 16px;
    background: #dc2626;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}

[b-6m0wrct77r] .retry-btn:hover {
    background: #b91c1c;
    transform: scale(1.02);
}

[b-6m0wrct77r] .retry-btn:active {
    transform: scale(0.98);
}

[b-6m0wrct77r] .slow-load-text {
    margin: 12px 0 0 0;
    font-size: 14px;
    color: var(--adm-fg-64748b);
    animation: slowLoadPulse-b-6m0wrct77r 1.5s ease-in-out infinite;
}

@keyframes slowLoadPulse-b-6m0wrct77r {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* ============================================
   Grid View Skeleton Cards
   ============================================ */
[b-6m0wrct77r] .skeleton-card {
    pointer-events: none;
}

[b-6m0wrct77r] .skeleton-card .card-img {
    background: #f1f5f9;
}

[b-6m0wrct77r] .skeleton-card .skeleton {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-6m0wrct77r 1.5s infinite;
    border-radius: 4px;
}

/* Dark mode support for error banner */
[b-6m0wrct77r] .load-error-banner {
    background: linear-gradient(135deg, var(--adm-bggrad-450a0a) 0%, var(--adm-bggrad-7f1d1d) 100%);
    border-color: var(--adm-bdon-fae0e0-991b1b);
}

[b-6m0wrct77r] .load-error-banner span {
    color: var(--adm-fgon-fae0e0-fca5a5);
}

[b-6m0wrct77r] .slow-load-text {
    color: var(--adm-fg-94a3b8);
}

/* ============================================
   Dark Theme Support - Full Catalog
   ============================================ */

/* Main page background */
[b-6m0wrct77r] .catalog-page {
    background: var(--adm-bg-0d1117);
    color: var(--adm-fgon-f8fafc-e6edf3);
}

/* Page heading — base rule sets color: #1e293b (dark slate) which
   collapses to invisible against the dark canvas. Flip to the
   bright slate-100 the rest of admin uses for primary headings. */
[b-6m0wrct77r] .catalog-title {
    color: var(--adm-fg-f1f5f9);
}

/* Category Panel */
[b-6m0wrct77r] .cat-panel {
    background: var(--adm-bg-161b22);
    border-color: var(--adm-bdon-ffffff-30363d);
}

[b-6m0wrct77r] .cat-panel-header {
    background: var(--adm-bg-21262d);
    border-color: var(--adm-bdon-f1f5f9-30363d);
}

[b-6m0wrct77r] .cat-panel-header h4 {
    color: var(--adm-fgon-f1f5f9-e6edf3);
}

[b-6m0wrct77r] .cat-search {
    background: var(--adm-bg-0d1117);
    border-color: var(--adm-bdon-f8fafc-30363d);
    color: var(--adm-fgon-f8fafc-e6edf3);
}

[b-6m0wrct77r] .cat-search:focus {
    border-color: var(--adm-bdon-f8fafc-58a6ff);
    box-shadow: 0 0 0 3px var(--adm-sh-58a6ff-a0_2);
}

[b-6m0wrct77r] .cat-all-btn {
    background: transparent;
    border-color: var(--adm-bd-30363d);
    color: var(--adm-fg-8b949e);
}

[b-6m0wrct77r] .cat-all-btn:hover {
    background: var(--adm-bg-30363d);
    color: var(--adm-fgon-e2e8f0-e6edf3);
}

[b-6m0wrct77r] .cat-all-btn.active {
    background: var(--adm-bg-1f6feb);
    border-color: var(--adm-bdon-dbeafe-1f6feb);
    color: var(--adm-fgon-dbeafe-ffffff);
}

[b-6m0wrct77r] .cat-archive-toggle,
[b-6m0wrct77r] .cat-add-btn {
    background: var(--adm-bg-21262d);
    border-color: var(--adm-bdon-f1f5f9-30363d);
    color: var(--adm-fgon-f1f5f9-8b949e);
}

[b-6m0wrct77r] .cat-archive-toggle:hover {
    background: var(--adm-bghov-f1f5f9-30363d);
    color: var(--adm-fgon-dbe3ed-e6edf3);
}

[b-6m0wrct77r] .cat-archive-toggle.active {
    background: var(--adm-bg-3d2f00);
    border-color: var(--adm-bdon-fef5d7-d29922);
}

[b-6m0wrct77r] .cat-add-btn {
    background: var(--adm-bg-1f6feb);
    border-color: var(--adm-bdon-dbeafe-1f6feb);
    color: var(--adm-fgon-dbeafe-ffffff);
}

[b-6m0wrct77r] .cat-add-btn:hover {
    background: #388bfd;
    border-color: #388bfd;
}

[b-6m0wrct77r] .cat-item {
    border-color: var(--adm-bd-21262d);
    color: var(--adm-fg-e6edf3);
}

[b-6m0wrct77r] .cat-item:hover {
    background: var(--adm-bg-21262d);
}

[b-6m0wrct77r] .cat-item.active {
    background: var(--adm-bg-1f3a5f);
    border-left-color: var(--adm-bdon-eff6ff-58a6ff);
}

[b-6m0wrct77r] .cat-item.drop-target {
    background: var(--adm-bg-1f3a5f);
    border-top-color: var(--adm-bdon-eff6ff-58a6ff);
}

[b-6m0wrct77r] .cat-item-name {
    color: var(--adm-fg-e6edf3);
}

[b-6m0wrct77r] .cat-name-input {
    background: var(--adm-bg-0d1117);
    border-color: var(--adm-bdon-f8fafc-58a6ff);
    color: var(--adm-fgon-f8fafc-e6edf3);
    box-shadow: 0 0 0 4px var(--adm-sh-58a6ff-a0_15), 0 4px 12px var(--adm-sh-000000-a0_3);
}

[b-6m0wrct77r] .cat-name-input:focus {
    border-color: var(--adm-bdon-f8fafc-79c0ff);
    box-shadow: 0 0 0 4px var(--adm-sh-79c0ff-a0_2), 0 4px 16px var(--adm-sh-000000-a0_4);
}

[b-6m0wrct77r] .cat-item-count {
    color: var(--adm-fgon-f1f5f9-8b949e);
}

[b-6m0wrct77r] .cat-edit-btn.save {
    background: #238636;
}

[b-6m0wrct77r] .cat-edit-btn.save:hover {
    background: var(--adm-bghov-16a34a-2ea043);
}

[b-6m0wrct77r] .cat-edit-btn.cancel {
    background: var(--adm-bg-30363d);
    color: var(--adm-fgon-e2e8f0-8b949e);
}

[b-6m0wrct77r] .cat-edit-btn.cancel:hover {
    background: var(--adm-bghov-e2e8f0-484f58);
    color: var(--adm-fgon-cbd5e1-e6edf3);
}

[b-6m0wrct77r] .cat-drag-handle {
    color: var(--adm-fg-8b949e);
}

[b-6m0wrct77r] .cat-drag-handle:hover {
    background: var(--adm-bg-30363d);
    color: var(--adm-fgon-e2e8f0-e6edf3);
}

/* QR toggle dark mode */
[b-6m0wrct77r] .qr-toggle-btn {
    background: var(--adm-bg-21262d);
    border-color: var(--adm-bdon-f1f5f9-30363d);
}

[b-6m0wrct77r] .qr-toggle-btn:hover {
    background: var(--adm-bghov-f1f5f9-30363d);
    border-color: var(--adm-bdon-dbe3ed-484f58);
}

[b-6m0wrct77r] .qr-toggle-btn.on {
    background: linear-gradient(135deg, var(--adm-bggrad-1a4d2e) 0%, var(--adm-bggrad-166534) 100%);
    border-color: var(--adm-bdon-e4f6eb-22c55e);
    box-shadow: 0 0 8px var(--adm-sh-22c55e-a0_3);
}

[b-6m0wrct77r] .qr-toggle-btn.on:hover {
    background: linear-gradient(135deg, var(--adm-bggrad-166534) 0%, var(--adm-bggrad-15803d) 100%);
    box-shadow: 0 0 12px var(--adm-sh-22c55e-a0_4);
}

[b-6m0wrct77r] .qr-toggle-btn.off {
    background: var(--adm-track-f87171-bg-21262d);
    border-color: var(--adm-bdon-f1f5f9-30363d);
    opacity: 0.5;
}

[b-6m0wrct77r] .qr-toggle-btn.off::after {
    background: #f87171;
}

[b-6m0wrct77r] .qr-toggle-btn.off:hover {
    background: var(--adm-bghov-f1f5f9-30363d);
    opacity: 0.7;
}

/* Toolbar */
[b-6m0wrct77r] .catalog-toolbar {
    background: var(--adm-bg-161b22);
    border-color: var(--adm-bdon-ffffff-30363d);
}

[b-6m0wrct77r] .toolbar-search input {
    background: var(--adm-bg-0d1117);
    border-color: var(--adm-bdon-f8fafc-30363d);
    color: var(--adm-fgon-f8fafc-e6edf3);
}

[b-6m0wrct77r] .toolbar-search input:focus {
    border-color: var(--adm-bdon-f8fafc-58a6ff);
    box-shadow: 0 0 0 3px var(--adm-sh-58a6ff-a0_2);
}

[b-6m0wrct77r] .toolbar-btn {
    background: var(--adm-bg-21262d);
    border-color: var(--adm-bdon-f1f5f9-30363d);
    color: var(--adm-fgon-f1f5f9-e6edf3);
}

[b-6m0wrct77r] .toolbar-btn:hover {
    background: var(--adm-bghov-f1f5f9-30363d);
    border-color: var(--adm-bdon-dbe3ed-8b949e);
}

[b-6m0wrct77r] .toolbar-btn.primary {
    background: #238636;
    border-color: #238636;
    color: #fff;
}

[b-6m0wrct77r] .toolbar-btn.primary:hover {
    background: var(--adm-bghov-16a34a-2ea043);
}

[b-6m0wrct77r] .toolbar-btn.active {
    background: var(--adm-bg-1f3a5f);
    border-color: var(--adm-bdon-eff6ff-58a6ff);
    color: var(--adm-fgon-eff6ff-58a6ff);
}

[b-6m0wrct77r] .toolbar-select {
    background: var(--adm-bg-0d1117);
    border-color: var(--adm-bdon-f8fafc-30363d);
    color: var(--adm-fgon-f8fafc-e6edf3);
}

[b-6m0wrct77r] .toolbar-select:focus {
    border-color: var(--adm-bdon-f8fafc-58a6ff);
}

/* Compact toolbar dark theme */
[b-6m0wrct77r] .toolbar-group {
    background: var(--adm-bg-21262d);
}

[b-6m0wrct77r] .toolbar-icon-btn {
    color: var(--adm-fg-e6edf3);
}

[b-6m0wrct77r] .toolbar-icon-btn:hover {
    background: var(--adm-bg-30363d);
}

[b-6m0wrct77r] .toolbar-icon-btn.active {
    background: var(--adm-bg-1f3a5f);
    color: var(--adm-fgon-eff6ff-58a6ff);
}

[b-6m0wrct77r] .toolbar-icon-btn.danger:hover {
    background: var(--adm-bg-3d1f1f);
}

/* QR chip label: the base rule paints "QR" near-black (#0f172a) for
   contrast on the light-green ON chip. On the dark canvas the ON chip
   is a dark-green gradient, so black collapses to invisible — flip the
   ON-state label to white. Drinks (cyan) chip keeps its teal label. */
[b-6m0wrct77r] .qr-toggle-btn.on:not(.drinks) .qr-icon {
    color: var(--adm-fgon-e4f6eb-ffffff);
}

/* View-toggle (list / grid) was the one toolbar control with no dark
   override, so it stayed white-on-dark and read as a broken control.
   Match the GitHub-dark palette the rest of this toolbar uses; the
   active view gets the same blue treatment as .toolbar-icon-btn.active
   so it's unambiguous which mode is selected. */
[b-6m0wrct77r] .view-toggle {
    border-color: var(--adm-bd-30363d);
}

[b-6m0wrct77r] .view-btn {
    background: var(--adm-bg-21262d);
    color: var(--adm-fgon-f1f5f9-e6edf3);
}

[b-6m0wrct77r] .view-btn:not(:last-child) {
    border-right-color: var(--adm-bdon-f1f5f9-30363d);
}

[b-6m0wrct77r] .view-btn:hover {
    background: var(--adm-bghov-f1f5f9-30363d);
}

[b-6m0wrct77r] .view-btn.active {
    background: var(--adm-bg-1f3a5f);
    color: var(--adm-fgon-eff6ff-58a6ff);
}

/* Compact pagination dark theme */
[b-6m0wrct77r] .pagination-compact-info,
[b-6m0wrct77r] .pagination-pages {
    color: var(--adm-fg-8b949e);
}

[b-6m0wrct77r] .pagination-total-compact {
    color: var(--adm-fgon-f1f5f9-8b949e);
    background: var(--adm-bg-21262d);
}

[b-6m0wrct77r] .pagination-sep {
    color: var(--adm-fg-484f58);
}

/* Filter bar */
[b-6m0wrct77r] .filter-bar {
    background: var(--adm-bg-161b22);
    border-color: var(--adm-bdon-ffffff-30363d);
}

[b-6m0wrct77r] .filter-bar-label {
    color: var(--adm-fg-8b949e);
}

[b-6m0wrct77r] .filter-count-badge {
    background: #58a6ff;
}

[b-6m0wrct77r] .filter-divider {
    background: var(--adm-bg-30363d);
}

/* Quick filters */
[b-6m0wrct77r] .filter-chip {
    background: var(--adm-bg-21262d);
    border-color: var(--adm-bdon-f1f5f9-30363d);
    color: var(--adm-fgon-f1f5f9-e6edf3);
}

[b-6m0wrct77r] .filter-chip:hover {
    background: var(--adm-bghov-f1f5f9-30363d);
}

[b-6m0wrct77r] .filter-chip.active {
    background: var(--adm-bg-1f3a5f);
    border-color: var(--adm-bdon-eff6ff-58a6ff);
    color: var(--adm-fgon-eff6ff-58a6ff);
}

/* Stats bar */
[b-6m0wrct77r] .stats-bar {
    background: transparent;
}

[b-6m0wrct77r] .stat-card {
    background: var(--adm-bg-161b22);
    border-color: var(--adm-bdon-ffffff-30363d);
}

[b-6m0wrct77r] .stat-card:hover {
    background: var(--adm-bghov-ffffff-21262d);
    border-color: var(--adm-bdon-eaf0f6-8b949e);
}

[b-6m0wrct77r] .stat-value {
    color: var(--adm-fg-e6edf3);
}

[b-6m0wrct77r] .stat-label {
    color: var(--adm-fg-8b949e);
}

[b-6m0wrct77r] .stat-card.stat-active {
    background: var(--adm-bg-1f3a5f);
    border-color: var(--adm-bdon-eff6ff-58a6ff);
}

[b-6m0wrct77r] .stats-collapse-btn {
    background: var(--adm-bg-161b22);
    border-color: var(--adm-bdon-ffffff-30363d);
    color: var(--adm-fgon-ffffff-8b949e);
}

[b-6m0wrct77r] .stats-collapse-btn:hover {
    background: var(--adm-bghov-ffffff-21262d);
    color: var(--adm-fgon-eaf0f6-e6edf3);
}

/* Data grid / table */
[b-6m0wrct77r] .datagrid {
    background: var(--adm-bg-161b22);
    border-color: var(--adm-bdon-ffffff-30363d);
}

[b-6m0wrct77r] .datagrid th {
    background: var(--adm-bg-21262d);
    border-color: var(--adm-bdon-f1f5f9-30363d);
    color: var(--adm-fgon-f1f5f9-e6edf3);
}

[b-6m0wrct77r] .datagrid th .col-label {
    color: var(--adm-fgon-f1f5f9-8b949e);
}

[b-6m0wrct77r] .datagrid td {
    border-color: var(--adm-bdon-ffffff-21262d);
    color: var(--adm-fgon-ffffff-e6edf3);
}

[b-6m0wrct77r] .datagrid tr:hover td {
    background: var(--adm-bg-21262d);
}

[b-6m0wrct77r] .datagrid tr.selected td {
    background: var(--adm-bg-1f3a5f);
}

[b-6m0wrct77r] .datagrid tr.focused td {
    box-shadow: inset 0 0 0 2px #58a6ff;
}

/* Row menu */
[b-6m0wrct77r] .row-menu {
    background: var(--adm-bg-161b22);
    border-color: var(--adm-bdon-ffffff-30363d);
    box-shadow: 0 -4px 12px var(--adm-sh-000000-a0_4);
}

[b-6m0wrct77r] .row-menu-item {
    color: var(--adm-fg-e6edf3);
}

[b-6m0wrct77r] .row-menu-item:hover {
    background: var(--adm-bg-21262d);
}

[b-6m0wrct77r] .row-menu-item.danger {
    color: var(--adm-fg-f85149);
}

[b-6m0wrct77r] .row-menu-item.danger:hover {
    background: var(--adm-bg-3d1f1f);
}

/* Pill toggle dark theme */
[b-6m0wrct77r] .pill-toggle {
    background: var(--adm-bg-484f58);
}

[b-6m0wrct77r] .pill-toggle .pill-knob {
    background: #e6edf3;
}

[b-6m0wrct77r] .pill-toggle.on {
    background: #238636;
}

[b-6m0wrct77r] .pill-toggle.warning.on {
    background: #d29922;
}

[b-6m0wrct77r] .datagrid td.toggle-cell:hover {
    background: var(--adm-bg-58a6ff-a0_08);
}

/* De-emphasize inactive/"off" toggles for less visual noise */
[b-6m0wrct77r] .pill-toggle:not(.on) {
    background: var(--adm-bg-30363d);
    opacity: 0.7;
}

[b-6m0wrct77r] .pill-toggle:not(.on) .pill-knob {
    background: var(--adm-bg-8b949e);
}

[b-6m0wrct77r] .datagrid td.toggle-cell:hover .pill-toggle:not(.on) {
    opacity: 1;
}

/* Disabled controls - very subtle */
[b-6m0wrct77r] .pill-toggle.disabled {
    background: var(--adm-bg-21262d);
    opacity: 0.4;
}

/* Grid view cards */
[b-6m0wrct77r] .grid-view .item-card {
    background: var(--adm-bg-161b22);
    border-color: var(--adm-bdon-ffffff-30363d);
}

[b-6m0wrct77r] .grid-view .item-card:hover {
    background: var(--adm-bghov-ffffff-21262d);
    border-color: var(--adm-bdon-eaf0f6-8b949e);
}

[b-6m0wrct77r] .grid-view .item-card.selected {
    background: var(--adm-bg-1f3a5f);
    border-color: var(--adm-bdon-eff6ff-58a6ff);
}

/* The grid card markup uses .card-name / .card-price / .card-category
   (.item-card-* was never in the DOM) so the dark overrides below never
   applied and the names rendered #1e293b on the dark card → invisible.
   Both class names are covered now in case either is used. */
[b-6m0wrct77r] .item-card-name,
[b-6m0wrct77r] .card-name {
    color: var(--adm-fg-e6edf3);
}

[b-6m0wrct77r] .item-card-price,
[b-6m0wrct77r] .card-price {
    color: var(--adm-fg-7ee787);
}

[b-6m0wrct77r] .item-card-category,
[b-6m0wrct77r] .card-category {
    color: #8b949e;
}

/* Bulk bar - modern glassmorphism effect */
[b-6m0wrct77r] .bulk-bar {
    background: var(--adm-bg-1e3a5f-a0_85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--adm-bd-58a6ff-a0_3);
    box-shadow: 0 8px 32px var(--adm-sh-000000-a0_4);
}

/* Advanced filters panel */
[b-6m0wrct77r] .advanced-filters-panel {
    background: var(--adm-bg-161b22);
    border-color: var(--adm-bdon-ffffff-30363d);
}

[b-6m0wrct77r] .filter-label {
    color: var(--adm-fg-8b949e);
}

[b-6m0wrct77r] .filter-select,
[b-6m0wrct77r] .price-input {
    background: var(--adm-bg-0d1117);
    border-color: var(--adm-bdon-f8fafc-30363d);
    color: var(--adm-fgon-f8fafc-e6edf3);
}

/* Column settings dropdown */
[b-6m0wrct77r] .column-settings-dropdown {
    background: var(--adm-bg-161b22);
    border-color: var(--adm-bdon-ffffff-30363d);
}

[b-6m0wrct77r] .column-settings-header {
    color: var(--adm-fg-e6edf3);
    border-color: var(--adm-bd-30363d);
}

[b-6m0wrct77r] .column-option {
    color: var(--adm-fg-e6edf3);
}

[b-6m0wrct77r] .column-option:hover {
    background: var(--adm-bg-21262d);
}

/* Pagination */
[b-6m0wrct77r] .pagination-bar {
    background: var(--adm-bg-161b22);
    border-color: var(--adm-bdon-ffffff-30363d);
}

[b-6m0wrct77r] .page-btn {
    background: var(--adm-bg-21262d);
    border-color: var(--adm-bdon-f1f5f9-30363d);
    color: var(--adm-fgon-f1f5f9-e6edf3);
}

[b-6m0wrct77r] .page-btn:hover {
    background: var(--adm-bghov-f1f5f9-30363d);
}

[b-6m0wrct77r] .page-btn.active {
    background: #58a6ff;
    border-color: #58a6ff;
    color: #0d1117;
}

/* Preview panel */
[b-6m0wrct77r] .preview-panel {
    background: var(--adm-bg-161b22);
    border-color: var(--adm-bdon-ffffff-30363d);
}

[b-6m0wrct77r] .preview-panel h3 {
    color: var(--adm-fgon-ffffff-e6edf3);
}

[b-6m0wrct77r] .preview-panel .preview-label {
    color: var(--adm-fgon-ffffff-8b949e);
}

[b-6m0wrct77r] .preview-panel .preview-value {
    color: var(--adm-fgon-ffffff-e6edf3);
}

/* Modals */
[b-6m0wrct77r] .modal-card {
    background: var(--adm-bg-161b22);
    border-color: var(--adm-bdon-ffffff-30363d);
}

[b-6m0wrct77r] .modal-header {
    background: var(--adm-bg-21262d);
    border-color: var(--adm-bdon-f1f5f9-30363d);
    color: var(--adm-fgon-f1f5f9-e6edf3);
}

[b-6m0wrct77r] .modal-body {
    color: var(--adm-fg-e6edf3);
}

/* Context menu */
[b-6m0wrct77r] .context-menu {
    background: var(--adm-bg-161b22);
    border-color: var(--adm-bdon-ffffff-30363d);
    box-shadow: 0 8px 24px var(--adm-sh-000000-a0_4);
}

[b-6m0wrct77r] .context-menu-item {
    color: var(--adm-fg-e6edf3);
}

[b-6m0wrct77r] .context-menu-item:hover {
    background: var(--adm-bg-21262d);
}

/* Keyboard shortcuts panel */
[b-6m0wrct77r] .shortcuts-panel {
    background: var(--adm-bg-161b22);
    border-color: var(--adm-bdon-ffffff-30363d);
}

[b-6m0wrct77r] .shortcuts-panel h3 {
    color: var(--adm-fgon-ffffff-e6edf3);
}

[b-6m0wrct77r] .shortcut-key {
    background: var(--adm-bg-21262d);
    border-color: var(--adm-bdon-f1f5f9-30363d);
    color: var(--adm-fgon-f1f5f9-e6edf3);
}

/* Undo toast */
[b-6m0wrct77r] .undo-toast {
    background: var(--adm-bg-21262d);
    border-color: var(--adm-bdon-f1f5f9-30363d);
}

/* Zone dropdown */
[b-6m0wrct77r] .zone-dropdown {
    background: var(--adm-bg-161b22);
    border-color: var(--adm-bdon-ffffff-30363d);
}

[b-6m0wrct77r] .zone-dropdown-header {
    color: var(--adm-fg-8b949e);
    border-bottom-color: var(--adm-bd-30363d);
}

[b-6m0wrct77r] .zone-pill.no-zone {
    background: var(--adm-bg-3d2f0b);
    border-color: var(--adm-bdon-fef3c7-d29922);
    color: var(--adm-fgon-fef3c7-d29922);
}

[b-6m0wrct77r] .zone-pill.no-zone:hover {
    background: var(--adm-bghov-fef3c7-4d3b11);
}

[b-6m0wrct77r] .zone-hint {
    color: var(--adm-fg-d29922);
}

[b-6m0wrct77r] .zone-option {
    color: var(--adm-fg-e6edf3);
}

[b-6m0wrct77r] .zone-option:hover {
    background: var(--adm-bg-21262d);
}

[b-6m0wrct77r] .zone-option.selected {
    /* Brighter than #1f3a5f so the selected row is clearly distinct from the
       dropdown bg (#161b22) and hover (#21262d) in dark mode, with explicit
       light text for legibility. */
    background: #2d5a8a;
    color: #e6edf3;
    font-weight: 500;
}

/* Actions dropdown */
[b-6m0wrct77r] .actions-dropdown {
    background: var(--adm-bg-161b22);
    border-color: var(--adm-bdon-ffffff-30363d);
    box-shadow: 0 4px 12px var(--adm-sh-000000-a0_4);
}

[b-6m0wrct77r] .actions-dropdown-item {
    color: var(--adm-fg-e6edf3);
}

[b-6m0wrct77r] .actions-dropdown-item:hover {
    background: var(--adm-bg-21262d);
}

/* ============================================
   Dark-theme contrast supplement (2026-05-12)
   ============================================
   The original Catalog dark overrides covered most surfaces but had
   gaps for a handful of base rules that set `color: #1e293b` (dark
   slate) or `background: #fff` without a corresponding dark variant.
   With unconditional dark theme now applied, those rules collide
   with the dark canvas and render invisible text or light pills.
   Each rule below targets one such gap. Keep this block at the
   end of the file so it always wins on equal-specificity cascade. */

/* Product table item names — base sets #1e293b which becomes
   dark-on-dark. Bright slate-100 makes them the brightest text in
   the row (correct hierarchy: primary content brighter than
   column headers). */
[b-6m0wrct77r] .datagrid .item-name,
[b-6m0wrct77r] .items-table-wrap.compact .item-name {
    color: var(--adm-fgon-ffffff-e6edf3);
}

/* Quick-action row buttons (✏️ edit, ⋮ kebab) — there are TWO
   base rules for .row-action-btn. The later one (line ~2635) sets
   background: #fff with a soft shadow, which paints a white pill
   on dark rows. Override with the same dark slate the rest of the
   page uses. */
[b-6m0wrct77r] .row-action-btn {
    background: var(--adm-bg-21262d);
    box-shadow: 0 2px 6px var(--adm-sh-000000-a0_35);
}
[b-6m0wrct77r] .row-action-btn:hover {
    background: var(--adm-bghov-f1f5f9-30363d);
    transform: scale(1.05);
}
[b-6m0wrct77r] .row-action-btn:active {
    background: var(--adm-bg-484f58);
}

/* Category panel action buttons (✏️ edit-name, 🗑️ archive) — base
   uses transparent bg with light-gray hover. The hover #e2e8f0 was
   readable on light theme but becomes a flash of light on the dark
   panel. Slate-700 hover keeps the affordance without flashing. */
[b-6m0wrct77r] .cat-item-btn:hover {
    background: var(--adm-bg-30363d);
}
[b-6m0wrct77r] .cat-item-btn:active {
    background: var(--adm-bg-484f58);
}

/* Generic table cell color — many <td> elements inherit color from
   .datagrid, but compact rows lack an explicit color rule. Inherit
   light. */
[b-6m0wrct77r] .datagrid td,
[b-6m0wrct77r] .items-table-wrap td {
    color: var(--adm-fgon-f8fafc-cbd5e1);
}
[b-6m0wrct77r] .datagrid td.num {
    color: var(--adm-fgon-ffffff-e6edf3); /* prices: same prominence as names */
}

/* ============================================
   Mobile + dark-theme audit pass (2026-05-12)
   ============================================
   Round 2 of the dark-theme gap fix. The previous supplement caught
   item names + row action buttons + cat-item-btn hover. This pass
   covers the surfaces that became visible once those were fixed:
   the table chrome (wrapper / sticky header / row hover / row
   selection) and the quick-add input row. */

/* Table wrapper — base sets background: #fff which would be visible
   when the table has fewer rows than the viewport. */
[b-6m0wrct77r] .items-table-wrap {
    background: var(--adm-bg-0d1117);
    border-color: var(--adm-bdon-f8fafc-30363d);
    box-shadow: 0 1px 3px var(--adm-sh-000000-a0_3);
}

/* Sticky thead — appears at the top of every scroll and on empty
   states. The base #f8fafc gray reads as a flash of light against
   the dark page. Slate-800 matches the rest of the admin shell. */
[b-6m0wrct77r] .datagrid thead {
    background: var(--adm-bg-161b22);
}
[b-6m0wrct77r] .datagrid thead::after {
    background: var(--adm-bg-30363d);
}

/* Row hover — base #f8fafc would render as a near-white flash when
   the operator mouses across rows. Slate-700 keeps the hover
   affordance subtle but visible on dark. */
[b-6m0wrct77r] .datagrid tbody tr {
    border-bottom-color: var(--adm-bdon-ffffff-21262d);
}
[b-6m0wrct77r] .datagrid tbody tr:hover {
    background: rgba(59, 130, 246, 0.06);
}
[b-6m0wrct77r] .datagrid tbody tr.selected {
    background: rgba(59, 130, 246, 0.14);
}

/* Quick-add row inputs — three white pills (name / price / category)
   that read as a stripe of bright white across the dark page. The
   row itself uses an indigo wash background (#6366f1 at 6% opacity);
   inputs inside should match the rest of admin's dark form inputs:
   slate-900 background, slate-700 border, slate-100 text. */
[b-6m0wrct77r] .quick-add-row .quick-add-name,
[b-6m0wrct77r] .quick-add-row .quick-add-price,
[b-6m0wrct77r] .quick-add-row .quick-add-cat {
    background: var(--adm-bg-0d1117);
    color: var(--adm-fgon-f8fafc-e6edf3);
    border-color: var(--adm-bdon-f8fafc-30363d);
}
[b-6m0wrct77r] .quick-add-row .quick-add-name::placeholder,
[b-6m0wrct77r] .quick-add-row .quick-add-price::placeholder {
    color: var(--adm-fgon-f8fafc-8b949e);
}
[b-6m0wrct77r] .quick-add-row .quick-add-currency {
    color: var(--adm-fg-8b949e);
}

/* Mobile-friendliness fix: the modifier-options editor rows used a
   rigid `1fr 90px 55px 55px 28px` grid with no phone override, so on a
   ~360px screen the name column was crushed and the row overflowed the
   item-editor modal. Relax the fixed columns at phone width and let the
   row wrap if it still doesn't fit. Desktop layout untouched. */
@media (max-width: 600px) {
    [b-6m0wrct77r] .mod-option-header,
    [b-6m0wrct77r] .mod-option-row {
        grid-template-columns: minmax(0, 1fr) 64px 46px 46px 24px;
        gap: 6px;
        font-size: 12px;
    }

    [b-6m0wrct77r] .mod-option-row input,
    [b-6m0wrct77r] .mod-option-header span {
        min-width: 0;
    }
}

/* ============================================
   Mobile audit fixes (2026-05-18). Appended at EOF so these win by
   source order over the earlier ≤600 blocks (this file has three; a
   rule placed in the first is overridden by later equal-specificity
   ones). Pure .razor.css → single @media is correct.
   ============================================ */
@media (max-width: 600px) {
    /* iOS Safari auto-zooms any focused input under 16px, jumping the
       layout on the page's most-used controls. ItemEditor already does
       this; Catalog's own search/filter inputs did not. */
    [b-6m0wrct77r] .toolbar-search input,
    [b-6m0wrct77r] .cat-search {
        font-size: 16px;
    }

    /* The full-mode action group (Modificadores / Nuevo artículo /
       Acciones▾) was flex-wrap:nowrap; flex-shrink:0 — it cannot
       compress, so three padded buttons overflow horizontally inside
       the column the toolbar becomes on a phone. Let it wrap. */
    [b-6m0wrct77r] .toolbar-actions {
        flex-wrap: wrap;
        flex-shrink: 1;
    }
}

/* ============================================
   Mobile audit L3/L4: touch-target + tiny-font polish for secondary
   chrome. Gated on (pointer: coarse) — the same convention the file
   already uses for .cat-item-btn (l.406) — so it lifts these to the
   44px floor on touch devices without changing the desktop density.
   At EOF so it wins the source-order trap.
   ============================================ */
@media (any-pointer: coarse) {
    /* Grid-card view: edit/duplicate/archive live ONLY in a hover overlay
       with no tap-to-edit fallback — invisible/unreachable on a touch
       tablet. Show them always, but drop the 50%-black wash that would dim
       every thumbnail: pin the white buttons to the top-right corner over a
       transparent overlay, with a shadow so they read against any image. */
    [b-6m0wrct77r] .card-overlay {
        opacity: 1;
        background: transparent;
        align-items: flex-start;
        justify-content: flex-end;
        padding: 6px;
        gap: 6px;
    }
    [b-6m0wrct77r] .card-action {
        box-shadow: 0 1px 5px var(--adm-sh-000000-a0_4);
    }

    /* List (items-row) view: same hover-only quick actions → always show. */
    [b-6m0wrct77r] .row-quick-actions {
        display: flex;
    }

    /* Icon/toggle buttons with fixed 28px (or ~24-32px) boxes. min-* wins
       over the explicit width/height, so these reach 44px on touch. */
    [b-6m0wrct77r] .qr-toggle-btn,
    [b-6m0wrct77r] .stats-collapse-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Padding-sized buttons → 44px floor, flex-centered so the label
       stays centred at the larger height. */
    [b-6m0wrct77r] .cat-all-btn,
    [b-6m0wrct77r] .bulk-btn,
    [b-6m0wrct77r] .view-btn,
    [b-6m0wrct77r] .zone-pill {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* "Seleccionar todo"-style underline link: padding:0 gives it almost
       no tap area. Grow it without a rigid 44px box that would misalign
       the inline bulk bar. */
    [b-6m0wrct77r] .bulk-link {
        padding: 8px 8px;
    }

    /* L4: the smallest labels (10-11px) are below comfortable phone
       legibility — nudge to 12px. (12px ones are left as-is.) */
    [b-6m0wrct77r] .cat-all-btn,
    [b-6m0wrct77r] .bulk-link,
    [b-6m0wrct77r] .stats-collapse-btn {
        font-size: 12px;
    }
}

/* ── Dark-theme corrections ──────────────────────────────────────────
   Admin is always dark (theme.js forces /admin/* dark), but these
   elements kept a LIGHT-base background with no dark override (the
   earlier dark overrides only touched text colour, never background).
   Background/border-only here → no text-contrast risk (text on these
   is already theme-muted). Appended at EOF so it wins over the
   duplicate light definitions above without untangling them. */
[b-6m0wrct77r] .cat-item-count {
    background: var(--adm-bg-21262d);          /* was #f1f5f9 — light pill in dark UI */
}
[b-6m0wrct77r] .datagrid th:hover {
    background: var(--adm-bghov-f1f5f9-21262d);          /* was #f1f5f9 — header flashed light */
}
[b-6m0wrct77r] .item-card {
    background: var(--adm-bg-161b22);          /* was #fff — grid/image cards white */
    border-color: var(--adm-bdon-ffffff-30363d);
}
[b-6m0wrct77r] .zone-dropdown {
    background: var(--adm-bg-161b22);          /* printer/zone popup was white */
    border-color: var(--adm-bdon-ffffff-30363d);
}
[b-6m0wrct77r] .zone-dropdown-header {
    color: var(--adm-fg-8b949e);
    border-bottom-color: var(--adm-bd-30363d);
}

/* ── Modal dark theming (bounded + contrast-safe) ────────────────────
   .shortcuts-modal / .duplicates-modal / .modifiers-manager-modal were
   fully light (white bg, hardcoded dark text, light sub-surfaces like
   kbd / .dup-group-header). Every selector below is SCOPED to those
   modal classes so it can't affect the rest of the app: dark surface
   + forced light text on the container and every known light
   sub-surface / dark-text child → readable on dark in all cases.
   Not pixel-perfect (badges may want a final visual polish) but
   strictly better and contrast-safe. */
.shortcuts-modal[b-6m0wrct77r],
.duplicates-modal[b-6m0wrct77r] {
    background: var(--adm-bg-161b22);
    border: 1px solid var(--adm-bdon-ffffff-30363d);
    color: var(--adm-fgon-ffffff-e6edf3);
}
/* Header: base ::deep .modal-header h3 is #1e293b (near-black) and the
   divider is a light line — both vanish on the dark surface, so the
   modal looked title-less. These scoped, higher-specificity rules win. */
.shortcuts-modal .modal-header[b-6m0wrct77r],
.duplicates-modal .modal-header[b-6m0wrct77r],
.shortcuts-modal .modal-footer[b-6m0wrct77r],
.duplicates-modal .modal-footer[b-6m0wrct77r] {
    border-color: var(--adm-bdon-ffffff-30363d);
}
.shortcuts-modal .modal-header h3[b-6m0wrct77r],
.duplicates-modal .modal-header h3[b-6m0wrct77r] {
    color: var(--adm-fgon-ffffff-e6edf3);
}
.shortcuts-modal .modal-close[b-6m0wrct77r],
.duplicates-modal .modal-close[b-6m0wrct77r] {
    color: var(--adm-fgon-ffffff-8b949e);
}
.shortcuts-modal .shortcut-item[b-6m0wrct77r],
.shortcuts-modal .shortcut-item span[b-6m0wrct77r],
.duplicates-modal .duplicates-info[b-6m0wrct77r] {
    color: var(--adm-fgon-ffffff-e6edf3);
}
.shortcuts-modal .shortcuts-section h4[b-6m0wrct77r] {
    color: var(--adm-fgon-ffffff-8b949e); /* section labels: muted, not full white */
}
.shortcuts-modal .shortcut-item kbd[b-6m0wrct77r] {
    background: var(--adm-bg-21262d);
    color: var(--adm-fgon-f1f5f9-e6edf3);
    border-color: var(--adm-bdon-f1f5f9-30363d);
}
.duplicates-modal .duplicate-group[b-6m0wrct77r] {
    background: var(--adm-bg-21262d);
    border-color: var(--adm-bdon-f1f5f9-30363d);
}
.duplicates-modal .dup-group-header[b-6m0wrct77r] {
    background: var(--adm-bg-30363d);
    color: var(--adm-fgon-e2e8f0-e6edf3);
    border-bottom-color: var(--adm-bdon-e2e8f0-30363d);
}
.duplicates-modal .dup-item[b-6m0wrct77r] {
    border-bottom-color: var(--adm-bdon-ffffff-30363d);
}
/* These four were the invisible/white-on-dark elements: the dark theme
   targeted .dup-item-name/.dup-item-cat but the markup uses .dup-name/
   .dup-category/.dup-price/.dup-action — class-name mismatch. */
.duplicates-modal .dup-name[b-6m0wrct77r] {
    color: var(--adm-fgon-ffffff-e6edf3);
}
.duplicates-modal .dup-category[b-6m0wrct77r] {
    background: var(--adm-bg-161b22);
    border-color: var(--adm-bdon-ffffff-30363d);
    color: var(--adm-fgon-ffffff-8b949e);
}
.duplicates-modal .dup-price[b-6m0wrct77r] {
    color: var(--adm-fgon-ffffff-7ee787);
}
.duplicates-modal .dup-action[b-6m0wrct77r] {
    background: var(--adm-bg-21262d);
    border-color: var(--adm-bdon-f1f5f9-30363d);
    color: var(--adm-fgon-f1f5f9-e6edf3);
}
.duplicates-modal .dup-action:hover[b-6m0wrct77r] {
    background: var(--adm-bghov-f1f5f9-1f3a5f);
    border-color: var(--adm-bdon-d0e5ff-58a6ff);
    color: var(--adm-fgon-d0e5ff-58a6ff);
}
.duplicates-modal .no-duplicates p[b-6m0wrct77r] {
    color: var(--adm-fgon-ffffff-8b949e);
}
[b-6m0wrct77r] .modifiers-manager-modal {
    background: var(--adm-bg-161b22);
    border-color: var(--adm-bdon-ffffff-30363d);
}
[b-6m0wrct77r] .modifiers-manager-modal .modal-header h3 {
    color: var(--adm-fgon-ffffff-e6edf3);
}
[b-6m0wrct77r] .modifiers-manager-modal .modal-body {
    background: var(--adm-bg-161b22);
    color: var(--adm-fgon-ffffff-e6edf3);
}
/* Group-card internals: the base rules (l.~3900-4260) are all light
   (#fff/#f8fafc surfaces, #1e293b text). Every selector here is scoped
   under .modifiers-manager-modal so it cannot reach POS Carta or any
   other modal — bounded + contrast-safe, same approach as the
   shortcuts/duplicates dark block above. */
[b-6m0wrct77r] .modifiers-manager-modal .mod-group-card {
    background: var(--adm-bg-1c2128);
    border-color: var(--adm-bdon-f8fafc-30363d);
}
[b-6m0wrct77r] .modifiers-manager-modal .mod-group-card.expanded {
    background: var(--adm-bg-161b22);
    border-color: var(--adm-bdon-ffffff-58a6ff);
    box-shadow: 0 4px 12px var(--adm-sh-58a6ff-a0_15);
}
[b-6m0wrct77r] .modifiers-manager-modal .mod-group-header:hover {
    background: var(--adm-bg-21262d);
}
[b-6m0wrct77r] .modifiers-manager-modal .mod-group-summary .mod-group-name {
    color: var(--adm-fgon-ffffff-e6edf3);
}
[b-6m0wrct77r] .modifiers-manager-modal .mod-group-summary .mod-group-meta {
    color: var(--adm-fgon-ffffff-8b949e);
}
[b-6m0wrct77r] .modifiers-manager-modal .badge-required {
    color: var(--adm-fgon-ffffff-f87171);
}
[b-6m0wrct77r] .modifiers-manager-modal .badge-items {
    color: var(--adm-fgon-e2ecfe-58a6ff);
    background: var(--adm-bg-58a6ff-a0_15);
}
[b-6m0wrct77r] .modifiers-manager-modal .icon-btn:hover {
    background: var(--adm-bg-30363d);
}
[b-6m0wrct77r] .modifiers-manager-modal .icon-btn.danger:hover {
    background: var(--adm-bg-3d1f1f);
}
[b-6m0wrct77r] .modifiers-manager-modal .expand-icon {
    color: var(--adm-fgon-ffffff-8b949e);
}
[b-6m0wrct77r] .modifiers-manager-modal .mod-group-body {
    border-top-color: var(--adm-bdon-ffffff-30363d);
}
[b-6m0wrct77r] .modifiers-manager-modal .field-row label,
[b-6m0wrct77r] .modifiers-manager-modal .field-row-inline label,
[b-6m0wrct77r] .modifiers-manager-modal .checkbox-label,
[b-6m0wrct77r] .modifiers-manager-modal .mod-options-header span {
    color: var(--adm-fgon-ffffff-c9d1d9);
}
[b-6m0wrct77r] .modifiers-manager-modal .input {
    background: var(--adm-bg-0d1117);
    border-color: var(--adm-bdon-f8fafc-30363d);
    color: var(--adm-fgon-f8fafc-e6edf3);
}
[b-6m0wrct77r] .modifiers-manager-modal .input::placeholder {
    color: var(--adm-fgon-f8fafc-6e7681);
}
[b-6m0wrct77r] .modifiers-manager-modal .input:focus {
    border-color: var(--adm-bdon-f8fafc-58a6ff);
    box-shadow: 0 0 0 3px var(--adm-sh-58a6ff-a0_2);
}
[b-6m0wrct77r] .modifiers-manager-modal .mod-options-section {
    border-top-color: var(--adm-bdon-ffffff-30363d);
}
[b-6m0wrct77r] .modifiers-manager-modal .btn-small {
    background: var(--adm-bg-21262d);
    border-color: var(--adm-bdon-f1f5f9-30363d);
    color: var(--adm-fgon-f1f5f9-e6edf3);
}
[b-6m0wrct77r] .modifiers-manager-modal .btn-small:hover {
    background: var(--adm-bghov-f1f5f9-30363d);
}
[b-6m0wrct77r] .modifiers-manager-modal .mod-option-header {
    color: var(--adm-fgon-ffffff-8b949e);
    border-bottom-color: var(--adm-bdon-ffffff-30363d);
}
[b-6m0wrct77r] .modifiers-manager-modal .mod-option-row:hover {
    background: var(--adm-bg-21262d);
}
[b-6m0wrct77r] .modifiers-manager-modal .muted {
    color: var(--adm-fgon-ffffff-8b949e);
}

/* Higher-specificity dark for all inputs/selects inside the modal — the
   plain `.modifiers-manager-modal .input` rules above lose to global
   site.css `.input` rules (and to native browser defaults on raw
   <input>/<select> elements without `.input`). Element selectors raise
   specificity; bounded to this modal so they can't leak. */
[b-6m0wrct77r] .modifiers-manager-modal input[type="text"],
[b-6m0wrct77r] .modifiers-manager-modal input[type="number"],
[b-6m0wrct77r] .modifiers-manager-modal input[type="search"],
[b-6m0wrct77r] .modifiers-manager-modal select,
[b-6m0wrct77r] .modifiers-manager-modal textarea {
    background: var(--adm-bg-0d1117);
    border: 1px solid var(--adm-bdon-f8fafc-30363d);
    color: var(--adm-fgon-f8fafc-e6edf3);
}
[b-6m0wrct77r] .modifiers-manager-modal input[type="text"]:focus,
[b-6m0wrct77r] .modifiers-manager-modal input[type="number"]:focus,
[b-6m0wrct77r] .modifiers-manager-modal input[type="search"]:focus,
[b-6m0wrct77r] .modifiers-manager-modal select:focus,
[b-6m0wrct77r] .modifiers-manager-modal textarea:focus {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-58a6ff);
    box-shadow: 0 0 0 3px var(--adm-sh-58a6ff-a0_2);
}
[b-6m0wrct77r] .modifiers-manager-modal input::placeholder,
[b-6m0wrct77r] .modifiers-manager-modal textarea::placeholder {
    color: var(--adm-fgon-f8fafc-6e7681);
}
[b-6m0wrct77r] .modifiers-manager-modal option {
    background: var(--adm-bg-0d1117);
    color: var(--adm-fgon-f8fafc-e6edf3);
}
/* Buttons in the modal (other than the green primary) */
[b-6m0wrct77r] .modifiers-manager-modal .btn-small {
    background: var(--adm-bg-21262d);
    border: 1px solid var(--adm-bdon-f1f5f9-30363d);
    color: var(--adm-fgon-f1f5f9-c9d1d9);
}
[b-6m0wrct77r] .modifiers-manager-modal .btn-small:hover {
    background: var(--adm-bghov-f1f5f9-30363d);
}

/* ── Zone/printer popup ──────────────────────────────────────────────
   Superseded: the popup is now position:fixed (see the base rule) and
   anchored to the pill's bounding rect via inline left/top, so it
   escapes the .cat-list scroll container entirely. The old upward/
   downward `top`/`bottom` mitigation is no longer needed; only normalise
   the stray margins so the inline top isn't offset by a residual gap. */
[b-6m0wrct77r] .zone-dropdown {
    bottom: auto;
    margin: 0;
}

/* ── Right-click menu (.ctx-menu) dark theming ───────────────────────
   The dark rules were written for `.context-menu`, but the markup uses
   `.ctx-menu` — class-name mismatch, so the menu stayed white. These
   match the actual class. Background-on-dark + light text → safe. */
.ctx-menu[b-6m0wrct77r] {
    background: var(--adm-bg-161b22);
    border-color: var(--adm-bdon-ffffff-30363d);
    box-shadow: 0 10px 25px var(--adm-sh-000000-a0_5);
}
.ctx-menu button[b-6m0wrct77r] {
    color: var(--adm-fgon-ffffff-e6edf3);
}
.ctx-menu button:hover[b-6m0wrct77r] {
    background: var(--adm-bg-21262d);
}
.ctx-menu button.danger[b-6m0wrct77r] {
    color: var(--adm-fgon-ffffff-f87171);
}
.ctx-menu hr[b-6m0wrct77r] {
    border-top-color: var(--adm-bdon-ffffff-30363d);
}

/* ── Preview panel dark theming ──────────────────────────────────────
   .preview-panel base is white; the earlier ::deep override didn't win
   (responsive/specificity). EOF wins on equal specificity. Surface +
   readable text; price keeps its green accent. */
[b-6m0wrct77r] .preview-panel,
[b-6m0wrct77r] .preview-body {
    background: var(--adm-bg-161b22);
    color: var(--adm-fgon-ffffff-e6edf3);
}
[b-6m0wrct77r] .preview-header {
    border-bottom-color: var(--adm-bd-30363d);
}
[b-6m0wrct77r] .preview-header h3,
[b-6m0wrct77r] .preview-name {
    color: var(--adm-fg-e6edf3);
}
[b-6m0wrct77r] .preview-category {
    color: var(--adm-fg-8b949e);
}
[b-6m0wrct77r] .preview-image,
[b-6m0wrct77r] .preview-no-image {
    background: var(--adm-bg-21262d);
    color: var(--adm-fgon-f1f5f9-8b949e);
}
[b-6m0wrct77r] .preview-panel .modal-close {
    color: var(--adm-fgon-ffffff-8b949e);
}

/* AI menu import: full-screen inline overlay (works inside the POS Carta sheet
   and the admin page). Dark to match the panel; scrollable on small screens. */
.ai-import-overlay[b-6m0wrct77r] {
    position: fixed;
    inset: 0;
    z-index: 4000;
    background: var(--adm-bg-0d1117);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ───────── Carta (menu) — phone cleanup ─────────
   On phones the page read as broken/confusing: a stark white box around the
   grid on the dark page, two competing search boxes, a redundant inline
   quick-add form, and filter chips overflowing off-screen. These ≤600px
   overrides declutter it; desktop/tablet (≥601px) is untouched. */
@media (max-width: 600px) {
    /* Kill the white box around the product grid — the cards are already dark
       (.grid-view .item-card #161b22), so the wrapper just needs to disappear. */
    [b-6m0wrct77r] .items-grid-wrap {
        background: transparent;
        border: none;
        padding: 0;
        box-shadow: none;
        min-height: 0;
    }

    /* One search, not two: drop the category "Buscar…" (categories stay
       tappable); the item "Buscar artículos…" is the one operators need. */
    [b-6m0wrct77r] .cat-search-row .cat-search { display: none; }

    /* Single add path on phones: drop the redundant inline quick-add row —
       "Nuevo artículo" (the full editor) is the add button. */
    [b-6m0wrct77r] .quick-add-row { display: none; }

    /* Filter chips wrap to multiple rows instead of overflowing with a
       half-cut chip at the edge. */
    [b-6m0wrct77r] .filter-bar-chips { flex-wrap: wrap; }
}

/* ───────── Carta (menu) — phone layout rethink ─────────
   The desktop list view is a wide <table> (won't fit a phone), so phones are
   forced into the image-card grid — which shows only ~2 items/screen and wastes
   space on a no-image menu. Re-lay the grid as compact HORIZONTAL rows (thumb
   left, info right, 1 per row) so it scans like a list, ~5-6 items/screen.
   Desktop/tablet (≥601px) keep the card grid + the table list view. */
@media (max-width: 600px) {
    [b-6m0wrct77r] .items-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    /* Make position:sticky actually work for the category headers: neutralize the
       two ancestor scroll-container traps on phones. .catalog-right was
       overflow:hidden, and .catalog-page was overflow-x:hidden (which blockifies
       overflow-y to "auto" → a scroll container, the classic sticky-killer).
       overflow-x:clip clips horizontally WITHOUT establishing a scroll container,
       so sticky resolves against the (iframe) document and the header pins to the
       top of the visible area. */
    [b-6m0wrct77r] .catalog-page { overflow-x: clip; }
    [b-6m0wrct77r] .catalog-right { overflow: visible; }
    /* Sticky category section header (phone grid is grouped by category). Pins
       to the top of the scroll area as you scroll so it always shows which
       category the visible items belong to — the next category's header pushes
       it up GitHub/iOS-list style. Spans the single column; opaque dark bg so
       cards don't bleed through when pinned. */
    [b-6m0wrct77r] .cat-section-header {
        grid-column: 1 / -1;
        position: sticky;
        top: 0;
        z-index: 6;
        background: var(--adm-bg-0d1117);
        border-bottom: 1px solid var(--adm-bdon-ffffff-30363d);
        color: var(--adm-fgon-ffffff-cbd5e1);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        padding: 8px 10px 7px;
        margin: 4px 0 0;
        border-radius: 6px 6px 0 0;
    }
    [b-6m0wrct77r] .item-card {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        position: relative;
        min-height: 100px;
    }
    /* Thumbnail: a small left square instead of a full-width 4:3 block.
       100px wide so a row of three 30px action buttons fits across it. */
    [b-6m0wrct77r] .card-img {
        flex: 0 0 100px;
        width: 100px;
        aspect-ratio: auto;
        align-self: stretch;
    }
    [b-6m0wrct77r] .card-img-placeholder { font-size: 22px; }
    /* Info fills the rest, vertically centered. */
    [b-6m0wrct77r] .card-body {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        padding: 8px 12px;
    }
    [b-6m0wrct77r] .card-name { font-size: 0.95rem; }
    /* Actions: a compact row pinned to the BOTTOM of the small thumb. Keep the
       overlay TRANSPARENT (don't dim the photo — same rationale as the coarse
       block above) and let the white buttons' shadow carry contrast. Three
       30px buttons + gaps fit inside the 100px thumb without clipping. */
    [b-6m0wrct77r] .card-overlay {
        opacity: 1;
        background: transparent;
        flex-direction: row;
        align-items: flex-end;
        justify-content: center;
        gap: 4px;
        padding: 5px;
    }
    [b-6m0wrct77r] .card-action {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    /* Pagination: dark the white select / page input / buttons so the bar
       matches the dark page instead of floating white boxes. */
    [b-6m0wrct77r] .page-size-select,
    [b-6m0wrct77r] .page-jump-input,
    [b-6m0wrct77r] .pagination-btn {
        background: var(--adm-bg-161b22);
        border-color: var(--adm-bdon-ffffff-30363d);
        color: var(--adm-fgon-ffffff-e6edf3);
    }
}

/* ───────── Admin Carta (standalone /admin/{slug}/catalog) — phone fit ─────────
   The full admin Carta is power-user territory, reached via the "Avanzado" pill
   in the POS Catálogo sheet. It had NO mobile treatment for the stats bar, the
   category-panel header, or the per-category control rows, so on a phone the
   stat cards stretched oddly, "Todos" was cut off at the right edge, and the
   Cocina/QR/datáfono/edit/trash row overflowed horizontally. Make them fit. */
@media (max-width: 600px) {
    /* Stat cards: two per row instead of stretching to one-per-row giants. */
    [b-6m0wrct77r] .stat-card {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
    }
    /* Category-panel header: let "Todos" / "+ Categoría" wrap rather than the
       "Todos" button getting clipped past the right edge. */
    [b-6m0wrct77r] .cat-panel-title-row {
        flex-wrap: wrap;
    }
    [b-6m0wrct77r] .cat-all-btn {
        flex: 0 0 auto;
    }
    /* Per-category controls wrap to a second line instead of overflowing. */
    [b-6m0wrct77r] .cat-item-controls {
        flex-wrap: wrap;
        gap: 6px 4px;
    }

    /* "Acciones ▾" dropdown is right-aligned (right:0), so from the left-positioned
       toolbar button it extended LEFTWARD off the screen edge (its items were
       clipped on the left). Open it rightward from the button instead, capped to
       the viewport. */
    [b-6m0wrct77r] .actions-dropdown {
        left: 0;
        right: auto;
        max-width: calc(100vw - 24px);
    }
}

/* ───────── List view (.datagrid) — opt OUT of the global bare-table fallback ─────────
   admin-mobile.css ships a safety net for tables that aren't wrapped in
   .table-wrap:

       .admin-content table:not(.table-wrap table) { display: block; overflow-x: auto; }

   It fires at ≤1024px (so: phones AND the landscape-tablet target) and its
   specificity is (0,2,2) — .admin-content (0,1,0) + table (0,0,1) + :not() taking
   its argument's (0,1,1). Our scoped `::deep .datagrid` is only `[b-hash] .datagrid`
   = (0,2,0), so the global rule WINS and the datagrid gets display:block.

   That is the right default for a bare table, but wrong here: this table already
   lives in .items-table-wrap, which IS the scroll box (overflow:auto + max-height +
   position:relative) and is what `.datagrid thead { position:sticky; top:0 }` pins
   against. display:block makes the table its own nested scroll container, so
     (a) the sticky header resolves against that inner scrollport — which has no
         height constraint and therefore never scrolls — and stops pinning, and
     (b) you get two nested horizontal scrollbars.

   Restore the table box and let .items-table-wrap do the scrolling, as it did
   before the global layer existed. `th` is white-space:nowrap, so the table's
   min-content width is already ~690px: columns keep readable widths and simply
   scroll sideways inside the wrap — no squashing, no max-content blow-out from a
   long dish name. All three properties below are just the UA/page defaults, i.e.
   this block only undoes the fallback; >1024px never matched it, so desktop is
   provably untouched. Selector is (0,3,0) to outrank the global (0,2,2). */
@media (max-width: 1024px) {
    [b-6m0wrct77r] .items-table-wrap .datagrid {
        display: table;
        max-width: none;
        overflow-x: visible;
    }
}

/* ── Phone: no scroll-within-scroll for the category list ───────────────────
   Kept at the END of the file: a media query adds no specificity, so overriding
   ::deep .cat-list's max-height from a block declared above it would silently lose.

   .cat-list has max-height:400px + overflow-y:auto so the categories keep their own
   scrollbar next to the (taller) product grid on desktop. On a phone the two panes
   are stacked, so that inner scroller just traps the finger: the page and the list
   fight over the gesture and the list can only show ~2 rows at a time. Let it grow
   and let the page scroll normally. */
@media (max-width: 640px) {
    [b-6m0wrct77r] .cat-list {
        max-height: none;
        overflow-y: visible;
    }
}

/* ── Line icons (replacing the old emoji) ──────────────────────────────────
   One size for every icon button on the page, so the toolbar, category rows and
   product-card actions line up instead of each inheriting a different emoji
   font-size. currentColor means they pick up hover / danger / disabled states. */
[b-6m0wrct77r] .ic {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    pointer-events: none;  /* clicks belong to the button, not the glyph */
}

[b-6m0wrct77r] .card-action .ic {
    width: 19px;
    height: 19px;
}

/* The empty-image placeholder was a 28px camera emoji; the stroked icon reads at a
   larger size without shouting. */
[b-6m0wrct77r] .card-img-placeholder .ic {
    width: 30px;
    height: 30px;
    opacity: 0.55;
}

/* Context-menu rows put the icon beside a label. */
[b-6m0wrct77r] .ctx-item .ic,
[b-6m0wrct77r] .context-menu-item .ic {
    margin-right: 8px;
    vertical-align: -3px;
}

/* ── Phone: uniform stats grid, and no orphaned collapse arrow ──────────────
   .stats-bar is a wrapping flex row ending in the ▲/▼ collapse button. Once the
   stat cards wrapped, that button was left stranded alone on its own row — a lone
   arrow floating at the edge. Lay the cards out 2-up on a uniform grid and let the
   toggle span the full width, so it reads as a deliberate "collapse" bar. */
@media (max-width: 640px) {
    [b-6m0wrct77r] .stats-bar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        min-height: 0;
    }

    [b-6m0wrct77r] .stats-bar .stat-card {
        min-width: 0;
    }

    /* The stats bar defaults to its `stats-collapsed` state, where
       `.stats-bar.stats-collapsed .stat-content` lays the number and its label out in
       a ROW — a deliberate compact chip. That's fine for "15 · Total", but the price
       tile's value is a whole range ("1,20 € - 8,50 €"), which starved its label down
       to 31px and split "Precios" into "Preci/os". Rather than fight the collapsed
       design, give the one long tile the full width. */
    [b-6m0wrct77r] .stats-bar .stat-card.stat-neutral {
        grid-column: 1 / -1;
    }

    /* Labels are short single words; never hyphenate them mid-letter. */
    [b-6m0wrct77r] .stats-bar .stat-label {
        white-space: nowrap;
    }

    /* The base rule is `position:absolute; right:8px; top:50%` — which is what left
       it stranded as a lone arrow at the edge once the cards wrapped. It must come
       back into flow before it can be placed in the grid, otherwise a full-width
       absolute box just paints over the cards. */
    [b-6m0wrct77r] .stats-collapse-btn {
        position: static;
        transform: none;
        grid-column: 1 / -1;
        width: 100%;
        height: 32px;
    }
}

/* Empty-state glyph: the emoji was ~48px, so the stroked icon needs to be sized up
   explicitly or it reads as a stray 18px mark in the middle of an empty panel. */
[b-6m0wrct77r] .empty-icon .ic {
    width: 44px;
    height: 44px;
    opacity: 0.45;
}

[b-6m0wrct77r] .badge-items .ic,
[b-6m0wrct77r] .col-icon .ic {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
}

/* Collapse bar: a caption + chevron, not a lone glyph in an empty box. */
[b-6m0wrct77r] .stats-collapse-label {
    font-size: 0.8rem;
    font-weight: 600;
}

[b-6m0wrct77r] .stats-collapse-chevron {
    width: 16px;
    height: 16px;
    transition: transform .15s;
}

[b-6m0wrct77r] .stats-collapse-chevron.up {
    transform: rotate(180deg);
}

@media (max-width: 640px) {
    [b-6m0wrct77r] .stats-collapse-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
}

/* Desktop keeps the compact icon-only toggle it always had. */
@media (min-width: 641px) {
    [b-6m0wrct77r] .stats-collapse-label {
        display: none;
    }
}

/* Touch floor for the filter bar. The base rule sets min-height:32px inside
   .filter-bar — fine for a mouse, below the 44px touch target on a phone. */
@media (max-width: 640px) {
    [b-6m0wrct77r] .filter-bar .filter-chip {
        min-height: 44px;
        padding: 8px 12px;
    }
}

/* ── Card quick-actions: get them off the thumbnail ─────────────────────────
   At EOF so it wins the source-order trap, like the coarse-pointer block above.

   The phone layout gives .card-img a 100px thumbnail — sized, per its own comment,
   "so a row of three 30px action buttons fits across it". Raising every admin button to
   the 44px touch floor broke that: 3 x 44 + gaps = 140px inside a 100px box, so the row
   overflowed its own thumbnail and the first button rendered at left:-7px, clipped off
   the card entirely (found on a real iPhone).

   Three 44px targets do not fit that strip in ANY arrangement worth having — wrapping
   them 2-up technically fits, but then the buttons blanket the whole thumbnail and cover
   the product photo. The buttons are DOM children of .card-img, so they cannot be moved
   out of it in markup — but they are absolutely positioned, so we can change what they
   are positioned AGAINST: drop .card-img's `position: relative` and the overlay resolves
   against .item-card (which is already position:relative here) instead. That lets the
   actions sit in the card's empty bottom-right corner, clear of the photo, at full size.

   .card-selected-badge is also a child of .card-img and also absolute, so it has to be
   re-anchored by hand or it would jump to the far right of the whole card.

   BREAKPOINT, NOT POINTER TYPE: this must key off (max-width: 600px), because that is
   the only place .item-card becomes a horizontal row with a 100px thumbnail. Scoping it
   to `any-pointer: coarse` (as the block above does) would also catch an iPad at 1024px,
   where the card is still the VERTICAL grid layout — and there, pinning the actions to
   the card's bottom-right would drop them straight onto the name and price. */
@media (max-width: 600px) {
    [b-6m0wrct77r] .card-img {
        position: static;
    }

    [b-6m0wrct77r] .card-overlay {
        inset: auto 8px 8px auto;   /* bottom-right of the CARD, not the thumbnail */
        width: auto;
        height: auto;
        padding: 0;
        gap: 6px;
        background: transparent;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
    }

    /* Reserve the button lane so a badge-heavy item (POS + ONLINE + AGOTADO) wraps
       instead of running underneath the actions. */
    [b-6m0wrct77r] .card-badges {
        padding-right: 150px;
    }

    /* Was top/right of the 100px thumbnail; .card-img is no longer the containing block,
       so pin it back over the thumbnail explicitly (thumb is 100px wide, badge is 24px). */
    [b-6m0wrct77r] .card-selected-badge {
        top: 8px;
        left: 68px;
        right: auto;
    }
}

/* Why manual drag-ordering is unavailable. Scoped (Catalog.razor.css), so no global
   class collision — the outage this repo remembers came from a generic name styled
   globally. Muted rather than an error colour: this is a state, not a fault. */
[b-6m0wrct77r] .drag-off-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    font-size: 12px;
    line-height: 28px;
    white-space: nowrap;
    color: var(--adm-fg-94a3b8, #64748b);
    border: 1px dashed var(--adm-bd-475569, #cbd5e1);
    border-radius: 8px;
    background: transparent;
}
/* /Pages/Admin/ClubInviteCard.razor.rz.scp.css */
/* The club's invitation slip card (ClubInviteCard). Its colours are the back office's tokens, so both
   themes follow; the paper is paper in both — white, with the printer's black. */

.slip-card[b-x9ky11d0hm] {
    position: relative;
    margin-top: 16px;
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 12px;
    padding: 24px;
    overflow: hidden;
}

/* Switched on: a soft glow along the top edge, the colour of a claim. */
.slip-card.on[b-x9ky11d0hm]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #22c55e, #0891b2 55%, #7c3aed);
}

.slip-head[b-x9ky11d0hm] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.slip-head h2[b-x9ky11d0hm] {
    margin: 0 0 6px;
    font-size: 1.2rem;
    color: var(--adm-fg-f1f5f9);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.slip-new[b-x9ky11d0hm] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(90deg, #7c3aed, #db2777);
    border-radius: 999px;
    padding: 2px 8px;
}

.slip-head-text[b-x9ky11d0hm] { flex: 1 1 280px; min-width: 0; }
.slip-help[b-x9ky11d0hm] { margin: 0; font-size: 0.85rem; line-height: 1.45; color: var(--adm-fg-94a3b8); }

/* The switch */
.slip-switch[b-x9ky11d0hm] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: var(--adm-fg-e2e8f0);
    font-weight: 600;
    font-size: 0.9rem;
    position: relative;
}

.slip-switch input[b-x9ky11d0hm] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.slip-track[b-x9ky11d0hm] {
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: var(--adm-bg-475569);
    position: relative;
    flex: none;
    transition: background 0.2s ease;
}
.slip-track[b-x9ky11d0hm]::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease;
}
.slip-switch input:checked + .slip-track[b-x9ky11d0hm] { background: #22c55e; }
.slip-switch input:checked + .slip-track[b-x9ky11d0hm]::after { transform: translateX(20px); }
.slip-switch input:focus-visible + .slip-track[b-x9ky11d0hm] { outline: 2px solid var(--adm-bd-3b82f6); outline-offset: 2px; }
.slip-switch input:disabled + .slip-track[b-x9ky11d0hm] { opacity: 0.5; }

.slip-warn[b-x9ky11d0hm] {
    margin: 14px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--adm-fgon-fde5d8-fcd34d);
    background: rgba(234, 179, 8, 0.12);
    border: 1px solid rgba(234, 179, 8, 0.35);
}

/* Not open to the venues yet: news, not a problem. */
.slip-new.soon[b-x9ky11d0hm] { background: linear-gradient(90deg, #64748b, #7c3aed); }
.slip-warn.soon[b-x9ky11d0hm] {
    color: inherit;
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.3);
}

.slip-body[b-x9ky11d0hm] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
    margin-top: 20px;
    align-items: start;
}

/* The form */
.slip-form[b-x9ky11d0hm] { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.slip-field[b-x9ky11d0hm] { display: flex; flex-direction: column; gap: 6px; position: relative; }
.slip-label[b-x9ky11d0hm] { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--adm-fg-94a3b8); }
.slip-hint[b-x9ky11d0hm] { font-size: 0.75rem; color: var(--adm-fg-64748b); }
.slip-hint.slip-unprintable[b-x9ky11d0hm] { color: var(--adm-fg-ef4444); font-weight: 600; }
.slip-count[b-x9ky11d0hm] { position: absolute; right: 10px; top: 30px; font-size: 0.7rem; color: var(--adm-fg-64748b); font-variant-numeric: tabular-nums; pointer-events: none; }
.slip-count.near[b-x9ky11d0hm] { color: #f59e0b; }
.slip-count.over[b-x9ky11d0hm] { color: #ef4444; font-weight: 600; }
.slip-headline[b-x9ky11d0hm], .slip-message[b-x9ky11d0hm] { padding-right: 56px; }

.slip-chips[b-x9ky11d0hm] { display: flex; gap: 8px; flex-wrap: wrap; }
.slip-chip[b-x9ky11d0hm] {
    border: 1px solid var(--adm-bd-334155);
    background: var(--adm-bg-0f172a);
    color: var(--adm-fg-cbd5e1);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.slip-chip:hover[b-x9ky11d0hm] { border-color: var(--adm-bd-3b82f6); }
.slip-chip:active[b-x9ky11d0hm] { transform: scale(0.96); }
.slip-chip.on[b-x9ky11d0hm] { background: #2563eb; border-color: #2563eb; color: #fff; }
.slip-chip.small[b-x9ky11d0hm] { padding: 3px 10px; font-size: 0.75rem; }
.slip-chip:focus-visible[b-x9ky11d0hm] { outline: 2px solid var(--adm-bd-3b82f6); outline-offset: 2px; }

.slip-money[b-x9ky11d0hm] { display: inline-flex; align-items: center; gap: 8px; }
.slip-min-amount[b-x9ky11d0hm] { max-width: 120px; }
.slip-currency[b-x9ky11d0hm] { color: var(--adm-fg-94a3b8); font-weight: 600; }

.slip-toggles[b-x9ky11d0hm] { display: flex; gap: 18px; flex-wrap: wrap; }
.slip-check[b-x9ky11d0hm] { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--adm-fg-e2e8f0); cursor: pointer; }
.slip-check input[b-x9ky11d0hm] { width: 18px; height: 18px; accent-color: #22c55e; }

.slip-when[b-x9ky11d0hm] {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--adm-fg-64748b);
    border-left: 3px solid var(--adm-bd-334155);
    padding-left: 10px;
}

.slip-actions[b-x9ky11d0hm] { display: flex; gap: 10px; flex-wrap: wrap; }

/* The page's own buttons and fields, as Fidelización draws them: its .btn and .form-input are scoped to that
   page (Loyalty.razor.css) and never reach this component — seen on the dev server, 2026-10-17. */
.btn[b-x9ky11d0hm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    min-height: 44px;
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    background: var(--adm-bg-1e293b);
    color: var(--adm-fgon-ffffff-e2e8f0);
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.btn:hover[b-x9ky11d0hm] { background: var(--adm-bghov-ffffff-334155); }
.btn:active[b-x9ky11d0hm] { transform: scale(0.97); }
.btn:focus-visible[b-x9ky11d0hm] { outline: 2px solid var(--adm-bd-3b82f6); outline-offset: 2px; }
.btn.primary[b-x9ky11d0hm] { background: #2563eb; color: #fff; border-color: #1e4fcb; }
.btn.primary:hover[b-x9ky11d0hm] { background: #1d4ed8; }
.btn.primary:disabled[b-x9ky11d0hm] { background: var(--adm-bg-475569); color: var(--adm-fgon-f9fafb-94a3b8); border-color: transparent; cursor: default; }
.btn.secondary[b-x9ky11d0hm] { background: var(--adm-bg-334155); color: var(--adm-fgon-f1f5f9-e2e8f0); }
.btn.secondary:hover[b-x9ky11d0hm] { background: var(--adm-bghov-f1f5f9-475569); }
.btn:disabled[b-x9ky11d0hm] { cursor: default; }

.form-input[b-x9ky11d0hm] {
    width: 100%;
    padding: 10px 12px;
    min-height: 44px;
    background: var(--adm-bg-0f172a);
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    color: var(--adm-fgon-f8fafc-e2e8f0);
    font-size: 0.9rem;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.form-input:focus[b-x9ky11d0hm] { outline: none; border-color: var(--adm-bdon-f8fafc-3b82f6); box-shadow: 0 0 0 2px var(--adm-sh-3b82f6-a0_2); }
.form-input[b-x9ky11d0hm]::placeholder { color: var(--adm-fgon-f8fafc-475569); }
.slip-status[b-x9ky11d0hm] { margin: 0; font-size: 0.85rem; }
.slip-status.ok[b-x9ky11d0hm] { color: var(--adm-fg-22c55e); }
.slip-status.error[b-x9ky11d0hm] { color: var(--adm-fg-ef4444); }

/* The preview: a small printer, its paper coming out of the slot */
.slip-preview[b-x9ky11d0hm] { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.slip-preview-bar[b-x9ky11d0hm] { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.slip-paper-pick[b-x9ky11d0hm] { display: flex; gap: 6px; }

.slip-stage[b-x9ky11d0hm] { width: 100%; display: flex; flex-direction: column; align-items: center; }

.slip-printer[b-x9ky11d0hm] {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 300px;
    height: 34px;
    border-radius: 12px 12px 6px 6px;
    background: linear-gradient(180deg, #3f4a5c, #1f2733);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.slip-printer[b-x9ky11d0hm]::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 7px;
    height: 4px;
    border-radius: 4px;
    background: #0b0f15;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
}
.slip-led[b-x9ky11d0hm] {
    position: absolute;
    top: 9px;
    right: 14px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #64748b;
}
.slip-led.on[b-x9ky11d0hm] { background: #22c55e; box-shadow: 0 0 8px #22c55e; }

.slip-window[b-x9ky11d0hm] {
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;            /* the paper slides out from behind the printer */
    margin-top: -12px;
    padding: 0 12px 22px;
}

.slip-shadow[b-x9ky11d0hm] {
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.28));
    animation: slip-feed-b-x9ky11d0hm 1.5s steps(30, end) both;
}

@keyframes slip-feed-b-x9ky11d0hm {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

.slip-paper[b-x9ky11d0hm] {
    --u: 1px;
    width: 264px;
    box-sizing: border-box;
    padding: 22px 14px 26px;
    background: #fff;
    color: #111;
    font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, monospace;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--u) * 4);
    /* the torn edge: a row of teeth along the bottom */
    -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%;
    mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%;
    transition: width 0.25s ease, opacity 0.2s ease;
}
.slip-paper.w58[b-x9ky11d0hm] { --u: 0.76px; width: 200px; padding: 18px 10px 22px; }
.slip-paper.off[b-x9ky11d0hm] { opacity: 0.55; }

.slip-logo[b-x9ky11d0hm] {
    max-width: 62%;
    max-height: calc(var(--u) * 70);
    object-fit: contain;
    filter: grayscale(1) contrast(1.6);
    margin-bottom: calc(var(--u) * 6);
}

.p-banner[b-x9ky11d0hm] {
    align-self: stretch;
    background: #111;
    color: #fff;
    font-weight: 700;
    font-size: calc(var(--u) * 17);
    letter-spacing: 0.04em;
    padding: calc(var(--u) * 6) 4px;
    line-height: 1.15;
    word-break: break-word;
    margin-bottom: calc(var(--u) * 8);
}
.p-headline[b-x9ky11d0hm] { font-weight: 700; font-size: calc(var(--u) * 19); line-height: 1.15; margin-bottom: calc(var(--u) * 6); word-break: break-word; }
.p-big[b-x9ky11d0hm] { font-weight: 800; font-size: calc(var(--u) * 52); line-height: 1; letter-spacing: -0.02em; }
.p-unit[b-x9ky11d0hm] { font-weight: 700; font-size: calc(var(--u) * 19); line-height: 1.1; letter-spacing: 0.06em; }
.p-text[b-x9ky11d0hm] { font-size: calc(var(--u) * 12.5); line-height: 1.3; }
.p-small[b-x9ky11d0hm] { font-size: calc(var(--u) * 10.5); line-height: 1.3; color: #333; }
.p-note[b-x9ky11d0hm] { font-size: calc(var(--u) * 12.5); line-height: 1.3; font-style: italic; }
.p-qr[b-x9ky11d0hm] { width: calc(var(--u) * 132); height: calc(var(--u) * 132); image-rendering: pixelated; margin: calc(var(--u) * 10) 0 calc(var(--u) * 4); }
.p-rule[b-x9ky11d0hm] { align-self: stretch; border-top: 2px dashed #555; margin: calc(var(--u) * 8) 0 calc(var(--u) * 2); }

.slip-sample[b-x9ky11d0hm] { width: 100%; max-width: 300px; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.slip-sample-range[b-x9ky11d0hm] { width: 100%; accent-color: #22c55e; }

.slip-replay[b-x9ky11d0hm] {
    border: none;
    background: none;
    color: var(--adm-fg-3b82f6);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}
.slip-replay:hover[b-x9ky11d0hm] { text-decoration: underline; }
.slip-replay:focus-visible[b-x9ky11d0hm] { outline: 2px solid var(--adm-bd-3b82f6); }

/* What the slips have done */
.slip-stats[b-x9ky11d0hm] { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--adm-bd-334155); }
.slip-stats h3[b-x9ky11d0hm] { margin: 0 0 12px; font-size: 0.95rem; color: var(--adm-fg-f1f5f9); }
.slip-empty[b-x9ky11d0hm] { display: block; }

.slip-funnel[b-x9ky11d0hm] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.funnel-step[b-x9ky11d0hm] {
    position: relative;
    background: var(--adm-bg-0f172a);
    border: 1px solid var(--adm-bd-334155);
    border-radius: 10px;
    padding: 12px 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    animation: funnel-in-b-x9ky11d0hm 0.5s ease both;
}
.funnel-step:nth-child(2)[b-x9ky11d0hm] { animation-delay: 0.08s; }
.funnel-step:nth-child(3)[b-x9ky11d0hm] { animation-delay: 0.16s; }
.funnel-step:nth-child(4)[b-x9ky11d0hm] { animation-delay: 0.24s; }

/* The share of printed tickets that got this far, as a bar that fills in along the bottom. */
.funnel-step[b-x9ky11d0hm]::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: var(--share, 0%);
    background: var(--step, #3b82f6);
    border-radius: 0 4px 4px 0;
    animation: funnel-fill-b-x9ky11d0hm 0.9s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    transform-origin: left center;
}
.funnel-step.printed[b-x9ky11d0hm] { --step: #64748b; }
.funnel-step.scanned[b-x9ky11d0hm] { --step: #0891b2; }
.funnel-step.claimed[b-x9ky11d0hm] { --step: #22c55e; }
.funnel-step.members[b-x9ky11d0hm] { --step: #a855f7; }

.funnel-num[b-x9ky11d0hm] { font-size: 1.6rem; font-weight: 800; color: var(--adm-fg-f1f5f9); font-variant-numeric: tabular-nums; line-height: 1.1; }
.funnel-label[b-x9ky11d0hm] { font-size: 0.75rem; color: var(--adm-fg-94a3b8); }

@keyframes funnel-in-b-x9ky11d0hm {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@keyframes funnel-fill-b-x9ky11d0hm {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.slip-points[b-x9ky11d0hm] { margin: 12px 0 0; font-size: 0.85rem; color: var(--adm-fg-22c55e); font-weight: 600; }

.slip-days[b-x9ky11d0hm] {
    margin-top: 14px;
    height: 64px;
    display: grid;
    grid-template-columns: repeat(14, minmax(0, 1fr));
    gap: 4px;
    align-items: end;
}
.slip-day[b-x9ky11d0hm] { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.slip-day .bar[b-x9ky11d0hm] { position: absolute; bottom: 0; width: 70%; border-radius: 3px 3px 0 0; min-height: 0; transition: height 0.4s ease; }
.slip-day .bar.printed[b-x9ky11d0hm] { background: var(--adm-bg-334155); }
.slip-day .bar.claimed[b-x9ky11d0hm] { background: #22c55e; width: 40%; }

.slip-days-legend[b-x9ky11d0hm] { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.slip-days-legend .key[b-x9ky11d0hm] { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-left: 6px; }
.slip-days-legend .key.printed[b-x9ky11d0hm] { background: var(--adm-bg-334155); margin-left: 0; }
.slip-days-legend .key.claimed[b-x9ky11d0hm] { background: #22c55e; }

@media (max-width: 720px) {
    .slip-body[b-x9ky11d0hm] { grid-template-columns: minmax(0, 1fr); }
    .slip-preview[b-x9ky11d0hm] { order: -1; }
    .slip-funnel[b-x9ky11d0hm] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
    .slip-card[b-x9ky11d0hm] { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .slip-shadow[b-x9ky11d0hm], .funnel-step[b-x9ky11d0hm], .funnel-step[b-x9ky11d0hm]::after { animation: none; }
    .slip-track[b-x9ky11d0hm], .slip-track[b-x9ky11d0hm]::after, .slip-paper[b-x9ky11d0hm], .slip-day .bar[b-x9ky11d0hm] { transition: none; }
}
/* /Pages/Admin/Combos.razor.rz.scp.css */
.combos-container[b-u6b2w6almn] { padding: 1.5rem; }
.page-header[b-u6b2w6almn] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.page-header h1[b-u6b2w6almn] { font-size: 1.5rem; color: var(--adm-fg-f1f5f9); margin: 0; }
.subtitle[b-u6b2w6almn] { color: var(--adm-fg-94a3b8); font-size: 0.875rem; margin-top: 0.25rem; }
.btn[b-u6b2w6almn] { padding: 0.5rem 1rem; border-radius: 0.375rem; font-size: 0.875rem; cursor: pointer; border: none; transition: all 0.15s; }
.btn.primary[b-u6b2w6almn] { background: #3b82f6; color: white; }
.btn.primary:hover[b-u6b2w6almn] { background: #2563eb; }
.btn.outline[b-u6b2w6almn] { background: transparent; border: 1px solid var(--adm-bd-334155); color: var(--adm-fg-e2e8f0); }
.btn.outline:hover[b-u6b2w6almn] { border-color: var(--adm-bd-475569); }
.btn.outline.sm[b-u6b2w6almn] { font-size: 0.75rem; padding: 0.25rem 0.5rem; }
.btn.danger-outline[b-u6b2w6almn] { background: transparent; border: 1px solid var(--adm-bd-ef4444); color: var(--adm-fg-ef4444); }
.btn.danger-outline:hover[b-u6b2w6almn] { background: var(--adm-bg-ef4444-a0_1); }
.btn:disabled[b-u6b2w6almn] { opacity: 0.5; cursor: not-allowed; }
.btn-icon[b-u6b2w6almn] { background: none; border: none; cursor: pointer; padding: 0.25rem; }
.btn-icon.danger[b-u6b2w6almn] { color: var(--adm-fg-ef4444); }
.combos-grid[b-u6b2w6almn] { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; }
.combo-card[b-u6b2w6almn] { background: var(--adm-bg-1e293b); border: 1px solid var(--adm-bdon-ffffff-334155); border-radius: 0.5rem; padding: 1.25rem; }
.combo-card.inactive[b-u6b2w6almn] { opacity: 0.6; }
.combo-header[b-u6b2w6almn] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.combo-header h3[b-u6b2w6almn] { color: var(--adm-fg-f1f5f9); margin: 0; font-size: 1rem; }
.combo-price[b-u6b2w6almn] { font-size: 1.25rem; font-weight: 700; color: var(--adm-fg-22c55e); }
.combo-desc[b-u6b2w6almn] { color: var(--adm-fg-94a3b8); font-size: 0.8rem; margin-bottom: 0.5rem; }
.badge.discount[b-u6b2w6almn] { background: var(--adm-bg-f59e0b-a0_15); color: var(--adm-fgon-f8ecd8-f59e0b); padding: 0.2rem 0.5rem; border-radius: 0.25rem; font-size: 0.7rem; font-weight: 600; margin-bottom: 0.5rem; display: inline-block; }
.combo-slots[b-u6b2w6almn] { margin: 0.75rem 0; padding: 0.5rem; background: var(--adm-bg-0f172a); border-radius: 0.375rem; }
.slot-row[b-u6b2w6almn] { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: var(--adm-fg-e2e8f0); padding: 0.25rem 0; }
.slot-name[b-u6b2w6almn] { font-weight: 500; }
.slot-count[b-u6b2w6almn] { color: var(--adm-fg-94a3b8); }
.slot-options[b-u6b2w6almn] { color: var(--adm-fg-3b82f6); }
.combo-actions[b-u6b2w6almn] { display: flex; gap: 0.5rem; }
.form-input[b-u6b2w6almn] { background: var(--adm-bg-0f172a); border: 1px solid var(--adm-bdon-f8fafc-334155); color: var(--adm-fgon-f8fafc-e2e8f0); padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem; width: 100%; box-sizing: border-box; }
.form-input.small[b-u6b2w6almn] { width: 80px; flex-shrink: 0; }
.form-input:focus[b-u6b2w6almn] { border-color: var(--adm-bdon-f8fafc-3b82f6); outline: none; }
.modal-overlay[b-u6b2w6almn] { position: fixed; inset: 0; background: var(--adm-scrim-000000-a0_6); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal[b-u6b2w6almn] { background: var(--adm-bg-1e293b); border: 1px solid var(--adm-bdon-ffffff-334155); border-radius: 0.75rem; width: 90%; max-width: 480px; max-height: 85vh; display: flex; flex-direction: column; }
.modal.wide[b-u6b2w6almn] { max-width: 640px; }
.modal-header[b-u6b2w6almn] { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--adm-bd-334155); }
.modal-header h2[b-u6b2w6almn] { font-size: 1.1rem; color: var(--adm-fg-f1f5f9); margin: 0; }
.close-btn[b-u6b2w6almn] { background: none; border: none; color: var(--adm-fg-94a3b8); font-size: 1.2rem; cursor: pointer; }
.modal-body[b-u6b2w6almn] { padding: 1.25rem; overflow-y: auto; flex: 1; }
.form-group[b-u6b2w6almn] { margin-bottom: 1rem; }
.form-group label[b-u6b2w6almn] { display: block; font-size: 0.8rem; color: var(--adm-fg-94a3b8); margin-bottom: 0.25rem; }
.form-row[b-u6b2w6almn] { display: flex; gap: 1rem; }
.form-row .form-group[b-u6b2w6almn] { flex: 1; }
.slots-title[b-u6b2w6almn] { color: var(--adm-fg-f1f5f9); font-size: 0.9rem; margin: 1rem 0 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--adm-bd-334155); }
.slot-editor[b-u6b2w6almn] { background: var(--adm-bg-0f172a); border: 1px solid var(--adm-bdon-f8fafc-334155); border-radius: 0.375rem; padding: 0.75rem; margin-bottom: 0.75rem; }
.slot-editor-header[b-u6b2w6almn] { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.slot-items[b-u6b2w6almn] { padding-left: 0.5rem; }
.slot-item-row[b-u6b2w6almn] { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.25rem; }
.modal-footer[b-u6b2w6almn] { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 1rem 1.25rem; border-top: 1px solid var(--adm-bd-334155); }
.loading-state[b-u6b2w6almn] { display: flex; justify-content: center; padding: 3rem; }
.spinner[b-u6b2w6almn] { width: 2rem; height: 2rem; border: 3px solid var(--adm-bd-334155); border-top: 3px solid var(--adm-bd-3b82f6); border-radius: 50%; animation: spin-b-u6b2w6almn 0.8s linear infinite; }
@keyframes spin-b-u6b2w6almn { to { transform: rotate(360deg); } }
.empty-state[b-u6b2w6almn] { text-align: center; padding: 3rem; color: var(--adm-fg-94a3b8); }
.empty-state h2[b-u6b2w6almn] { color: var(--adm-fg-e2e8f0); margin-bottom: 0.5rem; }
.empty-state svg[b-u6b2w6almn] { margin-bottom: 1rem; }

/* ===== Modal overflow + 44px touch targets (Codex QA) ===== */

/* The slot header (name input + min/max + remove ×) ran past the modal's right
   edge — let it wrap instead of overflowing. */
.slot-editor-header[b-u6b2w6almn] { flex-wrap: wrap; }

/* 44px touch floor for admin/tablet (controls were ~28-39px from padding only).
   inline-flex centres the label at the larger height. */
.btn[b-u6b2w6almn],
.form-input[b-u6b2w6almn],
.btn.outline.sm[b-u6b2w6almn] {
    min-height: 44px;
}
.btn[b-u6b2w6almn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Icon × buttons (modal close, slot/item remove) → 44×44 tap box without
   bloating the glyph. */
.close-btn[b-u6b2w6almn],
.btn-icon[b-u6b2w6almn] {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* "+ Item" stays visually compact (small font) but gets a real tap box. */
.btn.outline.sm[b-u6b2w6almn] { padding: 0.25rem 0.75rem; }

/* Mobile: a 340px min card column + 24px AdminLayout padding overflows a
   390px phone. Collapse to one column. (Scoped .razor.css = auto-namespaced.) */
@media (max-width: 480px) {
    .combos-container[b-u6b2w6almn] { padding: 1rem; }
    .combos-grid[b-u6b2w6almn] { grid-template-columns: 1fr; gap: 0.75rem; }
}
/* /Pages/Admin/ComerciaTerminalsCard.razor.rz.scp.css */
/* Admin → Pagos, «Datáfono Comercia (CaixaBank)». The card, buttons, alerts and fields are the page's own (.card, .btn,
   .alert, .form-input in Payments.razor); only what this card adds is styled here, with the admin theme's tokens so the
   light theme follows. */

.cmc-logo[b-46wwejuemx] {
    background: linear-gradient(135deg, var(--adm-bggrad-0f766e) 0%, var(--adm-bggrad-134e4a) 100%);
    color: var(--adm-fgon-dbfaf8-ffffff);
}

.cmc-alert[b-46wwejuemx] {
    margin: 12px 0 0;
}

/* ── A paired terminal ── */
.cmc-terminal[b-46wwejuemx] {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 12px;
    background: var(--adm-bg-0f172a);
}

.cmc-terminal-head[b-46wwejuemx] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.cmc-terminal-title[b-46wwejuemx] {
    min-width: 0;
}

.cmc-terminal-name[b-46wwejuemx] {
    font-weight: 650;
    font-size: 1rem;
    color: var(--adm-fg-f1f5f9);
}

.cmc-terminal-meta[b-46wwejuemx] {
    margin-top: 2px;
    font-size: 0.8rem;
    color: var(--adm-fg-94a3b8);
    overflow-wrap: anywhere;
}

.cmc-state[b-46wwejuemx] {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.cmc-state[b-46wwejuemx]::before {
    content: "●";
    margin-right: 6px;
}

.cmc-state-on[b-46wwejuemx] {
    background: var(--adm-bg-22c55e-a0_15);
    color: var(--adm-fgon-d8f2e4-4ade80);
}

.cmc-state-off[b-46wwejuemx] {
    background: var(--adm-bg-f59e0b-a0_15);
    color: var(--adm-fgon-f8ecd8-fbbf24);
}

.cmc-state-demo[b-46wwejuemx] {
    background: var(--adm-bg-dc2626-a0_15);
    color: var(--adm-fgon-f4dadc-f87171);
}

.cmc-fields[b-46wwejuemx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px 16px;
    margin-top: 14px;
}

.cmc-field[b-46wwejuemx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.cmc-field .form-label[b-46wwejuemx] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--adm-fg-e2e8f0);
}

.cmc-field .form-input[b-46wwejuemx] {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.cmc-field .form-input.short[b-46wwejuemx] {
    max-width: 200px;
}

.cmc-actions[b-46wwejuemx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.cmc-confirm[b-46wwejuemx] {
    font-size: 0.85rem;
    color: var(--adm-fgon-f8ecd8-fbbf24);
}

/* ── Adding one: the steps, the search, what it found ── */
.cmc-add[b-46wwejuemx] {
    margin-top: 16px;
    padding: 18px;
    border: 1px dashed var(--adm-bdon-ffffff-334155);
    border-radius: 12px;
    background: var(--adm-bg-0f172a);
}

.cmc-add-title[b-46wwejuemx] {
    margin-bottom: 12px;
    font-weight: 650;
    color: var(--adm-fg-f1f5f9);
}

.cmc-steps[b-46wwejuemx] {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: cmc-step;
}

.cmc-steps li[b-46wwejuemx] {
    position: relative;
    padding-left: 40px;
    min-height: 28px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--adm-fg-94a3b8);
    counter-increment: cmc-step;
}

.cmc-steps li[b-46wwejuemx]::before {
    content: counter(cmc-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--adm-bggrad-6366f1) 0%, var(--adm-bggrad-8b5cf6) 100%);
    color: var(--adm-fgon-dedffc-ffffff);
}

.cmc-steps strong[b-46wwejuemx],
.cmc-from strong[b-46wwejuemx] {
    color: var(--adm-fg-e2e8f0);
}

.cmc-note[b-46wwejuemx],
.cmc-hint[b-46wwejuemx],
.cmc-from[b-46wwejuemx] {
    margin: 12px 0 0;
    font-size: 0.8rem;
    color: var(--adm-fg-64748b);
}

.cmc-from[b-46wwejuemx] {
    color: var(--adm-fg-94a3b8);
}

.cmc-manual[b-46wwejuemx] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-top: 14px;
}

.cmc-manual .cmc-hint[b-46wwejuemx] {
    flex-basis: 100%;
    margin-top: 0;
}

.cmc-results[b-46wwejuemx] {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.cmc-found[b-46wwejuemx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border: 1px solid var(--adm-bdon-dce8fb-3b82f6);
    border-radius: 10px;
    background: var(--adm-bg-3b82f6-a0_15);
}

.cmc-paired[b-46wwejuemx] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--adm-fgon-d8f2e4-4ade80);
}

.cmc-moved[b-46wwejuemx] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--adm-fgon-f8ecd8-fbbf24);
}

.cmc-demo[b-46wwejuemx] {
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--adm-fgon-f4dadc-f87171);
}

.cmc-other[b-46wwejuemx] {
    padding: 0 2px;
    font-size: 0.85rem;
    color: var(--adm-fg-94a3b8);
}

.cmc-checklist[b-46wwejuemx] {
    margin: 8px 0 0;
    padding-left: 20px;
    line-height: 1.5;
}

.cmc-checklist li + li[b-46wwejuemx] {
    margin-top: 4px;
}

.cmc-no-agent a[b-46wwejuemx] {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

@media (max-width: 480px) {
    .cmc-terminal[b-46wwejuemx],
    .cmc-add[b-46wwejuemx] {
        padding: 14px;
    }

    .cmc-actions .btn[b-46wwejuemx] {
        flex: 1 1 auto;
    }
}
/* /Pages/Admin/CostSimulation.razor.rz.scp.css */
.simulation-container[b-hngdkslbq8] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-hngdkslbq8] {
    margin-bottom: 1.5rem;
}

.page-header h1[b-hngdkslbq8] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--adm-fg-f1f5f9);
    margin: 0 0 0.25rem 0;
}

.subtitle[b-hngdkslbq8] {
    font-size: 0.9375rem;
    color: var(--adm-fg-94a3b8);
    margin: 0;
}

/* Main Content Layout */
.main-content[b-hngdkslbq8] {
    display: grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Simulation Panel */
.simulation-panel[b-hngdkslbq8] {
    background: var(--adm-bg-1e293b);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--adm-bdon-ffffff-334155);
}

.panel-header[b-hngdkslbq8] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--adm-bdon-f8fafc-334155);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--adm-bg-0f172a);
}

.panel-header h2[b-hngdkslbq8] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--adm-fgon-f8fafc-f1f5f9);
    margin: 0;
}

.simulation-badge[b-hngdkslbq8] {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    background: var(--adm-bg-6366f1-a0_2);
    color: var(--adm-fgon-dadcfa-818cf8);
    border-radius: 4px;
    font-weight: 500;
}

.simulation-form[b-hngdkslbq8] {
    padding: 1.5rem;
}

.form-group[b-hngdkslbq8] {
    margin-bottom: 1.25rem;
}

.form-group label[b-hngdkslbq8] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--adm-fg-e2e8f0);
    margin-bottom: 0.5rem;
}

.form-select[b-hngdkslbq8],
.form-input[b-hngdkslbq8] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    font-size: 0.9375rem;
    color: var(--adm-fgon-f8fafc-e2e8f0);
    background: var(--adm-bg-0f172a);
}

.form-select:focus[b-hngdkslbq8],
.form-input:focus[b-hngdkslbq8] {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-3b82f6);
}

.form-select[b-hngdkslbq8] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.5rem;
}

.form-select option[b-hngdkslbq8] {
    background: var(--adm-bg-1e293b);
    color: var(--adm-fgon-ffffff-e2e8f0);
}

.price-input-group[b-hngdkslbq8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.price-input-group .form-input[b-hngdkslbq8] {
    flex: 1;
}

.input-suffix[b-hngdkslbq8] {
    font-size: 0.875rem;
    color: var(--adm-fg-94a3b8);
    white-space: nowrap;
}

.price-change[b-hngdkslbq8] {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 0.5rem;
}

.price-change.increase[b-hngdkslbq8] {
    color: var(--adm-fg-f87171);
}

.price-change.decrease[b-hngdkslbq8] {
    color: var(--adm-fg-4ade80);
}

/* Current Info */
.current-info[b-hngdkslbq8] {
    background: var(--adm-bg-0f172a);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
}

.info-item[b-hngdkslbq8] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
}

.info-item:not(:last-child)[b-hngdkslbq8] {
    border-bottom: 1px solid var(--adm-bd-334155);
}

.info-label[b-hngdkslbq8] {
    font-size: 0.875rem;
    color: var(--adm-fg-94a3b8);
}

.info-value[b-hngdkslbq8] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--adm-fg-f1f5f9);
}

/* Buttons */
.btn[b-hngdkslbq8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
}

.btn.primary[b-hngdkslbq8] {
    background: #3b82f6;
    border: none;
    color: white;
}

.btn.primary:hover:not(:disabled)[b-hngdkslbq8] {
    background: #2563eb;
}

.btn.primary:disabled[b-hngdkslbq8] {
    background: var(--adm-bg-475569);
    cursor: not-allowed;
    color: var(--adm-fgon-f9fafb-94a3b8);
}

.btn.outline[b-hngdkslbq8] {
    background: var(--adm-bg-334155);
    border: 1px solid var(--adm-bdon-f1f5f9-475569);
    color: var(--adm-fgon-f1f5f9-f1f5f9);
}

.btn.outline:hover[b-hngdkslbq8] {
    background: var(--adm-bghov-f1f5f9-475569);
}

/* Results Panel */
.results-panel[b-hngdkslbq8] {
    background: var(--adm-bg-1e293b);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--adm-bdon-ffffff-334155);
}

.empty-results[b-hngdkslbq8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    color: var(--adm-fg-94a3b8);
}

.empty-results svg[b-hngdkslbq8] {
    opacity: 0.3;
    margin-bottom: 1rem;
}

.empty-results h3[b-hngdkslbq8] {
    font-size: 1.125rem;
    color: var(--adm-fg-f1f5f9);
    margin: 0 0 0.5rem 0;
}

.empty-results p[b-hngdkslbq8] {
    max-width: 360px;
    margin: 0;
}

/* Impact Summary */
.impact-summary[b-hngdkslbq8] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 1.5rem;
    background: var(--adm-bg-0f172a);
}

.impact-card[b-hngdkslbq8] {
    text-align: center;
}

.impact-label[b-hngdkslbq8] {
    display: block;
    font-size: 0.75rem;
    color: var(--adm-fg-94a3b8);
    margin-bottom: 0.25rem;
}

.impact-value[b-hngdkslbq8] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--adm-fg-f1f5f9);
}

.impact-value.positive[b-hngdkslbq8] {
    color: var(--adm-fg-4ade80);
}

.impact-value.negative[b-hngdkslbq8] {
    color: var(--adm-fg-f87171);
}

/* Recipes Table */
.results-panel h3[b-hngdkslbq8] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--adm-fgon-ffffff-f1f5f9);
    padding: 1rem 1.5rem;
    margin: 0;
    border-bottom: 1px solid var(--adm-bdon-ffffff-334155);
}

.recipes-table-container[b-hngdkslbq8] {
    overflow-x: auto;
}

.recipes-table[b-hngdkslbq8] {
    width: 100%;
    border-collapse: collapse;
}

.recipes-table th[b-hngdkslbq8] {
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--adm-fgon-f8fafc-94a3b8);
    background: var(--adm-bg-0f172a);
}

.recipes-table td[b-hngdkslbq8] {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--adm-bd-334155);
    color: var(--adm-fg-e2e8f0);
}

.recipes-table tbody tr:hover[b-hngdkslbq8] {
    background: var(--adm-bg-334155);
}

.recipes-table .recipe-name[b-hngdkslbq8] {
    font-weight: 500;
    color: var(--adm-fg-f1f5f9);
}

.recipes-table tr.critical-margin[b-hngdkslbq8] {
    background: var(--adm-bg-dc2626-a0_15);
}

.recipes-table tr.low-margin[b-hngdkslbq8] {
    background: var(--adm-bg-fbbf24-a0_15);
}

.new-cost[b-hngdkslbq8] {
    font-weight: 500;
}

.cost-change[b-hngdkslbq8] {
    font-size: 0.75rem;
    margin-left: 0.5rem;
}

.cost-change.up[b-hngdkslbq8] {
    color: var(--adm-fg-f87171);
}

.cost-change.down[b-hngdkslbq8] {
    color: var(--adm-fg-4ade80);
}

td.warning[b-hngdkslbq8] {
    color: var(--adm-fg-fbbf24);
    font-weight: 500;
}

.status-badge[b-hngdkslbq8] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.critical[b-hngdkslbq8] {
    background: var(--adm-bg-dc2626-a0_2);
    color: var(--adm-fgon-f2d0d1-f87171);
}

.status-badge.warning[b-hngdkslbq8] {
    background: var(--adm-bg-fbbf24-a0_2);
    color: var(--adm-fgon-f9eed1-fbbf24);
}

.status-badge.ok[b-hngdkslbq8] {
    background: var(--adm-bg-22c55e-a0_2);
    color: var(--adm-fgon-cdefdc-4ade80);
}

/* Simulation Actions */
.simulation-actions[b-hngdkslbq8] {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    border-top: 1px solid var(--adm-bd-334155);
}

.simulation-actions .btn[b-hngdkslbq8] {
    flex: 1;
    width: auto;
}

/* Section */
.section[b-hngdkslbq8] {
    background: var(--adm-bg-1e293b);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--adm-bdon-ffffff-334155);
}

.section h2[b-hngdkslbq8] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--adm-fgon-ffffff-f1f5f9);
    margin: 0 0 1rem 0;
}

.section-header[b-hngdkslbq8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-header h2[b-hngdkslbq8] {
    margin: 0;
}

.section-subtitle[b-hngdkslbq8] {
    font-size: 0.875rem;
    color: var(--adm-fg-94a3b8);
}

/* Category Grid */
.category-grid[b-hngdkslbq8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.category-card[b-hngdkslbq8] {
    background: var(--adm-bg-0f172a);
    border-radius: 10px;
    padding: 1rem;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
}

.category-name[b-hngdkslbq8] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--adm-fg-f1f5f9);
    margin-bottom: 0.75rem;
}

.category-stats[b-hngdkslbq8] {
    display: flex;
    justify-content: space-between;
}

.cat-stat[b-hngdkslbq8] {
    text-align: center;
}

.cat-value[b-hngdkslbq8] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--adm-fg-f1f5f9);
    display: block;
}

.cat-label[b-hngdkslbq8] {
    font-size: 0.6875rem;
    color: var(--adm-fg-94a3b8);
}

/* Suggestions Table */
.suggestions-table-container[b-hngdkslbq8] {
    overflow-x: auto;
}

.suggestions-table[b-hngdkslbq8] {
    width: 100%;
    border-collapse: collapse;
}

.suggestions-table th[b-hngdkslbq8] {
    text-align: left;
    padding: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--adm-fgon-f8fafc-94a3b8);
    background: var(--adm-bg-0f172a);
}

.suggestions-table td[b-hngdkslbq8] {
    padding: 0.75rem;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--adm-bd-334155);
    color: var(--adm-fg-e2e8f0);
}

.suggestions-table tbody tr:hover[b-hngdkslbq8] {
    background: var(--adm-bg-334155);
}

.suggested-price[b-hngdkslbq8] {
    font-weight: 600;
    color: var(--adm-fg-818cf8);
}

.suggested-price .change[b-hngdkslbq8] {
    font-size: 0.75rem;
    font-weight: 500;
    margin-left: 0.5rem;
}

.suggested-price .change.up[b-hngdkslbq8] {
    color: var(--adm-fg-4ade80);
}

.target-margin[b-hngdkslbq8] {
    color: var(--adm-fg-4ade80);
    font-weight: 500;
}

/* Loading State */
.loading-state[b-hngdkslbq8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    color: var(--adm-fg-94a3b8);
}

.spinner[b-hngdkslbq8] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--adm-bd-334155);
    border-top-color: var(--adm-bd-3b82f6);
    border-radius: 50%;
    animation: spin-b-hngdkslbq8 1s linear infinite;
}

@keyframes spin-b-hngdkslbq8 {
    to { transform: rotate(360deg); }
}

/* Responsive */

/* Both tables now sit in .table-wrap, whose shared rule sets min-width:max-content
   so columns keep their natural width and the box scrolls on phones/tablets
   instead of squashing to unreadable slivers. Desktop keeps the previous
   fit-to-panel table (headers wrap, no horizontal scrollbar). */
@media (min-width: 1025px) {
    .recipes-table-container > .recipes-table[b-hngdkslbq8],
    .suggestions-table-container > .suggestions-table[b-hngdkslbq8] {
        min-width: 0;
    }
}

@media (max-width: 1024px) {
    .main-content[b-hngdkslbq8] {
        grid-template-columns: 1fr;
    }

    .impact-summary[b-hngdkslbq8] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .simulation-container[b-hngdkslbq8] {
        padding: 1rem;
    }

    .simulation-actions[b-hngdkslbq8] {
        flex-direction: column;
    }

    .category-grid[b-hngdkslbq8] {
        grid-template-columns: 1fr;
    }

    /* Title + ingredient badge share one non-wrapping row; the panel clips its
       overflow, so the badge disappeared instead of dropping to a second line. */
    .panel-header[b-hngdkslbq8] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .simulation-badge[b-hngdkslbq8] {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 480px) {
    .simulation-container[b-hngdkslbq8] {
        padding: 0.75rem;
    }

    .page-header h1[b-hngdkslbq8] {
        font-size: 1.25rem;
    }

    .impact-summary[b-hngdkslbq8] {
        padding: 1rem;
        gap: 0.75rem;
    }

    .impact-value[b-hngdkslbq8] {
        font-size: 1rem;
    }

    .simulation-form[b-hngdkslbq8] {
        padding: 1rem;
    }

    .panel-header[b-hngdkslbq8],
    .results-panel h3[b-hngdkslbq8] {
        padding: 1rem;
    }
}
/* /Pages/Admin/Crm.razor.rz.scp.css */
/* Dark theme admin page — CRM */
.crm-page[b-29w92ui74u] { padding: 24px; max-width: 1200px; margin: 0 auto; color: var(--adm-fg-e2e8f0); }

.page-header[b-29w92ui74u] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.header-left[b-29w92ui74u] { display: flex; align-items: baseline; gap: 12px; }
.header-left h1[b-29w92ui74u] { font-size: 1.5rem; margin: 0; color: var(--adm-fg-f1f5f9); }

.message-banner[b-29w92ui74u] { padding: 12px 16px; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.message-banner.success[b-29w92ui74u] { background: var(--adm-bg-064e3b); color: var(--adm-fgon-d1fae5-6ee7b7); border: 1px solid var(--adm-bdon-d1fae5-065f46); }
.message-banner.error[b-29w92ui74u] { background: var(--adm-bg-450a0a); color: var(--adm-fgon-fee2e2-fca5a5); border: 1px solid var(--adm-bdon-fee2e2-7f1d1d); }
.dismiss[b-29w92ui74u] { background: none; border: none; color: inherit; font-size: 1.2rem; cursor: pointer; }

.loading-state[b-29w92ui74u] { text-align: center; padding: 60px 0; color: var(--adm-fg-94a3b8); }
.spinner[b-29w92ui74u] { width: 32px; height: 32px; border: 3px solid var(--adm-bd-334155); border-top-color: var(--adm-bd-3b82f6); border-radius: 50%; animation: spin-b-29w92ui74u 0.8s linear infinite; margin: 0 auto 12px; }
@keyframes spin-b-29w92ui74u { to { transform: rotate(360deg); } }

/* Tabs */
.tabs[b-29w92ui74u] { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--adm-bd-334155); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tab[b-29w92ui74u] {
    padding: 10px 20px; border: none; background: transparent; color: var(--adm-fg-475569); font-size: 0.85rem;
    font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s;
    display: flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap;
}
.tab:hover[b-29w92ui74u] { color: var(--adm-fg-e2e8f0); }
.tab.active[b-29w92ui74u] { color: var(--adm-fg-2563eb); border-bottom-color: var(--adm-bd-2563eb); }
.tab-badge[b-29w92ui74u] { font-size: 0.7rem; background: var(--adm-bg-334155); color: var(--adm-fgon-f1f5f9-94a3b8); padding: 2px 6px; border-radius: 10px; }
.tab.active .tab-badge[b-29w92ui74u] { background: var(--adm-bg-1e3a5f); color: var(--adm-fgon-eff6ff-60a5fa); }

/* Form */
.input[b-29w92ui74u] {
    width: 100%; padding: 10px 12px; min-height: 44px;
    background: var(--adm-bg-0f172a); border: 1px solid var(--adm-bdon-f8fafc-334155); border-radius: 8px;
    color: var(--adm-fgon-f8fafc-e2e8f0); font-size: 0.85rem; box-sizing: border-box;
}
.input:focus[b-29w92ui74u] { outline: none; border-color: var(--adm-bdon-f8fafc-3b82f6); box-shadow: 0 0 0 2px var(--adm-sh-3b82f6-a0_2); }
textarea.input[b-29w92ui74u] { resize: vertical; min-height: 60px; }

.form-group[b-29w92ui74u] { display: flex; flex-direction: column; gap: 4px; }
.form-label[b-29w92ui74u] { font-size: 0.75rem; color: var(--adm-fg-94a3b8); font-weight: 600; }

/* Buttons */
.btn[b-29w92ui74u] {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 18px; min-height: 44px; border: 1px solid var(--adm-bdon-ffffff-334155); border-radius: 8px;
    font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.15s;
    background: var(--adm-bg-1e293b); color: var(--adm-fgon-ffffff-e2e8f0); white-space: nowrap;
}
.btn:hover[b-29w92ui74u] { background: var(--adm-bghov-ffffff-334155); }
.btn:active[b-29w92ui74u] { transform: scale(0.97); }
.btn:disabled[b-29w92ui74u] { opacity: 0.5; cursor: not-allowed; }
.btn-primary[b-29w92ui74u] { background: #2563eb; color: #fff; border-color: #1e4fcb; }
.btn-primary:hover[b-29w92ui74u] { background: #1d4ed8; }
.btn-ghost[b-29w92ui74u] { background: transparent; border-color: var(--adm-bd-475569); color: var(--adm-fg-94a3b8); }
.btn-ghost:hover[b-29w92ui74u] { border-color: var(--adm-bd-3b82f6); color: var(--adm-fg-e2e8f0); }

/* Stat cards */
.stat-card[b-29w92ui74u] {
    background: var(--adm-bg-0f172a); border: 1px solid var(--adm-bdon-f8fafc-334155); border-radius: 10px;
    padding: 14px 16px; text-align: center;
}
.stat-value[b-29w92ui74u] { font-size: 1.25rem; font-weight: 700; color: var(--adm-fg-f1f5f9); }
.stat-label[b-29w92ui74u] { font-size: 0.7rem; color: var(--adm-fg-64748b); margin-top: 2px; }

/* VIP tier colors */
.tier-platinum[b-29w92ui74u], .stat-value.tier-platinum[b-29w92ui74u] { color: var(--adm-fg-c084fc); }
.tier-gold[b-29w92ui74u], .stat-value.tier-gold[b-29w92ui74u] { color: var(--adm-fg-fbbf24); }
.tier-silver[b-29w92ui74u], .stat-value.tier-silver[b-29w92ui74u] { color: var(--adm-fg-94a3b8); }
.tier-regular[b-29w92ui74u], .stat-value.tier-regular[b-29w92ui74u] { color: var(--adm-fg-64748b); }

.tier-badge[b-29w92ui74u] {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    padding: 3px 8px; border-radius: 4px; background: var(--adm-bg-334155); color: var(--adm-fgon-f1f5f9-94a3b8);
}
.tier-badge.tier-platinum[b-29w92ui74u] { background: var(--adm-bg-3b1f4a); color: var(--adm-fgon-eedff6-c084fc); }
.tier-badge.tier-gold[b-29w92ui74u] { background: var(--adm-bg-78350f); color: var(--adm-fgon-fef3c7-fbbf24); }
.tier-badge.tier-silver[b-29w92ui74u] { background: var(--adm-bg-1e293b); color: var(--adm-fgon-ffffff-94a3b8); }
.tier-badge.tier-regular[b-29w92ui74u] { background: var(--adm-bg-1e293b); color: var(--adm-fgon-ffffff-64748b); }

/* Data table */
.data-table[b-29w92ui74u] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.data-table thead tr[b-29w92ui74u] { color: var(--adm-fg-94a3b8); border-bottom: 1px solid var(--adm-bd-334155); }
.data-table th[b-29w92ui74u] { text-align: left; padding: 8px 12px; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; }
.data-table td[b-29w92ui74u] { padding: 10px 12px; border-bottom: 1px solid var(--adm-bd-1e293b); }
.data-table tbody tr[b-29w92ui74u] { transition: background 0.1s; }
.data-table tbody tr:hover[b-29w92ui74u] { background: var(--adm-bg-1e293b); }

/* Empty state */
.empty-state[b-29w92ui74u] { text-align: center; padding: 60px 0; color: var(--adm-fg-94a3b8); }

/* Premium sections */
.premium-section[b-29w92ui74u] { background: var(--adm-bg-1e293b); border-radius: 12px; padding: 24px; }
.section-title[b-29w92ui74u] { font-size: 18px; margin: 0 0 16px; color: var(--adm-fg-f1f5f9); }

.tier-config-card[b-29w92ui74u] {
    background: var(--adm-bg-0f172a); border: 1px solid var(--adm-bdon-f8fafc-334155); border-radius: 10px; padding: 16px;
    border-left: 3px solid;
}

/* Segments */
.segment-card[b-29w92ui74u] {
    background: var(--adm-bg-1e293b); border: 1px solid var(--adm-bdon-ffffff-334155); border-radius: 10px; padding: 14px 16px;
}

/* Churn risk colors */
.churn-high[b-29w92ui74u] { color: var(--adm-fg-fca5a5); }
.churn-medium[b-29w92ui74u] { color: var(--adm-fg-fbbf24); }
.churn-low[b-29w92ui74u] { color: var(--adm-fg-86efac); }

/* Timeline */
.timeline-list[b-29w92ui74u] { max-height: 400px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.timeline-item[b-29w92ui74u] {
    display: flex; align-items: flex-start; gap: 10px; padding: 8px;
    border-left: 2px solid var(--adm-bd-334155); margin-left: 10px;
}
.timeline-icon[b-29w92ui74u] {
    width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 12px; flex-shrink: 0; margin-left: -23px;
}
.timeline-order[b-29w92ui74u] { background: var(--adm-bg-1e3a5f); color: var(--adm-fgon-eff6ff-60a5fa); }
.timeline-reservation[b-29w92ui74u] { background: var(--adm-bg-3b1f4a); color: var(--adm-fgon-eedff6-c084fc); }
.timeline-feedback[b-29w92ui74u] { background: var(--adm-bg-365314); color: var(--adm-fgon-ecf7de-86efac); }
.timeline-communication[b-29w92ui74u] { background: var(--adm-bg-78350f); color: var(--adm-fgon-fef3c7-fbbf24); }

.data-table-wrap[b-29w92ui74u] {
    overflow-x: auto;
}

@media (max-width: 768px) {
    .crm-page[b-29w92ui74u] { padding: 12px; }
    .tier-config-card[b-29w92ui74u] { min-width: 0; }
}

/* Responsive customer table — under 640px the table reflows into a
   vertical card list. Each row becomes a card; each cell gets its
   column label as a prefix (via data-label). Saves a horizontal scroll
   that hid LastVisitAt and Tags on phones. */
@media (max-width: 640px) {
    .data-table-wrap[b-29w92ui74u] {
        overflow-x: visible;
    }

    .data-table-responsive[b-29w92ui74u],
    .data-table-responsive thead[b-29w92ui74u],
    .data-table-responsive tbody[b-29w92ui74u],
    .data-table-responsive tr[b-29w92ui74u],
    .data-table-responsive td[b-29w92ui74u] {
        display: block;
        width: 100%;
    }

    /* Hide the column header row — labels now sit inline with each cell. */
    .data-table-responsive thead[b-29w92ui74u] {
        position: absolute;
        left: -9999px;
        top: -9999px;
    }

    .data-table-responsive tr[b-29w92ui74u] {
        margin-bottom: 12px;
        background: var(--adm-bg-1e293b);
        border: 1px solid var(--adm-bdon-ffffff-334155);
        border-radius: 10px;
        padding: 4px 0;
    }

    .data-table-responsive td[b-29w92ui74u] {
        display: flex;
        align-items: baseline;
        gap: 12px;
        padding: 8px 14px;
        border-bottom: 1px solid var(--adm-bd-334155-a0_5);
        text-align: right;
        white-space: normal;
    }

    .data-table-responsive td:last-child[b-29w92ui74u] {
        border-bottom: none;
    }

    .data-table-responsive td[b-29w92ui74u]::before {
        content: attr(data-label);
        flex: 0 0 40%;
        font-size: 0.6875rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 600;
        color: var(--adm-fgon-ffffff-94a3b8);
        text-align: left;
    }
}

/* iPhone-width (~390px) overflow hardening. Additive only — nothing here
   touches desktop/base. Targets three things the narrow viewport breaks:
   the tab row overflowing right, the search/filter row clipping right, and
   the responsive customer cards pushing long values past the right edge. */
@media (max-width: 600px) {
    /* Keep the page itself from overflowing the viewport. */
    .crm-page[b-29w92ui74u] { overflow-x: hidden; }

    /* Tab row: wrapping is owned centrally by admin-mobile.css (.admin-content .tabs).
       A nowrap + overflow-x:auto strip needed 721px in a 342px box, so tabs were cut
       off with no scroll affordance; 6 tabs wrap onto two rows instead. */
    .tab[b-29w92ui74u] { flex: 0 1 auto; }

    /* Search & filter row: stack full-width so nothing clips on the right. */
    .search-bar[b-29w92ui74u] { flex-direction: column; align-items: stretch; }
    .search-bar > .input[b-29w92ui74u],
    .search-bar > .btn[b-29w92ui74u] { width: 100% !important; min-width: 0 !important; }

    /* Responsive customer cards: never exceed the viewport, and let the
       value cell shrink + wrap so long names/phones can't push past the
       right edge. The value is an anonymous text node after the ::before
       label, so we constrain wrapping on the cell itself. */
    .data-table-responsive tr[b-29w92ui74u] { max-width: 100%; }
    .data-table-responsive td[b-29w92ui74u] {
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .data-table-responsive td[b-29w92ui74u]::before { flex: 0 0 38%; min-width: 0; }
}

/* Page-specific mobile hardening for the rows the shared layer cannot reach.
   Most of this page's layout lives in inline `style="display:grid|flex..."`
   attributes, so the shared class vocabulary was added to that markup instead
   (.section-header / .form-grid / .cards-grid / .table-wrap) and admin-mobile.css
   collapses those. What is left below are the rows with no shared class name and
   the inline px widths nothing else can beat — an inline declaration only loses
   to !important, which is why it appears here. All of it sits inside a max-width
   query, so desktop is unchanged. */
@media (max-width: 768px) {
    /* Long nowrap buttons ("Recalcular churn", "Fusionar aqui") overflow their
       panel well before phone width. Let the clusters wrap onto a second line. */
    .btn-row[b-29w92ui74u],
    .seg-card-head[b-29w92ui74u],
    .seg-card-actions[b-29w92ui74u] { flex-wrap: wrap; gap: 8px; }
}

@media (max-width: 640px) {
    /* 24px of panel padding eats 48px of the ~342px usable width. */
    .detail-panel[b-29w92ui74u] { padding: 16px !important; }
    .premium-section[b-29w92ui74u] { padding: 16px; }

    /* "Anadir comunicacion" / "Anadir campo": an inline flex:1 / flex:2 input
       next to a fixed 120px select (or 160px key input) squeezes every field to
       a sliver. Stack them full-width — the inline flex/width need !important. */
    .inline-add-row[b-29w92ui74u] { flex-wrap: wrap; }
    .inline-add-row > .input[b-29w92ui74u],
    .inline-add-row > .btn[b-29w92ui74u] {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Emails, phones and staff notes are unbroken strings that would otherwise
       set the panel's min-content width and push it past the right edge. */
    .detail-panel h2[b-29w92ui74u],
    .detail-panel p[b-29w92ui74u],
    .segment-card p[b-29w92ui74u] { overflow-wrap: anywhere; }
}

/* ── Premium pass (19 Oct): the page's guidance, the list's affordances, the level chips and the levels bar. Light by
   default, :root[data-theme="dark"] after (a scoped theme rule starts with :root itself, never ::deep). ── */
.crm-head[b-29w92ui74u] { align-items: flex-start; gap: 16px; }
.crm-head-text[b-29w92ui74u] { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.crm-head-text h1[b-29w92ui74u] { font-size: 1.6rem; margin: 0; color: var(--adm-fg-f1f5f9); letter-spacing: -.01em; }
.crm-sub[b-29w92ui74u] { margin: 0; max-width: 720px; font-size: .92rem; line-height: 1.45; color: var(--adm-fg-94a3b8); }
.crm-help-toggle[b-29w92ui74u] { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; flex-shrink: 0; }
.crm-help-q[b-29w92ui74u] {
    display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
    background: #2563eb; color: #fff; font-size: .75rem; font-weight: 800;
}
.crm-help[b-29w92ui74u] {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px;
    margin: -4px 0 20px; padding: 18px; border-radius: 14px;
    background: #eff6ff; border: 1px solid #bfdbfe;
}
.crm-help-item[b-29w92ui74u] { display: flex; gap: 12px; align-items: flex-start; }
.crm-help-item strong[b-29w92ui74u] { display: block; font-size: .92rem; color: #1e3a8a; margin-bottom: 2px; }
.crm-help-item p[b-29w92ui74u] { margin: 0; font-size: .84rem; line-height: 1.45; color: #334155; }
.crm-help-num[b-29w92ui74u] {
    flex-shrink: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    background: #2563eb; color: #fff; font-weight: 800; font-size: .82rem;
}
.tab-hint[b-29w92ui74u] { margin: 0 0 16px; font-size: .86rem; line-height: 1.45; color: var(--adm-fg-94a3b8); max-width: 820px; }
.field-hint[b-29w92ui74u] { font-size: .74rem; line-height: 1.35; color: var(--adm-fg-64748b); }

.crm-empty[b-29w92ui74u] { padding: 48px 16px; }
.crm-empty-icon[b-29w92ui74u] { font-size: 2.2rem; margin-bottom: 8px; }
.crm-empty h3[b-29w92ui74u] { margin: 0 0 6px; font-size: 1.1rem; color: var(--adm-fg-f1f5f9); }
.crm-empty p[b-29w92ui74u] { margin: 0 auto 16px; max-width: 480px; line-height: 1.5; }
.crm-empty-actions[b-29w92ui74u] { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.crm-row:hover .row-go[b-29w92ui74u] { color: #2563eb; transform: translateX(2px); }
.crm-name[b-29w92ui74u] { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.crm-avatar[b-29w92ui74u] {
    flex-shrink: 0; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    background: #e0e7ff; color: #3730a3; font-size: .72rem; font-weight: 800;
}
.crm-noname[b-29w92ui74u] { color: var(--adm-fg-64748b); font-style: italic; font-weight: 500; }
.crm-phone[b-29w92ui74u] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-go-col[b-29w92ui74u] { width: 24px; }
.row-go[b-29w92ui74u] { color: var(--adm-fg-64748b); font-size: 1.2rem; text-align: right; transition: transform .12s, color .12s; }

/* The level chips: one colour each, readable on both themes. */
/* Plata reads as silver, not as a disabled grey (the live tester, 20 Oct): a light metal sheen and a fine edge. */
.tier-badge.tier-silver[b-29w92ui74u] { background: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 100%); color: #334155; box-shadow: inset 0 0 0 1px #94a3b8; }
.tier-badge.tier-gold[b-29w92ui74u] { background: #fef3c7; color: #92400e; }
.tier-badge.tier-platinum[b-29w92ui74u] { background: #ede9fe; color: #5b21b6; }

.tier-mix[b-29w92ui74u] { margin: 4px 0 24px; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--adm-bd-334155); }
.tier-mix-title[b-29w92ui74u] { font-size: .8rem; font-weight: 700; color: var(--adm-fg-94a3b8); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.tier-mix-bar[b-29w92ui74u] { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--adm-bg-1e293b); }
.tier-mix-seg[b-29w92ui74u] { min-width: 4px; }
.tier-mix-legend[b-29w92ui74u] { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: .82rem; color: var(--adm-fg-94a3b8); }
.tier-mix-legend span[b-29w92ui74u] { display: inline-flex; align-items: center; gap: 6px; }
.tier-mix-dot[b-29w92ui74u] { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.tier-mix-regular[b-29w92ui74u] { background: #cbd5e1; }
.tier-mix-silver[b-29w92ui74u] { background: #94a3b8; }
.tier-mix-gold[b-29w92ui74u] { background: #f59e0b; }
.tier-mix-platinum[b-29w92ui74u] { background: #8b5cf6; }

:root[data-theme="dark"] .crm-help[b-29w92ui74u] { background: rgba(37, 99, 235, .10); border-color: rgba(96, 165, 250, .35); }
:root[data-theme="dark"] .crm-help-item strong[b-29w92ui74u] { color: #bfdbfe; }
:root[data-theme="dark"] .crm-help-item p[b-29w92ui74u] { color: #cbd5e1; }
:root[data-theme="dark"] .crm-avatar[b-29w92ui74u] { background: rgba(99, 102, 241, .22); color: #c7d2fe; }
:root[data-theme="dark"] .tier-badge.tier-silver[b-29w92ui74u] { background: linear-gradient(135deg, rgba(241, 245, 249, .26) 0%, rgba(148, 163, 184, .16) 100%); color: #f1f5f9; box-shadow: inset 0 0 0 1px rgba(203, 213, 225, .5); }
:root[data-theme="dark"] .tier-badge.tier-gold[b-29w92ui74u] { background: rgba(245, 158, 11, .2); color: #fcd34d; }
:root[data-theme="dark"] .tier-badge.tier-platinum[b-29w92ui74u] { background: rgba(139, 92, 246, .22); color: #ddd6fe; }
:root[data-theme="dark"] .tier-mix-regular[b-29w92ui74u] { background: #475569; }

/* A guest's tickets: the state as a chip (they read «5,70 €Open»). Tinted surfaces that sit on both admin themes. */
.order-state[b-29w92ui74u] { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(100, 116, 139, .14); }
.order-state--open[b-29w92ui74u] { background: rgba(245, 158, 11, .16); color: #b45309; }
.order-state--done[b-29w92ui74u] { background: rgba(16, 185, 129, .14); color: #047857; }
.order-state--void[b-29w92ui74u] { background: rgba(239, 68, 68, .12); color: #b91c1c; }
:root[data-theme="dark"] .order-state--open[b-29w92ui74u] { color: #fcd34d; }
:root[data-theme="dark"] .order-state--done[b-29w92ui74u] { color: #6ee7b7; }
:root[data-theme="dark"] .order-state--void[b-29w92ui74u] { color: #fca5a5; }

/* The CSV import: a button in the page's language and the chosen file's name (InputFile's own <input> is a child
   component's element, hence ::deep). */
.file-pick[b-29w92ui74u] { position: relative; display: inline-flex; align-items: center; gap: 10px; margin-bottom: 8px; cursor: pointer; }
.file-pick[b-29w92ui74u]  input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-pick-name[b-29w92ui74u] { font-size: 13px; color: var(--adm-fg-94a3b8); }

@media (max-width: 640px) {
    .crm-head[b-29w92ui74u] { flex-direction: column; }
    .row-go-col[b-29w92ui74u], .row-go[b-29w92ui74u] { display: none; }
}

/* ── The list's premium pass (20 Oct, the user: «not premium 10/10»): the CRM at a glance, a live search, the levels as
   chips, each guest at a glance. Light first; the dark theme below. Motion once, on open, and none with reduce-motion. ── */
.crm-head h1[b-29w92ui74u] { font-weight: 800; letter-spacing: -.02em; }

@keyframes crm-rise-b-29w92ui74u { from { opacity: 0; transform: translateY(10px); } }
@keyframes crm-grow-b-29w92ui74u { from { transform: scaleX(0); } }
@keyframes crm-ring-b-29w92ui74u { from { stroke-dashoffset: 100; } }

.crm-kpis[b-29w92ui74u] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 6px 0 20px; }
.crm-kpi[b-29w92ui74u] {
    position: relative; display: grid; align-content: start; gap: 4px; min-height: 112px; padding: 18px 20px; overflow: hidden;
    border-radius: 18px; border: 1px solid #e6e9f2;
    background: radial-gradient(120% 140% at 100% 0%, rgba(99, 102, 241, .08) 0%, rgba(99, 102, 241, 0) 55%), linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 28px -18px rgba(30, 41, 99, .28);
    animation: crm-rise-b-29w92ui74u .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms);
}
.crm-kpi[b-29w92ui74u]::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, #6366f1, #22d3ee); }
.crm-kpi-label[b-29w92ui74u] { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #64748b; }
.crm-kpi-value[b-29w92ui74u] { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: #0f172a; font-variant-numeric: tabular-nums; }
.crm-kpi-sub[b-29w92ui74u] { font-size: .8rem; color: #64748b; }
.crm-kpi--ring .crm-kpi-value[b-29w92ui74u], .crm-kpi--ring .crm-kpi-sub[b-29w92ui74u] { padding-right: 72px; }
.crm-ring[b-29w92ui74u] { position: absolute; right: 20px; bottom: 18px; width: 58px; height: 58px; transform: rotate(-90deg); }
.crm-ring-track[b-29w92ui74u], .crm-ring-fill[b-29w92ui74u] { fill: none; stroke-width: 3.6; }
.crm-ring-track[b-29w92ui74u] { stroke: #e8ecf4; }
.crm-ring-fill[b-29w92ui74u] { stroke: #10b981; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: var(--off); animation: crm-ring-b-29w92ui74u 1.2s cubic-bezier(.2, .8, .2, 1) .2s both; }
.crm-kpi-mix[b-29w92ui74u] { display: flex; height: 7px; margin: 6px 0 2px; border-radius: 999px; overflow: hidden; background: #eef1f6; transform-origin: left center; animation: crm-grow-b-29w92ui74u .9s cubic-bezier(.2, .8, .2, 1) .3s both; }
.crm-kpi-mix i[b-29w92ui74u] { display: block; flex-basis: 0; }
.crm-mix-silver[b-29w92ui74u] { background: linear-gradient(90deg, #e2e8f0, #94a3b8); }
.crm-mix-gold[b-29w92ui74u] { background: linear-gradient(90deg, #fcd34d, #f59e0b); }
.crm-mix-platinum[b-29w92ui74u] { background: linear-gradient(90deg, #c4b5fd, #7c3aed); }
.crm-count[b-29w92ui74u] { position: relative; display: inline-block; }
.crm-count-fx[b-29w92ui74u] { position: absolute; left: 0; top: 0; }
.crm-count.is-counting .crm-count-n[b-29w92ui74u] { visibility: hidden; }
.crm-count:not(.is-counting) .crm-count-fx[b-29w92ui74u] { display: none; }

.crm-toolbar[b-29w92ui74u] { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.crm-search[b-29w92ui74u] { position: relative; flex: 1; min-width: 220px; display: block; }
.crm-search-icon[b-29w92ui74u] { position: absolute; left: 15px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: #94a3b8; pointer-events: none; }
.crm-search-input[b-29w92ui74u] { width: 100%; height: 48px; padding-left: 44px; border-radius: 14px; box-sizing: border-box; font-size: .95rem; transition: border-color .15s, box-shadow .15s; }
.crm-search-input:focus[b-29w92ui74u] { outline: none; border-color: #6366f1; box-shadow: 0 0 0 4px rgba(99, 102, 241, .14); }
.crm-toolbar .new-customer-btn[b-29w92ui74u] { height: 48px; padding: 0 20px; border-radius: 14px; font-weight: 700; }

.crm-levels[b-29w92ui74u] { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.crm-level[b-29w92ui74u] {
    display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px;
    border: 1px solid #e3e7ef; background: #fff; color: #334155; font: inherit; font-size: .86rem; font-weight: 650; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.crm-level:hover[b-29w92ui74u] { border-color: #c7d2fe; background: #f8f9ff; }
.crm-level:focus-visible[b-29w92ui74u] { outline: none; box-shadow: 0 0 0 3px rgba(99, 102, 241, .25); }
.crm-level.on[b-29w92ui74u] { background: #eef0ff; border-color: #6366f1; color: #3730a3; box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); }
.crm-level--silver[b-29w92ui74u]::before, .crm-level--gold[b-29w92ui74u]::before, .crm-level--platinum[b-29w92ui74u]::before { content: ""; width: 9px; height: 9px; border-radius: 50%; }
.crm-level--silver[b-29w92ui74u]::before { background: linear-gradient(135deg, #f8fafc, #94a3b8); box-shadow: inset 0 0 0 1px #94a3b8; }
.crm-level--gold[b-29w92ui74u]::before { background: linear-gradient(135deg, #fde68a, #f59e0b); }
.crm-level--platinum[b-29w92ui74u]::before { background: linear-gradient(135deg, #ddd6fe, #7c3aed); }
.crm-level--blocked[b-29w92ui74u] { margin-left: auto; }
.crm-level--blocked.on[b-29w92ui74u] { background: #fef2f2; border-color: #ef4444; color: #b91c1c; box-shadow: 0 0 0 3px rgba(239, 68, 68, .12); }
.crm-level-n[b-29w92ui74u] { min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center; background: #f1f4f9; color: #475569; font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.crm-level.on .crm-level-n[b-29w92ui74u] { background: #6366f1; color: #fff; }
.crm-level--blocked.on .crm-level-n[b-29w92ui74u] { background: #ef4444; }

.crm-list .crm-row[b-29w92ui74u] { transition: background .15s ease, box-shadow .15s ease; }
.crm-list .crm-row:hover[b-29w92ui74u] { background: #f8f9ff; }
.crm-list .crm-row:focus-visible[b-29w92ui74u] { outline: none; background: #f5f6ff; box-shadow: inset 3px 0 0 #6366f1; }
.crm-list .crm-avatar[b-29w92ui74u] { width: 38px; height: 38px; font-size: .78rem; }
.crm-avatar--silver[b-29w92ui74u] { background: linear-gradient(135deg, #f8fafc, #e2e8f0); color: #334155; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #94a3b8; }
.crm-avatar--gold[b-29w92ui74u] { background: #fef3c7; color: #92400e; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f59e0b; }
.crm-avatar--platinum[b-29w92ui74u] { background: #ede9fe; color: #5b21b6; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #8b5cf6; }
.crm-who[b-29w92ui74u] { display: grid; gap: 2px; min-width: 0; }
.crm-list td.crm-name[b-29w92ui74u] { min-width: 240px; }
.crm-who-name[b-29w92ui74u] { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 700; color: #0f172a; }
.crm-who-sub[b-29w92ui74u] { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; font-weight: 500; color: #94a3b8; }
.crm-flag[b-29w92ui74u] { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: .68rem; font-weight: 800; line-height: 1; }
.crm-flag--allergy[b-29w92ui74u] { background: #fee2e2; color: #b91c1c; }
.crm-flag--bday[b-29w92ui74u] { background: #fef3c7; font-size: .72rem; }
.crm-flag--blocked[b-29w92ui74u] { background: #fee2e2; color: #b91c1c; letter-spacing: .02em; }
.crm-list th.num[b-29w92ui74u], .crm-list td.num[b-29w92ui74u] { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-list td.num[b-29w92ui74u] { font-weight: 600; color: #1e293b; }
.crm-tags[b-29w92ui74u] { white-space: nowrap; }
.crm-tag[b-29w92ui74u] { display: inline-block; margin-right: 4px; padding: 2px 8px; border-radius: 999px; background: #f1f4f9; color: #475569; font-size: .72rem; font-weight: 650; }
.crm-tag--more[b-29w92ui74u] { background: transparent; color: #94a3b8; }
.crm-last[b-29w92ui74u] { white-space: nowrap; font-size: .82rem; color: #475569; }

/* A guest's profile: the same at-a-glance header as their row. */
.crm-profile-hero[b-29w92ui74u] { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 20px; }
.crm-avatar.crm-avatar--xl[b-29w92ui74u] { width: 64px; height: 64px; font-size: 1.2rem; margin: 4px; }
.crm-profile-id[b-29w92ui74u] { flex: 1; min-width: 0; display: grid; gap: 6px; }
.crm-profile-title[b-29w92ui74u] { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.crm-profile-title h2[b-29w92ui74u] { margin: 0; font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; }
.crm-profile-contact[b-29w92ui74u] { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: .9rem; color: var(--adm-fg-94a3b8); }
.crm-profile-chips[b-29w92ui74u] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.crm-chip[b-29w92ui74u] { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 10px; border-radius: 999px; background: #f1f4f9; color: #475569; font-size: .76rem; font-weight: 650; }
.crm-chip--allergy[b-29w92ui74u] { background: #fee2e2; color: #b91c1c; }
.crm-chip--bday[b-29w92ui74u] { background: #fef3c7; color: #92400e; }
.crm-profile-actions[b-29w92ui74u] { display: flex; gap: 8px; flex: 0 0 auto; }
.crm-pstats .stat-card[b-29w92ui74u] { border-radius: 16px; padding: 16px 18px; text-align: left; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 24px -18px rgba(30, 41, 99, .25); }
.crm-pstats .stat-value[b-29w92ui74u] { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.crm-pstats .stat-label[b-29w92ui74u] { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

:root[data-theme="dark"] .crm-kpi[b-29w92ui74u] { border-color: #1e293b; background: radial-gradient(120% 140% at 100% 0%, rgba(99, 102, 241, .16) 0%, rgba(99, 102, 241, 0) 55%), linear-gradient(180deg, #111827 0%, #0d1424 100%); box-shadow: 0 16px 32px -20px rgba(0, 0, 0, .6); }
:root[data-theme="dark"] .crm-kpi-value[b-29w92ui74u] { color: #f8fafc; }
:root[data-theme="dark"] .crm-kpi-label[b-29w92ui74u], :root[data-theme="dark"] .crm-kpi-sub[b-29w92ui74u] { color: #94a3b8; }
:root[data-theme="dark"] .crm-ring-track[b-29w92ui74u] { stroke: #1e293b; }
:root[data-theme="dark"] .crm-kpi-mix[b-29w92ui74u] { background: #1e293b; }
:root[data-theme="dark"] .crm-level[b-29w92ui74u] { background: #0f172a; border-color: #1e293b; color: #e2e8f0; }
:root[data-theme="dark"] .crm-level:hover[b-29w92ui74u] { background: #172036; border-color: #334155; }
:root[data-theme="dark"] .crm-level.on[b-29w92ui74u] { background: rgba(99, 102, 241, .2); border-color: #818cf8; color: #e0e7ff; }
:root[data-theme="dark"] .crm-level-n[b-29w92ui74u] { background: #1e293b; color: #cbd5e1; }
:root[data-theme="dark"] .crm-level--blocked.on[b-29w92ui74u] { background: rgba(239, 68, 68, .16); border-color: #f87171; color: #fecaca; }
:root[data-theme="dark"] .crm-list .crm-row:hover[b-29w92ui74u] { background: rgba(148, 163, 184, .07); }
:root[data-theme="dark"] .crm-list .crm-row:focus-visible[b-29w92ui74u] { background: rgba(99, 102, 241, .1); }
:root[data-theme="dark"] .crm-avatar--silver[b-29w92ui74u] { background: linear-gradient(135deg, #334155, #1e293b); color: #e2e8f0; box-shadow: 0 0 0 2px #0f172a, 0 0 0 4px #94a3b8; }
:root[data-theme="dark"] .crm-avatar--gold[b-29w92ui74u] { background: rgba(245, 158, 11, .2); color: #fcd34d; box-shadow: 0 0 0 2px #0f172a, 0 0 0 4px #f59e0b; }
:root[data-theme="dark"] .crm-avatar--platinum[b-29w92ui74u] { background: rgba(139, 92, 246, .22); color: #ddd6fe; box-shadow: 0 0 0 2px #0f172a, 0 0 0 4px #8b5cf6; }
:root[data-theme="dark"] .crm-who-name[b-29w92ui74u] { color: #f1f5f9; }
:root[data-theme="dark"] .crm-who-sub[b-29w92ui74u] { color: #64748b; }
:root[data-theme="dark"] .crm-flag--allergy[b-29w92ui74u], :root[data-theme="dark"] .crm-flag--blocked[b-29w92ui74u] { background: rgba(239, 68, 68, .18); color: #fca5a5; }
:root[data-theme="dark"] .crm-flag--bday[b-29w92ui74u] { background: rgba(245, 158, 11, .18); }
:root[data-theme="dark"] .crm-list td.num[b-29w92ui74u] { color: #e2e8f0; }
:root[data-theme="dark"] .crm-tag[b-29w92ui74u] { background: #1e293b; color: #cbd5e1; }
:root[data-theme="dark"] .crm-last[b-29w92ui74u] { color: #94a3b8; }
:root[data-theme="dark"] .crm-chip[b-29w92ui74u] { background: #0f172a; color: #cbd5e1; }
:root[data-theme="dark"] .crm-chip--allergy[b-29w92ui74u] { background: rgba(239, 68, 68, .18); color: #fca5a5; }
:root[data-theme="dark"] .crm-chip--bday[b-29w92ui74u] { background: rgba(245, 158, 11, .18); color: #fcd34d; }
:root[data-theme="dark"] .crm-pstats .stat-card[b-29w92ui74u] { box-shadow: none; }

@media (max-width: 1100px) { .crm-kpis[b-29w92ui74u] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .crm-kpis[b-29w92ui74u] { gap: 10px; }
    .crm-kpi[b-29w92ui74u] { min-height: 0; padding: 14px 16px; }
    .crm-kpi-value[b-29w92ui74u] { font-size: 1.6rem; }
    .crm-kpi--ring .crm-kpi-value[b-29w92ui74u], .crm-kpi--ring .crm-kpi-sub[b-29w92ui74u] { padding-right: 54px; }
    .crm-ring[b-29w92ui74u] { right: 14px; bottom: 14px; width: 46px; height: 46px; }
    .crm-toolbar[b-29w92ui74u] { flex-wrap: wrap; }
    .crm-toolbar .new-customer-btn[b-29w92ui74u] { width: 100%; }
    .crm-level--blocked[b-29w92ui74u] { margin-left: 0; }
    .crm-who-sub[b-29w92ui74u] { max-width: 200px; }
}
@media (prefers-reduced-motion: reduce) {
    .crm-kpi[b-29w92ui74u], .crm-kpi-mix[b-29w92ui74u], .crm-ring-fill[b-29w92ui74u] { animation: none; }
}

/* Under 1100 px (a tablet, a narrow window, a phone) each guest is one compact card: the table needed ~880 px and scrolled
   sideways, and on a phone it was a labelled row per field, ~330 px a guest, with empty «Nivel» and «Etiquetas» lines.
   The card: the name and its flags, the level, the spend; under them the phone and the last visit (the visits and the
   tags are on the guest's profile). Between 1101 and 1280 px the table drops only the tags' column. Only this list: the
   invoiced customers' table keeps its own layout. */
@media (max-width: 1280px) {
    .crm-list .crm-tags[b-29w92ui74u], .crm-list .crm-tags-col[b-29w92ui74u] { display: none; }
}
@media (max-width: 1100px) {
    .crm-list .data-table-responsive[b-29w92ui74u], .crm-list .data-table-responsive tbody[b-29w92ui74u] { display: block; width: 100%; }
    .crm-list .data-table-responsive thead[b-29w92ui74u] { display: none; }
    .crm-list .crm-row[b-29w92ui74u] {
        display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 10px; row-gap: 4px;
        width: auto; max-width: 100%; padding: 12px 14px; margin-bottom: 10px; border: 1px solid #e6e9f2; border-radius: 16px;
        background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 22px -16px rgba(30, 41, 99, .3);
    }
    .crm-list .crm-row td[b-29w92ui74u] { display: block; width: auto; min-width: 0; padding: 0; border: none; text-align: left; }
    .crm-list .crm-row td[b-29w92ui74u]::before { content: none; }
    .crm-list .crm-row td.crm-name[b-29w92ui74u] { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
    .crm-list .crm-row td.crm-tier[b-29w92ui74u] { grid-column: 2; grid-row: 1; }
    .crm-list .crm-row td.crm-spend[b-29w92ui74u] { grid-column: 3; grid-row: 1; text-align: right; font-size: .95rem; font-weight: 800; }
    .crm-list .crm-row td.crm-phone[b-29w92ui74u] { grid-column: 1; grid-row: 2; padding-left: 48px; font-size: .8rem; color: #64748b; }
    .crm-list .crm-row td.crm-last[b-29w92ui74u] { grid-column: 2 / 4; grid-row: 2; text-align: right; font-size: .78rem; }
    .crm-list .tier-badge[b-29w92ui74u] { white-space: nowrap; }
    .crm-list .crm-row td.crm-visits[b-29w92ui74u], .crm-list .crm-row td.crm-tags[b-29w92ui74u], .crm-list .crm-row td.row-go[b-29w92ui74u] { display: none; }
    .crm-list .crm-who-name[b-29w92ui74u] { flex-wrap: wrap; white-space: normal; }
    .crm-list .crm-who-sub[b-29w92ui74u] { max-width: none; }
    :root[data-theme="dark"] .crm-list .crm-row[b-29w92ui74u] { background: #111827; border-color: #1e293b; box-shadow: none; }
    :root[data-theme="dark"] .crm-list .crm-row:hover[b-29w92ui74u] { background: #162033; }
    :root[data-theme="dark"] .crm-list .crm-row td.crm-phone[b-29w92ui74u] { color: #94a3b8; }
}
@media (max-width: 640px) {
    .tab[b-29w92ui74u] { padding: 8px 12px; }
    .crm-levels[b-29w92ui74u] { gap: 6px; }
    .crm-level[b-29w92ui74u] { height: 32px; padding: 0 11px; font-size: .8rem; gap: 6px; }
    /* A profile's «Volver» and «RGPD: Eliminar» go under the guest: beside them the name had no room, and drew over them. */
    .crm-profile-hero[b-29w92ui74u] { flex-wrap: wrap; gap: 12px 14px; }
    .crm-avatar.crm-avatar--xl[b-29w92ui74u] { width: 52px; height: 52px; font-size: 1rem; }
    .crm-profile-id[b-29w92ui74u] { flex: 1 1 0; }
    .crm-profile-title h2[b-29w92ui74u] { font-size: 1.25rem; }
    .crm-profile-actions[b-29w92ui74u] { order: 3; flex: 1 0 100%; }
    .crm-profile-actions .btn[b-29w92ui74u] { flex: 1; }
}

/* Duplicados in the CRM's look (the live tester, 22 Oct: it had not had the premium pass): a group per reason, each guest
   with their level's ring, the guest kept marked as such and «Fusionar en la elegida» as the danger it is. */
.dup-groups[b-29w92ui74u] { display: grid; gap: 14px; }
.segment-card.dup-group[b-29w92ui74u] { padding: 14px 16px; border-radius: 16px; }
.dup-group-head[b-29w92ui74u] { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dup-reason[b-29w92ui74u] { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: .76rem; font-weight: 700; }
.dup-count[b-29w92ui74u] { min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center; background: #f1f4f9; color: #475569; font-size: .72rem; font-weight: 800; }
.dup-cards[b-29w92ui74u] { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.dup-card[b-29w92ui74u] { display: grid; gap: 8px; padding: 12px; border: 1px solid #e6e9f2; border-radius: 14px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.dup-card--kept[b-29w92ui74u] { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .14); }
.dup-who[b-29w92ui74u] { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dup-id[b-29w92ui74u] { flex: 1; min-width: 0; }
.dup-who .dup-name[b-29w92ui74u] { margin: 0; font-weight: 700; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dup-who .dup-phone[b-29w92ui74u] { margin: 2px 0 0; font-size: .8rem; color: #64748b; font-variant-numeric: tabular-nums; }
.dup-kept-badge[b-29w92ui74u] { flex: 0 0 auto; height: 22px; padding: 0 9px; border-radius: 999px; display: inline-grid; place-items: center; background: #6366f1; color: #fff; font-size: .7rem; font-weight: 800; }
.dup-card .dup-visits[b-29w92ui74u] { margin: 0; font-size: .8rem; color: #64748b; }
.dup-actions[b-29w92ui74u] { display: flex; flex-wrap: wrap; gap: 6px; }
.dup-actions .btn[b-29w92ui74u] { min-height: 34px; padding: 0 12px; font-size: .78rem; border-radius: 10px; }
.dup-keep.on[b-29w92ui74u] { border-color: #6366f1; color: #3730a3; background: #eef0ff; }
.dup-merge[b-29w92ui74u] { border: 1px solid #fca5a5; color: #b91c1c; background: #fef2f2; font-weight: 700; }
.dup-merge:hover[b-29w92ui74u] { background: #fee2e2; }
:root[data-theme="dark"] .dup-reason[b-29w92ui74u] { background: rgba(99, 102, 241, .18); color: #c7d2fe; }
:root[data-theme="dark"] .dup-count[b-29w92ui74u] { background: #1e293b; color: #cbd5e1; }
:root[data-theme="dark"] .dup-card[b-29w92ui74u] { background: #0f172a; border-color: #1e293b; }
:root[data-theme="dark"] .dup-card--kept[b-29w92ui74u] { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(129, 140, 248, .18); }
:root[data-theme="dark"] .dup-who .dup-name[b-29w92ui74u] { color: #f1f5f9; }
:root[data-theme="dark"] .dup-who .dup-phone[b-29w92ui74u], :root[data-theme="dark"] .dup-card .dup-visits[b-29w92ui74u] { color: #94a3b8; }
:root[data-theme="dark"] .dup-keep.on[b-29w92ui74u] { background: rgba(99, 102, 241, .18); color: #e0e7ff; border-color: #818cf8; }
:root[data-theme="dark"] .dup-merge[b-29w92ui74u] { background: rgba(239, 68, 68, .14); border-color: rgba(248, 113, 113, .5); color: #fca5a5; }
@media (max-width: 640px) {
    .dup-cards[b-29w92ui74u] { grid-template-columns: 1fr; }
    .dup-actions .btn[b-29w92ui74u] { flex: 1; min-height: 40px; }
}

/* A guest's logged messages keep their paragraphs (CommunicationText). */
.crm-comm-text[b-29w92ui74u] { margin-top: 4px; white-space: pre-line; overflow-wrap: anywhere; color: var(--adm-fg-94a3b8); line-height: 1.45; }
/* /Pages/Admin/DeliveryNotes.razor.rz.scp.css */
/* Phone/tablet fixes specific to this page. Everything else (page-header
   stacking, form-row single column, 44px touch targets, table scroll boxes)
   comes from the shared admin-mobile layer — don't duplicate it here.

   PURE CSS file (Blazor CSS isolation) → single `@media`, never `@@media`. */

@media (max-width: 640px) {
    /* The summary strip is `repeat(auto-fit, minmax(180px, 1fr))` (admin-pages
       .sup-summary, shared with Suppliers). Two 180px tiles + gap need 372px,
       so at 390px it silently drops to 1-up and the four tiles bury the
       albaranes table below the fold. Force 2-up like the rest of the admin
       KPI strips. Prefixed with .suppliers-page so it outranks the
       admin-pages.css declaration regardless of stylesheet order. */
    .suppliers-page .sup-summary[b-cpx8hzlzn6] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    /* Editor drawer footer: a draft shows five buttons (Cancelar, Eliminar,
       Anular, Confirmar (suma al stock), Guardar borrador) in a flex row with
       no wrap, so on a phone they squeeze past the drawer edge and the last
       one is unreachable. Wrap them and let each take a full-width-ish row. */
    .suppliers-page .editor-footer[b-cpx8hzlzn6] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .suppliers-page .editor-footer .btn[b-cpx8hzlzn6] {
        flex: 1 1 auto;
    }
}

@media (max-width: 380px) {
    /* Two tiles are too tight below ~380px — mirrors the global stat-grid rule. */
    .suppliers-page .sup-summary[b-cpx8hzlzn6] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Admin/EatsHoursCard.razor.rz.scp.css */
/* «Horario de Mesero Eats», inside one of Admin › Mesero Eats' cards (light: white, #e5e7eb borders, slate text). */
.eats-hours h4[b-lz6k0gkufn] {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 650;
    color: #0f172a;
}

.hours-sub[b-lz6k0gkufn] {
    margin: 0;
    max-width: 62ch;
    font-size: .9rem;
    line-height: 1.5;
    color: #6b7280;
}

.hours-warn[b-lz6k0gkufn] {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 500;
    background: #fffbeb;
    color: #92400e;
}

.hours-week[b-lz6k0gkufn] {
    display: grid;
    margin-top: 14px;
}

.hours-row[b-lz6k0gkufn] {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 6px 0;
    border-top: 1px solid #f1f5f9;
}

.hours-day[b-lz6k0gkufn] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
}

.hours-day input[b-lz6k0gkufn] {
    width: 20px;
    height: 20px;
    accent-color: #16a34a;
}

.is-closed .hours-day[b-lz6k0gkufn] {
    color: #9ca3af;
}

.hours-shifts[b-lz6k0gkufn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    min-width: 0;
}

.hours-shift[b-lz6k0gkufn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hours-time[b-lz6k0gkufn] {
    width: 7.2em;
    min-height: 40px;
    font-variant-numeric: tabular-nums;
}

.hours-dash[b-lz6k0gkufn] {
    color: #9ca3af;
}

.hours-closed[b-lz6k0gkufn] {
    color: #9ca3af;
    font-size: .92rem;
}

.hours-link[b-lz6k0gkufn] {
    min-height: 40px;
    padding: 0 6px;
    border: 0;
    background: none;
    font-size: .88rem;
    font-weight: 600;
    color: #2563eb;
    cursor: pointer;
}

.hours-link.remove-shift[b-lz6k0gkufn] {
    color: #6b7280;
}

.hours-link:focus-visible[b-lz6k0gkufn] {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    border-radius: 6px;
}

.hours-actions[b-lz6k0gkufn] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.hours-actions .btn[b-lz6k0gkufn] {
    min-height: 44px;
}

.hours-msg[b-lz6k0gkufn] {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 500;
}

.hours-msg.is-saved[b-lz6k0gkufn] {
    background: #ecfdf5;
    color: #15803d;
}

.hours-msg.is-error[b-lz6k0gkufn] {
    background: #fef2f2;
    color: #b91c1c;
}

@media (max-width: 520px) {
    .hours-row[b-lz6k0gkufn] { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px 0; }
}
/* /Pages/Admin/EatsSetupSteps.razor.rz.scp.css */
/* «Empieza con Mesero Eats», in Admin › Mesero Eats' own palette (the page's cards are light: white, #e5e7eb borders,
   slate text), so the setup reads as part of the page. */
.eats-setup[b-omk0w9chyk] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 16px;
    color: #334155;
}

.setup-head h3[b-omk0w9chyk] {
    margin: 0 0 6px;
    font-size: 1.35rem;
    font-weight: 650;
    color: #0f172a;
    text-wrap: balance;
}

.setup-sub[b-omk0w9chyk] {
    margin: 0;
    max-width: 62ch;
    line-height: 1.5;
    color: #6b7280;
}

.setup-progress[b-omk0w9chyk] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.setup-bar[b-omk0w9chyk] {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: #f1f5f9;
    overflow: hidden;
}

.setup-fill[b-omk0w9chyk] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #16a34a;
    transition: width .3s ease;
}

.setup-count[b-omk0w9chyk] {
    font-size: .85rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: #6b7280;
}

.setup-steps[b-omk0w9chyk] {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: grid;
}

.setup-step[b-omk0w9chyk] {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 14px;
    padding: 18px 0;
    border-top: 1px solid #e5e7eb;
}

.step-mark[b-omk0w9chyk] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .95rem;
    border: 2px solid #d1d5db;
    color: #6b7280;
    background: #fff;
}

.is-done .step-mark[b-omk0w9chyk] {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

.setup-connect.is-ready .step-mark[b-omk0w9chyk] {
    background: #ff6b35;
    border-color: #ff6b35;
    color: #fff;
}

.step-body[b-omk0w9chyk] {
    min-width: 0;
}

.step-title[b-omk0w9chyk] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.step-title h4[b-omk0w9chyk] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 650;
    color: #0f172a;
}

.step-chip[b-omk0w9chyk] {
    padding: 3px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: #f1f5f9;
    color: #475569;
}

.is-done .step-chip[b-omk0w9chyk] {
    background: #ecfdf5;
    color: #15803d;
}

.step-why[b-omk0w9chyk] {
    margin: 6px 0 0;
    max-width: 62ch;
    font-size: .92rem;
    line-height: 1.5;
    color: #6b7280;
}

.step-value[b-omk0w9chyk] {
    margin: 8px 0 0;
    font-weight: 500;
    overflow-wrap: anywhere;
    color: #1f2937;
}

.step-missing[b-omk0w9chyk] {
    margin: 8px 0 0;
    font-weight: 500;
    color: #92400e;
}

.step-actions[b-omk0w9chyk] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.step-action[b-omk0w9chyk] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.step-link[b-omk0w9chyk] {
    display: inline-block;
    margin-top: 6px;
    font-size: .9rem;
    color: #2563eb;
}

.step-link:focus-visible[b-omk0w9chyk],
.step-action:focus-visible[b-omk0w9chyk] {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.step-field[b-omk0w9chyk] {
    display: block;
    margin: 14px 0 6px;
    font-size: .85rem;
    font-weight: 600;
    color: #374151;
}

.step-msg[b-omk0w9chyk] {
    margin: 10px 0 0;
    font-size: .88rem;
    color: #6b7280;
}

.step-error[b-omk0w9chyk] {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 500;
    background: #fef2f2;
    color: #b91c1c;
}

@media (max-width: 480px) {
    .eats-setup[b-omk0w9chyk] { padding: 18px 16px; }
    .setup-step[b-omk0w9chyk] { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
    .step-mark[b-omk0w9chyk] { width: 28px; height: 28px; font-size: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
    .setup-fill[b-omk0w9chyk] { transition: none; }
}
/* /Pages/Admin/FeedbackTicketCard.razor.rz.scp.css */
/* The ticket's rating QR card (FeedbackTicketCard). Its colours are the back office's tokens, so both themes
   follow; the paper is paper in both — white, with the printer's black. */

.fbt-card[b-bjsu8sa88h] {
    position: relative;
    margin: 0 0 20px;
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 12px;
    padding: 22px;
    overflow: hidden;
}

/* Switched on: a soft glow along the top edge. */
.fbt-card.on[b-bjsu8sa88h]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #f59e0b, #22c55e 55%, #0891b2);
}

.fbt-head[b-bjsu8sa88h] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.fbt-head-text[b-bjsu8sa88h] { flex: 1 1 280px; min-width: 0; }

.fbt-head h2[b-bjsu8sa88h] {
    margin: 0 0 6px;
    font-size: 1.15rem;
    color: var(--adm-fg-f1f5f9);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.fbt-new[b-bjsu8sa88h] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(90deg, #f59e0b, #db2777);
    border-radius: 999px;
    padding: 2px 8px;
}

.fbt-help[b-bjsu8sa88h] { margin: 0; font-size: 0.85rem; line-height: 1.45; color: var(--adm-fg-94a3b8); }

/* The switch */
.fbt-switch[b-bjsu8sa88h] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: var(--adm-fg-e2e8f0);
    font-weight: 600;
    font-size: 0.9rem;
    position: relative;
}

.fbt-switch input[b-bjsu8sa88h] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; min-width: 0; }
.fbt-track[b-bjsu8sa88h] {
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: var(--adm-bg-475569);
    position: relative;
    flex: none;
    transition: background 0.2s ease;
}
.fbt-track[b-bjsu8sa88h]::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease;
}
.fbt-switch input:checked + .fbt-track[b-bjsu8sa88h] { background: #22c55e; }
.fbt-switch input:checked + .fbt-track[b-bjsu8sa88h]::after { transform: translateX(20px); }
.fbt-switch input:focus-visible + .fbt-track[b-bjsu8sa88h] { outline: 2px solid var(--adm-bd-3b82f6); outline-offset: 2px; }
.fbt-switch input:disabled + .fbt-track[b-bjsu8sa88h] { opacity: 0.5; }

.fbt-body[b-bjsu8sa88h] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 24px;
    margin-top: 20px;
    align-items: start;
}

/* The form */
.fbt-form[b-bjsu8sa88h] { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fbt-field[b-bjsu8sa88h] { display: flex; flex-direction: column; gap: 6px; }
.fbt-label[b-bjsu8sa88h] { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--adm-fg-94a3b8); }
.fbt-hint[b-bjsu8sa88h] { font-size: 0.78rem; color: var(--adm-fg-64748b); }

.fbt-chips[b-bjsu8sa88h] { display: flex; gap: 8px; flex-wrap: wrap; }
.fbt-chip[b-bjsu8sa88h] {
    font: inherit;
    font-size: 0.85rem;
    min-height: 38px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--adm-bd-334155);
    background: var(--adm-bg-0f172a);
    color: var(--adm-fg-cbd5e1);
    cursor: pointer;
}
.fbt-chip.on[b-bjsu8sa88h] {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.16);
    color: var(--adm-fg-f1f5f9);
    font-weight: 600;
}
.fbt-chip:focus-visible[b-bjsu8sa88h] { outline: 2px solid var(--adm-bd-3b82f6); outline-offset: 2px; }

/* site.css styles a bare input[type=email]; the class + scope outrank it. */
.fbt-input[b-bjsu8sa88h] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font: inherit;
    font-size: 0.95rem;
    padding: 10px 12px;
    border: 1px solid var(--adm-bd-334155);
    border-radius: 8px;
    background: var(--adm-bg-0f172a);
    color: var(--adm-fg-f1f5f9);
}
.fbt-input:focus[b-bjsu8sa88h] { outline: none; border-color: var(--adm-bd-3b82f6); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); }

.fbt-google[b-bjsu8sa88h] {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.45;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: var(--adm-fg-e2e8f0);
}
.fbt-google.no[b-bjsu8sa88h] {
    background: rgba(148, 163, 184, 0.08);
    border-color: var(--adm-bd-334155);
}
.fbt-google p[b-bjsu8sa88h] { margin: 0; }
.fbt-google .fbt-fair[b-bjsu8sa88h] { margin-top: 4px; color: var(--adm-fg-94a3b8); font-size: 0.8rem; }

.fbt-error[b-bjsu8sa88h] { margin: 0; color: var(--adm-fg-ef4444); font-size: 0.85rem; font-weight: 600; }

.fbt-actions[b-bjsu8sa88h] { display: flex; gap: 10px; flex-wrap: wrap; }
.fbt-btn[b-bjsu8sa88h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    min-height: 44px;
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 8px;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--adm-bg-0f172a);
    color: var(--adm-fg-f1f5f9);
}
.fbt-btn.primary[b-bjsu8sa88h] { background: #2563eb; border-color: #2563eb; color: #fff; }
.fbt-btn:disabled[b-bjsu8sa88h] { opacity: 0.5; cursor: not-allowed; }

/* The paper's block, as it prints: white paper, black ink, in both themes. */
.fbt-side[b-bjsu8sa88h] { display: flex; flex-direction: column; gap: 10px; align-items: center; }

.fbt-paper[b-bjsu8sa88h] {
    width: 100%;
    max-width: 220px;
    box-sizing: border-box;
    padding: 14px 14px 18px;
    background: #fff;
    color: #111;
    border-radius: 4px;
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.55);
    font-family: ui-monospace, Menlo, Consolas, monospace;
    text-align: center;
    transition: opacity 0.2s ease;
    /* A torn edge at the bottom. */
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 6px) no-repeat,
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 6px repeat-x;
    mask: linear-gradient(#000 0 0) top / 100% calc(100% - 6px) no-repeat,
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 6px repeat-x;
}
.fbt-paper.off[b-bjsu8sa88h] { opacity: 0.45; }

.fbt-paper-lines[b-bjsu8sa88h] { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.fbt-paper-lines span[b-bjsu8sa88h] { display: block; height: 5px; border-radius: 2px; background: #d4d4d4; }
.fbt-paper-lines span.short[b-bjsu8sa88h] { width: 60%; }

.fbt-paper-sep[b-bjsu8sa88h] { border-top: 2px dashed #111; margin: 6px 0 10px; }
.fbt-paper-ask[b-bjsu8sa88h] { font-weight: 800; font-size: 1rem; letter-spacing: 0.02em; }
.fbt-paper-sub[b-bjsu8sa88h] { font-size: 0.7rem; margin: 4px 0 10px; }
.fbt-paper-qr[b-bjsu8sa88h] { width: 92px; height: 92px; fill: #111; }

.fbt-stats[b-bjsu8sa88h] { margin: 0; font-size: 0.8rem; color: var(--adm-fg-94a3b8); text-align: center; }

@media (max-width: 720px) {
    .fbt-body[b-bjsu8sa88h] { grid-template-columns: minmax(0, 1fr); }
    .fbt-side[b-bjsu8sa88h] { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
    .fbt-track[b-bjsu8sa88h], .fbt-track[b-bjsu8sa88h]::after, .fbt-paper[b-bjsu8sa88h] { transition: none; }
}
/* /Pages/Admin/FicharEntryMarks.razor.rz.scp.css */
.door-web[b-z1hzqmnya7] {
    display: inline-block;
    margin-left: 6px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    vertical-align: middle;
    background: var(--adm-bg-6366f1-a0_15);
    color: var(--adm-fg-6366f1);
}

.loc[b-z1hzqmnya7] {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    line-height: 1.3;
    white-space: normal;
    cursor: help;
}

.loc-inside[b-z1hzqmnya7] {
    display: inline-block;
    margin: 0 0 0 4px;
    font-size: 12px;
}

.loc-alert[b-z1hzqmnya7] {
    color: var(--adm-fg-ef4444);
    font-weight: 600;
}

.loc-warn[b-z1hzqmnya7] {
    color: var(--adm-fg-f59e0b);
}

.loc-none[b-z1hzqmnya7] {
    color: var(--adm-fg-94a3b8);
}
/* /Pages/Admin/FicharLocationCheckSection.razor.rz.scp.css */
.loc-head[b-v6y911z0i0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.loc-state[b-v6y911z0i0] {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.loc-state.on[b-v6y911z0i0] {
    background: var(--adm-bg-22c55e-a0_15, rgba(34, 197, 94, 0.15));
    color: var(--adm-fg-22c55e, #16a34a);
}

.loc-state.off[b-v6y911z0i0] {
    background: var(--adm-fg-94a3b8-a0_15);
    color: var(--adm-fg-94a3b8);
}

.loc-paused[b-v6y911z0i0],
.loc-since[b-v6y911z0i0] {
    font-size: 13px;
    margin: 0 0 12px 0;
    color: var(--adm-fg-94a3b8);
}

.loc-paused[b-v6y911z0i0] {
    color: var(--adm-fg-f59e0b);
}

.loc-field[b-v6y911z0i0] {
    margin-bottom: 14px;
}

.loc-label[b-v6y911z0i0] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--adm-fg-e2e8f0);
    margin-bottom: 2px;
}

.loc-hint[b-v6y911z0i0] {
    font-size: 12.5px;
    color: var(--adm-fg-94a3b8);
    margin: 0 0 8px 0;
}

.loc-map[b-v6y911z0i0] {
    width: 100%;
    height: 240px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    background: var(--adm-bg-0f172a);
}

.loc-row[b-v6y911z0i0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.loc-coord[b-v6y911z0i0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 140px;
    font-size: 12px;
    color: var(--adm-fg-94a3b8);
}

.loc-coord input[b-v6y911z0i0],
.loc-radius[b-v6y911z0i0] {
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    background: var(--adm-bg-0f172a);
    color: var(--adm-fg-e2e8f0);
    font-size: 14px;
    box-sizing: border-box;
}

.loc-radius[b-v6y911z0i0] {
    max-width: 140px;
}

.loc-notice[b-v6y911z0i0] {
    margin: 4px 0 12px 0;
}

.loc-notice-text[b-v6y911z0i0] {
    max-height: 220px;
    overflow-y: auto;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    background: var(--adm-bg-0f172a);
    color: var(--adm-fg-e2e8f0);
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 8px;
}

.loc-notice-text p[b-v6y911z0i0] {
    margin: 0 0 8px 0;
}

.loc-notice-text .loc-notice-title[b-v6y911z0i0] {
    font-weight: 700;
    font-size: 14px;
}

.loc-notice-text ul[b-v6y911z0i0] {
    margin: 0;
    padding-left: 18px;
    list-style: disc outside;   /* the admin's global reset takes bullets off every list */
}

.loc-notice-text li[b-v6y911z0i0] {
    display: list-item;
    margin-bottom: 6px;
}

.loc-ack[b-v6y911z0i0] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--adm-fg-e2e8f0);
    cursor: pointer;
    margin-bottom: 12px;
}

.loc-ack input[b-v6y911z0i0] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex: 0 0 auto;
}

.loc-actions[b-v6y911z0i0] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.loc-btn[b-v6y911z0i0] {
    padding: 9px 14px;
    border-radius: 8px;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    background: transparent;
    color: var(--adm-fg-e2e8f0);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.loc-btn:disabled[b-v6y911z0i0] {
    opacity: 0.5;
    cursor: not-allowed;
}

.loc-btn.primary[b-v6y911z0i0] {
    background: #6366f1;
    border-color: #6366f1;
    color: #fff;
}

.loc-btn.danger[b-v6y911z0i0] {
    border-color: var(--adm-bd-ef4444-a0_5);
    color: var(--adm-fg-ef4444);
}

.loc-error[b-v6y911z0i0] {
    font-size: 13px;
    color: var(--adm-fg-ef4444);
    margin: 8px 0 0 0;
}

/* The address saved in Ajustes, above the map, with "Buscar esta dirección en el mapa". */
.loc-address[b-v6y911z0i0] {
    margin-bottom: 8px;
}

.loc-address-text[b-v6y911z0i0] {
    font-size: 13px;
    color: var(--adm-fg-94a3b8);
}

.loc-address-text strong[b-v6y911z0i0] {
    color: var(--adm-fg-e2e8f0);
    font-weight: 600;
}

.loc-settings-link[b-v6y911z0i0] {
    color: #6366f1;
}

.loc-find-note[b-v6y911z0i0] {
    font-size: 12.5px;
    margin: 0 0 8px 0;
}

.loc-find-note.ok[b-v6y911z0i0] {
    color: var(--adm-fg-10b981);
}

.loc-find-note.warn[b-v6y911z0i0] {
    color: var(--adm-fg-f59e0b);
}

.loc-find-note.error[b-v6y911z0i0] {
    color: var(--adm-fg-ef4444);
}
/* /Pages/Admin/FicharLocationTalliesCard.razor.rz.scp.css */
/* Registro horario's own .user-summary / .user-card / .user-stats give the block its look; these make a card a button. */
.loc-person[b-4xmmmavr2h] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    border: 1px solid transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.loc-person:hover[b-4xmmmavr2h],
.loc-person:focus-visible[b-4xmmmavr2h] {
    border-color: #2563eb;
    outline: none;
}

/* Each count on one line ("2 fichajes fuera"); a second count goes under the first when the card is narrow. */
.loc-person .user-stats[b-4xmmmavr2h] {
    flex-wrap: wrap;
    gap: 2px 12px;
}

.loc-count[b-4xmmmavr2h] {
    color: var(--adm-fg-ef4444);
    font-weight: 600;
    white-space: nowrap;
}

.loc-tallies-none[b-4xmmmavr2h],
.loc-tallies-hint[b-4xmmmavr2h] {
    margin: 0;
    font-size: 13px;
    color: var(--adm-fg-94a3b8);
}

.loc-tallies-hint[b-4xmmmavr2h] {
    margin-top: 12px;
}
/* /Pages/Admin/Gastos.razor.rz.scp.css */
/* Gastos — premium, scoped (Blazor CSS isolation). All classes gx-* prefixed.
   Light base + :root[data-theme="dark"] overrides (admin runs dark). */

.gx[b-qw0bnr9gpp] { max-width: 1040px; margin: 0 auto; padding: 8px 20px 64px; color: #0f172a; }

.gx-head[b-qw0bnr9gpp] { margin-bottom: 18px; }
.gx-head h1[b-qw0bnr9gpp] { font-size: 26px; font-weight: 800; margin: 0 0 4px; letter-spacing: -.5px; }
.gx-head p[b-qw0bnr9gpp] { margin: 0; color: #64748b; max-width: 620px; line-height: 1.5; font-size: 14.5px; }

/* ---------- drop zone ---------- */
.gx-drop[b-qw0bnr9gpp] {
    position: relative; display: block; cursor: pointer;
    border: 2px dashed #cbd5e1; border-radius: 18px;
    background: linear-gradient(135deg, #f8fafc, #f0f9ff);
    padding: 34px 20px; margin-bottom: 18px;
    transition: border-color .15s ease, background .15s ease, transform .05s ease;
}
.gx-drop:hover[b-qw0bnr9gpp] { border-color: #6366f1; background: linear-gradient(135deg, #eef2ff, #e0f2fe); }
.gx-drop.over[b-qw0bnr9gpp] { border-color: #4f46e5; background: linear-gradient(135deg, #e0e7ff, #dbeafe); transform: scale(1.005); }
.gx-drop.busy[b-qw0bnr9gpp] { pointer-events: none; opacity: .9; }
/* InputFile renders its <input> in a CHILD component → scoped CSS can't reach it
   without ::deep. Make it invisible + fill the whole zone so drops land on it. */
.gx-drop[b-qw0bnr9gpp]  .gx-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.gx-drop.busy[b-qw0bnr9gpp]  .gx-drop-input { display: none; }
.gx-drop-inner[b-qw0bnr9gpp] { text-align: center; pointer-events: none; }
.gx-drop-icon[b-qw0bnr9gpp] { font-size: 34px; margin-bottom: 6px; }
.gx-drop-title[b-qw0bnr9gpp] { font-size: 16px; font-weight: 700; color: #334155; }
.gx-drop-sub[b-qw0bnr9gpp] { font-size: 13px; color: var(--adm-fg-94a3b8); margin-top: 3px; }
.gx-progress[b-qw0bnr9gpp] { width: 220px; height: 6px; border-radius: 999px; background: #e2e8f0; margin: 12px auto 0; overflow: hidden; }
.gx-progress-bar[b-qw0bnr9gpp] { height: 100%; background: linear-gradient(90deg, var(--adm-bggrad-6366f1), var(--adm-bggrad-4f46e5)); border-radius: 999px; transition: width .2s ease; }

/* ---------- toolbar ---------- */
.gx-toolbar[b-qw0bnr9gpp] { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.gx-search[b-qw0bnr9gpp] { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex: 1 1 auto; }
.gx-search input[b-qw0bnr9gpp] { flex: 1 1 220px; min-width: 180px; padding: 9px 13px; border: 1px solid #cbd5e1; border-radius: 10px; font-size: 14px; background: #fff; color: #0f172a; }
.gx-search select[b-qw0bnr9gpp] { padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: 10px; font-size: 13.5px; background: #fff; color: #334155; }
.gx-search input:focus[b-qw0bnr9gpp], .gx-search select:focus[b-qw0bnr9gpp] { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.gx-filters[b-qw0bnr9gpp] { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.gx-chip[b-qw0bnr9gpp] {
    appearance: none; border: 1px solid #e2e8f0; background: #fff; color: #475569;
    font-size: 13.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.gx-chip:hover[b-qw0bnr9gpp] { border-color: #cbd5e1; }
.gx-chip.active[b-qw0bnr9gpp] { background: #4f46e5; border-color: transparent; color: #fff; }
.gx-count[b-qw0bnr9gpp] { font-size: 11px; font-weight: 700; background: rgba(15,23,42,.08); border-radius: 999px; padding: 1px 7px; }
.gx-chip.active .gx-count[b-qw0bnr9gpp] { background: rgba(255,255,255,.25); }

/* ---------- buttons ---------- */
.gx-btn[b-qw0bnr9gpp] { appearance: none; border: 1px solid #cbd5e1; background: #fff; color: #0f172a; font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 10px; cursor: pointer; transition: box-shadow .2s ease; }
.gx-btn:hover:not(:disabled)[b-qw0bnr9gpp] { box-shadow: 0 3px 12px var(--adm-sh-0f172a-a0_1); }
.gx-btn:disabled[b-qw0bnr9gpp] { opacity: .6; cursor: default; }
.gx-btn.primary[b-qw0bnr9gpp] { border-color: transparent; color: var(--adm-fgon-dedffc-ffffff); background: linear-gradient(135deg, var(--adm-bggrad-6366f1), var(--adm-bggrad-4f46e5)); box-shadow: 0 6px 18px var(--adm-sh-4f46e5-a0_28); }
.gx-btn.ghost[b-qw0bnr9gpp] { border-color: transparent; background: transparent; color: #4f46e5; }
.gx-btn.ghost:hover:not(:disabled)[b-qw0bnr9gpp] { background: #eef2ff; box-shadow: none; }

/* ---------- empty ---------- */
.gx-empty[b-qw0bnr9gpp] { text-align: center; padding: 48px 24px; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 16px; color: #64748b; }
.gx-empty-icon[b-qw0bnr9gpp] { font-size: 40px; margin-bottom: 8px; }

/* ---------- summary ---------- */
.gx-summary[b-qw0bnr9gpp] { display: flex; gap: 28px; flex-wrap: wrap; padding: 14px 18px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 12px; }
.gx-summary > div[b-qw0bnr9gpp] { display: flex; flex-direction: column; }
.gx-summary span[b-qw0bnr9gpp] { font-size: 12px; color: #94a3b8; }
.gx-summary strong[b-qw0bnr9gpp] { font-size: 16px; }

/* ---------- nóminas ---------- */
.gx-nom-form[b-qw0bnr9gpp] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 14px; }
.gx-nom-form .gx-field.wide[b-qw0bnr9gpp] { grid-column: span 2; }
.gx-nom-summary[b-qw0bnr9gpp] { display: flex; gap: 28px; flex-wrap: wrap; padding: 12px 16px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; }
.gx-nom-summary > div[b-qw0bnr9gpp] { display: flex; flex-direction: column; }
.gx-nom-summary span[b-qw0bnr9gpp] { font-size: 12px; color: #94a3b8; }
.gx-nom-summary strong[b-qw0bnr9gpp] { font-size: 15px; }
:root[data-theme="dark"] .gx-nom-summary[b-qw0bnr9gpp] { background: #1e293b; border-color: #334155; }
@media (max-width: 620px) { .gx-nom-form[b-qw0bnr9gpp] { grid-template-columns: repeat(2, 1fr); } }

/* ---------- table ---------- */
/* overflow:visible (NOT hidden) so the absolutely-positioned row menu isn't clipped; round the header corners to keep the card look. */
.gx-table-wrap[b-qw0bnr9gpp] { border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.gx-table[b-qw0bnr9gpp] { width: 100%; border-collapse: collapse; }
.gx-table thead th[b-qw0bnr9gpp] { text-align: left; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; padding: 11px 14px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.gx-table thead th:first-child[b-qw0bnr9gpp] { border-top-left-radius: 13px; }
.gx-table thead th:last-child[b-qw0bnr9gpp] { border-top-right-radius: 13px; }
.gx-table th.num[b-qw0bnr9gpp], .gx-table td.num[b-qw0bnr9gpp] { text-align: right; font-variant-numeric: tabular-nums; }
.gx-table tbody td[b-qw0bnr9gpp] { padding: 12px 14px; border-bottom: 1px solid #f1f5f9; font-size: 14px; }
.gx-table tbody tr:last-child td[b-qw0bnr9gpp] { border-bottom: none; }
.gx-table tbody tr:hover[b-qw0bnr9gpp] { background: #f8fafc; cursor: default; }
.gx-supplier[b-qw0bnr9gpp] { font-weight: 600; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-table td.strong[b-qw0bnr9gpp] { font-weight: 700; }
.gx-cat[b-qw0bnr9gpp] { font-size: 12px; font-weight: 600; color: #475569; background: #f1f5f9; padding: 2px 9px; border-radius: 999px; }
.gx-zone[b-qw0bnr9gpp] { font-size: 11px; font-weight: 600; color: #4338ca; background: #e0e7ff; padding: 2px 8px; border-radius: 999px; margin-left: 5px; }
:root[data-theme="dark"] .gx-zone[b-qw0bnr9gpp] { background: #312e81; color: #c7d2fe; }

/* ---------- multi-line editor (in the modal) ---------- */
.gx-line-totals[b-qw0bnr9gpp] { display: flex; flex-direction: column; gap: 3px; padding: 8px 12px; background: #f1f5f9; border-radius: 10px; }
.gx-line-totals > span[b-qw0bnr9gpp] { font-size: 12px; font-weight: 600; color: #475569; }
.gx-line-totals > div[b-qw0bnr9gpp] { font-size: 13.5px; }
.gx-lines-head[b-qw0bnr9gpp] { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.gx-lines-head > span[b-qw0bnr9gpp] { font-size: 12px; font-weight: 700; color: #475569; }
.gx-lines[b-qw0bnr9gpp] { display: flex; flex-direction: column; gap: 6px; }
.gx-line-row[b-qw0bnr9gpp] { display: grid; grid-template-columns: 1.8fr 1.3fr 1fr 1.1fr 1fr 0.8fr 0.8fr 0.8fr 32px; gap: 6px; align-items: center; }
.gx-line-row.gx-line-hdr[b-qw0bnr9gpp] { font-size: 11px; font-weight: 600; color: var(--adm-fg-94a3b8); }
.gx-line-row.gx-line-hdr > span[b-qw0bnr9gpp] { padding-left: 2px; }
.gx-line-row input[b-qw0bnr9gpp], .gx-line-row select[b-qw0bnr9gpp] { padding: 6px 7px; border: 1px solid #cbd5e1; border-radius: 7px; font-size: 13px; background: #fff; color: #0f172a; min-width: 0; }
.gx-line-row input:focus[b-qw0bnr9gpp], .gx-line-row select:focus[b-qw0bnr9gpp] { outline: none; border-color: #6366f1; }
.gx-line-hint[b-qw0bnr9gpp] { font-size: 12px; color: var(--adm-fg-94a3b8); margin-top: 6px; }
:root[data-theme="dark"] .gx-line-totals[b-qw0bnr9gpp] { background: #1e293b; }
:root[data-theme="dark"] .gx-line-totals > span[b-qw0bnr9gpp] { color: #cbd5e1; }
:root[data-theme="dark"] .gx-lines-head > span[b-qw0bnr9gpp] { color: #cbd5e1; }
:root[data-theme="dark"] .gx-line-row input[b-qw0bnr9gpp], :root[data-theme="dark"] .gx-line-row select[b-qw0bnr9gpp] { background: #0f172a; border-color: #475569; color: #e2e8f0; }
@media (max-width: 720px) {
    .gx-line-row[b-qw0bnr9gpp] { grid-template-columns: 1fr 1fr 1fr; }
    .gx-line-row.gx-line-hdr[b-qw0bnr9gpp] { display: none; }
}

.gx-pill[b-qw0bnr9gpp] { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.gx-pill.ok[b-qw0bnr9gpp] { background: #d1fae5; color: #047857; }
.gx-pill.draft[b-qw0bnr9gpp] { background: #fef3c7; color: #92600a; }

.gx-row-actions[b-qw0bnr9gpp] { white-space: nowrap; text-align: right; }
.gx-icon-btn[b-qw0bnr9gpp] { appearance: none; border: none; background: transparent; cursor: pointer; font-size: 16px; padding: 4px 7px; border-radius: 7px; line-height: 1; color: #64748b; }
.gx-icon-btn:hover[b-qw0bnr9gpp] { background: #f1f5f9; color: #0f172a; }
.gx-icon-btn.ok[b-qw0bnr9gpp] { color: var(--adm-fg-047857); }
.gx-icon-btn.ok:hover[b-qw0bnr9gpp] { background: #d1fae5; }

/* row 3-dot menu */
.gx-menu-backdrop[b-qw0bnr9gpp] { position: fixed; inset: 0; z-index: 80; }
.gx-rowmenu[b-qw0bnr9gpp] { position: absolute; right: 6px; top: 100%; margin-top: 2px; z-index: 130; min-width: 168px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 12px 32px rgba(15,23,42,.18); padding: 6px; text-align: left; }
.gx-rowmenu button[b-qw0bnr9gpp] { display: block; width: 100%; text-align: left; border: none; background: transparent; cursor: pointer;
    font-size: 13.5px; font-weight: 600; color: #334155; padding: 9px 11px; border-radius: 8px; }
.gx-rowmenu button:hover[b-qw0bnr9gpp] { background: #f1f5f9; }
.gx-rowmenu button.danger[b-qw0bnr9gpp] { color: #b91c1c; }
.gx-rowmenu button.danger:hover[b-qw0bnr9gpp] { background: #fee2e2; }

/* ---------- modal ---------- */
.gx-modal-backdrop[b-qw0bnr9gpp] { position: fixed; inset: 0; z-index: 2000; background: var(--adm-scrim-0f172a-a0_45); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.gx-modal[b-qw0bnr9gpp] { width: 100%; max-width: 680px; max-height: 90vh; display: flex; flex-direction: column; background: #fff; border-radius: 18px; box-shadow: 0 24px 64px rgba(15,23,42,.3); overflow: hidden; }
.gx-modal.with-preview[b-qw0bnr9gpp] { max-width: 1000px; }
.gx-modal-head[b-qw0bnr9gpp] { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid #f1f5f9; flex: 0 0 auto; }
.gx-modal-head h2[b-qw0bnr9gpp] { margin: 0; font-size: 18px; font-weight: 700; }
.gx-modal-split[b-qw0bnr9gpp] { display: flex; align-items: stretch; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.gx-modal-preview[b-qw0bnr9gpp] { flex: 0 0 44%; max-width: 44%; background: var(--adm-bg-0b1220); padding: 12px; overflow: auto; }
.gx-modal-preview img[b-qw0bnr9gpp] { width: 100%; height: auto; border-radius: 8px; display: block; }
.gx-modal-preview object[b-qw0bnr9gpp] { width: 100%; height: 100%; min-height: 60vh; border: none; border-radius: 8px; }
.gx-preview-loading[b-qw0bnr9gpp] { color: var(--adm-fg-94a3b8); text-align: center; padding: 40px 12px; font-size: 14px; }
.gx-preview-loading a[b-qw0bnr9gpp] { color: var(--adm-fg-818cf8); }
.gx-modal-body[b-qw0bnr9gpp] { padding: 22px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; flex: 1 1 auto; overflow: auto; align-content: start; }
.gx-modal.with-preview .gx-modal-body[b-qw0bnr9gpp] { grid-template-columns: 1fr 1fr; }
.gx-field[b-qw0bnr9gpp] { display: flex; flex-direction: column; gap: 4px; }
.gx-field.wide[b-qw0bnr9gpp] { grid-column: span 2; }
.gx-field > span[b-qw0bnr9gpp] { font-size: 12px; font-weight: 600; color: #475569; }
.gx-field input[b-qw0bnr9gpp], .gx-field select[b-qw0bnr9gpp] { padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: 9px; font-size: 14px; background: #fff; color: #0f172a; }
.gx-field input:focus[b-qw0bnr9gpp], .gx-field select:focus[b-qw0bnr9gpp] { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.gx-file-pick[b-qw0bnr9gpp] { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 9px 11px; border: 1px dashed #cbd5e1; border-radius: 9px; font-size: 13px; color: #64748b; cursor: pointer; overflow: hidden; }
.gx-file-pick[b-qw0bnr9gpp]  input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.gx-modal-foot[b-qw0bnr9gpp] { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid #f1f5f9; background: #f8fafc; }

/* ===================== dark ===================== */
:root[data-theme="dark"] .gx[b-qw0bnr9gpp] { color: #e2e8f0; }
:root[data-theme="dark"] .gx-head p[b-qw0bnr9gpp] { color: #94a3b8; }
:root[data-theme="dark"] .gx-drop[b-qw0bnr9gpp] { border-color: #475569; background: linear-gradient(135deg, #1a2436, #15233a); }
:root[data-theme="dark"] .gx-drop:hover[b-qw0bnr9gpp] { border-color: #6366f1; background: linear-gradient(135deg, #1e2a44, #182a45); }
:root[data-theme="dark"] .gx-drop.over[b-qw0bnr9gpp] { border-color: #818cf8; background: linear-gradient(135deg, #25305a, #1e3358); }
:root[data-theme="dark"] .gx-drop-title[b-qw0bnr9gpp] { color: #e2e8f0; }
:root[data-theme="dark"] .gx-drop-sub[b-qw0bnr9gpp] { color: #94a3b8; }
:root[data-theme="dark"] .gx-progress[b-qw0bnr9gpp] { background: #334155; }

:root[data-theme="dark"] .gx-search input[b-qw0bnr9gpp], :root[data-theme="dark"] .gx-search select[b-qw0bnr9gpp] { background: #0f172a; border-color: #475569; color: #e2e8f0; }
:root[data-theme="dark"] .gx-rowmenu[b-qw0bnr9gpp] { background: #1e293b; border-color: #334155; box-shadow: 0 12px 32px rgba(0,0,0,.4); }
:root[data-theme="dark"] .gx-rowmenu button[b-qw0bnr9gpp] { color: #cbd5e1; }
:root[data-theme="dark"] .gx-rowmenu button:hover[b-qw0bnr9gpp] { background: #334155; }
:root[data-theme="dark"] .gx-rowmenu button.danger[b-qw0bnr9gpp] { color: #fca5a5; }
:root[data-theme="dark"] .gx-rowmenu button.danger:hover[b-qw0bnr9gpp] { background: #7f1d1d; }
:root[data-theme="dark"] .gx-icon-btn[b-qw0bnr9gpp] { color: #94a3b8; }
:root[data-theme="dark"] .gx-icon-btn:hover[b-qw0bnr9gpp] { color: #e2e8f0; }
:root[data-theme="dark"] .gx-chip[b-qw0bnr9gpp] { background: #1e293b; border-color: #334155; color: #cbd5e1; }
:root[data-theme="dark"] .gx-chip.active[b-qw0bnr9gpp] { background: #4f46e5; color: #fff; }
:root[data-theme="dark"] .gx-count[b-qw0bnr9gpp] { background: rgba(255,255,255,.12); }

:root[data-theme="dark"] .gx-btn[b-qw0bnr9gpp] { background: #1e293b; border-color: #475569; color: #e2e8f0; }
:root[data-theme="dark"] .gx-btn.ghost[b-qw0bnr9gpp] { background: transparent; color: #a5b4fc; }
:root[data-theme="dark"] .gx-btn.ghost:hover:not(:disabled)[b-qw0bnr9gpp] { background: #312e81; }

:root[data-theme="dark"] .gx-empty[b-qw0bnr9gpp] { background: #1e293b; border-color: #334155; color: #94a3b8; }
:root[data-theme="dark"] .gx-summary[b-qw0bnr9gpp] { background: #1e293b; border-color: #334155; }
:root[data-theme="dark"] .gx-summary span[b-qw0bnr9gpp] { color: #94a3b8; }

:root[data-theme="dark"] .gx-table-wrap[b-qw0bnr9gpp] { border-color: #334155; box-shadow: none; }
:root[data-theme="dark"] .gx-table thead th[b-qw0bnr9gpp] { background: #18233a; border-bottom-color: #334155; color: #94a3b8; }
:root[data-theme="dark"] .gx-table tbody td[b-qw0bnr9gpp] { border-bottom-color: #1f2b40; }
:root[data-theme="dark"] .gx-table tbody tr:hover[b-qw0bnr9gpp] { background: #1b2740; }
:root[data-theme="dark"] .gx-cat[b-qw0bnr9gpp] { background: #334155; color: #cbd5e1; }
:root[data-theme="dark"] .gx-pill.ok[b-qw0bnr9gpp] { background: #064e3b; color: #6ee7b7; }
:root[data-theme="dark"] .gx-pill.draft[b-qw0bnr9gpp] { background: #422006; color: #fcd34d; }
:root[data-theme="dark"] .gx-icon-btn:hover[b-qw0bnr9gpp] { background: #334155; }
:root[data-theme="dark"] .gx-icon-btn.ok:hover[b-qw0bnr9gpp] { background: #064e3b; }
:root[data-theme="dark"] .gx-icon-btn.danger:hover[b-qw0bnr9gpp] { background: #7f1d1d; }

:root[data-theme="dark"] .gx-modal[b-qw0bnr9gpp] { background: #1e293b; box-shadow: 0 24px 64px rgba(0,0,0,.5); }
:root[data-theme="dark"] .gx-modal-head[b-qw0bnr9gpp] { border-bottom-color: #334155; }
:root[data-theme="dark"] .gx-field > span[b-qw0bnr9gpp] { color: #cbd5e1; }
:root[data-theme="dark"] .gx-field input[b-qw0bnr9gpp], :root[data-theme="dark"] .gx-field select[b-qw0bnr9gpp] { background: #0f172a; border-color: #475569; color: #e2e8f0; }
:root[data-theme="dark"] .gx-file-pick[b-qw0bnr9gpp] { border-color: #475569; color: #94a3b8; }
:root[data-theme="dark"] .gx-modal-foot[b-qw0bnr9gpp] { background: #18233a; border-top-color: #334155; }

@media (max-width: 760px) {
    .gx-modal-split[b-qw0bnr9gpp] { flex-direction: column; overflow: auto; }
    .gx-modal-preview[b-qw0bnr9gpp] { flex: 0 0 auto; max-width: 100%; max-height: 38vh; }
    .gx-modal-preview object[b-qw0bnr9gpp] { min-height: 34vh; }
}
@media (max-width: 640px) {
    .gx-modal-body[b-qw0bnr9gpp] { grid-template-columns: 1fr 1fr; }
    .gx-field.wide[b-qw0bnr9gpp] { grid-column: span 2; }
    .gx-summary[b-qw0bnr9gpp] { gap: 18px; }
}

/* ===================== phone / tablet ===================== */
/* The 9-column table never fits a phone. The shared fallback in admin-mobile.css
   catches an unwrapped <table> by making it display:block — that scrolls, but it
   squashes every column into a sliver. Keep it a real table at its natural width
   and scroll the wrapper instead (what .table-wrap does, but only below desktop
   so the desktop card keeps fitting its columns to 100%). */
@media (max-width: 1024px) {
    .gx-table-wrap[b-qw0bnr9gpp] { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
    .gx-table-wrap .gx-table[b-qw0bnr9gpp] { display: table; min-width: max-content; max-width: none; }
}

@media (max-width: 640px) {
    .gx[b-qw0bnr9gpp] { padding: 4px 0 24px; }   /* the shell already pads 12–16px each side */

    /* The ⋯ menu is the ONLY way to edit on touch (the row's dblclick isn't), and it
       now sits inside the scrolling table box, which would clip it. position:fixed
       escapes that box — float it as a sheet, clear of the support FAB. */
    .gx-menu-backdrop[b-qw0bnr9gpp] { background: var(--adm-bg-0f172a-a0_35); }
    .gx-rowmenu[b-qw0bnr9gpp] { position: fixed; top: auto; left: 12px; right: 12px; bottom: 96px; margin-top: 0; min-width: 0; box-shadow: 0 16px 40px var(--adm-sh-0f172a-a0_32); }
    .gx-rowmenu button[b-qw0bnr9gpp] { padding: 13px 12px; font-size: 15px; }
}

/* .gx-modal is a clipped column flex, so the plain-bodied modals (periódicos,
   nóminas) can't reach their own bottom once the content passes 90vh. */
@media (max-width: 760px) {
    .gx-modal-scroll[b-qw0bnr9gpp] { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* Small phones: two columns leave ~140px per field — too tight for a date input. */
@media (max-width: 480px) {
    .gx-modal-backdrop[b-qw0bnr9gpp] { padding: 10px; }
    .gx-modal-head[b-qw0bnr9gpp], .gx-modal-foot[b-qw0bnr9gpp] { padding-left: 16px; padding-right: 16px; }
    .gx-modal-body[b-qw0bnr9gpp], .gx-modal.with-preview .gx-modal-body[b-qw0bnr9gpp] { grid-template-columns: 1fr; padding: 18px 16px; gap: 12px; }
    /* span 2 in a one-column grid spawns an implicit second column → overflow. */
    .gx-field.wide[b-qw0bnr9gpp] { grid-column: 1 / -1; }
}

/* Light admin (the default since 2026-10-12). Measured light-only contrast, now 4.5:1 or more; dark untouched. */
:root[data-theme="light"] .gx-table thead th[b-qw0bnr9gpp],
:root[data-theme="light"] .gx-summary span[b-qw0bnr9gpp] { color: #64748b; } /* #94a3b8 on #f8fafc: 2.45:1 */
/* /Pages/Admin/GiftCards.razor.rz.scp.css */
/* Base classes for isolated CSS */
.btn[b-efc98dm8sw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    min-height: 44px;
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    background: var(--adm-bg-1e293b);
    color: var(--adm-fgon-ffffff-e2e8f0);
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.btn:hover[b-efc98dm8sw] { background: var(--adm-bghov-ffffff-334155); }
.btn:active[b-efc98dm8sw] { transform: scale(0.97); }
.btn.primary[b-efc98dm8sw] { background: #2563eb; color: #fff; border-color: #1e4fcb; }
.btn.primary:hover[b-efc98dm8sw] { background: #1d4ed8; }
.btn.primary:active[b-efc98dm8sw] { background: #1e40af; }
.btn.primary:disabled[b-efc98dm8sw] { background: var(--adm-bg-475569); color: var(--adm-fgon-f9fafb-94a3b8); cursor: not-allowed; }
.btn.secondary[b-efc98dm8sw] { background: var(--adm-bg-334155); color: var(--adm-fgon-f1f5f9-e2e8f0); }
.btn.secondary:hover[b-efc98dm8sw] { background: var(--adm-bghov-f1f5f9-475569); }
.btn.secondary:active[b-efc98dm8sw] { background: var(--adm-bg-556677); }
.btn.outline[b-efc98dm8sw] { background: transparent; border-color: var(--adm-bd-475569); color: var(--adm-fg-94a3b8); }
.btn.outline:hover[b-efc98dm8sw] { border-color: var(--adm-bd-3b82f6); color: var(--adm-fg-e2e8f0); }
.btn.outline:active[b-efc98dm8sw] { background: var(--adm-bg-1e293b); border-color: var(--adm-bdon-ffffff-3b82f6); }

.form-input[b-efc98dm8sw], .form-select[b-efc98dm8sw] {
    width: 100%;
    padding: 10px 12px;
    min-height: 44px;
    background: var(--adm-bg-0f172a);
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    color: var(--adm-fgon-f8fafc-e2e8f0);
    font-size: 0.85rem;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.form-input:focus[b-efc98dm8sw], .form-select:focus[b-efc98dm8sw] {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-3b82f6);
    box-shadow: 0 0 0 2px var(--adm-sh-3b82f6-a0_2);
}

.form-input[b-efc98dm8sw]::placeholder { color: var(--adm-fgon-f8fafc-475569); }
textarea.form-input[b-efc98dm8sw] { resize: vertical; min-height: 60px; }

.spinner[b-efc98dm8sw] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--adm-bd-ffffff-a0_2);
    border-top-color: var(--adm-bd-3b82f6);
    border-radius: 50%;
    animation: spin-b-efc98dm8sw 0.7s linear infinite;
    margin: 0 auto;
}

.gift-cards-page[b-efc98dm8sw] {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-efc98dm8sw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.header-left[b-efc98dm8sw] {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.header-left h1[b-efc98dm8sw] {
    margin: 0;
    font-size: 1.5rem;
    color: var(--adm-fg-f1f5f9);
}

.item-count[b-efc98dm8sw] {
    font-size: 0.85rem;
    color: var(--adm-fgon-ffffff-64748b);
    background: var(--adm-bg-1e293b);
    padding: 4px 10px;
    border-radius: 12px;
}

.header-actions[b-efc98dm8sw] {
    display: flex;
    gap: 8px;
}

.message-banner[b-efc98dm8sw] {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.message-banner.error[b-efc98dm8sw] { background: var(--adm-bg-7f1d1d); color: var(--adm-fgon-fee2e2-fca5a5); }
.message-banner.success[b-efc98dm8sw] { background: var(--adm-bg-14532d); color: var(--adm-fgon-def7e8-86efac); }
.message-banner .dismiss[b-efc98dm8sw] { background: none; border: none; color: inherit; font-size: 1.2rem; cursor: pointer; min-width: 44px; min-height: 44px; }

/* Tabs */
.tabs[b-efc98dm8sw] {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--adm-bd-1e293b);
    padding-bottom: 0;
}

.tab[b-efc98dm8sw] {
    padding: 12px 20px;
    min-height: 44px;
    background: none;
    border: none;
    color: var(--adm-fg-94a3b8);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.tab:hover[b-efc98dm8sw] { color: var(--adm-fg-e2e8f0); }
.tab:active[b-efc98dm8sw] { color: var(--adm-fgon-ffffff-e2e8f0); background: var(--adm-bg-1e293b); }
.tab:focus-visible[b-efc98dm8sw] { outline: 2px solid var(--adm-bd-3b82f6); outline-offset: -2px; }
.tab.active[b-efc98dm8sw] { color: var(--adm-fg-3b82f6); border-bottom-color: var(--adm-bd-3b82f6); }

/* Filter */
.filter-bar[b-efc98dm8sw] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.search-input[b-efc98dm8sw] { max-width: 280px; }

/* Cards Grid */
.cards-grid[b-efc98dm8sw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.gift-card[b-efc98dm8sw] {
    background: linear-gradient(135deg, var(--adm-bggrad-1e293b) 0%, var(--adm-bggrad-0f172a) 100%);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 16px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.25s;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: hidden;
}

.gift-card[b-efc98dm8sw]::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, var(--adm-bg-3b82f6-a0_08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.gift-card:hover[b-efc98dm8sw] {
    border-color: var(--adm-bdon-ffffff-3b82f6);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px var(--adm-sh-000000-a0_4), 0 0 0 1px var(--adm-sh-3b82f6-a0_1);
}

.gift-card:active[b-efc98dm8sw] {
    transform: scale(0.98);
    box-shadow: none;
}

.gift-card:focus-visible[b-efc98dm8sw] {
    outline: 2px solid var(--adm-bdon-ffffff-3b82f6);
    outline-offset: 2px;
}

.gift-card.active[b-efc98dm8sw] { border-left: 4px solid var(--adm-bd-22c55e); }
.gift-card.redeemed[b-efc98dm8sw] { border-left: 4px solid var(--adm-bd-64748b); opacity: 0.7; }
.gift-card.expired[b-efc98dm8sw] { border-left: 4px solid var(--adm-bd-f59e0b); opacity: 0.7; }
.gift-card.disabled[b-efc98dm8sw] { border-left: 4px solid var(--adm-bd-ef4444); opacity: 0.5; }

.card-top[b-efc98dm8sw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.card-brand[b-efc98dm8sw] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--adm-fg-64748b);
    font-weight: 600;
}

.card-code[b-efc98dm8sw] {
    font-family: 'Courier New', monospace;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--adm-fgon-fafbfd-e2e8f0);
    margin-bottom: 16px;
    letter-spacing: 2px;
    padding: 10px 14px;
    background: var(--adm-bg-000000-a0_25);
    border-radius: 8px;
    text-align: center;
}

.card-amounts[b-efc98dm8sw] {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
}

.card-balance .label[b-efc98dm8sw],
.card-original .label[b-efc98dm8sw] {
    display: block;
    font-size: 0.65rem;
    color: var(--adm-fg-64748b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.card-balance .value[b-efc98dm8sw] {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--adm-fg-22c55e);
}

.card-original .value[b-efc98dm8sw] {
    font-size: 1rem;
    color: var(--adm-fg-94a3b8);
}

.card-bottom[b-efc98dm8sw] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 12px;
    border-top: 1px solid var(--adm-bd-ffffff-a0_06);
}

.card-people[b-efc98dm8sw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.status-badge[b-efc98dm8sw] {
    font-size: 0.7rem;
    padding: 3px 10px;
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.status-badge.active[b-efc98dm8sw] { background: var(--adm-bg-14532d); color: var(--adm-fgon-def7e8-86efac); }
.status-badge.redeemed[b-efc98dm8sw] { background: var(--adm-bg-1e293b); color: var(--adm-fgon-ffffff-94a3b8); }
.status-badge.expired[b-efc98dm8sw] { background: var(--adm-bg-451a03); color: var(--adm-fgon-fde5d8-fcd34d); }
.status-badge.disabled[b-efc98dm8sw] { background: var(--adm-bg-7f1d1d); color: var(--adm-fgon-fee2e2-fca5a5); }

.expiry[b-efc98dm8sw] { font-size: 0.72rem; color: var(--adm-fg-64748b); }

.card-recipient[b-efc98dm8sw],
.card-purchaser[b-efc98dm8sw] {
    font-size: 0.78rem;
    color: var(--adm-fg-94a3b8);
}

/* Balance Check */
.balance-check-section[b-efc98dm8sw] { max-width: 600px; }
.balance-check-section h2[b-efc98dm8sw] { color: var(--adm-fg-f1f5f9); margin-bottom: 16px; font-size: 1.2rem; }

.balance-form[b-efc98dm8sw] {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.balance-result[b-efc98dm8sw] { margin-top: 16px; }

.balance-card[b-efc98dm8sw] {
    background: var(--adm-bg-1e293b);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.bc-code[b-efc98dm8sw] { font-family: monospace; font-size: 1.2rem; color: var(--adm-fg-e2e8f0); margin-bottom: 8px; letter-spacing: 1px; }
.bc-balance[b-efc98dm8sw] { font-size: 2rem; font-weight: 700; color: var(--adm-fg-22c55e); }
.bc-status[b-efc98dm8sw] { margin: 8px 0; }
.bc-original[b-efc98dm8sw], .bc-expiry[b-efc98dm8sw] { font-size: 0.85rem; color: var(--adm-fg-64748b); }

/* Stats */
.stats-grid[b-efc98dm8sw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.stat-card[b-efc98dm8sw] {
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.stat-card.highlight[b-efc98dm8sw] { border-color: var(--adm-bdon-eff6ff-3b82f6); background: var(--adm-bg-1e3a5f); }

.stat-value[b-efc98dm8sw] {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--adm-fg-f1f5f9);
    margin-bottom: 4px;
}

.stat-label[b-efc98dm8sw] {
    font-size: 0.8rem;
    color: var(--adm-fg-64748b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Transactions */
.txn-list[b-efc98dm8sw] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.txn-row[b-efc98dm8sw] {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 8px 12px;
    background: var(--adm-bg-0f172a);
    border-radius: 6px;
    font-size: 0.85rem;
}

.txn-date[b-efc98dm8sw] { color: var(--adm-fg-64748b); min-width: 80px; }
.txn-type[b-efc98dm8sw] { color: var(--adm-fg-94a3b8); min-width: 80px; }
.txn-desc[b-efc98dm8sw] { color: var(--adm-fg-cbd5e1); flex: 1; }
.txn-amount[b-efc98dm8sw] { font-weight: 600; min-width: 80px; text-align: right; }
.txn-amount.positive[b-efc98dm8sw] { color: var(--adm-fg-22c55e); }
.txn-amount.negative[b-efc98dm8sw] { color: var(--adm-fg-ef4444); }
.txn-balance[b-efc98dm8sw] { color: var(--adm-fg-64748b); min-width: 90px; text-align: right; }

h3[b-efc98dm8sw] { color: var(--adm-fg-f1f5f9); font-size: 1rem; margin: 16px 0 8px; }

/* Modal */
.modal-overlay[b-efc98dm8sw] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--adm-scrim-000000-a0_6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-panel[b-efc98dm8sw] {
    background: var(--adm-bg-1e293b);
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--adm-bdon-ffffff-334155);
}

.modal-panel.wide[b-efc98dm8sw] { max-width: 700px; }

.modal-header[b-efc98dm8sw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--adm-bd-334155);
}

.modal-header h2[b-efc98dm8sw] { margin: 0; font-size: 1.1rem; color: var(--adm-fg-f1f5f9); }

.modal-close[b-efc98dm8sw] {
    background: none;
    border: none;
    color: var(--adm-fg-94a3b8);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.modal-close:hover[b-efc98dm8sw] { background: var(--adm-bg-334155); }
.modal-close:active[b-efc98dm8sw] { background: var(--adm-bg-475569); }

.modal-body[b-efc98dm8sw] { padding: 20px; }
.modal-footer[b-efc98dm8sw] { padding: 16px 20px; border-top: 1px solid var(--adm-bd-334155); display: flex; gap: 8px; justify-content: flex-end; }

.form-group[b-efc98dm8sw] { margin-bottom: 14px; }
.form-group label[b-efc98dm8sw] { display: block; font-size: 0.8rem; color: var(--adm-fg-94a3b8); margin-bottom: 4px; }

.form-row[b-efc98dm8sw] { display: flex; gap: 12px; }
.form-row .form-group[b-efc98dm8sw] { flex: 1; }

/* Detail */
.detail-grid[b-efc98dm8sw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.detail-item[b-efc98dm8sw] { }
.detail-label[b-efc98dm8sw] { display: block; font-size: 0.7rem; color: var(--adm-fg-64748b); text-transform: uppercase; letter-spacing: 0.5px; }
.detail-value[b-efc98dm8sw] { color: var(--adm-fg-e2e8f0); font-size: 0.95rem; }
.detail-value.large[b-efc98dm8sw] { font-size: 1.5rem; font-weight: 700; color: var(--adm-fg-22c55e); }

/* Detail Actions */
.detail-actions[b-efc98dm8sw] {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.action-btn[b-efc98dm8sw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
}

.action-btn svg[b-efc98dm8sw] { flex-shrink: 0; }

.action-btn.whatsapp[b-efc98dm8sw] { background: var(--adm-bg-128c7e); color: var(--adm-fgon-dbfaf7-ffffff); border-color: var(--adm-bdon-dbfaf7-075e54); }
.action-btn.whatsapp:hover[b-efc98dm8sw] { background: var(--adm-bghov-dbfaf7-075e54); }

.action-btn.danger[b-efc98dm8sw] { background: transparent; border-color: var(--adm-bd-ef4444); color: var(--adm-fg-ef4444); }
.action-btn.danger:hover[b-efc98dm8sw] { background: var(--adm-bg-7f1d1d); color: var(--adm-fgon-fee2e2-fca5a5); }

.action-btn.reactivate[b-efc98dm8sw] { background: transparent; border-color: var(--adm-bd-22c55e); color: var(--adm-fg-22c55e); }
.action-btn.reactivate:hover[b-efc98dm8sw] { background: var(--adm-bg-14532d); color: var(--adm-fgon-def7e8-86efac); }

.form-hint[b-efc98dm8sw] { font-size: 0.8rem; color: var(--adm-fg-94a3b8); margin: -4px 0 12px; }

.modal-error[b-efc98dm8sw] { background: var(--adm-bg-7f1d1d); color: var(--adm-fgon-fee2e2-fca5a5); padding: 8px 12px; border-radius: 8px; margin-bottom: 12px; font-size: 0.85rem; }

.email-result[b-efc98dm8sw] { font-size: 0.85rem; padding: 8px 12px; border-radius: 8px; margin: -8px 0 16px; }
.email-result.error[b-efc98dm8sw] { background: var(--adm-bg-7f1d1d); color: var(--adm-fgon-fee2e2-fca5a5); }
.email-result.success[b-efc98dm8sw] { background: var(--adm-bg-14532d); color: var(--adm-fgon-def7e8-86efac); }

.topup-section[b-efc98dm8sw] { margin: 16px 0; padding: 12px; background: var(--adm-bg-0f172a); border-radius: 8px; }
.topup-section h3[b-efc98dm8sw] { margin: 0 0 8px; }
.topup-form[b-efc98dm8sw] { display: flex; gap: 8px; }

/* Loading */
.loading-state[b-efc98dm8sw] { text-align: center; padding: 60px; color: var(--adm-fg-64748b); }
.empty-state[b-efc98dm8sw] { text-align: center; padding: 40px; color: var(--adm-fg-64748b); }

.spinner-sm[b-efc98dm8sw] {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid var(--adm-bd-ffffff-a0_3);
    border-top-color: var(--adm-bd-ffffff);
    border-radius: 50%;
    animation: spin-b-efc98dm8sw 0.6s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
}

@keyframes spin-b-efc98dm8sw { to { transform: rotate(360deg); } }

@media (max-width: 768px) {
    .gift-cards-page[b-efc98dm8sw] { padding: 12px; }
    .cards-grid[b-efc98dm8sw] { grid-template-columns: 1fr; }
    .filter-bar[b-efc98dm8sw] { flex-direction: column; align-items: stretch; }
    .search-input[b-efc98dm8sw] { max-width: none; }
    .form-row[b-efc98dm8sw] { flex-direction: column; }
    .txn-row[b-efc98dm8sw] { flex-wrap: wrap; }
    .balance-form[b-efc98dm8sw] { flex-direction: column; }
    .topup-form[b-efc98dm8sw] { flex-direction: column; }
}

/* Phone. The shared admin-mobile layer already stacks the header, scrolls the
   tab strip and collapses the grids — these are the page-specific leftovers. */
@media (max-width: 640px) {
    /* That layer gives .tabs overflow-x:auto, which also computes overflow-y to
       auto; .tab's -2px margin then leaves the active underline outside the
       scrollport and it vanishes. Pad the strip so the indicator stays inside. */
    .tabs[b-efc98dm8sw] { padding-bottom: 2px; }

    /* Stat tiles are 2-up on a phone (shared layer), so a .stat-card has ~127px
       of inner width and a 1.8rem euro amount wraps mid-number. Shrink to fit. */
    .stat-card[b-efc98dm8sw] { padding: 16px 10px; }
    .stat-value[b-efc98dm8sw] { font-size: 1.35rem; }

    /* The scoped .form-input rule outranks the shared 16px sizing (a scoped
       selector wins the tie), so restate it — under 16px iOS zooms on focus. */
    .form-input[b-efc98dm8sw], .form-select[b-efc98dm8sw] { font-size: 16px; }

    /* "Cancelar" + "Crear 100 Tarjetas" are both nowrap and only just fit a
       360px modal — let them wrap rather than widen the panel. */
    .modal-footer[b-efc98dm8sw] { flex-wrap: wrap; }
}
/* /Pages/Admin/GoogleLinkRequestsPanel.razor.rz.scp.css */
/* SuperAdmin › Google (GoogleLinkRequestsPanel). The parent's sa-card / sa-btn / sa-hint come from SuperAdmin.razor's
   global styles; these are the panel's own. */
.glr-head[b-hno4e3uec8] { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.glr-head h3[b-hno4e3uec8] { margin: 0; }
.glr-status[b-hno4e3uec8] { margin-top: .6rem; padding: .55rem .75rem; border-radius: 10px; background: #ecfdf5; color: #065f46; font-size: .88rem; }
.glr-status.error[b-hno4e3uec8] { background: #fef2f2; color: #991b1b; }
.glr-empty p[b-hno4e3uec8] { margin: 0; color: #166534; font-weight: 600; }
.glr-cols[b-hno4e3uec8] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; font-size: .88rem; line-height: 1.55; }
.glr-cols > div[b-hno4e3uec8] { background: #f8fafc; border-radius: 12px; padding: .75rem .9rem; }
.glr-label[b-hno4e3uec8] { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; margin-bottom: .2rem; }
.glr-muted[b-hno4e3uec8] { color: #6b7280; font-size: .82rem; }
.glr-match[b-hno4e3uec8] { color: #166534; font-weight: 700; }
.glr-warn[b-hno4e3uec8] { color: #b45309; font-weight: 700; font-size: .82rem; }
.glr-foot[b-hno4e3uec8] { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: .75rem; font-size: .86rem; }
.glr-spacer[b-hno4e3uec8] { flex: 1 1 auto; }
@media (max-width: 720px) { .glr-cols[b-hno4e3uec8] { grid-template-columns: 1fr; } }
/* /Pages/Admin/GoogleReviews.razor.rz.scp.css */
/* «Reseñas de Google». Scoped; light-first with :root[data-theme="dark"] overrides at the end, like Mi web. */

.grv-page[b-zv7iehkrwp] { max-width: 1040px; margin: 0 auto; padding: 1rem 1rem 7rem; color: #111827; }

/* ---------- header ---------- */
.grv-header[b-zv7iehkrwp] { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.25rem; }
.grv-mark[b-zv7iehkrwp] {
    width: 48px; height: 48px; border-radius: 14px; background: #fff; border: 1px solid #e5e7eb; color: #4f46e5;
    display: grid; place-items: center; flex: 0 0 auto; box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
.grv-title h1[b-zv7iehkrwp] { font-size: 1.5rem; font-weight: 750; margin: 0; letter-spacing: -.01em; }
.grv-title p[b-zv7iehkrwp] { margin: .15rem 0 0; font-size: .9rem; color: #6b7280; }
.grv-pill[b-zv7iehkrwp] {
    margin-left: auto; font-size: .78rem; font-weight: 700; padding: .3rem .7rem; border-radius: 999px;
    background: #f3f4f6; color: #4b5563; white-space: nowrap;
}
.grv-pill.on[b-zv7iehkrwp] { background: #dcfce7; color: #166534; }

/* ---------- generic ---------- */
.grv-card[b-zv7iehkrwp] { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 1.15rem 1.25rem; margin-bottom: 1rem; }
.grv-card h2[b-zv7iehkrwp] { font-size: 1.02rem; font-weight: 700; margin: 0 0 .45rem; }
.grv-card-head[b-zv7iehkrwp] { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .35rem; }
.grv-card-head h2[b-zv7iehkrwp] { margin: 0; }
.grv-sub[b-zv7iehkrwp] { font-size: .88rem; color: #6b7280; line-height: 1.45; margin: 0 0 .8rem; }
.grv-hint[b-zv7iehkrwp] { font-size: .82rem; color: #6b7280; margin: .4rem 0 0; line-height: 1.4; }
.grv-hint.ok[b-zv7iehkrwp] { color: #15803d; }
.grv-hint.bad[b-zv7iehkrwp] { color: #b91c1c; }
.grv-time[b-zv7iehkrwp] { font-size: .8rem; color: #0f766e; background: #f0fdfa; border-radius: 999px; padding: .2rem .6rem; font-weight: 600; }
.grv-spacer[b-zv7iehkrwp] { flex: 1 1 auto; }
.grv-row[b-zv7iehkrwp] { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }

.grv-loading[b-zv7iehkrwp], .grv-error[b-zv7iehkrwp] { display: flex; align-items: center; gap: .75rem; padding: 2rem 1rem; color: #6b7280; }
.grv-spinner[b-zv7iehkrwp] {
    width: 20px; height: 20px; border: 3px solid #e5e7eb; border-top-color: #2563eb;
    border-radius: 50%; animation: grv-spin-b-zv7iehkrwp .8s linear infinite; display: inline-block; flex: 0 0 auto;
}
.grv-spinner.small[b-zv7iehkrwp] { width: 14px; height: 14px; border-width: 2px; }
@keyframes grv-spin-b-zv7iehkrwp { to { transform: rotate(360deg); } }

.grv-btn[b-zv7iehkrwp] {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: 42px; padding: 0 1rem; border-radius: 10px; font-weight: 650; font-size: .88rem;
    border: 1px solid #d1d5db; background: #fff; color: #111827; cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.grv-btn:hover[b-zv7iehkrwp] { background: #f9fafb; }
.grv-btn:disabled[b-zv7iehkrwp] { opacity: .55; cursor: default; }
.grv-btn.primary[b-zv7iehkrwp] { background: #1a73e8; border-color: #1a73e8; color: #fff; }
.grv-btn.primary:hover[b-zv7iehkrwp] { background: #1765cc; }
.grv-btn.ai[b-zv7iehkrwp] { background: linear-gradient(135deg, #eef2ff, #f5f3ff); border-color: #c7d2fe; color: #4338ca; }
.grv-btn.ai:hover[b-zv7iehkrwp] { box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); }
.grv-btn.ghost[b-zv7iehkrwp] { border-color: transparent; background: #f3f4f6; color: #374151; min-height: 36px; font-weight: 600; }
.grv-btn.danger[b-zv7iehkrwp] { border-color: #fecaca; color: #b91c1c; }
.grv-btn.danger:hover[b-zv7iehkrwp] { background: #fef2f2; }
.grv-more[b-zv7iehkrwp] { display: flex; margin: 1rem auto 0; }
.grv-link[b-zv7iehkrwp] {
    border: 0; background: none; padding: .3rem .1rem; color: #1a73e8; font-weight: 600; font-size: .86rem; cursor: pointer;
}
.grv-link:disabled[b-zv7iehkrwp] { opacity: .5; cursor: default; }

.grv-chip[b-zv7iehkrwp] {
    display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 700;
    padding: .2rem .55rem; border-radius: 999px; background: #eef2ff; color: #4338ca; white-space: nowrap;
}
.grv-chip.ok[b-zv7iehkrwp] { background: #dcfce7; color: #166534; }
.grv-chip.wait[b-zv7iehkrwp] { background: #fef3c7; color: #92400e; }
.grv-chip.bad[b-zv7iehkrwp] { background: #fee2e2; color: #b91c1c; }
.grv-chip.lang[b-zv7iehkrwp] { background: #f3f4f6; color: #374151; }
.grv-reason[b-zv7iehkrwp] { font-size: .82rem; color: #92400e; }

.grv-banner[b-zv7iehkrwp] {
    display: flex; flex-direction: column; gap: .3rem; font-size: .88rem; line-height: 1.45;
    border-radius: 12px; padding: .75rem .9rem; margin: .75rem 0;
}
.grv-banner.info[b-zv7iehkrwp] { color: #1e3a8a; background: #eff6ff; border: 1px solid #bfdbfe; }
.grv-banner.warn[b-zv7iehkrwp] { color: #92400e; background: #fffbeb; border: 1px solid #fde68a; }
.grv-banner.error[b-zv7iehkrwp] { color: #991b1b; background: #fef2f2; border: 1px solid #fecaca; }
.grv-banner.ok[b-zv7iehkrwp] { color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; }

/* ---------- not connected: hero ---------- */
.grv-hero[b-zv7iehkrwp] {
    display: grid; grid-template-columns: 1.25fr 1fr; gap: 1.5rem; align-items: center;
    border-radius: 20px; padding: 1.6rem 1.6rem; margin-bottom: 1rem; color: #0f172a;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(66, 133, 244, .16), transparent 55%),
        radial-gradient(90% 120% at 0% 100%, rgba(52, 168, 83, .12), transparent 60%),
        #f8fafc;
    border: 1px solid #e2e8f0;
}
.grv-hero h2[b-zv7iehkrwp] { font-size: 1.45rem; line-height: 1.2; margin: 0 0 .5rem; letter-spacing: -.015em; }
.grv-hero p[b-zv7iehkrwp] { margin: 0 0 1rem; color: #334155; line-height: 1.5; }
.grv-benefits[b-zv7iehkrwp] { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.grv-benefits li[b-zv7iehkrwp] { display: flex; gap: .7rem; align-items: flex-start; }
.grv-benefits li > span[b-zv7iehkrwp] { font-size: 1.25rem; line-height: 1.2; }
.grv-benefits strong[b-zv7iehkrwp] { display: block; font-size: .92rem; }
.grv-benefits div span[b-zv7iehkrwp] { font-size: .84rem; color: #475569; }
.grv-hero-demo[b-zv7iehkrwp] { display: grid; gap: .6rem; }
.grv-demo-review[b-zv7iehkrwp], .grv-demo-reply[b-zv7iehkrwp] {
    background: #fff; border-radius: 14px; padding: .8rem .9rem; box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
    border: 1px solid #e5e7eb; font-size: .86rem;
}
.grv-demo-review p[b-zv7iehkrwp], .grv-demo-reply p[b-zv7iehkrwp] { margin: .45rem 0 0; line-height: 1.45; }
.grv-demo-head[b-zv7iehkrwp] { display: flex; gap: .55rem; align-items: center; }
.grv-demo-head strong[b-zv7iehkrwp] { display: block; font-size: .85rem; }
.grv-demo-reply[b-zv7iehkrwp] { margin-left: 1.5rem; border-left: 3px solid #1a73e8; }
.grv-demo-tag[b-zv7iehkrwp] { font-size: .72rem; font-weight: 700; color: #4338ca; }

/* ---------- setup steps ---------- */
.grv-steps[b-zv7iehkrwp] { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.grv-step[b-zv7iehkrwp] { display: flex; gap: .85rem; align-items: flex-start; }
.grv-step-mark[b-zv7iehkrwp] {
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
    background: #1a73e8; color: #fff; font-weight: 750; font-size: .9rem; margin-top: .1rem;
}
.grv-step-body[b-zv7iehkrwp] { flex: 1 1 auto; min-width: 0; }
.grv-step-body > strong[b-zv7iehkrwp] { display: block; font-size: .96rem; margin-bottom: .2rem; }
.grv-step-body > p[b-zv7iehkrwp] { margin: 0 0 .6rem; color: #4b5563; font-size: .88rem; line-height: 1.45; }
.grv-path[b-zv7iehkrwp] {
    display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; font-size: .8rem; margin: 0 0 .6rem;
}
.grv-path span[b-zv7iehkrwp] { background: #f3f4f6; border-radius: 6px; padding: .2rem .45rem; font-weight: 600; color: #374151; }
.grv-path span.arrow[b-zv7iehkrwp] { background: none; padding: 0; color: #9ca3af; }
.grv-idbox[b-zv7iehkrwp] {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
    border: 1px dashed #93c5fd; background: #eff6ff; border-radius: 12px; padding: .65rem .8rem;
}
.grv-idlabel[b-zv7iehkrwp] { display: block; font-size: .74rem; color: #1e40af; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.grv-id[b-zv7iehkrwp] { font-size: 1.5rem; font-weight: 800; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: #0f172a; }
.grv-linktext[b-zv7iehkrwp] { font-size: .84rem; word-break: break-all; color: #1e3a8a; }
.grv-mock[b-zv7iehkrwp] {
    margin-top: .8rem; max-width: 360px; border-radius: 12px; border: 1px solid #e5e7eb; background: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .08); padding: .75rem; font-size: .82rem;
}
.grv-mock-title[b-zv7iehkrwp] { font-weight: 700; margin-bottom: .5rem; }
.grv-mock-field[b-zv7iehkrwp] { border: 2px solid #1a73e8; border-radius: 8px; padding: .45rem .6rem; font-weight: 600; display: flex; align-items: center; }
.grv-mock-caret[b-zv7iehkrwp] { width: 1px; height: 1em; background: #1a73e8; margin-left: 2px; animation: grv-blink-b-zv7iehkrwp 1s steps(1) infinite; }
@keyframes grv-blink-b-zv7iehkrwp { 50% { opacity: 0; } }
.grv-mock-option[b-zv7iehkrwp] { display: flex; gap: .55rem; align-items: center; padding: .5rem .4rem; margin-top: .35rem; border-radius: 8px; background: #f1f5f9; }
.grv-mock-option strong[b-zv7iehkrwp] { display: block; }
.grv-mock-option span[b-zv7iehkrwp] { color: #6b7280; font-size: .76rem; }
.grv-mock-ico[b-zv7iehkrwp] { width: 26px; height: 26px; border-radius: 50%; background: #0f766e; color: #fff; display: grid; place-items: center; font-weight: 800; }
.grv-mock-role[b-zv7iehkrwp] { margin-top: .5rem; color: #374151; }

/* «Responder las antiguas»: the old unanswered reviews, drafted by Mesero, approved by the owner. */
.grv-backlog[b-zv7iehkrwp] { background: radial-gradient(90% 140% at 100% 0%, rgba(99, 102, 241, .10), transparent 60%), #fff; border-color: #c7d2fe; }
.grv-backlog-head[b-zv7iehkrwp] { display: flex; gap: .8rem; align-items: flex-start; }
.grv-backlog-head h2[b-zv7iehkrwp] { margin: 0 0 .15rem; }
.grv-backlog-head .grv-sub[b-zv7iehkrwp] { margin: 0; }
.grv-backlog-ico[b-zv7iehkrwp] { width: 40px; height: 40px; border-radius: 12px; background: #eef2ff; display: grid; place-items: center; font-size: 1.2rem; flex: 0 0 auto; }
.grv-backlog-stars[b-zv7iehkrwp] { display: flex; flex-wrap: wrap; gap: .35rem; margin: .75rem 0 .35rem; }
.grv-backlog-txt[b-zv7iehkrwp] { margin: .2rem 0 .75rem; font-size: .86rem; color: #4b5563; line-height: 1.45; }
.grv-backlog-progress[b-zv7iehkrwp] { display: grid; gap: .45rem; margin-top: .8rem; font-size: .86rem; color: #3730a3; font-weight: 650; }
.grv-backlog-progress > span[b-zv7iehkrwp] { display: flex; align-items: center; gap: .45rem; }
.grv-backlog-track[b-zv7iehkrwp] { height: 8px; border-radius: 99px; background: #e0e7ff; overflow: hidden; }
.grv-backlog-track i[b-zv7iehkrwp] { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #6366f1, #8b5cf6); transition: width .6s ease; }
.grv-backlog-ready[b-zv7iehkrwp] { margin-top: .85rem; padding: .75rem .85rem; border-radius: 12px; background: #f0fdf4; border: 1px solid #bbf7d0; display: grid; gap: .4rem; }
.grv-backlog-ready > strong[b-zv7iehkrwp] { color: #15803d; font-size: .94rem; }
.grv-backlog-ready > span[b-zv7iehkrwp] { font-size: .84rem; color: #166534; line-height: 1.45; }
.grv-backlog-ready .grv-banner[b-zv7iehkrwp] { margin: .2rem 0 0; }
.grv-backlog-going[b-zv7iehkrwp] { margin-top: .75rem; display: flex; align-items: center; gap: .55rem; font-size: .86rem; color: #1e3a8a; flex-wrap: wrap; }

/* The walk through Google's own menus, redrawn by Mesero: four small screens, the place to tap ringed. */
.grv-walk[b-zv7iehkrwp] { list-style: none; margin: .2rem 0 .4rem; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.grv-walk > li[b-zv7iehkrwp] { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.grv-ws[b-zv7iehkrwp] {
    flex: 1 1 auto; /* every screen as tall as the tallest: the captions line up */
    border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; padding: .55rem; min-height: 116px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .06); font-size: .72rem; color: #374151; display: flex; flex-direction: column; gap: .3rem;
}
.grv-ws-top[b-zv7iehkrwp] { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.grv-ws-top strong[b-zv7iehkrwp] { font-size: .8rem; }
.grv-ws > small[b-zv7iehkrwp] { color: #6b7280; }
.grv-ws-tiles[b-zv7iehkrwp] { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; margin-top: auto; }
.grv-ws-tiles i[b-zv7iehkrwp] { height: 16px; border-radius: 5px; background: #eef2f7; }
.grv-ws-item[b-zv7iehkrwp] { padding: .32rem .4rem; border-radius: 7px; color: #4b5563; line-height: 1.25; }
.grv-ws-item small[b-zv7iehkrwp] { display: block; color: #6b7280; font-size: .66rem; font-weight: 400; }
.grv-ws-dots[b-zv7iehkrwp] { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .95rem; }
.grv-ws-btn[b-zv7iehkrwp] { display: inline-block; padding: .25rem .55rem; border-radius: 999px; border: 1px solid #d1d5db; font-weight: 700; color: #1d4ed8; white-space: nowrap; }
.grv-ws-person[b-zv7iehkrwp] { display: flex; align-items: center; gap: .4rem; margin-top: .2rem; }
.grv-ws-person small[b-zv7iehkrwp] { display: block; color: #6b7280; font-size: .66rem; }
.grv-ws-av[b-zv7iehkrwp] { width: 22px; height: 22px; border-radius: 50%; background: #a855f7; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .7rem; flex: 0 0 auto; }
.grv-ws-hit[b-zv7iehkrwp] { box-shadow: 0 0 0 2px #4f46e5, 0 0 0 6px rgba(79, 70, 229, .18); background: #eef2ff; color: #3730a3; font-weight: 700; animation: grv-hit-b-zv7iehkrwp 2.4s ease-in-out infinite; }
@keyframes grv-hit-b-zv7iehkrwp { 50% { box-shadow: 0 0 0 2px #4f46e5, 0 0 0 9px rgba(79, 70, 229, .07); } }
.grv-walk-cap[b-zv7iehkrwp] { font-size: .78rem; font-weight: 650; color: #1f2937; line-height: 1.3; display: flex; gap: .35rem; align-items: flex-start; }
.grv-walk-cap b[b-zv7iehkrwp] { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: #4f46e5; color: #fff; display: grid; place-items: center; font-size: .66rem; margin-top: .05rem; }
.grv-walk-cap5[b-zv7iehkrwp] { margin-top: .8rem; }

/* The Business Profile ID: where Google keeps it, and the field. */
.grv-pid[b-zv7iehkrwp] { border-radius: 14px; border: 1px solid #c7d2fe; background: #f5f7ff; padding: .8rem .9rem; margin: .7rem 0; display: grid; gap: .45rem; }
.grv-pid > strong[b-zv7iehkrwp] { font-size: .92rem; color: #3730a3; }
.grv-pid > p[b-zv7iehkrwp] { margin: 0; font-size: .84rem; color: #3f3d56; line-height: 1.45; }
.grv-pid .grv-path[b-zv7iehkrwp] { margin: 0; }
.grv-ws-pid[b-zv7iehkrwp] { min-height: 0; max-width: 380px; }
.grv-ws-pid .grv-ws-item[b-zv7iehkrwp] { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.grv-ws-pid .grv-ws-item b[b-zv7iehkrwp] { display: block; font-size: .82rem; letter-spacing: .03em; color: #111827; font-variant-numeric: tabular-nums; }
.grv-pid .grv-field[b-zv7iehkrwp] { margin: 0; }
.grv-pid .grv-field input[b-zv7iehkrwp] { font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.grv-hint.warn[b-zv7iehkrwp] { color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: .45rem .6rem; }
@media (max-width: 760px) { .grv-walk[b-zv7iehkrwp] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.grv-candidates[b-zv7iehkrwp] { margin-top: .9rem; display: grid; gap: .5rem; }
.grv-candidate[b-zv7iehkrwp] {
    display: flex; gap: .7rem; align-items: center; padding: .7rem .8rem; border: 1px solid #e5e7eb;
    border-radius: 12px; cursor: pointer; background: #fff;
}
.grv-candidate.picked[b-zv7iehkrwp] { border-color: #1a73e8; box-shadow: 0 0 0 3px rgba(26, 115, 232, .12); }
.grv-candidate input[b-zv7iehkrwp] { width: 18px; height: 18px; accent-color: #1a73e8; }
.grv-candidate div[b-zv7iehkrwp] { flex: 1 1 auto; min-width: 0; }
.grv-candidate strong[b-zv7iehkrwp] { display: block; }
.grv-candidate span[b-zv7iehkrwp] { font-size: .82rem; color: #6b7280; }

.grv-faq details[b-zv7iehkrwp] { border-top: 1px solid #f1f5f9; padding: .65rem 0; }
.grv-faq details:first-of-type[b-zv7iehkrwp] { border-top: 0; }
.grv-faq summary[b-zv7iehkrwp] { cursor: pointer; font-weight: 650; font-size: .92rem; list-style-position: outside; }
.grv-faq p[b-zv7iehkrwp] { margin: .45rem 0 0; color: #4b5563; font-size: .88rem; line-height: 1.5; }

.grv-locked[b-zv7iehkrwp], .grv-soon[b-zv7iehkrwp] { text-align: center; padding: 2rem 1.25rem; }
.grv-soon[b-zv7iehkrwp] { border-style: dashed; }

/* ---------- connected: summary + tabs ---------- */
.grv-summary[b-zv7iehkrwp] {
    display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1.6fr); gap: 1.1rem 1.4rem; align-items: center;
    background:
        radial-gradient(90% 140% at 100% 0%, rgba(66, 133, 244, .09), transparent 60%),
        radial-gradient(70% 120% at 0% 100%, rgba(251, 188, 5, .08), transparent 60%),
        #fff;
    border: 1px solid #e5e7eb; border-radius: 20px; padding: 1.15rem 1.3rem; margin-bottom: 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -18px rgba(15, 23, 42, .18);
}
.grv-summary-main[b-zv7iehkrwp] { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.grv-summary-main strong[b-zv7iehkrwp] { font-size: 1.05rem; }
.grv-summary-main span[b-zv7iehkrwp] { font-size: .84rem; color: #6b7280; }
.grv-summary-main a[b-zv7iehkrwp] { font-size: .82rem; color: #1a73e8; font-weight: 600; text-decoration: none; }
.grv-kpis[b-zv7iehkrwp] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.grv-kpi[b-zv7iehkrwp] { border-radius: 14px; background: rgba(248, 250, 252, .9); border: 1px solid #eef2f7; padding: .55rem .7rem; text-align: left; }
.grv-kpi.alert[b-zv7iehkrwp] { background: #fff7ed; }
.grv-kpi-num[b-zv7iehkrwp] { display: block; font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.grv-kpi.alert .grv-kpi-num[b-zv7iehkrwp] { color: #c2410c; }
.grv-kpi-lbl[b-zv7iehkrwp] { font-size: .74rem; color: #6b7280; }

.grv-tabs[b-zv7iehkrwp] { display: flex; gap: .25rem; border-bottom: 1px solid #e5e7eb; margin-bottom: 1rem; overflow-x: auto; }
.grv-tabs button[b-zv7iehkrwp] {
    border: 0; background: none; padding: .7rem .9rem; font-weight: 650; font-size: .9rem; color: #6b7280; flex: 0 0 auto;
    border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; display: inline-flex; gap: .4rem; align-items: center;
}
.grv-tabs button.active[b-zv7iehkrwp] { color: #1a73e8; border-bottom-color: #1a73e8; }
.grv-badge[b-zv7iehkrwp] { background: #ea4335; color: #fff; border-radius: 999px; font-size: .7rem; padding: .05rem .42rem; font-weight: 800; }
.grv-dot[b-zv7iehkrwp] { width: 8px; height: 8px; border-radius: 50%; background: #d1d5db; }
.grv-dot.on[b-zv7iehkrwp] { background: #34a853; }

.grv-filters[b-zv7iehkrwp] { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; margin-bottom: .85rem; }
.grv-filter[b-zv7iehkrwp] {
    border: 1px solid #e5e7eb; background: #fff; border-radius: 999px; padding: .38rem .8rem; font-size: .84rem;
    font-weight: 650; color: #374151; cursor: pointer; display: inline-flex; gap: .35rem; align-items: center;
}
.grv-filter span[b-zv7iehkrwp] { font-size: .74rem; color: #6b7280; }
.grv-filter.active[b-zv7iehkrwp] { background: #1a73e8; border-color: #1a73e8; color: #fff; }
.grv-filter.active span[b-zv7iehkrwp] { color: #dbeafe; }
.grv-refresh[b-zv7iehkrwp] {
    margin-left: auto; border: 1px solid #e5e7eb; background: #fff; border-radius: 50%; width: 36px; height: 36px;
    cursor: pointer; font-size: 1rem; color: #374151;
}

.grv-empty[b-zv7iehkrwp] { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 2.5rem 1rem; color: #6b7280; text-align: center; }
.grv-empty > span:first-child[b-zv7iehkrwp] { font-size: 2rem; }

/* ---------- review cards ---------- */
.grv-list[b-zv7iehkrwp] { display: grid; gap: .8rem; }
.grv-review[b-zv7iehkrwp] { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 1rem 1.1rem; }
.grv-review.low[b-zv7iehkrwp] { border-left: 4px solid #fbbc05; }
.grv-review.attention[b-zv7iehkrwp] { border-left: 4px solid #ea4335; }
.grv-review-head[b-zv7iehkrwp] { display: flex; gap: .7rem; align-items: center; }
.grv-avatar[b-zv7iehkrwp] {
    width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; object-fit: cover;
    background: #e0e7ff; color: #3730a3; font-weight: 800;
}
.grv-who[b-zv7iehkrwp] { display: flex; flex-direction: column; min-width: 0; }
.grv-who strong[b-zv7iehkrwp] { font-size: .93rem; }
.grv-who > span[b-zv7iehkrwp] { font-size: .8rem; color: #6b7280; }
.grv-stars[b-zv7iehkrwp] { color: #f4b400; letter-spacing: .05em; }
.grv-stars.s1[b-zv7iehkrwp], .grv-stars.s2[b-zv7iehkrwp] { color: #ea4335; }
.grv-review-text[b-zv7iehkrwp] { margin: .65rem 0 .2rem; line-height: 1.5; font-size: .93rem; white-space: pre-line; }
.grv-review-text.muted[b-zv7iehkrwp] { color: #9ca3af; font-style: italic; }
.grv-translation[b-zv7iehkrwp] { margin: .3rem 0 0; padding: .55rem .7rem; background: #f8fafc; border-radius: 10px; font-size: .86rem; color: #475569; line-height: 1.45; }

.grv-reply[b-zv7iehkrwp] { margin-top: .75rem; padding: .7rem .85rem; background: #f8fafc; border-radius: 12px; border-left: 3px solid #1a73e8; }
.grv-reply-head[b-zv7iehkrwp] { display: flex; justify-content: space-between; gap: .5rem; align-items: center; font-size: .8rem; font-weight: 700; color: #374151; }
.grv-reply p[b-zv7iehkrwp] { margin: .35rem 0 .2rem; font-size: .9rem; line-height: 1.5; white-space: pre-line; }

.grv-compose[b-zv7iehkrwp] { margin-top: .8rem; display: grid; gap: .55rem; }
.grv-draft-status[b-zv7iehkrwp] { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.grv-compose textarea[b-zv7iehkrwp], .grv-field input[b-zv7iehkrwp], .grv-field textarea[b-zv7iehkrwp], .grv-field select[b-zv7iehkrwp], .grv-preview textarea[b-zv7iehkrwp] {
    font: inherit; font-size: .93rem; color: #111827; background: #fff; border: 1px solid #d1d5db; border-radius: 10px;
    padding: .6rem .75rem; width: 100%; line-height: 1.5;
}
.grv-compose textarea:focus[b-zv7iehkrwp], .grv-field input:focus[b-zv7iehkrwp], .grv-field textarea:focus[b-zv7iehkrwp], .grv-field select:focus[b-zv7iehkrwp], .grv-preview textarea:focus[b-zv7iehkrwp] {
    outline: 2px solid #93c5fd; outline-offset: 1px; border-color: #1a73e8;
}
.grv-compose-actions[b-zv7iehkrwp] { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.grv-tweaks[b-zv7iehkrwp] { display: flex; gap: .35rem; flex-wrap: wrap; }
.grv-cta[b-zv7iehkrwp] { margin-top: .7rem; display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }

/* ---------- style + auto ---------- */
.grv-two[b-zv7iehkrwp] { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.grv-tones[b-zv7iehkrwp] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-bottom: .9rem; }
.grv-tone[b-zv7iehkrwp] {
    display: flex; flex-direction: column; gap: .2rem; border: 1px solid #e5e7eb; border-radius: 12px; padding: .65rem .75rem;
    cursor: pointer; position: relative;
}
.grv-tone input[b-zv7iehkrwp] { position: absolute; opacity: 0; pointer-events: none; }
.grv-tone strong[b-zv7iehkrwp] { font-size: .9rem; }
.grv-tone span[b-zv7iehkrwp] { font-size: .8rem; color: #6b7280; font-style: italic; line-height: 1.35; }
.grv-tone.picked[b-zv7iehkrwp] { border-color: #1a73e8; box-shadow: 0 0 0 3px rgba(26, 115, 232, .12); background: #f8fbff; }

.grv-segment[b-zv7iehkrwp] { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin: 0 0 .9rem; }
.grv-seg-label[b-zv7iehkrwp] { font-size: .86rem; font-weight: 650; color: #374151; margin-right: .35rem; }
.grv-segment label[b-zv7iehkrwp] {
    border: 1px solid #e5e7eb; border-radius: 999px; padding: .35rem .8rem; font-size: .84rem; cursor: pointer; font-weight: 600; color: #374151;
}
.grv-segment label.on[b-zv7iehkrwp] { background: #1a73e8; border-color: #1a73e8; color: #fff; }
.grv-segment input[b-zv7iehkrwp] { position: absolute; opacity: 0; pointer-events: none; }

.grv-switches[b-zv7iehkrwp] { display: grid; gap: .1rem; margin-bottom: .6rem; }
.grv-switch[b-zv7iehkrwp] { display: flex; gap: .75rem; align-items: flex-start; padding: .5rem 0; cursor: pointer; position: relative; }
.grv-switch input[b-zv7iehkrwp] { position: absolute; opacity: 0; width: 0; height: 0; }
.grv-slider[b-zv7iehkrwp] {
    width: 40px; height: 24px; border-radius: 999px; background: #d1d5db; position: relative; flex: 0 0 auto; transition: background .2s; margin-top: .1rem;
}
.grv-slider[b-zv7iehkrwp]::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .2s;
}
.grv-switch input:checked + .grv-slider[b-zv7iehkrwp] { background: #1a73e8; }
.grv-switch input:checked + .grv-slider[b-zv7iehkrwp]::after { transform: translateX(16px); }
.grv-switch input:focus-visible + .grv-slider[b-zv7iehkrwp] { outline: 2px solid #93c5fd; outline-offset: 2px; }
.grv-switch strong[b-zv7iehkrwp] { display: block; font-size: .9rem; }
.grv-switch div span[b-zv7iehkrwp] { font-size: .8rem; color: #6b7280; line-height: 1.35; }
.grv-switch.big strong[b-zv7iehkrwp] { font-size: 1rem; }

.grv-field[b-zv7iehkrwp] { display: flex; flex-direction: column; gap: .3rem; margin: .5rem 0 .75rem; font-size: .86rem; font-weight: 650; color: #374151; }
.grv-field small[b-zv7iehkrwp] { font-weight: 400; color: #6b7280; font-size: .8rem; }
.grv-field.inline[b-zv7iehkrwp] { flex-direction: row; align-items: center; gap: .75rem; }
.grv-field.inline select[b-zv7iehkrwp] { width: auto; min-width: 120px; }

.grv-preview[b-zv7iehkrwp] { position: sticky; top: 1rem; }
.grv-presets[b-zv7iehkrwp] { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.grv-chip-btn[b-zv7iehkrwp] { border: 1px solid #e5e7eb; background: #f9fafb; border-radius: 999px; padding: .3rem .6rem; font-size: .76rem; cursor: pointer; font-weight: 600; color: #374151; }
.grv-pv-stars[b-zv7iehkrwp] { display: flex; gap: .1rem; margin-bottom: .4rem; }
.grv-pv-stars button[b-zv7iehkrwp] { border: 0; background: none; font-size: 1.4rem; color: #d1d5db; cursor: pointer; padding: 0 .1rem; }
.grv-pv-stars button.on[b-zv7iehkrwp] { color: #f4b400; }
.grv-preview .grv-btn[b-zv7iehkrwp] { margin-top: .55rem; width: 100%; }
.grv-pv-result[b-zv7iehkrwp] { margin-top: .8rem; padding: .75rem .85rem; border-radius: 12px; background: #f8fafc; border-left: 3px solid #1a73e8; display: grid; gap: .45rem; }
.grv-pv-result p[b-zv7iehkrwp] { margin: 0; white-space: pre-line; line-height: 1.5; font-size: .9rem; }

.grv-flow[b-zv7iehkrwp] { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.grv-flow li[b-zv7iehkrwp] { display: flex; gap: .55rem; align-items: flex-start; background: #f8fafc; border-radius: 12px; padding: .7rem; }
.grv-flow li > span[b-zv7iehkrwp] { width: 24px; height: 24px; border-radius: 50%; background: #e0e7ff; color: #3730a3; display: grid; place-items: center; font-weight: 800; font-size: .8rem; flex: 0 0 auto; }
.grv-flow strong[b-zv7iehkrwp] { display: block; font-size: .86rem; }
.grv-flow p[b-zv7iehkrwp] { margin: .2rem 0 0; font-size: .8rem; color: #6b7280; line-height: 1.4; }

.grv-auto.on[b-zv7iehkrwp] { border-color: #bfdbfe; box-shadow: 0 0 0 3px rgba(26, 115, 232, .06); }
.grv-auto-rules[b-zv7iehkrwp] { margin-top: .6rem; padding-top: .8rem; border-top: 1px solid #f1f5f9; }
.grv-never[b-zv7iehkrwp] { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px; padding: .7rem .85rem; margin: .8rem 0; }
.grv-never strong[b-zv7iehkrwp] { font-size: .88rem; color: #166534; }
.grv-never ul[b-zv7iehkrwp] { margin: .35rem 0 0; padding-left: 1.1rem; font-size: .84rem; color: #166534; line-height: 1.5; }
.grv-consent[b-zv7iehkrwp] { display: flex; gap: .6rem; align-items: flex-start; font-size: .86rem; line-height: 1.45; background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; padding: .7rem .85rem; cursor: pointer; }
.grv-consent input[b-zv7iehkrwp] { width: 18px; height: 18px; margin-top: .15rem; accent-color: #1a73e8; flex: 0 0 auto; }

.grv-facts[b-zv7iehkrwp] { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; font-size: .88rem; margin: .4rem 0 1rem; }
.grv-facts dt[b-zv7iehkrwp] { color: #6b7280; }
.grv-facts dd[b-zv7iehkrwp] { margin: 0; font-weight: 600; }

.grv-savebar[b-zv7iehkrwp] {
    position: sticky; bottom: .75rem; z-index: 5; display: flex; gap: .75rem; align-items: center;
    background: #111827; color: #f9fafb; border-radius: 14px; padding: .6rem .7rem .6rem 1rem; margin-top: 1rem;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .25); font-size: .88rem;
}
.grv-savebar .grv-link[b-zv7iehkrwp] { color: #d1d5db; }
.grv-savebar .ok[b-zv7iehkrwp] { color: #86efac; }
.grv-savebar .bad[b-zv7iehkrwp] { color: #fca5a5; }

/* ---------- premium details (1019) ---------- */
.grv-eyebrow[b-zv7iehkrwp] { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #1a73e8; margin-bottom: .3rem; }
.grv-pill[b-zv7iehkrwp] { display: inline-flex; align-items: center; gap: .4rem; }
.grv-pill.wait[b-zv7iehkrwp] { background: #fef3c7; color: #92400e; }
.grv-pulse[b-zv7iehkrwp] { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: grv-pulse-b-zv7iehkrwp 2s infinite; }
@keyframes grv-pulse-b-zv7iehkrwp { 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }

.grv-skeleton[b-zv7iehkrwp] { display: grid; gap: .8rem; }
.grv-sk[b-zv7iehkrwp] { border-radius: 16px; background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%); background-size: 400% 100%; animation: grv-shimmer-b-zv7iehkrwp 1.4s ease infinite; }
.grv-sk-hero[b-zv7iehkrwp] { height: 150px; }
.grv-sk-line[b-zv7iehkrwp] { height: 44px; width: 60%; }
.grv-sk-card[b-zv7iehkrwp] { height: 128px; }
@keyframes grv-shimmer-b-zv7iehkrwp { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

.grv-lock-ico[b-zv7iehkrwp] { font-size: 2rem; display: block; margin-bottom: .4rem; }

/* the hero's living demo: the review, Mesero typing, the reply in the reviewer's language (a 9 s loop) */
.grv-demo-head[b-zv7iehkrwp] { position: relative; }
.grv-demo-flag[b-zv7iehkrwp] { margin-left: auto; font-size: .68rem; font-weight: 800; letter-spacing: .06em; background: #eef2ff; color: #4338ca; border-radius: 6px; padding: .12rem .38rem; }
.grv-demo-typing[b-zv7iehkrwp] {
    display: flex; align-items: center; gap: .28rem; margin-left: 1.5rem; padding: .5rem .75rem; width: max-content;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 999px; font-size: .76rem; color: #6b7280;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .06); animation: grv-typing-show-b-zv7iehkrwp 9s infinite;
}
.grv-demo-typing span[b-zv7iehkrwp] { width: 6px; height: 6px; border-radius: 50%; background: #1a73e8; animation: grv-dot-b-zv7iehkrwp 1.2s infinite; }
.grv-demo-typing span:nth-child(2)[b-zv7iehkrwp] { animation-delay: .15s; }
.grv-demo-typing span:nth-child(3)[b-zv7iehkrwp] { animation-delay: .3s; }
.grv-demo-typing em[b-zv7iehkrwp] { font-style: normal; margin-left: .3rem; }
.grv-demo-reply[b-zv7iehkrwp] { animation: grv-reply-show-b-zv7iehkrwp 9s infinite; }
.grv-demo-meta[b-zv7iehkrwp] { display: block; margin-top: .45rem; font-size: .7rem; color: #16a34a; font-weight: 700; }
@keyframes grv-dot-b-zv7iehkrwp { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
@keyframes grv-typing-show-b-zv7iehkrwp { 0%, 8% { opacity: 0; transform: translateY(6px); } 12%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; height: 0; padding: 0; margin: 0; border-width: 0; } }
@keyframes grv-reply-show-b-zv7iehkrwp { 0%, 32% { opacity: 0; transform: translateY(10px) scale(.98); } 38%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* verification: the request waiting for Mesero's team */
.grv-verify[b-zv7iehkrwp] { border-color: #fde68a; background: linear-gradient(180deg, #fffdf5, #fff 40%); }
.grv-track[b-zv7iehkrwp] { list-style: none; margin: .4rem 0 1rem; padding: 0; display: grid; gap: .1rem; }
.grv-track li[b-zv7iehkrwp] { display: flex; gap: .75rem; align-items: flex-start; position: relative; padding: .45rem 0; }
.grv-track li:not(:last-child)[b-zv7iehkrwp]::after { content: ""; position: absolute; left: 13px; top: 2.1rem; bottom: -.45rem; width: 2px; background: #e5e7eb; }
.grv-track li > span[b-zv7iehkrwp] { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; font-weight: 800; font-size: .8rem; background: #f3f4f6; color: #6b7280; position: relative; z-index: 1; }
.grv-track li.done > span[b-zv7iehkrwp] { background: #22c55e; color: #fff; }
.grv-track li.done:not(:last-child)[b-zv7iehkrwp]::after { background: #86efac; }
.grv-track strong[b-zv7iehkrwp] { display: block; font-size: .92rem; }
.grv-track small[b-zv7iehkrwp] { font-size: .8rem; color: #6b7280; }
.grv-spin-ring[b-zv7iehkrwp] { border: 3px solid #fde68a !important; border-top-color: #f59e0b !important; background: #fff !important; animation: grv-spin-b-zv7iehkrwp 1.1s linear infinite; }
.grv-fastlane[b-zv7iehkrwp] { border-radius: 14px; background: #f0f9ff; border: 1px solid #bae6fd; padding: .85rem 1rem; }
.grv-fastlane > strong[b-zv7iehkrwp] { font-size: .92rem; color: #075985; }
.grv-fastlane > p[b-zv7iehkrwp] { margin: .3rem 0 .2rem; font-size: .86rem; color: #0c4a6e; line-height: 1.5; }

.grv-proofs[b-zv7iehkrwp] { margin-top: .9rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.grv-proofs-title[b-zv7iehkrwp] { font-size: .78rem; font-weight: 800; color: #374151; margin-right: .2rem; }
.grv-proof[b-zv7iehkrwp] { font-size: .78rem; font-weight: 650; padding: .25rem .6rem; border-radius: 999px; background: #f3f4f6; color: #6b7280; }
.grv-proof.ok[b-zv7iehkrwp] { background: #dcfce7; color: #166534; }
.grv-proofs small[b-zv7iehkrwp] { flex-basis: 100%; font-size: .78rem; color: #6b7280; line-height: 1.4; }
.grv-candidate .grv-chip[b-zv7iehkrwp] { flex: 0 0 auto; }

.grv-mock-typed[b-zv7iehkrwp] { display: inline-block; overflow: hidden; white-space: nowrap; max-width: 0; animation: grv-type-b-zv7iehkrwp 6s steps(10) infinite; }
@keyframes grv-type-b-zv7iehkrwp { 0%, 10% { max-width: 0; } 45%, 100% { max-width: 11ch; } }

/* connected: the rating ring and the star bars */
.grv-summary-links[b-zv7iehkrwp] { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin-top: .25rem; }
.grv-verified[b-zv7iehkrwp] { font-size: .74rem; font-weight: 800; color: #166534; background: #dcfce7; border-radius: 999px; padding: .15rem .55rem; }
.grv-rating[b-zv7iehkrwp] { position: relative; display: grid; justify-items: center; gap: .15rem; }
.grv-ring-bg[b-zv7iehkrwp] { fill: none; stroke: #eef2f7; stroke-width: 6; }
.grv-ring[b-zv7iehkrwp] { fill: none; stroke: #f4b400; stroke-width: 6; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 32px 32px; transition: stroke-dasharray .8s cubic-bezier(.2, .8, .2, 1); }
.grv-rating-num[b-zv7iehkrwp] { position: absolute; top: 0; height: 84px; display: flex; align-items: center; justify-content: center; gap: .1rem; width: 84px; }
.grv-rating-num strong[b-zv7iehkrwp] { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.grv-rating-num span[b-zv7iehkrwp] { color: #f4b400; font-size: .95rem; margin-top: -.5rem; }
.grv-rating-lbl[b-zv7iehkrwp] { font-size: .74rem; color: #6b7280; font-weight: 650; }
.grv-bars[b-zv7iehkrwp] { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; }
.grv-bar[b-zv7iehkrwp] { display: flex; align-items: center; gap: .35rem; font-size: .72rem; color: #6b7280; font-weight: 700; }
.grv-bar span[b-zv7iehkrwp]::after { content: "★"; color: #f4b400; margin-left: .1rem; }
.grv-bar i[b-zv7iehkrwp] { flex: 1 1 auto; height: 6px; border-radius: 99px; background: #eef2f7; overflow: hidden; }
.grv-bar b[b-zv7iehkrwp] { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #fbbc05, #f59e0b); transition: width .8s cubic-bezier(.2, .8, .2, 1); }

/* review cards */
.grv-review[b-zv7iehkrwp] { transition: box-shadow .2s, transform .2s; }
.grv-review:hover[b-zv7iehkrwp] { box-shadow: 0 10px 28px -16px rgba(15, 23, 42, .25); }
.grv-avatar.s5[b-zv7iehkrwp], .grv-avatar.s4[b-zv7iehkrwp] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #fde68a; }
.grv-avatar.s1[b-zv7iehkrwp], .grv-avatar.s2[b-zv7iehkrwp], .grv-avatar.s3[b-zv7iehkrwp] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #fecaca; }
.grv-review-head .grv-chip.star[b-zv7iehkrwp] { margin-left: auto; }
.grv-chip.star[b-zv7iehkrwp] { background: linear-gradient(135deg, #fff7d6, #ffefc2); color: #8a5a00; }
.grv-textwrap[b-zv7iehkrwp] { position: relative; }
.grv-textwrap textarea[b-zv7iehkrwp] { padding-bottom: 1.6rem; }
.grv-count[b-zv7iehkrwp] { position: absolute; right: .7rem; bottom: .45rem; font-size: .7rem; color: #9ca3af; font-variant-numeric: tabular-nums; pointer-events: none; }
.grv-textwrap.revealing textarea[b-zv7iehkrwp] { border-color: #a5b4fc; box-shadow: 0 0 0 4px rgba(99, 102, 241, .12); background: linear-gradient(180deg, #fff, #f8f7ff); }
.grv-textwrap.revealing[b-zv7iehkrwp]::after {
    content: "✨"; position: absolute; right: .7rem; top: .5rem; animation: grv-sparkle-b-zv7iehkrwp 1s ease-in-out infinite;
}
@keyframes grv-sparkle-b-zv7iehkrwp { 50% { transform: scale(1.35) rotate(12deg); opacity: .7; } }
.grv-btn.ai[b-zv7iehkrwp] { position: relative; overflow: hidden; }
.grv-btn.ai[b-zv7iehkrwp]::after {
    content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%);
    transform: translateX(-120%); animation: grv-sheen-b-zv7iehkrwp 3.2s ease-in-out infinite;
}
@keyframes grv-sheen-b-zv7iehkrwp { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.grv-reply.fresh[b-zv7iehkrwp] { animation: grv-pop-b-zv7iehkrwp .5s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes grv-pop-b-zv7iehkrwp { from { transform: scale(.97); opacity: .3; } to { transform: none; opacity: 1; } }
.grv-published[b-zv7iehkrwp] { flex-direction: row; align-items: center; gap: .55rem; }
.grv-check[b-zv7iehkrwp] { width: 20px; height: 20px; border-radius: 50%; background: #22c55e; position: relative; flex: 0 0 auto; animation: grv-pop-b-zv7iehkrwp .4s ease-out; }
.grv-check[b-zv7iehkrwp]::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* WhatsApp: the alert and «OK 1234» */
.grv-wa[b-zv7iehkrwp] { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.2rem; align-items: center; }
.grv-phone[b-zv7iehkrwp] {
    border-radius: 26px; background: #efe7dd; border: 8px solid #111827; padding: 0 .7rem .9rem; min-height: 230px;
    box-shadow: 0 18px 40px -20px rgba(15, 23, 42, .45); display: flex; flex-direction: column; gap: .45rem; font-size: .8rem;
    color: #111b21; /* a picture of WhatsApp: its own light colours in both themes (dark mode's page text was white on white, 1022) */
}
.grv-phone-bar[b-zv7iehkrwp] { display: flex; align-items: center; gap: .45rem; background: #075e54; color: #fff; margin: 0 -.7rem .3rem; padding: .55rem .7rem; border-radius: 18px 18px 0 0; }
.grv-bubble[b-zv7iehkrwp] { max-width: 88%; padding: .45rem .6rem; border-radius: 10px; line-height: 1.4; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); animation: grv-pop-b-zv7iehkrwp .45s ease-out both; }
.grv-bubble.in[b-zv7iehkrwp] { background: #fff; align-self: flex-start; border-top-left-radius: 3px; }
.grv-bubble.out[b-zv7iehkrwp] { background: #d9fdd3; align-self: flex-end; border-top-right-radius: 3px; font-weight: 700; animation-delay: .25s; }
.grv-bubble.in.ok[b-zv7iehkrwp] { animation-delay: .6s; }

@media (prefers-reduced-motion: reduce) {
    .grv-ws-hit[b-zv7iehkrwp] { animation: none; }
    .grv-demo-typing[b-zv7iehkrwp], .grv-demo-reply[b-zv7iehkrwp], .grv-mock-typed[b-zv7iehkrwp], .grv-sk[b-zv7iehkrwp], .grv-pulse[b-zv7iehkrwp], .grv-btn.ai[b-zv7iehkrwp]::after, .grv-textwrap.revealing[b-zv7iehkrwp]::after, .grv-bubble[b-zv7iehkrwp] { animation: none; }
    .grv-demo-typing[b-zv7iehkrwp] { display: none; }
    .grv-mock-typed[b-zv7iehkrwp] { max-width: none; }
}

/* ---------- phones ---------- */
@media (max-width: 760px) {
    .grv-summary[b-zv7iehkrwp] { grid-template-columns: 1fr auto; }
    .grv-kpis[b-zv7iehkrwp], .grv-bars[b-zv7iehkrwp] { grid-column: 1 / -1; }
    .grv-bars[b-zv7iehkrwp] { grid-template-columns: 1fr; gap: .3rem; }
    .grv-title h1[b-zv7iehkrwp] { font-size: 1.3rem; }
    .grv-wa[b-zv7iehkrwp] { grid-template-columns: 1fr; }
    .grv-phone[b-zv7iehkrwp] { max-width: 320px; }
    .grv-hero[b-zv7iehkrwp] { grid-template-columns: 1fr; padding: 1.2rem; }
    .grv-two[b-zv7iehkrwp] { grid-template-columns: 1fr; }
    .grv-preview[b-zv7iehkrwp] { position: static; }
    .grv-flow[b-zv7iehkrwp] { grid-template-columns: 1fr 1fr; }
    .grv-tones[b-zv7iehkrwp] { grid-template-columns: 1fr; }
    .grv-kpis[b-zv7iehkrwp] { width: 100%; }
    .grv-kpi[b-zv7iehkrwp] { flex: 1 1 0; min-width: 0; }
}

/* ---------- dark ---------- */
:root[data-theme="dark"] .grv-page[b-zv7iehkrwp] { color: #e5e7eb; }
:root[data-theme="dark"] .grv-card[b-zv7iehkrwp],
:root[data-theme="dark"] .grv-summary[b-zv7iehkrwp],
:root[data-theme="dark"] .grv-review[b-zv7iehkrwp],
:root[data-theme="dark"] .grv-candidate[b-zv7iehkrwp],
:root[data-theme="dark"] .grv-filter[b-zv7iehkrwp],
:root[data-theme="dark"] .grv-refresh[b-zv7iehkrwp],
:root[data-theme="dark"] .grv-mark[b-zv7iehkrwp],
:root[data-theme="dark"] .grv-mock[b-zv7iehkrwp],
:root[data-theme="dark"] .grv-demo-review[b-zv7iehkrwp],
:root[data-theme="dark"] .grv-demo-reply[b-zv7iehkrwp] { background: #111827; border-color: #1f2937; color: #e5e7eb; }
:root[data-theme="dark"] .grv-hero[b-zv7iehkrwp] { background: radial-gradient(120% 140% at 100% 0%, rgba(66, 133, 244, .22), transparent 55%), #0b1220; border-color: #1f2937; color: #e5e7eb; }
:root[data-theme="dark"] .grv-mark[b-zv7iehkrwp] { color: #a5b4fc; }
:root[data-theme="dark"] .grv-hero p[b-zv7iehkrwp], :root[data-theme="dark"] .grv-benefits div span[b-zv7iehkrwp] { color: #cbd5e1; }
:root[data-theme="dark"] .grv-sub[b-zv7iehkrwp], :root[data-theme="dark"] .grv-hint[b-zv7iehkrwp], :root[data-theme="dark"] .grv-title p[b-zv7iehkrwp],
:root[data-theme="dark"] .grv-who > span[b-zv7iehkrwp], :root[data-theme="dark"] .grv-step-body > p[b-zv7iehkrwp], :root[data-theme="dark"] .grv-kpi-lbl[b-zv7iehkrwp] { color: #9ca3af; }
:root[data-theme="dark"] .grv-btn[b-zv7iehkrwp] { background: #1f2937; border-color: #374151; color: #e5e7eb; }
:root[data-theme="dark"] .grv-btn.primary[b-zv7iehkrwp] { background: #1a73e8; border-color: #1a73e8; color: #fff; }
:root[data-theme="dark"] .grv-btn.ai[b-zv7iehkrwp] { background: #1e1b4b; border-color: #3730a3; color: #c7d2fe; }
:root[data-theme="dark"] .grv-btn.ghost[b-zv7iehkrwp] { background: #1f2937; color: #d1d5db; }
:root[data-theme="dark"] .grv-kpi[b-zv7iehkrwp], :root[data-theme="dark"] .grv-reply[b-zv7iehkrwp], :root[data-theme="dark"] .grv-translation[b-zv7iehkrwp],
:root[data-theme="dark"] .grv-flow li[b-zv7iehkrwp], :root[data-theme="dark"] .grv-pv-result[b-zv7iehkrwp], :root[data-theme="dark"] .grv-path span[b-zv7iehkrwp],
:root[data-theme="dark"] .grv-mock-option[b-zv7iehkrwp] { background: #0b1220; color: #e5e7eb; }
:root[data-theme="dark"] .grv-compose textarea[b-zv7iehkrwp], :root[data-theme="dark"] .grv-field input[b-zv7iehkrwp], :root[data-theme="dark"] .grv-field textarea[b-zv7iehkrwp],
:root[data-theme="dark"] .grv-field select[b-zv7iehkrwp], :root[data-theme="dark"] .grv-preview textarea[b-zv7iehkrwp] { background: #0b1220; border-color: #374151; color: #e5e7eb; }
:root[data-theme="dark"] .grv-tone[b-zv7iehkrwp], :root[data-theme="dark"] .grv-segment label[b-zv7iehkrwp], :root[data-theme="dark"] .grv-chip-btn[b-zv7iehkrwp] { border-color: #374151; color: #e5e7eb; background: transparent; }
:root[data-theme="dark"] .grv-tone.picked[b-zv7iehkrwp] { background: #0b1a33; }
:root[data-theme="dark"] .grv-idbox[b-zv7iehkrwp] { background: #0b1a33; border-color: #1e40af; }
:root[data-theme="dark"] .grv-id[b-zv7iehkrwp] { color: #f8fafc; }
:root[data-theme="dark"] .grv-tabs[b-zv7iehkrwp] { border-bottom-color: #1f2937; }
:root[data-theme="dark"] .grv-facts dt[b-zv7iehkrwp] { color: #9ca3af; }
:root[data-theme="dark"] .grv-savebar[b-zv7iehkrwp] { background: #f9fafb; color: #111827; }
:root[data-theme="dark"] .grv-savebar .grv-link[b-zv7iehkrwp] { color: #374151; }
:root[data-theme="dark"] .grv-savebar .ok[b-zv7iehkrwp] { color: #15803d; }
:root[data-theme="dark"] .grv-savebar .bad[b-zv7iehkrwp] { color: #b91c1c; }
:root[data-theme="dark"] .grv-consent[b-zv7iehkrwp] { background: rgba(245, 158, 11, .10); border-color: rgba(253, 230, 138, .30); color: #fde68a; }
:root[data-theme="dark"] .grv-never[b-zv7iehkrwp] { background: rgba(22, 163, 74, .10); border-color: rgba(134, 239, 172, .25); }
:root[data-theme="dark"] .grv-never strong[b-zv7iehkrwp], :root[data-theme="dark"] .grv-never ul[b-zv7iehkrwp] { color: #86efac; }
:root[data-theme="dark"] .grv-summary[b-zv7iehkrwp] { background: radial-gradient(90% 140% at 100% 0%, rgba(66, 133, 244, .16), transparent 60%), #111827; border-color: #1f2937; }
:root[data-theme="dark"] .grv-kpi[b-zv7iehkrwp] { border-color: #1f2937; }
:root[data-theme="dark"] .grv-ring-bg[b-zv7iehkrwp] { stroke: #1f2937; }
:root[data-theme="dark"] .grv-bar i[b-zv7iehkrwp] { background: #1f2937; }
:root[data-theme="dark"] .grv-sk[b-zv7iehkrwp] { background: linear-gradient(90deg, #111827 25%, #1f2937 37%, #111827 63%); background-size: 400% 100%; }
:root[data-theme="dark"] .grv-verify[b-zv7iehkrwp] { background: #111827; border-color: #78350f; }
:root[data-theme="dark"] .grv-fastlane[b-zv7iehkrwp] { background: #0b1a33; border-color: #1e40af; }
:root[data-theme="dark"] .grv-fastlane > strong[b-zv7iehkrwp], :root[data-theme="dark"] .grv-fastlane > p[b-zv7iehkrwp] { color: #bfdbfe; }
:root[data-theme="dark"] .grv-track li > span[b-zv7iehkrwp] { background: #1f2937; color: #9ca3af; }
:root[data-theme="dark"] .grv-track li:not(:last-child)[b-zv7iehkrwp]::after { background: #374151; }
:root[data-theme="dark"] .grv-demo-typing[b-zv7iehkrwp] { background: #111827; border-color: #1f2937; color: #9ca3af; }
:root[data-theme="dark"] .grv-proof[b-zv7iehkrwp] { background: #1f2937; color: #9ca3af; }
:root[data-theme="dark"] .grv-textwrap.revealing textarea[b-zv7iehkrwp] { background: #13112b; }
:root[data-theme="dark"] .grv-avatar.s5[b-zv7iehkrwp], :root[data-theme="dark"] .grv-avatar.s4[b-zv7iehkrwp] { box-shadow: 0 0 0 2px #111827, 0 0 0 4px #92400e; }
:root[data-theme="dark"] .grv-avatar.s1[b-zv7iehkrwp], :root[data-theme="dark"] .grv-avatar.s2[b-zv7iehkrwp], :root[data-theme="dark"] .grv-avatar.s3[b-zv7iehkrwp] { box-shadow: 0 0 0 2px #111827, 0 0 0 4px #7f1d1d; }
:root[data-theme="dark"] .grv-filter.active[b-zv7iehkrwp] { background: #1a73e8; border-color: #1a73e8; color: #fff; }
:root[data-theme="dark"] .grv-filter.active span[b-zv7iehkrwp] { color: #dbeafe; }
:root[data-theme="dark"] .grv-kpi.alert[b-zv7iehkrwp] { background: rgba(194, 65, 12, .16); border-color: rgba(251, 146, 60, .35); }
:root[data-theme="dark"] .grv-kpi.alert .grv-kpi-num[b-zv7iehkrwp] { color: #fdba74; }
:root[data-theme="dark"] .grv-chip.lang[b-zv7iehkrwp] { background: #1f2937; color: #d1d5db; }
:root[data-theme="dark"] .grv-segment label.on[b-zv7iehkrwp] { background: #1a73e8; border-color: #1a73e8; color: #fff; }

:root[data-theme="dark"] .grv-ws[b-zv7iehkrwp] { background: #0b1220; border-color: #1f2937; color: #cbd5e1; box-shadow: none; }
:root[data-theme="dark"] .grv-ws-tiles i[b-zv7iehkrwp] { background: #1f2937; }
:root[data-theme="dark"] .grv-ws-item[b-zv7iehkrwp], :root[data-theme="dark"] .grv-ws > small[b-zv7iehkrwp], :root[data-theme="dark"] .grv-ws-item small[b-zv7iehkrwp],
:root[data-theme="dark"] .grv-ws-person small[b-zv7iehkrwp] { color: #9ca3af; }
:root[data-theme="dark"] .grv-ws-btn[b-zv7iehkrwp] { border-color: #374151; color: #93c5fd; }
:root[data-theme="dark"] .grv-ws-hit[b-zv7iehkrwp] { background: #1e1b4b; color: #c7d2fe; }
:root[data-theme="dark"] .grv-walk-cap[b-zv7iehkrwp] { color: #e5e7eb; }
:root[data-theme="dark"] .grv-pid[b-zv7iehkrwp] { background: #11163a; border-color: #312e81; }
:root[data-theme="dark"] .grv-pid > strong[b-zv7iehkrwp] { color: #c7d2fe; }
:root[data-theme="dark"] .grv-pid > p[b-zv7iehkrwp] { color: #cbd5e1; }
:root[data-theme="dark"] .grv-ws-pid .grv-ws-item b[b-zv7iehkrwp] { color: #f8fafc; }
:root[data-theme="dark"] .grv-hint.warn[b-zv7iehkrwp] { background: rgba(180, 83, 9, .14); border-color: rgba(253, 230, 138, .25); color: #fcd34d; }
:root[data-theme="dark"] .grv-mock-role[b-zv7iehkrwp] { color: #cbd5e1; }
:root[data-theme="dark"] .grv-backlog[b-zv7iehkrwp] { background: radial-gradient(90% 140% at 100% 0%, rgba(99, 102, 241, .18), transparent 60%), #111827; border-color: #312e81; }
:root[data-theme="dark"] .grv-backlog-ico[b-zv7iehkrwp] { background: #1e1b4b; }
:root[data-theme="dark"] .grv-backlog-txt[b-zv7iehkrwp] { color: #cbd5e1; }
:root[data-theme="dark"] .grv-backlog-progress[b-zv7iehkrwp] { color: #c7d2fe; }
:root[data-theme="dark"] .grv-backlog-track[b-zv7iehkrwp] { background: #1e1b4b; }
:root[data-theme="dark"] .grv-backlog-ready[b-zv7iehkrwp] { background: rgba(22, 163, 74, .12); border-color: rgba(134, 239, 172, .25); }
:root[data-theme="dark"] .grv-backlog-ready > strong[b-zv7iehkrwp] { color: #4ade80; }
:root[data-theme="dark"] .grv-backlog-ready > span[b-zv7iehkrwp] { color: #bbf7d0; }
:root[data-theme="dark"] .grv-backlog-going[b-zv7iehkrwp] { color: #bfdbfe; }
/* /Pages/Admin/Ingresos.razor.rz.scp.css */
/* Ingresos — premium, scoped (Blazor isolation). ix-* prefixed. Light + dark. */

.ix[b-r96pen03v1] { max-width: 980px; margin: 0 auto; padding: 8px 20px 64px; color: #0f172a; }

.ix-head[b-r96pen03v1] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.ix-head h1[b-r96pen03v1] { font-size: 26px; font-weight: 800; margin: 0 0 4px; letter-spacing: -.5px; }
.ix-head p[b-r96pen03v1] { margin: 0; color: #64748b; max-width: 620px; line-height: 1.5; font-size: 14.5px; }

.ix-btn[b-r96pen03v1] { appearance: none; border: 1px solid #cbd5e1; background: #fff; color: #0f172a; font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 10px; cursor: pointer; white-space: nowrap; transition: box-shadow .2s ease; }
.ix-btn:hover:not(:disabled)[b-r96pen03v1] { box-shadow: 0 3px 12px var(--adm-sh-0f172a-a0_1); }
.ix-btn:disabled[b-r96pen03v1] { opacity: .6; cursor: default; }
.ix-btn.primary[b-r96pen03v1] { border-color: transparent; color: var(--adm-fgon-dedffc-ffffff); background: linear-gradient(135deg, var(--adm-bggrad-6366f1), var(--adm-bggrad-4f46e5)); box-shadow: 0 6px 18px var(--adm-sh-4f46e5-a0_28); }
.ix-btn.ghost[b-r96pen03v1] { border-color: transparent; background: transparent; color: #4f46e5; }
.ix-btn.ghost:hover:not(:disabled)[b-r96pen03v1] { background: #eef2ff; box-shadow: none; }

/* ---------- drop zone ---------- */
.ix-drop[b-r96pen03v1] { position: relative; display: block; cursor: pointer; border: 2px dashed #cbd5e1; border-radius: 18px; background: linear-gradient(135deg, #f8fafc, #ecfdf5); padding: 30px 20px; margin-bottom: 16px; transition: border-color .15s ease, background .15s ease, transform .05s ease; }
.ix-drop:hover[b-r96pen03v1] { border-color: #10b981; background: linear-gradient(135deg, #ecfdf5, #d1fae5); }
.ix-drop.over[b-r96pen03v1] { border-color: #059669; background: linear-gradient(135deg, #d1fae5, #a7f3d0); transform: scale(1.005); }
.ix-drop.busy[b-r96pen03v1] { pointer-events: none; opacity: .9; }
/* InputFile's <input> lives in a child component → needs ::deep to be reached. */
.ix-drop[b-r96pen03v1]  .ix-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ix-drop.busy[b-r96pen03v1]  .ix-drop-input { display: none; }
.ix-drop-inner[b-r96pen03v1] { text-align: center; pointer-events: none; }
.ix-drop-icon[b-r96pen03v1] { font-size: 32px; margin-bottom: 6px; }
.ix-drop-title[b-r96pen03v1] { font-size: 16px; font-weight: 700; color: #334155; }
.ix-drop-sub[b-r96pen03v1] { font-size: 13px; color: var(--adm-fg-94a3b8); margin-top: 3px; }
.ix-progress[b-r96pen03v1] { width: 220px; height: 6px; border-radius: 999px; background: #e2e8f0; margin: 12px auto 0; overflow: hidden; }
.ix-progress-bar[b-r96pen03v1] { height: 100%; background: linear-gradient(90deg, #10b981, #059669); border-radius: 999px; transition: width .2s ease; }

.ix-search[b-r96pen03v1] { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.ix-search input[b-r96pen03v1] { flex: 1 1 220px; min-width: 180px; padding: 9px 13px; border: 1px solid #cbd5e1; border-radius: 10px; font-size: 14px; background: #fff; color: #0f172a; }
.ix-search select[b-r96pen03v1] { padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: 10px; font-size: 13.5px; background: #fff; color: #334155; }
.ix-search input:focus[b-r96pen03v1], .ix-search select:focus[b-r96pen03v1] { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.ix-filters[b-r96pen03v1] { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ix-chip[b-r96pen03v1] { appearance: none; border: 1px solid #e2e8f0; background: #fff; color: #475569; font-size: 13.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ix-chip:hover[b-r96pen03v1] { border-color: #cbd5e1; }
.ix-chip.active[b-r96pen03v1] { background: #4f46e5; border-color: transparent; color: #fff; }
.ix-count[b-r96pen03v1] { font-size: 11px; font-weight: 700; background: rgba(15,23,42,.08); border-radius: 999px; padding: 1px 7px; }
.ix-chip.active .ix-count[b-r96pen03v1] { background: rgba(255,255,255,.25); }

.ix-empty[b-r96pen03v1] { text-align: center; padding: 48px 24px; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 16px; color: #64748b; }
.ix-empty-icon[b-r96pen03v1] { font-size: 40px; margin-bottom: 8px; }
.ix-empty p[b-r96pen03v1] { margin: 0 0 16px; }

.ix-summary[b-r96pen03v1] { display: flex; gap: 28px; flex-wrap: wrap; padding: 14px 18px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 12px; }
.ix-summary > div[b-r96pen03v1] { display: flex; flex-direction: column; }
.ix-summary span[b-r96pen03v1] { font-size: 12px; color: #94a3b8; }
.ix-summary strong[b-r96pen03v1] { font-size: 16px; }

/* overflow:visible (NOT hidden) so the row menu isn't clipped; round the header corners to keep the card look. */
.ix-table-wrap[b-r96pen03v1] { border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.ix-table[b-r96pen03v1] { width: 100%; border-collapse: collapse; }
.ix-table thead th[b-r96pen03v1] { text-align: left; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; padding: 11px 14px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.ix-table thead th:first-child[b-r96pen03v1] { border-top-left-radius: 13px; }
.ix-table thead th:last-child[b-r96pen03v1] { border-top-right-radius: 13px; }
.ix-table th.num[b-r96pen03v1], .ix-table td.num[b-r96pen03v1] { text-align: right; font-variant-numeric: tabular-nums; }
.ix-table tbody td[b-r96pen03v1] { padding: 12px 14px; border-bottom: 1px solid #f1f5f9; font-size: 14px; }
.ix-table tbody tr:last-child td[b-r96pen03v1] { border-bottom: none; }
.ix-table tbody tr:hover[b-r96pen03v1] { background: #f8fafc; }
.ix-src[b-r96pen03v1] { font-weight: 600; }
.ix-table td.strong[b-r96pen03v1] { font-weight: 700; }
.ix-pill[b-r96pen03v1] { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.ix-pill.ok[b-r96pen03v1] { background: #d1fae5; color: #047857; }
.ix-pill.draft[b-r96pen03v1] { background: #fef3c7; color: #92600a; }
.ix-row-actions[b-r96pen03v1] { white-space: nowrap; text-align: right; }
.ix-icon-btn[b-r96pen03v1] { appearance: none; border: none; background: transparent; cursor: pointer; font-size: 16px; padding: 4px 7px; border-radius: 7px; line-height: 1; color: #64748b; }
.ix-icon-btn:hover[b-r96pen03v1] { background: #f1f5f9; color: #0f172a; }
.ix-icon-btn.ok[b-r96pen03v1] { color: var(--adm-fg-047857); }
.ix-icon-btn.ok:hover[b-r96pen03v1] { background: #d1fae5; }

.ix-menu-backdrop[b-r96pen03v1] { position: fixed; inset: 0; z-index: 80; }
.ix-rowmenu[b-r96pen03v1] { position: absolute; right: 6px; top: 100%; margin-top: 2px; z-index: 130; min-width: 168px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 12px 32px rgba(15,23,42,.18); padding: 6px; text-align: left; }
.ix-rowmenu button[b-r96pen03v1] { display: block; width: 100%; text-align: left; border: none; background: transparent; cursor: pointer;
    font-size: 13.5px; font-weight: 600; color: #334155; padding: 9px 11px; border-radius: 8px; }
.ix-rowmenu button:hover[b-r96pen03v1] { background: #f1f5f9; }
.ix-rowmenu button.danger[b-r96pen03v1] { color: #b91c1c; }
.ix-rowmenu button.danger:hover[b-r96pen03v1] { background: #fee2e2; }

/* modal */
.ix-modal-backdrop[b-r96pen03v1] { position: fixed; inset: 0; z-index: 2000; background: var(--adm-scrim-0f172a-a0_45); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.ix-modal[b-r96pen03v1] { width: 100%; max-width: 580px; max-height: 90vh; display: flex; flex-direction: column; background: #fff; border-radius: 18px; box-shadow: 0 24px 64px rgba(15,23,42,.3); overflow: hidden; }
.ix-modal.with-preview[b-r96pen03v1] { max-width: 940px; }
.ix-modal-head[b-r96pen03v1] { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #f1f5f9; flex: 0 0 auto; }
.ix-modal-head h2[b-r96pen03v1] { margin: 0; font-size: 18px; font-weight: 700; }
.ix-modal-split[b-r96pen03v1] { display: flex; align-items: stretch; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.ix-modal-preview[b-r96pen03v1] { flex: 0 0 46%; max-width: 46%; background: var(--adm-bg-0b1220); padding: 12px; overflow: auto; }
.ix-modal-preview img[b-r96pen03v1] { width: 100%; height: auto; border-radius: 8px; display: block; }
.ix-modal-preview object[b-r96pen03v1] { width: 100%; height: 100%; min-height: 60vh; border: none; border-radius: 8px; }
.ix-preview-loading[b-r96pen03v1] { color: var(--adm-fg-94a3b8); text-align: center; padding: 40px 12px; font-size: 14px; }
.ix-preview-loading a[b-r96pen03v1] { color: var(--adm-fg-818cf8); }
.ix-modal-body[b-r96pen03v1] { padding: 18px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; flex: 1 1 auto; overflow: auto; align-content: start; }
.ix-field[b-r96pen03v1] { display: flex; flex-direction: column; gap: 4px; }
.ix-field.wide[b-r96pen03v1] { grid-column: span 2; }
.ix-field > span[b-r96pen03v1] { font-size: 12px; font-weight: 600; color: #475569; }
.ix-field > span em[b-r96pen03v1] { color: var(--adm-fg-e11d48); font-style: normal; }
.ix-field input[b-r96pen03v1] { padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: 9px; font-size: 14px; background: #fff; color: #0f172a; }
.ix-field input:focus[b-r96pen03v1] { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.ix-field input.err[b-r96pen03v1] { border-color: var(--adm-bd-e11d48); box-shadow: 0 0 0 3px var(--adm-sh-e11d48-a0_12); }
.ix-err-text[b-r96pen03v1] { color: var(--adm-fg-e11d48); font-size: 12px; }
.ix-file-pick[b-r96pen03v1] { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 9px 11px; border: 1px dashed #cbd5e1; border-radius: 9px; font-size: 13px; color: #64748b; cursor: pointer; overflow: hidden; }
.ix-file-pick[b-r96pen03v1]  input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ix-modal-foot[b-r96pen03v1] { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid #f1f5f9; background: #f8fafc; }

/* dark */
:root[data-theme="dark"] .ix[b-r96pen03v1] { color: #e2e8f0; }
:root[data-theme="dark"] .ix-head p[b-r96pen03v1] { color: #94a3b8; }
:root[data-theme="dark"] .ix-drop[b-r96pen03v1] { border-color: #475569; background: linear-gradient(135deg, #1a2436, #112b24); }
:root[data-theme="dark"] .ix-drop:hover[b-r96pen03v1] { border-color: #10b981; background: linear-gradient(135deg, #14241f, #0f3027); }
:root[data-theme="dark"] .ix-drop.over[b-r96pen03v1] { border-color: #34d399; background: linear-gradient(135deg, #0f3a2e, #114537); }
:root[data-theme="dark"] .ix-drop-title[b-r96pen03v1] { color: #e2e8f0; }
:root[data-theme="dark"] .ix-drop-sub[b-r96pen03v1] { color: #94a3b8; }
:root[data-theme="dark"] .ix-progress[b-r96pen03v1] { background: #334155; }
:root[data-theme="dark"] .ix-btn[b-r96pen03v1] { background: #1e293b; border-color: #475569; color: #e2e8f0; }
:root[data-theme="dark"] .ix-btn.ghost[b-r96pen03v1] { background: transparent; color: #a5b4fc; }
:root[data-theme="dark"] .ix-btn.ghost:hover:not(:disabled)[b-r96pen03v1] { background: #312e81; }
:root[data-theme="dark"] .ix-search input[b-r96pen03v1], :root[data-theme="dark"] .ix-search select[b-r96pen03v1] { background: #0f172a; border-color: #475569; color: #e2e8f0; }
:root[data-theme="dark"] .ix-rowmenu[b-r96pen03v1] { background: #1e293b; border-color: #334155; box-shadow: 0 12px 32px rgba(0,0,0,.4); }
:root[data-theme="dark"] .ix-rowmenu button[b-r96pen03v1] { color: #cbd5e1; }
:root[data-theme="dark"] .ix-rowmenu button:hover[b-r96pen03v1] { background: #334155; }
:root[data-theme="dark"] .ix-rowmenu button.danger[b-r96pen03v1] { color: #fca5a5; }
:root[data-theme="dark"] .ix-rowmenu button.danger:hover[b-r96pen03v1] { background: #7f1d1d; }
:root[data-theme="dark"] .ix-icon-btn[b-r96pen03v1] { color: #94a3b8; }
:root[data-theme="dark"] .ix-icon-btn:hover[b-r96pen03v1] { color: #e2e8f0; }
:root[data-theme="dark"] .ix-chip[b-r96pen03v1] { background: #1e293b; border-color: #334155; color: #cbd5e1; }
:root[data-theme="dark"] .ix-chip.active[b-r96pen03v1] { background: #4f46e5; color: #fff; }
:root[data-theme="dark"] .ix-count[b-r96pen03v1] { background: rgba(255,255,255,.12); }
:root[data-theme="dark"] .ix-empty[b-r96pen03v1] { background: #1e293b; border-color: #334155; color: #94a3b8; }
:root[data-theme="dark"] .ix-summary[b-r96pen03v1] { background: #1e293b; border-color: #334155; }
:root[data-theme="dark"] .ix-summary span[b-r96pen03v1] { color: #94a3b8; }
:root[data-theme="dark"] .ix-table-wrap[b-r96pen03v1] { border-color: #334155; box-shadow: none; }
:root[data-theme="dark"] .ix-table thead th[b-r96pen03v1] { background: #18233a; border-bottom-color: #334155; color: #94a3b8; }
:root[data-theme="dark"] .ix-table tbody td[b-r96pen03v1] { border-bottom-color: #1f2b40; }
:root[data-theme="dark"] .ix-table tbody tr:hover[b-r96pen03v1] { background: #1b2740; }
:root[data-theme="dark"] .ix-pill.ok[b-r96pen03v1] { background: #064e3b; color: #6ee7b7; }
:root[data-theme="dark"] .ix-pill.draft[b-r96pen03v1] { background: #422006; color: #fcd34d; }
:root[data-theme="dark"] .ix-icon-btn:hover[b-r96pen03v1] { background: #334155; }
:root[data-theme="dark"] .ix-icon-btn.ok:hover[b-r96pen03v1] { background: #064e3b; }
:root[data-theme="dark"] .ix-icon-btn.danger:hover[b-r96pen03v1] { background: #7f1d1d; }
:root[data-theme="dark"] .ix-modal[b-r96pen03v1] { background: #1e293b; box-shadow: 0 24px 64px rgba(0,0,0,.5); }
:root[data-theme="dark"] .ix-modal-head[b-r96pen03v1] { border-bottom-color: #334155; }
:root[data-theme="dark"] .ix-field > span[b-r96pen03v1] { color: #cbd5e1; }
:root[data-theme="dark"] .ix-field input[b-r96pen03v1] { background: #0f172a; border-color: #475569; color: #e2e8f0; }
:root[data-theme="dark"] .ix-file-pick[b-r96pen03v1] { border-color: #475569; color: #94a3b8; }
:root[data-theme="dark"] .ix-modal-foot[b-r96pen03v1] { background: #18233a; border-top-color: #334155; }

@media (max-width: 760px) {
    .ix-modal-split[b-r96pen03v1] { flex-direction: column; overflow: auto; }
    .ix-modal-preview[b-r96pen03v1] { flex: 0 0 auto; max-width: 100%; max-height: 38vh; }
    .ix-modal-preview object[b-r96pen03v1] { min-height: 34vh; }
}
/* ---------- phones ---------- */
@media (max-width: 640px) {
    /* the admin shell already pads the page — don't spend another 40px of a 390px screen on it */
    .ix[b-r96pen03v1] { padding: 8px 0 48px; }

    /* 8 columns never fit a phone: scroll the table inside its own card. The shared
       bare-table fallback would otherwise squash every column to min-content. */
    .ix-table-wrap[b-r96pen03v1] { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
    .ix-table[b-r96pen03v1] { display: table !important; min-width: max-content; }

    /* iOS zooms the viewport when focusing an input under 16px; these scoped rules
       outrank the shared 16px one, so restate it here. */
    .ix-search input[b-r96pen03v1], .ix-search select[b-r96pen03v1], .ix-field input[b-r96pen03v1] { font-size: 16px; }
}
@media (max-width: 560px) { .ix-modal-body[b-r96pen03v1] { grid-template-columns: 1fr; } .ix-field.wide[b-r96pen03v1] { grid-column: span 1; } }
/* /Pages/Admin/Inventory.razor.rz.scp.css */
/* ============================================
   INVENTORY.RAZOR STYLES - Dark Mode (Admin)
   ============================================ */

/* Page Layout */
.inventory-page[b-qq2oyosx4q] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    min-height: 100vh;
    background: transparent;
}

.inventory-header[b-qq2oyosx4q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.inventory-title[b-qq2oyosx4q] {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--adm-fg-f1f5f9);
}

.header-actions[b-qq2oyosx4q] {
    display: flex;
    gap: 8px;
}

.btn-add[b-qq2oyosx4q] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    min-height: 44px;
    background: #2563eb;   /* AA: white text needs blue-600, not blue-500 (3.67:1) */
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    -webkit-tap-highlight-color: transparent;
}

.btn-add:active[b-qq2oyosx4q] {
    transform: scale(0.98);
}

.btn-add:hover[b-qq2oyosx4q] {
    background: #2563eb;
    transform: translateY(-1px);
}

.btn-toolbar[b-qq2oyosx4q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    min-height: 44px;
    background: var(--adm-bg-21262d);
    color: var(--adm-fgon-f1f5f9-c9d1d9);
    border: 1px solid var(--adm-bdon-f1f5f9-30363d);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.btn-toolbar:hover[b-qq2oyosx4q] {
    background: var(--adm-bghov-f1f5f9-30363d);
    border-color: var(--adm-bdon-dbe3ed-58a6ff);
    color: var(--adm-fgon-dbe3ed-e6edf3);
}

.btn-toolbar:focus-visible[b-qq2oyosx4q] {
    outline: 2px solid var(--adm-bdon-f1f5f9-58a6ff);
    outline-offset: 2px;
}

/* Stats Bar */
.stats-bar[b-qq2oyosx4q] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.stat-card[b-qq2oyosx4q] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 12px;
    cursor: default;
    transition: all .15s;
    box-shadow: 0 1px 3px var(--adm-sh-000000-a0_2);
}

button.stat-card[b-qq2oyosx4q] {
    cursor: pointer;
}

button.stat-card:hover[b-qq2oyosx4q] {
    background: var(--adm-bg-334155);
    border-color: var(--adm-bdon-f1f5f9-475569);
}

.stat-card.stat-active[b-qq2oyosx4q] {
    background: var(--adm-bg-3b82f6-a0_15);
    border-color: var(--adm-bdon-dce8fb-3b82f6);
}

.stat-icon[b-qq2oyosx4q] {
    font-size: 24px;
    flex-shrink: 0;
}

.stat-content[b-qq2oyosx4q] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-value[b-qq2oyosx4q] {
    font-size: 20px;
    font-weight: 700;
    color: var(--adm-fg-f1f5f9);
}

.stat-label[b-qq2oyosx4q] {
    font-size: 12px;
    color: var(--adm-fg-94a3b8);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.stat-warning .stat-value[b-qq2oyosx4q] {
    color: var(--adm-fg-fbbf24);
}

.stat-info .stat-value[b-qq2oyosx4q] {
    color: var(--adm-fg-4ade80);
}

/* Grid Layout */
.inventory-grid[b-qq2oyosx4q] {
    display: grid;
    grid-template-columns: minmax(180px, 220px) 1fr;
    gap: 16px;
    flex: 1;
}

/* Category Panel */
.cat-panel[b-qq2oyosx4q] {
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px var(--adm-sh-000000-a0_2);
}

.cat-panel-header[b-qq2oyosx4q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--adm-bdon-f8fafc-334155);
    background: var(--adm-bg-0f172a);
}

.cat-panel-header h4[b-qq2oyosx4q] {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--adm-fgon-f8fafc-94a3b8);
}

.cat-all-btn[b-qq2oyosx4q] {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--adm-fg-94a3b8);
    background: transparent;
    border: 1px solid var(--adm-bd-475569);
    border-radius: 4px;
    cursor: pointer;
    transition: all .15s;
}

.cat-all-btn:hover[b-qq2oyosx4q] {
    background: var(--adm-bg-334155);
    color: var(--adm-fgon-f1f5f9-f1f5f9);
}

.cat-all-btn.active[b-qq2oyosx4q] {
    background: #2563eb;   /* AA: white text needs blue-600 */
    border-color: #2563eb;
    color: #fff;
}

.cat-list[b-qq2oyosx4q] {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
}

.cat-item[b-qq2oyosx4q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--adm-fg-94a3b8);   /* AA: was inheriting #64748b (~3.1:1) on dark */
    padding: 12px 14px;
    min-height: 48px;
    cursor: pointer;
    border-bottom: 1px solid var(--adm-bd-334155);
    transition: background .15s;
    -webkit-tap-highlight-color: transparent;
}

.cat-item:active[b-qq2oyosx4q] {
    background: var(--adm-bg-334155);
}

.cat-item:hover[b-qq2oyosx4q] {
    background: var(--adm-bg-334155);
}

.cat-item.active[b-qq2oyosx4q] {
    background: var(--adm-bg-3b82f6-a0_15);
    border-left: 3px solid var(--adm-bdon-dce8fb-3b82f6);
}

.cat-item-name[b-qq2oyosx4q] {
    font-size: 13px;
    color: var(--adm-fg-e2e8f0);
}

.cat-item-count[b-qq2oyosx4q] {
    font-size: 11px;
    color: var(--adm-fgon-f1f5f9-94a3b8);
    background: var(--adm-bg-334155);
    padding: 2px 8px;
    border-radius: 10px;
}

.cat-empty[b-qq2oyosx4q] {
    color: var(--adm-fg-94a3b8);   /* AA: #64748b "Sin categorías" was 3.07:1 on dark */
    font-style: italic;
    justify-content: center;
}

/* Right Panel */
.inventory-right[b-qq2oyosx4q] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.inventory-toolbar[b-qq2oyosx4q] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.toolbar-search[b-qq2oyosx4q] {
    flex: 1;
    position: relative;
    max-width: 400px;
    min-width: 200px;
}

.toolbar-search input[b-qq2oyosx4q] {
    width: 100%;
    padding: 10px 14px;
    padding-right: 36px;
    background: var(--adm-bg-0f172a);
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    font-size: 14px;
    color: var(--adm-fgon-f8fafc-e2e8f0);
    transition: border-color .15s;
}

.toolbar-search input[b-qq2oyosx4q]::placeholder {
    color: var(--adm-fgon-f8fafc-64748b);
}

.toolbar-search input:focus[b-qq2oyosx4q] {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-3b82f6);
}

.search-clear[b-qq2oyosx4q] {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--adm-fg-64748b);
    font-size: 18px;
    cursor: pointer;
    border-radius: 6px;
    -webkit-tap-highlight-color: transparent;
}

.search-clear:active[b-qq2oyosx4q] {
    background: var(--adm-bg-334155);
}

.search-clear:hover[b-qq2oyosx4q] {
    color: var(--adm-fg-94a3b8);
}

.filter-chip[b-qq2oyosx4q] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    min-height: 44px;
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 8px;
    font-size: 13px;
    color: var(--adm-fgon-ffffff-94a3b8);
    cursor: pointer;
    transition: all .15s;
    -webkit-tap-highlight-color: transparent;
}

.filter-chip:active[b-qq2oyosx4q] {
    transform: scale(0.98);
}

.filter-chip:hover[b-qq2oyosx4q] {
    background: var(--adm-bghov-ffffff-334155);
}

.filter-chip.active[b-qq2oyosx4q] {
    background: var(--adm-bg-3b82f6-a0_15);
    border-color: var(--adm-bdon-dce8fb-3b82f6);
    color: var(--adm-fgon-dce8fb-f1f5f9);
}

.filter-chip input[b-qq2oyosx4q] {
    width: 14px;
    height: 14px;
    accent-color: var(--adm-fgon-ffffff-3b82f6);
}

/* Items Table */
.items-table-wrapper[b-qq2oyosx4q] {
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px var(--adm-sh-000000-a0_2);
}

.items-table[b-qq2oyosx4q] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.items-table thead[b-qq2oyosx4q] {
    background: var(--adm-bg-0f172a);
}

.items-table th[b-qq2oyosx4q] {
    padding: 12px 14px;
    text-align: left;
    font-weight: 600;
    color: var(--adm-fg-94a3b8);
    border-bottom: 1px solid var(--adm-bd-334155);
    white-space: nowrap;
}

.items-table td[b-qq2oyosx4q] {
    padding: 14px;
    color: var(--adm-fg-e2e8f0);
    border-bottom: 1px solid var(--adm-bd-334155);
    vertical-align: middle;
}

.items-table tbody tr:hover[b-qq2oyosx4q] {
    background: var(--adm-bg-21262d);
}

/* Calmer low-stock signal: left-border accent (3px amber) instead of
   tinting the whole row — keeps the chip but doesn't drown the table
   when many items are below mínimo. */
.items-table tbody tr.low-stock-row[b-qq2oyosx4q] {
    box-shadow: inset 3px 0 0 0 var(--adm-sh-e3b341);
}

.items-table tbody tr.inactive-row[b-qq2oyosx4q] {
    opacity: 0.55;
}

.item-name-cell[b-qq2oyosx4q] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.item-name[b-qq2oyosx4q] {
    font-weight: 600;
    color: var(--adm-fg-e6edf3);
}

.item-barcode[b-qq2oyosx4q] {
    font-size: 11px;
    color: var(--adm-fg-6e7681);
    font-family: monospace;
}

/* Per-row "wired-up?" badge. Quiet styling so it doesn't outshout the
   name; "huérfano" gets a softer red to flag clean-up candidates. */
.usage-badge[b-qq2oyosx4q] {
    display: inline-block;
    padding: 1px 7px;
    background: var(--adm-bg-1c2230);
    color: var(--adm-fgon-ffffff-8b949e);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .02em;
    border-radius: 999px;
    margin-top: 2px;
    width: fit-content;
}

.usage-badge.orphan[b-qq2oyosx4q] {
    background: var(--adm-bg-2a1a1a);
    color: var(--adm-fgon-ffffff-f0883e);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Numeric columns: right-aligned + tabular-nums so digits line up
   regardless of font; "1.234,56 €" reads cleanly down a column. */
.items-table .col-stock[b-qq2oyosx4q],
.items-table .col-min[b-qq2oyosx4q],
.items-table .col-cost[b-qq2oyosx4q],
.items-table .col-value[b-qq2oyosx4q] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.stock-value[b-qq2oyosx4q] {
    font-weight: 600;
}

.stock-value.low[b-qq2oyosx4q] {
    color: var(--adm-fg-e3b341);
}

.low-badge[b-qq2oyosx4q] {
    display: inline-block;
    padding: 2px 7px;
    background: var(--adm-bg-3a2f10);
    color: var(--adm-fgon-fef3c7-e3b341);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 999px;
    margin-left: 8px;
}

.col-actions[b-qq2oyosx4q] {
    width: 156px;          /* 3 × 44 + 2 × 6 gap + a hair of slack */
    text-align: right;
    white-space: nowrap;
}

.action-btn[b-qq2oyosx4q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid var(--adm-bd-30363d);
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .1s;
    margin-left: 6px;
    -webkit-tap-highlight-color: transparent;
    color: var(--adm-fg-8b949e);
}

.action-btn:first-child[b-qq2oyosx4q] {
    margin-left: 0;
}

.action-btn:active[b-qq2oyosx4q] {
    transform: scale(0.95);
}

.action-btn:hover[b-qq2oyosx4q] {
    background: var(--adm-bg-21262d);
    border-color: var(--adm-bdon-f1f5f9-58a6ff);
    color: var(--adm-fgon-f1f5f9-e6edf3);
}

.action-btn:focus-visible[b-qq2oyosx4q] {
    outline: 2px solid var(--adm-bd-58a6ff);
    outline-offset: 2px;
}

.action-btn.adjust[b-qq2oyosx4q] {
    font-weight: 700;
    color: var(--adm-fg-58a6ff);
}

.action-btn.history:hover[b-qq2oyosx4q] {
    border-color: var(--adm-bd-8b949e);
}

/* Loading & Empty States */
.loading-state[b-qq2oyosx4q],
.empty-state[b-qq2oyosx4q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--adm-fgon-ffffff-94a3b8);
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 12px;
}

.empty-icon[b-qq2oyosx4q] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p[b-qq2oyosx4q] {
    margin: 0 0 20px;
    font-size: 16px;
}

/* Side Panel */
.side-panel-backdrop[b-qq2oyosx4q] {
    position: fixed;
    inset: 0;
    background: var(--adm-scrim-000000-a0_4);
    z-index: 1000;
}

.side-panel[b-qq2oyosx4q] {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 100vw;
    height: 100vh;
    background: var(--adm-bg-1e293b);
    box-shadow: -4px 0 20px var(--adm-sh-000000-a0_4);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    animation: slideIn-b-qq2oyosx4q 0.2s ease-out;
}

@keyframes slideIn-b-qq2oyosx4q {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.side-panel-header[b-qq2oyosx4q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--adm-bdon-f8fafc-334155);
    background: var(--adm-bg-0f172a);
}

.side-panel-header h3[b-qq2oyosx4q] {
    margin: 0;
    font-size: 18px;
    color: var(--adm-fgon-f8fafc-f1f5f9);
}

.close-btn[b-qq2oyosx4q] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--adm-fg-94a3b8);
    font-size: 24px;
    cursor: pointer;
    border-radius: 8px;
    transition: all .15s;
    -webkit-tap-highlight-color: transparent;
}

.close-btn:active[b-qq2oyosx4q] {
    transform: scale(0.95);
}

.close-btn:hover[b-qq2oyosx4q] {
    background: var(--adm-bg-334155);
    color: var(--adm-fgon-f1f5f9-f1f5f9);
}

.side-panel-content[b-qq2oyosx4q] {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    scrollbar-width: thin;              /* Firefox */
    scrollbar-color: #5b6b7b #1c2230;
}

/* Always-visible, grabbable scrollbar. The panel routinely has content
   below the fold (e.g. the Proveedores section sits near the bottom) and
   the OS overlay scrollbar was so thin testers/users concluded the panel
   "couldn't scroll further" and missed the section (QA 2026-05-19). */
.side-panel-content[b-qq2oyosx4q]::-webkit-scrollbar {
    width: 12px;
}

.side-panel-content[b-qq2oyosx4q]::-webkit-scrollbar-track {
    background: var(--adm-bg-1c2230);
}

.side-panel-content[b-qq2oyosx4q]::-webkit-scrollbar-thumb {
    background: var(--adm-mark-e2e8f0-5b6b7b);
    border-radius: 6px;
    border: 2px solid var(--adm-bdon-e2e8f0-1c2230);
}

.side-panel-content[b-qq2oyosx4q]::-webkit-scrollbar-thumb:hover {
    background: var(--adm-mark-cbd5e1-7c8a99);
}

.side-panel-footer[b-qq2oyosx4q] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--adm-bdon-f8fafc-334155);
    background: var(--adm-bg-0f172a);
}

/* Form Elements */
.form-group[b-qq2oyosx4q] {
    margin-bottom: 16px;
}

.form-group label[b-qq2oyosx4q] {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--adm-fg-94a3b8);
}

/* The number boxes are QuantityBoxes, a child component: a scoped rule reaches their input only through ::deep. Without
   it they fell back to site.css's generic white `input[type="text"]` in this dark panel. */
.form-control[b-qq2oyosx4q],
.form-group[b-qq2oyosx4q]  .form-control {
    width: 100%;
    padding: 10px 12px;
    background: var(--adm-bg-0f172a);
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    font-size: 14px;
    color: var(--adm-fgon-f8fafc-e2e8f0);
    transition: border-color .15s;
}

.form-control:focus[b-qq2oyosx4q],
.form-group[b-qq2oyosx4q]  .form-control:focus {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-3b82f6);
}

.form-control:disabled[b-qq2oyosx4q],
.form-group[b-qq2oyosx4q]  .form-control:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-row[b-qq2oyosx4q] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-hint[b-qq2oyosx4q] {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--adm-fg-64748b);
}

.checkbox-label[b-qq2oyosx4q] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--adm-fg-e2e8f0);
}

.checkbox-label input[b-qq2oyosx4q] {
    width: 16px;
    height: 16px;
    accent-color: var(--adm-fg-3b82f6);
}

/* Buttons */
.btn-primary[b-qq2oyosx4q] {
    padding: 12px 24px;
    min-height: 44px;
    background: #2563eb;   /* AA: white text needs blue-600, not blue-500 (3.67:1) */
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    -webkit-tap-highlight-color: transparent;
}

.btn-primary:active:not(:disabled)[b-qq2oyosx4q] {
    transform: scale(0.98);
}

.btn-primary:hover:not(:disabled)[b-qq2oyosx4q] {
    background: #2563eb;
}

.btn-primary:disabled[b-qq2oyosx4q] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-qq2oyosx4q] {
    padding: 12px 24px;
    min-height: 44px;
    background: transparent;
    color: var(--adm-fg-94a3b8);
    border: 1px solid var(--adm-bd-475569);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    -webkit-tap-highlight-color: transparent;
}

.btn-secondary:active[b-qq2oyosx4q] {
    transform: scale(0.98);
}

.btn-secondary:hover[b-qq2oyosx4q] {
    background: var(--adm-bg-334155);
    color: var(--adm-fgon-f1f5f9-f1f5f9);
}

/* Modal */
.modal-backdrop[b-qq2oyosx4q] {
    position: fixed;
    inset: 0;
    background: var(--adm-scrim-000000-a0_6);
    z-index: 1000;
}

.modal[b-qq2oyosx4q] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 480px;
    max-width: 95vw;
    max-height: 90vh;
    background: var(--adm-bg-1e293b);
    border-radius: 16px;
    box-shadow: 0 20px 60px var(--adm-sh-000000-a0_5);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    animation: modalIn-b-qq2oyosx4q 0.2s ease-out;
    border: 1px solid var(--adm-bdon-ffffff-334155);
}

.modal.modal-wide[b-qq2oyosx4q] {
    width: 700px;
}

@keyframes modalIn-b-qq2oyosx4q {
    from {
        opacity: 0;
        transform: translate(-50%, -48%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.modal-header[b-qq2oyosx4q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--adm-bdon-f8fafc-334155);
    background: var(--adm-bg-0f172a);
}

.modal-header h3[b-qq2oyosx4q] {
    margin: 0;
    font-size: 18px;
    color: var(--adm-fgon-f8fafc-f1f5f9);
}

.modal-content[b-qq2oyosx4q] {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(90vh - 140px);
}

.modal-footer[b-qq2oyosx4q] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--adm-bdon-f8fafc-334155);
    background: var(--adm-bg-0f172a);
}

.current-stock-display[b-qq2oyosx4q] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--adm-bg-0f172a);
    border-radius: 8px;
    margin-bottom: 20px;
}

.current-stock-display .label[b-qq2oyosx4q] {
    color: var(--adm-fgon-f8fafc-94a3b8);
}

.current-stock-display .value[b-qq2oyosx4q] {
    font-size: 20px;
    font-weight: 700;
    color: var(--adm-fgon-f8fafc-f1f5f9);
}

.adjustment-preview[b-qq2oyosx4q] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--adm-bg-3b82f6-a0_15);
    border: 1px solid var(--adm-bdon-dce8fb-3b82f6);
    border-radius: 8px;
    margin-top: 16px;
    color: var(--adm-fgon-dce8fb-94a3b8);
}

.adjustment-preview strong[b-qq2oyosx4q] {
    font-size: 18px;
    color: var(--adm-fg-f1f5f9);
}

/* Movements Table */
.movements-table[b-qq2oyosx4q] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.movements-table th[b-qq2oyosx4q],
.movements-table td[b-qq2oyosx4q] {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--adm-bdon-f8fafc-334155);
}

.movements-table th[b-qq2oyosx4q] {
    background: var(--adm-bg-0f172a);
    color: var(--adm-fgon-f8fafc-94a3b8);
    font-weight: 600;
}

.movements-table td[b-qq2oyosx4q] {
    color: var(--adm-fg-e2e8f0);
}

.movement-type[b-qq2oyosx4q] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.movement-type.type-purchase[b-qq2oyosx4q] {
    background: var(--adm-bg-22c55e-a0_2);
    color: var(--adm-fgon-cdefdc-4ade80);
}

.movement-type.type-sale[b-qq2oyosx4q] {
    background: var(--adm-bg-3b82f6-a0_2);
    color: var(--adm-fgon-d2e2fb-60a5fa);
}

.movement-type.type-waste[b-qq2oyosx4q] {
    background: var(--adm-bg-ef4444-a0_2);
    color: var(--adm-fgon-f6d6d7-f87171);
}

.movement-type.type-other[b-qq2oyosx4q] {
    background: var(--adm-bg-64748b-a0_2);
    color: var(--adm-fgon-eff3f7-94a3b8);
}

.qty-positive[b-qq2oyosx4q] {
    color: var(--adm-fg-4ade80);
}

.qty-negative[b-qq2oyosx4q] {
    color: var(--adm-fg-f87171);
}

/* Responsive */
@media (max-width: 900px) {
    .inventory-grid[b-qq2oyosx4q] {
        grid-template-columns: 1fr;
    }

    .cat-panel[b-qq2oyosx4q] {
        display: none;
    }
}

@media (max-width: 640px) {
    .inventory-page[b-qq2oyosx4q] {
        padding: 12px;
    }

    .inventory-header[b-qq2oyosx4q] {
        flex-direction: column;
        align-items: stretch;
    }

    .stats-bar[b-qq2oyosx4q] {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 8px;
    }

    .stat-card[b-qq2oyosx4q] {
        flex-shrink: 0;
    }

    /* NOT `width: 100vw`. 100vw is the viewport INCLUDING the scrollbar gutter, so on
       any browser with a classic (non-overlay) scrollbar the panel is ~15px wider than
       the content area: anchored to right:0 it bleeds 15px off the LEFT edge. Real
       iPhones use overlay scrollbars (0px), which is why this hid from testing there.
       Pinning both edges is correct at any scrollbar width. */
    .side-panel[b-qq2oyosx4q] {
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
    }

    .form-row[b-qq2oyosx4q] {
        grid-template-columns: 1fr;
    }

    .items-table[b-qq2oyosx4q] {
        font-size: 12px;
    }

    .items-table th[b-qq2oyosx4q],
    .items-table td[b-qq2oyosx4q] {
        padding: 8px 10px;
    }

    .col-sku[b-qq2oyosx4q],
    .col-category[b-qq2oyosx4q],
    .col-min[b-qq2oyosx4q],
    .col-value[b-qq2oyosx4q] {
        display: none;
    }
}

/* ============================================
   ADDITIONAL MOBILE IMPROVEMENTS
   ============================================ */
@media (max-width: 480px) {
    .inventory-page[b-qq2oyosx4q] {
        padding: 8px;
    }

    .inventory-title[b-qq2oyosx4q] {
        font-size: 18px;
    }

    .btn-add[b-qq2oyosx4q] {
        padding: 10px 14px;
        font-size: 13px;
    }

    .stat-card[b-qq2oyosx4q] {
        padding: 10px 12px;
    }

    .stat-value[b-qq2oyosx4q] {
        font-size: 18px;
    }

    .stat-label[b-qq2oyosx4q] {
        font-size: 10px;
    }

    .modal[b-qq2oyosx4q] {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        max-height: 100vh;
    }
}

/* ============================================
   PHONE (≤600px) — overflow-proofing per the
   mobile playbook. Scoped .razor.css, auto-scoped
   to this component; additive over the blocks above.
   ============================================ */
@media (max-width: 600px) {
    /* Page root: nothing should push the body horizontally. */
    .inventory-page[b-qq2oyosx4q] {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Header actions wrap onto multiple rows instead of overflowing. */
    .inventory-header[b-qq2oyosx4q] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .header-actions[b-qq2oyosx4q] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .header-actions .btn-toolbar[b-qq2oyosx4q],
    .header-actions .btn-add[b-qq2oyosx4q] {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* Toolbar (search + filter chips) keeps the chips reachable; the search
       box takes the full width, chips sit below and can wrap. */
    .inventory-toolbar[b-qq2oyosx4q] {
        gap: 8px;
    }

    .toolbar-search[b-qq2oyosx4q] {
        flex: 1 1 100%;
        max-width: 100%;
        min-width: 0;
    }

    .filter-chip[b-qq2oyosx4q] {
        flex: 0 0 auto;
    }

    /* Items table: rather than DROP columns (which hides data), make the
       whole table horizontally scrollable so every column is reachable on a
       phone. Overrides the base overflow:hidden + the ≤640 display:none. */
    .items-table-wrapper[b-qq2oyosx4q] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .items-table[b-qq2oyosx4q] {
        width: max-content;
        min-width: 100%;
    }

    .items-table .col-sku[b-qq2oyosx4q],
    .items-table .col-category[b-qq2oyosx4q],
    .items-table .col-min[b-qq2oyosx4q],
    .items-table .col-value[b-qq2oyosx4q] {
        display: table-cell;
    }
}

/* The items table is meant to be a scroll box on small screens (the ≤600 block
   above gives the wrapper overflow-x:auto and the table width:max-content).
   That only works if the column it sits in is allowed to shrink: .inventory-right
   is a GRID ITEM, and a grid item's default min-width:auto floors it at its
   content's min-content width — i.e. the table's max-content width. So the 1fr
   track grew to the table (~700px+) instead of the viewport, and the shell's
   overflow-x:clip then clipped the right-hand columns off with no way to scroll
   to them. min-width:0 lets the track shrink to the viewport so the wrapper
   actually scrolls. Same story ≤1024px, where the shared bare-<table> fallback
   makes the table its own scroll box. Inside a max-width query: desktop untouched. */
@media (max-width: 1024px) {
    .inventory-right[b-qq2oyosx4q],
    .items-table-wrapper[b-qq2oyosx4q] {
        min-width: 0;
    }
}

/* History modal's movements table has 7 columns and the modal goes
   full-width at ≤480px — let the modal body scroll horizontally and give
   the table a min-width so all columns stay reachable. */
@media (max-width: 640px) {
    .modal-content[b-qq2oyosx4q] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .movements-table[b-qq2oyosx4q] {
        min-width: 560px;
    }
}

/* ── Phone: stats grid + card list ─────────────────────────────────────────
   At the END of the file on purpose. A media query carries no extra specificity, so
   these must come after the base .stats-bar / .items-table-wrapper rules (and after
   the earlier mobile block that set the nowrap scroller) or they silently lose. */

/* Desktop keeps the table; the cards are markup-only until the phone breakpoint. */
.item-cards[b-qq2oyosx4q] {
    display: none;
}

@media (max-width: 640px) {
    /* Was `flex-wrap: nowrap; overflow-x: auto` — the three tiles needed more than the
       ~350px of client width, so "Valor total" (the headline number this page exists
       to show) was clipped off the right edge on first paint, behind a scrollbar with
       no affordance. Same 2-up grid the Catalog stats bar uses. */
    .stats-bar[b-qq2oyosx4q] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        flex-wrap: initial;
        overflow-x: visible;
        padding-bottom: 0;
    }

    .stats-bar .stat-card[b-qq2oyosx4q] {
        flex-shrink: 1;
        min-width: 0;
    }

    /* The value tile holds a currency figure, which is far longer than a count —
       give it the full width rather than letting it starve its own label. */
    .stats-bar .stat-card.stat-info[b-qq2oyosx4q] {
        grid-column: 1 / -1;
    }

    /* 9-column table -> cards. */
    .items-table-wrapper[b-qq2oyosx4q] {
        display: none;
    }

    .item-cards[b-qq2oyosx4q] {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .item-card[b-qq2oyosx4q] {
        background: var(--adm-bg-1e293b);
        border: 1px solid var(--adm-bdon-ffffff-334155);
        border-radius: 10px;
        padding: 12px 14px;
    }

    /* Carry the table's row states onto the card. */
    .item-card.low[b-qq2oyosx4q] {
        border-color: var(--adm-bd-f59e0b-a0_5);
    }

    .item-card.inactive[b-qq2oyosx4q] {
        opacity: 0.55;
    }

    .ic-head[b-qq2oyosx4q] {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
    }

    .ic-name[b-qq2oyosx4q] {
        font-weight: 600;
        color: var(--adm-fgon-ffffff-f1f5f9);
        font-size: 0.95rem;
        min-width: 0;
        overflow-wrap: break-word;
    }

    .ic-sub[b-qq2oyosx4q] {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 3px;
        font-size: 0.75rem;
        color: var(--adm-fgon-ffffff-94a3b8);
    }

    .ic-sku[b-qq2oyosx4q] {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        opacity: 0.8;
    }

    /* The four numbers, each with its column header as a label — that context is what
       the horizontal scroller was destroying. */
    .ic-facts[b-qq2oyosx4q] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 12px;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--adm-bdon-ffffff-334155);
    }

    .ic-fact[b-qq2oyosx4q] {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .ic-k[b-qq2oyosx4q] {
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--adm-fgon-ffffff-64748b);
    }

    .ic-v[b-qq2oyosx4q] {
        font-size: 0.9rem;
        color: var(--adm-fgon-ffffff-e2e8f0);
        overflow-wrap: break-word;
    }

    .ic-v.strong[b-qq2oyosx4q] {
        font-weight: 700;
        color: var(--adm-fgon-ffffff-f1f5f9);
    }

    .ic-v.low[b-qq2oyosx4q] {
        color: var(--adm-fgon-ffffff-fbbf24);
        font-weight: 600;
    }

    .ic-actions[b-qq2oyosx4q] {
        display: flex;
        gap: 8px;
        margin-top: 10px;
    }

    .ic-actions .action-btn[b-qq2oyosx4q] {
        flex: 1;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Shared icon sizing (all breakpoints — the stat tiles use these on desktop too). */
.ic[b-qq2oyosx4q] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    pointer-events: none;
}

.stat-icon .ic[b-qq2oyosx4q] {
    width: 20px;
    height: 20px;
}

.empty-icon .ic[b-qq2oyosx4q] {
    width: 44px;
    height: 44px;
    opacity: 0.45;
}

/* Filter chip: icon + label on one line. */
.filter-chip[b-qq2oyosx4q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.filter-chip .ic[b-qq2oyosx4q] {
    width: 15px;
    height: 15px;
    color: var(--adm-fgon-ffffff-fbbf24);
}
/* /Pages/Admin/InventoryAlerts.razor.rz.scp.css */
.alerts-container[b-sqmzkzko0e] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-sqmzkzko0e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.page-header h1[b-sqmzkzko0e] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary, var(--adm-fg-1a1a2e));
    margin: 0;
}

.header-actions[b-sqmzkzko0e] {
    display: flex;
    gap: 0.75rem;
}

.btn[b-sqmzkzko0e] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn.outline[b-sqmzkzko0e] {
    background: transparent;
    border: 1px solid var(--border-color, var(--adm-bdon-f1f5f9-e0e0e0));
    color: var(--text-primary, var(--adm-fgon-f1f5f9-1a1a2e));
}

.btn.outline:hover[b-sqmzkzko0e] {
    background: var(--bg-hover, #f5f5f5);
}

.btn.primary[b-sqmzkzko0e] {
    background: var(--primary, #4f46e5);
    border: none;
    color: white;
}

.btn.primary:hover[b-sqmzkzko0e] {
    background: var(--primary-dark, #4338ca);
}

/* Summary Grid */
.summary-grid[b-sqmzkzko0e] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.summary-card[b-sqmzkzko0e] {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.summary-card:hover[b-sqmzkzko0e] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--adm-sh-000000-a0_1);
}

.summary-card.critical[b-sqmzkzko0e] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-color: #ef4444;
}

.summary-card.warning[b-sqmzkzko0e] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-color: #f59e0b;
}

.summary-card.danger[b-sqmzkzko0e] {
    background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
    border-color: #ec4899;
}

.summary-card.alert[b-sqmzkzko0e] {
    background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%);
    border-color: #f97316;
}

.summary-card.info[b-sqmzkzko0e] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-color: #3b82f6;
}

.summary-value[b-sqmzkzko0e] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary, var(--adm-fg-1a1a2e));
}

.summary-label[b-sqmzkzko0e] {
    font-size: 0.75rem;
    color: var(--text-secondary, var(--adm-fg-64748b));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}

/* Tabs */
.tabs[b-sqmzkzko0e] {
    display: flex;
    gap: 0.25rem;
    background: var(--bg-secondary, #f1f5f9);
    padding: 0.25rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    overflow-x: auto;
}

.tab[b-sqmzkzko0e] {
    padding: 0.625rem 1rem;
    border: none;
    background: transparent;
    color: var(--text-secondary, var(--adm-fg-64748b));
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.tab:hover[b-sqmzkzko0e] {
    color: var(--text-primary, var(--adm-fg-1a1a2e));
}

.tab.active[b-sqmzkzko0e] {
    background: white;
    color: var(--primary, #4f46e5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Tab Content */
.tab-content[b-sqmzkzko0e] {
    background: white;
    border-radius: 12px;
    overflow: hidden;
}

.alerts-table-container[b-sqmzkzko0e] {
    overflow-x: auto;
}

.alerts-table[b-sqmzkzko0e] {
    width: 100%;
    border-collapse: collapse;
}

.alerts-table th[b-sqmzkzko0e] {
    text-align: left;
    padding: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #64748b);
    background: var(--bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.alerts-table td[b-sqmzkzko0e] {
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--border-color, var(--adm-bd-f1f5f9));
}

.alerts-table tbody tr:hover[b-sqmzkzko0e] {
    background: var(--bg-hover, #f8fafc);
}

.alerts-table .item-name[b-sqmzkzko0e] {
    font-weight: 500;
    color: var(--text-primary, var(--adm-fg-1a1a2e));
}

/* Row urgency classes */
.row-critical[b-sqmzkzko0e] {
    background: #fef2f2 !important;
}

.row-high[b-sqmzkzko0e] {
    background: #fffbeb !important;
}

.row-medium[b-sqmzkzko0e] {
    background: #fff7ed !important;
}

/* Stock values */
.stock-value.zero[b-sqmzkzko0e] {
    color: var(--adm-fg-dc2626);
    font-weight: 600;
}

.stock-value.low[b-sqmzkzko0e] {
    color: var(--adm-fg-f59e0b);
    font-weight: 500;
}

/* Urgency badges */
.urgency-badge[b-sqmzkzko0e] {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.urgency-badge.critical[b-sqmzkzko0e] {
    background: #fee2e2;
    color: #dc2626;
}

.urgency-badge.high[b-sqmzkzko0e] {
    background: #fef3c7;
    color: #d97706;
}

.urgency-badge.medium[b-sqmzkzko0e] {
    background: #ffedd5;
    color: #ea580c;
}

.urgency-badge.low[b-sqmzkzko0e] {
    background: #dcfce7;
    color: #16a34a;
}

/* Days badges */
.days-badge[b-sqmzkzko0e] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
}

.days-badge.expired[b-sqmzkzko0e] {
    background: #dc2626;
    color: white;
}

.days-badge.critical[b-sqmzkzko0e] {
    background: #fee2e2;
    color: #dc2626;
}

.days-badge.warning[b-sqmzkzko0e] {
    background: #fef3c7;
    color: #d97706;
}

/* Variance */
.variance.negative[b-sqmzkzko0e] {
    color: var(--adm-fg-dc2626);
}

.variance.positive[b-sqmzkzko0e] {
    color: var(--adm-fg-16a34a);
}

.value.negative[b-sqmzkzko0e] {
    color: var(--adm-fg-dc2626);
}

.suggested[b-sqmzkzko0e] {
    font-weight: 600;
    color: var(--primary, var(--adm-fg-4f46e5));
}

/* Confidence bar */
.confidence-bar[b-sqmzkzko0e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.confidence-bar .confidence-fill[b-sqmzkzko0e] {
    height: 6px;
    background: var(--primary, #4f46e5);
    border-radius: 3px;
    min-width: 40px;
    max-width: 60px;
}

.confidence-bar span[b-sqmzkzko0e] {
    font-size: 0.75rem;
    color: var(--text-secondary, var(--adm-fg-64748b));
}

/* Action buttons */
.actions[b-sqmzkzko0e] {
    display: flex;
    gap: 0.5rem;
}

.btn-icon[b-sqmzkzko0e] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--bg-secondary, #f1f5f9);
    border-radius: 8px;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.btn-icon:hover[b-sqmzkzko0e] {
    background: var(--primary, #4f46e5);
    color: white;
}

.btn-icon:active[b-sqmzkzko0e] {
    transform: scale(0.95);
}

/* Bulk actions */
.bulk-actions[b-sqmzkzko0e] {
    padding: 1rem;
    border-top: 1px solid var(--border-color, var(--adm-bd-e2e8f0));
    display: flex;
    justify-content: flex-end;
}

/* Empty state */
.empty-state[b-sqmzkzko0e] {
    padding: 3rem;
    text-align: center;
    color: var(--text-secondary, var(--adm-fg-64748b));
}

.empty-state svg[b-sqmzkzko0e] {
    opacity: 0.4;
    margin-bottom: 1rem;
}

.empty-state p[b-sqmzkzko0e] {
    margin: 0;
    font-size: 0.9375rem;
}

/* Loading state */
.loading-state[b-sqmzkzko0e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    color: var(--text-secondary, var(--adm-fg-64748b));
}

.spinner[b-sqmzkzko0e] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color, var(--adm-bd-e2e8f0));
    border-top-color: var(--primary, var(--adm-bd-4f46e5));
    border-radius: 50%;
    animation: spin-b-sqmzkzko0e 1s linear infinite;
}

@keyframes spin-b-sqmzkzko0e {
    to { transform: rotate(360deg); }
}

/* Dark mode overrides for admin layout */
.page-header h1[b-sqmzkzko0e] {
    color: var(--adm-fg-f1f5f9);
}

.btn.outline[b-sqmzkzko0e] {
    background: var(--adm-bg-334155);
    border-color: var(--adm-bdon-f1f5f9-475569);
    color: var(--adm-fgon-f1f5f9-f1f5f9);
}

.btn.outline:hover[b-sqmzkzko0e] {
    background: var(--adm-bghov-f1f5f9-475569);
}

.summary-card[b-sqmzkzko0e] {
    background: var(--adm-bg-1e293b);
}

.summary-card.critical[b-sqmzkzko0e] {
    background: linear-gradient(135deg, var(--adm-bggrad-7f1d1d) 0%, var(--adm-bggrad-991b1b) 100%);
}

.summary-card.warning[b-sqmzkzko0e] {
    background: linear-gradient(135deg, var(--adm-bggrad-78350f) 0%, var(--adm-bggrad-92400e) 100%);
}

.summary-card.danger[b-sqmzkzko0e] {
    background: linear-gradient(135deg, var(--adm-bggrad-831843) 0%, var(--adm-bggrad-9d174d) 100%);
}

.summary-card.alert[b-sqmzkzko0e] {
    background: linear-gradient(135deg, var(--adm-bggrad-7c2d12) 0%, var(--adm-bggrad-9a3412) 100%);
}

.summary-card.info[b-sqmzkzko0e] {
    background: linear-gradient(135deg, var(--adm-bggrad-1e3a8a) 0%, var(--adm-bggrad-1d4ed8) 100%);
}

.summary-value[b-sqmzkzko0e] {
    color: var(--adm-fg-f1f5f9);
}

.summary-label[b-sqmzkzko0e] {
    color: var(--adm-fg-94a3b8);
}

.tabs[b-sqmzkzko0e] {
    background: var(--adm-bg-1e293b);
}

.tab[b-sqmzkzko0e] {
    color: var(--adm-fg-94a3b8);
}

.tab:hover[b-sqmzkzko0e] {
    color: var(--adm-fg-f1f5f9);
}

.tab.active[b-sqmzkzko0e] {
    background: var(--adm-bg-334155);
    color: var(--adm-fgon-f1f5f9-3b82f6);
}

.tab-content[b-sqmzkzko0e] {
    background: var(--adm-bg-1e293b);
}

.alerts-table th[b-sqmzkzko0e] {
    color: var(--adm-fgon-f8fafc-94a3b8);
    background: var(--adm-bg-0f172a);
    border-bottom-color: var(--adm-bdon-f8fafc-334155);
}

.alerts-table td[b-sqmzkzko0e] {
    color: var(--adm-fg-e2e8f0);
    border-bottom-color: var(--adm-bd-334155);
}

.alerts-table tbody tr:hover[b-sqmzkzko0e] {
    background: var(--adm-bg-334155);
}

.alerts-table .item-name[b-sqmzkzko0e] {
    color: var(--adm-fg-f1f5f9);
}

.row-critical[b-sqmzkzko0e] {
    background: rgba(127, 29, 29, 0.3) !important;
}

.row-high[b-sqmzkzko0e] {
    background: rgba(120, 53, 15, 0.3) !important;
}

.row-medium[b-sqmzkzko0e] {
    background: rgba(124, 45, 18, 0.3) !important;
}

.btn-icon[b-sqmzkzko0e] {
    background: var(--adm-bg-334155);
    color: var(--adm-fgon-f1f5f9-94a3b8);
}

.btn-icon:hover[b-sqmzkzko0e] {
    background: #3b82f6;
    color: white;
}

.bulk-actions[b-sqmzkzko0e] {
    border-top-color: var(--adm-bd-334155);
}

.empty-state[b-sqmzkzko0e] {
    color: var(--adm-fg-94a3b8);
}

.loading-state[b-sqmzkzko0e] {
    color: var(--adm-fg-94a3b8);
}

.spinner[b-sqmzkzko0e] {
    border-color: var(--adm-bd-334155);
    border-top-color: var(--adm-bd-3b82f6);
}

.confidence-bar span[b-sqmzkzko0e] {
    color: var(--adm-fg-94a3b8);
}

/* Responsive */
@media (max-width: 768px) {
    .alerts-container[b-sqmzkzko0e] {
        padding: 1rem;
    }

    .page-header[b-sqmzkzko0e] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .summary-grid[b-sqmzkzko0e] {
        grid-template-columns: repeat(2, 1fr);
    }

    .tabs[b-sqmzkzko0e] {
        width: 100%;
    }

    .alerts-table th[b-sqmzkzko0e],
    .alerts-table td[b-sqmzkzko0e] {
        padding: 0.75rem 0.5rem;
    }
}

/* Phone (≤600px) — additive overflow fixes, never change desktop/base */
@media (max-width: 600px) {
    .alerts-container[b-sqmzkzko0e] {
        padding: 0.875rem;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Header title + button wrap */
    .page-header[b-sqmzkzko0e] {
        flex-wrap: wrap;
    }

    .header-actions[b-sqmzkzko0e] {
        width: 100%;
    }

    .header-actions .btn[b-sqmzkzko0e] {
        width: 100%;
        justify-content: center;
    }

    /* Stat grid → 2 columns, cells allowed to shrink */
    .summary-grid[b-sqmzkzko0e] {
        grid-template-columns: 1fr 1fr;
        gap: 0.625rem;
    }

    .summary-card[b-sqmzkzko0e] {
        padding: 0.875rem;
        min-width: 0;
    }

    .summary-value[b-sqmzkzko0e] {
        font-size: 1.5rem;
    }

    /* Tab chips: horizontal scroll, never shrink */
    .tabs[b-sqmzkzko0e] {
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .tabs .tab[b-sqmzkzko0e] {
        flex: 0 0 auto;
    }

    /* Tables: scroll horizontally, keep real column widths (don't crush) */
    .alerts-table-container[b-sqmzkzko0e] {
        -webkit-overflow-scrolling: touch;
    }

    .alerts-table[b-sqmzkzko0e] {
        width: max-content;
        min-width: 100%;
    }

    .alerts-table th[b-sqmzkzko0e],
    .alerts-table td[b-sqmzkzko0e] {
        white-space: nowrap;
    }

    /* Bulk-action button fills width */
    .bulk-actions[b-sqmzkzko0e] {
        justify-content: stretch;
    }

    .bulk-actions .btn[b-sqmzkzko0e] {
        width: 100%;
        justify-content: center;
    }
}
/* /Pages/Admin/KioskSettings.razor.rz.scp.css */
.kiosk-settings-page[b-lw05m4aq7p] {
    padding: 0 16px 40px;
    max-width: 800px;
    margin: 0 auto;
}

/* Header */
.page-header[b-lw05m4aq7p] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0 12px;
}

.page-header h1[b-lw05m4aq7p] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--adm-fg-f1f5f9);
}

.page-header .sub[b-lw05m4aq7p] {
    font-size: 0.85rem;
    color: var(--adm-fg-94a3b8);
    display: block;
    margin-top: 4px;
}

.open-kiosk[b-lw05m4aq7p] {
    flex-shrink: 0;
    margin-top: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--adm-fg-818cf8);
    text-decoration: none;
    white-space: nowrap;
}

.open-kiosk:hover[b-lw05m4aq7p] {
    color: var(--adm-fg-a5b4fc);
    text-decoration: underline;
}

/* Message banner */
.message-banner[b-lw05m4aq7p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 0.875rem;
}

.message-banner.success[b-lw05m4aq7p] {
    background: var(--adm-bg-22c55e-a0_15);
    color: var(--adm-fgon-d8f2e4-4ade80);
    border: 1px solid var(--adm-bd-22c55e-a0_3);
}

.message-banner.error[b-lw05m4aq7p] {
    background: var(--adm-bg-dc2626-a0_15);
    color: var(--adm-fgon-f4dadc-f87171);
    border: 1px solid var(--adm-bd-dc2626-a0_3);
}

.message-banner .dismiss[b-lw05m4aq7p] {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.7;
}

.message-banner .dismiss:hover[b-lw05m4aq7p] {
    opacity: 1;
}

/* Loading & empty states */
.loading-spinner[b-lw05m4aq7p] {
    text-align: center;
    padding: 60px 20px;
    color: var(--adm-fg-94a3b8);
}

.empty-state[b-lw05m4aq7p] {
    text-align: center;
    padding: 40px 20px;
    color: var(--adm-fg-94a3b8);
}

/* Settings cards */
.settings-card[b-lw05m4aq7p] {
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}

.card-header[b-lw05m4aq7p] {
    padding: 14px 20px;
    border-bottom: 1px solid var(--adm-bd-334155);
}

.card-header h2[b-lw05m4aq7p] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--adm-fg-e2e8f0);
}

.card-body[b-lw05m4aq7p] {
    padding: 16px 20px;
}

/* Toggle rows */
.toggle-row[b-lw05m4aq7p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    gap: 16px;
}

.toggle-row + .toggle-row[b-lw05m4aq7p] {
    border-top: 1px solid var(--adm-bd-334155);
}

.toggle-row strong[b-lw05m4aq7p] {
    color: var(--adm-fg-e2e8f0);
    font-size: 0.9rem;
}

.toggle-row .hint[b-lw05m4aq7p] {
    margin: 2px 0 0;
    font-size: 0.8rem;
    color: var(--adm-fg-94a3b8);
}

.toggle-row code[b-lw05m4aq7p] {
    background: var(--adm-bg-6366f1-a0_2);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--adm-fgon-dadcfa-a5b4fc);
}

.main-toggle[b-lw05m4aq7p] {
    background: var(--adm-bg-6366f1-a0_06);
    padding: 14px;
    margin: -16px -20px;
}

/* Toggle switch */
.switch[b-lw05m4aq7p] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.switch input[b-lw05m4aq7p] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-lw05m4aq7p] {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: var(--adm-track-ffffff-bg-475569);
    border-radius: 24px;
    transition: background-color 0.2s;
}

.slider[b-lw05m4aq7p]::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

input:checked + .slider[b-lw05m4aq7p] {
    background-color: #6366f1;
}

input:checked + .slider[b-lw05m4aq7p]::before {
    transform: translateX(20px);
}

/* "Próximamente" badge + disabled state for a not-yet-available setting */
.soon-badge[b-lw05m4aq7p] {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--adm-fgon-f8f2de-fbbf24);
    background: var(--adm-bg-fbbf24-a0_14);
    border: 1px solid var(--adm-bd-fbbf24-a0_35);
    border-radius: 999px;
    vertical-align: middle;
}

.toggle-row.is-soon strong[b-lw05m4aq7p] { opacity: 0.75; }
.switch input:disabled + .slider[b-lw05m4aq7p] { cursor: not-allowed; opacity: 0.45; }

/* A "Próximamente" toggle must read as OFF even though the stored flag defaults to
   true — otherwise the dimmed switch paints ON beside copy that says it does nothing. */
.toggle-row.is-soon input:checked + .slider[b-lw05m4aq7p] { background-color: var(--adm-bg-475569); }
.toggle-row.is-soon input:checked + .slider[b-lw05m4aq7p]::before { transform: none; }

/* Form rows */
.form-row[b-lw05m4aq7p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    gap: 12px;
}

.form-row + .form-row[b-lw05m4aq7p],
.form-row + .toggle-row[b-lw05m4aq7p],
.toggle-row + .form-row[b-lw05m4aq7p] {
    border-top: 1px solid var(--adm-bd-334155);
}

.form-row label[b-lw05m4aq7p] {
    color: var(--adm-fg-e2e8f0);
    font-size: 0.875rem;
    flex: 1;
}

.form-row label .hint[b-lw05m4aq7p] {
    display: block;
    font-size: 0.75rem;
    color: var(--adm-fg-94a3b8);
    margin-top: 2px;
}

.form-input[b-lw05m4aq7p] {
    background: var(--adm-bg-0f172a);
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--adm-fgon-f8fafc-e2e8f0);
    font-size: 0.875rem;
}

.form-input:focus[b-lw05m4aq7p] {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-6366f1);
}

.form-input.short[b-lw05m4aq7p] {
    width: 90px;
    text-align: center;
}

.form-input.wide[b-lw05m4aq7p] {
    width: 100%;
    max-width: 320px;
}

/* Buttons */
.btn-primary[b-lw05m4aq7p] {
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-primary:hover[b-lw05m4aq7p] {
    background: #4f46e5;
}

.btn-primary:disabled[b-lw05m4aq7p] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Save bar */
.save-bar[b-lw05m4aq7p] {
    position: sticky;
    bottom: 0;
    background: var(--adm-bg-1e293b);
    border-top: 1px solid var(--adm-bdon-ffffff-334155);
    padding: 12px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin: 16px -16px -40px;
}

/* Responsive */
@media (max-width: 600px) {
    .kiosk-settings-page[b-lw05m4aq7p] {
        padding: 0 10px 32px;
    }

    .page-header[b-lw05m4aq7p] {
        flex-direction: column;
        gap: 4px;
    }

    .form-row[b-lw05m4aq7p] {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-input.short[b-lw05m4aq7p],
    .form-input.wide[b-lw05m4aq7p] {
        width: 100%;
        max-width: none;
    }

    /* The save bar bleeds to the card edges with negative margins that cancel the
       page padding — but those are the DESKTOP values (16px / 40px), and this
       breakpoint drops the padding to 10px / 32px. Left as-is the sticky bar is
       12px wider than the viewport and its right edge gets clipped. Re-match. */
    .save-bar[b-lw05m4aq7p] {
        margin: 16px -10px -32px;
    }

    /* ...and a lone button pinned to the right corner is both a small target and
       exactly where the floating support button sits. Let it span the bar. */
    .save-bar .btn-primary[b-lw05m4aq7p] {
        flex: 1;
    }

    /* Rows whose control is a button, not a 44px switch: side-by-side, the button
       shrinks to its min-content ("Conectar / impresora" over two lines) and the
       label collapses next to it. Stack them and let the button go full width. */
    .toggle-row.action-row[b-lw05m4aq7p] {
        flex-direction: column;
        align-items: stretch;
    }

    /* The footer textarea takes its width from the default `cols` (~20 chars) —
       about half the card on a phone, for a 200-char message. */
    textarea.form-input[b-lw05m4aq7p] {
        width: 100%;
    }

    /* The error variant renders the raw server response body, which can be a
       single unbroken token that a flex child (min-width:auto) refuses to shrink. */
    .message-banner span[b-lw05m4aq7p] {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}
/* /Pages/Admin/Laboral.razor.rz.scp.css */
/* Laboral (Altas y bajas) — phone-only fixes.

   The page has no styles of its own: it borrows .suppliers-page / .suppliers-table
   from admin-pages.css (which carries no breakpoints) plus inline layout. The
   shared admin-mobile layer already stacks the header, sizes the inputs and turns
   the tables into scroll boxes; what it cannot know about is the two things below,
   both of which live in .suppliers-page.

   PURE CSS FILE -> single '@media' (an inline <style> in the .razor would need '@@'). */

@media (max-width: 640px) {
    /* .suppliers-page adds 24px of its own padding on top of the shell's 12–16px,
       eating ~13% of a 390px screen. The shell already insets the page — trim it. */
    .suppliers-page[b-txvb1n7cx8] {
        padding: 16px 0;
    }

    /* .suppliers-table forces white-space:nowrap on every cell. In the expanded
       request row — the only td[colspan] on the page — that keeps the detail fields
       (Convenio, Domicilio, Notas, gestor note) on a single unbreakable line, so
       reading a request means scrolling the table sideways. Let them wrap, and
       break the long unbroken values (IBAN, DNI/NIE, nº SS). */
    .suppliers-page .suppliers-table td[colspan][b-txvb1n7cx8] {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* The horario table is a data-entry grid (6 columns, 4 time inputs per row) and
       already scrolls; 12px of side padding per cell is ~130px of that scroll on a
       phone. Tighten the cells so less of the week is off-screen. */
    .suppliers-page .suppliers-table th[b-txvb1n7cx8],
    .suppliers-page .suppliers-table td[b-txvb1n7cx8] {
        padding: 8px;
    }
}
/* /Pages/Admin/Locations.razor.rz.scp.css */
.locations-container[b-7s1f74yfqf] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-7s1f74yfqf] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.page-header h1[b-7s1f74yfqf] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--adm-fg-f1f5f9);
    margin: 0;
}

.subtitle[b-7s1f74yfqf] {
    font-size: 0.875rem;
    color: var(--adm-fg-94a3b8);
    margin: 0.25rem 0 0 0;
}

/* Buttons */
.btn[b-7s1f74yfqf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    min-height: 44px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.btn:active:not(:disabled)[b-7s1f74yfqf] {
    transform: scale(0.98);
}

.btn.primary[b-7s1f74yfqf] {
    background: #3b82f6;
    border: none;
    color: white;
}

.btn.primary:hover:not(:disabled)[b-7s1f74yfqf] {
    background: #2563eb;
}

.btn.outline[b-7s1f74yfqf] {
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    color: var(--adm-fgon-ffffff-e2e8f0);
}

.btn.outline:hover[b-7s1f74yfqf] {
    background: var(--adm-bghov-ffffff-334155);
}

/* Locations Grid */
.locations-grid[b-7s1f74yfqf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

.location-card[b-7s1f74yfqf] {
    background: var(--adm-bg-1e293b);
    border-radius: 12px;
    padding: 1.25rem;
    position: relative;
    transition: box-shadow 0.2s;
    border: 1px solid var(--adm-bdon-ffffff-334155);
}

.location-card:hover[b-7s1f74yfqf] {
    box-shadow: 0 4px 12px var(--adm-sh-000000-a0_3);
}

.location-card.primary[b-7s1f74yfqf] {
    border: 2px solid var(--adm-bd-3b82f6);
}

.location-card.inactive[b-7s1f74yfqf] {
    opacity: 0.6;
}

.primary-badge[b-7s1f74yfqf], .inactive-badge[b-7s1f74yfqf] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.6875rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
}

.primary-badge[b-7s1f74yfqf] {
    background: var(--adm-bg-3b82f6-a0_2);
    color: var(--adm-fgon-d2e2fb-60a5fa);
}

.inactive-badge[b-7s1f74yfqf] {
    background: var(--adm-bg-334155);
    color: var(--adm-fgon-f1f5f9-94a3b8);
}

.card-header[b-7s1f74yfqf] {
    margin-bottom: 1rem;
    padding-right: 60px;
}

.card-header h3[b-7s1f74yfqf] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--adm-fg-f1f5f9);
    margin: 0;
}

.location-code[b-7s1f74yfqf] {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--adm-fgon-f1f5f9-94a3b8);
    background: var(--adm-bg-334155);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    margin-top: 0.25rem;
}

.card-details[b-7s1f74yfqf] {
    margin-bottom: 1rem;
}

.detail-row[b-7s1f74yfqf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--adm-fg-94a3b8);
    margin-bottom: 0.375rem;
}

.card-stats[b-7s1f74yfqf] {
    display: flex;
    gap: 1.5rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--adm-bd-334155);
    border-bottom: 1px solid var(--adm-bd-334155);
    margin-bottom: 0.75rem;
}

.stat[b-7s1f74yfqf] {
    text-align: center;
}

.stat-value[b-7s1f74yfqf] {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--adm-fg-f1f5f9);
}

.stat-label[b-7s1f74yfqf] {
    font-size: 0.6875rem;
    color: var(--adm-fg-64748b);
    text-transform: uppercase;
}

.card-footer[b-7s1f74yfqf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.transfer-status[b-7s1f74yfqf] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--adm-fg-94a3b8);
}

.card-actions[b-7s1f74yfqf] {
    display: flex;
    gap: 0.5rem;
}

.btn-icon[b-7s1f74yfqf] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--adm-bg-334155);
    border-radius: 8px;
    color: var(--adm-fgon-f1f5f9-94a3b8);
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.btn-icon:hover[b-7s1f74yfqf] {
    background: var(--adm-bghov-f1f5f9-475569);
    color: var(--adm-fgon-e1e6eb-f1f5f9);
}

.btn-icon:active[b-7s1f74yfqf] {
    transform: scale(0.95);
}

/* Quick Actions */
.quick-actions[b-7s1f74yfqf] {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.action-btn[b-7s1f74yfqf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    min-height: 48px;
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--adm-fgon-ffffff-e2e8f0);
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.action-btn:hover[b-7s1f74yfqf] {
    background: var(--adm-bghov-ffffff-334155);
    border-color: var(--adm-bdon-eaf0f6-3b82f6);
    color: var(--adm-fgon-eaf0f6-3b82f6);
}

.action-btn:active[b-7s1f74yfqf] {
    transform: scale(0.98);
}

/* Empty State */
.empty-state[b-7s1f74yfqf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: var(--adm-bg-1e293b);
    border-radius: 12px;
}

.empty-state svg[b-7s1f74yfqf] {
    color: var(--adm-fgon-ffffff-475569);
    margin-bottom: 1rem;
}

.empty-state h2[b-7s1f74yfqf] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--adm-fgon-ffffff-f1f5f9);
    margin: 0 0 0.5rem 0;
}

.empty-state p[b-7s1f74yfqf] {
    color: var(--adm-fgon-ffffff-94a3b8);
    margin: 0 0 1.5rem 0;
    max-width: 400px;
}

/* Loading State */
.loading-state[b-7s1f74yfqf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
}

.spinner[b-7s1f74yfqf] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--adm-bd-334155);
    border-top-color: var(--adm-bd-3b82f6);
    border-radius: 50%;
    animation: spin-b-7s1f74yfqf 1s linear infinite;
}

.spinner-small[b-7s1f74yfqf] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--adm-bd-ffffff);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-7s1f74yfqf 1s linear infinite;
}

@keyframes spin-b-7s1f74yfqf {
    to { transform: rotate(360deg); }
}

/* Modal */
.modal-overlay[b-7s1f74yfqf] {
    position: fixed;
    inset: 0;
    background: var(--adm-scrim-000000-a0_6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.modal[b-7s1f74yfqf] {
    background: var(--adm-bg-1e293b);
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header[b-7s1f74yfqf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    border-bottom: 1px solid var(--adm-bd-334155);
}

.modal-header h2[b-7s1f74yfqf] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: var(--adm-fg-f1f5f9);
}

.close-btn[b-7s1f74yfqf] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--adm-bg-334155);
    border-radius: 8px;
    color: var(--adm-fgon-f1f5f9-94a3b8);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.close-btn:hover[b-7s1f74yfqf] {
    background: var(--adm-bghov-f1f5f9-475569);
    color: var(--adm-fgon-e1e6eb-f1f5f9);
}

.close-btn:active[b-7s1f74yfqf] {
    transform: scale(0.95);
}

.modal-body[b-7s1f74yfqf] {
    padding: 1.25rem;
}

.form-group[b-7s1f74yfqf] {
    margin-bottom: 1rem;
}

.form-group label[b-7s1f74yfqf] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--adm-fg-e2e8f0);
    margin-bottom: 0.5rem;
}

.form-input[b-7s1f74yfqf] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    font-size: 0.9375rem;
    background: var(--adm-bg-0f172a);
    color: var(--adm-fgon-f8fafc-f1f5f9);
}

.form-input:focus[b-7s1f74yfqf] {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-3b82f6);
}

.form-row[b-7s1f74yfqf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-row.checkboxes[b-7s1f74yfqf] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.checkbox-label[b-7s1f74yfqf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--adm-fg-e2e8f0);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-7s1f74yfqf] {
    width: 18px;
    height: 18px;
    accent-color: var(--adm-fg-3b82f6);
}

.modal-footer[b-7s1f74yfqf] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem;
    border-top: 1px solid var(--adm-bd-334155);
}

/* Responsive */
@media (max-width: 768px) {
    .locations-container[b-7s1f74yfqf] {
        padding: 1rem;
    }

    .page-header[b-7s1f74yfqf] {
        flex-direction: column;
        align-items: stretch;
    }

    .locations-grid[b-7s1f74yfqf] {
        grid-template-columns: 1fr;
    }

    .form-row[b-7s1f74yfqf] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Admin/Login.razor.rz.scp.css */
/* Scoped dark-theme overrides for the admin login.
   Kept here (rather than only in the inline <style> in Login.razor) so Blazor
   CSS isolation's [b-xxxxx] attribute gives these rules higher specificity
   than any leftover or third-party selectors that matched the same classes. */

.login-page[b-f5gdjon14s] {
    background: var(--adm-bg-0f172a);
}

.login-card[b-f5gdjon14s] {
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    color: var(--adm-fgon-ffffff-e2e8f0);
}

.login-header h2[b-f5gdjon14s] {
    color: var(--adm-fg-f8fafc);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.restaurant-name[b-f5gdjon14s] {
    color: var(--adm-fg-93c5fd);
}

.form-group label[b-f5gdjon14s] {
    color: var(--adm-fg-e2e8f0);
    font-size: 0.875rem;
    font-weight: 600;
}

.form-group input[b-f5gdjon14s] {
    background: var(--adm-bg-0f172a);
    color: var(--adm-fgon-f8fafc-e2e8f0);
    border: 1.5px solid var(--adm-bdon-f8fafc-2a3050);
}

.form-group input[b-f5gdjon14s]::placeholder {
    color: var(--adm-fgon-f8fafc-64748b);
}
/* /Pages/Admin/Loyalty.razor.rz.scp.css */
/* Base classes for isolated CSS */
.btn[b-j4e4420dh5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    min-height: 44px;
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    background: var(--adm-bg-1e293b);
    color: var(--adm-fgon-ffffff-e2e8f0);
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.btn:hover[b-j4e4420dh5] { background: var(--adm-bghov-ffffff-334155); }
.btn:active[b-j4e4420dh5] { transform: scale(0.97); }
.btn.primary[b-j4e4420dh5] { background: #2563eb; color: #fff; border-color: #1e4fcb; }
.btn.primary:hover[b-j4e4420dh5] { background: #1d4ed8; }
.btn.primary:active[b-j4e4420dh5] { background: #1e40af; }
.btn.primary:disabled[b-j4e4420dh5] { background: var(--adm-bg-475569); color: var(--adm-fgon-f9fafb-94a3b8); cursor: not-allowed; }
.btn.secondary[b-j4e4420dh5] { background: var(--adm-bg-334155); color: var(--adm-fgon-f1f5f9-e2e8f0); }
.btn.secondary:hover[b-j4e4420dh5] { background: var(--adm-bghov-f1f5f9-475569); }
.btn.secondary:active[b-j4e4420dh5] { background: var(--adm-bg-556677); }

.form-input[b-j4e4420dh5], .form-select[b-j4e4420dh5] {
    width: 100%;
    padding: 10px 12px;
    min-height: 44px;
    background: var(--adm-bg-0f172a);
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    color: var(--adm-fgon-f8fafc-e2e8f0);
    font-size: 0.85rem;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.form-input:focus[b-j4e4420dh5], .form-select:focus[b-j4e4420dh5] {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-3b82f6);
    box-shadow: 0 0 0 2px var(--adm-sh-3b82f6-a0_2);
}

.form-input[b-j4e4420dh5]::placeholder { color: var(--adm-fgon-f8fafc-475569); }
textarea.form-input[b-j4e4420dh5] { resize: vertical; min-height: 60px; }

.spinner[b-j4e4420dh5] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--adm-bd-ffffff-a0_2);
    border-top-color: var(--adm-bd-3b82f6);
    border-radius: 50%;
    animation: spin-b-j4e4420dh5 0.7s linear infinite;
    margin: 0 auto;
}

.loyalty-page[b-j4e4420dh5] {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-j4e4420dh5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.header-left h1[b-j4e4420dh5] {
    margin: 0;
    font-size: 1.5rem;
    color: var(--adm-fg-f1f5f9);
}

.message-banner[b-j4e4420dh5] {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.message-banner.error[b-j4e4420dh5] { background: var(--adm-bg-7f1d1d); color: var(--adm-fgon-fee2e2-fca5a5); }
.message-banner.success[b-j4e4420dh5] { background: var(--adm-bg-14532d); color: var(--adm-fgon-def7e8-86efac); }
.message-banner .dismiss[b-j4e4420dh5] { background: none; border: none; color: inherit; font-size: 1.2rem; cursor: pointer; min-width: 44px; min-height: 44px; }

/* Tabs */
.tabs[b-j4e4420dh5] {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--adm-bd-1e293b);
}

.tab[b-j4e4420dh5] {
    padding: 12px 20px;
    min-height: 44px;
    background: none;
    border: none;
    color: var(--adm-fg-cbd5e1);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    -webkit-tap-highlight-color: transparent;
}

.tab:hover[b-j4e4420dh5] { color: var(--adm-fg-e2e8f0); }
.tab:active[b-j4e4420dh5] { color: var(--adm-fgon-ffffff-e2e8f0); background: var(--adm-bg-1e293b); }
.tab.active[b-j4e4420dh5] { color: var(--adm-fg-3b82f6); border-bottom-color: var(--adm-bd-3b82f6); }

.tab-badge[b-j4e4420dh5] {
    font-size: 0.7rem;
    background: var(--adm-bg-334155);
    color: var(--adm-fgon-f1f5f9-94a3b8);
    padding: 1px 6px;
    border-radius: 8px;
}

/* Config */
.config-section[b-j4e4420dh5] { max-width: 700px; }

.config-card[b-j4e4420dh5] {
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 12px;
    padding: 24px;
}

.config-header[b-j4e4420dh5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.config-header h2[b-j4e4420dh5] { margin: 0; font-size: 1.2rem; color: var(--adm-fg-f1f5f9); }

.config-grid[b-j4e4420dh5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.config-grid.three[b-j4e4420dh5] { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

.config-actions[b-j4e4420dh5] { margin-top: 20px; }

h3[b-j4e4420dh5] { color: var(--adm-fg-f1f5f9); font-size: 1rem; margin: 16px 0 8px; }

.help-text[b-j4e4420dh5] { display: block; font-size: 0.7rem; color: var(--adm-fg-64748b); margin-top: 2px; }

/* Toggle */
.toggle-switch[b-j4e4420dh5] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.toggle-switch.inline[b-j4e4420dh5] { margin-top: 8px; }

.toggle-switch input[b-j4e4420dh5] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.toggle-switch input:focus-visible + .toggle-slider[b-j4e4420dh5] { outline: 2px solid var(--adm-bd-3b82f6); outline-offset: 2px; }

.toggle-slider[b-j4e4420dh5] {
    flex-shrink: 0;
    width: 40px;
    height: 22px;
    background: var(--adm-track-ffffff-bg-475569);
    border-radius: 11px;
    position: relative;
    transition: all 0.2s;
}

.toggle-slider[b-j4e4420dh5]::after {
    content: '';
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: all 0.2s;
}

.toggle-switch input:checked + .toggle-slider[b-j4e4420dh5] {
    background: #22c55e;
}

.toggle-switch input:checked + .toggle-slider[b-j4e4420dh5]::after {
    left: 20px;
}

.toggle-label[b-j4e4420dh5] { font-size: 0.85rem; color: var(--adm-fg-94a3b8); }

/* Section wrappers */
.accounts-section[b-j4e4420dh5] {}
.rewards-section[b-j4e4420dh5] {}

/* Detail items in modals */
.detail-item[b-j4e4420dh5] { }

/* Accounts Table */
.filter-bar[b-j4e4420dh5] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.search-input[b-j4e4420dh5] { max-width: 280px; }

.accounts-table-wrapper[b-j4e4420dh5] {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--adm-bd-1e293b);
}

.accounts-table[b-j4e4420dh5] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.accounts-table thead[b-j4e4420dh5] { background: var(--adm-bg-0f172a); }

.accounts-table th[b-j4e4420dh5] {
    padding: 10px 12px;
    text-align: left;
    color: var(--adm-fg-94a3b8);
    font-weight: 600;
    border-bottom: 2px solid var(--adm-bd-1e293b);
    white-space: nowrap;
}

.accounts-table td[b-j4e4420dh5] {
    padding: 14px 12px;
    border-bottom: 1px solid var(--adm-bd-1e293b);
    color: var(--adm-fg-cbd5e1);
}

.accounts-table tbody tr.clickable[b-j4e4420dh5] {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.accounts-table tbody tr:hover[b-j4e4420dh5],
.accounts-table tbody tr:active[b-j4e4420dh5] { background: var(--adm-bg-1e293b40); }
.accounts-table tbody tr.clickable:focus-visible[b-j4e4420dh5] { outline: 2px solid var(--adm-bd-3b82f6); outline-offset: -2px; }

.name-cell[b-j4e4420dh5] { font-weight: 500; color: var(--adm-fg-f1f5f9); }
.points-cell[b-j4e4420dh5] { font-weight: 600; color: var(--adm-fg-22c55e); }
.date-cell[b-j4e4420dh5] { color: var(--adm-fg-64748b); }

/* Tier badges */
.tier-badge[b-j4e4420dh5] {
    font-size: 0.75rem;
    padding: 2px 10px;
    border-radius: 10px;
    font-weight: 600;
}

.tier-badge.large[b-j4e4420dh5] { font-size: 1rem; padding: 4px 16px; }

.tier-badge.tier-0[b-j4e4420dh5] { background: var(--adm-bg-1e293b); color: var(--adm-fgon-ffffff-94a3b8); }
.tier-badge.tier-1[b-j4e4420dh5] { background: var(--adm-bg-374151); color: var(--adm-fgon-f3f4f6-d1d5db); }
.tier-badge.tier-2[b-j4e4420dh5] { background: var(--adm-bg-451a03); color: var(--adm-fgon-fde5d8-fcd34d); }
.tier-badge.tier-3[b-j4e4420dh5] { background: var(--adm-bg-312e81); color: var(--adm-fgon-eef2ff-c4b5fd); }

/* Rewards */
.rewards-header[b-j4e4420dh5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.rewards-header h2[b-j4e4420dh5] { margin: 0; font-size: 1.2rem; color: var(--adm-fg-f1f5f9); }

.rewards-grid[b-j4e4420dh5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.reward-card[b-j4e4420dh5] {
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 12px;
    padding: 16px;
    position: relative;
}

.reward-card.inactive[b-j4e4420dh5] { opacity: 0.5; }

.reward-name[b-j4e4420dh5] { font-size: 1rem; font-weight: 600; color: var(--adm-fg-f1f5f9); margin-bottom: 4px; }
.reward-desc[b-j4e4420dh5] { font-size: 0.8rem; color: var(--adm-fg-94a3b8); margin-bottom: 8px; }
.reward-cost[b-j4e4420dh5] { font-size: 1.2rem; font-weight: 700; color: var(--adm-fg-3b82f6); margin-bottom: 4px; }
.reward-value[b-j4e4420dh5] { font-size: 0.85rem; color: var(--adm-fg-22c55e); margin-bottom: 8px; }

.reward-actions[b-j4e4420dh5] {
    display: flex;
    gap: 4px;
}

.btn-icon[b-j4e4420dh5] {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    padding: 8px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover[b-j4e4420dh5] { background: var(--adm-bg-334155); }
.btn-icon:active[b-j4e4420dh5] { background: var(--adm-bg-475569); }
.btn-icon.danger:hover[b-j4e4420dh5] { background: var(--adm-bg-7f1d1d); }
.btn-icon.danger:active[b-j4e4420dh5] { background: var(--adm-bg-991b1b); }

/* Stats */
.stats-grid[b-j4e4420dh5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card[b-j4e4420dh5] {
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.stat-card.highlight[b-j4e4420dh5] { border-color: var(--adm-bdon-eff6ff-3b82f6); background: var(--adm-bg-1e3a5f); }

.stat-value[b-j4e4420dh5] {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--adm-fg-f1f5f9);
    margin-bottom: 4px;
}

.stat-label[b-j4e4420dh5] {
    font-size: 0.8rem;
    color: var(--adm-fg-64748b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Tier Distribution */
.tier-distribution[b-j4e4420dh5] {
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 12px;
    padding: 20px;
}

.tier-bars[b-j4e4420dh5] { display: flex; flex-direction: column; gap: 10px; }

.tier-bar-row[b-j4e4420dh5] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tier-name[b-j4e4420dh5] { min-width: 80px; font-size: 0.85rem; color: var(--adm-fg-94a3b8); }

.tier-bar-track[b-j4e4420dh5] {
    flex: 1;
    height: 24px;
    background: var(--adm-bg-0f172a);
    border-radius: 4px;
    overflow: hidden;
}

.tier-bar-fill[b-j4e4420dh5] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s;
}

.tier-bar-fill.regular[b-j4e4420dh5] { background: var(--adm-bg-475569); }
.tier-bar-fill.silver[b-j4e4420dh5] { background: #9ca3af; }
.tier-bar-fill.gold[b-j4e4420dh5] { background: #f59e0b; }
.tier-bar-fill.platinum[b-j4e4420dh5] { background: #8b5cf6; }

.tier-count[b-j4e4420dh5] { min-width: 30px; font-size: 0.85rem; color: var(--adm-fg-f1f5f9); font-weight: 600; }

/* Account Detail */
.account-detail-header[b-j4e4420dh5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 16px;
    background: var(--adm-bg-0f172a);
    border-radius: 8px;
}

.account-points[b-j4e4420dh5] { text-align: center; }
.points-value[b-j4e4420dh5] { font-size: 2.5rem; font-weight: 700; color: var(--adm-fg-22c55e); display: block; }
.points-label[b-j4e4420dh5] { font-size: 0.8rem; color: var(--adm-fg-64748b); text-transform: uppercase; }

.detail-grid[b-j4e4420dh5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.detail-label[b-j4e4420dh5] { display: block; font-size: 0.7rem; color: var(--adm-fg-64748b); text-transform: uppercase; letter-spacing: 0.5px; }
.detail-value[b-j4e4420dh5] { color: var(--adm-fg-e2e8f0); font-size: 0.95rem; }

.adjust-section[b-j4e4420dh5] {
    margin: 16px 0;
    padding: 12px;
    background: var(--adm-bg-0f172a);
    border-radius: 8px;
}

.adjust-section h3[b-j4e4420dh5] { margin: 0 0 8px; }

.message-banner.inline[b-j4e4420dh5] {
    font-size: 0.85rem;
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: 6px;
}

.adjust-form[b-j4e4420dh5] { display: flex; gap: 8px; }

/* What the points give back, in money */
.points-worth[b-j4e4420dh5] { color: var(--adm-fg-e2e8f0); font-size: 0.85rem; margin: 0 0 8px; }

/* Regular customers ("clientes habituales") */
.regulars-intro[b-j4e4420dh5] { font-size: 0.8rem; margin: 0 0 8px; }
.regulars-summary[b-j4e4420dh5] { color: var(--adm-fg-e2e8f0); font-size: 0.85rem; margin: 0 0 8px; }

.regular-section[b-j4e4420dh5] {
    margin: 16px 0;
    padding: 12px;
    background: var(--adm-bg-0f172a);
    border-radius: 8px;
}

.regular-section h3[b-j4e4420dh5] { margin: 0 0 8px; }
.regular-row[b-j4e4420dh5] { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.regular-status[b-j4e4420dh5] { color: var(--adm-fg-e2e8f0); font-weight: 600; }
.regular-cell[b-j4e4420dh5] { white-space: nowrap; }

/* The club's printable QR */
.club-card[b-j4e4420dh5] { margin-top: 16px; }
.club-card h2[b-j4e4420dh5] { margin: 0 0 8px; font-size: 1.2rem; color: var(--adm-fg-f1f5f9); }
.club-inactive[b-j4e4420dh5] { color: var(--adm-fgon-fee2e2-fca5a5); font-size: 0.85rem; }

.club-qr[b-j4e4420dh5] {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 12px;
}

.club-qr img[b-j4e4420dh5] {
    background: #fff;   /* a QR needs its light quiet zone in both themes */
    padding: 8px;
    border-radius: 8px;
}

.club-links[b-j4e4420dh5] { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.club-url[b-j4e4420dh5] { color: var(--adm-fg-3b82f6); font-size: 0.85rem; overflow-wrap: anywhere; }

/* Transactions */
.txn-list[b-j4e4420dh5] { display: flex; flex-direction: column; gap: 4px; }

.txn-row[b-j4e4420dh5] {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 8px 12px;
    background: var(--adm-bg-0f172a);
    border-radius: 6px;
    font-size: 0.85rem;
}

.txn-date[b-j4e4420dh5] { color: var(--adm-fg-64748b); min-width: 80px; }
.txn-type[b-j4e4420dh5] { color: var(--adm-fg-94a3b8); min-width: 70px; }
.txn-desc[b-j4e4420dh5] { color: var(--adm-fg-cbd5e1); flex: 1; }
.txn-amount[b-j4e4420dh5] { font-weight: 600; min-width: 80px; text-align: right; }
.txn-amount.positive[b-j4e4420dh5] { color: var(--adm-fg-22c55e); }
.txn-amount.negative[b-j4e4420dh5] { color: var(--adm-fg-ef4444); }
.txn-balance[b-j4e4420dh5] { color: var(--adm-fg-64748b); min-width: 80px; text-align: right; }

/* Modals */
.modal-overlay[b-j4e4420dh5] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--adm-scrim-000000-a0_6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-panel[b-j4e4420dh5] {
    background: var(--adm-bg-1e293b);
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--adm-bdon-ffffff-334155);
}

.modal-panel.wide[b-j4e4420dh5] { max-width: 700px; }

.modal-header[b-j4e4420dh5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--adm-bd-334155);
}

.modal-header h2[b-j4e4420dh5] { margin: 0; font-size: 1.1rem; color: var(--adm-fg-f1f5f9); }

.modal-close[b-j4e4420dh5] {
    background: none;
    border: none;
    color: var(--adm-fg-94a3b8);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.modal-close:hover[b-j4e4420dh5] { background: var(--adm-bg-334155); }
.modal-close:active[b-j4e4420dh5] { background: var(--adm-bg-475569); }

.modal-body[b-j4e4420dh5] { padding: 20px; }
.modal-footer[b-j4e4420dh5] { padding: 16px 20px; border-top: 1px solid var(--adm-bd-334155); display: flex; gap: 8px; justify-content: flex-end; }

.form-group[b-j4e4420dh5] { margin-bottom: 14px; }
.form-group label:not(.toggle-switch)[b-j4e4420dh5] { display: block; font-size: 0.8rem; color: var(--adm-fg-94a3b8); margin-bottom: 4px; }
.form-row[b-j4e4420dh5] { display: flex; gap: 12px; }
.form-row .form-group[b-j4e4420dh5] { flex: 1; }

/* Loading */
.loading-state[b-j4e4420dh5] { text-align: center; padding: 60px; color: var(--adm-fg-64748b); }
.empty-state[b-j4e4420dh5] { text-align: center; padding: 40px; color: var(--adm-fg-64748b); }

.spinner-sm[b-j4e4420dh5] {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid var(--adm-bd-ffffff-a0_3);
    border-top-color: var(--adm-bd-ffffff);
    border-radius: 50%;
    animation: spin-b-j4e4420dh5 0.6s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
}

@keyframes spin-b-j4e4420dh5 { to { transform: rotate(360deg); } }

@media (max-width: 768px) {
    .loyalty-page[b-j4e4420dh5] { padding: 12px; }
    .config-grid[b-j4e4420dh5], .config-grid.three[b-j4e4420dh5] { grid-template-columns: 1fr; }
    .filter-bar[b-j4e4420dh5] { flex-direction: column; align-items: stretch; }
    .search-input[b-j4e4420dh5] { max-width: none; }
    .form-row[b-j4e4420dh5] { flex-direction: column; }
    .txn-row[b-j4e4420dh5] { flex-wrap: wrap; }
    .adjust-form[b-j4e4420dh5] { flex-direction: column; }
}

/* Phone (~390px) overflow fixes: keep inputs inside the viewport and let the
   tab row scroll horizontally instead of running off the right edge. */
@media (max-width: 600px) {
    /* Tab row: wrapping is owned centrally by admin-mobile.css (.admin-content .tabs).
       A nowrap + overflow-x:auto strip here sliced "Recompensas" in half with no
       scroll affordance; only 4 tabs, so they wrap onto one extra row instead. */
    .tabs[b-j4e4420dh5] {
        display: flex;
        max-width: 100%;
    }
    .tab[b-j4e4420dh5] {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 12px 14px;
    }

    /* Config card / grid must not force a min-width wider than the phone. */
    .config-section[b-j4e4420dh5] { max-width: 100%; }
    .config-card[b-j4e4420dh5] { padding: 16px; }
    .config-grid[b-j4e4420dh5],
    .config-grid.three[b-j4e4420dh5] {
        grid-template-columns: 1fr;
    }
    /* Grid items default to min-width:auto, which lets number inputs push the
       track wider than the screen — clamp the item and the field itself. */
    .config-grid .form-group[b-j4e4420dh5],
    .config-grid.three .form-group[b-j4e4420dh5] { min-width: 0; }

    .form-input[b-j4e4420dh5],
    .form-select[b-j4e4420dh5] {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Bespoke title+action rows (not the shared .page-header/.card-header the
       global layer knows about): let them wrap/stack instead of squeezing the
       toggle and the "Nueva Recompensa" button off the right edge. */
    .config-header[b-j4e4420dh5] {
        flex-wrap: wrap;
        gap: 12px;
    }

    .rewards-header[b-j4e4420dh5] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    /* Give the modals back the 16px the overlay was eating on each side. */
    .modal-overlay[b-j4e4420dh5] { padding: 12px; }

    /* Account detail: an email/long value in a 160px grid cell has min-width:auto,
       so it stretches its track and pushes the modal body sideways. */
    .detail-item[b-j4e4420dh5] { min-width: 0; }
    .detail-value[b-j4e4420dh5] { overflow-wrap: anywhere; }

    /* Same for a free-text movement description inside the wrapped txn row. */
    .txn-desc[b-j4e4420dh5] {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

/* ---- Configuración: the guided setup ---------------------------------------------------------
   Status, then what to do next, then the offers, then how customers join. Tints are rgba so they
   read on both admin themes; every surface and text colour is a theme token. */
.config-section[b-j4e4420dh5] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1100px;
}

.config-section h2[b-j4e4420dh5] { margin: 0; font-size: 1.15rem; color: var(--adm-fg-f1f5f9); letter-spacing: -0.01em; }

/* Status */
.club-hero[b-j4e4420dh5] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px 22px 28px;
    border-radius: 14px;
    border: 1px solid var(--adm-bdon-ffffff-334155);
    background: var(--adm-bg-1e293b);
}

.club-hero[b-j4e4420dh5]::before {   /* the club's state, down the left edge */
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--adm-bg-475569);
}

.club-hero.is-on[b-j4e4420dh5] { background: linear-gradient(120deg, rgba(34, 197, 94, 0.10), rgba(34, 197, 94, 0) 55%), var(--adm-bg-1e293b); }
.club-hero.is-on[b-j4e4420dh5]::before { background: #22c55e; }

.hero-main[b-j4e4420dh5] { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.club-hero h2[b-j4e4420dh5] { font-size: 1.35rem; }

.hero-chip[b-j4e4420dh5] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--adm-bg-334155);
    color: var(--adm-fgon-f1f5f9-94a3b8);
}

.hero-chip[b-j4e4420dh5]::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.club-hero.is-on .hero-chip[b-j4e4420dh5] { background: rgba(34, 197, 94, 0.15); color: var(--adm-fg-22c55e); }

.hero-facts[b-j4e4420dh5] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
    color: var(--adm-fg-94a3b8);
}

.hero-facts li + li[b-j4e4420dh5]::before { content: '·'; margin: 0 8px; color: var(--adm-fg-64748b); }
.hero-switch[b-j4e4420dh5] { flex-shrink: 0; }
.hero-switch .toggle-label[b-j4e4420dh5] { font-weight: 600; color: var(--adm-fg-e2e8f0); }

/* The guide */
.setup-card[b-j4e4420dh5] {
    padding: 22px 24px;
    border-radius: 14px;
    border: 1px solid var(--adm-bdon-ffffff-334155);
    background: var(--adm-bg-1e293b);
}

.setup-head[b-j4e4420dh5] { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.setup-progress[b-j4e4420dh5] { font-size: 0.8rem; font-weight: 600; color: var(--adm-fg-94a3b8); white-space: nowrap; }

.setup-bar[b-j4e4420dh5] {
    height: 6px;
    margin: 12px 0 10px;
    border-radius: 999px;
    background: var(--adm-bg-334155);
    overflow: hidden;
}

.setup-bar span[b-j4e4420dh5] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #16a34a, #4ade80);
    transition: width 0.4s ease;
}

.setup-steps[b-j4e4420dh5] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.setup-step[b-j4e4420dh5] {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
}

.setup-step.next[b-j4e4420dh5] { background: rgba(59, 130, 246, 0.08); border-color: rgba(59, 130, 246, 0.35); }

.step-mark[b-j4e4420dh5] {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 700;
    border: 2px solid var(--adm-bd-334155);
    color: var(--adm-fg-94a3b8);
}

.setup-step.next .step-mark[b-j4e4420dh5] { border-color: var(--adm-bd-3b82f6); color: var(--adm-fg-3b82f6); }
.setup-step.done .step-mark[b-j4e4420dh5] { background: #22c55e; border-color: #22c55e; color: #fff; }

.step-title[b-j4e4420dh5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--adm-fg-f1f5f9);
}

.setup-step.done .step-title[b-j4e4420dh5] { color: var(--adm-fg-94a3b8); }

.step-next[b-j4e4420dh5] {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: #2563eb;
    color: #fff;
}

.step-help[b-j4e4420dh5] { margin: 4px 0 0; font-size: 0.82rem; line-height: 1.45; color: var(--adm-fg-94a3b8); }
.step-actions[b-j4e4420dh5] { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.join-copied[b-j4e4420dh5] { margin: 6px 0 0; font-size: 0.8rem; color: var(--adm-fg-22c55e); overflow-wrap: anywhere; }

/* What a member gets */
.options-section[b-j4e4420dh5] { display: flex; flex-direction: column; gap: 12px; outline: none; scroll-margin-top: 80px; }
.section-head p[b-j4e4420dh5] { margin: 4px 0 0; font-size: 0.85rem; color: var(--adm-fg-94a3b8); }

.option-grid[b-j4e4420dh5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    align-items: start;
}

.option-card[b-j4e4420dh5] {
    padding: 20px;
    border-radius: 14px;
    border: 1px solid var(--adm-bdon-ffffff-334155);
    background: var(--adm-bg-1e293b);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.option-card.on[b-j4e4420dh5] { border-color: rgba(34, 197, 94, 0.55); box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.25); }

.option-head[b-j4e4420dh5] { display: flex; align-items: flex-start; gap: 12px; }

.option-icon[b-j4e4420dh5] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 1.1rem;
    background: rgba(59, 130, 246, 0.12);
    color: var(--adm-fg-3b82f6);
}

.regulars-card .option-icon[b-j4e4420dh5] { background: rgba(245, 158, 11, 0.14); color: #f59e0b; }

.option-titles[b-j4e4420dh5] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.option-titles h3[b-j4e4420dh5] { margin: 0; font-size: 1rem; color: var(--adm-fg-f1f5f9); }

.option-badge[b-j4e4420dh5] {
    align-self: flex-start;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    background: rgba(245, 158, 11, 0.14);
    color: #f59e0b;
}

.option-switch[b-j4e4420dh5] { margin-top: 8px; }
.option-help[b-j4e4420dh5] { margin: 12px 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--adm-fg-94a3b8); }
.option-card .config-grid[b-j4e4420dh5] { margin-top: 16px; }

/* "¿Has subido los precios?" */
.price-rise[b-j4e4420dh5] {
    margin: 0 0 12px;
    padding: 14px;
    border-radius: 10px;
    border: 1px dashed var(--adm-bd-334155);
    background: var(--adm-bg-0f172a);
}

.price-rise-question[b-j4e4420dh5] { display: block; font-size: 0.8rem; line-height: 1.45; color: var(--adm-fg-cbd5e1); }
.price-rise-row[b-j4e4420dh5] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.price-rise-field[b-j4e4420dh5] { position: relative; display: inline-flex; align-items: center; }
.price-rise-input[b-j4e4420dh5] { width: 110px; padding-right: 28px; }
.price-rise-unit[b-j4e4420dh5] { position: absolute; right: 10px; font-size: 0.85rem; color: var(--adm-fg-64748b); pointer-events: none; }
.price-rise-result[b-j4e4420dh5] { font-size: 0.9rem; font-weight: 700; color: var(--adm-fg-22c55e); }
/* A calculator, not a setting: labelled as one, and why its answer is not the rise itself. */
.price-rise-eyebrow[b-j4e4420dh5] { display: block; margin-bottom: 4px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--adm-fg-64748b); }
.price-rise-note[b-j4e4420dh5] { margin: 8px 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--adm-fg-94a3b8); }

.regulars-summary[b-j4e4420dh5],
.points-worth[b-j4e4420dh5] {
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(34, 197, 94, 0.08);
    color: var(--adm-fg-e2e8f0);
    font-size: 0.85rem;
}

/* Points that give back a lot: amber, and why. */
.points-worth.high[b-j4e4420dh5] { background: rgba(245, 158, 11, 0.12); }
.points-warning[b-j4e4420dh5] { margin: 8px 0 0; font-size: 0.8rem; line-height: 1.45; color: #f59e0b; }
.bonus-worth[b-j4e4420dh5] { display: block; margin-top: 4px; }

/* What a member gets on a sample bill, with the options as they stand on the screen. */
.rewards-example[b-j4e4420dh5] {
    margin: 0;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--adm-bd-334155);
    background: var(--adm-bg-0f172a);
    color: var(--adm-fg-e2e8f0);
    font-size: 0.88rem;
    line-height: 1.5;
}

.points-rewards[b-j4e4420dh5] { margin-top: 12px; }

/* How customers join */
.club-card[b-j4e4420dh5] { margin-top: 0; }
.club-qr[b-j4e4420dh5] { margin-top: 0; align-items: flex-start; gap: 24px; }
.club-links[b-j4e4420dh5] { flex: 1; min-width: 240px; }
.club-links h2[b-j4e4420dh5] { margin: 0; }
.club-actions[b-j4e4420dh5] { display: flex; flex-wrap: wrap; gap: 8px; }

/* Advanced */
.advanced summary[b-j4e4420dh5] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    list-style: none;
    cursor: pointer;
    font-weight: 600;
    color: var(--adm-fg-e2e8f0);
}

.advanced summary[b-j4e4420dh5]::-webkit-details-marker { display: none; }
.advanced summary[b-j4e4420dh5]::before { content: '›'; font-size: 1.2rem; color: var(--adm-fg-64748b); transition: transform 0.2s; }
.advanced[open] summary[b-j4e4420dh5]::before { transform: rotate(90deg); }
.tiers-help[b-j4e4420dh5] { margin-bottom: 12px; }

/* Unsaved changes */
.save-bar[b-j4e4420dh5] {
    position: sticky;
    bottom: 16px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 0;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid rgba(59, 130, 246, 0.5);
    background: var(--adm-bg-1e293b);
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.35);
    animation: save-bar-in-b-j4e4420dh5 0.18s ease-out;
}

.save-bar-text[b-j4e4420dh5] { font-size: 0.9rem; font-weight: 600; color: var(--adm-fg-f1f5f9); }

.save-bar-text[b-j4e4420dh5]::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: #f59e0b;
    vertical-align: middle;
}

.save-bar-buttons[b-j4e4420dh5] { display: flex; gap: 8px; }
.save-bar-buttons .save-config[b-j4e4420dh5] { order: 2; }   /* first in the markup, last on screen */
.save-bar-error[b-j4e4420dh5] { flex: 1 1 200px; font-size: 0.82rem; color: var(--adm-fg-ef4444); }

/* After a save, the bar's place says so — until the next change. */
.save-done[b-j4e4420dh5] {
    position: sticky;
    bottom: 16px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid rgba(34, 197, 94, 0.45);
    background: var(--adm-bg-1e293b);
    color: var(--adm-fg-f1f5f9);
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.35);
    animation: save-bar-in-b-j4e4420dh5 0.18s ease-out;
}
.save-done[b-j4e4420dh5]::before {
    content: '✓';
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 0.8rem;
    color: #fff;
    background: #22c55e;
}

@keyframes save-bar-in-b-j4e4420dh5 {
    from { transform: translateY(8px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@media (max-width: 640px) {
    .club-hero[b-j4e4420dh5] { flex-direction: column; align-items: flex-start; padding: 18px 18px 18px 22px; }
    .setup-card[b-j4e4420dh5] { padding: 18px 14px; }
    .setup-step[b-j4e4420dh5] { grid-template-columns: 28px minmax(0, 1fr); padding: 12px 8px; }
    .step-mark[b-j4e4420dh5] { width: 28px; height: 28px; }
    .step-actions[b-j4e4420dh5] { grid-column: 2; justify-content: flex-start; }
    .option-grid[b-j4e4420dh5] { grid-template-columns: 1fr; }
    .save-bar[b-j4e4420dh5] { flex-direction: column; align-items: stretch; bottom: 8px; }
    .save-bar-buttons .btn[b-j4e4420dh5] { flex: 1; }
}

/* Readable help beside the QR (the shared .help-text is a 0.7rem caption). */
.club-links .help-text[b-j4e4420dh5] { margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--adm-fg-94a3b8); }

/* A finished guide: one line, the steps on demand. */
.setup-head-end[b-j4e4420dh5] { display: flex; align-items: center; gap: 12px; }

.steps-toggle[b-j4e4420dh5] {
    min-height: 32px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--adm-fg-3b82f6);
}

.steps-toggle:hover[b-j4e4420dh5] { text-decoration: underline; }
.setup-done-text[b-j4e4420dh5] { margin: 0; font-size: 0.85rem; color: var(--adm-fg-94a3b8); }

/* ---- Members, rewards, statistics, the member window (2026-10-09) ----------------------------- */

/* Shared pieces */
.avatar[b-j4e4420dh5] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--adm-fg-3b82f6);
    background: rgba(59, 130, 246, 0.14);
}

.avatar.large[b-j4e4420dh5] { width: 48px; height: 48px; font-size: 1rem; }

.status-pill[b-j4e4420dh5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--adm-bg-334155);
    color: var(--adm-fgon-f1f5f9-94a3b8);
}

.status-pill.ok[b-j4e4420dh5] { background: rgba(34, 197, 94, 0.15); color: var(--adm-fg-22c55e); }
.status-pill.muted[b-j4e4420dh5] { background: var(--adm-bg-334155); color: var(--adm-fgon-f1f5f9-94a3b8); }

.btn.small[b-j4e4420dh5] { min-height: 34px; padding: 6px 12px; font-size: 0.8rem; }

.empty-panel[b-j4e4420dh5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 44px 24px;
    text-align: center;
    border-radius: 14px;
    border: 1px dashed var(--adm-bdon-ffffff-334155);
    background: var(--adm-bg-1e293b);
}

.empty-panel h3[b-j4e4420dh5] { margin: 6px 0 0; font-size: 1.05rem; }
.empty-panel p[b-j4e4420dh5] { margin: 0; max-width: 460px; font-size: 0.85rem; line-height: 1.5; color: var(--adm-fg-94a3b8); }
.empty-panel.compact[b-j4e4420dh5] { padding: 24px; }

.empty-icon[b-j4e4420dh5] {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    font-size: 1.4rem;
    color: var(--adm-fg-3b82f6);
    background: rgba(59, 130, 246, 0.12);
}

.empty-actions[b-j4e4420dh5] { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }

/* Members */
.list-toolbar[b-j4e4420dh5] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.search-field[b-j4e4420dh5] { position: relative; flex: 1; min-width: 220px; max-width: 360px; }
.search-icon[b-j4e4420dh5] { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 1rem; color: var(--adm-fg-64748b); pointer-events: none; }
.search-field .search-input[b-j4e4420dh5] { max-width: none; padding-left: 34px; }
.list-count[b-j4e4420dh5] { margin-left: auto; font-size: 0.85rem; color: var(--adm-fg-94a3b8); }

.accounts-table-wrapper[b-j4e4420dh5] { border-radius: 14px; }
.accounts-table th.num[b-j4e4420dh5], .accounts-table td.num[b-j4e4420dh5] { text-align: right; font-variant-numeric: tabular-nums; }
/* A flex <td> stops being a table cell (its row line broke): the flex lives in a wrapper. */
.accounts-table .name-wrap[b-j4e4420dh5] { display: inline-flex; align-items: center; gap: 10px; }
.accounts-table .phone-cell[b-j4e4420dh5] { color: var(--adm-fg-94a3b8); font-variant-numeric: tabular-nums; }

/* Rewards */
.rewards-header[b-j4e4420dh5] { align-items: flex-start; }
.section-sub[b-j4e4420dh5] { margin: 4px 0 0; font-size: 0.85rem; color: var(--adm-fg-94a3b8); }
.reward-card[b-j4e4420dh5] { display: flex; flex-direction: column; gap: 6px; border-radius: 14px; }
.reward-top[b-j4e4420dh5] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.reward-card .reward-cost[b-j4e4420dh5] { margin: 0; font-size: 0.85rem; padding: 3px 10px; border-radius: 999px; background: rgba(59, 130, 246, 0.14); }
.reward-card .reward-name[b-j4e4420dh5] { margin: 4px 0 0; font-size: 1.05rem; }
.reward-card .reward-value[b-j4e4420dh5] { margin: 0; font-weight: 600; }
.reward-card .reward-desc[b-j4e4420dh5] { margin: 0; }
.reward-card .reward-actions[b-j4e4420dh5] { margin-top: auto; padding-top: 8px; align-items: center; }

/* Statistics */
.kpi-grid[b-j4e4420dh5] { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }

.kpi[b-j4e4420dh5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px;
    border-radius: 14px;
    border: 1px solid var(--adm-bdon-ffffff-334155);
    background: var(--adm-bg-1e293b);
}

.kpi-label[b-j4e4420dh5] { font-size: 0.78rem; font-weight: 600; color: var(--adm-fg-94a3b8); }
.kpi-value[b-j4e4420dh5] { font-size: 1.75rem; font-weight: 700; line-height: 1.15; color: var(--adm-fg-f1f5f9); font-variant-numeric: tabular-nums; }
.kpi-sub[b-j4e4420dh5] { font-size: 0.8rem; color: var(--adm-fg-64748b); }
.kpi-regulars .kpi-value[b-j4e4420dh5] { color: var(--adm-fg-22c55e); }

.top-members[b-j4e4420dh5] {
    margin-top: 16px;
    padding: 18px 20px;
    border-radius: 14px;
    border: 1px solid var(--adm-bdon-ffffff-334155);
    background: var(--adm-bg-1e293b);
}

.top-members h3[b-j4e4420dh5] { margin: 0 0 8px; }
.top-members ol[b-j4e4420dh5] { list-style: none; margin: 0; padding: 0; }

.top-members li[b-j4e4420dh5] {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 6px;
    border-top: 1px solid var(--adm-bd-334155);
    border-radius: 8px;
    cursor: pointer;
}

.top-members li:first-child[b-j4e4420dh5] { border-top: none; }
.top-members li:hover[b-j4e4420dh5] { background: var(--adm-bg-1e293b40); }
.top-members li:focus-visible[b-j4e4420dh5] { outline: 2px solid var(--adm-bd-3b82f6); }
.top-members .member-name[b-j4e4420dh5] { font-weight: 600; color: var(--adm-fg-f1f5f9); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-visits[b-j4e4420dh5] { font-size: 0.85rem; font-weight: 600; color: var(--adm-fg-e2e8f0); }
.top-last[b-j4e4420dh5] { font-size: 0.8rem; color: var(--adm-fg-64748b); }
.stats-empty[b-j4e4420dh5] { margin: 16px 0 0; font-size: 0.85rem; color: var(--adm-fg-94a3b8); }

/* The member window */
.member-panel .modal-body[b-j4e4420dh5] { display: flex; flex-direction: column; gap: 14px; }

/* The window opens on the member's card: the venue's colour, light from the top right, as the band on
   the customer's card (ClubCardPage .cc-band). The panel's rounded corners clip it. */
.member-head[b-j4e4420dh5] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 20px 20px;
    color: #fff;
    background: var(--brand, #0891b2);
    background: linear-gradient(135deg, var(--brand, #0891b2), color-mix(in srgb, var(--brand, #0891b2) 62%, #000));
}

.member-head[b-j4e4420dh5]::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, 0.2), transparent 55%),
        radial-gradient(90% 80% at 0% 120%, rgba(0, 0, 0, 0.22), transparent 60%);
    pointer-events: none;
}

.member-head > *[b-j4e4420dh5] { position: relative; }
.member-head-text[b-j4e4420dh5] { flex: 1; min-width: 0; }
.member-head h2[b-j4e4420dh5] { margin: 0; font-size: 1.3rem; color: #fff; overflow-wrap: anywhere; }
.member-sub[b-j4e4420dh5] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; font-size: 0.82rem; color: rgba(255, 255, 255, 0.85); }
.member-since[b-j4e4420dh5] { color: rgba(255, 255, 255, 0.72); }
.member-head .avatar[b-j4e4420dh5] { color: #fff; background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.member-head .status-pill[b-j4e4420dh5] { color: #fff; background: rgba(255, 255, 255, 0.2); }
.member-head .modal-close[b-j4e4420dh5] { color: #fff; background: rgba(255, 255, 255, 0.12); }
.member-head .modal-close:hover[b-j4e4420dh5] { background: rgba(255, 255, 255, 0.24); }
.member-code[b-j4e4420dh5] {
    flex-shrink: 0;
    padding: 6px 10px;
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.2);
}
.member-progress-label[b-j4e4420dh5] { margin: -4px 0 10px; font-size: 0.78rem; color: var(--adm-fg-94a3b8); }

@media (max-width: 640px) {
    .member-code[b-j4e4420dh5] { display: none; }   /* the card section below shows it */
}

.member-stats[b-j4e4420dh5] { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }

.mstat[b-j4e4420dh5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--adm-bg-0f172a);
}

.mstat-value[b-j4e4420dh5] { font-size: 1.1rem; font-weight: 700; color: var(--adm-fg-f1f5f9); font-variant-numeric: tabular-nums; }
.mstat-label[b-j4e4420dh5] { font-size: 0.72rem; color: var(--adm-fg-64748b); }

.member-block[b-j4e4420dh5] { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--adm-bg-0f172a); }
.member-block h3[b-j4e4420dh5] { margin: 0 0 10px; font-size: 0.95rem; }

.member-progress[b-j4e4420dh5] { height: 6px; margin: 0 0 10px; border-radius: 999px; background: var(--adm-bg-334155); overflow: hidden; }
.member-progress span[b-j4e4420dh5] { display: block; height: 100%; border-radius: inherit; background: #22c55e; }

.member-panel .txn-row[b-j4e4420dh5] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; }
.member-panel .txn-type[b-j4e4420dh5] { min-width: 0; justify-self: start; }
.member-panel .txn-date[b-j4e4420dh5] { min-width: 0; font-size: 0.78rem; }
.member-panel .txn-amount[b-j4e4420dh5] { min-width: 44px; }

.points-bonuses h4[b-j4e4420dh5] { margin: 14px 0 8px; font-size: 0.85rem; color: var(--adm-fg-e2e8f0); }

@media (max-width: 640px) {
    .list-count[b-j4e4420dh5] { margin-left: 0; }
    .top-members li[b-j4e4420dh5] { grid-template-columns: 32px minmax(0, 1fr) auto; }
    .top-last[b-j4e4420dh5] { display: none; }
    .member-panel .txn-row[b-j4e4420dh5] { grid-template-columns: minmax(0, 1fr) auto; }
    .member-panel .txn-type[b-j4e4420dh5] { grid-column: 1 / -1; }
}

/* The WhatsApp check, under how customers join */
.verify-row[b-j4e4420dh5] { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--adm-bd-334155); }
.verify-row .toggle-label[b-j4e4420dh5] { font-weight: 600; color: var(--adm-fg-e2e8f0); }
.verify-help[b-j4e4420dh5] { margin: 6px 0 0 48px; font-size: 0.8rem; line-height: 1.5; color: var(--adm-fg-94a3b8); }

@media (max-width: 640px) {
    .verify-help[b-j4e4420dh5] { margin-left: 0; }
}

/* A member's status: deactivate (undoable), or delete from the club (the customer's request) */
.btn.danger[b-j4e4420dh5] { background: transparent; color: var(--adm-fg-ef4444); border: 1px solid rgba(239, 68, 68, 0.45); }
.btn.danger:hover[b-j4e4420dh5] { background: rgba(239, 68, 68, 0.12); }
.btn.danger:active[b-j4e4420dh5] { background: rgba(239, 68, 68, 0.2); }
.btn.danger:disabled[b-j4e4420dh5] { opacity: 0.5; cursor: not-allowed; }
.status-section .member-state[b-j4e4420dh5] { flex: 1 1 240px; font-weight: 500; line-height: 1.45; }
.status-message[b-j4e4420dh5] { display: block; margin-top: 6px; color: var(--adm-fg-ef4444); }
.inactive-pill[b-j4e4420dh5] { margin-left: 8px; font-size: 0.7rem; }
tr.clickable.inactive td[b-j4e4420dh5] { color: var(--adm-fg-64748b); }

/* How customers see the club: a live preview of the card in the venue's colour, and the colour and logo */
.brand-card[b-j4e4420dh5] { display: flex; flex-direction: column; gap: 14px; }
.brand-head h2[b-j4e4420dh5] { margin: 0 0 4px; font-size: 1.05rem; }
.brand-head .help-text[b-j4e4420dh5] { margin: 0; }
.brand-body[b-j4e4420dh5] { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 20px; align-items: start; }
.brand-preview[b-j4e4420dh5] { display: grid; place-items: center; padding: 18px 18px 24px; border-radius: 14px; background: var(--adm-bg-0f172a); }
.brand-pass[b-j4e4420dh5] {
    width: 100%;
    max-width: 260px;
    aspect-ratio: 1.6;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 14px 16px;
    border-radius: 16px;
    color: #fff;
    background: var(--brand);
    background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 64%, #000));
    box-shadow: 0 8px 0 -4px color-mix(in srgb, var(--brand) 45%, var(--adm-bg-0f172a)), 0 18px 30px -18px rgba(0, 0, 0, 0.6);
    transition: background 0.25s ease;
}
.brand-pass-top[b-j4e4420dh5] { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.brand-pass-club[b-j4e4420dh5] { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.88; }
.brand-pass-logo[b-j4e4420dh5] { width: 30px; height: 30px; box-sizing: border-box; padding: 2px; border-radius: 8px; object-fit: contain; background: #fff; }
.brand-pass-name[b-j4e4420dh5] { font-size: 1.15rem; font-weight: 700; overflow-wrap: break-word; }
.brand-controls[b-j4e4420dh5] { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.brand-field[b-j4e4420dh5] { display: flex; flex-direction: column; gap: 8px; }
.brand-label[b-j4e4420dh5] { font-size: 0.85rem; font-weight: 600; color: var(--adm-fg-e2e8f0); }
.brand-swatches[b-j4e4420dh5] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.brand-swatch[b-j4e4420dh5] {
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    transition: transform 0.1s;
}
.brand-swatch:hover[b-j4e4420dh5] { transform: scale(1.08); }
.brand-swatch.on[b-j4e4420dh5] { box-shadow: 0 0 0 2px var(--adm-bg-1e293b), 0 0 0 4px #fff; }
.brand-swatch:focus-visible[b-j4e4420dh5] { outline: 2px solid #fff; outline-offset: 2px; }
.brand-picker[b-j4e4420dh5] { width: 34px; height: 34px; min-width: 0; padding: 0; border: none; border-radius: 50%; background: none; cursor: pointer; }
.brand-actions[b-j4e4420dh5] { display: flex; flex-wrap: wrap; gap: 10px; }
.brand-upload[b-j4e4420dh5] { position: relative; overflow: hidden; }
.brand-message[b-j4e4420dh5] { margin: 0; color: var(--adm-fg-22c55e); }
.brand-message.error[b-j4e4420dh5] { color: var(--adm-fg-ef4444); }
.brand-more[b-j4e4420dh5] { font-size: 0.85rem; }
.brand-readonly[b-j4e4420dh5] { margin: 0; align-self: center; }

@media (max-width: 640px) {
    .brand-body[b-j4e4420dh5] { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .brand-pass[b-j4e4420dh5], .brand-swatch[b-j4e4420dh5] { transition: none; }
    .save-bar[b-j4e4420dh5], .save-done[b-j4e4420dh5] { animation: none; }
}

/* Light admin (the default since 2026-10-12). Measured light-only contrast, now 4.5:1 or more; dark untouched. */
:root[data-theme="light"] .regulars-card .option-icon[b-j4e4420dh5],
:root[data-theme="light"] .option-badge[b-j4e4420dh5] { color: #b45309; } /* #f59e0b on its 14% tint: 1.93:1 */
/* /Pages/Admin/MenuDelDia.razor.rz.scp.css */
.menu-del-dia-page[b-4ol3y6i3jf] {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.page-header[b-4ol3y6i3jf] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.page-header h1[b-4ol3y6i3jf] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
}

.page-header .subtitle[b-4ol3y6i3jf] {
    margin: 0.25rem 0 0;
    color: var(--adm-fg-94a3b8);
    font-size: 0.9rem;
}

/* States */
.loading-state[b-4ol3y6i3jf],
.error-state[b-4ol3y6i3jf],
.empty-state[b-4ol3y6i3jf] {
    text-align: center;
    padding: 3rem;
    background: var(--adm-bg-1e293b);
    border-radius: 12px;
    color: var(--adm-fgon-ffffff-e2e8f0);
}

.empty-icon[b-4ol3y6i3jf] {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}

.empty-state h3[b-4ol3y6i3jf] {
    margin: 0 0 0.5rem;
    color: var(--adm-fgon-ffffff-e2e8f0);
}

.empty-state p[b-4ol3y6i3jf] {
    color: var(--adm-fgon-ffffff-94a3b8);
    margin-bottom: 1.5rem;
}

.spinner[b-4ol3y6i3jf] {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--adm-bd-dddddd);
    border-top-color: var(--adm-bd-4caf50);
    border-radius: 50%;
    animation: spin-b-4ol3y6i3jf 1s linear infinite;
}

@keyframes spin-b-4ol3y6i3jf {
    to { transform: rotate(360deg); }
}

/* Menu Cards Grid */
.menus-grid[b-4ol3y6i3jf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.menu-card[b-4ol3y6i3jf] {
    background: var(--adm-bg-1e293b);
    border-radius: 12px;
    box-shadow: 0 2px 8px var(--adm-sh-000000-a0_3);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.menu-card:hover[b-4ol3y6i3jf] {
    box-shadow: 0 4px 16px var(--adm-sh-000000-a0_4);
}

.menu-card.inactive[b-4ol3y6i3jf] {
    opacity: 0.6;
}

.card-header[b-4ol3y6i3jf] {
    position: relative;
    height: 120px;
    background: linear-gradient(135deg, #4CAF50, #81C784);
}

.card-image[b-4ol3y6i3jf] {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.card-status[b-4ol3y6i3jf] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
}

.status-badge[b-4ol3y6i3jf] {
    padding: 0.25rem 0.75rem;
    background: var(--adm-bg-000000-a0_5);
    color: var(--adm-fgon-fcfcfe-ffffff);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge.active[b-4ol3y6i3jf] {
    background: #4CAF50;
}

.card-body[b-4ol3y6i3jf] {
    padding: 1rem;
}

.card-body h3[b-4ol3y6i3jf] {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    color: var(--adm-fg-e2e8f0);
}

.card-body .description[b-4ol3y6i3jf] {
    margin: 0 0 0.5rem;
    color: var(--adm-fg-94a3b8);
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-price[b-4ol3y6i3jf] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--adm-fg-4caf50);
    margin-bottom: 0.5rem;
}

.includes-tags[b-4ol3y6i3jf] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.tag[b-4ol3y6i3jf] {
    background: var(--adm-bg-334155);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--adm-fgon-f1f5f9-e2e8f0);
}

.courses-summary[b-4ol3y6i3jf] {
    font-size: 0.85rem;
    color: var(--adm-fg-94a3b8);
}

.card-actions[b-4ol3y6i3jf] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--adm-bd-334155);
}

/* Buttons */
.btn[b-4ol3y6i3jf] {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    background: var(--adm-bg-334155);
    color: var(--adm-fgon-f1f5f9-e2e8f0);
    transition: background 0.2s ease;
}

.btn:hover[b-4ol3y6i3jf] {
    background: var(--adm-bghov-f1f5f9-475569);
}

.btn.primary[b-4ol3y6i3jf] {
    background: #4CAF50;
    color: white;
}

.btn.primary:hover[b-4ol3y6i3jf] {
    background: #43A047;
}

.btn.danger[b-4ol3y6i3jf] {
    background: #f44336;
    color: white;
}

.btn.danger:hover[b-4ol3y6i3jf] {
    background: #d32f2f;
}

.btn.icon[b-4ol3y6i3jf] {
    padding: 0.5rem;
    min-width: 36px;
}

.btn.small[b-4ol3y6i3jf] {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
}

.btn:disabled[b-4ol3y6i3jf] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Modal */
.modal-overlay[b-4ol3y6i3jf] {
    position: fixed;
    inset: 0;
    background: var(--adm-scrim-000000-a0_5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-content[b-4ol3y6i3jf] {
    background: var(--adm-bg-1e293b);
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.5rem;
    position: relative;
    color: var(--adm-fgon-ffffff-e2e8f0);
}

.modal-content.large[b-4ol3y6i3jf] {
    max-width: 700px;
}

.modal-content.small[b-4ol3y6i3jf] {
    max-width: 400px;
}

.modal-close[b-4ol3y6i3jf] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--adm-fg-94a3b8);
    /* 44px touch target for POS hardware (was intrinsic ~30px). */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.modal-content h2[b-4ol3y6i3jf] {
    margin: 0 0 1.5rem;
    font-size: 1.25rem;
    color: var(--adm-fgon-ffffff-e2e8f0);
}

.modal-footer[b-4ol3y6i3jf] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--adm-bd-334155);
}

/* Form */
.form-section[b-4ol3y6i3jf] {
    margin-bottom: 1.5rem;
}

.form-section h3[b-4ol3y6i3jf] {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

.form-section .hint[b-4ol3y6i3jf] {
    color: var(--adm-fg-94a3b8);
    font-size: 0.85rem;
    margin: 0 0 1rem;
}

.form-group[b-4ol3y6i3jf] {
    margin-bottom: 1rem;
}

.form-group label[b-4ol3y6i3jf] {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--adm-fg-e2e8f0);
}

.form-group input[b-4ol3y6i3jf],
.form-group textarea[b-4ol3y6i3jf],
.form-group select[b-4ol3y6i3jf] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--adm-bg-0f172a);
    color: var(--adm-fgon-f8fafc-e2e8f0);
}

.form-group input[b-4ol3y6i3jf]::placeholder,
.form-group textarea[b-4ol3y6i3jf]::placeholder {
    color: var(--adm-fgon-f8fafc-64748b);
}

.form-group input:focus[b-4ol3y6i3jf],
.form-group textarea:focus[b-4ol3y6i3jf],
.form-group select:focus[b-4ol3y6i3jf] {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-4caf50);
}

.form-row[b-4ol3y6i3jf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.checkbox-row[b-4ol3y6i3jf] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.checkbox[b-4ol3y6i3jf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: var(--adm-fg-e2e8f0);
}

.checkbox input[b-4ol3y6i3jf] {
    width: auto;
}

/* Course Section */
.course-section[b-4ol3y6i3jf] {
    background: var(--adm-bg-0f172a);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.course-header[b-4ol3y6i3jf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.course-type[b-4ol3y6i3jf] {
    font-weight: 600;
    color: var(--adm-fg-e2e8f0);
}

.custom-name[b-4ol3y6i3jf] {
    color: var(--adm-fg-94a3b8);
    font-size: 0.85rem;
}

.course-items[b-4ol3y6i3jf] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.course-item[b-4ol3y6i3jf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--adm-bg-1e293b);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    color: var(--adm-fgon-ffffff-e2e8f0);
}

.course-item .item-name[b-4ol3y6i3jf] {
    flex: 1;
}

.course-item .item-supplement[b-4ol3y6i3jf] {
    color: var(--adm-fgon-ffffff-4caf50);
    font-weight: 500;
    font-size: 0.85rem;
}

.no-items[b-4ol3y6i3jf] {
    color: var(--adm-fg-64748b);
    font-style: italic;
    font-size: 0.85rem;
    margin: 0.5rem 0;
}

.add-course-row[b-4ol3y6i3jf] {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.add-course-row select[b-4ol3y6i3jf] {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 6px;
    background: var(--adm-bg-0f172a);
    color: var(--adm-fgon-f8fafc-e2e8f0);
}

/* Items List (Add Item Modal) */
.items-list[b-4ol3y6i3jf] {
    max-height: 300px;
    overflow-y: auto;
    margin: 1rem 0;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    background: var(--adm-bg-0f172a);
}

.selectable-item[b-4ol3y6i3jf] {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.15s ease;
    color: var(--adm-fg-e2e8f0);
}

.selectable-item:hover[b-4ol3y6i3jf] {
    background: var(--adm-bg-334155);
}

.selectable-item:not(:last-child)[b-4ol3y6i3jf] {
    border-bottom: 1px solid var(--adm-bd-334155);
}

.selectable-item .item-price[b-4ol3y6i3jf] {
    color: var(--adm-fg-94a3b8);
    font-size: 0.9rem;
}

/* Schedule Section */
.schedule-section[b-4ol3y6i3jf] {
    border: 1px solid var(--adm-bd-334155);
    border-radius: 8px;
    overflow: hidden;
}

.schedule-section .section-header[b-4ol3y6i3jf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--adm-bg-0f172a);
    cursor: pointer;
    user-select: none;
    color: var(--adm-fgon-f8fafc-e2e8f0);
}

.schedule-section .section-header:hover[b-4ol3y6i3jf] {
    background: var(--adm-bghov-f8fafc-1e293b);
}

.schedule-section .section-header h3[b-4ol3y6i3jf] {
    margin: 0;
    font-size: 0.95rem;
    color: var(--adm-fgon-f8fafc-e2e8f0);
}

.schedule-section .toggle-icon[b-4ol3y6i3jf] {
    color: var(--adm-fg-94a3b8);
    font-size: 0.8rem;
}

.schedule-content[b-4ol3y6i3jf] {
    padding: 1rem;
    border-top: 1px solid var(--adm-bdon-ffffff-334155);
    background: var(--adm-bg-1e293b);
}

.days-config[b-4ol3y6i3jf] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.day-row[b-4ol3y6i3jf] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.5rem;
    background: var(--adm-bg-0f172a);
    border-radius: 6px;
}

.day-label[b-4ol3y6i3jf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 110px;
    font-weight: 500;
    cursor: pointer;
    color: var(--adm-fg-e2e8f0);
}

.day-label input[b-4ol3y6i3jf] {
    width: auto;
}

.time-windows[b-4ol3y6i3jf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.time-window[b-4ol3y6i3jf] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--adm-bg-1e293b);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--adm-bdon-ffffff-334155);
}

.time-window input[type="time"][b-4ol3y6i3jf] {
    width: 100px;
    padding: 0.25rem;
    border: none;
    background: transparent;
    font-size: 0.85rem;
    color: var(--adm-fgon-ffffff-e2e8f0);
}

.time-window select[b-4ol3y6i3jf] {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--adm-bdon-f8fafc-475569);
    border-radius: 4px;
    background: var(--adm-bg-0f172a);
    color: var(--adm-fgon-f8fafc-e2e8f0);
    font-size: 0.85rem;
    cursor: pointer;
    min-width: 80px;
}

.time-window select:focus[b-4ol3y6i3jf] {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-4caf50);
}

.time-window select:hover[b-4ol3y6i3jf] {
    border-color: var(--adm-bdon-f8fafc-4caf50);
}

.time-window span[b-4ol3y6i3jf] {
    color: var(--adm-fgon-ffffff-94a3b8);
}

.quick-presets[b-4ol3y6i3jf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--adm-bd-334155);
}

.preset-label[b-4ol3y6i3jf] {
    font-size: 0.85rem;
    color: var(--adm-fg-94a3b8);
    margin-right: 0.5rem;
}

/* Image Upload */
.image-upload-group[b-4ol3y6i3jf] {
    margin-bottom: 1.5rem;
}

.image-preview[b-4ol3y6i3jf] {
    position: relative;
    display: inline-block;
    margin-bottom: 1rem;
}

.image-preview img[b-4ol3y6i3jf] {
    max-width: 200px;
    max-height: 150px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--adm-bd-334155);
}

.btn-remove-image[b-4ol3y6i3jf] {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ef4444;
    color: white;
    border: none;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-remove-image:hover[b-4ol3y6i3jf] {
    background: #dc2626;
}

.image-upload-options[b-4ol3y6i3jf] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.upload-option[b-4ol3y6i3jf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-upload[b-4ol3y6i3jf] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--adm-bg-334155);
    color: var(--adm-fgon-f1f5f9-e2e8f0);
    border: 1px dashed var(--adm-bdon-f1f5f9-475569);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-upload:hover[b-4ol3y6i3jf] {
    background: var(--adm-bghov-f1f5f9-475569);
    border-color: var(--adm-bdon-e1e6eb-4caf50);
}

.upload-status[b-4ol3y6i3jf] {
    color: var(--adm-fg-4caf50);
    font-size: 0.85rem;
}

.or-divider[b-4ol3y6i3jf] {
    color: var(--adm-fg-64748b);
    font-size: 0.85rem;
}

.url-option input[b-4ol3y6i3jf] {
    width: 250px;
    padding: 0.5rem;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 6px;
    background: var(--adm-bg-0f172a);
    color: var(--adm-fgon-f8fafc-e2e8f0);
    font-size: 0.9rem;
}

.url-option input[b-4ol3y6i3jf]::placeholder {
    color: var(--adm-fgon-f8fafc-64748b);
}

.url-option input:focus[b-4ol3y6i3jf] {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-4caf50);
}

.upload-error[b-4ol3y6i3jf] {
    margin-top: 0.5rem;
    color: var(--adm-fg-ef4444);
    font-size: 0.85rem;
}

/* Custom Includes */
.custom-includes-section[b-4ol3y6i3jf] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--adm-bd-334155);
}

.custom-includes-header[b-4ol3y6i3jf] {
    margin-bottom: 0.5rem;
}

.custom-includes-label[b-4ol3y6i3jf] {
    font-size: 0.85rem;
    color: var(--adm-fg-94a3b8);
}

.custom-includes-list[b-4ol3y6i3jf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.custom-include-tag[b-4ol3y6i3jf] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    background: var(--adm-bg-0f172a);
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--adm-fgon-f8fafc-e2e8f0);
}

.custom-include-tag .remove-include[b-4ol3y6i3jf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--adm-bg-475569);
    color: var(--adm-fgon-f9fafb-e2e8f0);
    border: none;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s;
}

.custom-include-tag .remove-include:hover[b-4ol3y6i3jf] {
    background: #ef4444;
}

.add-custom-include[b-4ol3y6i3jf] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.add-custom-include input[b-4ol3y6i3jf] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 6px;
    background: var(--adm-bg-0f172a);
    color: var(--adm-fgon-f8fafc-e2e8f0);
    font-size: 0.85rem;
}

.add-custom-include input[b-4ol3y6i3jf]::placeholder {
    color: var(--adm-fgon-f8fafc-64748b);
}

.add-custom-include input:focus[b-4ol3y6i3jf] {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-4caf50);
}

.btn-add-include[b-4ol3y6i3jf] {
    padding: 0.5rem 0.75rem;
    background: var(--adm-bg-334155);
    color: var(--adm-fgon-f1f5f9-e2e8f0);
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}

.btn-add-include:hover:not(:disabled)[b-4ol3y6i3jf] {
    background: #4CAF50;
}

.btn-add-include:disabled[b-4ol3y6i3jf] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 768px) {
    .page-header[b-4ol3y6i3jf] {
        flex-direction: column;
        gap: 1rem;
    }

    .form-row[b-4ol3y6i3jf] {
        grid-template-columns: 1fr;
    }

    .menus-grid[b-4ol3y6i3jf] {
        grid-template-columns: 1fr;
    }

    .day-row[b-4ol3y6i3jf] {
        flex-direction: column;
        align-items: flex-start;
    }

    .time-window input[type="time"][b-4ol3y6i3jf] {
        width: 85px;
    }
}

/* Phone */
@media (max-width: 640px) {
    /* AdminLayout already pads .admin-content (16px, 12px <=480px). The page's
       own 1.5rem on top of that costs ~48px of a 390px viewport. */
    .menu-del-dia-page[b-4ol3y6i3jf] {
        padding: 0;
    }

    /* Pan/Bebida/Café + custom extras were a no-wrap flex row: past ~3 tags they
       got clipped by the card's overflow:hidden instead of wrapping. */
    .includes-tags[b-4ol3y6i3jf] {
        flex-wrap: wrap;
    }

    /* Course type + "Eliminar curso" don't both fit on one line in the modal. */
    .course-header[b-4ol3y6i3jf] {
        flex-wrap: wrap;
    }

    /* Dish names are long; without min-width:0 these flex children are floored
       at their min-content width and push the row past the modal. */
    .course-item .item-name[b-4ol3y6i3jf],
    .selectable-item .item-name[b-4ol3y6i3jf] {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* The 250px URL field can't sit next to the upload button (~280px of usable
       modal width at 360px) — give it its own full-width row. */
    .image-upload-options .url-option[b-4ol3y6i3jf] {
        flex: 1 1 100%;
    }

    .url-option input[b-4ol3y6i3jf] {
        width: 100%;
    }

    /* The mobile layer's 44px min-height on every button stretches this 24px
       circle into an ellipse. Keep it round — and a real touch target. */
    .btn-remove-image[b-4ol3y6i3jf] {
        top: -12px;
        right: -12px;
        width: 44px;
        height: 44px;
        font-size: 20px;
    }
}

/* Note: Admin pages use a fixed dark theme from AdminLayout, so base styles are already dark-themed */
/* /Pages/Admin/MenuSchedule.razor.rz.scp.css */
.menu-schedule-page[b-1uqtub8p1j] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-1uqtub8p1j] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.page-header h1[b-1uqtub8p1j] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
}

.page-header .subtitle[b-1uqtub8p1j] {
    margin: 0.25rem 0 0;
    color: var(--adm-fg-94a3b8);
    font-size: 0.9rem;
}

.search-input[b-1uqtub8p1j] {
    padding: 0.5rem 1rem;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    width: 250px;
    font-size: 0.9rem;
    background: var(--adm-bg-0f172a);
    color: var(--adm-fgon-f8fafc-e2e8f0);
}

.search-input[b-1uqtub8p1j]::placeholder {
    color: var(--adm-fgon-f8fafc-64748b);
}

.search-input:focus[b-1uqtub8p1j] {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-2196f3);
}

/* Filter Bar */
.filter-bar[b-1uqtub8p1j] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.filter-btn[b-1uqtub8p1j] {
    min-height: 44px;            /* touch target for POS hardware (was ~37px) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 8px;
    background: var(--adm-bg-1e293b);
    color: var(--adm-fgon-ffffff-e2e8f0);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-btn:hover[b-1uqtub8p1j] {
    background: var(--adm-bghov-ffffff-334155);
}

.filter-btn.active[b-1uqtub8p1j] {
    background: #2196F3;
    border-color: #2196F3;
    color: white;
}

/* Loading/Error/Empty States */
.loading-state[b-1uqtub8p1j],
.error-state[b-1uqtub8p1j] {
    text-align: center;
    padding: 3rem;
    background: var(--adm-bg-1e293b);
    border-radius: 12px;
    color: var(--adm-fgon-ffffff-e2e8f0);
}

.spinner[b-1uqtub8p1j] {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--adm-bd-dddddd);
    border-top-color: var(--adm-bd-2196f3);
    border-radius: 50%;
    animation: spin-b-1uqtub8p1j 1s linear infinite;
}

@keyframes spin-b-1uqtub8p1j {
    to { transform: rotate(360deg); }
}

/* Items Table */
.items-table[b-1uqtub8p1j] {
    background: var(--adm-bg-1e293b);
    border-radius: 12px;
    box-shadow: 0 2px 8px var(--adm-sh-000000-a0_3);
    overflow: hidden;
}

.table-header[b-1uqtub8p1j] {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr 1fr 1.5fr;
    gap: 1rem;
    padding: 1rem;
    background: var(--adm-bg-0f172a);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--adm-fgon-f8fafc-94a3b8);
}

.table-row[b-1uqtub8p1j] {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr 1fr 1.5fr;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--adm-bd-334155);
    align-items: center;
}

.table-row:hover[b-1uqtub8p1j] {
    background: var(--adm-bg-334155);
}

.table-row.unavailable[b-1uqtub8p1j] {
    background: var(--adm-bg-d32f2f-a0_1);
}

.col-name strong[b-1uqtub8p1j] {
    display: block;
    color: var(--adm-fg-e2e8f0);
}

.col-name .sku[b-1uqtub8p1j] {
    font-size: 0.8rem;
    color: var(--adm-fg-64748b);
}

.col-category[b-1uqtub8p1j] {
    color: var(--adm-fg-94a3b8);
    font-size: 0.9rem;
}

/* Schedule Badge */
.schedule-badge[b-1uqtub8p1j] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.schedule-badge.has-schedule[b-1uqtub8p1j] {
    background: #e3f2fd;
    color: #1976D2;
}

.schedule-badge.always[b-1uqtub8p1j] {
    background: #e8f5e9;
    color: #388E3C;
}

/* Status Indicator */
.status-indicator[b-1uqtub8p1j] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    font-weight: 500;
}

.status-indicator.available[b-1uqtub8p1j] {
    color: var(--adm-fg-388e3c);
}

.status-indicator.unavailable[b-1uqtub8p1j] {
    color: var(--adm-fg-d32f2f);
}

.col-actions[b-1uqtub8p1j] {
    display: flex;
    gap: 0.5rem;
}

.empty-message[b-1uqtub8p1j] {
    padding: 2rem;
    text-align: center;
    color: var(--adm-fg-94a3b8);
}

/* Buttons */
.btn[b-1uqtub8p1j] {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    background: var(--adm-bg-334155);
    color: var(--adm-fgon-f1f5f9-e2e8f0);
    transition: background 0.2s ease;
}

.btn:hover[b-1uqtub8p1j] {
    background: var(--adm-bghov-f1f5f9-475569);
}

.btn.primary[b-1uqtub8p1j] {
    background: #2196F3;
    color: white;
}

.btn.primary:hover[b-1uqtub8p1j] {
    background: #1976D2;
}

.btn.danger[b-1uqtub8p1j] {
    background: var(--adm-bg-d32f2f-a0_2);
    color: var(--adm-fgon-f1d1d3-ef5350);
}

.btn.danger:hover[b-1uqtub8p1j] {
    background: var(--adm-bg-d32f2f-a0_3);
}

.btn.small[b-1uqtub8p1j] {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
}

.btn.icon[b-1uqtub8p1j] {
    padding: 0.25rem 0.5rem;
}

.btn:disabled[b-1uqtub8p1j] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Modal */
.modal-overlay[b-1uqtub8p1j] {
    position: fixed;
    inset: 0;
    background: var(--adm-scrim-000000-a0_5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-content[b-1uqtub8p1j] {
    background: var(--adm-bg-1e293b);
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.5rem;
    position: relative;
    color: var(--adm-fgon-ffffff-e2e8f0);
}

.modal-content.large[b-1uqtub8p1j] {
    max-width: 700px;
}

.modal-close[b-1uqtub8p1j] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--adm-fg-94a3b8);
    /* 44px touch target for POS hardware (was intrinsic ~30px). */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.modal-content h2[b-1uqtub8p1j] {
    margin: 0 0 1.5rem;
    font-size: 1.25rem;
    color: var(--adm-fgon-ffffff-e2e8f0);
}

.modal-footer[b-1uqtub8p1j] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--adm-bd-334155);
}

/* Form */
.form-section[b-1uqtub8p1j] {
    margin-bottom: 1.5rem;
}

.form-group[b-1uqtub8p1j] {
    margin-bottom: 1rem;
}

.form-group label[b-1uqtub8p1j] {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--adm-fg-e2e8f0);
}

.form-group .hint[b-1uqtub8p1j] {
    color: var(--adm-fg-94a3b8);
    font-size: 0.85rem;
    margin: 0.5rem 0 0;
}

.checkbox[b-1uqtub8p1j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: var(--adm-fg-e2e8f0);
}

.checkbox input[b-1uqtub8p1j] {
    width: auto;
}

/* Days Config */
.days-config[b-1uqtub8p1j] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1rem 0;
}

.day-row[b-1uqtub8p1j] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.5rem;
    background: var(--adm-bg-0f172a);
    border-radius: 6px;
}

.day-label[b-1uqtub8p1j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 110px;
    font-weight: 500;
    cursor: pointer;
    color: var(--adm-fg-e2e8f0);
}

.day-label input[b-1uqtub8p1j] {
    width: auto;
}

.time-windows[b-1uqtub8p1j] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.time-window[b-1uqtub8p1j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--adm-bg-1e293b);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--adm-bdon-ffffff-334155);
}

.time-picker[b-1uqtub8p1j] {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    background: var(--adm-bg-0f172a);
    border-radius: 6px;
    padding: 0.25rem;
}

.time-part[b-1uqtub8p1j] {
    display: flex;
    align-items: center;
    gap: 0.1rem;
}

.time-colon[b-1uqtub8p1j] {
    color: var(--adm-fg-e2e8f0);
    font-size: 1rem;
    font-weight: 700;
    padding: 0 0.1rem;
}

.time-btn[b-1uqtub8p1j] {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--adm-bg-334155);
    color: var(--adm-fgon-f1f5f9-e2e8f0);
    font-size: 1rem;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, transform 0.1s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.time-btn-sm[b-1uqtub8p1j] {
    width: 24px;
    height: 24px;
    font-size: 0.85rem;
}

.time-btn:hover[b-1uqtub8p1j] {
    background: var(--adm-bghov-f1f5f9-475569);
}

.time-btn:active[b-1uqtub8p1j] {
    transform: scale(0.95);
    background: #4CAF50;
}

.time-value[b-1uqtub8p1j] {
    min-width: 24px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--adm-fg-e2e8f0);
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

.time-sep[b-1uqtub8p1j] {
    color: var(--adm-fg-64748b);
    font-size: 1rem;
    font-weight: 600;
    padding: 0 0.35rem;
}

.remove-window-btn[b-1uqtub8p1j] {
    margin-left: 0.25rem;
}

.time-window input[type="time"][b-1uqtub8p1j] {
    width: 100px;
    padding: 0.25rem;
    border: none;
    background: transparent;
    font-size: 0.85rem;
    color: var(--adm-fgon-ffffff-e2e8f0);
}

.time-window span[b-1uqtub8p1j] {
    color: var(--adm-fgon-ffffff-94a3b8);
}

/* Quick Presets */
.quick-presets[b-1uqtub8p1j] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--adm-bd-334155);
}

.preset-label[b-1uqtub8p1j] {
    font-size: 0.85rem;
    color: var(--adm-fg-94a3b8);
    margin-right: 0.5rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .table-header[b-1uqtub8p1j],
    .table-row[b-1uqtub8p1j] {
        grid-template-columns: 1.4fr 1fr 1.4fr 0.9fr 1.3fr;
        gap: 0.75rem;
    }

    /* The actions column stays visible. It used to be display:none here, but the
       row has no click handler of its own, so hiding it left tablet/phone users
       with no way at all to open the schedule editor. */
    .col-actions[b-1uqtub8p1j] {
        flex-wrap: wrap;
    }

    /* Grid items default to min-width:auto: a long item name or schedule summary
       would otherwise push the grid wider than the card. */
    .col-name[b-1uqtub8p1j],
    .col-category[b-1uqtub8p1j],
    .col-schedule[b-1uqtub8p1j],
    .col-status[b-1uqtub8p1j] {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 768px) {
    .page-header[b-1uqtub8p1j] {
        flex-direction: column;
        gap: 1rem;
    }

    .search-input[b-1uqtub8p1j] {
        width: 100%;
    }

    .filter-bar[b-1uqtub8p1j] {
        flex-wrap: wrap;
    }

    .table-header[b-1uqtub8p1j] {
        display: none;
    }

    .table-row[b-1uqtub8p1j] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem;
    }

    .day-row[b-1uqtub8p1j] {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Responsive time picker */
    .time-window[b-1uqtub8p1j] {
        flex-wrap: wrap;
        gap: 0.35rem;
        padding: 0.35rem 0.5rem;
    }

    .time-picker[b-1uqtub8p1j] {
        padding: 0.15rem;
    }

    .time-btn[b-1uqtub8p1j] {
        width: 24px;
        height: 24px;
        font-size: 0.85rem;
    }

    .time-btn-sm[b-1uqtub8p1j] {
        width: 20px;
        height: 20px;
        font-size: 0.75rem;
    }

    .time-value[b-1uqtub8p1j] {
        min-width: 20px;
        font-size: 0.8rem;
    }

    .time-sep[b-1uqtub8p1j] {
        font-size: 0.85rem;
        padding: 0 0.2rem;
    }

    .time-colon[b-1uqtub8p1j] {
        font-size: 0.85rem;
    }
}

@media (max-width: 640px) {
    /* AdminLayout's .admin-content already pads the page; 1.5rem more on each
       side burned ~13% of a 390px screen. Keep the vertical rhythm only. */
    .menu-schedule-page[b-1uqtub8p1j] {
        padding: 1rem 0;
    }

    /* Same reasoning inside the modal — the day/time rows need every pixel. */
    .modal-overlay[b-1uqtub8p1j] {
        padding: 0.5rem;
    }

    .modal-content[b-1uqtub8p1j] {
        padding: 1rem;
    }

    /* ...and keep the title clear of the absolutely-positioned close button. */
    .modal-content h2[b-1uqtub8p1j] {
        padding-right: 44px;
    }

    /* The ± steppers were 24px/20px wide: too narrow to hit with a thumb. Widen
       them (they still wrap two-per-row inside .time-window, which is already
       flex-wrap at this width, so nothing overflows). */
    .time-btn[b-1uqtub8p1j],
    .time-btn-sm[b-1uqtub8p1j] {
        width: 36px;
        height: 40px;
    }

    .time-value[b-1uqtub8p1j] {
        min-width: 26px;
        font-size: 0.9rem;
    }
}

/* Note: Admin pages use a fixed dark theme from AdminLayout, so base styles are already dark-themed */
/* /Pages/Admin/MobileStockTake.razor.rz.scp.css */
.mobile-stock-container[b-wt8eeg2hto] {
    min-height: 100vh;
    background: var(--adm-bg-0f172a);
    display: flex;
    flex-direction: column;
}

/* Header */
.mobile-header[b-wt8eeg2hto] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--adm-bg-1e293b);
    border-bottom: 1px solid var(--adm-bdon-ffffff-334155);
    position: sticky;
    top: 0;
    z-index: 10;
}

.back-btn[b-wt8eeg2hto], .sync-btn[b-wt8eeg2hto] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--adm-bg-334155);
    border-radius: 10px;
    color: var(--adm-fgon-f1f5f9-e2e8f0);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.back-btn:active[b-wt8eeg2hto], .sync-btn:active[b-wt8eeg2hto] {
    transform: scale(0.95);
}

.sync-btn.syncing svg[b-wt8eeg2hto] {
    animation: spin-b-wt8eeg2hto 1s linear infinite;
}

@keyframes spin-b-wt8eeg2hto {
    to { transform: rotate(360deg); }
}

.header-content[b-wt8eeg2hto] {
    flex: 1;
}

.header-content h1[b-wt8eeg2hto] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--adm-fg-f1f5f9);
    margin: 0;
}

.stock-take-id[b-wt8eeg2hto] {
    font-size: 0.75rem;
    color: var(--adm-fg-94a3b8);
}

/* Start Screen */
.start-screen[b-wt8eeg2hto] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    text-align: center;
}

.start-icon[b-wt8eeg2hto] {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--adm-bg-1e293b);
    border-radius: 24px;
    color: var(--adm-fgon-ffffff-3b82f6);
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px var(--adm-sh-3b82f6-a0_2);
}

.start-screen h2[b-wt8eeg2hto] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--adm-fg-f1f5f9);
    margin: 0 0 0.5rem 0;
}

.start-screen p[b-wt8eeg2hto] {
    font-size: 0.9375rem;
    color: var(--adm-fg-94a3b8);
    margin: 0 0 1.5rem 0;
    max-width: 280px;
}

.category-select[b-wt8eeg2hto] {
    width: 100%;
    max-width: 300px;
    margin-bottom: 1rem;
}

.form-select[b-wt8eeg2hto] {
    width: 100%;
    padding: 0.875rem 2.5rem 0.875rem 1rem;
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 12px;
    font-size: 1rem;
    background: var(--adm-bg-1e293b) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 1rem center;
    appearance: none;
    color: var(--adm-fgon-ffffff-e2e8f0);
}

.form-select option[b-wt8eeg2hto] {
    background: var(--adm-bg-1e293b);
    color: var(--adm-fgon-ffffff-e2e8f0);
}

.btn[b-wt8eeg2hto] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn.primary[b-wt8eeg2hto] {
    background: #3b82f6;
    border: none;
    color: white;
}

.btn.primary.large[b-wt8eeg2hto] {
    width: 100%;
    max-width: 300px;
    padding: 1rem;
}

.btn.outline[b-wt8eeg2hto] {
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    color: var(--adm-fgon-ffffff-e2e8f0);
}

/* Recent Counts */
.recent-counts[b-wt8eeg2hto] {
    width: 100%;
    max-width: 300px;
    margin-top: 2rem;
}

.recent-counts h3[b-wt8eeg2hto] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--adm-fg-94a3b8);
    margin: 0 0 0.75rem 0;
    text-align: left;
}

.recent-item[b-wt8eeg2hto] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem;
    background: var(--adm-bg-1e293b);
    border-radius: 10px;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

.recent-date[b-wt8eeg2hto] {
    font-size: 0.875rem;
    color: var(--adm-fg-f1f5f9);
}

.recent-progress[b-wt8eeg2hto] {
    flex: 1;
    font-size: 0.8125rem;
    color: var(--adm-fg-94a3b8);
}

.recent-status[b-wt8eeg2hto] {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}

.recent-status.inprogress[b-wt8eeg2hto] {
    background: var(--adm-bg-fbbf24-a0_2);
    color: var(--adm-fgon-f9eed1-fbbf24);
}

/* Count Screen */
.count-screen[b-wt8eeg2hto] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Progress Section */
.progress-section[b-wt8eeg2hto] {
    padding: 1rem;
    background: var(--adm-bg-1e293b);
    border-bottom: 1px solid var(--adm-bdon-ffffff-334155);
}

.progress-bar[b-wt8eeg2hto] {
    height: 8px;
    background: var(--adm-bg-334155);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill[b-wt8eeg2hto] {
    height: 100%;
    background: linear-gradient(90deg, var(--adm-bggrad-3b82f6), var(--adm-bggrad-818cf8));
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-text[b-wt8eeg2hto] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--adm-fg-94a3b8);
    margin-top: 0.5rem;
}

/* Search Section */
.search-section[b-wt8eeg2hto] {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--adm-bg-1e293b);
}

.search-input-group[b-wt8eeg2hto] {
    flex: 1;
    position: relative;
}

.search-icon[b-wt8eeg2hto] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--adm-fg-64748b);
}

.search-input[b-wt8eeg2hto] {
    width: 100%;
    padding: 0.875rem 2.5rem 0.875rem 2.75rem;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 12px;
    font-size: 1rem;
    background: var(--adm-bg-0f172a);
    color: var(--adm-fgon-f8fafc-e2e8f0);
}

.search-input[b-wt8eeg2hto]::placeholder {
    color: var(--adm-fgon-f8fafc-64748b);
}

.clear-btn[b-wt8eeg2hto] {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--adm-bg-334155);
    border-radius: 8px;
    color: var(--adm-fgon-f1f5f9-94a3b8);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.clear-btn:active[b-wt8eeg2hto] {
    background: var(--adm-bg-475569);
}

.scan-btn[b-wt8eeg2hto] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3b82f6;
    border: none;
    border-radius: 12px;
    color: white;
    cursor: pointer;
}

/* Filter Pills */
.filter-pills[b-wt8eeg2hto] {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--adm-bg-1e293b);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pill[b-wt8eeg2hto] {
    padding: 0.625rem 1rem;
    min-height: 40px;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 20px;
    background: var(--adm-bg-0f172a);
    font-size: 0.8125rem;
    color: var(--adm-fgon-f8fafc-94a3b8);
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.pill:active[b-wt8eeg2hto] {
    transform: scale(0.97);
}

.pill.active[b-wt8eeg2hto] {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

/* Item List */
.item-list[b-wt8eeg2hto] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.count-item[b-wt8eeg2hto] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--adm-bg-1e293b);
    border-radius: 12px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: transform 0.1s;
}

.count-item:active[b-wt8eeg2hto] {
    transform: scale(0.98);
}

.count-item.counted[b-wt8eeg2hto] {
    background: var(--adm-bg-10b981-a0_1);
    border-left: 3px solid var(--adm-bdon-e1f4f0-10b981);
}

.count-item.has-variance[b-wt8eeg2hto] {
    background: var(--adm-bg-fbbf24-a0_1);
    border-left: 3px solid var(--adm-bdon-f8f4e6-fbbf24);
}

.item-main[b-wt8eeg2hto] {
    flex: 1;
    min-width: 0;
}

.item-name[b-wt8eeg2hto] {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--adm-fg-f1f5f9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-sku[b-wt8eeg2hto] {
    display: block;
    font-size: 0.75rem;
    color: var(--adm-fg-94a3b8);
    /* A barcode/SKU is one long unbreakable token. .item-main is min-width:0 so
       it absorbs the row's squeeze; without the same clamp .item-name has, an
       EAN-13 paints straight out of the box and over the count columns. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-counts[b-wt8eeg2hto] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.system-stock[b-wt8eeg2hto], .counted-stock[b-wt8eeg2hto] {
    text-align: center;
}

.system-stock .label[b-wt8eeg2hto], .counted-stock .label[b-wt8eeg2hto] {
    display: block;
    font-size: 0.625rem;
    color: var(--adm-fg-64748b);
    text-transform: uppercase;
}

.system-stock .value[b-wt8eeg2hto], .counted-stock .value[b-wt8eeg2hto] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--adm-fg-e2e8f0);
}

.counted-stock.filled .value[b-wt8eeg2hto] {
    color: var(--adm-fg-4ade80);
}

.variance[b-wt8eeg2hto] {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.variance.negative[b-wt8eeg2hto] {
    background: var(--adm-bg-dc2626-a0_2);
    color: var(--adm-fgon-f2d0d1-f87171);
}

.variance.positive[b-wt8eeg2hto] {
    background: var(--adm-bg-22c55e-a0_2);
    color: var(--adm-fgon-cdefdc-4ade80);
}

.chevron[b-wt8eeg2hto] {
    color: var(--adm-fg-64748b);
}

/* Action Bar */
.action-bar[b-wt8eeg2hto] {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--adm-bg-1e293b);
    border-top: 1px solid var(--adm-bdon-ffffff-334155);
}

.action-bar .btn[b-wt8eeg2hto] {
    flex: 1;
}

/* Modal */
.modal-overlay[b-wt8eeg2hto] {
    position: fixed;
    inset: 0;
    background: var(--adm-scrim-000000-a0_6);
    display: flex;
    align-items: flex-end;
    z-index: 100;
}

.count-modal[b-wt8eeg2hto] {
    background: var(--adm-bg-1e293b);
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header[b-wt8eeg2hto] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--adm-bd-334155);
}

.modal-header h2[b-wt8eeg2hto] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: var(--adm-fg-f1f5f9);
    /* Item names can be long and space-free ("COCA-COLA_ZERO_330ML"); let the
       title shrink and break rather than shove the close button off-screen. */
    min-width: 0;
    overflow-wrap: anywhere;
}

.close-btn[b-wt8eeg2hto] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--adm-bg-334155);
    border-radius: 10px;
    color: var(--adm-fgon-f1f5f9-94a3b8);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.close-btn:active[b-wt8eeg2hto] {
    transform: scale(0.95);
}

.modal-body[b-wt8eeg2hto] {
    padding: 1.5rem 1rem;
}

.system-info[b-wt8eeg2hto] {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    background: var(--adm-bg-0f172a);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.info-label[b-wt8eeg2hto] {
    font-size: 0.875rem;
    color: var(--adm-fg-94a3b8);
}

.info-value[b-wt8eeg2hto] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--adm-fg-f1f5f9);
}

.count-input-section[b-wt8eeg2hto] {
    margin-bottom: 1rem;
}

.count-input-section label[b-wt8eeg2hto] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--adm-fg-e2e8f0);
    margin-bottom: 0.75rem;
}

.count-input-group[b-wt8eeg2hto] {
    display: flex;
    flex-wrap: wrap;   /* the count box's hint, when it has one, takes its own line under − box + */
    align-items: center;
    gap: 0.75rem;
}

.adjust-btn[b-wt8eeg2hto] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--adm-bg-334155);
    border: none;
    border-radius: 12px;
    color: var(--adm-fgon-f1f5f9-e2e8f0);
    cursor: pointer;
    font-size: 1.5rem;
}

/* The count box is a QuantityBox, a child component: a scoped rule reaches its input and hint only through ::deep.
   min-width 0 drops site.css's generic 220px, so −, the box and + stay on one line on a phone. */
.count-input-group[b-wt8eeg2hto]  .count-input {
    flex: 1;
    min-width: 0;
    padding: 1rem;
    border: 2px solid var(--adm-bdon-f8fafc-3b82f6);
    border-radius: 12px;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    background: var(--adm-bg-0f172a);
    color: var(--adm-fgon-f8fafc-f1f5f9);
}

.count-input-group[b-wt8eeg2hto]  .quantity-hint {
    order: 1;          /* after the + button */
    flex-basis: 100%;  /* on a line of its own */
    margin-top: 0;
    text-align: center;
}

.variance-preview[b-wt8eeg2hto] {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.variance-preview.negative[b-wt8eeg2hto] {
    background: var(--adm-bg-dc2626-a0_15);
}

.variance-preview.positive[b-wt8eeg2hto] {
    background: var(--adm-bg-22c55e-a0_15);
}

.variance-label[b-wt8eeg2hto] {
    font-size: 0.875rem;
    color: var(--adm-fg-94a3b8);
}

.variance-value[b-wt8eeg2hto] {
    font-size: 1rem;
    font-weight: 600;
}

.variance-preview.negative .variance-value[b-wt8eeg2hto] {
    color: var(--adm-fg-f87171);
}

.variance-preview.positive .variance-value[b-wt8eeg2hto] {
    color: var(--adm-fg-4ade80);
}

.quick-set[b-wt8eeg2hto] {
    display: flex;
    gap: 0.5rem;
}

.quick-btn[b-wt8eeg2hto] {
    flex: 1;
    padding: 0.625rem;
    background: var(--adm-bg-334155);
    border: none;
    border-radius: 8px;
    font-size: 0.8125rem;
    color: var(--adm-fgon-f1f5f9-e2e8f0);
    cursor: pointer;
}

.quick-btn:hover[b-wt8eeg2hto] {
    background: var(--adm-bghov-f1f5f9-475569);
}

.modal-footer[b-wt8eeg2hto] {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    border-top: 1px solid var(--adm-bd-334155);
}

.modal-footer .btn[b-wt8eeg2hto] {
    flex: 1;
}

/* Safe area padding for iOS */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .action-bar[b-wt8eeg2hto], .modal-footer[b-wt8eeg2hto] {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }
}

/* Phone: .filter-pills is already a scroller, but the pills default to
   flex-shrink:1, so instead of scrolling they shrink to min-content and eat
   their own padding (the 4 pills want ~430px, a 390px viewport offers ~334px).
   Pin them to their natural width — the same treatment admin-mobile.css gives
   .tab / .period-btn — and restate the 44px touch target, which the base .pill
   rule (scoped, so it outranks the global `button` selector) overrides to 40px. */
@media (max-width: 640px) {
    .pill[b-wt8eeg2hto] {
        flex: 0 0 auto;
        min-height: 44px;
    }
}

/* Small phones: .item-main is the count row's shock absorber (min-width:0), so
   every px the row spends on padding and gaps is taken straight off the item
   name — at 360px it collapses to ~60px. Claw it back from the chrome instead. */
@media (max-width: 480px) {
    .count-item[b-wt8eeg2hto] {
        gap: 0.5rem;
        padding: 0.875rem 0.75rem;
    }

    .item-counts[b-wt8eeg2hto] {
        gap: 0.5rem;
    }
}
/* /Pages/Admin/OnlineOrders.razor.rz.scp.css */
.online-orders-page[b-lbwtgzdcwm] { padding: 24px; max-width: 1400px; }

.page-header[b-lbwtgzdcwm] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.page-header h1[b-lbwtgzdcwm] { font-size: 1.6rem; font-weight: 700; color: var(--adm-fg-ffffff); margin: 0; }
.page-header .sub[b-lbwtgzdcwm] { color: var(--adm-fg-888888); font-size: 0.85rem; }
.header-right[b-lbwtgzdcwm] { display: flex; gap: 8px; }

.btn-refresh[b-lbwtgzdcwm] {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 8px; border: 1px solid var(--adm-bdon-ffffff-333333);
    background: var(--adm-bg-1a1a1a); color: var(--adm-fgon-ffffff-cccccc); font-size: 0.82rem; cursor: pointer;
    transition: all 0.15s;
}
.btn-refresh:hover[b-lbwtgzdcwm] { background: var(--adm-bghov-ffffff-252525); border-color: var(--adm-bdon-ebebeb-555555); color: var(--adm-fgon-ebebeb-ffffff); }

/* Summary Cards */
.summary-cards[b-lbwtgzdcwm] { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 24px; }
.summary-card[b-lbwtgzdcwm] {
    background: var(--adm-bg-141414); border: 1px solid var(--adm-bdon-ffffff-222222); border-radius: 12px;
    padding: 16px; text-align: center;
}
.card-number[b-lbwtgzdcwm] { font-size: 1.6rem; font-weight: 700; color: var(--adm-fg-ffffff); }
.card-label[b-lbwtgzdcwm] { font-size: 0.75rem; color: var(--adm-fg-888888); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.active-card[b-lbwtgzdcwm] { border-color: var(--adm-bd-3b82f6); }
.active-card .card-number[b-lbwtgzdcwm] { color: var(--adm-fg-60a5fa); }
.received-card[b-lbwtgzdcwm] { border-color: var(--adm-bd-f59e0b); }
.received-card .card-number[b-lbwtgzdcwm] { color: var(--adm-fg-fbbf24); }
.preparing-card[b-lbwtgzdcwm] { border-color: var(--adm-bd-8b5cf6); }
.preparing-card .card-number[b-lbwtgzdcwm] { color: var(--adm-fg-a78bfa); }
.ready-card[b-lbwtgzdcwm] { border-color: var(--adm-bd-10b981); }
.ready-card .card-number[b-lbwtgzdcwm] { color: var(--adm-fg-34d399); }
.completed-card[b-lbwtgzdcwm] { border-color: var(--adm-bd-4b5563); }
.completed-card .card-number[b-lbwtgzdcwm] { color: var(--adm-fg-6b7280); }
.revenue-card[b-lbwtgzdcwm] { border-color: var(--adm-bd-10b981); }
.revenue-card .card-number[b-lbwtgzdcwm] { color: var(--adm-fg-34d399); }

/* Filter Bar */
.filter-bar[b-lbwtgzdcwm] { margin-bottom: 20px; }
.filter-tabs[b-lbwtgzdcwm] { display: flex; gap: 4px; background: var(--adm-bg-111111); border-radius: 10px; padding: 4px; width: fit-content; }
.filter-tab[b-lbwtgzdcwm] {
    padding: 8px 20px; border-radius: 8px; border: none;
    background: transparent; color: var(--adm-fg-888888); font-size: 0.82rem;
    cursor: pointer; transition: all 0.15s;
}
.filter-tab:hover[b-lbwtgzdcwm] { color: var(--adm-fg-cccccc); }
.filter-tab.active[b-lbwtgzdcwm] { background: var(--adm-bg-252525); color: var(--adm-fgon-ffffff-ffffff); font-weight: 600; }

/* Orders Grid */
.orders-grid[b-lbwtgzdcwm] { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }

.order-card[b-lbwtgzdcwm] {
    background: var(--adm-bg-141414); border: 1px solid var(--adm-bdon-ffffff-222222); border-radius: 14px;
    padding: 18px; display: flex; flex-direction: column; gap: 12px;
    transition: border-color 0.2s;
}
.order-card.status-received[b-lbwtgzdcwm] { border-left: 3px solid var(--adm-bd-f59e0b); }
.order-card.status-preparing[b-lbwtgzdcwm] { border-left: 3px solid var(--adm-bd-8b5cf6); }
.order-card.status-ready[b-lbwtgzdcwm] { border-left: 3px solid var(--adm-bd-10b981); }
.order-card.status-delivery[b-lbwtgzdcwm] { border-left: 3px solid var(--adm-bd-3b82f6); }
.order-card.status-completed[b-lbwtgzdcwm] { border-left: 3px solid var(--adm-bd-4b5563); opacity: 0.7; }
.order-card.status-cancelled[b-lbwtgzdcwm] { border-left: 3px solid var(--adm-bd-ef4444); opacity: 0.5; }

/* A new order, until someone acts on it */
.order-card.is-new[b-lbwtgzdcwm] { border-color: var(--adm-bd-f59e0b); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25); animation: newOrderPulse-b-lbwtgzdcwm 1.2s ease-out 3; }
@keyframes newOrderPulse-b-lbwtgzdcwm { 0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); } 100% { box-shadow: 0 0 0 12px rgba(245, 158, 11, 0); } }
.new-badge[b-lbwtgzdcwm] { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #1f1300; background: #f59e0b;
             padding: 2px 8px; border-radius: 999px; }

/* Order Header */
.order-header[b-lbwtgzdcwm] { display: flex; align-items: center; gap: 8px; }
.order-number[b-lbwtgzdcwm] { font-size: 1.2rem; font-weight: 700; color: var(--adm-fg-ffffff); }
.order-type-badge[b-lbwtgzdcwm], .order-status-badge[b-lbwtgzdcwm] {
    font-size: 0.7rem; font-weight: 600; padding: 3px 8px; border-radius: 6px;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.order-type-badge.takeaway[b-lbwtgzdcwm] { background: var(--adm-bg-1e3a5f); color: var(--adm-fgon-eff6ff-60a5fa); }
.order-type-badge.delivery[b-lbwtgzdcwm] { background: var(--adm-bg-3b1f0b); color: var(--adm-fgon-f9e8dd-fb923c); }
.order-type-badge.dinein[b-lbwtgzdcwm] { background: var(--adm-bg-1a3320); color: var(--adm-fgon-dff6e5-4ade80); }
.order-type-badge.counter[b-lbwtgzdcwm] { background: var(--adm-bg-1f2937); color: var(--adm-fgon-ffffff-9ca3af); }
.order-status-badge.received[b-lbwtgzdcwm] { background: var(--adm-bg-3b2f00); color: var(--adm-fgon-fef6d7-fbbf24); }
.order-status-badge.preparing[b-lbwtgzdcwm] { background: var(--adm-bg-2e1065); color: var(--adm-fgon-e6dcf9-a78bfa); }
.order-status-badge.ready[b-lbwtgzdcwm], .order-status-badge.readyforpickup[b-lbwtgzdcwm] { background: var(--adm-bg-052e16); color: var(--adm-fgon-dafbe8-34d399); }
.order-status-badge.outfordelivery[b-lbwtgzdcwm] { background: var(--adm-bg-1e3a5f); color: var(--adm-fgon-eff6ff-60a5fa); }
.order-status-badge.completed[b-lbwtgzdcwm] { background: var(--adm-bg-1f2937); color: var(--adm-fgon-ffffff-9ca3af); }
.order-status-badge.cancelled[b-lbwtgzdcwm] { background: var(--adm-bg-450a0a); color: var(--adm-fgon-fee2e2-fca5a5); }

/* Customer Info */
.order-customer[b-lbwtgzdcwm] { display: flex; flex-direction: column; gap: 4px; }
.customer-name[b-lbwtgzdcwm] { font-weight: 600; color: var(--adm-fg-e5e5e5); font-size: 0.9rem; }
.customer-phone[b-lbwtgzdcwm], .customer-address[b-lbwtgzdcwm] { color: var(--adm-fg-888888); font-size: 0.8rem; display: flex; align-items: center; gap: 4px; }
.customer-address[b-lbwtgzdcwm] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.order-scheduled[b-lbwtgzdcwm] {
    display: flex; align-items: center; gap: 4px;
    font-size: 0.8rem; color: var(--adm-fgon-fef6d7-f59e0b);
    background: var(--adm-bg-3b2f00); padding: 4px 10px; border-radius: 6px; width: fit-content;
}

/* Items */
.order-items[b-lbwtgzdcwm] { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--adm-bd-222222); padding-top: 10px; }
.order-item-row[b-lbwtgzdcwm] { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--adm-fg-cccccc); }
.item-qty[b-lbwtgzdcwm] { font-weight: 600; color: var(--adm-fg-888888); min-width: 24px; }
.item-name[b-lbwtgzdcwm] { flex: 1; }
/* What the guest chose ("Grande"): the counter must make that one. */
.item-options[b-lbwtgzdcwm] { display: block; font-size: 0.75rem; color: var(--adm-fg-888888); }
.item-notes[b-lbwtgzdcwm] { font-size: 0.75rem; }

/* Paid online already, or to charge on handing over. */
.order-pay-badge[b-lbwtgzdcwm] { font-size: 0.7rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.order-pay-badge.paid[b-lbwtgzdcwm] { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.order-pay-badge.due[b-lbwtgzdcwm] { background: rgba(245, 158, 11, 0.15); color: #d97706; }
.order-pay-badge.refunded[b-lbwtgzdcwm] { background: rgba(100, 116, 139, 0.15); color: #64748b; }

/* The second tap before cancelling (and refunding) an order. */
.order-cancel-confirm[b-lbwtgzdcwm] { border-top: 1px solid var(--adm-bd-222222); padding-top: 10px; }
.occ-question[b-lbwtgzdcwm] { margin: 0 0 4px; font-weight: 700; font-size: 0.88rem; color: var(--adm-fg-ffffff); }
.occ-refund[b-lbwtgzdcwm] { margin: 0 0 8px; font-size: 0.8rem; color: var(--adm-fg-cccccc); }
.order-cancel-confirm .order-actions[b-lbwtgzdcwm] { border-top: none; padding-top: 4px; }
.order-cancel-confirm .btn-cancel[b-lbwtgzdcwm] { background: #dc2626; border-color: #dc2626; color: #fff; }
.btn-keep[b-lbwtgzdcwm] { background: transparent; border: 1px solid var(--adm-bd-444444); color: var(--adm-fg-cccccc); }
.order-item-more[b-lbwtgzdcwm] { font-size: 0.78rem; color: var(--adm-fg-666666); font-style: italic; }

/* Totals */
.order-totals[b-lbwtgzdcwm] { border-top: 1px solid var(--adm-bd-222222); padding-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.total-row[b-lbwtgzdcwm] { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--adm-fg-888888); }
.total-row.total[b-lbwtgzdcwm] { color: var(--adm-fg-ffffff); font-weight: 700; font-size: 0.95rem; }
.total-row.discount[b-lbwtgzdcwm] { color: var(--adm-fg-10b981); }

/* Neutralize the global site.css dark-mode .total white-pill leak
   (:root[data-theme="dark"] .total) — this card is already dark, so the total
   row wants white text on the card, not a white slab with near-black text. */
:root[data-theme="dark"] .total-row.total[b-lbwtgzdcwm] {
    background: transparent;
    color: #fff;
    border: none;
}

.order-time[b-lbwtgzdcwm] { font-size: 0.75rem; color: var(--adm-fg-555555); }

/* Actions */
.order-actions[b-lbwtgzdcwm] { display: flex; gap: 8px; border-top: 1px solid var(--adm-bd-222222); padding-top: 12px; }
.btn-action[b-lbwtgzdcwm] {
    flex: 1; padding: 8px 12px; border-radius: 8px; border: none;
    font-size: 0.82rem; font-weight: 600; cursor: pointer;
    transition: all 0.15s;
    /* 44px touch target — this is an operations queue used on tablet/mobile
       (buttons were ~37px from padding alone). */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-prepare[b-lbwtgzdcwm] { background: #7c3aed; color: #fff; }
.btn-prepare:hover[b-lbwtgzdcwm] { background: #6d28d9; }
.btn-ready[b-lbwtgzdcwm] { background: #10b981; color: #fff; }
.btn-ready:hover[b-lbwtgzdcwm] { background: var(--adm-bghov-10b981-059669); }
.btn-deliver[b-lbwtgzdcwm] { background: #3b82f6; color: #fff; }
.btn-deliver:hover[b-lbwtgzdcwm] { background: #2563eb; }
.btn-complete[b-lbwtgzdcwm] { background: #10b981; color: #fff; }
.btn-complete:hover[b-lbwtgzdcwm] { background: var(--adm-bghov-10b981-059669); }
.btn-cancel[b-lbwtgzdcwm] { background: transparent; border: 1px solid var(--adm-bd-444444); color: var(--adm-fg-888888); }
.btn-cancel:hover[b-lbwtgzdcwm] { border-color: var(--adm-bd-ef4444); color: var(--adm-fg-ef4444); }
.btn-action:focus-visible[b-lbwtgzdcwm] { outline: 2px solid currentColor; outline-offset: 2px; }
.btn-action:disabled[b-lbwtgzdcwm] { opacity: 0.5; cursor: not-allowed; }
.btn-action:disabled:hover[b-lbwtgzdcwm] { filter: none; }

/* Error banner */
.error-banner[b-lbwtgzdcwm] {
    background: var(--adm-bg-450a0a); border: 1px solid var(--adm-bdon-fee2e2-dc2626); color: var(--adm-fgon-fee2e2-fca5a5);
    padding: 10px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 0.85rem;
}

/* What a cancel did ("Pedido #12 cancelado: 4,60 € devueltos…") */
.notice-banner[b-lbwtgzdcwm] {
    background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.4); color: #10b981;
    padding: 10px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 0.85rem;
}

/* Empty / Loading states */
.loading-state[b-lbwtgzdcwm], .empty-state[b-lbwtgzdcwm] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 60px; color: var(--adm-fg-666666); font-size: 0.9rem; gap: 16px;
}

/* Responsive */
@media (max-width: 1200px) { .summary-cards[b-lbwtgzdcwm] { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) {
    .online-orders-page[b-lbwtgzdcwm] { padding: 16px; }
    .summary-cards[b-lbwtgzdcwm] { grid-template-columns: repeat(2, 1fr); }
    .orders-grid[b-lbwtgzdcwm] { grid-template-columns: 1fr; }
    .page-header[b-lbwtgzdcwm] { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* Phone (<=600px): keep the KPI grid and filter tabs inside the viewport.
   Placed at end-of-stylesheet so these win the source-order tie over the base
   rules above (this codebase has later-base-rule-beats-media traps). */
@media (max-width: 600px) {
    /* Never let the page itself create horizontal scroll. */
    .online-orders-page[b-lbwtgzdcwm] { max-width: 100%; overflow-x: hidden; }

    /* KPI cards: 2 even columns that actually fit. Grid items default to
       min-width:auto, so a wide label/number can push a track past 1fr and
       blow the grid off the right edge — pin min-width:0 + reset padding so
       the cards shrink to half the screen. */
    .summary-cards[b-lbwtgzdcwm] { grid-template-columns: 1fr 1fr; gap: 8px; }
    .summary-card[b-lbwtgzdcwm] { min-width: 0; padding: 12px 10px; }
    .card-number[b-lbwtgzdcwm] { font-size: 1.3rem; }
    .card-label[b-lbwtgzdcwm] { font-size: 0.65rem; letter-spacing: 0.3px; }

    /* Filter tabs: scroll horizontally instead of clipping "Cancelados". */
    .filter-bar[b-lbwtgzdcwm] { overflow: hidden; }
    .filter-tabs[b-lbwtgzdcwm] {
        width: auto;
        max-width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .filter-tab[b-lbwtgzdcwm] { flex: 0 0 auto; white-space: nowrap; padding: 8px 16px; }

    /* Delivery address: the desktop one-line ellipsis relies on white-space:nowrap,
       whose min-content size is the WHOLE line (up to 50 chars from TruncateAddress
       ~ 346px). The card is a grid item (min-width:auto = min-content), so that one
       line drags the 1fr track wider than the phone and every card gets clipped by
       the page's overflow-x:hidden. On phone let it wrap onto 2 lines instead. */
    .customer-address[b-lbwtgzdcwm] {
        white-space: normal;
        overflow: visible;
        overflow-wrap: anywhere;
        align-items: flex-start;
    }
    .customer-address svg[b-lbwtgzdcwm] { flex: 0 0 auto; margin-top: 3px; }

    /* Same min-content trap, smaller blast radius: a long menu-item name or the
       three header badges ("LISTO PARA RECOGER" + "DOMICILIO" + "#123") can't
       shrink below their content on one line. */
    .order-header[b-lbwtgzdcwm] { flex-wrap: wrap; row-gap: 6px; }
    .item-name[b-lbwtgzdcwm] { min-width: 0; overflow-wrap: anywhere; }
}
/* /Pages/Admin/OnlineSettings.razor.rz.scp.css */
.online-settings-page[b-1np7lkd0or] {
    padding: 0 16px 40px;
    max-width: 800px;
    margin: 0 auto;
}

.page-header[b-1np7lkd0or] {
    padding: 20px 0 12px;
}

.page-header h1[b-1np7lkd0or] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--adm-fg-f1f5f9);
}

.page-header .sub[b-1np7lkd0or] {
    font-size: 0.85rem;
    color: var(--adm-fg-94a3b8);
    display: block;
    margin-top: 4px;
}

/* Message banner */
.message-banner[b-1np7lkd0or] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 0.875rem;
}

.message-banner.success[b-1np7lkd0or] {
    background: var(--adm-bg-22c55e-a0_15);
    color: var(--adm-fgon-d8f2e4-4ade80);
    border: 1px solid var(--adm-bd-22c55e-a0_3);
}

.message-banner.error[b-1np7lkd0or] {
    background: var(--adm-bg-dc2626-a0_15);
    color: var(--adm-fgon-f4dadc-f87171);
    border: 1px solid var(--adm-bd-dc2626-a0_3);
}

.message-banner .dismiss[b-1np7lkd0or] {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.7;
}

.message-banner .dismiss:hover[b-1np7lkd0or] {
    opacity: 1;
}

/* Loading & empty states */
.loading-spinner[b-1np7lkd0or] {
    text-align: center;
    padding: 60px 20px;
    color: var(--adm-fg-94a3b8);
}

.empty-state[b-1np7lkd0or] {
    text-align: center;
    padding: 40px 20px;
    color: var(--adm-fg-94a3b8);
}

/* Settings cards */
.settings-card[b-1np7lkd0or] {
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}

.card-header[b-1np7lkd0or] {
    padding: 14px 20px;
    border-bottom: 1px solid var(--adm-bd-334155);
}

.card-header h2[b-1np7lkd0or] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--adm-fg-e2e8f0);
}

.card-body[b-1np7lkd0or] {
    padding: 16px 20px;
}

/* Setup guide */
.setup-guide[b-1np7lkd0or] {
    border-color: var(--adm-bdon-ffffff-6366f1);
    background: linear-gradient(135deg, var(--adm-bggrad-1e293b) 0%, var(--adm-bggrad-1e1b4b) 100%);
}

.setup-guide .card-header[b-1np7lkd0or] {
    border-bottom-color: var(--adm-bd-6366f1-a0_3);
}

.guide-intro[b-1np7lkd0or] {
    color: var(--adm-fg-cbd5e1);
    margin: 0 0 16px;
    font-size: 0.9rem;
}

.guide-steps[b-1np7lkd0or] {
    list-style: none;
    counter-reset: guide;
    padding: 0;
    margin: 0;
}

.guide-steps li[b-1np7lkd0or] {
    counter-increment: guide;
    position: relative;
    padding: 12px 12px 12px 48px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: var(--adm-bg-ffffff-a0_04);
    color: var(--adm-fgon-eff2f4-e2e8f0);
    font-size: 0.875rem;
    line-height: 1.5;
    transition: background 0.2s;
}

.guide-steps li[b-1np7lkd0or]::before {
    content: counter(guide);
    position: absolute;
    left: 12px;
    top: 12px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--adm-bg-334155);
    color: var(--adm-fgon-f1f5f9-94a3b8);
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guide-steps li.done[b-1np7lkd0or] {
    background: var(--adm-bg-22c55e-a0_08);
}

.guide-steps li.done[b-1np7lkd0or]::before {
    background: #22c55e;
    color: #fff;
    content: "\2713";
}

.guide-steps li.skip[b-1np7lkd0or] {
    opacity: 0.45;
}

.guide-steps li.skip[b-1np7lkd0or]::before {
    content: "\2014";
}

.guide-steps li strong[b-1np7lkd0or] {
    color: var(--adm-fg-f1f5f9);
}

.guide-steps li a[b-1np7lkd0or] {
    color: var(--adm-fg-818cf8);
    text-decoration: underline;
}

.guide-steps li code[b-1np7lkd0or] {
    background: var(--adm-bg-6366f1-a0_2);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--adm-fgon-dadcfa-a5b4fc);
}

/* Toggle rows */
.toggle-row[b-1np7lkd0or] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    gap: 16px;
}

.toggle-row + .toggle-row[b-1np7lkd0or] {
    border-top: 1px solid var(--adm-bd-334155);
}

.toggle-row strong[b-1np7lkd0or] {
    color: var(--adm-fg-e2e8f0);
    font-size: 0.9rem;
}

.toggle-row .hint[b-1np7lkd0or] {
    margin: 2px 0 0;
    font-size: 0.8rem;
    color: var(--adm-fg-94a3b8);
}

.main-toggle[b-1np7lkd0or] {
    background: var(--adm-bg-6366f1-a0_06);
    padding: 14px;
    margin: -16px -20px;
    border-radius: 0;
}

/* Toggle switch */
.switch[b-1np7lkd0or] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.switch input[b-1np7lkd0or] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-1np7lkd0or] {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: var(--adm-track-ffffff-bg-475569);
    border-radius: 24px;
    transition: background-color 0.2s;
}

.slider[b-1np7lkd0or]::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

input:checked + .slider[b-1np7lkd0or] {
    background-color: #6366f1;
}

input:checked + .slider[b-1np7lkd0or]::before {
    transform: translateX(20px);
}

/* Form rows */
.form-row[b-1np7lkd0or] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    gap: 12px;
}

.form-row + .form-row[b-1np7lkd0or] {
    border-top: 1px solid var(--adm-bd-334155);
}

.form-row label[b-1np7lkd0or] {
    color: var(--adm-fg-e2e8f0);
    font-size: 0.875rem;
    flex: 1;
}

.form-row .hint[b-1np7lkd0or] {
    display: block;
    font-size: 0.75rem;
    color: var(--adm-fg-94a3b8);
    margin-top: 2px;
}

/* A wide field (an email, an API key): its label above it, not squeezed to one word per line beside it. */
.form-row.stacked[b-1np7lkd0or] {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.form-row.stacked label[b-1np7lkd0or] {
    flex: none;
}

.form-input[b-1np7lkd0or] {
    background: var(--adm-bg-0f172a);
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--adm-fgon-f8fafc-e2e8f0);
    font-size: 0.875rem;
}

.form-input:focus[b-1np7lkd0or] {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-6366f1);
}

.form-input.short[b-1np7lkd0or] {
    width: 80px;
    text-align: center;
}

.form-input.wide[b-1np7lkd0or] {
    width: 100%;
    flex: 1;
}

/* Delivery zones */
.zone-list[b-1np7lkd0or] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.zone-card[b-1np7lkd0or] {
    background: var(--adm-bg-0f172a);
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.zone-info[b-1np7lkd0or] {
    flex: 1;
}

.zone-name[b-1np7lkd0or] {
    font-weight: 600;
    color: var(--adm-fg-e2e8f0);
    font-size: 0.9rem;
}

.zone-details[b-1np7lkd0or] {
    font-size: 0.8rem;
    color: var(--adm-fg-94a3b8);
    margin-top: 2px;
}

.zone-actions[b-1np7lkd0or] {
    display: flex;
    gap: 8px;
}

/* Schedule grid */
.schedule-grid[b-1np7lkd0or] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.schedule-day[b-1np7lkd0or] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.schedule-day + .schedule-day[b-1np7lkd0or] {
    border-top: 1px solid var(--adm-bd-1e293b);
}

.day-name[b-1np7lkd0or] {
    width: 90px;
    color: var(--adm-fg-e2e8f0);
    font-size: 0.875rem;
    font-weight: 500;
}

.time-inputs[b-1np7lkd0or] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.time-inputs input[type="time"][b-1np7lkd0or] {
    background: var(--adm-bg-0f172a);
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 6px;
    padding: 6px 8px;
    color: var(--adm-fgon-f8fafc-e2e8f0);
    font-size: 0.8rem;
}

/* Buttons */
.btn-primary[b-1np7lkd0or] {
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-primary:hover[b-1np7lkd0or] {
    background: #4f46e5;
}

.btn-primary:disabled[b-1np7lkd0or] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary[b-1np7lkd0or] {
    background: var(--adm-bg-334155);
    color: var(--adm-fgon-f1f5f9-e2e8f0);
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-secondary:hover[b-1np7lkd0or] {
    background: var(--adm-bghov-f1f5f9-475569);
}

.btn-danger[b-1np7lkd0or] {
    background: transparent;
    color: var(--adm-fg-f87171);
    border: 1px solid var(--adm-bd-dc2626-a0_3);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-danger:hover[b-1np7lkd0or] {
    background: var(--adm-bg-dc2626-a0_15);
}

.btn-link[b-1np7lkd0or] {
    background: none;
    border: none;
    color: var(--adm-fg-818cf8);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
    text-decoration: underline;
}

/* Save bar */
.save-bar[b-1np7lkd0or] {
    position: sticky;
    bottom: 0;
    background: var(--adm-bg-1e293b);
    border-top: 1px solid var(--adm-bdon-ffffff-334155);
    padding: 12px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin: 16px -16px -40px;
}

/* Responsive */
@media (max-width: 600px) {
    .online-settings-page[b-1np7lkd0or] {
        padding: 0 10px 32px;
    }

    .form-row[b-1np7lkd0or] {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-input.short[b-1np7lkd0or] {
        width: 100%;
    }

    .zone-card[b-1np7lkd0or] {
        flex-direction: column;
        align-items: flex-start;
    }

    .schedule-day[b-1np7lkd0or] {
        flex-wrap: wrap;
    }

    /* NOTE: the stepper's mobile rules are NOT here — they live in the @media block
       at the END of this file. This block sits BEFORE the base .setup-stepper /
       .step / .step-connector rules (lines ~522-599), and a media query carries no
       extra specificity, so anything declared here for those selectors is simply
       overridden by the later base rule. */

    .nav-bar-bottom[b-1np7lkd0or] {
        flex-direction: column;
        gap: 8px;
    }
}

/* Setup stepper */
.setup-stepper[b-1np7lkd0or] {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 20px;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--adm-bggrad-1e293b) 0%, var(--adm-bggrad-1a1f3a) 100%);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 12px;
}

.step[b-1np7lkd0or] {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: opacity 0.2s;
}

.step:hover[b-1np7lkd0or] { opacity: 0.85; }

.step-num[b-1np7lkd0or] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.step-num.active[b-1np7lkd0or] {
    background: linear-gradient(135deg, var(--adm-bggrad-6366f1) 0%, var(--adm-bggrad-8b5cf6) 100%);
    color: var(--adm-fgon-dedffc-ffffff);
    box-shadow: 0 0 12px var(--adm-sh-6366f1-a0_4);
}

.step-num.done[b-1np7lkd0or] {
    background: #22c55e;
    color: #fff;
}

.step-num.pending[b-1np7lkd0or] {
    background: var(--adm-bg-334155);
    color: var(--adm-fgon-f1f5f9-94a3b8);
}

.step-info[b-1np7lkd0or] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.step-label[b-1np7lkd0or] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--adm-fg-e2e8f0);
}

.step-hint[b-1np7lkd0or] {
    font-size: 0.7rem;
    color: var(--adm-fg-64748b);
}

.step.current .step-label[b-1np7lkd0or] { color: var(--adm-fg-a5b4fc); }

.step-connector[b-1np7lkd0or] {
    flex: 1;
    height: 2px;
    margin: 0 16px;
    background: var(--adm-bg-334155);
}

.step-connector.done[b-1np7lkd0or] { background: #22c55e; }

/* Bottom navigation */
.nav-bar-bottom[b-1np7lkd0or] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--adm-bggrad-1e293b) 0%, var(--adm-bggrad-1a1f3a) 100%);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 12px;
}

.nav-link-back[b-1np7lkd0or],
.nav-link-next[b-1np7lkd0or] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--adm-fg-a5b4fc);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s;
}

.nav-link-back:hover[b-1np7lkd0or],
.nav-link-next:hover[b-1np7lkd0or] {
    color: var(--adm-fg-c7d2fe);
}

/* ── Setup stepper: vertical on phones ──────────────────────────────────────
   This block MUST stay at the end of the file. The earlier @media (max-width:600px)
   block is declared BEFORE the base .setup-stepper/.step/.step-connector rules, and
   a media query adds no specificity — so stepper overrides written up there lose to
   the later base rules and silently do nothing.

   The base sets align-items:center for the horizontal layout. Flipping to a column
   without resetting that centres each ROW: the three rows have different widths, so
   the circles came out staggered and the block drifted off the left edge. Stretch the
   rows so the circles line up in one column, and keep the connectors as short vertical
   segments so the steps read as one connected timeline. 15px puts the 2px rule under
   the centre of the 32px circle. Matches QrTheme.razor and Payments.razor. */
@media (max-width: 640px) {
    .setup-stepper[b-1np7lkd0or] {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 14px 16px;
    }

    .step[b-1np7lkd0or] {
        gap: 12px;
        padding: 6px 0;
    }

    .step-connector[b-1np7lkd0or] {
        flex: 0 0 auto;
        width: 2px;
        height: 14px;
        margin: 0 0 0 15px;
    }
}
/* /Pages/Admin/PriceSchedule.razor.rz.scp.css */
.price-schedule-page[b-8f92rgrce2] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-8f92rgrce2] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.page-header h1[b-8f92rgrce2] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
}

.page-header .subtitle[b-8f92rgrce2] {
    margin: 0.25rem 0 0;
    color: var(--adm-fg-94a3b8);
    font-size: 0.9rem;
}

.search-input[b-8f92rgrce2] {
    padding: 0.5rem 1rem;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    width: 250px;
    font-size: 0.9rem;
    background: var(--adm-bg-0f172a);
    color: var(--adm-fgon-f8fafc-e2e8f0);
}

.search-input[b-8f92rgrce2]::placeholder {
    color: var(--adm-fgon-f8fafc-64748b);
}

.search-input:focus[b-8f92rgrce2] {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-ff9800);
}

/* Filter Bar */
.filter-bar[b-8f92rgrce2] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.filter-btn[b-8f92rgrce2] {
    min-height: 44px;            /* touch target for POS hardware (was ~37px) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 8px;
    background: var(--adm-bg-1e293b);
    color: var(--adm-fgon-ffffff-e2e8f0);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-btn:hover[b-8f92rgrce2] {
    background: var(--adm-bghov-ffffff-334155);
}

.filter-btn.active[b-8f92rgrce2] {
    background: #FF9800;
    border-color: #FF9800;
    color: white;
}

/* Loading/Error States */
.loading-state[b-8f92rgrce2],
.error-state[b-8f92rgrce2] {
    text-align: center;
    padding: 3rem;
    background: var(--adm-bg-1e293b);
    border-radius: 12px;
    color: var(--adm-fgon-ffffff-e2e8f0);
}

.spinner[b-8f92rgrce2] {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--adm-bd-dddddd);
    border-top-color: var(--adm-bd-ff9800);
    border-radius: 50%;
    animation: spin-b-8f92rgrce2 1s linear infinite;
}

@keyframes spin-b-8f92rgrce2 {
    to { transform: rotate(360deg); }
}

/* Items Table */
.items-table[b-8f92rgrce2] {
    background: var(--adm-bg-1e293b);
    border-radius: 12px;
    box-shadow: 0 2px 8px var(--adm-sh-000000-a0_3);
    overflow: hidden;
}

.table-header[b-8f92rgrce2] {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr 1.5fr 1fr;
    gap: 1rem;
    padding: 1rem;
    background: var(--adm-bg-0f172a);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--adm-fgon-f8fafc-94a3b8);
}

.table-row[b-8f92rgrce2] {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr 1.5fr 1fr;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--adm-bd-334155);
    align-items: center;
}

.table-row:hover[b-8f92rgrce2] {
    background: var(--adm-bg-334155);
}

.table-row.has-active[b-8f92rgrce2] {
    background: var(--adm-bg-ff9800-a0_15);
}

.col-name strong[b-8f92rgrce2] {
    display: block;
    color: var(--adm-fg-e2e8f0);
}

.col-name .category[b-8f92rgrce2] {
    font-size: 0.8rem;
    color: var(--adm-fg-64748b);
}

.col-price[b-8f92rgrce2] {
    font-weight: 600;
    color: var(--adm-fg-e2e8f0);
}

/* Rules List */
.rules-list[b-8f92rgrce2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.rule-badge[b-8f92rgrce2] {
    padding: 0.2rem 0.5rem;
    background: #e3f2fd;
    color: #1976D2;
    border-radius: 4px;
    font-size: 0.75rem;
}

.rule-badge.inactive[b-8f92rgrce2] {
    background: var(--adm-bg-334155);
    color: var(--adm-fgon-f1f5f9-64748b);
}

.more-rules[b-8f92rgrce2] {
    font-size: 0.75rem;
    color: var(--adm-fg-64748b);
}

.no-rules[b-8f92rgrce2] {
    color: var(--adm-fg-64748b);
    font-size: 0.85rem;
}

/* Active Price */
.active-price[b-8f92rgrce2] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.active-price .effective[b-8f92rgrce2] {
    font-weight: 700;
    color: var(--adm-fg-ff9800);
    font-size: 1.1rem;
}

.active-price .rule-name[b-8f92rgrce2] {
    font-size: 0.75rem;
    color: var(--adm-fg-94a3b8);
}

.base-price[b-8f92rgrce2] {
    color: var(--adm-fg-94a3b8);
}

.col-actions[b-8f92rgrce2] {
    display: flex;
    gap: 0.5rem;
}

.empty-message[b-8f92rgrce2] {
    padding: 2rem;
    text-align: center;
    color: var(--adm-fg-94a3b8);
}

/* Buttons */
.btn[b-8f92rgrce2] {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    background: var(--adm-bg-334155);
    color: var(--adm-fgon-f1f5f9-e2e8f0);
    transition: background 0.2s ease;
}

.btn:hover[b-8f92rgrce2] {
    background: var(--adm-bghov-f1f5f9-475569);
}

.btn.primary[b-8f92rgrce2] {
    background: #FF9800;
    color: white;
}

.btn.primary:hover[b-8f92rgrce2] {
    background: #F57C00;
}

.btn.danger[b-8f92rgrce2] {
    background: var(--adm-bg-d32f2f-a0_2);
    color: var(--adm-fgon-f1d1d3-ef5350);
}

.btn.danger:hover[b-8f92rgrce2] {
    background: var(--adm-bg-d32f2f-a0_3);
}

.btn.small[b-8f92rgrce2] {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
}

.btn.icon[b-8f92rgrce2] {
    padding: 0.25rem 0.5rem;
}

.btn:disabled[b-8f92rgrce2] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn.add-rule[b-8f92rgrce2] {
    width: 100%;
    margin: 1rem 0;
    padding: 0.75rem;
    border: 2px dashed var(--adm-bd-475569);
    background: transparent;
    color: var(--adm-fg-94a3b8);
}

.btn.add-rule:hover[b-8f92rgrce2] {
    border-color: var(--adm-bd-ff9800);
    color: var(--adm-fg-ff9800);
}

/* Modal */
.modal-overlay[b-8f92rgrce2] {
    position: fixed;
    inset: 0;
    background: var(--adm-scrim-000000-a0_5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-content[b-8f92rgrce2] {
    background: var(--adm-bg-1e293b);
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.5rem;
    position: relative;
    color: var(--adm-fgon-ffffff-e2e8f0);
}

.modal-content.large[b-8f92rgrce2] {
    max-width: 800px;
}

.modal-close[b-8f92rgrce2] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--adm-fg-94a3b8);
    /* 44px touch target for POS hardware (was intrinsic ~30px). */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.modal-content h2[b-8f92rgrce2] {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    color: var(--adm-fgon-ffffff-e2e8f0);
}

.modal-subtitle[b-8f92rgrce2] {
    margin: 0 0 1.5rem;
    color: var(--adm-fg-94a3b8);
    font-size: 0.9rem;
}

.modal-footer[b-8f92rgrce2] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--adm-bd-334155);
}

/* Rules Editor */
.rules-editor[b-8f92rgrce2] {
    margin: 1rem 0;
}

.empty-rules[b-8f92rgrce2] {
    text-align: center;
    padding: 2rem;
    background: var(--adm-bg-0f172a);
    border-radius: 8px;
    color: var(--adm-fgon-f8fafc-94a3b8);
}

.rule-card[b-8f92rgrce2] {
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    background: var(--adm-bg-0f172a);
}

.rule-card.inactive[b-8f92rgrce2] {
    opacity: 0.7;
    background: var(--adm-bg-0f172a);
}

.rule-header[b-8f92rgrce2] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--adm-bd-334155);
}

.rule-name-input[b-8f92rgrce2] {
    flex: 1;
}

.rule-name-input input[b-8f92rgrce2] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 6px;
    font-weight: 600;
    background: var(--adm-bg-1e293b);
    color: var(--adm-fgon-ffffff-e2e8f0);
}

.rule-name-input input:focus[b-8f92rgrce2] {
    outline: none;
    border-color: var(--adm-bdon-ffffff-ff9800);
}

/* Config Groups */
.rule-config[b-8f92rgrce2] {
    display: grid;
    gap: 1rem;
}

.config-group[b-8f92rgrce2] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.config-group > label[b-8f92rgrce2] {
    min-width: 100px;
    font-weight: 500;
    font-size: 0.9rem;
    padding-top: 0.5rem;
    color: var(--adm-fg-e2e8f0);
}

/* Days Checkboxes */
.days-checkboxes[b-8f92rgrce2] {
    display: flex;
    gap: 0.25rem;
}

.day-check[b-8f92rgrce2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.day-check input[b-8f92rgrce2] {
    margin-bottom: 0.25rem;
}

.day-check span[b-8f92rgrce2] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--adm-fg-e2e8f0);
}

/* Time Inputs */
.time-inputs[b-8f92rgrce2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.time-inputs input[type="time"][b-8f92rgrce2] {
    padding: 0.5rem;
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 6px;
    background: var(--adm-bg-1e293b);
    color: var(--adm-fgon-ffffff-e2e8f0);
}

/* Discount Options */
.discount-options[b-8f92rgrce2] {
    display: flex;
    gap: 1rem;
}

.radio-option[b-8f92rgrce2] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--adm-fg-e2e8f0);
}

/* Discount Value */
.discount-value[b-8f92rgrce2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.discount-value input[b-8f92rgrce2] {
    width: 100px;
    padding: 0.5rem;
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 6px;
    background: var(--adm-bg-1e293b);
    color: var(--adm-fgon-ffffff-e2e8f0);
}

.discount-value .unit[b-8f92rgrce2] {
    color: var(--adm-fg-94a3b8);
    font-size: 0.9rem;
}

/* Rule Preview */
.rule-preview[b-8f92rgrce2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem;
    background: var(--adm-bg-0f172a);
    border-radius: 6px;
}

.preview-label[b-8f92rgrce2] {
    color: var(--adm-fg-94a3b8);
    font-size: 0.85rem;
}

.preview-original[b-8f92rgrce2] {
    text-decoration: line-through;
    color: var(--adm-fg-64748b);
}

.preview-arrow[b-8f92rgrce2] {
    color: var(--adm-fg-64748b);
}

.preview-new[b-8f92rgrce2] {
    font-weight: 700;
    color: var(--adm-fg-ff9800);
    font-size: 1.1rem;
}

.preview-savings[b-8f92rgrce2] {
    color: var(--adm-fg-4caf50);
    font-size: 0.85rem;
}

.preview-increase[b-8f92rgrce2] {
    color: var(--adm-fg-f44336);
    font-size: 0.85rem;
}

/* Quick Templates */
.quick-templates[b-8f92rgrce2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--adm-bd-334155);
}

.template-label[b-8f92rgrce2] {
    font-size: 0.85rem;
    color: var(--adm-fg-94a3b8);
}

/* Checkbox */
.checkbox[b-8f92rgrce2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: var(--adm-fg-e2e8f0);
}

.checkbox.small[b-8f92rgrce2] {
    font-size: 0.85rem;
}

/* Responsive */
@media (max-width: 1024px) {
    /* Keep the actions column (it holds "Editar" / "Añadir regla" — the only way
       to open the rule editor). It used to be display:none below 1024px, which
       left the page read-only on every tablet and phone. Sized `auto` so it only
       takes the width of the button. */
    .table-header[b-8f92rgrce2],
    .table-row[b-8f92rgrce2] {
        grid-template-columns: 1.5fr 1fr 1.5fr 1fr auto;
    }
}

@media (max-width: 768px) {
    .page-header[b-8f92rgrce2] {
        flex-direction: column;
        gap: 1rem;
    }

    .search-input[b-8f92rgrce2] {
        width: 100%;
    }

    .filter-bar[b-8f92rgrce2] {
        flex-wrap: wrap;
    }

    .table-header[b-8f92rgrce2] {
        display: none;
    }

    .table-row[b-8f92rgrce2] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem;
    }

    .config-group[b-8f92rgrce2] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .config-group > label[b-8f92rgrce2] {
        min-width: auto;
        padding-top: 0;
    }

    .discount-options[b-8f92rgrce2] {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Phone (<=640px). The shell (admin-mobile.css) already stacks .page-header,
   stretches .header-actions, sets inputs to 16px and gives buttons a 44px touch
   target. These rules only cover what is specific to this page: the rule-editor
   modal, whose rows are fixed flex lines that do not fit ~366px. */
@media (max-width: 640px) {
    /* .admin-content already supplies the horizontal padding — don't double it. */
    .price-schedule-page[b-8f92rgrce2] {
        padding: 1rem 0;
    }

    .modal-content[b-8f92rgrce2] {
        padding: 1rem;
    }

    .modal-content h2[b-8f92rgrce2] {
        padding-right: 44px;   /* clear the absolutely-positioned close button */
    }

    /* Name input + "Activa" + delete don't fit on one line: give the name its
       own row and let the other two sit under it. */
    .rule-header[b-8f92rgrce2] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .rule-name-input[b-8f92rgrce2] {
        flex: 1 1 100%;
        min-width: 0;
    }

    /* Seven day chips in a nowrap row overflow the card on a 360px phone. */
    .days-checkboxes[b-8f92rgrce2] {
        flex-wrap: wrap;
    }

    .day-check[b-8f92rgrce2] {
        min-width: 36px;
        padding: 0.25rem 0;   /* ~40px tap area for the day toggle */
    }

    /* Two <input type="time"> at the mobile 16px font are ~130px each and blow
       out the rule card; let the second one wrap onto its own line. */
    .time-inputs[b-8f92rgrce2] {
        flex-wrap: wrap;
    }

    .time-inputs input[type="time"][b-8f92rgrce2] {
        min-width: 0;
    }

    /* Preview is five inline spans; wrap them instead of breaking mid-phrase. */
    .rule-preview[b-8f92rgrce2] {
        flex-wrap: wrap;
        row-gap: 0.25rem;
    }
}

/* Note: Admin pages use a fixed dark theme from AdminLayout, so base styles are already dark-themed */

/* Happy hour belongs in Promociones: the till charges it there */
.hh-banner[b-8f92rgrce2] {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin-bottom: 1rem; padding: 12px 16px; border-radius: 10px; font-size: 0.88rem; line-height: 1.45;
    color: var(--adm-fg-e2e8f0); background: rgba(59, 130, 246, 0.10); border: 1px solid rgba(59, 130, 246, 0.35);
}
.hh-banner-link[b-8f92rgrce2] {
    flex-shrink: 0; padding: 8px 14px; border-radius: 8px; background: #2563eb; color: #fff;
    font-weight: 700; text-decoration: none; white-space: nowrap;
}
.hh-banner-link:hover[b-8f92rgrce2] { background: #1d4ed8; }
/* /Pages/Admin/Promotions.razor.rz.scp.css */
/* Dark theme admin page — Promotions */
.btn[b-p9b9qycp4z] {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 18px; min-height: 44px; border: 1px solid var(--adm-bdon-ffffff-334155); border-radius: 8px;
    font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.15s;
    background: var(--adm-bg-1e293b); color: var(--adm-fgon-ffffff-e2e8f0); white-space: nowrap;
}
.btn:hover[b-p9b9qycp4z] { background: var(--adm-bghov-ffffff-334155); }
.btn:active[b-p9b9qycp4z] { transform: scale(0.97); }
.btn.primary[b-p9b9qycp4z] { background: #2563eb; color: #fff; border-color: #1e4fcb; }
.btn.primary:hover[b-p9b9qycp4z] { background: #1d4ed8; }
.btn.primary:disabled[b-p9b9qycp4z] { background: var(--adm-bg-475569); color: var(--adm-fgon-f9fafb-94a3b8); cursor: not-allowed; }
.btn.outline[b-p9b9qycp4z] { background: transparent; border-color: var(--adm-bd-475569); color: var(--adm-fg-94a3b8); }
.btn.outline:hover[b-p9b9qycp4z] { border-color: var(--adm-bd-3b82f6); color: var(--adm-fg-e2e8f0); }
.btn.danger[b-p9b9qycp4z] { background: #dc2626; color: #fff; border-color: #b91c1c; }
.btn.danger:hover[b-p9b9qycp4z] { background: #b91c1c; }

.form-input[b-p9b9qycp4z], .form-select[b-p9b9qycp4z] {
    width: 100%; padding: 10px 12px; min-height: 44px;
    /* site.css gives every text/number input and select min-width: 220px. Without this reset four
       number fields in one row cannot shrink: they overlapped and the dialog scrolled sideways. */
    min-width: 0;
    background: var(--adm-bg-0f172a); border: 1px solid var(--adm-bdon-f8fafc-334155); border-radius: 8px;
    color: var(--adm-fgon-f8fafc-e2e8f0); font-size: 0.85rem; box-sizing: border-box;
}

/* Native controls (scrollbars, checkboxes, the time picker) follow the theme instead of
   drawing white on the dark admin. */
.promotions-page[b-p9b9qycp4z], .modal-panel[b-p9b9qycp4z] { color-scheme: dark; }
:root[data-theme="light"] .promotions-page[b-p9b9qycp4z], :root[data-theme="light"] .modal-panel[b-p9b9qycp4z] { color-scheme: light; }
.form-input:focus[b-p9b9qycp4z], .form-select:focus[b-p9b9qycp4z] { outline: none; border-color: var(--adm-bdon-f8fafc-3b82f6); box-shadow: 0 0 0 2px var(--adm-sh-3b82f6-a0_2); }
.form-input[b-p9b9qycp4z]::placeholder { color: var(--adm-fg-64748b); font-style: italic; }

.promotions-page[b-p9b9qycp4z] { padding: 24px; max-width: 1200px; margin: 0 auto; color: var(--adm-fg-e2e8f0); }

.page-header[b-p9b9qycp4z] { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.header-left[b-p9b9qycp4z] { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.header-left h1[b-p9b9qycp4z] { font-size: 1.5rem; margin: 0; color: var(--adm-fg-f1f5f9); }
.page-lede[b-p9b9qycp4z] { margin: 0; max-width: 640px; font-size: 0.88rem; line-height: 1.5; color: var(--adm-fg-94a3b8); }
.docs-link[b-p9b9qycp4z] { color: var(--adm-fg-3b82f6); font-weight: 600; text-decoration: none; white-space: nowrap; }
.docs-link:hover[b-p9b9qycp4z] { text-decoration: underline; }

.message-banner[b-p9b9qycp4z] { padding: 12px 16px; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.message-banner.success[b-p9b9qycp4z] { background: var(--adm-bg-064e3b); color: var(--adm-fgon-d1fae5-6ee7b7); border: 1px solid var(--adm-bdon-d1fae5-065f46); }
.message-banner.error[b-p9b9qycp4z] { background: var(--adm-bg-450a0a); color: var(--adm-fgon-fee2e2-fca5a5); border: 1px solid var(--adm-bdon-fee2e2-7f1d1d); }
.dismiss[b-p9b9qycp4z] { background: none; border: none; color: inherit; font-size: 1.2rem; cursor: pointer; min-width: 32px; min-height: 32px; }

.loading-state[b-p9b9qycp4z] { text-align: center; padding: 60px 0; color: var(--adm-fg-64748b); }
.spinner[b-p9b9qycp4z] { width: 32px; height: 32px; border: 3px solid var(--adm-bd-334155); border-top-color: var(--adm-bd-3b82f6); border-radius: 50%; animation: spin-b-p9b9qycp4z 0.8s linear infinite; margin: 0 auto 12px; }
.spinner-sm[b-p9b9qycp4z] { width: 16px; height: 16px; border: 2px solid var(--adm-bd-ffffff-a0_3); border-top-color: var(--adm-bd-ffffff); border-radius: 50%; animation: spin-b-p9b9qycp4z 0.6s linear infinite; display: inline-block; }
@keyframes spin-b-p9b9qycp4z { to { transform: rotate(360deg); } }

/* First promotion: start from what the venue wants to offer */
.promo-start[b-p9b9qycp4z] {
    padding: 28px; border-radius: 14px;
    border: 1px solid var(--adm-bdon-ffffff-334155);
    background: linear-gradient(120deg, rgba(37, 99, 235, 0.10), rgba(37, 99, 235, 0) 55%), var(--adm-bg-1e293b);
}
.promo-start h2[b-p9b9qycp4z] { margin: 0; font-size: 1.25rem; color: var(--adm-fg-f1f5f9); }
.promo-start > p[b-p9b9qycp4z] { margin: 6px 0 20px; font-size: 0.9rem; line-height: 1.5; color: var(--adm-fg-94a3b8); max-width: 620px; }

.template-grid[b-p9b9qycp4z] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
/* Happy hour is what most venues come for: it gets the whole first row, the rest share the second. */
.template-card.featured[b-p9b9qycp4z] {
    grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 16px; padding: 18px 20px;
    border-color: rgba(59, 130, 246, 0.45);
    background: linear-gradient(110deg, rgba(37, 99, 235, 0.16), rgba(37, 99, 235, 0.02) 60%), var(--adm-bg-0f172a);
}
.template-card.featured .template-icon[b-p9b9qycp4z] { width: 52px; height: 52px; font-size: 1.6rem; flex-shrink: 0; }
.template-text[b-p9b9qycp4z] { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.template-card.featured .template-title[b-p9b9qycp4z] { font-size: 1.1rem; }
.template-badge[b-p9b9qycp4z] {
    align-self: flex-start; padding: 2px 8px; border-radius: 999px; font-size: 0.66rem; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase; background: rgba(245, 158, 11, 0.16); color: #f59e0b;
}
.template-cta[b-p9b9qycp4z] { flex-shrink: 0; padding: 10px 16px; border-radius: 8px; background: #2563eb; color: #fff; font-size: 0.85rem; font-weight: 700; white-space: nowrap; }
.chooser .template-grid[b-p9b9qycp4z] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.template-card[b-p9b9qycp4z] {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
    padding: 16px; border-radius: 12px; cursor: pointer; font: inherit;
    border: 1px solid var(--adm-bdon-ffffff-334155); background: var(--adm-bg-0f172a); color: var(--adm-fg-e2e8f0);
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.template-card:hover[b-p9b9qycp4z], .template-card:focus-visible[b-p9b9qycp4z] {
    outline: none; border-color: var(--adm-bd-3b82f6); transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35);
}
.template-icon[b-p9b9qycp4z] {
    width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px;
    font-size: 1.25rem; background: rgba(59, 130, 246, 0.12);
}
.template-title[b-p9b9qycp4z] { font-size: 0.98rem; font-weight: 700; color: var(--adm-fg-f1f5f9); }
.template-help[b-p9b9qycp4z] { font-size: 0.8rem; line-height: 1.45; color: var(--adm-fg-94a3b8); }

/* List */
.filter-bar[b-p9b9qycp4z] { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.search-input[b-p9b9qycp4z] { max-width: 300px; }
.filter-bar .form-select[b-p9b9qycp4z] { max-width: 200px; }

.promo-grid[b-p9b9qycp4z] { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

.promo-card[b-p9b9qycp4z] {
    position: relative; overflow: hidden;
    background: var(--adm-bg-1e293b); border: 1px solid var(--adm-bdon-ffffff-334155); border-radius: 14px; padding: 16px 16px 16px 20px;
    cursor: pointer; transition: border-color 0.15s, transform 0.15s; display: flex; flex-direction: column; gap: 6px;
}
.promo-card[b-p9b9qycp4z]::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--adm-bg-475569); }
.promo-card.status-live[b-p9b9qycp4z]::before { background: #22c55e; }
.promo-card.status-waiting[b-p9b9qycp4z]::before, .promo-card.status-upcoming[b-p9b9qycp4z]::before { background: #3b82f6; }
.promo-card.status-manual[b-p9b9qycp4z]::before, .promo-card.status-expired[b-p9b9qycp4z]::before, .promo-card.status-exhausted[b-p9b9qycp4z]::before { background: #f59e0b; }
.promo-card:hover[b-p9b9qycp4z] { border-color: var(--adm-bdon-ffffff-3b82f6); transform: translateY(-1px); }
.promo-card.status-off[b-p9b9qycp4z] { opacity: 0.6; }

.card-top[b-p9b9qycp4z] { display: flex; align-items: center; gap: 8px; }
.card-top .toggle-switch[b-p9b9qycp4z] { margin-left: auto; flex-shrink: 0; }
.type-badge[b-p9b9qycp4z] {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 3px 8px; border-radius: 4px; background: var(--adm-bg-334155); color: var(--adm-fgon-f1f5f9-94a3b8); white-space: nowrap;
}
.type-badge.percentoff[b-p9b9qycp4z] { background: var(--adm-bg-1e3a5f); color: var(--adm-fgon-eff6ff-60a5fa); }
.type-badge.fixedoff[b-p9b9qycp4z] { background: var(--adm-bg-3b1f4a); color: var(--adm-fgon-eedff6-c084fc); }
.type-badge.fixedprice[b-p9b9qycp4z] { background: var(--adm-bg-064e3b); color: var(--adm-fgon-d1fae5-34d399); }
.type-badge.buyxpayy[b-p9b9qycp4z] { background: var(--adm-bg-78350f); color: var(--adm-fgon-fef3c7-fbbf24); }
.type-badge.nthfree[b-p9b9qycp4z] { background: var(--adm-bg-7f1d1d); color: var(--adm-fgon-fee2e2-fca5a5); }

.status-chip[b-p9b9qycp4z] {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px;
    font-size: 0.7rem; font-weight: 700; white-space: nowrap;
    background: var(--adm-bg-334155); color: var(--adm-fgon-f1f5f9-94a3b8);
}
.status-chip[b-p9b9qycp4z]::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-chip.live[b-p9b9qycp4z] { background: rgba(34, 197, 94, 0.15); color: var(--adm-fg-22c55e); }
.status-chip.waiting[b-p9b9qycp4z], .status-chip.upcoming[b-p9b9qycp4z] { background: rgba(59, 130, 246, 0.14); color: var(--adm-fg-60a5fa); }
.status-chip.manual[b-p9b9qycp4z], .status-chip.expired[b-p9b9qycp4z], .status-chip.exhausted[b-p9b9qycp4z] { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }

.card-name[b-p9b9qycp4z] { font-size: 1rem; font-weight: 700; color: var(--adm-fg-f1f5f9); margin-top: 4px; }
.card-value[b-p9b9qycp4z] { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; color: var(--adm-fg-3b82f6); }
.card-target[b-p9b9qycp4z] { font-size: 0.85rem; color: var(--adm-fg-e2e8f0); }
.card-schedule[b-p9b9qycp4z] { font-size: 0.8rem; color: var(--adm-fg-94a3b8); }
.card-meta[b-p9b9qycp4z] { font-size: 0.72rem; color: var(--adm-fg-64748b); display: flex; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.stackable-badge[b-p9b9qycp4z] { color: var(--adm-fg-818cf8); }

/* Toggle switch */
.toggle-switch[b-p9b9qycp4z] { position: relative; display: inline-block; width: 40px; height: 22px; }
.toggle-switch input[b-p9b9qycp4z] { opacity: 0; width: 0; height: 0; }
.toggle-slider[b-p9b9qycp4z] {
    position: absolute; inset: 0; background: var(--adm-track-94a3b8-bg-334155); border-radius: 22px;
    transition: 0.2s; cursor: pointer;
}
.toggle-slider[b-p9b9qycp4z]::before {
    content: ""; position: absolute; width: 16px; height: 16px; left: 3px; bottom: 3px;
    background: #94a3b8; border-radius: 50%; transition: 0.2s;
}
.toggle-switch input:checked + .toggle-slider[b-p9b9qycp4z] { background: #2563eb; }
.toggle-switch input:checked + .toggle-slider[b-p9b9qycp4z]::before { transform: translateX(18px); background: #fff; }
.toggle-switch input:focus-visible + .toggle-slider[b-p9b9qycp4z] { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.6); }

/* Usage progress bar */
.usage-bar[b-p9b9qycp4z] { height: 4px; background: var(--adm-bg-334155); border-radius: 2px; overflow: hidden; margin-top: 2px; }
.usage-fill[b-p9b9qycp4z] { height: 100%; background: #3b82f6; border-radius: 2px; transition: width 0.3s; }

.empty-state[b-p9b9qycp4z] { text-align: center; padding: 60px 0; color: var(--adm-fg-64748b); }

/* Keyboard users see where they are */
.promotions-page button:focus-visible[b-p9b9qycp4z], .modal-panel button:focus-visible[b-p9b9qycp4z], .promo-card:focus-visible[b-p9b9qycp4z] {
    outline: 2px solid #3b82f6; outline-offset: 2px;
}

/* Editor */
.modal-overlay[b-p9b9qycp4z] {
    position: fixed; inset: 0; background: var(--adm-scrim-000000-a0_6); z-index: 100;
    display: flex; align-items: flex-start; justify-content: center; padding: 32px 16px;
    overflow-y: auto;
}
.modal-panel[b-p9b9qycp4z] {
    background: var(--adm-bg-1e293b); border: 1px solid var(--adm-bdon-ffffff-334155); border-radius: 14px;
    width: 100%; max-width: 680px; color: var(--adm-fgon-ffffff-e2e8f0);
    display: flex; flex-direction: column; max-height: calc(100vh - 64px);
}
.modal-header[b-p9b9qycp4z] { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--adm-bd-334155); }
.modal-header h2[b-p9b9qycp4z] { margin: 0; font-size: 1.1rem; color: var(--adm-fg-f1f5f9); }
.modal-close[b-p9b9qycp4z] { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; background: none; border: none; color: var(--adm-fg-64748b); font-size: 1.5rem; cursor: pointer; }
.modal-close:hover[b-p9b9qycp4z] { color: var(--adm-fg-e2e8f0); }
.modal-body[b-p9b9qycp4z] { padding: 8px 20px 20px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; flex: 1; min-height: 0;
    scrollbar-width: thin; scrollbar-color: var(--adm-bd-475569) transparent; }
.modal-body.chooser[b-p9b9qycp4z] { padding-top: 16px; gap: 14px; }
.modal-footer[b-p9b9qycp4z] { padding: 14px 20px; border-top: 1px solid var(--adm-bd-334155); display: flex; justify-content: flex-end; gap: 8px; }

.chooser-question[b-p9b9qycp4z] { margin: 0; font-size: 1rem; font-weight: 700; color: var(--adm-fg-f1f5f9); }
.from-scratch[b-p9b9qycp4z] { align-self: flex-start; }

.editor-section[b-p9b9qycp4z] { padding: 16px 0; border-bottom: 1px solid var(--adm-bd-334155); display: flex; flex-direction: column; gap: 12px; }
.editor-section:last-child[b-p9b9qycp4z] { border-bottom: none; }
.editor-section h3[b-p9b9qycp4z] { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 0.95rem; color: var(--adm-fg-f1f5f9); }
.section-num[b-p9b9qycp4z] {
    width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; flex-shrink: 0;
    font-size: 0.75rem; font-weight: 700; background: rgba(59, 130, 246, 0.15); color: var(--adm-fg-60a5fa);
}

.type-grid[b-p9b9qycp4z] { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.type-option[b-p9b9qycp4z] {
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; font: inherit;
    padding: 10px 12px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--adm-bdon-f8fafc-334155); background: var(--adm-bg-0f172a); color: var(--adm-fg-e2e8f0);
}
.type-option:hover[b-p9b9qycp4z] { border-color: var(--adm-bd-3b82f6); }
.type-option.selected[b-p9b9qycp4z] { border-color: var(--adm-bd-3b82f6); background: rgba(59, 130, 246, 0.12); box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.45); }
.type-option-title[b-p9b9qycp4z] { font-size: 0.88rem; font-weight: 700; }
.type-option-help[b-p9b9qycp4z] { font-size: 0.74rem; line-height: 1.35; color: var(--adm-fg-94a3b8); }

.form-group[b-p9b9qycp4z] { display: flex; flex-direction: column; gap: 6px; }
.form-group label[b-p9b9qycp4z] { font-size: 0.78rem; color: var(--adm-fg-94a3b8); font-weight: 600; }
.form-row[b-p9b9qycp4z] { display: flex; gap: 12px; flex-wrap: wrap; }
.form-row > .form-group[b-p9b9qycp4z] { flex: 1 1 140px; min-width: 0; }
.field-help[b-p9b9qycp4z] { margin: 0; font-size: 0.78rem; line-height: 1.45; color: var(--adm-fg-94a3b8); }

.input-unit[b-p9b9qycp4z] { position: relative; display: flex; align-items: center; max-width: 220px; }
.input-unit.narrow[b-p9b9qycp4z] { max-width: 180px; }
.input-unit .form-input[b-p9b9qycp4z] { padding-right: 34px; font-size: 1rem; font-weight: 600; }
.input-unit .unit[b-p9b9qycp4z] { position: absolute; right: 12px; font-size: 0.9rem; color: var(--adm-fg-64748b); pointer-events: none; }

.sentence-fields[b-p9b9qycp4z] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.9rem; }
.small-number[b-p9b9qycp4z] { width: 76px; text-align: center; font-weight: 600; }

/* The type a template chose, folded to one line; "Cambiar" opens the five options. */
.type-summary[b-p9b9qycp4z] {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px;
    border-radius: 10px; border: 1px solid rgba(59, 130, 246, 0.45); background: rgba(59, 130, 246, 0.10);
}
.type-summary-text[b-p9b9qycp4z] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.type-summary-text strong[b-p9b9qycp4z] { font-size: 0.92rem; color: var(--adm-fg-f1f5f9); }
.type-summary-text span[b-p9b9qycp4z] { font-size: 0.78rem; color: var(--adm-fg-94a3b8); }
.link-btn[b-p9b9qycp4z] { font: inherit; font-size: 0.82rem; font-weight: 700; color: var(--adm-fg-60a5fa); background: none; border: none; cursor: pointer; padding: 8px 4px; min-height: 36px; flex-shrink: 0; }
.link-btn:hover[b-p9b9qycp4z] { text-decoration: underline; }

/* Segmented choices (products, hours) */
.segmented[b-p9b9qycp4z] { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 10px; background: var(--adm-bg-0f172a); border: 1px solid var(--adm-bdon-f8fafc-334155); align-self: flex-start; }
.seg[b-p9b9qycp4z] { font: inherit; font-size: 0.82rem; font-weight: 600; padding: 7px 14px; min-height: 36px; border-radius: 7px; border: none; cursor: pointer; background: transparent; color: var(--adm-fg-94a3b8); }
.seg:hover:not(:disabled)[b-p9b9qycp4z] { color: var(--adm-fg-e2e8f0); }
.seg.selected[b-p9b9qycp4z] { background: #2563eb; color: #fff; }
.seg:disabled[b-p9b9qycp4z] { opacity: 0.4; cursor: not-allowed; }

.chip-grid[b-p9b9qycp4z] { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-grid.scrollable[b-p9b9qycp4z] { max-height: 180px; overflow-y: auto; }
.chip[b-p9b9qycp4z] {
    font: inherit; font-size: 0.82rem; padding: 7px 12px; min-height: 36px; border-radius: 999px; cursor: pointer; max-width: 100%;
    border: 1px solid var(--adm-bdon-f8fafc-334155); background: var(--adm-bg-0f172a); color: var(--adm-fg-e2e8f0); overflow-wrap: anywhere; text-align: left;
}
.chip:hover[b-p9b9qycp4z] { border-color: var(--adm-bd-3b82f6); }
.chip.on[b-p9b9qycp4z] { background: rgba(59, 130, 246, 0.16); border-color: var(--adm-bd-3b82f6); color: var(--adm-fgon-eff6ff-60a5fa); font-weight: 600; }
.chip.on[b-p9b9qycp4z]::before { content: '✓ '; }
.chip-price[b-p9b9qycp4z] { color: var(--adm-fg-64748b); font-size: 0.72rem; margin-left: 4px; }
.item-count-hint[b-p9b9qycp4z] { font-size: 0.72rem; color: var(--adm-fg-64748b); font-style: italic; }

.price-preview[b-p9b9qycp4z] { padding: 12px 14px; border-radius: 10px; background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.25); }
.preview-title[b-p9b9qycp4z] { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--adm-fg-22c55e); margin-bottom: 6px; }
.price-preview ul[b-p9b9qycp4z] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.preview-row[b-p9b9qycp4z] { display: flex; align-items: baseline; gap: 8px; font-size: 0.85rem; }
.preview-name[b-p9b9qycp4z] { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--adm-fg-e2e8f0); }
.preview-before[b-p9b9qycp4z] { color: var(--adm-fg-64748b); text-decoration: line-through; }
.preview-arrow[b-p9b9qycp4z] { color: var(--adm-fg-64748b); }
.preview-after[b-p9b9qycp4z] { font-weight: 700; color: var(--adm-fg-22c55e); }
.preview-same[b-p9b9qycp4z] { color: var(--adm-fg-94a3b8); font-size: 0.8rem; }
.preview-more[b-p9b9qycp4z] { display: block; margin-top: 6px; font-size: 0.75rem; color: var(--adm-fg-94a3b8); }

/* When */
.preset-row[b-p9b9qycp4z] { display: flex; flex-wrap: wrap; gap: 6px; }
.preset[b-p9b9qycp4z] { font: inherit; font-size: 0.8rem; font-weight: 600; padding: 6px 12px; min-height: 34px; border-radius: 999px; cursor: pointer; border: 1px dashed var(--adm-bd-475569); background: transparent; color: var(--adm-fg-94a3b8); }
.preset:hover[b-p9b9qycp4z] { border-color: var(--adm-bd-3b82f6); color: var(--adm-fg-e2e8f0); }
.preset.selected[b-p9b9qycp4z] { border-style: solid; border-color: var(--adm-bd-3b82f6); color: var(--adm-fg-60a5fa); background: rgba(59, 130, 246, 0.1); }

.day-chips[b-p9b9qycp4z] { display: flex; gap: 6px; flex-wrap: wrap; }
.day-chip[b-p9b9qycp4z] {
    font: inherit; min-width: 48px; min-height: 40px; padding: 6px 10px; border-radius: 8px; font-size: 0.8rem; font-weight: 700;
    background: var(--adm-bg-0f172a); border: 1px solid var(--adm-bdon-f8fafc-334155); color: var(--adm-fg-64748b); cursor: pointer; transition: 0.15s;
}
.day-chip.active[b-p9b9qycp4z] { background: var(--adm-bg-1e3a5f); border-color: var(--adm-bdon-eff6ff-3b82f6); color: var(--adm-fgon-eff6ff-60a5fa); }
.day-chip:hover[b-p9b9qycp4z] { border-color: var(--adm-bdon-f8fafc-3b82f6); }

.time-row[b-p9b9qycp4z] { display: flex; gap: 12px; flex-wrap: wrap; }
.time-row .form-group[b-p9b9qycp4z] { flex: 0 1 180px; }
.check-line[b-p9b9qycp4z] { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; cursor: pointer; color: var(--adm-fg-e2e8f0); align-self: flex-start; }
.check-line input[b-p9b9qycp4z] { width: 18px; height: 18px; accent-color: #2563eb; }

/* Advanced */
.advanced-section[b-p9b9qycp4z] { gap: 0; }
.advanced-toggle[b-p9b9qycp4z] {
    font: inherit; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 40px;
    padding: 4px 0; border: none; background: none; cursor: pointer; font-size: 0.9rem; font-weight: 700; color: var(--adm-fg-94a3b8);
}
.advanced-toggle:hover[b-p9b9qycp4z] { color: var(--adm-fg-e2e8f0); }
.advanced-body[b-p9b9qycp4z] { display: flex; flex-direction: column; gap: 14px; padding-top: 12px; }

/* Summary, any error and the buttons share ONE footer bar, inside the dialog: the page banner sits
   under the overlay, where errors used to go unseen. */
.editor-footer[b-p9b9qycp4z] { display: flex; flex-direction: column; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--adm-bd-334155); background: rgba(59, 130, 246, 0.06); }
.editor-footer-row[b-p9b9qycp4z] { display: flex; align-items: center; gap: 16px; }
.editor-summary[b-p9b9qycp4z] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.summary-label[b-p9b9qycp4z] { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--adm-fg-60a5fa); }
.summary-text[b-p9b9qycp4z] { font-size: 0.9rem; font-weight: 600; line-height: 1.35; color: var(--adm-fg-f1f5f9); overflow-wrap: anywhere; }
.footer-actions[b-p9b9qycp4z] { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.editor-error[b-p9b9qycp4z] {
    padding: 10px 14px; border-radius: 8px; font-size: 0.85rem; font-weight: 600;
    background: var(--adm-bg-450a0a); color: var(--adm-fgon-fee2e2-fca5a5); border: 1px solid var(--adm-bdon-fee2e2-7f1d1d);
}
.editor-callout[b-p9b9qycp4z] { padding: 10px 14px; border-radius: 8px; font-size: 0.82rem; line-height: 1.45; margin-top: 12px; }
.editor-callout.warning[b-p9b9qycp4z] { background: rgba(245, 158, 11, 0.12); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.35); }

/* Labels that wrap must not push their own field below its neighbours */
.advanced-body .form-row[b-p9b9qycp4z] { align-items: flex-end; }

/* admin-mobile.css (≤640px) turns every .form-row into a column; a 140px flex-basis would then become
   140px of HEIGHT per field — the gaps seen on a phone. */
@media (max-width: 640px) {
    .form-row > .form-group[b-p9b9qycp4z] { flex: 0 0 auto; }
}

@media (max-width: 900px) {
    .template-grid[b-p9b9qycp4z] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .promotions-page[b-p9b9qycp4z] { padding: 12px; }
    .promo-grid[b-p9b9qycp4z] { grid-template-columns: 1fr; }
    .template-grid[b-p9b9qycp4z] { grid-template-columns: 1fr; }
    .filter-bar[b-p9b9qycp4z] { flex-direction: column; }
    .search-input[b-p9b9qycp4z], .filter-bar .form-select[b-p9b9qycp4z] { max-width: none; }
    .promo-start[b-p9b9qycp4z] { padding: 18px; }

    /* The dialog takes the whole phone screen; its body scrolls, the summary and buttons stay */
    .modal-overlay[b-p9b9qycp4z] { padding: 0; }
    .modal-panel[b-p9b9qycp4z] { max-height: 100dvh; height: 100dvh; border-radius: 0; border: none; }
    .modal-body[b-p9b9qycp4z] { padding: 4px 14px 16px; }
    .modal-footer[b-p9b9qycp4z] { flex-wrap: wrap; padding: 12px 14px; }
    .editor-footer[b-p9b9qycp4z] { padding: 10px 14px; }
    .editor-footer-row[b-p9b9qycp4z] { flex-direction: column; align-items: stretch; gap: 10px; }
    .footer-actions[b-p9b9qycp4z] { justify-content: flex-end; flex-wrap: wrap; }
    .template-card.featured[b-p9b9qycp4z] { flex-direction: column; align-items: flex-start; }
    .chooser .template-grid[b-p9b9qycp4z] { grid-template-columns: 1fr; }
    .type-grid[b-p9b9qycp4z] { grid-template-columns: 1fr 1fr; }
    .card-name[b-p9b9qycp4z] { overflow-wrap: anywhere; }
    /* Toggle sits next to a click-through card — make it a real touch target */
    .toggle-switch[b-p9b9qycp4z] { width: 46px; height: 26px; }
    .toggle-slider[b-p9b9qycp4z]::before { width: 20px; height: 20px; }
    .toggle-switch input:checked + .toggle-slider[b-p9b9qycp4z]::before { transform: translateX(20px); }
}
/* /Pages/Admin/RecipeComponents.razor.rz.scp.css */
/* RecipeComponents — phone layout.

   The shared foundation (admin-mobile.css) already stacks .page-header and
   .form-row, sizes the inputs, and stops a bare <table> widening the document.
   What it cannot know about this page:
     - .suppliers-grid (admin-pages.css) has a 320px track floor, which leaves
       nothing to spare on a 360px phone;
     - the ingredient editor is a five-column <table> of selects/inputs living
       inside a full-width slide-over — the global fallback keeps it on screen,
       but you would be scrolling sideways while typing in it.

   Every rule is inside a max-width query, so desktop is untouched. The
   .suppliers-page prefix mirrors admin-pages.css (and keeps these rules above
   it on specificity). Pure CSS file -> single `@media`, never `@@media`. */

@media (max-width: 640px) {

    /* One card per row: the shared 320px minmax floor only just fits a 360px
       phone, and a second column is never reachable anyway. */
    .suppliers-page .suppliers-grid[b-f2wfls2qq2] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* The foundation stacks every .card-header (title over actions). Here the
       "action" is the ELABORADO/COMPONENTE pill — left to stretch it becomes a
       full-width colour bar under the name. */
    .suppliers-page .supplier-card .card-header .badge[b-f2wfls2qq2] {
        align-self: flex-start;
    }

    /* Ingredient lines: turn each <tr> into a small stacked block — type and
       ingredient full width, then quantity + unit + remove on one line. The
       <thead> is replaced by a label per field so nothing loses its meaning. */
    .suppliers-page .lines-table[b-f2wfls2qq2],
    .suppliers-page .lines-table tbody[b-f2wfls2qq2] {
        display: block;
    }

    .suppliers-page .lines-table thead[b-f2wfls2qq2] {
        display: none;
    }

    .suppliers-page .lines-table tr[b-f2wfls2qq2] {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        gap: 10px;
        padding: 12px 0;
    }

    .suppliers-page .lines-table td[b-f2wfls2qq2] {
        display: block;
        min-width: 0;
        padding: 0;
    }

    .suppliers-page .lines-table td:nth-child(1)[b-f2wfls2qq2],
    .suppliers-page .lines-table td:nth-child(2)[b-f2wfls2qq2] {
        grid-column: 1 / -1;
    }

    /* Remove button sits at the end of the quantity/unit line, bottom-aligned
       with those controls (their labels sit above them). */
    .suppliers-page .lines-table td:nth-child(5)[b-f2wfls2qq2] {
        justify-self: end;
        align-self: end;
    }

    .suppliers-page .lines-table .btn-icon[b-f2wfls2qq2] {
        min-width: 44px;
    }

    /* The column headings, restored per field. opacity (not a fixed grey) so it
       stays legible in both themes. */
    .suppliers-page .lines-table td[b-f2wfls2qq2]::before {
        display: block;
        margin-bottom: 4px;
        font-size: 12px;
        font-weight: 500;
        opacity: .7;
    }

    .suppliers-page .lines-table td:nth-child(1)[b-f2wfls2qq2]::before { content: "Tipo"; }
    .suppliers-page .lines-table td:nth-child(2)[b-f2wfls2qq2]::before { content: "Ingrediente"; }
    .suppliers-page .lines-table td:nth-child(3)[b-f2wfls2qq2]::before { content: "Cantidad"; }
    .suppliers-page .lines-table td:nth-child(4)[b-f2wfls2qq2]::before { content: "Unidad"; }

    /* Eliminar / Cancelar / Guardando… don't all fit on one 360px line. */
    .suppliers-page .editor-footer[b-f2wfls2qq2] {
        flex-wrap: wrap;
    }
}
/* /Pages/Admin/Repartos.razor.rz.scp.css */
/* Repartos admin page chrome — theme-aware. The board itself is styled by
   DeliveryDispatchPanel.razor.css. */

.dd-page[b-84lwvq090m] { max-width: 1140px; }

.dd-page-title[b-84lwvq090m] { margin: 0 0 4px; font-size: 22px; font-weight: 800; color: #111827; }
html[data-theme="dark"] .dd-page-title[b-84lwvq090m] { color: #f1f5f9; }

.dd-page-sub[b-84lwvq090m] { color: #6b7280; font-size: 14px; margin: 0 0 16px; max-width: 72ch; line-height: 1.45; }
html[data-theme="dark"] .dd-page-sub[b-84lwvq090m] { color: #94a3b8; }

/* Settings card — premium toggle switches, each on its own row, theme-aware. */
.dd-settings[b-84lwvq090m] { display: flex; flex-direction: column; max-width: 620px; margin-bottom: 18px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,40,.06); }
html[data-theme="dark"] .dd-settings[b-84lwvq090m] { border-color: #334155; background: #1e293b; box-shadow: 0 1px 2px rgba(0,0,0,.4); }

.dd-setting[b-84lwvq090m] { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; cursor: pointer; user-select: none; }
.dd-setting + .dd-setting[b-84lwvq090m] { border-top: 1px solid #eef0f2; }
html[data-theme="dark"] .dd-setting + .dd-setting[b-84lwvq090m] { border-top-color: #334155; }
.dd-setting--sub[b-84lwvq090m] { padding-left: 30px; background: #fafbfc; }
html[data-theme="dark"] .dd-setting--sub[b-84lwvq090m] { background: #172033; }

.dd-setting-text[b-84lwvq090m] { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dd-setting-title[b-84lwvq090m] { font-size: 14px; font-weight: 600; color: #111827; }
html[data-theme="dark"] .dd-setting-title[b-84lwvq090m] { color: #f1f5f9; }
.dd-setting-desc[b-84lwvq090m] { font-size: 12px; color: #6b7280; line-height: 1.4; max-width: 48ch; }
html[data-theme="dark"] .dd-setting-desc[b-84lwvq090m] { color: #94a3b8; }

/* checkbox rendered as an iOS-style switch */
.dd-switch[b-84lwvq090m] { appearance: none; -webkit-appearance: none; flex: none; width: 42px; height: 24px; margin: 0; border-radius: 999px; background: #cbd5e1; position: relative; cursor: pointer; transition: background .15s ease; }
html[data-theme="dark"] .dd-switch[b-84lwvq090m] { background: #475569; }
.dd-switch[b-84lwvq090m]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
/* ON = green (driven by the .on class from Blazor state, with :checked as a fallback) */
.dd-switch.on[b-84lwvq090m], .dd-switch:checked[b-84lwvq090m] { background: #16a34a; }
.dd-switch.on[b-84lwvq090m]::after, .dd-switch:checked[b-84lwvq090m]::after { transform: translateX(18px); }
.dd-switch:focus-visible[b-84lwvq090m] { outline: 2px solid #1f6feb; outline-offset: 2px; }

.dd-disabled-msg[b-84lwvq090m] { color: #6b7280; font-size: 14px; }
html[data-theme="dark"] .dd-disabled-msg[b-84lwvq090m] { color: #94a3b8; }
/* /Pages/Admin/ReservationCalendar.razor.rz.scp.css */
.calendar-page[b-bdrtgsobsw] {
    padding: 12px 16px 16px;
    max-width: 1200px;
    margin: 0 auto;
    background: #f5f5f5;
}

/* The date/view bar (view toggle + date nav): pins under the sticky
   64px .admin-topbar. The scroll container is the WINDOW: .admin-content
   scrolls nothing (it grows with the page), and on this page it is no
   longer a scroll container at all (the inline <style> in
   ReservationCalendar.razor). ⚠ Before 2026-10-19 it was one, so neither
   top: 64px nor top: 0 ever pinned the bar: it scrolled away with the
   page (the live tester). Negative side margins bleed the background
   over .calendar-page's 16px padding so calendar content scrolling under
   it is fully masked. z-index 25 < topbar 50 < modals 100+. */
.rcal-toolbar[b-bdrtgsobsw] {
    position: sticky;
    top: 64px;
    z-index: 25;
    background: #f5f5f5;
    margin: 0 -16px;
    padding: 8px 16px;
    border-bottom: 1px solid #e5e7eb;
}

/* The rows around the bar scroll with the page: the header above it,
   the search and the source chips below it. Their spacing belongs to
   these wrappers, not the rows' own margin-bottom — otherwise an extra
   ~16px gap appears between the rows. */
.rcal-toolbar-head .calendar-header[b-bdrtgsobsw],
.rcal-toolbar .view-toggle[b-bdrtgsobsw],
.rcal-toolbar .month-nav[b-bdrtgsobsw] {
    margin-bottom: 0;
}
.rcal-toolbar > * + *[b-bdrtgsobsw],
.rcal-toolbar-filters > * + *[b-bdrtgsobsw] {
    margin-top: 8px;
}
.rcal-toolbar-filters[b-bdrtgsobsw] {
    padding-top: 8px;
    margin-bottom: 18px;
}

/* Customer search input. Lives just above the source-filter chips,
   below the pinned date/view bar, so an operator answering a phone call
   ("¿Tienes la reserva de Juan García?") can scrub through the
   calendar — empty value is a passthrough so the rest of the toolbar
   behaves unchanged. */
.rcal-customer-search[b-bdrtgsobsw] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.rcal-customer-search-icon[b-bdrtgsobsw] {
    color: var(--adm-fg-94a3b8);
    display: inline-flex;
    flex: 0 0 auto;
}

.rcal-customer-search-input[b-bdrtgsobsw] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 14px;
    color: var(--adm-fg-1e293b);
    font-family: inherit;
    min-width: 0;
}

.rcal-customer-search-input[b-bdrtgsobsw]::placeholder {
    color: var(--adm-fg-94a3b8);
}

.rcal-customer-search-input[b-bdrtgsobsw]::-webkit-search-cancel-button {
    /* Hide the browser's default × — we render our own button so the
       clear control looks identical across Safari / Chrome / Firefox. */
    display: none;
}

.rcal-customer-search-clear[b-bdrtgsobsw] {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: none;
    background: #f1f5f9;
    border-radius: 6px;
    color: #475569;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rcal-customer-search-clear:hover[b-bdrtgsobsw] {
    background: #e2e8f0;
    color: #1e293b;
}

/* Source filter: horizontal chip row, scrolls horizontally on narrow
   widths so it never pushes the toolbar to two lines. */
.rcal-source-filter[b-bdrtgsobsw] {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}

.rcal-source-chip[b-bdrtgsobsw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}

.rcal-source-chip:hover[b-bdrtgsobsw] {
    background: #f1f5f9;
}

.rcal-source-chip.active[b-bdrtgsobsw] {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.rcal-source-chip-icon[b-bdrtgsobsw] {
    font-size: 13px;
}

/* Communication log inside the reservation detail modal. */
.rcal-audit-section[b-bdrtgsobsw] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--adm-bd-e5e7eb);
}

.rcal-audit-header[b-bdrtgsobsw] {
    font-size: 13px;
    font-weight: 700;
    color: var(--adm-fg-374151);
    margin-bottom: 10px;
}

.rcal-audit-empty[b-bdrtgsobsw] {
    font-size: 12px;
    color: var(--adm-fg-9ca3af);
    font-style: italic;
}

.rcal-audit-list[b-bdrtgsobsw] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rcal-audit-item[b-bdrtgsobsw] {
    display: flex;
    gap: 10px;
    background: #f9fafb;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px;
}

.rcal-audit-icon[b-bdrtgsobsw] {
    font-size: 14px;
    line-height: 1;
    padding-top: 1px;
    flex: 0 0 auto;
}

.rcal-audit-body[b-bdrtgsobsw] {
    flex: 1;
    min-width: 0;
}

.rcal-audit-line[b-bdrtgsobsw] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: baseline;
}

.rcal-audit-label[b-bdrtgsobsw] {
    font-weight: 600;
    color: var(--adm-fg-1f2937);
}

.rcal-audit-time[b-bdrtgsobsw] {
    color: var(--adm-fg-6b7280);
    white-space: nowrap;
}

.rcal-audit-desc[b-bdrtgsobsw] {
    color: var(--adm-fg-4b5563);
    margin-top: 2px;
    word-break: break-word;
}

.rcal-audit-actor[b-bdrtgsobsw] {
    color: var(--adm-fg-9ca3af);
    margin-top: 2px;
    font-size: 11px;
}

/* Day-view shift bands: a thin label between time slots so the
   operator visually sees lunch / dinner boundaries, configured from
   the restaurant's WeeklySchedule. */
.rcal-shift-band[b-bdrtgsobsw] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin: 8px 0;
    background: linear-gradient(90deg, var(--adm-bg-2563eb-a0_08), transparent);
    border-left: 3px solid var(--adm-bdon-e7eefb-2563eb);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--adm-fgon-e7eefb-1d4ed8);
}

.rcal-shift-band-name[b-bdrtgsobsw] {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.rcal-shift-band-range[b-bdrtgsobsw] {
    color: var(--adm-fg-6b7280);
    font-weight: 500;
}

/* Blocked-date marker on month-view cells: subtle red tint + lock
   icon in the corner. Reservation badge stays visible so an
   operator who blocks a date with existing bookings sees both ("4
   reservations, but day is blocked" — they need to call those
   customers to cancel). */
.calendar-day.rcal-blocked[b-bdrtgsobsw] {
    background: repeating-linear-gradient(
        45deg,
        var(--adm-bg-ef4444-a0_08),
        var(--adm-bg-ef4444-a0_08) 6px,
        var(--adm-bg-ef4444-a0_16) 6px,
        var(--adm-bg-ef4444-a0_16) 12px
    );
    border: 1px dashed var(--adm-bdon-f7ebed-ef4444);
    cursor: not-allowed;
}

.rcal-blocked-tag[b-bdrtgsobsw] {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 11px;
    line-height: 1;
    opacity: 0.7;
}

/* ────────────────────────────────────────────────────────────────
   Wave 4 — Sala (floor-plan) view. Tables × time grid for the
   selected day. Selectors uniquely prefixed .rcal-sala-* so when
   this page's inline style block is finally extracted to a scoped
   .razor.css they migrate cleanly without colliding with anything.
   ──────────────────────────────────────────────────────────────── */
.rcal-sala[b-bdrtgsobsw] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 12px;
}

.rcal-sala-scroll[b-bdrtgsobsw] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.rcal-sala-grid[b-bdrtgsobsw] {
    display: grid;
    gap: 4px;
    min-width: max-content;
    align-items: stretch;
}

.rcal-sala-corner[b-bdrtgsobsw] {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 6px 8px;
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 2;
}

.rcal-sala-time-header[b-bdrtgsobsw] {
    font-size: 12px;
    font-weight: 700;
    color: var(--adm-fg-6b7280);
    text-align: center;
    padding: 6px 4px;
    border-bottom: 1px solid var(--adm-bd-e5e7eb);
}

.rcal-sala-label[b-bdrtgsobsw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
    background: #f9fafb;
    border-radius: 8px;
    position: sticky;
    left: 0;
    z-index: 1;
    min-height: 60px;
    justify-content: center;
}

.rcal-sala-label.rcal-sala-unassigned[b-bdrtgsobsw] {
    background: #fef3c7;
    color: #92400e;
}

.rcal-sala-label-title[b-bdrtgsobsw] {
    font-size: 13px;
    font-weight: 700;
    color: var(--adm-fg-111827);
}

.rcal-sala-label.rcal-sala-unassigned .rcal-sala-label-title[b-bdrtgsobsw] {
    color: #92400e;
}

.rcal-sala-label-meta[b-bdrtgsobsw] {
    font-size: 11px;
    color: var(--adm-fg-6b7280);
}

.rcal-sala-cell[b-bdrtgsobsw] {
    background: #f9fafb;
    border-radius: 6px;
    padding: 4px;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border: 1px dashed transparent;
    transition: all 0.15s;
}

/* Quiet early hours drawn as one narrow column (HourRows): a muted
   header «2–10» and empty cells, so lunch and dinner stay in view. */
.rcal-sala-time-header.rcal-sala-quiet[b-bdrtgsobsw] {
    font-weight: 500;
    color: var(--adm-fg-9ca3af);
    padding: 6px 2px;
}

.rcal-sala-cell.rcal-sala-quiet[b-bdrtgsobsw] {
    background: transparent;
}

.rcal-sala-cell.drop-target[b-bdrtgsobsw] {
    border-color: #2563eb;
    background: #eff6ff;
}

.rcal-sala-chip[b-bdrtgsobsw] {
    background: #f0f9ff;
    border-left: 3px solid #2563eb;
    border-radius: 6px;
    padding: 5px 7px;
    font-size: 12px;
    cursor: grab;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: box-shadow 0.15s;
}

.rcal-sala-chip:active[b-bdrtgsobsw] { cursor: grabbing; }
.rcal-sala-chip:hover[b-bdrtgsobsw] { box-shadow: 0 2px 6px rgba(0,0,0,.08); }

.rcal-sala-chip.arrived[b-bdrtgsobsw],
.rcal-sala-chip.completed[b-bdrtgsobsw] { background: #ecfdf5; border-left-color: #10b981; }
.rcal-sala-chip.noshow[b-bdrtgsobsw]    { background: #fef2f2; border-left-color: #ef4444; }
.rcal-sala-chip.cancelled[b-bdrtgsobsw] { background: #f3f4f6; border-left-color: #9ca3af; opacity: 0.5; }
.rcal-sala-chip.capacity-warn[b-bdrtgsobsw] { box-shadow: inset 0 0 0 1px var(--adm-sh-f59e0b); }

/* Header row: time on the left, allergen flag + party badge on the right,
   so a host scanning the floor reads "20:30 … ⚠ 4" at a glance. */
.rcal-sala-chip-head[b-bdrtgsobsw] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.rcal-sala-chip-time[b-bdrtgsobsw] {
    font-weight: 700;
    font-size: 13px;
    color: var(--adm-fg-1f2937);
}

.rcal-sala-chip-allergen[b-bdrtgsobsw] {
    color: var(--adm-fg-b45309);
    font-size: 11px;
    line-height: 1;
}

.rcal-sala-chip-party[b-bdrtgsobsw] {
    margin-left: auto;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    background: #e2e8f0;
    border-radius: 6px;
    padding: 1px 6px;
    white-space: nowrap;
}

.rcal-sala-chip-name[b-bdrtgsobsw] {
    color: var(--adm-fg-374151);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Wave 2c — allergen checkbox grid in Nueva Reserva modal */
.rcal-allergen-grid[b-bdrtgsobsw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 6px;
}

.rcal-allergen-chip[b-bdrtgsobsw] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
    color: #374151;
    transition: all 0.15s;
}

.rcal-allergen-chip input[type="checkbox"][b-bdrtgsobsw] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.rcal-allergen-chip:hover[b-bdrtgsobsw] {
    background: #f9fafb;
    border-color: #d1d5db;
}

.rcal-allergen-chip.selected[b-bdrtgsobsw] {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #92400e;
    font-weight: 600;
}

.rcal-allergen-icon[b-bdrtgsobsw] {
    font-size: 14px;
    line-height: 1;
}

.rcal-allergen-name[b-bdrtgsobsw] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Read-only allergen + tag strips in the reservation detail modal */
.rcal-allergen-strip[b-bdrtgsobsw] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
    max-width: 60%;
}

.rcal-allergen-pill[b-bdrtgsobsw] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.rcal-tag-strip[b-bdrtgsobsw] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
    max-width: 60%;
}

.rcal-tag-chip[b-bdrtgsobsw] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 11px;
    font-weight: 600;
}

.calendar-header[b-bdrtgsobsw] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.calendar-header h1[b-bdrtgsobsw] {
    font-size: 22px;
    font-weight: 700;
    flex: 1;
}

.back-btn[b-bdrtgsobsw] {
    width: 40px;
    height: 40px;
    border: none;
    background: #fff;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.new-btn[b-bdrtgsobsw] {
    padding: 10px 20px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

/* Walk-in button: visually distinct from the primary +Nueva so a busy
   host doesn't accidentally start a scheduled reservation when they
   mean to register a walk-in (and vice versa). */
.rcal-walkin-btn[b-bdrtgsobsw] {
    padding: 10px 16px;
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #10b981;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.rcal-walkin-btn:hover[b-bdrtgsobsw] {
    background: #d1fae5;
}

.view-toggle[b-bdrtgsobsw] {
    display: flex;
    gap: 4px;
    background: #fff;
    padding: 4px;
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.view-btn[b-bdrtgsobsw] {
    flex: 1;
    padding: 10px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.view-btn.active[b-bdrtgsobsw] {
    background: #2563eb;
    color: #fff;
}

.month-nav[b-bdrtgsobsw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
}

.nav-arrow[b-bdrtgsobsw] {
    width: 44px;
    height: 44px;
    border: none;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* First-letter-only capitalisation: es-ES date strings come through
   lowercase ("viernes, 22 de mayo"); plain text-transform:capitalize
   would also capitalise "de" → "De". ::first-letter caps just the
   leading char so it reads "Viernes, 22 de mayo". */
.month-label[b-bdrtgsobsw]::first-letter {
    text-transform: uppercase;
}

.month-label[b-bdrtgsobsw] {
    font-size: 18px;
    font-weight: 700;
    min-width: 220px;
    text-align: center;
}

.today-btn[b-bdrtgsobsw] {
    padding: 8px 16px;
    background: #10b981;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

.loading[b-bdrtgsobsw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    gap: 16px;
}

.spinner[b-bdrtgsobsw] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--adm-bd-e5e7eb);
    border-top-color: var(--adm-bd-2563eb);
    border-radius: 50%;
    animation: spin-b-bdrtgsobsw 1s linear infinite;
}

@keyframes spin-b-bdrtgsobsw {
    to { transform: rotate(360deg); }
}

/* Month View */
.calendar-grid[b-bdrtgsobsw] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    background: #fff;
    padding: 12px;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.weekday-header[b-bdrtgsobsw] {
    text-align: center;
    padding: 12px 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--adm-fg-6b7280);
    text-transform: uppercase;
}

.weekday-header.weekend[b-bdrtgsobsw] {
    color: var(--adm-fg-9ca3af);
}

/* Month cell. Was a centered square showing only a number + count badge
   (Codex: "month view too empty"). Now a top-aligned cell with a header
   row (day number + count·pax) and up to 3 reservation chips (time +
   name, colour-coded by status), Google-Calendar style, so a host can
   read the night's shape without drilling in. */
.calendar-day[b-bdrtgsobsw] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 6px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    position: relative;
    min-height: 112px;
    overflow: hidden;
}

.calendar-day:hover[b-bdrtgsobsw] {
    background: #f3f4f6;
    box-shadow: inset 0 0 0 1px #e5e7eb;
}

.calendar-day.other-month[b-bdrtgsobsw] {
    opacity: 0.4;
}

.calendar-day.today[b-bdrtgsobsw] {
    background: #dbeafe;
    border: 2px solid #2563eb;
    padding: 4px; /* compensate for the 2px border so chips don't shift */
}

.calendar-day.weekend[b-bdrtgsobsw] {
    background: #fafafa;
}

.calendar-day.has-reservations[b-bdrtgsobsw] {
    background: #f6fefb;
}

.cal-day-head[b-bdrtgsobsw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    flex: 0 0 auto;
}

.day-number[b-bdrtgsobsw] {
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

.cal-day-count[b-bdrtgsobsw] {
    font-size: 10px;
    font-weight: 700;
    color: #047857;
    background: #d1fae5;
    padding: 1px 6px;
    border-radius: 8px;
    white-space: nowrap;
}

.cal-chips[b-bdrtgsobsw] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 0;
    overflow: hidden;
}

.cal-chip[b-bdrtgsobsw] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 11px;
    line-height: 1.25;
    padding: 2px 5px;
    border-radius: 5px;
    background: #f0f9ff;
    border-left: 3px solid #2563eb;
    overflow: hidden;
}

.cal-chip-time[b-bdrtgsobsw] {
    font-weight: 700;
    color: var(--adm-fg-1e293b);
    flex: 0 0 auto;
}

.cal-chip-name[b-bdrtgsobsw] {
    color: var(--adm-fg-475569);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.cal-chip.arrived[b-bdrtgsobsw], .cal-chip.completed[b-bdrtgsobsw] {
    background: #ecfdf5;
    border-left-color: #10b981;
}

.cal-chip.noshow[b-bdrtgsobsw] {
    background: #fef2f2;
    border-left-color: #ef4444;
}

.cal-chip.cancelled[b-bdrtgsobsw] {
    background: #f3f4f6;
    border-left-color: #9ca3af;
    opacity: 0.6;
}

.cal-chip-more[b-bdrtgsobsw] {
    font-size: 10px;
    font-weight: 600;
    color: var(--adm-fg-64748b);
    padding: 1px 5px;
}

/* Week View */
.week-view[b-bdrtgsobsw] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.week-day[b-bdrtgsobsw] {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    min-height: 280px;
}

.week-day.today[b-bdrtgsobsw] {
    border: 2px solid var(--adm-bd-2563eb);
}

.week-day-header[b-bdrtgsobsw] {
    background: #f9fafb;
    padding: 12px;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
    cursor: pointer;
    position: relative;
}

.week-day-header:hover[b-bdrtgsobsw] {
    background: #f3f4f6;
}

.day-name[b-bdrtgsobsw] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--adm-fg-6b7280);
    text-transform: uppercase;
}

.day-date[b-bdrtgsobsw] {
    display: block;
    font-size: 18px;
    font-weight: 700;
}

.week-badge[b-bdrtgsobsw] {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #10b981;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.week-day-content[b-bdrtgsobsw] {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.week-reservation[b-bdrtgsobsw] {
    padding: 8px;
    background: #f0f9ff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    border-left: 3px solid #2563eb;
    transition: box-shadow 0.2s, transform 0.2s;
}

.week-reservation:focus[b-bdrtgsobsw] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.4);
    transform: translateY(-1px);
}

.week-reservation.arrived[b-bdrtgsobsw], .week-reservation.completed[b-bdrtgsobsw] {
    background: #ecfdf5;
    border-left-color: #10b981;
}

.week-reservation.noshow[b-bdrtgsobsw] {
    background: #fef2f2;
    border-left-color: #ef4444;
}

.week-reservation.cancelled[b-bdrtgsobsw] {
    background: #f3f4f6;
    border-left-color: #9ca3af;
    opacity: 0.6;
}

.res-time[b-bdrtgsobsw] {
    font-weight: 700;
    display: block;
}

.res-name[b-bdrtgsobsw] {
    color: var(--adm-fg-374151);
}

.res-party[b-bdrtgsobsw] {
    color: var(--adm-fg-6b7280);
    font-size: 11px;
}

.more-reservations[b-bdrtgsobsw] {
    text-align: center;
    color: var(--adm-fg-2563eb);
    font-size: 12px;
    padding: 8px;
    cursor: pointer;
    font-weight: 600;
}

.no-reservations[b-bdrtgsobsw] {
    text-align: center;
    color: var(--adm-fg-9ca3af);
    font-size: 12px;
    padding: 20px;
}

/* Day View */
.day-view[b-bdrtgsobsw] {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
}

.time-slots[b-bdrtgsobsw] {
    padding: 16px;
}

.time-slot[b-bdrtgsobsw] {
    display: flex;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--adm-bd-f3f4f6);
    min-height: 60px;
}

.time-label[b-bdrtgsobsw] {
    width: 60px;
    font-size: 14px;
    font-weight: 600;
    color: var(--adm-fg-6b7280);
    padding-top: 4px;
}

/* Quiet early hours drawn as one short row (HourRows): «2:00–10:00 ·
   sin reservas», instead of ten empty 60px slots pushing lunch down. */
.rcal-quiet-hours[b-bdrtgsobsw] {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 6px 0;
    border-bottom: 1px solid var(--adm-bd-f3f4f6);
    color: var(--adm-fg-9ca3af);
    font-size: 13px;
}

.rcal-quiet-hours .time-label[b-bdrtgsobsw] {
    width: auto;
    min-width: 60px;
    padding-top: 0;
    font-weight: 500;
    color: inherit;
}

.slot-content[b-bdrtgsobsw] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.slot-reservation[b-bdrtgsobsw] {
    background: #f0f9ff;
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    border-left: 4px solid #2563eb;
    transition: box-shadow 0.2s, transform 0.2s;
}

.slot-reservation:focus[b-bdrtgsobsw] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.4);
    transform: translateY(-1px);
}

.slot-reservation.arrived[b-bdrtgsobsw], .slot-reservation.completed[b-bdrtgsobsw] {
    background: #ecfdf5;
    border-left-color: #10b981;
}

.slot-reservation.noshow[b-bdrtgsobsw] {
    background: #fef2f2;
    border-left-color: #ef4444;
}

.slot-res-header[b-bdrtgsobsw] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.slot-res-time[b-bdrtgsobsw] {
    font-weight: 700;
    font-size: 14px;
}

.slot-res-status[b-bdrtgsobsw] {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

.slot-res-status.confirmed[b-bdrtgsobsw] { background: #dbeafe; color: #1d4ed8; }
.slot-res-status.reminded[b-bdrtgsobsw] { background: #fef3c7; color: #92400e; }
.slot-res-status.pending[b-bdrtgsobsw] { background: #f3f4f6; color: #374151; }
.slot-res-status.arrived[b-bdrtgsobsw] { background: #d1fae5; color: #065f46; }
.slot-res-status.completed[b-bdrtgsobsw] { background: #d1fae5; color: #065f46; }
.slot-res-status.noshow[b-bdrtgsobsw] { background: #fee2e2; color: #991b1b; }

.slot-res-name[b-bdrtgsobsw] {
    font-weight: 600;
    font-size: 15px;
}

.slot-res-details[b-bdrtgsobsw] {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: var(--adm-fg-6b7280);
}

.vip-mini[b-bdrtgsobsw] {
    font-size: 12px;
    margin-left: 4px;
}

/* Stats Bar */
.stats-bar[b-bdrtgsobsw] {
    display: flex;
    justify-content: space-around;
    background: #fff;
    padding: 16px;
    border-radius: 16px;
    margin-top: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.stat[b-bdrtgsobsw] {
    text-align: center;
}

.stat-value[b-bdrtgsobsw] {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--adm-fg-1f2937);
}

.stat-label[b-bdrtgsobsw] {
    font-size: 12px;
    color: var(--adm-fg-6b7280);
}

/* Panels & Modals */
.day-panel-overlay[b-bdrtgsobsw], .modal-overlay[b-bdrtgsobsw] {
    position: fixed;
    inset: 0;
    background: var(--adm-scrim-000000-a0_5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 20px;
}

.day-panel[b-bdrtgsobsw], .modal[b-bdrtgsobsw] {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.panel-header[b-bdrtgsobsw], .modal-header[b-bdrtgsobsw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid var(--adm-bd-e5e7eb);
}

.panel-header h2[b-bdrtgsobsw], .modal-header h2[b-bdrtgsobsw] {
    font-size: 18px;
    font-weight: 700;
}

/* Panel header shows a lowercase es-ES date — cap only the first
   letter (the modal header shows already-cased copy like
   "Detalles de Reserva" and must NOT be capitalize'd into
   "Detalles De Reserva"). */
.panel-header h2[b-bdrtgsobsw]::first-letter {
    text-transform: uppercase;
}

.close-btn[b-bdrtgsobsw] {
    width: 44px;
    height: 44px;
    border: none;
    background: #f3f4f6;
    border-radius: 8px;
    font-size: 24px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.panel-content[b-bdrtgsobsw], .modal-body[b-bdrtgsobsw] {
    padding: 20px;
    overflow-y: auto;
    /* Thin, theme-matched scrollbar — the default white/native bar
       in the dark modal reads as unfinished (Codex feedback). */
    scrollbar-width: thin;
    scrollbar-color: #475569 transparent;
}
.panel-content[b-bdrtgsobsw]::-webkit-scrollbar,
.modal-body[b-bdrtgsobsw]::-webkit-scrollbar {
    width: 8px;
}
.panel-content[b-bdrtgsobsw]::-webkit-scrollbar-track,
.modal-body[b-bdrtgsobsw]::-webkit-scrollbar-track {
    background: transparent;
}
.panel-content[b-bdrtgsobsw]::-webkit-scrollbar-thumb,
.modal-body[b-bdrtgsobsw]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
:root[data-theme="dark"] .panel-content[b-bdrtgsobsw]::-webkit-scrollbar-thumb,
:root[data-theme="dark"] .modal-body[b-bdrtgsobsw]::-webkit-scrollbar-thumb {
    background: #475569;
}

.panel-reservation[b-bdrtgsobsw] {
    background: #f9fafb;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    border-left: 4px solid #2563eb;
}

.panel-reservation.arrived[b-bdrtgsobsw], .panel-reservation.completed[b-bdrtgsobsw] {
    border-left-color: var(--adm-bd-10b981);
}

.panel-reservation.noshow[b-bdrtgsobsw] {
    border-left-color: var(--adm-bd-ef4444);
}

.res-header[b-bdrtgsobsw] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.res-status[b-bdrtgsobsw] {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

.res-status.confirmed[b-bdrtgsobsw] { background: #dbeafe; color: #1d4ed8; }
.res-status.reminded[b-bdrtgsobsw] { background: #fef3c7; color: #92400e; }
.res-status.pending[b-bdrtgsobsw] { background: #f3f4f6; color: #374151; }
.res-status.arrived[b-bdrtgsobsw] { background: #d1fae5; color: #065f46; }
.res-status.completed[b-bdrtgsobsw] { background: #d1fae5; color: #065f46; }
.res-status.noshow[b-bdrtgsobsw] { background: #fee2e2; color: #991b1b; }

.res-body[b-bdrtgsobsw] {
    margin-bottom: 12px;
}

.res-name-row[b-bdrtgsobsw] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.res-name[b-bdrtgsobsw] {
    font-weight: 700;
    font-size: 16px;
}

.vip-chip[b-bdrtgsobsw] {
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 6px;
}

.vip-chip.platinum[b-bdrtgsobsw] { background: #ede9fe; color: #7c3aed; }
.vip-chip.gold[b-bdrtgsobsw] { background: #fef3c7; color: #f59e0b; }
.vip-chip.silver[b-bdrtgsobsw] { background: #f3f4f6; color: #6b7280; }

.res-info[b-bdrtgsobsw] {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: var(--adm-fg-6b7280);
    margin-top: 4px;
}

.res-actions[b-bdrtgsobsw] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.action-btn[b-bdrtgsobsw] {
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.action-btn.confirm[b-bdrtgsobsw], .action-btn.approve[b-bdrtgsobsw] { background: #10b981; color: #fff; }
.action-btn.noshow[b-bdrtgsobsw] { background: #f59e0b; color: #fff; }
.action-btn.cancel[b-bdrtgsobsw] { background: #ef4444; color: #fff; }

.no-reservations-panel[b-bdrtgsobsw] {
    text-align: center;
    padding: 40px 20px;
}

.empty-icon[b-bdrtgsobsw] {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
}

.new-res-btn[b-bdrtgsobsw] {
    margin-top: 16px;
    padding: 12px 24px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

/* Form */
.validation-error[b-bdrtgsobsw] {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #b91c1c;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
}

.required[b-bdrtgsobsw] {
    color: var(--adm-fg-ef4444);
}

.form-group[b-bdrtgsobsw] {
    margin-bottom: 16px;
}

.form-group label[b-bdrtgsobsw] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--adm-fg-374151);
    margin-bottom: 6px;
}

.form-group input[b-bdrtgsobsw], .form-group textarea[b-bdrtgsobsw] {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--adm-bd-e5e7eb);
    border-radius: 10px;
    font-size: 14px;
    /* The admin shell renders this page dark. color-scheme:dark makes the
       browser paint native control chrome (the datetime calendar icon, the
       number spinners, the date-picker popup) light-on-dark instead of the
       default dark-on-dark where the calendar glyph was invisible. The
       webkit invert is a belt-and-suspenders for the picker indicator. */
    color-scheme: dark;
}

.form-group input[b-bdrtgsobsw]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.7;
    cursor: pointer;
}

.form-group input[b-bdrtgsobsw]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.form-group input:focus[b-bdrtgsobsw], .form-group textarea:focus[b-bdrtgsobsw] {
    outline: none;
    border-color: var(--adm-bd-2563eb);
    box-shadow: 0 0 0 3px var(--adm-sh-2563eb-a0_15);
}

/* Inline field validation — invalid field gets a red ring + a small
   message below it (shown only after a submit attempt), so the operator
   sees exactly which field is missing instead of a single top banner. */
.form-group input.input-invalid[b-bdrtgsobsw] {
    border-color: var(--adm-bd-ef4444);
    box-shadow: 0 0 0 3px var(--adm-sh-ef4444-a0_15);
}

.field-error[b-bdrtgsobsw] {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--adm-fg-f87171);
}

/* ===== Premium Nueva Reserva form ===== */
.resv-summary[b-bdrtgsobsw] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 14px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, var(--adm-bg-2563eb-a0_1), var(--adm-bg-10b981-a0_08));
    border: 1px solid var(--adm-bd-2563eb-a0_18);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--adm-fgon-e3ebfa-1e293b);
}

.resv-summary-item--cap[b-bdrtgsobsw]::first-letter {
    text-transform: uppercase;
}

.resv-summary-sep[b-bdrtgsobsw] {
    color: var(--adm-fg-94a3b8);
}

.resv-section-label[b-bdrtgsobsw] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--adm-fg-64748b);
    margin: 18px 0 10px;
}

.quick-time-chips[b-bdrtgsobsw] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* Shown instead of the chips when every remaining service time for the chosen
   day is already past. Saying so beats rendering five chips that all error. */
/* Collapsed row for the 14-allergen picker. Optional field, rarely used, and its grid was
   taller than the whole booking form — so it opens on demand and shows a count when shut. */
.rcal-allergen-toggle[b-bdrtgsobsw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--adm-bd-cbd5e1);
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.rcal-allergen-toggle:hover[b-bdrtgsobsw] {
    background: rgba(148, 163, 184, .12);
}

.rcal-allergen-count[b-bdrtgsobsw] {
    font-weight: 500;
    opacity: .7;
}

.quick-time-empty[b-bdrtgsobsw] {
    margin-top: 8px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--adm-fg-475569);
    opacity: .8;
}

.quick-time-chip[b-bdrtgsobsw] {
    padding: 6px 12px;
    border: 1px solid var(--adm-bd-cbd5e1);
    background: transparent;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--adm-fg-475569);
    cursor: pointer;
    transition: all 0.15s;
}

.quick-time-chip:hover[b-bdrtgsobsw] {
    background: #f1f5f9;
}

.quick-time-chip.active[b-bdrtgsobsw] {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.pax-stepper[b-bdrtgsobsw] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pax-btn[b-bdrtgsobsw] {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border: 1px solid var(--adm-bd-cbd5e1);
    background: transparent;
    border-radius: 12px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: var(--adm-fg-334155);
    cursor: pointer;
    transition: all 0.15s;
}

.pax-btn:hover:not(:disabled)[b-bdrtgsobsw] {
    background: #f1f5f9;
}

.pax-btn:disabled[b-bdrtgsobsw] {
    opacity: 0.4;
    cursor: not-allowed;
}

.pax-stepper .pax-value[b-bdrtgsobsw] {
    flex: 1;
    min-width: 0;
    width: auto;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
}

.modal-footer[b-bdrtgsobsw] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 20px;
    border-top: 1px solid var(--adm-bd-e5e7eb);
    flex-wrap: wrap;
}

.btn-primary[b-bdrtgsobsw] { padding: 12px 24px; background: #2563eb; color: #fff; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; }
.btn-secondary[b-bdrtgsobsw] { padding: 12px 24px; background: #f3f4f6; color: #374151; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; }
.btn-success[b-bdrtgsobsw] { padding: 12px 24px; background: #10b981; color: #fff; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; }
.btn-warning[b-bdrtgsobsw] { padding: 12px 24px; background: #f59e0b; color: #fff; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; }
.btn-danger[b-bdrtgsobsw] { padding: 12px 24px; background: #ef4444; color: #fff; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; }
.btn-outline[b-bdrtgsobsw] { padding: 12px 24px; background: transparent; color: var(--adm-fg-2563eb); border: 2px solid var(--adm-bd-2563eb); border-radius: 10px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-outline:hover[b-bdrtgsobsw] { background: #2563eb; color: #fff; }
.btn-primary:disabled[b-bdrtgsobsw] { background: #9ca3af; cursor: not-allowed; }

/* Detail-modal footer: secondary actions left (quiet ghost buttons),
   the single primary action right (filled). Replaces four equally-loud
   filled buttons that competed for attention (Codex feedback). */
.detail-footer[b-bdrtgsobsw] {
    justify-content: space-between;
    align-items: center;
}
.detail-footer-secondary[b-bdrtgsobsw] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.detail-footer-primary[b-bdrtgsobsw] {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}
.btn-ghost[b-bdrtgsobsw] {
    padding: 10px 16px;
    background: transparent;
    color: var(--adm-fg-475569);
    border: 1px solid var(--adm-bd-cbd5e1);
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-ghost:hover[b-bdrtgsobsw] { background: #f1f5f9; }
.btn-ghost.ghost-warning[b-bdrtgsobsw] { color: var(--adm-fg-b45309); border-color: var(--adm-bd-fcd34d); }
.btn-ghost.ghost-warning:hover[b-bdrtgsobsw] { background: #fffbeb; }
.btn-ghost.ghost-danger[b-bdrtgsobsw] { color: var(--adm-fg-b91c1c); border-color: var(--adm-bd-fca5a5); }
.btn-ghost.ghost-danger:hover[b-bdrtgsobsw] { background: #fef2f2; }

/* Reschedule Modal */
.reschedule-modal[b-bdrtgsobsw] { max-width: 400px; }
.reschedule-modal .form-group[b-bdrtgsobsw] { margin-bottom: 16px; }
.reschedule-modal label[b-bdrtgsobsw] { display: block; margin-bottom: 6px; font-weight: 600; color: var(--adm-fg-374151); }
.reschedule-modal .form-input[b-bdrtgsobsw] { width: 100%; padding: 12px; border: 1px solid var(--adm-bd-d1d5db); border-radius: 8px; font-size: 16px; }
.reschedule-modal .form-input:focus[b-bdrtgsobsw] { outline: none; border-color: var(--adm-bd-2563eb); box-shadow: 0 0 0 3px var(--adm-sh-2563eb-a0_1); }

/* Detail Modal */
.detail-modal[b-bdrtgsobsw] { max-width: 500px; }

.detail-status[b-bdrtgsobsw] {
    text-align: center;
    padding: 12px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 20px;
}

.detail-status.confirmed[b-bdrtgsobsw] { background: #dbeafe; color: #1d4ed8; }
.detail-status.reminded[b-bdrtgsobsw] { background: #fef3c7; color: #92400e; }
.detail-status.pending[b-bdrtgsobsw] { background: #f3f4f6; color: #374151; }
.detail-status.arrived[b-bdrtgsobsw] { background: #d1fae5; color: #065f46; }
.detail-status.completed[b-bdrtgsobsw] { background: #d1fae5; color: #065f46; }
.detail-status.noshow[b-bdrtgsobsw] { background: #fee2e2; color: #991b1b; }
.detail-status.cancelled[b-bdrtgsobsw] { background: #f3f4f6; color: #6b7280; }

.detail-row[b-bdrtgsobsw] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--adm-bd-f3f4f6);
}

.detail-row.warning[b-bdrtgsobsw] {
    background: #fef2f2;
    margin: 0 -20px;
    padding: 12px 20px;
}

.detail-label[b-bdrtgsobsw] {
    font-size: 13px;
    color: var(--adm-fg-6b7280);
}

.detail-value[b-bdrtgsobsw] {
    font-size: 14px;
    font-weight: 600;
    text-align: right;
}

.detail-value.notes[b-bdrtgsobsw] {
    font-weight: normal;
    background: #f9fafb;
    padding: 8px;
    border-radius: 6px;
    max-width: 60%;
}

/* Drag and Drop Styles */
.dragging[b-bdrtgsobsw] {
    opacity: 0.5;
    cursor: grabbing;
    transform: scale(0.95);
}

.drop-target[b-bdrtgsobsw] {
    background: #dbeafe;
    border: 2px dashed #2563eb;
    border-radius: 8px;
    transition: all 0.2s;
}

[draggable="true"][b-bdrtgsobsw] {
    cursor: grab;
}

[draggable="true"]:active[b-bdrtgsobsw] {
    cursor: grabbing;
}

@media (max-width: 768px) {
    .week-view[b-bdrtgsobsw] {
        grid-template-columns: 1fr;
    }

    .week-day[b-bdrtgsobsw] {
        min-height: auto;
    }

    .calendar-grid[b-bdrtgsobsw] {
        padding: 8px;
    }

    .calendar-day[b-bdrtgsobsw] {
        min-height: 56px;
        justify-content: flex-start;
    }

    /* Phone month grid is too narrow for chip text — fall back to the
       compact day-number + count·pax header (chips return ≥769px). */
    .cal-chips[b-bdrtgsobsw] {
        display: none;
    }

    .cal-day-count[b-bdrtgsobsw] {
        font-size: 9px;
        padding: 1px 4px;
    }

    .day-number[b-bdrtgsobsw] {
        font-size: 14px;
    }
}

/* Print button in the toolbar — same shape as walk-in but in slate
   so the operator can scan past it when not needed. The admin shell
   renders this page in dark mode, so the base text must be light or
   it's dark-on-dark (the previous #475569 was invisible). */
.rcal-print-btn[b-bdrtgsobsw] {
    padding: 10px 14px;
    background: var(--adm-bg-94a3b8-a0_16);
    color: var(--adm-fgon-e0e5ea-cbd5e1);
    border: 1px solid var(--adm-bd-94a3b8-a0_4);
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.rcal-print-btn:hover[b-bdrtgsobsw] {
    background: var(--adm-bg-94a3b8-a0_28);
    color: var(--adm-fgon-cfd4dc-f1f5f9);
}
@media (max-width: 600px) {
    .rcal-print-btn-label[b-bdrtgsobsw] { display: none; }
}

/* Settings gear — same slate ghost language as the print button, square. */
.rcal-config-btn[b-bdrtgsobsw] {
    padding: 10px;
    width: 42px;
    background: var(--adm-bg-94a3b8-a0_16);
    color: var(--adm-fgon-e0e5ea-cbd5e1);
    border: 1px solid var(--adm-bd-94a3b8-a0_4);
    border-radius: 10px;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
.rcal-config-btn:hover[b-bdrtgsobsw] {
    background: var(--adm-bg-94a3b8-a0_28);
}

/* Share booking link — indigo-tinted so the discoverability CTA stands
   out from the slate ghost buttons without competing with +Nueva. */
.rcal-share-btn[b-bdrtgsobsw] {
    padding: 10px 14px;
    background: var(--adm-bg-6366f1-a0_16);
    color: var(--adm-fgon-e0e2fa-c7d2fe);
    border: 1px solid var(--adm-bd-6366f1-a0_45);
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.rcal-share-btn:hover[b-bdrtgsobsw] {
    background: var(--adm-bg-6366f1-a0_28);
    color: var(--adm-fgon-ced1f9-e0e7ff);
}
@media (max-width: 600px) {
    .rcal-share-btn-label[b-bdrtgsobsw] { display: none; }
}

/* ── Share dialog (rcal-share-*) — self-contained dark modal ── */
.rcal-share-overlay[b-bdrtgsobsw] {
    position: fixed;
    inset: 0;
    background: var(--adm-scrim-000000-a0_6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 20px;
}
.rcal-share-modal[b-bdrtgsobsw] {
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 16px;
    width: 100%;
    max-width: 460px;
    box-shadow: 0 20px 50px var(--adm-sh-000000-a0_5);
    overflow: hidden;
}
.rcal-share-head[b-bdrtgsobsw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--adm-bd-334155);
}
.rcal-share-head h2[b-bdrtgsobsw] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--adm-fg-f1f5f9);
}
.rcal-share-close[b-bdrtgsobsw] {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--adm-bg-334155);
    color: var(--adm-fgon-f1f5f9-e2e8f0);
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
}
.rcal-share-close:hover[b-bdrtgsobsw] {
    background: var(--adm-bghov-f1f5f9-475569);
}
.rcal-share-body[b-bdrtgsobsw] {
    padding: 20px;
}
.rcal-share-desc[b-bdrtgsobsw] {
    margin: 0 0 16px;
    font-size: 0.875rem;
    color: var(--adm-fg-94a3b8);
    line-height: 1.5;
}
/* Divides the customer link from the staff door link. Uses the same themed border
   token as the rest of this file so it survives the light/dark switch. */
.rcal-share-sep[b-bdrtgsobsw] {
    border-top: 1px solid var(--adm-bd-e5e7eb);
    margin: 18px 0 16px;
}
.rcal-share-linkrow[b-bdrtgsobsw] {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}
.rcal-share-link[b-bdrtgsobsw] {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    background: var(--adm-bg-0f172a);
    color: var(--adm-fgon-f8fafc-818cf8);
    font-size: 0.85rem;
}
.rcal-share-link:focus[b-bdrtgsobsw] {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-6366f1);
}
.rcal-share-copy[b-bdrtgsobsw] {
    flex: 0 0 auto;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    background: #6366f1;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}
.rcal-share-copy:hover[b-bdrtgsobsw] {
    background: #4f46e5;
}
.rcal-share-actions[b-bdrtgsobsw] {
    display: flex;
    gap: 8px;
}
.rcal-share-action[b-bdrtgsobsw] {
    flex: 1;
    text-align: center;
    padding: 10px 12px;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    background: var(--adm-bg-0f172a);
    color: var(--adm-fgon-f8fafc-e2e8f0);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}
.rcal-share-action:hover[b-bdrtgsobsw] {
    border-color: var(--adm-bdon-f8fafc-6366f1);
    color: var(--adm-fgon-f8fafc-c7d2fe);
}
.rcal-share-action--wa:hover[b-bdrtgsobsw] {
    border-color: var(--adm-bd-25d366);
    color: var(--adm-fg-6ee7a8);
}

/* Print-only sheet — hidden on screen, visible only when printing.
   The screen-side calendar grid + toolbar + modals all get hidden via
   the inversion in @media print below. */
.rcal-print-sheet[b-bdrtgsobsw] {
    display: none;
}

.rcal-print-header[b-bdrtgsobsw] {
    margin-bottom: 16px;
    border-bottom: 1px solid var(--adm-bd-000000);
    padding-bottom: 8px;
}
.rcal-print-header h2[b-bdrtgsobsw] {
    margin: 0;
    font-size: 18pt;
}
.rcal-print-meta[b-bdrtgsobsw] {
    font-size: 11pt;
    color: var(--adm-fg-444444);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.rcal-print-meta > span[b-bdrtgsobsw]::first-letter {
    text-transform: uppercase;
}
.rcal-print-table[b-bdrtgsobsw] {
    width: 100%;
    border-collapse: collapse;
    font-size: 10pt;
}
.rcal-print-table th[b-bdrtgsobsw],
.rcal-print-table td[b-bdrtgsobsw] {
    border: 1px solid #999;
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
}
.rcal-print-table th[b-bdrtgsobsw] {
    background: #f3f4f6;
}
.rcal-print-footer[b-bdrtgsobsw] {
    margin-top: 12px;
    font-size: 11pt;
    color: var(--adm-fg-444444);
    text-align: right;
}
.rcal-print-empty[b-bdrtgsobsw] {
    text-align: center;
    font-style: italic;
    color: var(--adm-fg-666666);
}

/* Print stylesheet: hide everything BUT the print sheet so the
   operator gets a clean one-page seating list. Critical that the
   AdminLayout shell isn't included — those rules live in the layout's
   own scoped CSS; we ensure body-level child visibility via inversion. */
@media print {
    /* Hide screen UI */
    .rcal-toolbar-head[b-bdrtgsobsw],
    .rcal-toolbar[b-bdrtgsobsw],
    .rcal-toolbar-filters[b-bdrtgsobsw],
    .calendar-grid[b-bdrtgsobsw],
    .week-view[b-bdrtgsobsw],
    .day-view[b-bdrtgsobsw],
    .rcal-sala[b-bdrtgsobsw],
    .stats-bar[b-bdrtgsobsw],
    .modal-overlay[b-bdrtgsobsw],
    .day-panel-overlay[b-bdrtgsobsw],
    .calendar-page > .loading[b-bdrtgsobsw],
    .calendar-page > h1[b-bdrtgsobsw],
    .calendar-page > header[b-bdrtgsobsw] {
        display: none !important;
    }
    /* Show the print sheet */
    .rcal-print-sheet[b-bdrtgsobsw] {
        display: block !important;
    }
    /* Reset page padding so the sheet uses the full paper */
    .calendar-page[b-bdrtgsobsw] {
        background: #fff !important;
        padding: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
    }
    /* Keep the seating sheet a real table on paper. admin-mobile.css turns
       every un-wrapped <table> into a display:block scroll box under
       `@media (max-width: 1024px)` — and that query has no media type, so it
       ALSO matches the print viewport (A4 ≈ 794 CSS px). Left alone, the
       printed sheet loses border-collapse and shrink-wraps instead of filling
       the page. Screen is unaffected: .rcal-print-sheet is display:none there. */
    .rcal-print-table[b-bdrtgsobsw] {
        display: table !important;
        width: 100% !important;
        max-width: none !important;
        overflow-x: visible !important;
    }
}

/* ──────────────────────────────────────────────────────────────────
   Bulk actions in the selected-day panel: a toggle, checkboxes on
   each chip, and a sticky action bar at the bottom when items are
   selected. Selectors prefixed .rcal-bulk-* — neighbors the existing
   .rcal-* convention.
   ────────────────────────────────────────────────────────────── */
.rcal-bulk-toolbar[b-bdrtgsobsw] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: #f9fafb;
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 12px;
    flex-wrap: wrap;
}
.rcal-bulk-toggle[b-bdrtgsobsw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
}
.rcal-bulk-link[b-bdrtgsobsw] {
    background: transparent;
    border: none;
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
}
.rcal-bulk-link:hover[b-bdrtgsobsw] {
    text-decoration: underline;
}
.rcal-bulk-check[b-bdrtgsobsw] {
    position: absolute;
    top: 8px;
    right: 8px;
}
.panel-reservation.selected[b-bdrtgsobsw] {
    outline: 2px solid var(--adm-bd-2563eb);
    outline-offset: -2px;
}
.rcal-bulk-bar[b-bdrtgsobsw] {
    position: sticky;
    bottom: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(6px);
    border-top: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px 14px;
    margin: 0 -16px -20px;
}
.rcal-bulk-count[b-bdrtgsobsw] {
    margin-right: auto;
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
}

/* Dark theme */
:root[data-theme="dark"] .rcal-bulk-toolbar[b-bdrtgsobsw] {
    background: #0f172a;
    color: #e2e8f0;
}
:root[data-theme="dark"] .rcal-bulk-toggle[b-bdrtgsobsw] { color: #cbd5e1; }
:root[data-theme="dark"] .rcal-bulk-link[b-bdrtgsobsw] { color: #58a6ff; }
:root[data-theme="dark"] .panel-reservation.selected[b-bdrtgsobsw] {
    outline-color: #58a6ff;
}
:root[data-theme="dark"] .rcal-bulk-bar[b-bdrtgsobsw] {
    background: rgba(15, 23, 42, 0.96);
    border-top-color: #334155;
}
:root[data-theme="dark"] .rcal-bulk-count[b-bdrtgsobsw] { color: #f1f5f9; }

/* ─────────────────────────────────────────────────────────────────
   iPhone (~390px) layout fixes. Additive only — base/desktop rules
   above are untouched. Goals: header wraps (action buttons drop below
   the title), the Mes/Semana/Día segment + month-nav fit, the source
   filter row scrolls horizontally, and the 7-column month grid fits the
   viewport so SÁB/DOM are no longer clipped.
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    /* (a) Header: let the action buttons wrap below the title instead of
       overflowing to the right. The title takes the full first row
       (flex:1 + 100% basis forces a wrap), the buttons share the next. */
    .calendar-header[b-bdrtgsobsw] {
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }
    .calendar-header h1[b-bdrtgsobsw] {
        font-size: 18px;
        flex: 1 1 100%;
        min-width: 0;
    }
    /* The back-arrow stays on the title row (pull it before the wrap by
       keeping it compact); the rest of the buttons flow onto row two. */
    .calendar-header .back-btn[b-bdrtgsobsw] {
        order: -1;
        flex: 0 0 auto;
    }
    .rcal-print-btn[b-bdrtgsobsw],
    .rcal-config-btn[b-bdrtgsobsw],
    .rcal-walkin-btn[b-bdrtgsobsw],
    .calendar-header .new-btn[b-bdrtgsobsw] {
        padding: 8px 12px;
    }

    /* (b) View toggle: 4 segments (Mes/Semana/Día/Sala) on one row —
       shrink padding/font so they fit without clipping. */
    .view-toggle[b-bdrtgsobsw] {
        gap: 2px;
    }
    .view-btn[b-bdrtgsobsw] {
        padding: 8px 4px;
        font-size: 13px;
        min-width: 0;
    }

    /* (b) Month nav: the 220px label + two 44px arrows + Hoy overflow at
       390px. Let the row wrap, shrink the label, and stop it forcing
       width via min-width. */
    .month-nav[b-bdrtgsobsw] {
        flex-wrap: wrap;
        gap: 8px;
    }
    .month-label[b-bdrtgsobsw] {
        font-size: 15px;
        min-width: 0;
        flex: 1 1 auto;
    }
    .nav-arrow[b-bdrtgsobsw] {
        width: 40px;
        height: 40px;
    }
    .today-btn[b-bdrtgsobsw] {
        padding: 8px 12px;
    }

    /* (c) Source-filter chips: horizontal scroll, never wrap, so the row
       can't push the toolbar wider than the viewport. (Base already has
       overflow-x:auto; make nowrap explicit and let it shrink.) */
    .rcal-source-filter[b-bdrtgsobsw] {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    .rcal-source-chip[b-bdrtgsobsw] {
        flex: 0 0 auto;
    }

    /* (d) MAIN: 7-column month grid must fit the viewport. minmax(0,1fr)
       + min-width:0 on cells lets the 7 columns share the width equally
       (chip/number content can no longer blow a column past 1fr), so
       SÁB/DOM stop being clipped off the right edge. */
    .calendar-grid[b-bdrtgsobsw] {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 2px;
        padding: 6px;
    }
    .weekday-header[b-bdrtgsobsw] {
        padding: 6px 1px;
        font-size: 9px;
        min-width: 0;
    }
    .calendar-day[b-bdrtgsobsw] {
        min-width: 0;
        padding: 4px 2px;
    }
    .calendar-day.today[b-bdrtgsobsw] {
        padding: 2px; /* keep parity with base today-border compensation */
    }
    .day-number[b-bdrtgsobsw] {
        font-size: 12px;
    }
    .cal-day-head[b-bdrtgsobsw] {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    /* (e) Bulk-action bar in the selected-day panel: a nowrap flex row of
       count + "Recordatorio" + "Cancelar". Inside the panel (which is
       overflow:hidden) the row's min-content exceeds the box at 360px, so the
       last button was clipped away rather than wrapping. Let it wrap. */
    .rcal-bulk-bar[b-bdrtgsobsw] {
        flex-wrap: wrap;
    }
}
/* /Pages/Admin/ReservationSettings.razor.rz.scp.css */
.settings-page[b-z1qwt2ih81] {
    min-height: 100vh;
    background: transparent;
}

.settings-header[b-z1qwt2ih81] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--adm-bg-1e293b);
    border-bottom: 1px solid var(--adm-bdon-ffffff-334155);
    position: sticky;
    top: 0;
    z-index: 100;
}

.back-btn[b-z1qwt2ih81] {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--adm-bg-334155);
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--adm-fgon-f1f5f9-e2e8f0);
    transition: background 0.2s;
}

.back-btn:hover[b-z1qwt2ih81] {
    background: var(--adm-bghov-f1f5f9-475569);
}

.settings-header h1[b-z1qwt2ih81] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: var(--adm-fgon-ffffff-f1f5f9);
}

.loading[b-z1qwt2ih81] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 12px;
    color: var(--adm-fg-94a3b8);
}

.spinner[b-z1qwt2ih81] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--adm-bd-334155);
    border-top-color: var(--adm-bd-6366f1);
    border-radius: 50%;
    animation: spin-b-z1qwt2ih81 1s linear infinite;
}

.spinner-small[b-z1qwt2ih81] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--adm-bd-ffffff-a0_3);
    border-top-color: var(--adm-bd-ffffff);
    border-radius: 50%;
    animation: spin-b-z1qwt2ih81 0.8s linear infinite;
    display: inline-block;
}

@keyframes spin-b-z1qwt2ih81 {
    to { transform: rotate(360deg); }
}

.error-message[b-z1qwt2ih81] {
    padding: 20px;
    margin: 20px;
    background: var(--adm-bg-dc2626-a0_15);
    border: 1px solid var(--adm-bdon-f4dadc-dc2626);
    border-radius: 12px;
    color: var(--adm-fgon-f4dadc-f87171);
    text-align: center;
}

.error-message button[b-z1qwt2ih81] {
    margin-top: 12px;
    padding: 8px 16px;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.settings-content[b-z1qwt2ih81] {
    padding: 16px;
    padding-bottom: 100px;
}

/* Section */
.setting-section[b-z1qwt2ih81] {
    margin-bottom: 24px;
}

.section-title[b-z1qwt2ih81] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--adm-fg-94a3b8);
    margin: 0 0 12px 4px;
}

/* Cards */
.setting-card[b-z1qwt2ih81] {
    background: var(--adm-bg-1e293b);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 4px var(--adm-sh-000000-a0_2);
    border: 1px solid var(--adm-bdon-ffffff-334155);
}

.toggle-card[b-z1qwt2ih81] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.setting-info h3[b-z1qwt2ih81] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--adm-fg-f1f5f9);
}

.setting-info p[b-z1qwt2ih81] {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: var(--adm-fg-94a3b8);
}

/* Toggle Switch */
.switch[b-z1qwt2ih81] {
    position: relative;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

.switch input[b-z1qwt2ih81] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-z1qwt2ih81] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--adm-bg-475569);
    border-radius: 28px;
    transition: 0.3s;
}

.slider[b-z1qwt2ih81]:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.switch input:checked + .slider[b-z1qwt2ih81] {
    background-color: #6366f1;
}

.switch input:checked + .slider[b-z1qwt2ih81]:before {
    transform: translateX(24px);
}

/* Form Fields */
.field-label[b-z1qwt2ih81] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--adm-fg-e2e8f0);
    margin-bottom: 8px;
}

.field-hint[b-z1qwt2ih81] {
    font-size: 0.8rem;
    color: var(--adm-fg-94a3b8);
    margin: 8px 0 0;
}

/* Input with Suffix */
.input-with-suffix[b-z1qwt2ih81] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-with-suffix input[b-z1qwt2ih81] {
    width: 100px;
    padding: 10px 12px;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    font-size: 1rem;
    color: var(--adm-fgon-f8fafc-e2e8f0);
    background: var(--adm-bg-0f172a);
}

.input-with-suffix input:focus[b-z1qwt2ih81] {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-6366f1);
}

.input-with-suffix .suffix[b-z1qwt2ih81] {
    font-size: 0.9rem;
    color: var(--adm-fg-94a3b8);
}

/* Time Inputs */
.time-inputs[b-z1qwt2ih81] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.time-field[b-z1qwt2ih81] {
    flex: 1;
}

.time-field label[b-z1qwt2ih81] {
    display: block;
    font-size: 0.8rem;
    color: var(--adm-fg-94a3b8);
    margin-bottom: 6px;
}

.time-field input[b-z1qwt2ih81] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--adm-bg-0f172a);
    color: var(--adm-fgon-f8fafc-e2e8f0);
}

.time-field input:focus[b-z1qwt2ih81] {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-6366f1);
}

.time-separator[b-z1qwt2ih81] {
    color: var(--adm-fg-64748b);
    margin-top: 24px;
}

/* Days Grid */
.days-grid[b-z1qwt2ih81] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.day-chip[b-z1qwt2ih81] {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    background: var(--adm-bg-334155);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.day-chip input[b-z1qwt2ih81] {
    display: none;
}

.day-chip span[b-z1qwt2ih81] {
    font-size: 0.85rem;
    color: var(--adm-fgon-f1f5f9-94a3b8);
}

.day-chip.closed[b-z1qwt2ih81] {
    background: var(--adm-bg-dc2626-a0_2);
}

.day-chip.closed span[b-z1qwt2ih81] {
    color: var(--adm-fg-f87171);
}

/* Radio Group */
.radio-group[b-z1qwt2ih81] {
    display: flex;
    gap: 12px;
}

.radio-option[b-z1qwt2ih81] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--adm-bg-334155);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.radio-option input[b-z1qwt2ih81] {
    accent-color: var(--adm-fgon-f1f5f9-6366f1);
}

.radio-option:has(input:checked)[b-z1qwt2ih81] {
    background: var(--adm-bg-6366f1-a0_2);
}

.radio-option span[b-z1qwt2ih81] {
    font-size: 0.9rem;
    color: var(--adm-fgon-f1f5f9-e2e8f0);
}

/* Range Inputs */
.range-inputs[b-z1qwt2ih81] {
    display: flex;
    gap: 24px;
}

.range-field[b-z1qwt2ih81] {
    flex: 1;
}

.range-label[b-z1qwt2ih81] {
    display: block;
    font-size: 0.8rem;
    color: var(--adm-fg-94a3b8);
    margin-bottom: 6px;
}

/* Textarea */
textarea[b-z1qwt2ih81] {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    font-size: 0.95rem;
    resize: vertical;
    font-family: inherit;
    background: var(--adm-bg-0f172a);
    color: var(--adm-fgon-f8fafc-e2e8f0);
}

textarea:focus[b-z1qwt2ih81] {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-6366f1);
}

/* Link Card */
.link-card[b-z1qwt2ih81] {
    background: var(--adm-bg-0f172a);
    border: 1px dashed var(--adm-bdon-f8fafc-334155);
}

.link-preview[b-z1qwt2ih81] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--adm-bg-1e293b);
    border-radius: 8px;
    border: 1px solid var(--adm-bdon-ffffff-334155);
}

.link-url[b-z1qwt2ih81] {
    flex: 1;
    font-size: 0.85rem;
    color: var(--adm-fg-818cf8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.copy-btn[b-z1qwt2ih81] {
    padding: 6px 14px;
    background: #6366f1;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
}

.copy-btn:hover[b-z1qwt2ih81] {
    background: #4f46e5;
}

/* Save Section */
.save-section[b-z1qwt2ih81] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 20px;
    background: var(--adm-bg-1e293b);
    border-top: 1px solid var(--adm-bdon-ffffff-334155);
    display: flex;
    align-items: center;
    gap: 12px;
}

.save-btn[b-z1qwt2ih81] {
    flex: 1;
    padding: 14px;
    background: #6366f1;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.save-btn:hover[b-z1qwt2ih81] {
    background: #4f46e5;
}

.save-btn:disabled[b-z1qwt2ih81] {
    opacity: 0.7;
    cursor: not-allowed;
}

.save-success[b-z1qwt2ih81] {
    color: var(--adm-fg-10b981);
    font-size: 0.9rem;
    font-weight: 500;
}

/* Timezone Select */
.timezone-select[b-z1qwt2ih81] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--adm-fgon-f8fafc-e2e8f0);
    background: var(--adm-bg-0f172a);
}

.timezone-select:focus[b-z1qwt2ih81] {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-6366f1);
}

.timezone-select option[b-z1qwt2ih81] {
    background: var(--adm-bg-1e293b);
    color: var(--adm-fgon-ffffff-e2e8f0);
}

/* Weekly Schedule (Multi-shift) */
.weekly-schedule-card[b-z1qwt2ih81] {
    padding: 12px;
}

.day-schedule-row[b-z1qwt2ih81] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--adm-bd-334155);
}

.day-schedule-row:last-of-type[b-z1qwt2ih81] {
    border-bottom: none;
}

.day-name[b-z1qwt2ih81] {
    min-width: 45px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--adm-fg-94a3b8);
    padding-top: 8px;
}

.shifts-container[b-z1qwt2ih81] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shift-row[b-z1qwt2ih81] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.shift-row input[b-z1qwt2ih81] {
    width: 70px;
    padding: 8px 10px;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 6px;
    font-size: 0.9rem;
    text-align: center;
    background: var(--adm-bg-0f172a);
    color: var(--adm-fgon-f8fafc-e2e8f0);
}

.shift-row input:focus[b-z1qwt2ih81] {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-6366f1);
}

.shift-row span[b-z1qwt2ih81] {
    color: var(--adm-fg-64748b);
    font-size: 0.85rem;
}

.remove-shift-btn[b-z1qwt2ih81] {
    width: 26px;
    height: 26px;
    border: none;
    background: var(--adm-bg-dc2626-a0_2);
    color: var(--adm-fgon-f2d0d1-f87171);
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
}

.remove-shift-btn:hover[b-z1qwt2ih81] {
    background: var(--adm-bg-dc2626-a0_3);
}

.closed-label[b-z1qwt2ih81] {
    color: var(--adm-fg-64748b);
    font-size: 0.85rem;
    font-style: italic;
    padding: 8px 0;
}

.add-shift-btn[b-z1qwt2ih81] {
    padding: 6px 12px;
    border: 1px dashed var(--adm-bdon-f8fafc-475569);
    background: var(--adm-bg-0f172a);
    color: var(--adm-fgon-f8fafc-94a3b8);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.add-shift-btn:hover[b-z1qwt2ih81] {
    border-color: var(--adm-bdon-e9ebfb-6366f1);
    color: var(--adm-fgon-e9ebfb-818cf8);
    background: var(--adm-bg-6366f1-a0_1);
}

.copy-schedule-btn[b-z1qwt2ih81] {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    background: var(--adm-bg-0f172a);
    color: var(--adm-fgon-f8fafc-94a3b8);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.copy-schedule-btn:hover[b-z1qwt2ih81] {
    border-color: var(--adm-bdon-e9ebfb-6366f1);
    color: var(--adm-fgon-e9ebfb-818cf8);
    background: var(--adm-bg-6366f1-a0_1);
}

/* Google Reserve Info Card */
.info-card[b-z1qwt2ih81] {
    display: flex;
    gap: 12px;
    background: var(--adm-bg-6366f1-a0_1);
    border: 1px solid var(--adm-bdon-e9ebfb-6366f1);
}

.info-icon[b-z1qwt2ih81] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.info-content h4[b-z1qwt2ih81] {
    margin: 0 0 8px;
    font-size: 0.95rem;
    color: var(--adm-fg-818cf8);
}

.setup-steps[b-z1qwt2ih81] {
    margin: 0;
    padding-left: 20px;
    font-size: 0.85rem;
    color: var(--adm-fg-a5b4fc);
    line-height: 1.6;
}

.setup-steps code[b-z1qwt2ih81] {
    background: var(--adm-bg-6366f1-a0_2);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--adm-fgon-dadcfa-c7d2fe);
}

.section-desc[b-z1qwt2ih81] {
    font-size: 0.85rem;
    color: var(--adm-fg-94a3b8);
    margin: -8px 0 12px 4px;
}

/* Responsive */
@media (max-width: 400px) {
    .time-inputs[b-z1qwt2ih81] {
        flex-direction: column;
        gap: 12px;
    }

    .time-separator[b-z1qwt2ih81] {
        display: none;
    }

    .radio-group[b-z1qwt2ih81] {
        flex-direction: column;
    }

    .range-inputs[b-z1qwt2ih81] {
        flex-direction: column;
        gap: 12px;
    }

    .shift-row input[b-z1qwt2ih81] {
        width: 60px;
        padding: 6px 8px;
    }

    .day-name[b-z1qwt2ih81] {
        min-width: 35px;
        font-size: 0.8rem;
    }
}

/* Inline <code>/<strong> inside setting descriptions (WhatsApp section
   renders its prose via MarkupString so template names show as pills). */
.setting-info code[b-z1qwt2ih81] {
    background: var(--adm-bg-6366f1-a0_18);
    color: var(--adm-fgon-dddffa-c7d2fe);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
}

.setting-info p strong[b-z1qwt2ih81] {
    color: var(--adm-fg-e2e8f0);
}

/* ──────────────────────────────────────────────────────────────────
   Blocked-dates section: lets staff close a calendar date so the
   reservation availability service refuses new bookings. Selectors
   prefixed .rbd-* (Reservas Blocked Dates) — this file is scoped CSS,
   so they don't leak, but the prefix keeps grep clean across pages.

   Styled dark-first to match the rest of the page (admin-layout pins
   data-theme="dark"), so no separate light/dark override blocks — the
   whole settings surface now shares one palette.
   ────────────────────────────────────────────────────────────────── */

/* Shared button styling for this page's add/action rows. Scoped CSS, so
   these generic names only match elements inside ReservationSettings. */
.rbd-add-row .btn-primary[b-z1qwt2ih81],
.rrec-add-row .btn-primary[b-z1qwt2ih81] {
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    background: #6366f1;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}
.rbd-add-row .btn-primary:hover:not(:disabled)[b-z1qwt2ih81],
.rrec-add-row .btn-primary:hover:not(:disabled)[b-z1qwt2ih81] {
    background: #4f46e5;
}
.rbd-add-row .btn-primary:disabled[b-z1qwt2ih81],
.rrec-add-row .btn-primary:disabled[b-z1qwt2ih81] {
    opacity: 0.55;
    cursor: not-allowed;
}

.rbd-add-row[b-z1qwt2ih81] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    align-items: center;
}

.rbd-date-input[b-z1qwt2ih81],
.rbd-reason-input[b-z1qwt2ih81] {
    padding: 10px 12px;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    font-size: 0.95rem;
    background: var(--adm-bg-0f172a);
    color: var(--adm-fgon-f8fafc-e2e8f0);
}

.rbd-date-input:focus[b-z1qwt2ih81],
.rbd-reason-input:focus[b-z1qwt2ih81] {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-6366f1);
}

.rbd-date-input[b-z1qwt2ih81] {
    flex: 0 0 auto;
}

.rbd-reason-input[b-z1qwt2ih81] {
    flex: 1 1 200px;
    min-width: 0;
}

.rbd-error[b-z1qwt2ih81] {
    background: var(--adm-bg-ef4444-a0_12);
    border: 1px solid var(--adm-bdon-f7e4e6-b91c1c);
    color: var(--adm-fgon-f7e4e6-fca5a5);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    margin-bottom: 12px;
}

.rbd-success[b-z1qwt2ih81] {
    background: var(--adm-bg-10b981-a0_12);
    border: 1px solid var(--adm-bdon-dcf2ed-10b981);
    color: var(--adm-fgon-dcf2ed-6ee7b7);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    margin-bottom: 12px;
}

.rbd-empty[b-z1qwt2ih81] {
    color: var(--adm-fg-64748b);
    font-size: 0.8rem;
    font-style: italic;
    margin: 4px 0;
}

.rbd-list[b-z1qwt2ih81] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rbd-item[b-z1qwt2ih81] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--adm-bg-0f172a);
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
}

.rbd-item-date[b-z1qwt2ih81] {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--adm-fg-f1f5f9);
    text-transform: capitalize;
    min-width: 220px;
}

.rbd-item-body[b-z1qwt2ih81] {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--adm-fg-cbd5e1);
    font-size: 0.8rem;
}

.rbd-item-body .muted[b-z1qwt2ih81] {
    color: var(--adm-fg-64748b);
    font-style: italic;
}

.rbd-item-reason[b-z1qwt2ih81] {
    word-break: break-word;
}

.rbd-item-actor[b-z1qwt2ih81] {
    color: var(--adm-fg-64748b);
    font-size: 0.75rem;
    margin-left: 4px;
}

.rbd-remove-btn[b-z1qwt2ih81] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--adm-fg-94a3b8);
    transition: all 0.15s;
}

.rbd-remove-btn:hover[b-z1qwt2ih81] {
    background: var(--adm-bg-b91c1c-a0_2);
    color: var(--adm-fgon-ebcecf-fca5a5);
}

/* ──────────────────────────────────────────────────────────────────
   Recurring reservations: settings UI to add/list/delete templates.
   .rrec-* prefix (Reservas Recurrentes). Same density / palette as the
   .rbd-* section so the two feel related; bigger row because each row
   carries when + who in one line.
   ────────────────────────────────────────────────────────────── */
.rrec-add-row[b-z1qwt2ih81] {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 110px 70px minmax(160px, 2fr) minmax(140px, 1fr) auto;
    gap: 8px;
    margin-bottom: 12px;
}
.rrec-day-input[b-z1qwt2ih81],
.rrec-time-input[b-z1qwt2ih81],
.rrec-size-input[b-z1qwt2ih81],
.rrec-name-input[b-z1qwt2ih81],
.rrec-phone-input[b-z1qwt2ih81] {
    padding: 10px 12px;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    font-size: 0.95rem;
    background: var(--adm-bg-0f172a);
    color: var(--adm-fgon-f8fafc-e2e8f0);
    min-width: 0;
}
.rrec-day-input:focus[b-z1qwt2ih81],
.rrec-time-input:focus[b-z1qwt2ih81],
.rrec-size-input:focus[b-z1qwt2ih81],
.rrec-name-input:focus[b-z1qwt2ih81],
.rrec-phone-input:focus[b-z1qwt2ih81] {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-6366f1);
}
.rrec-list[b-z1qwt2ih81] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rrec-item[b-z1qwt2ih81] {
    display: grid;
    grid-template-columns: 200px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    background: var(--adm-bg-0f172a);
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
}
.rrec-item-when[b-z1qwt2ih81] {
    font-weight: 600;
    color: var(--adm-fg-f1f5f9);
}
.rrec-item-who[b-z1qwt2ih81] {
    color: var(--adm-fg-cbd5e1);
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rrec-item-actions[b-z1qwt2ih81] {
    display: flex;
    gap: 6px;
    align-items: center;
}
.rrec-action.btn-secondary[b-z1qwt2ih81] {
    padding: 6px 12px;
    font-size: 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--adm-bdon-ffffff-475569);
    background: var(--adm-bg-1e293b);
    color: var(--adm-fgon-ffffff-e2e8f0);
    cursor: pointer;
    transition: all 0.2s;
}
.rrec-action.btn-secondary:hover:not(:disabled)[b-z1qwt2ih81] {
    border-color: var(--adm-bd-6366f1);
    color: var(--adm-fg-818cf8);
}
.rrec-action.btn-secondary:disabled[b-z1qwt2ih81] {
    opacity: 0.5;
    cursor: not-allowed;
}
.rrec-paused[b-z1qwt2ih81] {
    margin-left: 6px;
    font-size: 0.7rem;
    text-transform: uppercase;
    background: var(--adm-bg-f59e0b-a0_2);
    color: var(--adm-fgon-f7e8cc-fcd34d);
    padding: 1px 6px;
    border-radius: 4px;
}

@media (max-width: 720px) {
    .rrec-add-row[b-z1qwt2ih81] {
        grid-template-columns: 1fr 1fr;
    }
    .rrec-add-row > *[b-z1qwt2ih81] {
        min-width: 0;
    }
    .rrec-item[b-z1qwt2ih81] {
        grid-template-columns: 1fr auto;
    }
}

/* ──────────────────────────────────────────────────────────────────
   Phone (<=640px). The shared admin-mobile layer already covers the
   generic bits (shell padding, 16px inputs, 44px tap targets). What
   remains is page-specific and can't be fixed from there:

     · the Google Reserve setup URL is a single unbreakable token wider
       than the whole card, so it pushed the document sideways;
     · .rbd-item pins a 220px non-shrinking date column which, plus the
       ✕, already exceeds the ~274px of usable row width at 390px — and
       starved .rbd-item-body of every last pixel;
     · the .rrec-* rows were sized for a desktop-width grid, so the
       nowrap button label and the nowrap "who" line spilled/vanished.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* Google Reserve: <code>https://…/google-reserve/v3/</code> has no
       break opportunity, so allow one and let the flex child shrink. */
    .info-content[b-z1qwt2ih81] {
        min-width: 0;
    }

    .setup-steps[b-z1qwt2ih81] {
        overflow-wrap: anywhere;
    }

    /* Blocked dates: date over reason, ✕ stays pinned to the right. */
    .rbd-item[b-z1qwt2ih81] {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 2px 8px;
    }

    .rbd-item-date[b-z1qwt2ih81] {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    .rbd-item-body[b-z1qwt2ih81] {
        grid-column: 1;
        grid-row: 2;
    }

    .rbd-remove-btn[b-z1qwt2ih81] {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    /* Recurring add-row: day + time keep pairing up (the <=720px block
       above already drops it to 2 columns); everything else takes the
       full row so the nowrap "Añadir plantilla" label fits its button. */
    .rrec-size-input[b-z1qwt2ih81],
    .rrec-name-input[b-z1qwt2ih81],
    .rrec-phone-input[b-z1qwt2ih81],
    .rrec-add-row .btn-primary[b-z1qwt2ih81] {
        grid-column: 1 / -1;
    }

    /* One column per template, and let "name · pax · phone" wrap rather
       than be ellipsised away in a ~120px column. */
    .rrec-item[b-z1qwt2ih81] {
        grid-template-columns: 1fr;
    }

    .rrec-item-who[b-z1qwt2ih81] {
        white-space: normal;
        overflow: visible;
        overflow-wrap: anywhere;
    }
}
/* /Pages/Admin/RestaurantDetailModal.razor.rz.scp.css */
/* Restaurant detail modal styling.
   IMPORTANT: Blazor CSS isolation scopes each component's styles to its own
   rendered elements. Even though the parent SuperAdmin.razor.css defines
   `.sa-modal-backdrop`, `.sa-table`, `.sa-btn`, etc., those rules are
   scoped to SuperAdmin's elements — they DON'T apply to elements rendered
   by this child component. So we re-declare the base design-system rules
   below; Blazor auto-scopes them to RestaurantDetailModal's rendered output.
   Same names (so the markup is portable), parallel rules. */

/* ----- Modal scaffolding (mirrors SuperAdmin.razor.css :748-) ----- */
.sa-modal-backdrop[b-8ts2k0754p] {
    position: fixed;
    inset: 0;
    background: var(--adm-scrim-070b14-a0_72);
    z-index: 10060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: rdm-fade-b-8ts2k0754p 0.15s ease-out;
}

@keyframes rdm-fade-b-8ts2k0754p { from { opacity: 0; } to { opacity: 1; } }

.sa-modal[b-8ts2k0754p] {
    width: 460px;
    max-width: 100%;
    max-height: 92vh;
    background: linear-gradient(180deg, var(--adm-bggrad-1f2a3d) 0%, var(--adm-bggrad-1a2436) 100%);
    border-radius: 16px;
    border: 1px solid var(--adm-bd-94a3b8-a0_12);
    box-shadow: 0 28px 56px var(--adm-sh-000000-a0_44), 0 2px 6px var(--adm-sh-000000-a0_26);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: rdm-pop-b-8ts2k0754p 0.2s cubic-bezier(.2,.8,.3,1);
}

@keyframes rdm-pop-b-8ts2k0754p {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.sa-modal-head[b-8ts2k0754p] {
    padding: 1.15rem 1.4rem 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--adm-bd-94a3b8-a0_12);
}

.sa-modal-close[b-8ts2k0754p] {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--adm-fg-94a3b8);
    font-size: 1.3rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.sa-modal-close:hover[b-8ts2k0754p] { background: var(--adm-bg-94a3b8-a0_12); color: var(--adm-fgon-e6eaee-f1f5f9); }

.sa-modal-body[b-8ts2k0754p] {
    padding: 1.2rem 1.4rem;
    overflow-y: auto;
}

/* ----- Tables (mirrors SuperAdmin.razor.css :248-) ----- */
.sa-table-wrapper[b-8ts2k0754p] {
    overflow-x: auto;
    border: 1px solid var(--adm-bdon-ffffff-1e1e2a);
    border-radius: 8px;
    background: var(--adm-bg-15151f);
}

.sa-table[b-8ts2k0754p] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.sa-table th[b-8ts2k0754p] {
    background: var(--adm-bg-1e1e2a);
    padding: 0.625rem 0.75rem;
    text-align: left;
    color: var(--adm-fgon-ffffff-71717a);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.sa-table td[b-8ts2k0754p] {
    padding: 0.625rem 0.75rem;
    border-top: 1px solid var(--adm-bd-1e1e2a);
    color: var(--adm-fg-d4d4d8);
    white-space: nowrap;
}

.sa-table tbody tr:hover[b-8ts2k0754p] { background: var(--adm-bg-1a1a24); }
.sa-table .row-inactive[b-8ts2k0754p] { opacity: 0.5; }
.sa-table .cell-name[b-8ts2k0754p] { font-weight: 600; color: var(--adm-fg-f4f4f5); }
.sa-table .cell-date[b-8ts2k0754p] { color: var(--adm-fg-71717a); font-family: monospace; }
.sa-table code[b-8ts2k0754p] {
    background: var(--adm-bg-1e1e2a);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--adm-fgon-ffffff-a5b4fc);
}

/* ----- Forms (mirrors SuperAdmin.razor.css :383-) ----- */
.sa-form-group label[b-8ts2k0754p] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--adm-fg-a1a1aa);
    margin-bottom: 0.375rem;
}

.sa-form-group[b-8ts2k0754p] { margin-bottom: 1rem; }

.sa-input[b-8ts2k0754p] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    background: var(--adm-bg-0a0a0f);
    border: 1px solid var(--adm-bdon-ffffff-2a2a3a);
    border-radius: 8px;
    color: var(--adm-fgon-ffffff-e4e4e7);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.sa-input:focus[b-8ts2k0754p] { border-color: var(--adm-bdon-ffffff-6366f1); }

.sa-textarea[b-8ts2k0754p] {
    min-height: 80px;
    resize: vertical;
    font-family: inherit;
}

/* ----- Buttons (mirrors SuperAdmin.razor.css :440-) ----- */
.sa-btn[b-8ts2k0754p] {
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.sa-btn.small[b-8ts2k0754p] { padding: 0.3rem 0.625rem; font-size: 0.75rem; }
.sa-btn.primary[b-8ts2k0754p] { background: #6366f1; color: #fff; border-color: #6366f1; }
.sa-btn.primary:hover[b-8ts2k0754p] { background: #4f46e5; }
.sa-btn.outline[b-8ts2k0754p] { background: transparent; color: var(--adm-fg-a1a1aa); border-color: var(--adm-bd-2a2a3a); }
.sa-btn.outline:hover[b-8ts2k0754p] { background: var(--adm-bg-1e1e2a); color: var(--adm-fgon-ffffff-e4e4e7); }
.sa-btn.danger[b-8ts2k0754p] { background: var(--adm-bg-ef4444-a0_15); color: var(--adm-fgon-f7dfe0-ef4444); border-color: var(--adm-bd-ef4444-a0_3); }
.sa-btn.danger:hover[b-8ts2k0754p] { background: var(--adm-bg-ef4444-a0_25); }
.sa-btn:disabled[b-8ts2k0754p] { opacity: 0.5; cursor: not-allowed; }

/* ----- Modal-specific overrides ----- */

.sa-rdm-modal[b-8ts2k0754p] {
    width: min(1100px, 96vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
}

.sa-rdm-title[b-8ts2k0754p] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--adm-fg-f4f4f5);
}

.sa-rdm-sub[b-8ts2k0754p] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    color: var(--adm-fg-71717a);
    font-size: 0.875rem;
}

.sa-rdm-sub code[b-8ts2k0754p] {
    background: var(--adm-bg-1e1e2a);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    color: var(--adm-fgon-ffffff-a5b4fc);
    font-size: 0.8125rem;
}

/* Plan/status pill — small, neutral by default; tab-content tables have
   richer status pills below. */
.sa-rdm-pill[b-8ts2k0754p] {
    background: linear-gradient(135deg, var(--adm-bggrad-6366f1), var(--adm-bggrad-4338ca));
    color: var(--adm-fgon-dedffc-f5f3ff);
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.sa-rdm-pill-neutral[b-8ts2k0754p] {
    background: var(--adm-bg-374151);
    color: var(--adm-fgon-f3f4f6-d1d5db);
}

.sa-rdm-pill-open[b-8ts2k0754p] { background: #1e3a8a; color: #dbeafe; }
.sa-rdm-pill-closed[b-8ts2k0754p] { background: var(--adm-bg-064e3b); color: var(--adm-fgon-d1fae5-d1fae5); }
.sa-rdm-pill-cancelled[b-8ts2k0754p] { background: var(--adm-bg-7f1d1d); color: var(--adm-fgon-fee2e2-fecaca); }
.sa-rdm-pill-paid[b-8ts2k0754p] { background: var(--adm-bg-065f46); color: var(--adm-fgon-d9fdf2-d1fae5); }

/* Tabs — horizontal strip below the title. Active tab gets the indigo
   underline so the operator's eye snaps to it on focus. */
.sa-rdm-tabs[b-8ts2k0754p] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--adm-bdon-ffffff-27272a);
    padding: 0 1.5rem;
    background: var(--adm-bg-0f0f17);
    overflow-x: auto;
}

.sa-rdm-tab[b-8ts2k0754p] {
    background: transparent;
    color: var(--adm-fg-71717a);
    border: none;
    padding: 12px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.sa-rdm-tab:hover[b-8ts2k0754p] {
    color: var(--adm-fg-d4d4d8);
}

.sa-rdm-tab.active[b-8ts2k0754p] {
    color: var(--adm-fg-a5b4fc);
    border-bottom-color: var(--adm-bd-6366f1);
}

.sa-rdm-body[b-8ts2k0754p] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
}

/* Resumen tab uses a 2-column grid on wider screens; collapses to single
   column under 800px so the modal stays usable on a phone in landscape. */
.sa-rdm-grid-2[b-8ts2k0754p] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.sa-rdm-span-2[b-8ts2k0754p] {
    grid-column: 1 / -1;
}

@media (max-width: 800px) {
    .sa-rdm-grid-2[b-8ts2k0754p] { grid-template-columns: 1fr; }
}

.sa-rdm-card[b-8ts2k0754p] {
    background: var(--adm-bg-15151f);
    border: 1px solid var(--adm-bdon-ffffff-27272a);
    border-radius: 8px;
    padding: 14px 16px;
}

.sa-rdm-card h3[b-8ts2k0754p] {
    margin: 0 0 12px;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--adm-fgon-ffffff-a5b4fc);
    font-weight: 700;
}

.sa-rdm-card-danger[b-8ts2k0754p] {
    border-color: var(--adm-bd-7f1d1d);
}

.sa-rdm-card-danger h3[b-8ts2k0754p] {
    color: var(--adm-fg-fca5a5);
}

/* Definition-list layout for label/value pairs in the cards. Two columns
   so eyes scan vertically by label, then horizontally to the value. */
.sa-rdm-dl[b-8ts2k0754p] {
    margin: 0;
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 6px 12px;
    font-size: 0.8125rem;
}

.sa-rdm-dl dt[b-8ts2k0754p] {
    color: var(--adm-fg-71717a);
    font-weight: 500;
}

.sa-rdm-dl dd[b-8ts2k0754p] {
    margin: 0;
    color: var(--adm-fg-e4e4e7);
    word-break: break-word;
}

.sa-rdm-verified[b-8ts2k0754p] { color: var(--adm-fg-22c55e); margin-left: 4px; }
.sa-rdm-unverified[b-8ts2k0754p] { color: var(--adm-fg-f59e0b); margin-left: 4px; }

.sa-rdm-toggles[b-8ts2k0754p] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.sa-rdm-toggle[b-8ts2k0754p] {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.sa-rdm-toggle.on[b-8ts2k0754p] {
    background: var(--adm-bg-064e3b);
    color: var(--adm-fgon-d1fae5-6ee7b7);
}

.sa-rdm-toggle.off[b-8ts2k0754p] {
    background: var(--adm-bg-27272a);
    color: var(--adm-fgon-ffffff-71717a);
    text-decoration: line-through;
}

.sa-rdm-warning[b-8ts2k0754p] {
    margin-top: 12px;
    background: var(--adm-bg-7c2d12);
    color: var(--adm-fgon-fae3db-fed7aa);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.8125rem;
}

.sa-rdm-timeline[b-8ts2k0754p] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sa-rdm-timeline li[b-8ts2k0754p] {
    padding: 8px 0;
    border-bottom: 1px solid var(--adm-bd-1f1f29);
    color: var(--adm-fg-d4d4d8);
    font-size: 0.875rem;
}

.sa-rdm-timeline li:last-child[b-8ts2k0754p] { border-bottom: none; }

.sa-rdm-pending[b-8ts2k0754p] {
    color: var(--adm-fg-71717a);
    font-style: italic;
}

.sa-rdm-loading[b-8ts2k0754p] {
    text-align: center;
    color: var(--adm-fg-71717a);
    padding: 40px 0;
    font-size: 0.875rem;
}

.sa-rdm-muted[b-8ts2k0754p] {
    color: var(--adm-fg-71717a);
    font-size: 0.8125rem;
    margin: 0 0 12px;
}

.sa-rdm-form[b-8ts2k0754p] {
    max-width: 720px;
}

.sa-rdm-bigtext[b-8ts2k0754p] {
    min-height: 180px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.5;
}

.sa-rdm-templates[b-8ts2k0754p] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 14px;
    padding: 10px 12px;
    background: var(--adm-bg-0f0f17);
    border: 1px solid var(--adm-bdon-ffffff-27272a);
    border-radius: 8px;
}

.sa-rdm-templates-label[b-8ts2k0754p] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--adm-fg-71717a);
    font-weight: 700;
}

.sa-rdm-templates-hint[b-8ts2k0754p] {
    font-size: 0.75rem;
    color: var(--adm-fg-a5b4fc);
    font-family: monospace;
}

.sa-rdm-actions-grid[b-8ts2k0754p] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 800px) {
    .sa-rdm-actions-grid[b-8ts2k0754p] { grid-template-columns: 1fr; }
}

.sa-rdm-row[b-8ts2k0754p] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sa-rdm-num[b-8ts2k0754p] {
    width: 80px;
}

/* Recipient confirmation chip — surfaces the email address that will get
   the access message so the operator can eyeball it before clicking. */
.sa-rdm-recipient[b-8ts2k0754p] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 8px 12px;
    background: var(--adm-bg-0f0f17);
    border: 1px solid var(--adm-bdon-ffffff-27272a);
    border-radius: 6px;
    font-size: 0.8125rem;
    color: var(--adm-fgon-ffffff-d4d4d8);
}

.sa-rdm-recipient-label[b-8ts2k0754p] {
    color: var(--adm-fg-71717a);
    font-weight: 500;
}

.sa-rdm-recipient code[b-8ts2k0754p] {
    background: var(--adm-bg-1e1e2a);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    color: var(--adm-fgon-ffffff-a5b4fc);
    font-size: 0.8125rem;
}

/* ============================================================
   Actividad tab — KPI cards, last-activity chip, sparkline
   ============================================================ */

/* Last-activity chip: green for healthy, amber for stale, red for dead.
   Sits at the top so the operator sees the headline answer first. */
.sa-rdm-last-activity[b-8ts2k0754p] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    margin: 0 0 16px;
    font-size: 0.875rem;
    border: 1px solid transparent;
}

.sa-rdm-last-activity.sa-rdm-la-active[b-8ts2k0754p] {
    background: var(--adm-bg-10b981-a0_12);
    border-color: var(--adm-bd-10b981-a0_35);
    color: var(--adm-fgon-dcf2ed-6ee7b7);
}

.sa-rdm-last-activity.sa-rdm-la-warn[b-8ts2k0754p] {
    background: var(--adm-bg-f59e0b-a0_12);
    border-color: var(--adm-bd-f59e0b-a0_35);
    color: var(--adm-fgon-f8efdf-fcd34d);
}

.sa-rdm-last-activity.sa-rdm-la-dead[b-8ts2k0754p] {
    background: var(--adm-bg-ef4444-a0_12);
    border-color: var(--adm-bd-ef4444-a0_35);
    color: var(--adm-fgon-f7e4e6-fca5a5);
}

.sa-rdm-la-label[b-8ts2k0754p] { color: inherit; opacity: 0.7; font-weight: 500; }
.sa-rdm-la-meta[b-8ts2k0754p] { color: inherit; opacity: 0.7; font-weight: 400; }

/* KPI grid — 4 cards on wide, 2 on tablet, 1 on phone. */
.sa-rdm-kpi-grid[b-8ts2k0754p] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

@media (max-width: 800px) {
    .sa-rdm-kpi-grid[b-8ts2k0754p] { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .sa-rdm-kpi-grid[b-8ts2k0754p] { grid-template-columns: 1fr; }
}

.sa-rdm-kpi[b-8ts2k0754p] {
    background: var(--adm-bg-15151f);
    border: 1px solid var(--adm-bdon-ffffff-27272a);
    border-radius: 10px;
    padding: 14px 16px;
    min-height: 100px;
}

.sa-rdm-kpi-label[b-8ts2k0754p] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--adm-fg-71717a);
    font-weight: 700;
    margin-bottom: 6px;
}

.sa-rdm-kpi-value[b-8ts2k0754p] {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--adm-fg-f4f4f5);
    line-height: 1.1;
}

.sa-rdm-kpi-sub[b-8ts2k0754p] {
    font-size: 0.8125rem;
    color: var(--adm-fg-a5b4fc);
    margin-top: 2px;
    font-weight: 600;
}

.sa-rdm-kpi-trend[b-8ts2k0754p] {
    margin-top: 8px;
    font-size: 0.75rem;
    font-weight: 600;
}

.sa-rdm-kpi-trend span[b-8ts2k0754p] {
    color: var(--adm-fg-71717a);
    font-weight: 400;
}

.sa-rdm-kpi-trend.up[b-8ts2k0754p] { color: var(--adm-fg-6ee7b7); }
.sa-rdm-kpi-trend.down[b-8ts2k0754p] { color: var(--adm-fg-fca5a5); }
.sa-rdm-kpi-trend.flat[b-8ts2k0754p] { color: var(--adm-fg-71717a); }

/* Sparkline — pure CSS bars, height ~ orders/day. Bars sit on a baseline so
   even zero-order days are visible. Hover = browser-default tooltip via title. */
.sa-rdm-spark[b-8ts2k0754p] {
    background: var(--adm-bg-15151f);
    border: 1px solid var(--adm-bdon-ffffff-27272a);
    border-radius: 10px;
    padding: 14px 16px;
}

.sa-rdm-spark-head[b-8ts2k0754p] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.8125rem;
    color: var(--adm-fg-d4d4d8);
    font-weight: 600;
    margin-bottom: 10px;
}

.sa-rdm-spark-bars[b-8ts2k0754p] {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 80px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--adm-bd-27272a);
}

.sa-rdm-spark-bar[b-8ts2k0754p] {
    flex: 1 1 0;
    min-width: 4px;
    background: linear-gradient(180deg, var(--adm-bggrad-6366f1), var(--adm-bggrad-4338ca));
    border-radius: 2px 2px 0 0;
    transition: opacity 0.15s;
    cursor: help;
}

.sa-rdm-spark-bar:hover[b-8ts2k0754p] { opacity: 0.7; }

.sa-rdm-spark-bar.empty[b-8ts2k0754p] {
    background: var(--adm-bg-27272a);
}

.sa-rdm-spark-axis[b-8ts2k0754p] {
    display: flex;
    justify-content: space-between;
    font-size: 0.6875rem;
    color: var(--adm-fg-71717a);
    margin-top: 6px;
}

.sa-rdm-audit-details[b-8ts2k0754p] {
    color: var(--adm-fg-71717a);
    font-family: monospace;
    font-size: 0.75rem;
    max-width: 300px;
}

.sa-rdm-toast[b-8ts2k0754p] {
    position: absolute;
    bottom: 16px;
    right: 16px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 4px 12px var(--adm-sh-000000-a0_4);
    animation: rdmFade-b-8ts2k0754p 0.2s ease;
}

.sa-rdm-toast.success[b-8ts2k0754p] {
    background: linear-gradient(135deg, var(--adm-bggrad-059669), var(--adm-bggrad-047857));
    color: var(--adm-fgon-dcfef3-d1fae5);
}

.sa-rdm-toast.error[b-8ts2k0754p] {
    background: linear-gradient(135deg, var(--adm-bggrad-dc2626), var(--adm-bggrad-991b1b));
    color: var(--adm-fgon-fae0e0-fee2e2);
}

@keyframes rdmFade-b-8ts2k0754p {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Phone (<=640px)
   SuperAdmin.razor uses EmptyLayout, so this modal never sits inside
   .admin-content — the app-wide admin-mobile.css layer does NOT reach it.
   Everything below is therefore local, and lives only inside the media
   query so the desktop modal is untouched.
   ============================================================ */

@media (max-width: 640px) {
    /* Reclaim the chrome: 16px backdrop + 24px body padding each side left
       only ~276px of usable card width on a 390px phone. */
    .sa-modal-backdrop[b-8ts2k0754p] { padding: 8px; }

    .sa-rdm-body[b-8ts2k0754p] { padding: 1rem 0.85rem; }
    .sa-modal-head[b-8ts2k0754p] { padding: 0.9rem 0.85rem 0.75rem; gap: 8px; }
    .sa-rdm-card[b-8ts2k0754p] { padding: 12px; }

    /* Head: the title block is a flex item with min-width:auto, so a long
       restaurant name / slug pushed the close button off the edge. */
    .sa-modal-head > div[b-8ts2k0754p] { min-width: 0; }
    .sa-rdm-title[b-8ts2k0754p] { font-size: 1.15rem; overflow-wrap: anywhere; }
    .sa-rdm-sub[b-8ts2k0754p] { flex-wrap: wrap; gap: 6px 8px; }

    /* Close button was a 30px target — below the 44px touch minimum. */
    .sa-modal-close[b-8ts2k0754p] { width: 40px; height: 40px; flex: 0 0 auto; }

    /* Tabs already scroll; just trim the side padding so more than two are
       visible before the operator has to swipe. */
    .sa-rdm-tabs[b-8ts2k0754p] { padding: 0 0.5rem; }

    /* 130px label column left ~130px for the value — emails/addresses were
       breaking mid-word into a sliver. */
    .sa-rdm-dl[b-8ts2k0754p] { grid-template-columns: 96px 1fr; gap: 6px 10px; }
    .sa-rdm-dl dd[b-8ts2k0754p] { overflow-wrap: anywhere; }

    /* Last-activity chip: 3 inline items on one non-wrapping row. */
    .sa-rdm-last-activity[b-8ts2k0754p] { flex-wrap: wrap; align-items: baseline; }

    /* Recipient chip: a long owner email is one unbreakable token and
       overflowed the card horizontally. */
    .sa-rdm-recipient[b-8ts2k0754p] { flex-wrap: wrap; }
    .sa-rdm-recipient code[b-8ts2k0754p] { min-width: 0; overflow-wrap: anywhere; }

    /* Extend-trial row: number input + unit + button. */
    .sa-rdm-row[b-8ts2k0754p] { flex-wrap: wrap; }

    /* 14px inputs trigger iOS focus-zoom. */
    .sa-input[b-8ts2k0754p] { font-size: 16px; }
    .sa-btn[b-8ts2k0754p] { min-height: 40px; }

    /* Toast was pinned bottom-right of the viewport and shrink-to-fit, so a
       long message crept under the right edge. Span the width instead. */
    .sa-rdm-toast[b-8ts2k0754p] {
        left: 12px;
        right: 12px;
        bottom: 12px;
        text-align: center;
    }
}
/* /Pages/Admin/RrsifAdmin.razor.rz.scp.css */
/* RRSIF Admin Page - Dark Theme */
h2.font-bold[b-nsp25hoo60] {
    color: var(--adm-fg-f1f5f9);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Filter section */
.flex.gap-2[b-nsp25hoo60] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--adm-bg-1e293b);
    border-radius: 12px;
    border: 1px solid var(--adm-bdon-ffffff-334155);
}

.flex.gap-2 > div[b-nsp25hoo60] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.flex.gap-2 label[b-nsp25hoo60] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--adm-fgon-ffffff-94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Form inputs */
input[type="datetime-local"][b-nsp25hoo60],
select[b-nsp25hoo60] {
    padding: 0.625rem 0.875rem;
    background: var(--adm-bg-0f172a);
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    color: var(--adm-fgon-f8fafc-e2e8f0);
    font-size: 0.875rem;
    min-width: 160px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

input[type="datetime-local"]:focus[b-nsp25hoo60],
select:focus[b-nsp25hoo60] {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-3b82f6);
    box-shadow: 0 0 0 3px var(--adm-sh-3b82f6-a0_2);
}

select option[b-nsp25hoo60] {
    background: var(--adm-bg-1e293b);
    color: var(--adm-fgon-ffffff-e2e8f0);
}

/* Buttons */
.btn[b-nsp25hoo60] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid var(--adm-bdon-f1f5f9-475569);
    background: var(--adm-bg-334155);
    color: var(--adm-fgon-f1f5f9-f1f5f9);
}

.btn:hover:not(:disabled)[b-nsp25hoo60] {
    background: var(--adm-bg-475569);
}

.btn:disabled[b-nsp25hoo60] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-ghost[b-nsp25hoo60] {
    background: transparent;
    border: 1px solid var(--adm-bd-475569);
    color: var(--adm-fg-94a3b8);
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
}

.btn-ghost:hover[b-nsp25hoo60] {
    background: var(--adm-bg-334155);
    color: var(--adm-fgon-f1f5f9-f1f5f9);
}

/* Alert warning */
.alert.alert-warning[b-nsp25hoo60] {
    padding: 1rem;
    background: var(--adm-bg-f59e0b-a0_15);
    border: 1px solid var(--adm-bdon-f8ecd8-f59e0b);
    border-radius: 8px;
    color: var(--adm-fgon-f8ecd8-fbbf24);
    margin-bottom: 1rem;
}

/* Total count */
.text-sm.mb-2[b-nsp25hoo60] {
    font-size: 0.875rem;
    color: var(--adm-fg-94a3b8);
    margin-bottom: 0.75rem;
}

.text-sm.mb-2 b[b-nsp25hoo60] {
    color: var(--adm-fg-f1f5f9);
    font-weight: 600;
}

/* Table container */
.overflow-auto[b-nsp25hoo60] {
    overflow-x: auto;
    background: var(--adm-bg-1e293b);
    border-radius: 12px;
    border: 1px solid var(--adm-bdon-ffffff-334155);
}

/* Table */
.table[b-nsp25hoo60] {
    width: 100%;
    border-collapse: collapse;
}

.table th[b-nsp25hoo60] {
    text-align: left;
    padding: 0.875rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--adm-fgon-f8fafc-94a3b8);
    background: var(--adm-bg-0f172a);
    border-bottom: 1px solid var(--adm-bdon-f8fafc-334155);
    white-space: nowrap;
}

.table td[b-nsp25hoo60] {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--adm-fg-e2e8f0);
    border-bottom: 1px solid var(--adm-bd-334155);
    white-space: nowrap;
}

.table tbody tr:hover[b-nsp25hoo60] {
    background: var(--adm-bg-334155-a0_5);
}

.table tbody tr:last-child td[b-nsp25hoo60] {
    border-bottom: none;
}

/* Chips/badges */
.chip[b-nsp25hoo60] {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--adm-bg-334155);
    color: var(--adm-fgon-f1f5f9-94a3b8);
}

.chip.ok[b-nsp25hoo60] {
    background: var(--adm-bg-22c55e-a0_2);
    color: var(--adm-fgon-cdefdc-4ade80);
}

.chip.bad[b-nsp25hoo60] {
    background: var(--adm-bg-ef4444-a0_2);
    color: var(--adm-fgon-f6d6d7-f87171);
}

/* Details/summary for QR */
details[b-nsp25hoo60] {
    cursor: pointer;
}

details summary[b-nsp25hoo60] {
    color: var(--adm-fg-3b82f6);
    font-size: 0.8125rem;
}

details summary:hover[b-nsp25hoo60] {
    text-decoration: underline;
}

details pre[b-nsp25hoo60] {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: var(--adm-bg-0f172a);
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--adm-fgon-f8fafc-94a3b8);
    white-space: pre-wrap;
    word-break: break-all;
    max-width: 300px;
}

/* Loading state */
div:only-child:contains("Cargando")[b-nsp25hoo60] {
    color: var(--adm-fg-94a3b8);
}

/* Preview modal */
.font-bold[b-nsp25hoo60] {
    font-weight: 700;
    color: var(--adm-fg-1e293b);
}

/* Responsive */
@media (max-width: 768px) {
    .flex.gap-2[b-nsp25hoo60] {
        flex-direction: column;
        align-items: stretch;
    }

    .flex.gap-2 > div[b-nsp25hoo60] {
        width: 100%;
    }

    input[type="datetime-local"][b-nsp25hoo60],
    select[b-nsp25hoo60] {
        width: 100%;
    }

    .table th[b-nsp25hoo60],
    .table td[b-nsp25hoo60] {
        padding: 0.625rem 0.5rem;
        font-size: 0.8125rem;
    }
}

/* Phone: the input/select rule above is `input[type=…]` + the scoped attribute,
   so it out-specifies the global mobile layer's 16px sizing and iOS ends up
   zooming the viewport when the date filters get focus. Restore 16px here. */
@media (max-width: 640px) {
    input[type="datetime-local"][b-nsp25hoo60],
    select[b-nsp25hoo60] {
        font-size: 16px;
    }
}
/* /Pages/Admin/Soporte.razor.rz.scp.css */
/* Mesero customer support portal — admin-scoped page. Lives in a
   .razor.css file (Blazor isolation) so class names DON'T leak
   globally even though many are short — see admin-pages.css note in
   memory. Modal-related selectors are namespaced with `-soporte` to
   stay clear of the global `.modal` / `.modal-backdrop` rules. */

.soporte-page[b-fgm2fup8wy] {
    padding: 20px 24px 32px;
    max-width: 1400px;
    margin: 0 auto;
    color: #0f172a;
    font-family: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
}

.page-header[b-fgm2fup8wy] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 16px;
}
.page-header h1[b-fgm2fup8wy] {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.page-header .subtitle[b-fgm2fup8wy] {
    margin: 4px 0 0;
    color: var(--adm-fg-64748b);
    font-size: .92rem;
}
.header-actions .btn.primary[b-fgm2fup8wy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 10px;
    font-weight: 600;
    background: linear-gradient(135deg, var(--adm-bggrad-0f172a) 0%, var(--adm-bggrad-1e293b) 100%);
    color: var(--adm-fgon-f8fafc-ffffff);
    border: none;
    cursor: pointer;
    box-shadow: 0 1px 2px var(--adm-sh-0f172a-a0_18), inset 0 1px 0 var(--adm-sh-ffffff-a0_06);
}
.header-actions .btn.primary:hover[b-fgm2fup8wy] { transform: translateY(-1px); }

.filters[b-fgm2fup8wy] {
    display: inline-flex;
    gap: 4px;
    background: #f1f5f9;
    border-radius: 10px;
    padding: 3px;
    margin: 0 0 14px;
}
.filters button[b-fgm2fup8wy] {
    padding: 7px 14px;
    border: none;
    background: transparent;
    color: #64748b;
    border-radius: 7px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.filters button.active[b-fgm2fup8wy] {
    background: #fff;
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.filters button span[b-fgm2fup8wy] {
    background: #cbd5e1;
    color: #475569;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
}
.filters button.active span[b-fgm2fup8wy] { background: #dbeafe; color: #1d4ed8; }

.loading[b-fgm2fup8wy] {
    display: flex;
    justify-content: center;
    padding: 64px 0;
}
.spinner[b-fgm2fup8wy] {
    width: 28px; height: 28px;
    border: 3px solid var(--adm-bd-e2e8f0);
    border-top-color: var(--adm-bd-2563eb);
    border-radius: 50%;
    animation: soporte-spin-b-fgm2fup8wy .8s linear infinite;
}
@keyframes soporte-spin-b-fgm2fup8wy { to { transform: rotate(360deg); } }

.empty-state[b-fgm2fup8wy] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 56px 24px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.12);
}
.empty-icon[b-fgm2fup8wy] { font-size: 2.4rem; margin-bottom: 8px; }
.empty-state h2[b-fgm2fup8wy] { margin: 0 0 8px; font-size: 1.2rem; }
.empty-state p[b-fgm2fup8wy] { margin: 0 0 18px; color: #64748b; }
.empty-state .btn.primary[b-fgm2fup8wy] {
    padding: 11px 22px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, var(--adm-bggrad-0f172a) 0%, var(--adm-bggrad-1e293b) 100%);
    color: var(--adm-fgon-f8fafc-ffffff);
    font-weight: 600;
    cursor: pointer;
}

.layout[b-fgm2fup8wy] {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 16px;
    min-height: 540px;
}

.ticket-list[b-fgm2fup8wy] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    max-height: 70vh;
    overflow-y: auto;
}
.ticket-row[b-fgm2fup8wy] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 16px;
    border: none;
    background: transparent;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background .12s;
}
.ticket-row:hover[b-fgm2fup8wy] { background: #f8fafc; }
.ticket-row.selected[b-fgm2fup8wy] { background: #eff6ff; border-left: 3px solid #2563eb; padding-left: 13px; }
.ticket-row.closed .ticket-subject[b-fgm2fup8wy] { color: var(--adm-fg-94a3b8); }
.ticket-row-top[b-fgm2fup8wy] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.ticket-id[b-fgm2fup8wy] {
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
    font-size: .72rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 1px 7px;
    border-radius: 5px;
    font-weight: 700;
}
.ticket-status[b-fgm2fup8wy] {
    font-size: .68rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 999px;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.ticket-status.open[b-fgm2fup8wy]    { background: #dcfce7; color: #166534; }
.ticket-status.pending[b-fgm2fup8wy] { background: #fef3c7; color: #854d0e; }
.ticket-status.closed[b-fgm2fup8wy]  { background: #f1f5f9; color: #475569; }
.ticket-unread[b-fgm2fup8wy] {
    margin-left: auto;
    background: #ef4444;
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: 999px;
}
.ticket-subject[b-fgm2fup8wy] {
    font-weight: 600;
    color: var(--adm-fg-0f172a);
    font-size: .92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ticket-preview[b-fgm2fup8wy] {
    color: var(--adm-fg-64748b);
    font-size: .8rem;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.ticket-meta[b-fgm2fup8wy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--adm-fg-94a3b8);
    font-size: .72rem;
    margin-top: 6px;
}
.ticket-csat.up[b-fgm2fup8wy]   { color: var(--adm-fg-16a34a); }
.ticket-csat.down[b-fgm2fup8wy] { color: var(--adm-fg-dc2626); }

.thread[b-fgm2fup8wy] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    min-height: 540px;
    /* Bounded like the ticket list, so .thread-msgs scrolls inside it and the thread opens at its newest message.
       Unbounded, the messages grew the page instead, and the page opened at the oldest (the live tester, 2026-10-19). */
    max-height: 70vh;
}
.thread-empty[b-fgm2fup8wy] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--adm-fg-94a3b8);
    font-size: .95rem;
}
.thread-header[b-fgm2fup8wy] {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    background: #fafafa;
}
.thread-title[b-fgm2fup8wy] {
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0 0 4px;
}
.thread-sub[b-fgm2fup8wy] {
    color: var(--adm-fg-64748b);
    font-size: .8rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.thread-sub .dot[b-fgm2fup8wy] { color: var(--adm-fg-cbd5e1); }
.thread-msgs[b-fgm2fup8wy] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.msg[b-fgm2fup8wy] {
    display: flex;
    flex-direction: column;
    max-width: 78%;
}
.msg.theirs[b-fgm2fup8wy] { align-self: flex-start; }
.msg.mine[b-fgm2fup8wy]   { align-self: flex-end; }
.msg.system[b-fgm2fup8wy] { align-self: center; max-width: 90%; }
.msg-author[b-fgm2fup8wy] {
    color: var(--adm-fg-64748b);
    font-size: .72rem;
    margin-bottom: 4px;
    font-weight: 600;
    letter-spacing: .01em;
}
.msg.mine .msg-author[b-fgm2fup8wy] { text-align: right; }
.msg-bubble[b-fgm2fup8wy] {
    padding: 10px 14px;
    border-radius: 12px;
    background: #fff;
    color: #0f172a;
    box-shadow: 0 1px 1px rgba(15,23,42,.05);
    border: 1px solid #e2e8f0;
    line-height: 1.5;
}
.msg.mine .msg-bubble[b-fgm2fup8wy] {
    background: #2563eb;
    color: #fff;
    border-color: transparent;
}
.msg.system .msg-bubble[b-fgm2fup8wy] {
    background: transparent;
    border: 1px dashed #cbd5e1;
    color: #64748b;
    font-size: .85rem;
    text-align: center;
}
.msg-body[b-fgm2fup8wy] {
    white-space: pre-wrap;
    word-break: break-word;
}
.msg-atts[b-fgm2fup8wy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}
.msg-att[b-fgm2fup8wy] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--adm-bg-0f172a-a0_04);
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    font-size: .8rem;
}
.msg.mine .msg-att[b-fgm2fup8wy] { background: var(--adm-bg-ffffff-a0_18); }
.msg-att-name[b-fgm2fup8wy] { font-weight: 600; }
.msg-att-size[b-fgm2fup8wy] { color: var(--adm-fg-94a3b8); font-size: .72rem; }
.msg.mine .msg-att-size[b-fgm2fup8wy] { color: var(--adm-fg-ffffff-a0_7); }
.msg-time[b-fgm2fup8wy] {
    color: var(--adm-fg-94a3b8);
    font-size: .68rem;
    margin-top: 4px;
    text-align: right;
}
.msg.mine .msg-time[b-fgm2fup8wy] { color: var(--adm-fg-ffffff-a0_7); }

.reply-box[b-fgm2fup8wy] {
    padding: 14px 20px;
    border-top: 1px solid #f1f5f9;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.reply-input[b-fgm2fup8wy] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-family: inherit;
    font-size: .92rem;
    resize: vertical;
    outline: none;
}
.reply-input:focus[b-fgm2fup8wy] { border-color: var(--adm-bd-2563eb); box-shadow: 0 0 0 3px var(--adm-sh-2563eb-a0_12); }
.reply-actions[b-fgm2fup8wy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.reply-hint[b-fgm2fup8wy] { color: var(--adm-fg-94a3b8); font-size: .76rem; }
.reply-actions .btn.primary[b-fgm2fup8wy] {
    padding: 9px 18px;
    border-radius: 9px;
    border: none;
    background: linear-gradient(135deg, var(--adm-bggrad-0f172a) 0%, var(--adm-bggrad-1e293b) 100%);
    color: var(--adm-fgon-f8fafc-ffffff);
    font-weight: 600;
    cursor: pointer;
}
.reply-actions .btn.primary:disabled[b-fgm2fup8wy] { opacity: .5; cursor: not-allowed; }

/* ===== New-ticket composer modal ===== */
/* Suffixed with -soporte to dodge the global .modal-backdrop / .modal
   selectors that exist elsewhere in the app (CLAUDE.md warns about
   them). Scoped via .razor.css too as a belt-and-suspenders measure. */
.modal-backdrop-soporte[b-fgm2fup8wy] {
    position: fixed;
    inset: 0;
    background: var(--adm-scrim-0f172a-a0_55);
    backdrop-filter: blur(2px);
    z-index: 200;
}
.modal-soporte[b-fgm2fup8wy] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 201;
    width: 560px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 30px 60px -12px rgba(0,0,0,.4);
    display: flex;
    flex-direction: column;
    max-height: 86vh;
}
.modal-soporte header[b-fgm2fup8wy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-bottom: 1px solid #e2e8f0;
}
.modal-soporte h2[b-fgm2fup8wy] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}
.modal-close-soporte[b-fgm2fup8wy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    border: none;
    color: var(--adm-fg-64748b);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}
.modal-close-soporte:hover[b-fgm2fup8wy] { color: var(--adm-fg-0f172a); }
.modal-body-soporte[b-fgm2fup8wy] {
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}
.modal-body-soporte label[b-fgm2fup8wy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: .78rem;
    font-weight: 600;
    color: #475569;
}
.modal-body-soporte input[b-fgm2fup8wy],
.modal-body-soporte textarea[b-fgm2fup8wy] {
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-family: inherit;
    font-size: .92rem;
    outline: none;
}
.modal-body-soporte input:focus[b-fgm2fup8wy],
.modal-body-soporte textarea:focus[b-fgm2fup8wy] {
    border-color: var(--adm-bd-2563eb);
    box-shadow: 0 0 0 3px var(--adm-sh-2563eb-a0_12);
}
.modal-soporte footer[b-fgm2fup8wy] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 22px;
    border-top: 1px solid #e2e8f0;
}
.modal-soporte footer .btn.primary[b-fgm2fup8wy] {
    padding: 9px 18px;
    border-radius: 9px;
    border: none;
    background: linear-gradient(135deg, var(--adm-bggrad-0f172a) 0%, var(--adm-bggrad-1e293b) 100%);
    color: var(--adm-fgon-f8fafc-ffffff);
    font-weight: 600;
    cursor: pointer;
}
.modal-soporte footer .btn.secondary[b-fgm2fup8wy] {
    padding: 9px 18px;
    border-radius: 9px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    font-weight: 600;
    cursor: pointer;
}
.modal-soporte footer .btn:disabled[b-fgm2fup8wy] { opacity: .55; cursor: not-allowed; }

.error[b-fgm2fup8wy] {
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: .85rem;
}

@media (max-width: 900px) {
    .layout[b-fgm2fup8wy] { grid-template-columns: 1fr; }
    .ticket-list[b-fgm2fup8wy] { max-height: 280px; }
    .thread[b-fgm2fup8wy] { min-height: 420px; }
    .modal-soporte[b-fgm2fup8wy] { width: calc(100vw - 24px); }
}

/* ===== Phones (<=640px) =====
   The shared admin-mobile.css layer can't reach this page's bespoke
   pieces:
     - `.filters` is a segmented control, but not one of the global
       tab-strip class names, so the third pill ("Todas") gets clipped.
     - `.thread` is `overflow:hidden`, so an over-wide reply row is
       CLIPPED, not scrolled — the "Enviar" button simply vanished.
     - the page's own font-size on the reply/composer inputs
       out-specifies the global 16px rule (scoped `.foo[b-hash]` is
       (0,2,0) and loads after admin-mobile.css), re-introducing the
       iOS focus-zoom that rule exists to prevent.
   Everything below sits inside a max-width query → desktop untouched. */
@media (max-width: 640px) {
    /* The shell already pads .admin-content; the page's own 24px on top
       of it burned ~a fifth of a 390px viewport. */
    .soporte-page[b-fgm2fup8wy] { padding: 16px 0 24px; }

    /* Scroll the filter strip instead of clipping it. */
    .filters[b-fgm2fup8wy] {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    .filters[b-fgm2fup8wy]::-webkit-scrollbar { display: none; }
    .filters button[b-fgm2fup8wy] { flex: 0 0 auto; white-space: nowrap; }

    /* Panel chrome: buy back horizontal room for the bubbles. */
    .thread-header[b-fgm2fup8wy] { padding: 14px; }
    .thread-msgs[b-fgm2fup8wy]   { padding: 14px; }
    .reply-box[b-fgm2fup8wy]     { padding: 12px 14px; }

    .thread-title[b-fgm2fup8wy] { overflow-wrap: anywhere; }
    .thread-sub[b-fgm2fup8wy]   { flex-wrap: wrap; gap: 6px; }

    .msg[b-fgm2fup8wy] { max-width: 92%; }
    /* A long attachment filename can't wrap at a space. */
    .msg-att[b-fgm2fup8wy] { flex-wrap: wrap; }
    .msg-att-name[b-fgm2fup8wy] { min-width: 0; overflow-wrap: anywhere; }

    /* Hint + Enviar don't fit on one row at 390px. Stack them. */
    .reply-actions[b-fgm2fup8wy] { flex-direction: column; align-items: stretch; }
    .reply-actions .btn.primary[b-fgm2fup8wy] { width: 100%; }

    /* Inputs below 16px make iOS zoom the viewport on focus. */
    .reply-input[b-fgm2fup8wy],
    .modal-body-soporte input[b-fgm2fup8wy],
    .modal-body-soporte textarea[b-fgm2fup8wy] { font-size: 16px; }

    /* Composer footer: share the row rather than crowd the right edge. */
    .modal-soporte footer .btn[b-fgm2fup8wy] { flex: 1; }
}

/* ============================================================
   Dark theme — admin runs in dark mode, but this page was
   light-only, so the ticket list, thread panel, message area
   and "Nueva consulta" modal rendered white slabs inside the
   dark admin shell. Scoped .razor.css → only this page is
   affected. Palette matches the admin dark shell.
   ============================================================ */
:root[data-theme="dark"] .soporte-page[b-fgm2fup8wy] { color: #e6edf3; }

:root[data-theme="dark"] .filters[b-fgm2fup8wy] { background: #161b22; }
:root[data-theme="dark"] .filters button[b-fgm2fup8wy] { color: #9aa7b4; }
:root[data-theme="dark"] .filters button.active[b-fgm2fup8wy] { background: #30363d; color: #e6edf3; }
:root[data-theme="dark"] .filters button span[b-fgm2fup8wy] { background: #30363d; color: #c9d1d9; }
:root[data-theme="dark"] .filters button.active span[b-fgm2fup8wy] { background: #1f6feb; color: #fff; }

:root[data-theme="dark"] .empty-state[b-fgm2fup8wy],
:root[data-theme="dark"] .ticket-list[b-fgm2fup8wy],
:root[data-theme="dark"] .thread[b-fgm2fup8wy],
:root[data-theme="dark"] .modal-soporte[b-fgm2fup8wy] {
    background: #161b22;
    border-color: #30363d;
}
:root[data-theme="dark"] .empty-state p[b-fgm2fup8wy] { color: #9aa7b4; }
:root[data-theme="dark"] .ticket-row[b-fgm2fup8wy] { border-bottom-color: #21262d; }
:root[data-theme="dark"] .ticket-row:hover[b-fgm2fup8wy] { background: #1c2128; }
:root[data-theme="dark"] .ticket-row.selected[b-fgm2fup8wy] { background: #1f2d44; border-left-color: #1f6feb; }

:root[data-theme="dark"] .thread-header[b-fgm2fup8wy],
:root[data-theme="dark"] .reply-box[b-fgm2fup8wy] { background: #1c2128; border-color: #21262d; }
:root[data-theme="dark"] .thread-msgs[b-fgm2fup8wy] { background: #0d1117; }

:root[data-theme="dark"] .msg-bubble[b-fgm2fup8wy] {
    background: #21262d;
    color: #e6edf3;
    border-color: #30363d;
}
/* .msg.mine keeps its blue bubble — already readable on dark. */
:root[data-theme="dark"] .msg.system .msg-bubble[b-fgm2fup8wy] { border-color: #30363d; color: #9aa7b4; }

:root[data-theme="dark"] .reply-input[b-fgm2fup8wy],
:root[data-theme="dark"] .modal-body-soporte input[b-fgm2fup8wy],
:root[data-theme="dark"] .modal-body-soporte textarea[b-fgm2fup8wy] {
    background: #0d1117;
    color: #e6edf3;
    border-color: #30363d;
}
:root[data-theme="dark"] .modal-soporte header[b-fgm2fup8wy],
:root[data-theme="dark"] .modal-soporte footer[b-fgm2fup8wy] { border-color: #30363d; }
:root[data-theme="dark"] .modal-body-soporte label[b-fgm2fup8wy] { color: #9aa7b4; }
:root[data-theme="dark"] .modal-soporte footer .btn.secondary[b-fgm2fup8wy] {
    background: #21262d; color: #c9d1d9; border-color: #30363d;
}
/* /Pages/Admin/StaffDiscount.razor.rz.scp.css */
/* Scoped (Blazor) dark theme for the staff-discount admin page. All classes
   are sd-* prefixed so nothing leaks globally even though this is a .razor.css
   (which is already isolated). Palette mirrors OnlineSettings. */

.sd-page[b-xyjhcq0hu1] { max-width: 900px; margin: 0 auto; padding: 0 16px 48px; }

.sd-header[b-xyjhcq0hu1] { padding: 20px 0 14px; }
.sd-header h1[b-xyjhcq0hu1] { margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--adm-fg-f1f5f9); }
.sd-sub[b-xyjhcq0hu1] { display: block; margin-top: 6px; font-size: 0.85rem; color: var(--adm-fg-94a3b8); max-width: 660px; line-height: 1.45; }

.sd-msg[b-xyjhcq0hu1] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 0.875rem; }
.sd-msg-ok[b-xyjhcq0hu1] { background: var(--adm-bg-22c55e-a0_15); color: var(--adm-fgon-d8f2e4-4ade80); border: 1px solid var(--adm-bd-22c55e-a0_3); }
.sd-msg-err[b-xyjhcq0hu1] { background: var(--adm-bg-dc2626-a0_15); color: var(--adm-fgon-f4dadc-f87171); border: 1px solid var(--adm-bd-dc2626-a0_3); }
.sd-dismiss[b-xyjhcq0hu1] { background: none; border: none; color: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; opacity: .7; padding: 0 4px; }
.sd-dismiss:hover[b-xyjhcq0hu1] { opacity: 1; }

.sd-loading[b-xyjhcq0hu1], .sd-empty[b-xyjhcq0hu1] { text-align: center; color: var(--adm-fg-94a3b8); font-size: .9rem; }
.sd-loading[b-xyjhcq0hu1] { padding: 48px 20px; }
.sd-empty[b-xyjhcq0hu1] { padding: 18px; }

.sd-card[b-xyjhcq0hu1] { background: var(--adm-bg-1e293b); border: 1px solid var(--adm-bdon-ffffff-334155); border-radius: 12px; margin-bottom: 16px; overflow: hidden; }
.sd-card-head[b-xyjhcq0hu1] { padding: 14px 20px; border-bottom: 1px solid var(--adm-bd-334155); }
.sd-card-head h2[b-xyjhcq0hu1] { margin: 0; font-size: 1rem; font-weight: 600; color: var(--adm-fg-e2e8f0); }
.sd-card-head--row[b-xyjhcq0hu1] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sd-month[b-xyjhcq0hu1] { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--adm-fg-94a3b8); }
.sd-month .sd-input[b-xyjhcq0hu1] { width: 150px; text-align: left; }
.sd-card-body[b-xyjhcq0hu1] { padding: 8px 20px 16px; }

.sd-row[b-xyjhcq0hu1] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--adm-bd-283449); }
.sd-row:last-of-type[b-xyjhcq0hu1] { border-bottom: none; }
.sd-row--default .sd-row-name[b-xyjhcq0hu1] { font-weight: 600; }
.sd-row-name[b-xyjhcq0hu1] { color: var(--adm-fg-e2e8f0); font-size: .9rem; }
.sd-row-name small[b-xyjhcq0hu1] { color: var(--adm-fg-64748b); font-weight: 400; }

.sd-pct[b-xyjhcq0hu1] { display: inline-flex; align-items: center; gap: 6px; }
.sd-unit[b-xyjhcq0hu1] { color: var(--adm-fg-94a3b8); font-size: .85rem; }
.sd-input[b-xyjhcq0hu1] { width: 90px; background: var(--adm-bg-0f172a); border: 1px solid var(--adm-bdon-f8fafc-334155); border-radius: 8px; padding: 8px 10px; color: var(--adm-fgon-f8fafc-e2e8f0); font-size: .9rem; text-align: right; }
.sd-input:focus[b-xyjhcq0hu1] { outline: none; border-color: var(--adm-bdon-f8fafc-6366f1); }
.sd-input:disabled[b-xyjhcq0hu1] { opacity: .45; cursor: not-allowed; }
.sd-input--budget[b-xyjhcq0hu1] { width: 120px; text-align: left; }

.sd-check[b-xyjhcq0hu1] { width: 18px; height: 18px; accent-color: var(--adm-fg-6366f1); cursor: pointer; }

.sd-actions[b-xyjhcq0hu1] { display: flex; justify-content: flex-end; padding-top: 14px; }
.sd-btn[b-xyjhcq0hu1] { background: #6366f1; color: #fff; border: none; border-radius: 8px; padding: 9px 18px; font-size: .875rem; font-weight: 600; cursor: pointer; }
.sd-btn:hover[b-xyjhcq0hu1] { background: #4f46e5; }
.sd-btn:disabled[b-xyjhcq0hu1] { opacity: .55; cursor: not-allowed; }
.sd-btn--sm[b-xyjhcq0hu1] { padding: 6px 12px; font-size: .8rem; }

.sd-emp-head[b-xyjhcq0hu1], .sd-emp-row[b-xyjhcq0hu1] { display: grid; grid-template-columns: 2fr 0.55fr 1.05fr 0.8fr 1.2fr auto; align-items: center; gap: 10px; }
.sd-input--perday[b-xyjhcq0hu1] { width: 70px; text-align: center; }
.sd-emp-head[b-xyjhcq0hu1] { padding: 8px 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--adm-fg-64748b); border-bottom: 1px solid var(--adm-bd-334155); }
.sd-emp-row[b-xyjhcq0hu1] { padding: 12px 0; border-bottom: 1px solid var(--adm-bd-283449); }
.sd-emp-row:last-of-type[b-xyjhcq0hu1] { border-bottom: none; }
.sd-emp-name[b-xyjhcq0hu1] { color: var(--adm-fg-e2e8f0); font-size: .9rem; display: flex; flex-direction: column; gap: 3px; }
.sd-tags[b-xyjhcq0hu1] { display: inline-flex; gap: 8px; }
.sd-warn[b-xyjhcq0hu1] { font-size: .7rem; color: var(--adm-fg-fbbf24); }
.sd-muted[b-xyjhcq0hu1] { font-size: .7rem; color: var(--adm-fg-64748b); }
.sd-usage[b-xyjhcq0hu1] { color: var(--adm-fg-cbd5e1); font-size: .85rem; }
.sd-usage small[b-xyjhcq0hu1] { color: var(--adm-fg-64748b); }

@media (max-width: 640px) {
    .sd-emp-head[b-xyjhcq0hu1] { display: none; }
    .sd-emp-row[b-xyjhcq0hu1] { grid-template-columns: 1fr auto; row-gap: 6px; }
    .sd-input--budget[b-xyjhcq0hu1] { width: 100px; }

    /* Grid items default to min-width:auto, so the 1fr column is floored by its
       min-content (a long employee name, or the budget input + its € unit) and
       can push the row wider than the card. Let every cell shrink instead. */
    .sd-emp-row > *[b-xyjhcq0hu1] { min-width: 0; }
    .sd-emp-name[b-xyjhcq0hu1] { overflow-wrap: anywhere; }

    /* "Empleados" + the month picker share one nowrap flex row; at 360–390px the
       150px month input no longer fits beside the title and was silently cut off
       by the card's overflow:hidden. Wrap it onto its own full-width line and let
       it flex instead of carrying a fixed desktop width. */
    .sd-card-head--row[b-xyjhcq0hu1] { flex-wrap: wrap; }
    .sd-month[b-xyjhcq0hu1] { width: 100%; justify-content: space-between; }
    .sd-month .sd-input[b-xyjhcq0hu1] { flex: 1 1 auto; width: auto; min-width: 0; max-width: 220px; }
}

/* iPhone (~390px) fixes for "Tarifas por categoría": the rate inputs were cut
   off past the right edge because flex/grid items default to min-width:auto, so
   the input's intrinsic width overflowed the row. Constrain inputs + allow the
   row name to shrink + wrap header text. Additive, scoped, ≤600px only. */
@media (max-width: 600px) {
    /* Never let the page chrome exceed the viewport */
    .sd-page[b-xyjhcq0hu1] { padding-left: 12px; padding-right: 12px; }
    .sd-card[b-xyjhcq0hu1] { max-width: 100%; }

    /* Header description must wrap, not clip on the right */
    .sd-sub[b-xyjhcq0hu1] { max-width: 100%; overflow-wrap: anywhere; }

    /* Category rate rows: keep label | input on one row, let both shrink.
       min-width:0 is the load-bearing fix — without it the input's intrinsic
       width forces the row wider than the viewport. */
    .sd-row[b-xyjhcq0hu1] { gap: 10px; }
    .sd-row-name[b-xyjhcq0hu1] { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
    .sd-pct[b-xyjhcq0hu1] { min-width: 0; flex: 0 1 auto; }

    /* Constrain the rate input so it can never overflow its column */
    .sd-input[b-xyjhcq0hu1] { max-width: 100%; box-sizing: border-box; }
    .sd-row .sd-input[b-xyjhcq0hu1] { width: 88px; }
}
/* /Pages/Admin/StockTransfers.razor.rz.scp.css */
.transfers-container[b-vuau2u44un] {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.page-header[b-vuau2u44un] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.page-header h1[b-vuau2u44un] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--adm-fg-f1f5f9);
    margin: 0;
}

.subtitle[b-vuau2u44un] {
    font-size: 0.875rem;
    color: var(--adm-fg-94a3b8);
    margin: 0.25rem 0 0 0;
}

.header-actions[b-vuau2u44un] {
    display: flex;
    gap: 0.75rem;
}

/* Buttons */
.btn[b-vuau2u44un] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn.primary[b-vuau2u44un] {
    background: #3b82f6;
    border: none;
    color: white;
}

.btn.primary:hover[b-vuau2u44un] {
    background: #2563eb;
}

/* A disabled button looks it: «Crear Transferencia» read as clickable with nothing to transfer (the live tester, 2026-10-20). */
.btn:disabled[b-vuau2u44un] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn.primary:disabled:hover[b-vuau2u44un] {
    background: #3b82f6;
}

/* Fewer than two locations: why nothing can be transferred, and where to make them. */
.locations-needed[b-vuau2u44un] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px dashed var(--adm-bdon-ffffff-334155);
    color: var(--adm-fg-94a3b8);
}

.locations-needed p[b-vuau2u44un] {
    margin: 0;
}

.btn.outline[b-vuau2u44un] {
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    color: var(--adm-fgon-ffffff-e2e8f0);
}

.btn.outline:hover[b-vuau2u44un] {
    background: var(--adm-bghov-ffffff-334155);
}

/* Status Tabs */
.status-tabs[b-vuau2u44un] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    background: var(--adm-bg-1e293b);
    padding: 0.5rem;
    border-radius: 10px;
    overflow-x: auto;
}

.tab[b-vuau2u44un] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--adm-fg-94a3b8);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.tab:hover[b-vuau2u44un] {
    background: var(--adm-bg-334155);
}

.tab.active[b-vuau2u44un] {
    background: #3b82f6;
    color: white;
}

.tab-badge[b-vuau2u44un] {
    font-size: 0.6875rem;
    padding: 0.125rem 0.375rem;
    border-radius: 10px;
    font-weight: 600;
}

.tab-badge.draft[b-vuau2u44un] {
    background: #fef3c7;
    color: #d97706;
}

.tab-badge.sent[b-vuau2u44un] {
    background: #dbeafe;
    color: #2563eb;
}

.tab.active .tab-badge[b-vuau2u44un] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Transfers List */
.transfers-list[b-vuau2u44un] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.transfer-card[b-vuau2u44un] {
    background: var(--adm-bg-1e293b);
    border-radius: 12px;
    padding: 1.25rem;
    border-left: 4px solid transparent;
    transition: box-shadow 0.2s;
}

.transfer-card:hover[b-vuau2u44un] {
    box-shadow: 0 4px 12px var(--adm-sh-000000-a0_3);
}

.transfer-card.draft[b-vuau2u44un] {
    border-left-color: var(--adm-bd-fbbf24);
}

.transfer-card.sent[b-vuau2u44un] {
    border-left-color: var(--adm-bd-3b82f6);
}

.transfer-card.partial[b-vuau2u44un] {
    border-left-color: var(--adm-bd-8b5cf6);
}

.transfer-card.received[b-vuau2u44un] {
    border-left-color: var(--adm-bd-10b981);
}

.transfer-card.cancelled[b-vuau2u44un] {
    border-left-color: var(--adm-bd-ef4444);
    opacity: 0.7;
}

.transfer-header[b-vuau2u44un] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.transfer-number[b-vuau2u44un] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--adm-fg-f1f5f9);
}

.status-badge[b-vuau2u44un] {
    font-size: 0.75rem;
    padding: 0.25rem 0.625rem;
    border-radius: 12px;
    font-weight: 500;
}

.status-badge.draft[b-vuau2u44un] {
    background: #fef3c7;
    color: #d97706;
}

.status-badge.sent[b-vuau2u44un] {
    background: #dbeafe;
    color: #2563eb;
}

.status-badge.partial[b-vuau2u44un] {
    background: #ede9fe;
    color: #7c3aed;
}

.status-badge.received[b-vuau2u44un] {
    background: #d1fae5;
    color: #059669;
}

.status-badge.cancelled[b-vuau2u44un] {
    background: #fee2e2;
    color: #dc2626;
}

/* Transfer Route */
.transfer-route[b-vuau2u44un] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--adm-bg-0f172a);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.location[b-vuau2u44un] {
    flex: 1;
}

.location-label[b-vuau2u44un] {
    display: block;
    font-size: 0.6875rem;
    text-transform: uppercase;
    color: var(--adm-fg-64748b);
    margin-bottom: 0.25rem;
}

.location-name[b-vuau2u44un] {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--adm-fg-e2e8f0);
}

.route-arrow[b-vuau2u44un] {
    color: var(--adm-fg-64748b);
}

/* Transfer Meta */
.transfer-meta[b-vuau2u44un] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.meta-item[b-vuau2u44un] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--adm-fg-94a3b8);
}

/* Transfer Actions */
.transfer-actions[b-vuau2u44un] {
    display: flex;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--adm-bd-334155);
}

.btn-action[b-vuau2u44un] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--adm-bdon-ffffff-334155);
    background: var(--adm-bg-1e293b);
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--adm-fgon-ffffff-e2e8f0);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-action:hover[b-vuau2u44un] {
    background: var(--adm-bghov-ffffff-334155);
}

.btn-action.primary[b-vuau2u44un] {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

.btn-action.primary:hover[b-vuau2u44un] {
    background: #2563eb;
}

/* Empty & Loading States */
.empty-state[b-vuau2u44un], .loading-state[b-vuau2u44un] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: var(--adm-bg-1e293b);
    border-radius: 12px;
}

.empty-state svg[b-vuau2u44un] {
    color: var(--adm-fgon-ffffff-475569);
    margin-bottom: 1rem;
}

.empty-state h2[b-vuau2u44un] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--adm-fgon-ffffff-f1f5f9);
    margin: 0 0 0.5rem 0;
}

.empty-state p[b-vuau2u44un] {
    color: var(--adm-fgon-ffffff-94a3b8);
    margin: 0 0 1.5rem 0;
}

.spinner[b-vuau2u44un] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--adm-bd-334155);
    border-top-color: var(--adm-bd-3b82f6);
    border-radius: 50%;
    animation: spin-b-vuau2u44un 1s linear infinite;
}

.spinner-small[b-vuau2u44un] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--adm-bd-ffffff);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-vuau2u44un 1s linear infinite;
}

@keyframes spin-b-vuau2u44un {
    to { transform: rotate(360deg); }
}

/* Modal */
.modal-overlay[b-vuau2u44un] {
    position: fixed;
    inset: 0;
    background: var(--adm-scrim-000000-a0_6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1rem;
}

.modal[b-vuau2u44un] {
    background: var(--adm-bg-1e293b);
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal.large[b-vuau2u44un] {
    max-width: 700px;
}

.modal-header[b-vuau2u44un] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    border-bottom: 1px solid var(--adm-bd-334155);
}

.modal-header h2[b-vuau2u44un] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: var(--adm-fg-f1f5f9);
}

.close-btn[b-vuau2u44un] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--adm-bg-334155);
    border-radius: 8px;
    color: var(--adm-fgon-f1f5f9-94a3b8);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.close-btn:hover[b-vuau2u44un] {
    background: var(--adm-bghov-f1f5f9-475569);
    color: var(--adm-fgon-e1e6eb-f1f5f9);
}

.close-btn:active[b-vuau2u44un] {
    transform: scale(0.95);
}

.modal-body[b-vuau2u44un] {
    padding: 1.25rem;
}

.form-group[b-vuau2u44un] {
    margin-bottom: 1rem;
}

.form-group label[b-vuau2u44un] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--adm-fg-e2e8f0);
    margin-bottom: 0.5rem;
}

.form-input[b-vuau2u44un], .form-select[b-vuau2u44un] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    font-size: 0.9375rem;
    background: var(--adm-bg-0f172a);
    color: var(--adm-fgon-f8fafc-f1f5f9);
}

.form-input:focus[b-vuau2u44un], .form-select:focus[b-vuau2u44un] {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-3b82f6);
}

.form-select[b-vuau2u44un] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.5rem;
}

.form-select option[b-vuau2u44un] {
    background: var(--adm-bg-1e293b);
    color: var(--adm-fgon-ffffff-e2e8f0);
}

.form-row[b-vuau2u44un] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Transfer Items Section */
.transfer-items-section[b-vuau2u44un] {
    background: var(--adm-bg-0f172a);
    border-radius: 10px;
    padding: 1rem;
    margin-top: 1rem;
}

.section-header[b-vuau2u44un] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-header h3[b-vuau2u44un] {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
    color: var(--adm-fg-f1f5f9);
}

.btn-add-item[b-vuau2u44un] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: #3b82f6;
    border: none;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: white;
    cursor: pointer;
}

.transfer-lines[b-vuau2u44un] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.transfer-line[b-vuau2u44un] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.item-select[b-vuau2u44un] {
    flex: 1;
}

.qty-input[b-vuau2u44un] {
    width: 100px;
}

.btn-remove[b-vuau2u44un] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--adm-bg-dc2626-a0_2);
    border-radius: 8px;
    color: var(--adm-fgon-f2d0d1-f87171);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.btn-remove:active[b-vuau2u44un] {
    transform: scale(0.95);
}

.no-items[b-vuau2u44un] {
    text-align: center;
    padding: 2rem;
    color: var(--adm-fg-64748b);
}

.modal-footer[b-vuau2u44un] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem;
    border-top: 1px solid var(--adm-bd-334155);
}

/* Responsive */
@media (max-width: 768px) {
    .transfers-container[b-vuau2u44un] {
        padding: 1rem;
    }

    .page-header[b-vuau2u44un] {
        flex-direction: column;
        align-items: stretch;
    }

    .header-actions[b-vuau2u44un] {
        flex-direction: column;
    }

    .transfer-route[b-vuau2u44un] {
        flex-direction: column;
        text-align: center;
    }

    .route-arrow[b-vuau2u44un] {
        transform: rotate(90deg);
    }

    .form-row[b-vuau2u44un] {
        grid-template-columns: 1fr;
    }

    .transfer-line[b-vuau2u44un] {
        flex-wrap: wrap;
    }

    .item-select[b-vuau2u44un] {
        width: 100%;
    }
}

/* Phone (≤600px) — additive overflow fixes, never change desktop/base */
@media (max-width: 600px) {
    .transfers-container[b-vuau2u44un] {
        padding: 0.875rem;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Header title + buttons wrap; buttons go full-width and stack */
    .page-header[b-vuau2u44un] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .header-left[b-vuau2u44un] {
        min-width: 0;
    }

    .header-actions[b-vuau2u44un] {
        width: 100%;
    }

    .header-actions .btn[b-vuau2u44un] {
        width: 100%;
    }

    /* Status tabs: horizontal scroll, chips never shrink */
    .status-tabs[b-vuau2u44un] {
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .status-tabs .tab[b-vuau2u44un] {
        flex: 0 0 auto;
    }

    /* Transfer cards */
    .transfer-card[b-vuau2u44un] {
        padding: 1rem;
    }

    .transfer-header[b-vuau2u44un] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .transfer-meta[b-vuau2u44un] {
        gap: 0.75rem 1rem;
    }

    /* Action row wraps; each button can fill the row */
    .transfer-actions[b-vuau2u44un] {
        flex-wrap: wrap;
    }

    .transfer-actions .btn-action[b-vuau2u44un] {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* Modal create form: inputs fit, qty no longer fixed-width */
    .qty-input[b-vuau2u44un] {
        width: 100%;
    }

    .modal-footer[b-vuau2u44un] {
        flex-wrap: wrap;
    }

    .modal-footer .btn[b-vuau2u44un] {
        flex: 1 1 auto;
    }
}

/* «Ver planes» on a plan without transfers is a link styled as the page's button. */
a.btn[b-vuau2u44un] {
    text-decoration: none;
}
/* /Pages/Admin/SuperAdmin.razor.rz.scp.css */
/* ===== Login ===== */
.sa-login-overlay[b-vxypod8rd1] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--adm-bg-0a0a0f);
    z-index: 9999;
}

.sa-login-card[b-vxypod8rd1] {
    background: var(--adm-bg-16161e);
    border: 1px solid var(--adm-bdon-ffffff-2a2a3a);
    border-radius: 16px;
    padding: 3rem 2.5rem;
    width: 360px;
    text-align: center;
}

.sa-login-logo[b-vxypod8rd1] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--adm-bggrad-6366f1), var(--adm-bggrad-8b5cf6));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--adm-fgon-dedffc-ffffff);
    margin: 0 auto 1.5rem;
}

.sa-login-card h2[b-vxypod8rd1] {
    color: var(--adm-fgon-ffffff-e4e4e7);
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
}

.sa-login-hint[b-vxypod8rd1] {
    color: var(--adm-fg-71717a);
    font-size: 0.875rem;
    margin: 0 0 2rem;
}

.sa-pin-group[b-vxypod8rd1] {
    margin-bottom: 1.5rem;
}

.sa-pin-input[b-vxypod8rd1] {
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--adm-bg-0a0a0f);
    border: 1px solid var(--adm-bdon-ffffff-2a2a3a);
    border-radius: 10px;
    color: var(--adm-fgon-ffffff-e4e4e7);
    font-size: 1.125rem;
    text-align: center;
    letter-spacing: 0.25em;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.sa-pin-input:focus[b-vxypod8rd1] {
    border-color: var(--adm-bdon-ffffff-6366f1);
}

/* ===== Layout ===== */
.sa-layout[b-vxypod8rd1] {
    min-height: 100vh;
    background: var(--adm-bg-0a0a0f);
    color: var(--adm-fgon-ffffff-e4e4e7);
}

.sa-topbar[b-vxypod8rd1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    background: var(--adm-bg-16161e);
    border-bottom: 1px solid var(--adm-bdon-ffffff-2a2a3a);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sa-topbar-left[b-vxypod8rd1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sa-logo[b-vxypod8rd1] {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--adm-bggrad-6366f1), var(--adm-bggrad-8b5cf6));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    color: var(--adm-fgon-dedffc-ffffff);
}

.sa-topbar h1[b-vxypod8rd1] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: var(--adm-fgon-ffffff-e4e4e7);
}

/* ===== Tabs ===== */
.sa-tabs[b-vxypod8rd1] {
    display: flex;
    gap: 0;
    padding: 0 1.5rem;
    background: var(--adm-bg-16161e);
    border-bottom: 1px solid var(--adm-bdon-ffffff-2a2a3a);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sa-tab[b-vxypod8rd1] {
    padding: 0.75rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--adm-fg-71717a);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.sa-tab:hover[b-vxypod8rd1] {
    color: var(--adm-fg-a1a1aa);
}

.sa-tab.active[b-vxypod8rd1] {
    color: var(--adm-fg-6366f1);
    border-bottom-color: var(--adm-bd-6366f1);
}

/* ===== Content ===== */
.sa-content[b-vxypod8rd1] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.sa-pin-warning[b-vxypod8rd1] {
    background: var(--adm-bg-ef4444-a0_12);
    border: 1px solid var(--adm-bd-ef4444-a0_4);
    color: var(--adm-fgon-f7e4e6-fecaca);
    padding: 0.875rem 1.25rem;
    font-size: 0.875rem;
    text-align: center;
}

.sa-pin-warning code[b-vxypod8rd1] {
    background: var(--adm-bg-ffffff-a0_08);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, monospace;
}

.sa-linklike[b-vxypod8rd1] {
    background: none;
    border: none;
    color: var(--adm-fg-fca5a5);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
    padding: 0;
}

.sa-linklike:hover[b-vxypod8rd1] {
    color: var(--adm-fg-ffffff);
}

/* ===== Stats Grid ===== */
.sa-stats-grid[b-vxypod8rd1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.sa-stats-grid.cols-2[b-vxypod8rd1] {
    grid-template-columns: repeat(2, 1fr);
}

.sa-stat-card[b-vxypod8rd1] {
    background: var(--adm-bg-16161e);
    border: 1px solid var(--adm-bdon-ffffff-2a2a3a);
    border-radius: 12px;
    padding: 1.25rem;
}

.sa-stat-card.large[b-vxypod8rd1] {
    padding: 1.5rem;
}

.sa-stat-card.accent-blue[b-vxypod8rd1] { border-left: 3px solid var(--adm-bd-3b82f6); }
.sa-stat-card.accent-green[b-vxypod8rd1] { border-left: 3px solid var(--adm-bd-22c55e); }
.sa-stat-card.accent-purple[b-vxypod8rd1] { border-left: 3px solid var(--adm-bd-8b5cf6); }
.sa-stat-card.accent-orange[b-vxypod8rd1] { border-left: 3px solid var(--adm-bd-f59e0b); }

.sa-stat-value[b-vxypod8rd1] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--adm-fg-f4f4f5);
    line-height: 1.1;
}

.sa-stat-label[b-vxypod8rd1] {
    font-size: 0.8125rem;
    color: var(--adm-fg-71717a);
    margin-top: 0.25rem;
}

.sa-stat-sub[b-vxypod8rd1] {
    font-size: 0.75rem;
    color: var(--adm-fg-52525b);
    margin-top: 0.25rem;
}

/* ===== Section Header ===== */
.sa-section-header[b-vxypod8rd1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.sa-section-header h3[b-vxypod8rd1] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--adm-fg-e4e4e7);
}

.sa-section-header-actions[b-vxypod8rd1] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* "Bloqueados en setup" filter chip — three states:
     is-zero  — muted grey, "no candidates right now"
     has-some — amber accent, draws the eye
     active   — filled amber, filter is on
   Click to toggle the filter; the count badge updates live. */
.sa-stuck-chip[b-vxypod8rd1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px 7px 10px;
    min-height: 38px;
    box-sizing: border-box;
    border-radius: 999px;
    border: 1px solid var(--adm-bdon-ffffff-2a2a3a);
    background: var(--adm-bg-15151f);
    color: var(--adm-fgon-ffffff-71717a);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.sa-stuck-chip:hover[b-vxypod8rd1] {
    border-color: var(--adm-bdon-ffffff-3f3f4a);
    color: var(--adm-fgon-ffffff-d4d4d8);
}

.sa-stuck-chip.has-some[b-vxypod8rd1] {
    border-color: var(--adm-bd-f59e0b-a0_45);
    color: var(--adm-fg-fcd34d);
}

.sa-stuck-chip.has-some:hover[b-vxypod8rd1] {
    background: var(--adm-bg-f59e0b-a0_08);
    border-color: var(--adm-bd-f59e0b-a0_7);
}

.sa-stuck-chip.active[b-vxypod8rd1] {
    background: var(--adm-bg-f59e0b-a0_18);
    border-color: var(--adm-bd-f59e0b-a0_7);
    color: var(--adm-fgon-f7e9d1-fcd34d);
    box-shadow: inset 0 0 0 1px var(--adm-sh-f59e0b-a0_3);
}

.sa-stuck-chip-icon[b-vxypod8rd1] {
    font-size: 0.875rem;
    line-height: 1;
}

.sa-stuck-chip-count[b-vxypod8rd1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--adm-bg-27272a);
    color: var(--adm-fgon-ffffff-a1a1aa);
    font-size: 0.75rem;
    font-weight: 700;
}

.sa-stuck-chip.has-some .sa-stuck-chip-count[b-vxypod8rd1],
.sa-stuck-chip.active .sa-stuck-chip-count[b-vxypod8rd1] {
    background: var(--adm-bg-f59e0b-a0_3);
    color: var(--adm-fgon-f7deb4-fef3c7);
}

/* Per-row stuck badge — sits next to the restaurant name so even with the
   filter off, the operator can spot which signups need a nudge. */
/* Signup-origin (country) badge on each restaurant row + the "altas por país" summary. */
.sa-table .sa-country-badge[b-vxypod8rd1] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--adm-bg-94a3b8-a0_15);
    border: 1px solid var(--adm-bd-94a3b8-a0_35);
    color: var(--adm-fgon-e2e6eb-cbd5e1);
    font-size: 0.72rem;
    line-height: 1.2;
    cursor: help;
    vertical-align: middle;
}
.sa-table .sa-country-badge.variant-foreign[b-vxypod8rd1] {
    background: var(--adm-bg-38bdf8-a0_16);
    border-color: var(--adm-bd-38bdf8-a0_45);
    color: var(--adm-fgon-d9f0fb-7dd3fc);
}
.sa-country-summary[b-vxypod8rd1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0 10px;
    font-size: 0.8rem;
}
.sa-country-summary-label[b-vxypod8rd1] { color: var(--adm-fg-94a3b8); font-weight: 600; }
.sa-country-summary-item[b-vxypod8rd1] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--adm-bg-94a3b8-a0_12);
    border: 1px solid var(--adm-bd-94a3b8-a0_3);
    color: var(--adm-fgon-e6eaee-cbd5e1);
}
.sa-country-summary-item.variant-foreign[b-vxypod8rd1] {
    background: var(--adm-bg-38bdf8-a0_16);
    border-color: var(--adm-bd-38bdf8-a0_45);
    color: var(--adm-fgon-d9f0fb-7dd3fc);
}

.sa-table .sa-stuck-badge[b-vxypod8rd1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--adm-bg-f59e0b-a0_18);
    border: 1px solid var(--adm-bd-f59e0b-a0_4);
    color: var(--adm-fgon-f7e9d1-fcd34d);
    font-size: 0.75rem;
    line-height: 1.2;
    cursor: help;
    vertical-align: middle;
}

/* "Configurados sin uso" colorway — blue (calmer signal: not broken, just
   needs a value/conviction nudge vs. amber for "broken setup"). */
.sa-stuck-chip.variant-inactive.has-some[b-vxypod8rd1] {
    border-color: var(--adm-bd-60a5fa-a0_45);
    color: var(--adm-fg-93c5fd);
}

.sa-stuck-chip.variant-inactive.has-some:hover[b-vxypod8rd1] {
    background: var(--adm-bg-60a5fa-a0_08);
    border-color: var(--adm-bd-60a5fa-a0_7);
}

.sa-stuck-chip.variant-inactive.active[b-vxypod8rd1] {
    background: var(--adm-bg-60a5fa-a0_18);
    border-color: var(--adm-bd-60a5fa-a0_7);
    color: var(--adm-fgon-ddebfc-93c5fd);
    box-shadow: inset 0 0 0 1px var(--adm-sh-60a5fa-a0_3);
}

.sa-stuck-chip.variant-inactive.has-some .sa-stuck-chip-count[b-vxypod8rd1],
.sa-stuck-chip.variant-inactive.active .sa-stuck-chip-count[b-vxypod8rd1] {
    background: var(--adm-bg-60a5fa-a0_3);
    color: var(--adm-fgon-cae0fb-dbeafe);
}

.sa-table .sa-stuck-badge.variant-inactive[b-vxypod8rd1] {
    background: var(--adm-bg-60a5fa-a0_18);
    border-color: var(--adm-bd-60a5fa-a0_4);
    color: var(--adm-fgon-ddebfc-93c5fd);
}

/* "Trial expira pronto" colorway — pink/rose, time-sensitive urgency
   without the "alarm red" baggage. */
.sa-stuck-chip.variant-trial.has-some[b-vxypod8rd1] {
    border-color: var(--adm-bd-f472b6-a0_45);
    color: var(--adm-fg-f9a8d4);
}

.sa-stuck-chip.variant-trial.has-some:hover[b-vxypod8rd1] {
    background: var(--adm-bg-f472b6-a0_08);
    border-color: var(--adm-bd-f472b6-a0_7);
}

.sa-stuck-chip.variant-trial.active[b-vxypod8rd1] {
    background: var(--adm-bg-f472b6-a0_18);
    border-color: var(--adm-bd-f472b6-a0_7);
    color: var(--adm-fgon-f7e2ef-f9a8d4);
    box-shadow: inset 0 0 0 1px var(--adm-sh-f472b6-a0_3);
}

.sa-stuck-chip.variant-trial.has-some .sa-stuck-chip-count[b-vxypod8rd1],
.sa-stuck-chip.variant-trial.active .sa-stuck-chip-count[b-vxypod8rd1] {
    background: var(--adm-bg-f472b6-a0_3);
    color: var(--adm-fgon-f7d1e7-fce7f3);
}

.sa-table .sa-stuck-badge.variant-trial[b-vxypod8rd1] {
    background: var(--adm-bg-f472b6-a0_18);
    border-color: var(--adm-bd-f472b6-a0_4);
    color: var(--adm-fgon-f7e2ef-f9a8d4);
}

/* Last-contacted chip — sits next to the segment badge to flag "you already
   emailed this one." Three recency tiers so the operator's eye can prioritize:
     recent (≤7d): saturated, "don't re-send unless you mean to"
     warm   (≤30d): muted, "okay to re-send if relevant"
     stale  (>30d): minimal, "fair game, just historical context" */
.sa-table .sa-contacted-chip[b-vxypod8rd1] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.7rem;
    line-height: 1.3;
    font-weight: 600;
    cursor: help;
    vertical-align: middle;
    border: 1px solid transparent;
    white-space: nowrap;
}

.sa-table .sa-contacted-chip.recent[b-vxypod8rd1] {
    background: var(--adm-bg-84cc16-a0_18);
    border-color: var(--adm-bd-84cc16-a0_4);
    color: var(--adm-fgon-e3f2d3-bef264);
}

.sa-table .sa-contacted-chip.warm[b-vxypod8rd1] {
    background: var(--adm-bg-84cc16-a0_08);
    border-color: var(--adm-bd-84cc16-a0_22);
    color: var(--adm-fgon-eff6ea-84cc16);
}

.sa-table .sa-contacted-chip.stale[b-vxypod8rd1] {
    background: transparent;
    border-color: var(--adm-bd-2a2a3a);
    color: var(--adm-fg-71717a);
}

/* "Heavy" modifier — applied at 3+ sends. Slight tint shift toward amber/red
   regardless of recency tier so the operator's eye catches "I've nudged this
   one too many times". Pairs additively with .recent/.warm/.stale. */
.sa-table .sa-contacted-chip.heavy[b-vxypod8rd1] {
    background: var(--adm-bg-fb7185-a0_18);
    border-color: var(--adm-bd-fb7185-a0_45);
    color: var(--adm-fgon-f9e1e7-fda4af);
    font-weight: 700;
}

/* Clear-all-filters link — only visible when AnyFilterOn. Lower visual
   weight than the chips themselves (it's a meta-action) but still
   clickable-looking so the operator knows the filter can be lifted. */
.sa-clear-filters[b-vxypod8rd1] {
    background: transparent;
    border: none;
    padding: 4px 6px;
    font-size: 0.8125rem;
    color: var(--adm-fg-a1a1aa);
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}

.sa-clear-filters:hover[b-vxypod8rd1] {
    color: var(--adm-fgon-e9edf1-f4f4f5);
    background: var(--adm-bg-94a3b8-a0_1);
}

/* ===== Table ===== */
.sa-table-wrapper[b-vxypod8rd1] {
    overflow-x: auto;
    border: 1px solid var(--adm-bd-2a2a3a);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

/* Bare scroll box for tables that live *inside* a card or a .sa-print-block,
   where .sa-table-wrapper's border+radius would double up on the container's
   own chrome. Every .sa-table cell is white-space:nowrap, so an unwrapped
   table drags the whole document wider than the viewport on a phone. */
.sa-table-scroll[b-vxypod8rd1] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sa-table[b-vxypod8rd1] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.sa-table th[b-vxypod8rd1] {
    background: var(--adm-bg-1e1e2a);
    padding: 0.625rem 0.75rem;
    text-align: left;
    color: var(--adm-fgon-ffffff-71717a);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.sa-table td[b-vxypod8rd1] {
    padding: 0.625rem 0.75rem;
    border-top: 1px solid var(--adm-bd-1e1e2a);
    color: var(--adm-fg-d4d4d8);
    white-space: nowrap;
}

.sa-table tbody tr:hover[b-vxypod8rd1] {
    background: var(--adm-bg-1a1a24);
}

/* Sortable column header — same look as the static <th>, but a hand cursor
   and a hover tint so it's obvious you can click. The active column gets a
   subtle blue tint so the operator can spot the current sort key without
   reading the arrow indicator. */
.sa-table .sa-th-sortable[b-vxypod8rd1] {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sa-table .sa-th-sortable:hover[b-vxypod8rd1] {
    background: var(--adm-bg-2a2a3a);
    color: var(--adm-fgon-ffffff-d4d4d8);
}

.sa-table .sa-th-sortable.active[b-vxypod8rd1] {
    color: var(--adm-fgon-ffffff-a5b4fc);
    background: var(--adm-bg-1e1e30);
}

.sa-table .row-inactive[b-vxypod8rd1] {
    opacity: 0.5;
}

.sa-table .cell-name[b-vxypod8rd1] {
    font-weight: 600;
    color: var(--adm-fg-f4f4f5);
}

/* Clickable restaurant-name button — looks like a link, opens the detail
   modal. Saves a horizontal scroll for ops who want to drill into a row
   without finding the Acciones column at the far right of the table. */
.sa-table .sa-rest-name-link[b-vxypod8rd1] {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    border-bottom: 1px dashed var(--adm-bd-a5b4fc-a0_3);
    transition: color 0.15s, border-color 0.15s;
}

.sa-table .sa-rest-name-link:hover[b-vxypod8rd1] {
    color: var(--adm-fg-a5b4fc);
    border-bottom-color: var(--adm-bd-a5b4fc);
}

.sa-table .cell-date[b-vxypod8rd1] {
    color: var(--adm-fg-71717a);
    font-family: monospace;
}

.sa-table .cell-error[b-vxypod8rd1] {
    color: var(--adm-fg-ef4444);
    font-size: 0.75rem;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sa-table code[b-vxypod8rd1] {
    background: var(--adm-bg-1e1e2a);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--adm-fgon-ffffff-a5b4fc);
}

/* ===== Badge ===== */
.sa-badge[b-vxypod8rd1] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-active[b-vxypod8rd1] {
    background: var(--adm-bg-22c55e-a0_15);
    color: var(--adm-fgon-d8f2e4-22c55e);
}

.badge-inactive[b-vxypod8rd1] {
    background: var(--adm-bg-ef4444-a0_15);
    color: var(--adm-fgon-f7dfe0-ef4444);
}

/* ===== Card ===== */
.sa-card[b-vxypod8rd1] {
    background: var(--adm-bg-16161e);
    border: 1px solid var(--adm-bdon-ffffff-2a2a3a);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.sa-card h3[b-vxypod8rd1] {
    margin: 0 0 0.25rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.sa-hint[b-vxypod8rd1] {
    color: var(--adm-fg-71717a);
    font-size: 0.8125rem;
    margin: 0 0 1.5rem;
}

/* ===== Forms ===== */
.sa-form-grid[b-vxypod8rd1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.sa-form-group label[b-vxypod8rd1] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--adm-fg-a1a1aa);
    margin-bottom: 0.375rem;
}

.sa-input[b-vxypod8rd1] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    background: var(--adm-bg-0a0a0f);
    border: 1px solid var(--adm-bdon-ffffff-2a2a3a);
    border-radius: 8px;
    color: var(--adm-fgon-ffffff-e4e4e7);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.sa-input:focus[b-vxypod8rd1] {
    border-color: var(--adm-bdon-ffffff-6366f1);
}

.sa-textarea[b-vxypod8rd1] {
    min-height: 80px;
    resize: vertical;
    font-family: inherit;
}

.sa-field-hint[b-vxypod8rd1] {
    display: block;
    font-size: 0.6875rem;
    color: var(--adm-fg-52525b);
    margin-top: 0.25rem;
}

.sa-form-actions[b-vxypod8rd1] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sa-add-setting[b-vxypod8rd1] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--adm-bd-2a2a3a);
}

.sa-add-setting h4[b-vxypod8rd1] {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    color: var(--adm-fg-a1a1aa);
}

/* ===== Buttons ===== */
.sa-btn[b-vxypod8rd1] {
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.sa-btn.small[b-vxypod8rd1] {
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem;
    min-height: 36px; /* bigger tap target without bloating dense rows */
}

.sa-btn.full-width[b-vxypod8rd1] {
    width: 100%;
    justify-content: center;
}

.sa-btn.primary[b-vxypod8rd1] {
    background: #6366f1;
    color: #fff;
    border-color: #6366f1;
}

.sa-btn.primary:hover[b-vxypod8rd1] {
    background: #4f46e5;
}

.sa-btn.outline[b-vxypod8rd1] {
    background: transparent;
    color: var(--adm-fg-a1a1aa);
    border-color: var(--adm-bd-2a2a3a);
}

.sa-btn.outline:hover[b-vxypod8rd1] {
    background: var(--adm-bg-1e1e2a);
    color: var(--adm-fgon-ffffff-e4e4e7);
}

.sa-btn.danger[b-vxypod8rd1] {
    background: var(--adm-bg-ef4444-a0_15);
    color: var(--adm-fgon-f7dfe0-ef4444);
    border-color: var(--adm-bd-ef4444-a0_3);
}

.sa-btn.danger:hover[b-vxypod8rd1] {
    background: var(--adm-bg-ef4444-a0_25);
}

.sa-btn.warning[b-vxypod8rd1] {
    background: var(--adm-bg-f59e0b-a0_15);
    color: var(--adm-fgon-f8ecd8-f59e0b);
    border-color: var(--adm-bd-f59e0b-a0_3);
}

.sa-btn.warning:hover[b-vxypod8rd1] {
    background: var(--adm-bg-f59e0b-a0_25);
}

.sa-btn.success[b-vxypod8rd1] {
    background: var(--adm-bg-22c55e-a0_15);
    color: var(--adm-fgon-d8f2e4-22c55e);
    border-color: var(--adm-bd-22c55e-a0_3);
}

.sa-btn.success:hover[b-vxypod8rd1] {
    background: var(--adm-bg-22c55e-a0_25);
}

.sa-btn:disabled[b-vxypod8rd1] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== Maintenance Toggle ===== */
.sa-maintenance-toggle[b-vxypod8rd1] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sa-switch[b-vxypod8rd1] {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}

.sa-switch input[b-vxypod8rd1] {
    opacity: 0;
    width: 0;
    height: 0;
}

.sa-slider[b-vxypod8rd1] {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--adm-bg-2a2a3a);
    border-radius: 26px;
    transition: 0.3s;
}

.sa-slider[b-vxypod8rd1]::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: var(--adm-bg-71717a);
    border-radius: 50%;
    transition: 0.3s;
}

.sa-switch input:checked + .sa-slider[b-vxypod8rd1] {
    background: #ef4444;
}

.sa-switch input:checked + .sa-slider[b-vxypod8rd1]::before {
    transform: translateX(22px);
    background: #fff;
}

.sa-toggle-label[b-vxypod8rd1] {
    font-size: 0.875rem;
    font-weight: 600;
}

/* ===== Misc ===== */
.sa-error[b-vxypod8rd1] {
    color: var(--adm-fg-ef4444);
    font-size: 0.8125rem;
    margin-top: 0.5rem;
}

.sa-success-msg[b-vxypod8rd1] {
    color: var(--adm-fg-22c55e);
    font-size: 0.8125rem;
    font-weight: 600;
}

.sa-masked[b-vxypod8rd1] {
    color: var(--adm-fg-52525b);
    letter-spacing: 0.15em;
}

.sa-empty[b-vxypod8rd1] {
    padding: 2rem;
    text-align: center;
    color: var(--adm-fg-52525b);
    font-size: 0.875rem;
}

.sa-loading[b-vxypod8rd1] {
    display: flex;
    justify-content: center;
    padding: 3rem;
}

.sa-spinner[b-vxypod8rd1] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--adm-bd-2a2a3a);
    border-top-color: var(--adm-bd-6366f1);
    border-radius: 50%;
    animation: sa-spin-b-vxypod8rd1 0.8s linear infinite;
}

@keyframes sa-spin-b-vxypod8rd1 {
    to { transform: rotate(360deg); }
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
    .sa-stats-grid[b-vxypod8rd1] {
        grid-template-columns: repeat(2, 1fr);
    }

    .sa-stats-grid.cols-2[b-vxypod8rd1] {
        grid-template-columns: 1fr;
    }

    .sa-form-grid[b-vxypod8rd1] {
        grid-template-columns: 1fr;
    }

    .sa-content[b-vxypod8rd1] {
        padding: 1rem;
    }

    .sa-tabs[b-vxypod8rd1] {
        padding: 0 0.5rem;
    }

    .sa-tab[b-vxypod8rd1] {
        padding: 0.625rem 0.75rem;
        font-size: 0.75rem;
    }
}

/* ========================================================================
   Plan management — pills, modal, toast
   ======================================================================== */

/* Plan pill in the restaurants table — acts as a button so click opens
   the change-plan modal. Category colors mirror the landing-page pricing
   pills and the user-mgmt role badges so Mesero's visual language stays
   consistent: blue=Trial (informational), slate=Starter (neutral entry),
   purple=Pro (brand signature), amber=Enterprise (premium top tier). */
.plan-pill[b-vxypod8rd1] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.55rem 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: var(--adm-bg-94a3b8-a0_18);
    color: var(--adm-fgon-dde2e8-cbd5e1);
    border: 1px solid transparent;
    cursor: pointer;
    transition: filter 0.15s, transform 0.08s, border-color 0.15s;
    line-height: 1;
}

.plan-pill:hover[b-vxypod8rd1] { filter: brightness(1.12); border-color: var(--adm-bd-ffffff-a0_14); }
.plan-pill:active[b-vxypod8rd1] { transform: translateY(1px); }

.plan-pill-edit[b-vxypod8rd1] {
    opacity: 0.55;
    font-size: 0.68rem;
    margin-left: 0.1rem;
}
.plan-pill:hover .plan-pill-edit[b-vxypod8rd1] { opacity: 1; }

.plan-trial[b-vxypod8rd1]       { background: var(--adm-bg-3b82f6-a0_18);  color: var(--adm-fgon-d6e4fb-93c5fd); }
.plan-starter[b-vxypod8rd1]     { background: var(--adm-bg-64748b-a0_25); color: var(--adm-fgon-edf1f5-e2e8f0); }
.plan-pro[b-vxypod8rd1]         { background: var(--adm-bg-a855f7-a0_25);  color: var(--adm-fgon-e4d1fb-d8b4fe); }
.plan-enterprise[b-vxypod8rd1]  { background: var(--adm-bg-f59e0b-a0_22);  color: var(--adm-fgon-f7e6c7-fcd34d); }

/* Business-type pill — mirrors .plan-pill interaction model but a separate
   class so the two pill kinds read as distinct at a glance. Color palette
   is chosen to be orthogonal to the plan colors (teal/amber/rose/emerald
   vs blue/slate/purple/amber) so a row with the same tint in both columns
   doesn't happen by accident. */
.biz-pill[b-vxypod8rd1] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.55rem 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: var(--adm-bg-94a3b8-a0_18);
    color: var(--adm-fgon-dde2e8-cbd5e1);
    border: 1px solid transparent;
    cursor: pointer;
    transition: filter 0.15s, transform 0.08s, border-color 0.15s;
    line-height: 1;
}
.biz-pill:hover[b-vxypod8rd1] { filter: brightness(1.12); border-color: var(--adm-bd-ffffff-a0_14); }
.biz-pill:active[b-vxypod8rd1] { transform: translateY(1px); }
.biz-fullservice[b-vxypod8rd1]  { background: var(--adm-bg-14b8a6-a0_22); color: var(--adm-fgon-c6ebe9-5eead4); }
.biz-coffeeshop[b-vxypod8rd1]   { background: var(--adm-bg-d97706-a0_22);  color: var(--adm-fgon-f1ddc6-fcd34d); }
.biz-bar[b-vxypod8rd1]          { background: var(--adm-bg-f43f5e-a0_22);  color: var(--adm-fgon-f7d1d9-fda4af); }
.biz-takeaway[b-vxypod8rd1]     { background: var(--adm-bg-22c55e-a0_22);  color: var(--adm-fgon-c9eed9-86efac); }

/* Toggle preview strip inside the business-type modal — renders a row of
   compact pills showing TablesEnabled / CoursesEnabled / … for context.
   Green "on" / dim "off" palette mirrors the rest of the Admin UI so ops
   eyes know which toggles are currently live without reading the copy. */
.biz-toggles-preview[b-vxypod8rd1] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--adm-bg-94a3b8-a0_08);
    border: 1px solid var(--adm-bd-94a3b8-a0_14);
    border-radius: 10px;
}
.biz-toggle[b-vxypod8rd1] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
}
.biz-toggle.on[b-vxypod8rd1]  { background: var(--adm-bg-22c55e-a0_22); color: var(--adm-fgon-c9eed9-86efac); }
.biz-toggle.off[b-vxypod8rd1] { background: var(--adm-bg-64748b-a0_2); color: var(--adm-fgon-eff3f7-94a3b8); text-decoration: line-through; opacity: 0.7; }

.sa-hint[b-vxypod8rd1] {
    font-size: 0.78rem;
    color: var(--adm-fg-94a3b8);
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 1.4;
}

.plan-pill-static[b-vxypod8rd1] {
    cursor: default;
    border: 1px solid var(--adm-bd-ffffff-a0_08);
}
.plan-pill-static:hover[b-vxypod8rd1] { filter: none; transform: none; }

/* Modal */
.sa-modal-backdrop[b-vxypod8rd1] {
    position: fixed;
    inset: 0;
    background: var(--adm-scrim-070b14-a0_72);
    z-index: 10060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: sa-fade-b-vxypod8rd1 0.15s ease-out;
}

@keyframes sa-fade-b-vxypod8rd1 { from { opacity: 0; } to { opacity: 1; } }

.sa-modal[b-vxypod8rd1] {
    width: 460px;
    max-width: 100%;
    max-height: 92vh;
    background: linear-gradient(180deg, var(--adm-bggrad-1f2a3d) 0%, var(--adm-bggrad-1a2436) 100%);
    border-radius: 16px;
    border: 1px solid var(--adm-bd-94a3b8-a0_12);
    box-shadow: 0 28px 56px var(--adm-sh-000000-a0_44), 0 2px 6px var(--adm-sh-000000-a0_26);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: sa-pop-b-vxypod8rd1 0.2s cubic-bezier(.2,.8,.3,1);
}

@keyframes sa-pop-b-vxypod8rd1 {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.sa-modal-head[b-vxypod8rd1] {
    padding: 1.15rem 1.4rem 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--adm-bd-94a3b8-a0_12);
}

.sa-modal-head h2[b-vxypod8rd1] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 650;
    color: var(--adm-fg-f1f5f9);
    letter-spacing: -0.01em;
}

.sa-modal-close[b-vxypod8rd1] {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--adm-fg-94a3b8);
    font-size: 1.3rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.sa-modal-close:hover[b-vxypod8rd1] { background: var(--adm-bg-94a3b8-a0_12); color: var(--adm-fgon-e6eaee-f1f5f9); }

.sa-modal-body[b-vxypod8rd1] {
    padding: 1.2rem 1.4rem;
    overflow-y: auto;
}

.sa-modal-sub[b-vxypod8rd1] {
    color: var(--adm-fg-94a3b8);
    font-size: 0.88rem;
    margin: 0 0 1.1rem;
}

.sa-modal-sub strong[b-vxypod8rd1] { color: var(--adm-fg-e2e8f0); font-weight: 600; }

.sa-inline-code[b-vxypod8rd1] {
    background: var(--adm-bg-94a3b8-a0_12);
    padding: 0.12rem 0.4rem;
    border-radius: 5px;
    font-size: 0.8rem;
    color: var(--adm-fgon-e6eaee-cbd5e1);
    margin-left: 0.35rem;
    font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
}

.sa-field[b-vxypod8rd1] {
    margin-bottom: 1rem;
}

.sa-field label[b-vxypod8rd1] {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--adm-fg-94a3b8);
    margin-bottom: 0.4rem;
}

.sa-current-plan[b-vxypod8rd1] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    background: var(--adm-bg-0f172a-a0_6);
    border: 1px solid var(--adm-bd-94a3b8-a0_14);
    border-radius: 10px;
}

.sa-current-plan-meta[b-vxypod8rd1] {
    color: var(--adm-fg-64748b);
    font-size: 0.78rem;
}

.sa-checkbox[b-vxypod8rd1] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.88rem;
    color: var(--adm-fg-cbd5e1);
    cursor: pointer;
    margin-top: 0.3rem;
}

.sa-checkbox input[type="checkbox"][b-vxypod8rd1] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.sa-modal-foot[b-vxypod8rd1] {
    padding: 0.95rem 1.4rem 1.1rem;
    border-top: 1px solid var(--adm-bd-94a3b8-a0_1);
    display: flex;
    gap: 0.55rem;
    justify-content: flex-end;
}

/* Toast */
.sa-toast[b-vxypod8rd1] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    padding: 0.8rem 1.1rem;
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bd-94a3b8-a0_18);
    border-left: 4px solid var(--adm-bdon-ffffff-10b981);
    border-radius: 10px;
    color: var(--adm-fgon-ffffff-e2e8f0);
    font-size: 0.88rem;
    box-shadow: 0 12px 28px var(--adm-sh-000000-a0_38);
    z-index: 10050;
    animation: sa-toast-in-b-vxypod8rd1 0.22s cubic-bezier(.2,.8,.3,1);
    max-width: 380px;
}

.sa-toast.error[b-vxypod8rd1] { border-left-color: var(--adm-bd-dc2626); color: var(--adm-fg-fca5a5); }

@keyframes sa-toast-in-b-vxypod8rd1 {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Print diagnostics tab ------------------------------------------------ */
.sa-print-summary[b-vxypod8rd1] {
    margin-top: 1rem;
    padding: 0.7rem 1rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    border: 1px solid var(--adm-bd-94a3b8-a0_18);
}
.sa-print-summary.ok[b-vxypod8rd1] {
    background: var(--adm-bg-22c55e-a0_08);
    border-color: var(--adm-bd-22c55e-a0_3);
    color: var(--adm-fgon-e7f6ef-86efac);
}
.sa-print-summary.alarm[b-vxypod8rd1] {
    background: var(--adm-bg-ef4444-a0_08);
    border-color: var(--adm-bd-ef4444-a0_3);
    color: var(--adm-fgon-f7ebed-fca5a5);
}
.sa-print-summary strong[b-vxypod8rd1] { font-size: 1rem; }

.sa-print-grid[b-vxypod8rd1] {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}
.sa-print-block[b-vxypod8rd1] {
    padding: 0.9rem 1rem;
    background: var(--adm-bg-0f172a-a0_4);
    border: 1px solid var(--adm-bd-94a3b8-a0_12);
    border-radius: 8px;
}
.sa-print-block h4[b-vxypod8rd1] {
    margin: 0 0 0.7rem 0;
    font-size: 0.95rem;
    color: var(--adm-fg-cbd5e1);
}
.sa-print-block dl[b-vxypod8rd1] { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 0.8rem; margin: 0; font-size: 0.85rem; }
.sa-print-block dt[b-vxypod8rd1] { color: var(--adm-fg-94a3b8); }
.sa-print-block dd[b-vxypod8rd1] { margin: 0; color: var(--adm-fg-e2e8f0); }
.sa-print-block code[b-vxypod8rd1] { font-size: 0.78rem; color: var(--adm-fg-cbd5e1); word-break: break-all; }

.sa-warning-box[b-vxypod8rd1] {
    padding: 0.8rem 1rem;
    background: var(--adm-bg-eab308-a0_08);
    border: 1px solid var(--adm-bd-eab308-a0_3);
    border-radius: 8px;
    color: var(--adm-fgon-f7f4e8-fde68a);
    font-size: 0.88rem;
}

.sa-code-block[b-vxypod8rd1] {
    margin-top: 0.5rem;
    padding: 0.9rem;
    background: var(--adm-bg-0f172a);
    border: 1px solid var(--adm-bd-94a3b8-a0_12);
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    color: var(--adm-fgon-f8fafc-cbd5e1);
    overflow-x: auto;
    max-height: 400px;
}

/* ===== Negocio (SaaS metrics) tab ===== */
.sa-stat-card.accent-red[b-vxypod8rd1] { border-left: 3px solid var(--adm-bd-ef4444); }
.sa-muted-note[b-vxypod8rd1] {
    font-size: 0.78rem;
    color: var(--adm-fg-94a3b8);
    margin: 8px 2px 0;
}
.sa-muted-note code[b-vxypod8rd1] {
    background: var(--adm-bg-1e293b);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.72rem;
}
.sa-negocio-cols[b-vxypod8rd1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 18px;
}
@media (max-width: 820px) {
    .sa-negocio-cols[b-vxypod8rd1] { grid-template-columns: 1fr; }
}
.sa-bars[b-vxypod8rd1] { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
.sa-bar-row[b-vxypod8rd1] { display: flex; align-items: center; gap: 10px; }
.sa-bar-label[b-vxypod8rd1] { width: 64px; font-size: 0.78rem; color: var(--adm-fg-94a3b8); flex: 0 0 auto; }
.sa-bar-track[b-vxypod8rd1] { flex: 1 1 auto; background: var(--adm-bg-1e293b); border-radius: 5px; height: 16px; overflow: hidden; }
.sa-bar-fill[b-vxypod8rd1] { display: block; height: 100%; background: #3b82f6; border-radius: 5px; min-width: 2px; }
.sa-bar-value[b-vxypod8rd1] { width: 34px; text-align: right; font-size: 0.82rem; color: var(--adm-fg-e2e8f0); flex: 0 0 auto; }

/* "Pago fallido" colorway — red, revenue-at-risk urgency. */
.sa-stuck-chip.variant-pastdue.has-some[b-vxypod8rd1] { border-color: var(--adm-bd-ef4444-a0_5); color: var(--adm-fg-fca5a5); }
.sa-stuck-chip.variant-pastdue.has-some:hover[b-vxypod8rd1] { background: var(--adm-bg-ef4444-a0_08); border-color: var(--adm-bd-ef4444-a0_75); }
.sa-stuck-chip.variant-pastdue.active[b-vxypod8rd1] { background: var(--adm-bg-ef4444-a0_18); border-color: var(--adm-bd-ef4444-a0_75); color: var(--adm-fgon-f6d9db-fca5a5); box-shadow: inset 0 0 0 1px var(--adm-sh-ef4444-a0_3); }
.sa-stuck-chip.variant-pastdue.has-some .sa-stuck-chip-count[b-vxypod8rd1],
.sa-stuck-chip.variant-pastdue.active .sa-stuck-chip-count[b-vxypod8rd1] { background: var(--adm-bg-ef4444-a0_32); color: var(--adm-fgon-f5c0c1-fee2e2); }

/* "Cancelan" colorway — amber, churn warning. */
.sa-stuck-chip.variant-cancelling.has-some[b-vxypod8rd1] { border-color: var(--adm-bd-f59e0b-a0_5); color: var(--adm-fg-fcd34d); }
.sa-stuck-chip.variant-cancelling.has-some:hover[b-vxypod8rd1] { background: var(--adm-bg-f59e0b-a0_08); border-color: var(--adm-bd-f59e0b-a0_75); }
.sa-stuck-chip.variant-cancelling.active[b-vxypod8rd1] { background: var(--adm-bg-f59e0b-a0_18); border-color: var(--adm-bd-f59e0b-a0_75); color: var(--adm-fgon-f7e9d1-fcd34d); box-shadow: inset 0 0 0 1px var(--adm-sh-f59e0b-a0_3); }
.sa-stuck-chip.variant-cancelling.has-some .sa-stuck-chip-count[b-vxypod8rd1],
.sa-stuck-chip.variant-cancelling.active .sa-stuck-chip-count[b-vxypod8rd1] { background: var(--adm-bg-f59e0b-a0_32); color: var(--adm-fgon-f7ddaf-fef3c7); }

/* ===== Feature-flags matrix modal (#5) ===== */
.sa-flag-group[b-vxypod8rd1] { margin-bottom: 14px; }
.sa-flag-group-title[b-vxypod8rd1] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--adm-fg-64748b);
    margin: 0 0 6px;
    border-bottom: 1px solid var(--adm-bd-1e293b);
    padding-bottom: 4px;
}
.sa-flag-row[b-vxypod8rd1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 2px;
    cursor: pointer;
}
.sa-flag-row:hover[b-vxypod8rd1] { background: var(--adm-bg-94a3b8-a0_06); border-radius: 6px; }
.sa-flag-label[b-vxypod8rd1] { font-size: 0.86rem; color: var(--adm-fg-e2e8f0); }
.sa-flag-row input[type="checkbox"][b-vxypod8rd1] { width: 18px; height: 18px; cursor: pointer; }
/* Flag is ON but a companion field is missing, so it does nothing. Margin lives
   here rather than as a literal space in the markup: a Razor @if strips
   whitespace between inline elements. */
.sa-flag-inert[b-vxypod8rd1] {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--adm-bg-1e293b);
    color: var(--adm-fg-f59e0b);
    font-size: 0.72rem;
    white-space: nowrap;
    cursor: help;
}

/* ===== Salud (system/node health) tab (#3) ===== */
.sa-health-ok[b-vxypod8rd1] { color: var(--adm-fg-22c55e); }
.sa-health-warn[b-vxypod8rd1] { color: var(--adm-fg-f59e0b); }
.sa-health-bad[b-vxypod8rd1] { color: var(--adm-fg-ef4444); }
.sa-pill-soft[b-vxypod8rd1] {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--adm-bg-1e293b);
    color: var(--adm-fgon-ffffff-94a3b8);
    font-size: 0.68rem;
    vertical-align: middle;
}

/* ===== Sentry issue level badges (#7) ===== */
.sa-level[b-vxypod8rd1] {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.sa-level-fatal[b-vxypod8rd1] { background: var(--adm-bg-ef4444-a0_25); color: var(--adm-fgon-f6ccce-fca5a5); }
.sa-level-error[b-vxypod8rd1] { background: var(--adm-bg-ef4444-a0_18); color: var(--adm-fgon-f6d9db-f87171); }
.sa-level-warning[b-vxypod8rd1] { background: var(--adm-bg-f59e0b-a0_2); color: var(--adm-fgon-f7e8cc-fcd34d); }
.sa-level-info[b-vxypod8rd1] { background: var(--adm-bg-3b82f6-a0_2); color: var(--adm-fgon-d2e2fb-93c5fd); }
.sa-level-debug[b-vxypod8rd1] { background: var(--adm-bg-27272a); color: var(--adm-fgon-ffffff-a1a1aa); }

/* ===== Support ticket status badges (#8) — reuse .sa-level base ===== */
.sa-ticket-open[b-vxypod8rd1] { background: var(--adm-bg-3b82f6-a0_2); color: var(--adm-fgon-d2e2fb-93c5fd); padding: 1px 7px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; }
.sa-ticket-pending[b-vxypod8rd1] { background: var(--adm-bg-f59e0b-a0_2); color: var(--adm-fgon-f7e8cc-fcd34d); padding: 1px 7px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; }
.sa-ticket-closed[b-vxypod8rd1] { background: var(--adm-bg-27272a); color: var(--adm-fgon-ffffff-a1a1aa); padding: 1px 7px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; }

/* ===== RGPD actions in flags modal (#9) ===== */
.sa-rgpd-actions[b-vxypod8rd1] { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0; }

/* ===== Announcement preview (#10) ===== */
.sa-annprev[b-vxypod8rd1] {
    margin: 10px 0 4px;
    padding: 8px 14px;
    border-radius: 8px;
    color: var(--adm-fg-ffffff);
    font-size: 0.875rem;
    font-weight: 500;
}
.sa-annprev-info[b-vxypod8rd1] { background: #2563eb; }
.sa-annprev-warning[b-vxypod8rd1] { background: #b45309; }
.sa-annprev-critical[b-vxypod8rd1] { background: #b91c1c; }

/* ========================================================================
   Phone (<= 640px)

   NOTE: this page renders under EmptyLayout, not AdminLayout, so the shared
   admin-mobile.css layer (every rule scoped under .admin-content) never
   reaches it. Anything the other admin pages get for free — input font-size,
   tap targets, stacked headers — has to be spelled out here.
   ======================================================================== */
@media (max-width: 640px) {
    /* Login card: width:360px is content-box, so with 2.5rem of side padding
       the card measured 442px — wider than the phone viewport itself. */
    .sa-login-overlay[b-vxypod8rd1] {
        padding: 1rem;
    }

    .sa-login-card[b-vxypod8rd1] {
        width: 100%;
        max-width: 360px;
        box-sizing: border-box;
        padding: 2.25rem 1.5rem;
    }

    .sa-topbar[b-vxypod8rd1] {
        padding: 0.75rem 1rem;
    }

    .sa-topbar h1[b-vxypod8rd1] {
        font-size: 1rem;
    }

    /* The strip already scrolls; this just makes each tab a real tap target. */
    .sa-tab[b-vxypod8rd1] {
        min-height: 44px;
    }

    /* .small keeps its 36px so the dense table action columns don't bloat. */
    .sa-btn:not(.small)[b-vxypod8rd1] {
        min-height: 44px;
    }

    /* 16px prevents iOS from zooming the page on focus — that zoom is itself a
       horizontal-overflow trigger. Every input/select/textarea uses .sa-input. */
    .sa-input[b-vxypod8rd1] {
        font-size: 16px;
    }

    /* 1fr tracks still floor at min-content, so a long unbreakable figure
       ("1.234.567", "12.345,67 €") widened the grid and with it the page. */
    .sa-stat-card[b-vxypod8rd1] {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .sa-stat-value[b-vxypod8rd1] {
        font-size: 1.5rem;
    }

    .sa-stat-card.large[b-vxypod8rd1] {
        padding: 1.25rem;
    }

    /* Title + actions can't share a row: the Restaurantes header carries five
       nowrap filter chips plus Refrescar. */
    .sa-section-header[b-vxypod8rd1] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .sa-section-header-actions[b-vxypod8rd1] {
        width: 100%;
        justify-content: flex-start;
    }

    .sa-form-actions[b-vxypod8rd1] {
        flex-wrap: wrap;
    }

    .sa-card[b-vxypod8rd1] {
        padding: 1.1rem;
    }

    /* Long unbroken strings — slugs, build SHAs, Stripe coupon ids, setting
       keys, endpoint paths — otherwise set the min-content floor of the page. */
    .sa-card code[b-vxypod8rd1],
    .sa-hint code[b-vxypod8rd1],
    .sa-muted-note code[b-vxypod8rd1],
    .sa-field-hint code[b-vxypod8rd1],
    .sa-pin-warning code[b-vxypod8rd1] {
        overflow-wrap: anywhere;
    }

    /* Print diagnostics: one block per row, and let the block shrink (its
       minmax(280px,1fr) track floor was being pushed by the tables inside). */
    .sa-print-grid[b-vxypod8rd1] {
        grid-template-columns: 1fr;
    }

    .sa-print-block[b-vxypod8rd1] {
        min-width: 0;
    }

    /* Toast is pinned bottom-right at a 380px max-width — on a 360px screen it
       ran off the left edge instead. Span the width instead. */
    .sa-toast[b-vxypod8rd1] {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        max-width: none;
    }
}
/* /Pages/Admin/SupplierAnalytics.razor.rz.scp.css */
.analytics-container[b-yvg0pyeqkw] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-yvg0pyeqkw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.page-header h1[b-yvg0pyeqkw] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--adm-fg-f1f5f9);
    margin: 0;
}

.header-actions[b-yvg0pyeqkw] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.form-select[b-yvg0pyeqkw] {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    background: var(--adm-bg-0f172a) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 0.5rem center;
    font-size: 0.875rem;
    color: var(--adm-fgon-f8fafc-e2e8f0);
    appearance: none;
    cursor: pointer;
}

.form-select option[b-yvg0pyeqkw] {
    background: var(--adm-bg-1e293b);
    color: var(--adm-fgon-ffffff-e2e8f0);
}

.btn[b-yvg0pyeqkw] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn.outline[b-yvg0pyeqkw] {
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    color: var(--adm-fgon-ffffff-e2e8f0);
}

.btn.outline:hover[b-yvg0pyeqkw] {
    background: var(--adm-bghov-ffffff-334155);
}

/* Section */
.section[b-yvg0pyeqkw] {
    background: var(--adm-bg-1e293b);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--adm-bdon-ffffff-334155);
}

.section h2[b-yvg0pyeqkw] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--adm-fgon-ffffff-f1f5f9);
    margin: 0 0 1rem 0;
}

.section-header[b-yvg0pyeqkw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-header h2[b-yvg0pyeqkw] {
    margin: 0;
}

.btn-close[b-yvg0pyeqkw] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--adm-bg-334155);
    border-radius: 6px;
    color: var(--adm-fgon-f1f5f9-94a3b8);
    cursor: pointer;
}

.btn-close:hover[b-yvg0pyeqkw] {
    background: var(--adm-bg-dc2626-a0_2);
    color: var(--adm-fgon-edcccf-f87171);
}

/* Suppliers Grid */
.suppliers-grid[b-yvg0pyeqkw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.supplier-card[b-yvg0pyeqkw] {
    background: var(--adm-bg-0f172a);
    border-radius: 10px;
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.supplier-card:hover[b-yvg0pyeqkw] {
    border-color: var(--adm-bdon-f8fafc-3b82f6);
}

.supplier-card.selected[b-yvg0pyeqkw] {
    border-color: var(--adm-bdon-e5eefb-3b82f6);
    background: var(--adm-bg-3b82f6-a0_1);
}

.supplier-header[b-yvg0pyeqkw] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.supplier-header h3[b-yvg0pyeqkw] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--adm-fg-f1f5f9);
    margin: 0;
}

.order-count[b-yvg0pyeqkw] {
    font-size: 0.75rem;
    color: var(--adm-fgon-ffffff-94a3b8);
    background: var(--adm-bg-1e293b);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

/* Metrics */
.metrics-grid[b-yvg0pyeqkw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.metric[b-yvg0pyeqkw] {
    display: flex;
    flex-direction: column;
}

.metric-value[b-yvg0pyeqkw] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--adm-fg-f1f5f9);
}

.metric-label[b-yvg0pyeqkw] {
    font-size: 0.75rem;
    color: var(--adm-fg-94a3b8);
    margin-bottom: 0.5rem;
}

.metric-bar[b-yvg0pyeqkw] {
    height: 4px;
    background: var(--adm-bg-334155);
    border-radius: 2px;
    overflow: hidden;
}

.metric-fill[b-yvg0pyeqkw] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
}

.metric-fill.delivery[b-yvg0pyeqkw] {
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}

.metric-fill.accuracy[b-yvg0pyeqkw] {
    background: linear-gradient(90deg, var(--adm-bggrad-3b82f6) 0%, var(--adm-bggrad-60a5fa) 100%);
}

/* Supplier Stats */
.supplier-stats[b-yvg0pyeqkw] {
    display: flex;
    justify-content: space-between;
    padding-top: 1rem;
    border-top: 1px solid var(--adm-bd-334155);
}

.stat[b-yvg0pyeqkw] {
    text-align: center;
}

.stat-value[b-yvg0pyeqkw] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--adm-fg-f1f5f9);
    display: block;
}

.stat-label[b-yvg0pyeqkw] {
    font-size: 0.6875rem;
    color: var(--adm-fg-94a3b8);
}

/* Spend Chart */
.chart-container[b-yvg0pyeqkw] {
    overflow-x: auto;
}

.spend-chart[b-yvg0pyeqkw] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 200px;
    padding: 1rem 0;
    min-width: 600px;
}

.chart-bar[b-yvg0pyeqkw] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 40px;
}

.bar-container[b-yvg0pyeqkw] {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.bar[b-yvg0pyeqkw] {
    width: 80%;
    max-width: 60px;
    background: linear-gradient(180deg, var(--adm-bggrad-3b82f6) 0%, var(--adm-bggrad-818cf8) 100%);
    border-radius: 4px 4px 0 0;
    position: relative;
    min-height: 4px;
    transition: height 0.3s ease;
}

.bar:hover[b-yvg0pyeqkw] {
    opacity: 0.9;
}

.bar-value[b-yvg0pyeqkw] {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--adm-fg-f1f5f9);
    white-space: nowrap;
    padding-bottom: 4px;
    display: none;
}

.bar:hover .bar-value[b-yvg0pyeqkw] {
    display: block;
}

.bar-label[b-yvg0pyeqkw] {
    font-size: 0.75rem;
    color: var(--adm-fg-94a3b8);
    margin-top: 0.5rem;
}

/* Delivery Table */
.delivery-table-container[b-yvg0pyeqkw] {
    overflow-x: auto;
}

.delivery-table[b-yvg0pyeqkw] {
    width: 100%;
    border-collapse: collapse;
}

.delivery-table th[b-yvg0pyeqkw] {
    text-align: left;
    padding: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--adm-fgon-f8fafc-94a3b8);
    background: var(--adm-bg-0f172a);
    border-bottom: 1px solid var(--adm-bdon-f8fafc-334155);
}

.delivery-table td[b-yvg0pyeqkw] {
    padding: 0.75rem;
    font-size: 0.875rem;
    color: var(--adm-fg-e2e8f0);
    border-bottom: 1px solid var(--adm-bd-334155);
}

.delivery-table tbody tr:hover[b-yvg0pyeqkw] {
    background: var(--adm-bg-334155);
}

.delivery-table .order-number[b-yvg0pyeqkw] {
    font-weight: 500;
    color: var(--adm-fg-3b82f6);
}

.delivery-table .total[b-yvg0pyeqkw] {
    font-weight: 500;
}

.delivery-table tr.late[b-yvg0pyeqkw] {
    background: var(--adm-bg-dc2626-a0_15);
}

.status-badge[b-yvg0pyeqkw] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.on-time[b-yvg0pyeqkw] {
    background: var(--adm-bg-22c55e-a0_2);
    color: var(--adm-fgon-cdefdc-4ade80);
}

.status-badge.late[b-yvg0pyeqkw] {
    background: var(--adm-bg-dc2626-a0_2);
    color: var(--adm-fgon-f2d0d1-f87171);
}

/* Comparison Grid */
.comparison-grid[b-yvg0pyeqkw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.comparison-card[b-yvg0pyeqkw] {
    background: var(--adm-bg-0f172a);
    border-radius: 10px;
    padding: 1.25rem;
    text-align: center;
    position: relative;
}

.comparison-card.best[b-yvg0pyeqkw] {
    background: var(--adm-bg-10b981-a0_1);
    border: 2px solid var(--adm-bdon-e1f4f0-10b981);
}

.best-badge[b-yvg0pyeqkw] {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #10b981;
    color: white;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.comp-supplier[b-yvg0pyeqkw] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--adm-fg-f1f5f9);
    margin-bottom: 0.5rem;
}

.comp-price[b-yvg0pyeqkw] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--adm-fg-f1f5f9);
}

.comp-diff[b-yvg0pyeqkw] {
    font-size: 0.75rem;
    color: var(--adm-fg-f87171);
    margin-bottom: 0.5rem;
}

.comp-details[b-yvg0pyeqkw] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--adm-fg-94a3b8);
    margin: 0.5rem 0;
}

.comp-orders[b-yvg0pyeqkw] {
    font-size: 0.75rem;
    color: var(--adm-fg-94a3b8);
}

/* Quick Actions */
.quick-actions[b-yvg0pyeqkw] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.action-btn[b-yvg0pyeqkw] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--adm-bg-1e293b);
    border: 1px solid var(--adm-bdon-ffffff-334155);
    border-radius: 10px;
    color: var(--adm-fgon-ffffff-e2e8f0);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.action-btn:hover[b-yvg0pyeqkw] {
    background: var(--adm-bghov-ffffff-334155);
    border-color: var(--adm-bdon-eaf0f6-3b82f6);
    color: var(--adm-fgon-eaf0f6-3b82f6);
}

/* Empty & Loading States */
.empty-state[b-yvg0pyeqkw] {
    padding: 2rem;
    text-align: center;
    color: var(--adm-fg-94a3b8);
}

.empty-state.small[b-yvg0pyeqkw] {
    padding: 1rem;
}

.loading-state[b-yvg0pyeqkw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    color: var(--adm-fg-94a3b8);
}

.spinner[b-yvg0pyeqkw] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--adm-bd-334155);
    border-top-color: var(--adm-bd-3b82f6);
    border-radius: 50%;
    animation: spin-b-yvg0pyeqkw 1s linear infinite;
}

@keyframes spin-b-yvg0pyeqkw {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
    .analytics-container[b-yvg0pyeqkw] {
        padding: 1rem;
    }

    .page-header[b-yvg0pyeqkw] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .suppliers-grid[b-yvg0pyeqkw] {
        grid-template-columns: 1fr;
    }

    .quick-actions[b-yvg0pyeqkw] {
        flex-direction: column;
    }

    .action-btn[b-yvg0pyeqkw] {
        justify-content: center;
    }
}

/* Phone (≤600px): the supplier-card metric rows used a fixed 2-col grid +
   a 3-up space-between stat row that overran a ~390px viewport (right column
   clipped off-screen). Collapse the metrics to one column and let the stats
   wrap; guard the page root against any residual horizontal overflow.
   Additive — desktop/base untouched. */
@media (max-width: 600px) {
    .analytics-container[b-yvg0pyeqkw] {
        max-width: 100%;
        overflow-x: hidden;
    }

    .metrics-grid[b-yvg0pyeqkw] {
        grid-template-columns: 1fr;
    }

    .supplier-stats[b-yvg0pyeqkw] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .supplier-stats .stat[b-yvg0pyeqkw] {
        flex: 1 1 40%;
        min-width: 0;
    }
}
/* /Pages/Admin/Tabs.razor.rz.scp.css */
.tabs-container[b-7som0fzxsq] { padding: 1.5rem; }
.page-header[b-7som0fzxsq] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.page-header h1[b-7som0fzxsq] { font-size: 1.5rem; color: var(--adm-fg-f1f5f9); margin: 0; }
.subtitle[b-7som0fzxsq] { color: var(--adm-fg-94a3b8); font-size: 0.875rem; margin-top: 0.25rem; }
.form-input[b-7som0fzxsq] { background: var(--adm-bg-0f172a); border: 1px solid var(--adm-bdon-f8fafc-334155); color: var(--adm-fgon-f8fafc-e2e8f0); padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem; }
.btn[b-7som0fzxsq] { padding: 0.5rem 1rem; border-radius: 0.375rem; font-size: 0.875rem; cursor: pointer; border: none; transition: all 0.15s; }
.btn.primary[b-7som0fzxsq] { background: #3b82f6; color: white; }
.btn.primary:hover[b-7som0fzxsq] { background: #2563eb; }
.btn.outline[b-7som0fzxsq] { background: transparent; border: 1px solid var(--adm-bd-334155); color: var(--adm-fg-e2e8f0); }
.btn.danger-outline[b-7som0fzxsq] { background: transparent; border: 1px solid var(--adm-bd-ef4444); color: var(--adm-fg-ef4444); }
.btn.danger-outline:hover[b-7som0fzxsq] { background: var(--adm-bg-ef4444-a0_1); }
.btn:disabled[b-7som0fzxsq] { opacity: 0.5; cursor: not-allowed; }
.holds-grid[b-7som0fzxsq] { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.hold-card[b-7som0fzxsq] { background: var(--adm-bg-1e293b); border: 1px solid var(--adm-bdon-ffffff-334155); border-radius: 0.5rem; padding: 1.25rem; }
.hold-card.held[b-7som0fzxsq] { border-left: 3px solid var(--adm-bd-f59e0b); }
.hold-card.captured[b-7som0fzxsq] { border-left: 3px solid var(--adm-bd-22c55e); }
.hold-card.cancelled[b-7som0fzxsq] { border-left: 3px solid var(--adm-bd-94a3b8); opacity: 0.7; }
.hold-header[b-7som0fzxsq] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.card-info[b-7som0fzxsq] { display: flex; gap: 0.5rem; align-items: center; }
.card-brand[b-7som0fzxsq] { font-weight: 600; color: var(--adm-fg-f1f5f9); text-transform: capitalize; }
.card-last4[b-7som0fzxsq] { color: var(--adm-fg-94a3b8); font-family: monospace; }
.status-badge[b-7som0fzxsq] { padding: 0.2rem 0.5rem; border-radius: 0.25rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; }
.status-badge.held[b-7som0fzxsq] { background: var(--adm-bg-f59e0b-a0_15); color: var(--adm-fgon-f8ecd8-f59e0b); }
.status-badge.captured[b-7som0fzxsq] { background: var(--adm-bg-22c55e-a0_15); color: var(--adm-fgon-d8f2e4-22c55e); }
.status-badge.cancelled[b-7som0fzxsq] { background: var(--adm-bg-94a3b8-a0_15); color: var(--adm-fgon-e2e6eb-94a3b8); }
.status-badge.expired[b-7som0fzxsq] { background: var(--adm-bg-94a3b8-a0_15); color: var(--adm-fgon-e2e6eb-64748b); }
.hold-card.expired[b-7som0fzxsq] { border-left: 3px solid var(--adm-bd-64748b); opacity: 0.6; }
.hold-amount[b-7som0fzxsq] { font-size: 1.5rem; font-weight: 700; color: var(--adm-fg-f1f5f9); margin: 0.5rem 0; }
.hold-customer[b-7som0fzxsq] { color: var(--adm-fg-e2e8f0); font-size: 0.875rem; margin-bottom: 0.5rem; }
.hold-details[b-7som0fzxsq] { display: flex; gap: 1rem; font-size: 0.8rem; color: var(--adm-fg-94a3b8); margin-bottom: 0.75rem; }
.captured-amount[b-7som0fzxsq] { color: var(--adm-fg-22c55e); font-size: 0.875rem; margin-bottom: 0.75rem; }
.hold-actions[b-7som0fzxsq] { display: flex; gap: 0.5rem; }
.modal-overlay[b-7som0fzxsq] { position: fixed; inset: 0; background: var(--adm-scrim-000000-a0_6); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal[b-7som0fzxsq] { background: var(--adm-bg-1e293b); border: 1px solid var(--adm-bdon-ffffff-334155); border-radius: 0.75rem; width: 90%; max-width: 420px; }
.modal-header[b-7som0fzxsq] { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--adm-bd-334155); }
.modal-header h2[b-7som0fzxsq] { font-size: 1.1rem; color: var(--adm-fg-f1f5f9); margin: 0; }
.close-btn[b-7som0fzxsq] { background: none; border: none; color: var(--adm-fg-94a3b8); font-size: 1.2rem; cursor: pointer; }
.modal-body[b-7som0fzxsq] { padding: 1.25rem; }
.modal-body p[b-7som0fzxsq] { color: var(--adm-fg-e2e8f0); margin-bottom: 1rem; }
.form-group[b-7som0fzxsq] { margin-bottom: 1rem; }
.form-group label[b-7som0fzxsq] { display: block; font-size: 0.8rem; color: var(--adm-fg-94a3b8); margin-bottom: 0.25rem; }
.modal-footer[b-7som0fzxsq] { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 1rem 1.25rem; border-top: 1px solid var(--adm-bd-334155); }
.loading-state[b-7som0fzxsq] { display: flex; justify-content: center; padding: 3rem; }
.spinner[b-7som0fzxsq] { width: 2rem; height: 2rem; border: 3px solid var(--adm-bd-334155); border-top: 3px solid var(--adm-bd-3b82f6); border-radius: 50%; animation: spin-b-7som0fzxsq 0.8s linear infinite; }
@keyframes spin-b-7som0fzxsq { to { transform: rotate(360deg); } }
.empty-state[b-7som0fzxsq] { text-align: center; padding: 3rem; color: var(--adm-fg-94a3b8); }
.empty-state h2[b-7som0fzxsq] { color: var(--adm-fg-e2e8f0); margin-bottom: 0.5rem; }
.empty-state svg[b-7som0fzxsq] { margin-bottom: 1rem; }

/* Phone. The holds-grid's 300px minmax track is wider than the usable width on a
   360px Android (360 - 24 shell - 48 container = 288px), so the grid pushed the
   document past the viewport: one column instead, and drop the container's own
   horizontal padding since the admin shell already pads at this width. */
@media (max-width: 640px) {
    .tabs-container[b-7som0fzxsq] { padding: 1rem 0; }
    .holds-grid[b-7som0fzxsq] { grid-template-columns: 1fr; }
    .hold-card[b-7som0fzxsq] { min-width: 0; }
    .header-actions .form-input[b-7som0fzxsq] { width: 100%; }
    .hold-header[b-7som0fzxsq] { flex-wrap: wrap; gap: 0.5rem; }
    .card-info[b-7som0fzxsq] { min-width: 0; flex-wrap: wrap; }
    .hold-customer[b-7som0fzxsq] { overflow-wrap: anywhere; }
    .hold-details[b-7som0fzxsq] { flex-wrap: wrap; gap: 0.25rem 0.75rem; }
    .hold-actions .btn[b-7som0fzxsq] { flex: 1; }
}
/* /Pages/Admin/Templates.razor.rz.scp.css */
/* =============== Base / tokens =============== */
:root[b-adfsbpebe5] {
    --ink: var(--adm-fg-1f2937);
    --muted: #6b7280;
    --line: var(--adm-bd-e5e7eb);
    --soft: var(--adm-bg-f8fafc);
    --primary: var(--adm-bd-2563eb);
    --warn: #b91c1c;
    --paper: #fff;
    --ruler-w: 18px;
    --toolbar-h: 120px;
}

/* ---- layout columns ---- */
.pane-1[b-adfsbpebe5], .pane-2[b-adfsbpebe5], .pane-3[b-adfsbpebe5] { /* if you use .pane-3 only, keep that; this is just for clarity */
    /* no bg here – each card sets its own bg */
}

.pane-3[b-adfsbpebe5] {
    display: grid;
    grid-template-columns: minmax(240px,280px) minmax(0,0.9fr) minmax(0,1.1fr);
    gap: 16px;
    align-items: start;
}

@media (min-width:1280px) {
    .pane-3[b-adfsbpebe5] {
        grid-template-columns: 260px minmax(0,0.8fr) minmax(0,1.2fr);
    }
}

/* ---- toolbox card (left column) ---- */
.toolbox[b-adfsbpebe5] {
    position: sticky; /* keeps the whole card pinned while scrolling */
    top: calc(var(--toolbar-h) + 12px);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    background: #fff; /* ✅ back to light card */
    max-width: 100%;
    max-height: calc(100vh - var(--toolbar-h) - 24px);
    overflow: auto; /* allow vertical scroll for long content */
    color: var(--ink);
}

    .toolbox h4[b-adfsbpebe5] {
        margin: 8px 0 6px;
    }

    /* compact rows/controls inside the toolbox */
    .toolbox .row[b-adfsbpebe5] {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 8px 0;
    }

    .toolbox .tool-btn[b-adfsbpebe5] { /* don’t force full width in the sidebar */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .4rem;
        padding: .55rem .75rem;
        border-radius: .65rem;
        border: 1px solid var(--line);
        background: var(--adm-bg-111827);
        color: var(--adm-fgon-ffffff-ffffff);
    }

    .toolbox h4[b-adfsbpebe5] {
        margin: 8px 0 6px;
    }

    /* compact rows/controls inside the toolbox */
    .toolbox .row[b-adfsbpebe5] {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 8px 0;
    }

    .toolbox .tool-btn[b-adfsbpebe5] { /* don’t force full width in the sidebar */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .4rem;
        padding: .55rem .75rem;
        border-radius: .65rem;
        border: 1px solid var(--line);
        background: var(--adm-bg-111827); /* dark buttons only */
        color: var(--adm-fgon-ffffff-ffffff);
        text-align: center;
        font-weight: 500;
    }

        .toolbox .tool-btn:hover[b-adfsbpebe5] {
            opacity: .9;
        }

/* ---- “Formato” group header strip (light, not full black) ---- */
.format-bar[b-adfsbpebe5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--soft); /* ✅ subtle grey, not black */
}

/* ---- Editor / preview cards on the right ---- */
.editor-pane[b-adfsbpebe5],
.preview-pane[b-adfsbpebe5] {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 26px rgba(0,0,0,.06);
}

.editor-host[b-adfsbpebe5] {
    height: calc(100% - 36px);
}
/* account for the little info row */

.preview-pane[b-adfsbpebe5] {
    display: flex;
    flex-direction: column;
}

/* preview frame */
#preview[b-adfsbpebe5] {
    position: absolute; /* we keep centering it with JS */
    top: var(--paper-top) !important;
    left: var(--paper-left) !important; /* this is fine; it only affects the iframe */
    width: var(--paper-px) !important;
    background: #fff;
    border: 0;
}

    #preview[b-ucchm158w4][b-adfsbpebe5] {
        width: var(--paper-px) !important;
    }


/* rulers */
.ruler[b-adfsbpebe5] {
    position: absolute;
    z-index: 2;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.ruler-x[b-adfsbpebe5] {
    top: calc(var(--paper-top) - var(--ruler-v,18px));
    left: var(--paper-left);
    width: var(--paper-px);
    height: var(--ruler-w);
    background: repeating-linear-gradient(to right,#cbd5e1 0,#cbd5e1 1px,transparent 1px,transparent calc(var(--px-per-mm,3.78px)*10));
}

.ruler-y[b-adfsbpebe5] {
    top: var(--paper-top);
    left: calc(var(--paper-left) - var(--ruler-w));
    width: var(--ruler-w);
    height: var(--paper-h, 400px);
    background: repeating-linear-gradient(to bottom,#cbd5e1 0,#cbd5e1 1px,transparent 1px,transparent calc(var(--px-per-mm,3.78px)*10));
}

.preview-box[b-adfsbpebe5] {
    position: relative; /* container for the absolute iframe/rulers */
    flex: 1;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: radial-gradient(circle at 1px 1px, rgba(148,163,184,.38) 0, rgba(148,163,184,.38) 1px, transparent 1px) 0 0/24px 24px, linear-gradient(135deg, rgba(99,102,241,.08) 25%, transparent 25%) -12px 0/24px 24px, linear-gradient(45deg, rgba(59,130,246,.05) 25%, transparent 25%) 0 0/24px 24px, repeating-linear-gradient(0deg, rgba(148,163,184,.18) 0, rgba(148,163,184,.18) 1px, transparent 1px, transparent calc(var(--px-per-mm,3.78px) * 8)), #f8fafc;
    background-blend-mode: soft-light, screen, normal, normal, normal;
    padding-bottom: 2px;
}

.preview-meta[b-adfsbpebe5] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
    color: #666;
    font-size: .9rem;
}

/* ---- shared buttons (non-sidebar) ---- */
.btn[b-adfsbpebe5] {
    border: 0;
    background: var(--adm-bg-111827);
    color: var(--adm-fgon-ffffff-ffffff);
    padding: .55rem .75rem;
    border-radius: 8px;
    cursor: pointer;
}

    .btn:hover[b-adfsbpebe5] {
        opacity: .9;
    }

    .btn.primary[b-adfsbpebe5] {
        background: var(--primary);
    }

    .btn.warn[b-adfsbpebe5] {
        background: #fff5f5;
        color: #7f1d1d;
    }

/* inputs in the sidebar */
.toolbox input[type="text"][b-adfsbpebe5] {
    width: 100%;
}

/* keep the sidebar content from sliding under other panels */
html[b-adfsbpebe5], body[b-adfsbpebe5] {
    overflow-x: hidden;
}



/* Was a blue grid; make the whole host area plain white */
.preview-box[b-adfsbpebe5] {
    position: relative;
    flex: 1;
    min-height: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff; /* ⟵ white outside the ruler/paper */
    box-shadow: 0 8px 26px rgba(0,0,0,.06);
    padding-bottom: 2px;
}



/* Slight grey so rulers don't disappear on white */
.ruler[b-adfsbpebe5] {
    background: #f3f4f6; /* ⟵ light grey */
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}


/* Clean format bar spacing */
.format-bar[b-adfsbpebe5] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--soft);
}

    .format-bar .group[b-adfsbpebe5] {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        align-items: center;
    }

    .format-bar .divider[b-adfsbpebe5] {
        width: 1px;
        height: 26px;
        background: #e5e7eb;
        border-radius: 999px;
    }

/* Professional looking buttons in the bar */
.btn.sm[b-adfsbpebe5] {
    padding: .40rem .65rem;
    border-radius: .55rem;
    font-weight: 600;
}

/* Real rulers drawn on canvas */
.ruler[b-adfsbpebe5] {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    background: transparent;
}

.ruler-x[b-adfsbpebe5] {
    top: calc(var(--paper-top) - 18px);
    left: var(--paper-left);
    height: 18px;
    width: var(--paper-px);
}

.ruler-y[b-adfsbpebe5] {
    top: var(--paper-top);
    left: calc(var(--paper-left) - 18px);
    width: 18px;
    height: var(--paper-h, 400px);
}

    .ruler-y.right[b-adfsbpebe5] {
        left: calc(var(--paper-left) + var(--paper-px));
    }

/* Make preview “desk” clean & contrasty */
.preview-box[b-adfsbpebe5] {
    background: #fff;
}
/* canvas-like clean white outside the paper */

.format-bar[b-adfsbpebe5] {
    gap: 12px;
    padding: 10px;
    border-radius: 12px;
    background: var(--soft);
}

    .format-bar .group[b-adfsbpebe5] {
        gap: 8px;
        flex-wrap: wrap;
    }

.btn.sm[b-adfsbpebe5] {
    padding: .40rem .65rem;
    border-radius: .55rem;
    font-weight: 600;
}

.preview-box[b-adfsbpebe5] {
    background: radial-gradient(circle at 30% 10%, #ffffff, #f6f7fb 70%);
}


/* Format bar cleanup */
.format-bar[b-adfsbpebe5] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--soft);
}

    .format-bar .group[b-adfsbpebe5] {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        align-items: center;
    }

    .format-bar .divider[b-adfsbpebe5] {
        width: 1px;
        height: 26px;
        background: #e5e7eb;
        border-radius: 999px;
    }

.btn.sm[b-adfsbpebe5] {
    padding: .40rem .65rem;
    border-radius: .55rem;
    font-weight: 600;
}

/* Clean “desk/canvas” outside the paper */
.preview-box[b-adfsbpebe5] {
    background: #fff;
}

/* Canvases for rulers */
.ruler[b-adfsbpebe5] {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    background: transparent;
}

.ruler-x[b-adfsbpebe5] {
    top: calc(var(--paper-top) - 18px);
    left: var(--paper-left);
    height: 18px;
    width: var(--paper-px);
}

.ruler-y[b-adfsbpebe5] {
    top: var(--paper-top);
    left: calc(var(--paper-left) - 18px);
    width: 18px;
    height: var(--paper-h, 400px);
}

    .ruler-y.right[b-adfsbpebe5] {
        left: calc(var(--paper-left) + var(--paper-px));
    }




.format-bar[b-adfsbpebe5] {
    gap: 12px;
    padding: 10px;
    border-radius: 12px;
    background: var(--soft);
}

    .format-bar .group[b-adfsbpebe5] {
        gap: 8px;
        flex-wrap: wrap;
    }

.btn.sm[b-adfsbpebe5] {
    padding: .40rem .65rem;
    border-radius: .55rem;
    font-weight: 600;
}



/* Keep the ‘paper’ background behind the iframe */
.preview-box[b-adfsbpebe5] {
    position: relative;
}

#preview[b-adfsbpebe5] {
    position: absolute;
    top: var(--paper-top) !important; /* keep your existing top offset */
    left: var(--paper-left) !important;
    width: var(--paper-px) !important;
    z-index: 2; /* above the sheet, below the rulers */
}
/* The sheet outline sits under the iframe */
.preview_box[b-adfsbpebe5]::before, /* if you still use :before for the sheet */
.preview-box[b-adfsbpebe5]::before {
    content: "";
    position: absolute;
    top: var(--paper-top);
    left: var(--paper-left);
    width: var(--paper-px);
    height: var(--paper-h, 400px);
    border: 1px solid #eef;
    border-radius: 8px;
    background: #fff; /* the paper fill */
    z-index: 1; /* push it behind the iframe */
}


/* Rulers must never cover content; keep them non-interactive and transparent */
.ruler[b-adfsbpebe5] {
    position: absolute;
    pointer-events: none; /* important */
    z-index: 3; /* above iframe */
    background: transparent; /* no white fill */
}

.ruler-x[b-adfsbpebe5] {
    /* keep outside the paper so it doesn’t cover the first text line */
    top: calc(var(--paper-top) - var(--ruler-h));
    left: var(--page-left); /* or var(--paper-left) */
    height: var(--ruler-h);
    width: var( --paper-px );
}

.ruler-y[b-adfsbpebe5] {
    top: var(--paper-top);
    left: calc(var(--paper-left) - var(--ruler-w));
    width: var(--ruler-w);
    height: var(--paper-h, 400px);
}

    .ruler-y.right[b-adfsbpebe5] {
        left: calc(var(--paper-left) + var(--paper-px));
    }



/* Optional: remove the extra white overlay completely */
.preview-box[b-adfsbpebe5]::before {
    display: none;
}


/* ---- FINAL OVERRIDES: keep ticket visible, rulers outside, no overlays ---- */

/* The paper “sheet” pseudo-element must not exist. Force remove. */
.preview-box[b-adfsbpebe5]::before {
    content: none !important;
    display: none !important;
}

/* The iframe is *the* paper. Keep it above backgrounds, below rulers. */
#preview[b-adfsbpebe5] {
    position: absolute !important;
    top: var(--paper-top) !important;
    left: var(--paper-left) !important;
    width: var(--paper-px) !important;
    background: #fff !important;
    border: 0 !important;
    z-index: 10 !important; /* paper */
}

/* Rulers: decorative only, never block text or clicks. */
.ruler[b-adfsbpebe5] {
    position: absolute !important;
    pointer-events: none !important;
    background: transparent !important;
    z-index: 20 !important; /* above paper, still transparent */
}

/* Horizontal ruler sits *above* paper, not overlapping it */
.ruler-x[b-adfsbpebe5] {
    top: calc(var(--paper-top) - 18px) !important; /* 18px tall ruler area */
    left: var(--paper-left) !important;
    height: 18px !important;
    width: var(--paper-px) !important;
}

/* Vertical rulers hug the sheet edges */
.ruler-y[b-adfsbpebe5] {
    top: var(--paper-top) !important;
    left: calc(var(--paper-left) - 18px) !important;
    width: 18px !important;
    height: var(--paper-h, 400px) !important;
}

    .ruler-y.right[b-adfsbpebe5] {
        left: calc(var(--paper-left) + var(--paper-px)) !important;
    }

/* The desk/canvas around the paper—clean white, no gradient, so rulers pop */
.preview-box[b-adfsbpebe5] {
    background: #fff !important;
}


.format-bar .group .btn.sm[b-adfsbpebe5] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}

.format-bar[b-adfsbpebe5] {
    column-gap: 16px;
    row-gap: 8px;
}



/* FINAL: no paper overlay, rulers transparent, correct stacking (scoped) */
.preview-box[b-ucchm158w4][b-adfsbpebe5]::before,
.preview_box[b-ucchm158w4][b-adfsbpebe5]::before { /* include both spellings */
    content: none !important;
    display: none !important;
}

#preview[b-ucchm158w4][b-adfsbpebe5] {
    position: absolute !important;
    top: var(--paper-top) !important;
    left: var(--paper-left) !important;
    width: var(--paper-px) !important;
    background: #fff !important;
    border: 0 !important;
    z-index: 10 !important;
}

.ruler[b-ucchm158w4][b-adfsbpebe5],
.ruler[b-ucchm158w4] *[b-adfsbpebe5] {
    background: transparent !important; /* defeat any earlier background */
    pointer-events: none !important;
    z-index: 20 !important;
}

.ruler-x[b-ucchm158w4][b-adfsbpebe5] {
    top: calc(var(--paper-top) - 18px) !important;
    left: var(--paper-left) !important;
    height: 18px !important;
    width: var(--paper-px) !important;
}

.ruler-y[b-ucchm158w4][b-adfsbpebe5] {
    top: var(--paper-top) !important;
    left: calc(var(--paper-left) - 18px) !important;
    width: 18px !important;
    height: var(--paper-h, 400px) !important;
}

.ruler-y.right[b-ucchm158w4][b-adfsbpebe5] {
    left: calc(var(--paper-left) + var(--paper-px)) !important;
}

.preview-box[b-ucchm158w4][b-adfsbpebe5] {
    background: #fff !important;
}


.toolbox .group.aeat[b-adfsbpebe5] {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px;
    background: #fff;
}

    .toolbox .group.aeat h4[b-adfsbpebe5] {
        margin: 2px 0 8px;
        font-size: .95rem;
        color: var(--ink);
        font-weight: 700;
    }

    .toolbox .group.aeat label[b-adfsbpebe5] {
        color: var(--ink);
    }


/* same column heights */
.toolbox[b-adfsbpebe5],
.editor-pane[b-adfsbpebe5],
.preview-pane[b-adfsbpebe5] {
    height: calc(100vh - var(--toolbar-h) - 24px);
}

/* grid background outside the paper */
.preview-box[b-adfsbpebe5] {
    background: linear-gradient(#e0f2ff 1px, transparent 1px) 0 0/12px 12px, linear-gradient(90deg,#e0f2ff 1px,transparent 1px) 0 0/12px 12px, #fff;
}

/* rulers stay above paper, non-blocking */
.ruler[b-adfsbpebe5] {
    pointer-events: none;
    background: transparent;
    z-index: 3;
}



/* compact card + full-width inputs */
.toolbox .group.aeat[b-adfsbpebe5] {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px;
    background: #fff;
}

    .toolbox .group.aeat .row[b-adfsbpebe5] {
        gap: 8px;
    }

    .toolbox .group.aeat select[b-adfsbpebe5] {
        width: 100%;
        max-width: 100%;
    }

/* pro header */
.toolbox .aeat-title[b-adfsbpebe5] {
    margin: 8px 0 6px;
    text-align: center;
    background: var(--adm-bg-111827);
    color: var(--adm-fgon-ffffff-ffffff);
    padding: 6px 10px;
    border-radius: 10px;
    font-weight: 700;
}

/* =====================================================================
   Dark-mode control surfaces + 44px touch targets (Codex QA).
   Kept HERE (Blazor-scoped — each selector gets a [b-xxx] page attribute)
   instead of the page's global inline <style>, so these generic selectors
   (.toolbar / .btn.icon / .menu .item …) DON'T leak onto the other pages
   that reuse those class names. Admin is always dark (theme.js).
   ===================================================================== */

/* The top toolbar + editor line/col bar were hardcoded white slabs in the
   dark admin shell. (Ticket preview/paper stays white on purpose.) */
:root[data-theme="dark"] .toolbar[b-adfsbpebe5] { background: #1e293b; }
:root[data-theme="dark"] .editor-info[b-adfsbpebe5] { background: #0f172a; color: #cbd5e1; border-color: #334155; }
:root[data-theme="dark"] .format-bar .divider[b-adfsbpebe5] { background: #475569; }

/* Touch targets — floor genuine tap controls to 44px (were ~30-43px,
   sized by padding only). */
.toolbar .btn[b-adfsbpebe5],
.toolbar select[b-adfsbpebe5],
.toolbar input:not([type="checkbox"]):not([type="radio"]):not([type="range"])[b-adfsbpebe5],
.menu .item[b-adfsbpebe5],
.toolbox .tool-btn[b-adfsbpebe5],
.toolbox input[type="text"][b-adfsbpebe5],
.toolbox .group.aeat select[b-adfsbpebe5],
.token-btn[b-adfsbpebe5],
.token-list .btn[b-adfsbpebe5] {
    min-height: 44px;
}
.btn.icon[b-adfsbpebe5] {
    width: 44px;
    height: 44px;
}
/* Centre the label-bearing buttons at the larger height. */
.toolbar .btn[b-adfsbpebe5],
.menu .item[b-adfsbpebe5],
.toolbox .tool-btn[b-adfsbpebe5],
.token-list .btn[b-adfsbpebe5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.menu .item[b-adfsbpebe5],
.toolbox .tool-btn[b-adfsbpebe5] { justify-content: flex-start; }   /* read left-aligned */
/* .token-btn stacks a bold token over a subtitle — COLUMN so the two lines
   don't collapse onto one row, just vertically centred at 44px. */
.token-btn[b-adfsbpebe5] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
/* Zoom slider: enlarge hit area + thumb so it's tappable (was ~18px). */
.toolbar input[type="range"][b-adfsbpebe5] {
    min-height: 44px;
    accent-color: var(--primary);
}
.toolbar input[type="range"][b-adfsbpebe5]::-webkit-slider-thumb { width: 22px; height: 22px; }
.toolbar input[type="range"][b-adfsbpebe5]::-moz-range-thumb { width: 22px; height: 22px; }

/* =====================================================================
   Premium polish (Codex "not 10/10" follow-up). Scoped to this page.
   Pure CSS over the existing markup — groups the flat toolbar into cards,
   lifts the primary action, makes disabled controls read as intentional,
   and unifies control shape. Light + admin-dark both handled.
   ===================================================================== */

/* Group the toolbar's control rows into soft cards so the ~10 controls read
   as panels instead of one undifferentiated field. (The first row — Plantilla
   — and the action row are direct children; the rest are .row blocks.) */
.toolbar > .row[b-adfsbpebe5] {
    background: #f8fafc;
    border: 1px solid #e7ebf0;
    border-radius: 12px;
    padding: 12px 14px;
    row-gap: 10px;
}
:root[data-theme="dark"] .toolbar > .row[b-adfsbpebe5] {
    background: #161f2e;
    border-color: #2c3a4f;
}

/* Crisper labels above each control. */
.toolbar label[b-adfsbpebe5] {
    font-weight: 600;
    letter-spacing: .01em;
}

/* Unify select/input shape + a clear focus ring (was inconsistent radii). */
.toolbar select[b-adfsbpebe5],
.toolbar input:not([type="checkbox"]):not([type="radio"]):not([type="range"])[b-adfsbpebe5] {
    border: 1px solid var(--line);
    border-radius: 10px;
}
.toolbar select:focus-visible[b-adfsbpebe5],
.toolbar input:focus-visible[b-adfsbpebe5] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--adm-sh-2563eb-a0_18);
}

/* Disabled controls (Impresora when fixed by hardware, etc.) read as read-only
   — a dashed border + muted chrome signals "set elsewhere" while keeping any
   real value (e.g. the hardware IP) perfectly legible. No hatch: these often
   carry a genuine value, not an empty/N-A state. */
.toolbar select:disabled[b-adfsbpebe5],
.toolbar input:disabled[b-adfsbpebe5] {
    border-style: dashed;
    cursor: not-allowed;
    opacity: 1;          /* override the UA dim — keep the value readable */
}
:root[data-theme="dark"] .toolbar select:disabled[b-adfsbpebe5],
:root[data-theme="dark"] .toolbar input:disabled[b-adfsbpebe5] {
    border-color: #2c3a4f;
    color: #cbd5e1;
}

/* Primary action (Guardar) should dominate — bolder, with a lift. */
.toolbar .btn.primary[b-adfsbpebe5] {
    font-weight: 700;
    padding-left: 1.4rem;
    padding-right: 1.4rem;
    box-shadow: 0 2px 10px var(--adm-sh-2563eb-a0_28);
}
.toolbar .btn.primary:hover[b-adfsbpebe5] {
    background: #1d4ed8 !important;
    box-shadow: 0 4px 16px rgba(37, 99, 235, .36);
}
/* Secondary toolbar buttons recede slightly so they don't compete. */
.toolbar .btn:not(.primary):not(.warn)[b-adfsbpebe5] {
    font-weight: 500;
}

/* Toolbox action buttons: tile feel — subtle lift on hover/press. */
.toolbox .tool-btn[b-adfsbpebe5] {
    border-radius: 10px;
    font-weight: 600;
    transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.toolbox .tool-btn:hover[b-adfsbpebe5] { box-shadow: 0 3px 12px var(--adm-sh-000000-a0_18); }
.toolbox .tool-btn:active[b-adfsbpebe5] { transform: translateY(1px); }

/* Token rows: gentle hover so the clickable list reads as interactive. */
.token-btn[b-adfsbpebe5] { transition: background .12s ease, border-color .12s ease; }
.token-btn:hover[b-adfsbpebe5] { border-color: var(--primary); }

/* =====================================================================
   Mobile (iPhone ~390px) — config form overflow fix. ADDITIVE, ≤600px
   only; desktop/base untouched. Scoped to this page (Blazor [b-xxx]).
   The "Plantillas de tickets" config form (.toolbar .row) lays its
   fields in flex pairs whose <select>/<input> carry inline min-width
   (220/200/180/160/140/120px). On a 390px screen the "Terminal | Tipo"
   and "Impresora | Papel" pairs sit side-by-side and overrun the right
   edge (Tipo / Papel cut off). Collapse each field to a single column
   and let the controls shrink to the row width.
   ===================================================================== */
@media (max-width: 600px) {
    /* Page root + sticky toolbar can't push past the viewport. */
    .pane-3[b-adfsbpebe5],
    .toolbar[b-adfsbpebe5] { max-width: 100%; }
    .toolbar[b-adfsbpebe5] { overflow-x: hidden; }

    /* The flex field-row already wraps; force every field wrapper to its
       own full-width line and allow flex children to shrink below their
       content (defeats the implicit min-width:auto that was overflowing). */
    .toolbar .row[b-adfsbpebe5] { min-width: 0; }
    .toolbar .row > *[b-adfsbpebe5] {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Override the inline min-width/width on the text selects + inputs so
       they fill the column instead of forcing the row wider than 390px.
       (Checkbox/radio stay intrinsic; the zoom range keeps its own size
       inside its little flex sub-row.) */
    .toolbar select[b-adfsbpebe5],
    .toolbar input:not([type="checkbox"]):not([type="radio"]):not([type="range"])[b-adfsbpebe5] {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* The action block (Guardar / Imprimir prueba / …) is pushed right with
       margin-left:auto on desktop — drop that so it stacks full width and
       its button cluster wraps instead of overrunning. */
    .toolbar .row > div[style*="margin-left:auto"][b-adfsbpebe5] {
        margin-left: 0 !important;
        align-items: stretch;
    }
    .toolbar .row > div[style*="margin-left:auto"] > div[b-adfsbpebe5] { flex-wrap: wrap; }
}

/* =====================================================================
   Mobile / tablet-portrait (≤1024px) — the 3-pane workbench. ADDITIVE;
   desktop (≥1025px) is untouched. Scoped to this page (Blazor [b-xxx]).

   The workbench is a fixed 3-column grid
   (minmax(240px,280px) | 0.9fr | 1.1fr). On a 390px screen the toolbox
   still claims its 240-280px, so the editor and the preview collapse to
   ~25-30px each — unusable. Stack the three panes instead.

   The panes are also sticky slabs sized calc(100vh - var(--toolbar-h) - 24px),
   and tpl.syncToolbarOffset() measures --toolbar-h off the REAL toolbar —
   which on a phone stacks to ~900px tall. The calc then goes negative and
   every pane clamps to 0 height (toolbox/editor/preview simply disappear),
   while the sticky toolbar itself, being taller than the viewport, pins over
   the whole screen. So on small screens the toolbar and the panes go static
   and the panes get real heights.
   ===================================================================== */
@media (max-width: 1024px) {
    /* One column: toolbox → editor → preview, each at full width. */
    .pane-3[b-adfsbpebe5] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Toolbar is taller than the viewport once stacked — never pin it. */
    .toolbar[b-adfsbpebe5] {
        position: static;
    }

    /* Un-stick the panes and drop the 100vh-minus-toolbar heights. */
    .toolbox[b-adfsbpebe5],
    .editor-pane[b-adfsbpebe5],
    .preview-pane[b-adfsbpebe5] {
        position: static;
        height: auto;
        max-height: none;
    }

    /* .editor-host is height:calc(100% - 36px) of a pane that is now auto —
       that resolves to 0 and Monaco would render blank. Give it a real
       height (AutomaticLayout=true makes Monaco re-layout into it). */
    .editor-host[b-adfsbpebe5] {
        height: 380px;
    }

    /* The shared mobile layer clamps every .admin-content iframe to
       max-width:100%. #preview is the ticket "paper": its width IS the paper
       width (--paper-px = mm × zoom, set inline by tpl.updatePreviewSizing) and
       it is *meant* to be wider than its box when zoomed — .preview-box is the
       scroll container for it. Clamping squashes the paper and breaks zoom, so
       opt this one iframe out. It still can't reach the document: .preview-box
       scrolls it and .preview-pane is overflow:hidden. */
    #preview[b-adfsbpebe5] {
        max-width: none;
    }

    /* Status line (previewing / overrun warning / zoom) is a nowrap flex row. */
    .statusbar[b-adfsbpebe5] {
        flex-wrap: wrap;
    }
}
/* /Pages/Admin/Tips.razor.rz.scp.css */
.tips-container[b-lykmvtouli] { padding: 1.5rem; }
.page-header[b-lykmvtouli] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.page-header h1[b-lykmvtouli] { font-size: 1.5rem; color: var(--adm-fg-f1f5f9); margin: 0; }
.subtitle[b-lykmvtouli] { color: var(--adm-fg-94a3b8); font-size: 0.875rem; margin-top: 0.25rem; }
.tab-bar[b-lykmvtouli] { display: flex; gap: 0; margin-bottom: 1.5rem; border-bottom: 1px solid var(--adm-bd-334155); }
.tab[b-lykmvtouli] { padding: 0.75rem 1.5rem; background: none; border: none; color: var(--adm-fg-94a3b8); font-size: 0.875rem; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s; }
.tab.active[b-lykmvtouli] { color: var(--adm-fg-3b82f6); border-bottom-color: var(--adm-bd-3b82f6); }
.tab:hover[b-lykmvtouli] { color: var(--adm-fg-e2e8f0); }
.btn[b-lykmvtouli] { padding: 0.5rem 1rem; border-radius: 0.375rem; font-size: 0.875rem; cursor: pointer; border: none; transition: all 0.15s; }
.btn.primary[b-lykmvtouli] { background: #3b82f6; color: white; }
.btn.primary:hover[b-lykmvtouli] { background: #2563eb; }
.btn.outline[b-lykmvtouli] { background: transparent; border: 1px solid var(--adm-bd-334155); color: var(--adm-fg-e2e8f0); }
.btn.outline:hover[b-lykmvtouli] { border-color: var(--adm-bd-475569); }
.btn.danger-outline[b-lykmvtouli] { background: transparent; border: 1px solid var(--adm-bd-ef4444); color: var(--adm-fg-ef4444); }
.btn.sm[b-lykmvtouli] { font-size: 0.75rem; padding: 0.25rem 0.5rem; }
.btn:disabled[b-lykmvtouli] { opacity: 0.5; cursor: not-allowed; }
.btn-icon[b-lykmvtouli] { background: none; border: none; cursor: pointer; padding: 0.25rem; }
.btn-icon.danger[b-lykmvtouli] { color: var(--adm-fg-ef4444); }
.pools-grid[b-lykmvtouli] { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 1rem; }
.pool-card[b-lykmvtouli] { background: var(--adm-bg-1e293b); border: 1px solid var(--adm-bdon-ffffff-334155); border-radius: 0.5rem; padding: 1.25rem; }
.pool-card.inactive[b-lykmvtouli] { opacity: 0.6; }
.pool-header[b-lykmvtouli] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.pool-header h3[b-lykmvtouli] { color: var(--adm-fg-f1f5f9); margin: 0; font-size: 1rem; }
.badge[b-lykmvtouli] { padding: 0.2rem 0.5rem; border-radius: 0.25rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; }
.badge.active[b-lykmvtouli] { background: var(--adm-bg-22c55e-a0_15); color: var(--adm-fgon-d8f2e4-22c55e); }
.badge.inactive[b-lykmvtouli] { background: var(--adm-bg-94a3b8-a0_15); color: var(--adm-fgon-e2e6eb-94a3b8); }
.pool-info[b-lykmvtouli] { margin-bottom: 0.75rem; }
.detail-row[b-lykmvtouli] { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--adm-fg-e2e8f0); padding: 0.15rem 0; }
.detail-row .label[b-lykmvtouli] { color: var(--adm-fg-94a3b8); }
.pool-members[b-lykmvtouli] { margin-bottom: 0.75rem; padding: 0.5rem; background: var(--adm-bg-0f172a); border-radius: 0.375rem; }
.member-row[b-lykmvtouli] { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: var(--adm-fg-e2e8f0); padding: 0.25rem 0; }
.points[b-lykmvtouli] { color: var(--adm-fg-f59e0b); font-weight: 600; }
.pool-actions[b-lykmvtouli] { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.form-input[b-lykmvtouli] { background: var(--adm-bg-0f172a); border: 1px solid var(--adm-bdon-f8fafc-334155); color: var(--adm-fgon-f8fafc-e2e8f0); padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem; width: 100%; box-sizing: border-box; }
.form-input:focus[b-lykmvtouli] { border-color: var(--adm-bdon-f8fafc-3b82f6); outline: none; }
.table-wrapper[b-lykmvtouli] { overflow-x: auto; background: var(--adm-bg-1e293b); border-radius: 0.5rem; border: 1px solid var(--adm-bdon-ffffff-334155); }
.data-table[b-lykmvtouli] { width: 100%; border-collapse: collapse; }
.data-table th[b-lykmvtouli] { padding: 0.75rem 1rem; text-align: left; font-size: 0.75rem; color: var(--adm-fg-94a3b8); text-transform: uppercase; border-bottom: 1px solid var(--adm-bd-334155); }
.data-table td[b-lykmvtouli] { padding: 0.75rem 1rem; font-size: 0.875rem; color: var(--adm-fg-e2e8f0); border-bottom: 1px solid var(--adm-bd-1e293b); }
.data-table tbody tr[b-lykmvtouli] { cursor: pointer; }
.data-table tbody tr:hover[b-lykmvtouli] { background: var(--adm-bg-334155); }
.amount[b-lykmvtouli] { font-weight: 600; color: var(--adm-fg-22c55e); }
.detail-row-expand td[b-lykmvtouli] { padding: 0 1rem 1rem; background: var(--adm-bg-0f172a); }
.dist-lines[b-lykmvtouli] { display: flex; flex-direction: column; gap: 0.25rem; }
.dist-line[b-lykmvtouli] { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--adm-fg-e2e8f0); padding: 0.25rem 0.5rem; }
.modal-overlay[b-lykmvtouli] { position: fixed; inset: 0; background: var(--adm-scrim-000000-a0_6); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal[b-lykmvtouli] { background: var(--adm-bg-1e293b); border: 1px solid var(--adm-bdon-ffffff-334155); border-radius: 0.75rem; width: 90%; max-width: 480px; }
.modal-header[b-lykmvtouli] { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--adm-bd-334155); }
.modal-header h2[b-lykmvtouli] { font-size: 1.1rem; color: var(--adm-fg-f1f5f9); margin: 0; }
.close-btn[b-lykmvtouli] { background: none; border: none; color: var(--adm-fg-94a3b8); font-size: 1.2rem; cursor: pointer; }
.modal-body[b-lykmvtouli] { padding: 1.25rem; }
.form-group[b-lykmvtouli] { margin-bottom: 1rem; }
.form-group label[b-lykmvtouli] { display: block; font-size: 0.8rem; color: var(--adm-fg-94a3b8); margin-bottom: 0.25rem; }
.form-row[b-lykmvtouli] { display: flex; gap: 1rem; }
.form-row .form-group[b-lykmvtouli] { flex: 1; }
.checkbox-label[b-lykmvtouli] { display: flex; align-items: center; gap: 0.5rem; color: var(--adm-fg-e2e8f0); font-size: 0.875rem; }
.modal-footer[b-lykmvtouli] { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 1rem 1.25rem; border-top: 1px solid var(--adm-bd-334155); }
.loading-state[b-lykmvtouli] { display: flex; justify-content: center; padding: 3rem; }
.spinner[b-lykmvtouli] { width: 2rem; height: 2rem; border: 3px solid var(--adm-bd-334155); border-top: 3px solid var(--adm-bd-3b82f6); border-radius: 50%; animation: spin-b-lykmvtouli 0.8s linear infinite; }
@keyframes spin-b-lykmvtouli { to { transform: rotate(360deg); } }
.empty-state[b-lykmvtouli] { text-align: center; padding: 3rem; color: var(--adm-fg-94a3b8); }
.empty-state h2[b-lykmvtouli] { color: var(--adm-fg-e2e8f0); margin-bottom: 0.5rem; }

/* ===== 44px touch targets (Codex QA) ===== */
/* Controls were ~36-39px (sized by padding only) — floor genuine tap targets
   to 44px for admin/tablet. inline-flex centres labels at the larger height. */
.btn[b-lykmvtouli],
.form-input[b-lykmvtouli],
.tab[b-lykmvtouli] {
    min-height: 44px;
}
.btn[b-lykmvtouli] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Icon × buttons (modal close, member remove) → 44×44 tap box. */
.close-btn[b-lykmvtouli],
.btn-icon[b-lykmvtouli] {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* The member remove × sits in a tight row — keep it from stretching the row. */
.member-row .btn-icon[b-lykmvtouli] { flex-shrink: 0; }

/* ===== Phones =====
   Page-specific overflow the shared admin-mobile.css layer can't know about
   (it handles .page-header / .tab-bar / .form-row / touch targets already).
   Everything below is inside a max-width query, so desktop is untouched. */
@media (max-width: 640px) {
    /* The page adds 24px of its own gutter on top of .admin-content's — 36px a
       side on a 390px phone. Let the shell own the horizontal padding. */
    .tips-container[b-lykmvtouli] { padding: 1rem 0; }

    /* auto-fill minmax(360px, 1fr) forces a 360px-wide track, more than the
       ~366px of usable phone width once padding is taken — the pool cards ran
       off the right edge. One card per row instead. */
    .pools-grid[b-lykmvtouli] { grid-template-columns: 1fr; }

    /* space-between rows: let the name shrink/wrap rather than widen the card. */
    .pool-header h3[b-lykmvtouli],
    .member-row > span:first-child[b-lykmvtouli],
    .dist-line > span:first-child[b-lykmvtouli] { min-width: 0; overflow-wrap: anywhere; }
    .badge[b-lykmvtouli] { flex-shrink: 0; }

    /* Modals: fit the viewport and scroll the body, instead of the taller forms
       (Distribuir has 4 fields) spilling out of a vertically-centred box. */
    .modal-overlay[b-lykmvtouli] { padding: 1rem; box-sizing: border-box; }
    .modal[b-lykmvtouli] { width: 100%; max-height: 100%; display: flex; flex-direction: column; }
    .modal-header[b-lykmvtouli], .modal-footer[b-lykmvtouli] { flex-shrink: 0; }
    .modal-body[b-lykmvtouli] { overflow-y: auto; }
}
/* /Pages/Admin/UserPermissions.razor.rz.scp.css */
/* User Permissions Page - Dark Theme */
h3[b-utug3c5dwk] {
    color: var(--adm-fg-f1f5f9);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

/* Loading state */
div:only-child[b-utug3c5dwk] {
    color: var(--adm-fg-94a3b8);
    padding: 2rem;
    text-align: center;
}

/* Table styling */
table[b-utug3c5dwk] {
    width: 100%;
    border-collapse: collapse;
    background: var(--adm-bg-1e293b);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--adm-bdon-ffffff-334155);
}

thead tr[b-utug3c5dwk] {
    background: var(--adm-bg-0f172a);
}

th[b-utug3c5dwk] {
    text-align: left;
    padding: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--adm-fg-94a3b8);
    border-bottom: 1px solid var(--adm-bd-334155);
}

td[b-utug3c5dwk] {
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    color: var(--adm-fg-e2e8f0);
    border-bottom: 1px solid var(--adm-bd-334155);
}

tbody tr:hover[b-utug3c5dwk] {
    background: var(--adm-bg-334155-a0_5);
}

tbody tr:last-child td[b-utug3c5dwk] {
    border-bottom: none;
}

/* Checkbox styling */
input[type="checkbox"][b-utug3c5dwk] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--adm-fg-3b82f6);
}

/* Empty state when no users */
.empty-state[b-utug3c5dwk] {
    padding: 3rem;
    text-align: center;
    color: var(--adm-fg-94a3b8);
}

/* Responsive */
@media (max-width: 768px) {
    table[b-utug3c5dwk] {
        display: block;
        overflow-x: auto;
    }

    th[b-utug3c5dwk], td[b-utug3c5dwk] {
        padding: 0.75rem 0.5rem;
        font-size: 0.8125rem;
    }
}

/* ---- Phone (≤600px): make the users table reachable ----
   At ~390px the 6-column table is wider than the viewport, so the
   EMAIL column was clipped and Rol/Estado/Anular/Acciones sat off-screen
   with no way to reach them. Wrap the table in a horizontal-scroll
   container so the user can swipe to the hidden columns. The table sizes
   to its content (min-width) so it overflows the wrapper and the
   wrapper's own scroll engages instead of the columns being crushed.
   Additive, ≤600px only — desktop/base untouched. */
@media (max-width: 600px) {
    /* Don't let the page constrain/clip the scroll container. Also drop the
       page's own 24px side gutter: the admin shell already supplies one, and
       doubling it burns ~13% of a 360px screen that the table needs. */
    .permissions-page[b-utug3c5dwk] {
        max-width: 100%;
        padding: 1rem 0;
    }

    /* The scroll viewport: swipeable, momentum scrolling on iOS. */
    .table-scroll[b-utug3c5dwk] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* The table draws its own rounded border; let it bleed to edge. */
        margin: 0;
        /* Subtle hint that there's more to the right. */
        scrollbar-width: thin;
    }

    /* Override the 768px rule above: a display:block table with no width
       just crushes columns. Keep it a real table and size to content so
       it overflows the .table-scroll wrapper (which then scrolls). */
    .table-scroll table[b-utug3c5dwk] {
        display: table;
        overflow: visible;
        width: max-content;
        min-width: 100%;
    }

    /* Keep the first columns readable while scrolling. */
    .permissions-table th[b-utug3c5dwk],
    .permissions-table td[b-utug3c5dwk] {
        white-space: nowrap;
    }

    /* Header subtitle was clipped on the right — let it wrap. */
    .page-header p[b-utug3c5dwk] {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* The toast stack is pinned right:1.25rem with max-width:380px and each
       toast has min-width:280px. On a 390px phone a long toast ("Usuario
       Maria desactivado" + Deshacer + ×) reaches that 380px cap, so the
       stack's left edge lands at -10px and the icon is clipped. It also sat
       directly on the support FAB (fixed bottom-right, 56px) and — being
       z-index 10040 vs the FAB's 900 — swallowed its taps. Inset the stack
       on both sides and lift it clear of the FAB. */
    .toast-stack[b-utug3c5dwk] {
        left: 0.75rem;
        right: 0.75rem;
        bottom: 5.25rem; /* 12px gutter + 56px FAB + 16px breathing room */
        max-width: none;
    }

    .toast[b-utug3c5dwk] {
        min-width: 0;
    }
}
/* /Pages/Admin/VerifactuSetupPanel.razor.rz.scp.css */
/* VERI*FACTU setup panel. Blazor scopes each component's CSS to its own elements, so the SuperAdmin base rules are
   re-declared here with the same names and the same admin colour variables (as RestaurantDetailModal.razor.css does). */

.sa-card[b-778qursce0] {
    background: var(--adm-bg-16161e);
    border: 1px solid var(--adm-bdon-ffffff-2a2a3a);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.sa-card h3[b-778qursce0] { margin: 0 0 0.25rem; font-size: 1.125rem; font-weight: 600; }

.sa-card h4[b-778qursce0] { margin: 1.25rem 0 0.5rem; font-size: 0.9375rem; font-weight: 600; color: var(--adm-fgon-ffffff-e4e4e7); }

.sa-hint[b-778qursce0] { color: var(--adm-fg-71717a); font-size: 0.8125rem; margin: 0 0 0.75rem; }

.sa-input[b-778qursce0] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--adm-bg-0a0a0f);
    border: 1px solid var(--adm-bdon-ffffff-2a2a3a);
    border-radius: 8px;
    color: var(--adm-fgon-ffffff-e4e4e7);
    font-size: 0.875rem;
    outline: none;
    box-sizing: border-box;
}

.sa-input:focus[b-778qursce0] { border-color: var(--adm-bdon-ffffff-6366f1); }

.sa-btn[b-778qursce0] {
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.sa-btn.small[b-778qursce0] { padding: 0.3rem 0.625rem; font-size: 0.75rem; }
.sa-btn.primary[b-778qursce0] { background: #6366f1; color: #fff; border-color: #6366f1; }
.sa-btn.primary:hover[b-778qursce0] { background: #4f46e5; }
.sa-btn.outline[b-778qursce0] { background: transparent; color: var(--adm-fg-a1a1aa); border-color: var(--adm-bd-2a2a3a); }
.sa-btn.outline:hover[b-778qursce0] { background: var(--adm-bg-1e1e2a); color: var(--adm-fgon-ffffff-e4e4e7); }
.sa-btn.danger[b-778qursce0] { background: var(--adm-bg-ef4444-a0_15); color: var(--adm-fgon-f7dfe0-ef4444); border-color: var(--adm-bd-ef4444-a0_3); }
.sa-btn.danger:hover[b-778qursce0] { background: var(--adm-bg-ef4444-a0_25); }
.sa-btn:disabled[b-778qursce0] { opacity: 0.5; cursor: not-allowed; }

.vf-form[b-778qursce0] { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.5rem; align-items: center; margin: 0.5rem 0 1rem; }
.vf-row[b-778qursce0] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.375rem 0; font-size: 0.8125rem; color: var(--adm-fg-a1a1aa); }
.vf-actions[b-778qursce0] { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }
.vf-inst[b-778qursce0] { border: 1px solid var(--adm-bd-2a2a3a); border-radius: 10px; padding: 0.75rem 1rem; margin-bottom: 0.75rem; }
.vf-check[b-778qursce0] { margin: 0.5rem 0; display: grid; gap: 0.5rem; }
.vf-check ul[b-778qursce0] { margin: 0; padding-left: 1.25rem; color: var(--adm-fgon-f7dfe0-ef4444); font-size: 0.8125rem; }
.vf-note[b-778qursce0] { max-width: 18rem; }
.vf-code[b-778qursce0] { max-width: 14rem; }
.vf-reason[b-778qursce0] { min-height: 3.5rem; grid-column: 1 / -1; resize: vertical; font-family: inherit; }
.vf-tick[b-778qursce0] { display: flex; gap: 0.5rem; align-items: center; font-size: 0.8125rem; color: var(--adm-fg-a1a1aa); }

.vf-badge[b-778qursce0] { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 700; }
.vf-badge.ok[b-778qursce0] { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.vf-badge.warn[b-778qursce0] { background: rgba(234, 179, 8, 0.15); color: #eab308; }
.vf-badge.off[b-778qursce0] { background: var(--adm-bg-1e1e2a); color: var(--adm-fg-71717a); }

.vf-warn[b-778qursce0] { color: #eab308; font-size: 0.8125rem; }
.vf-ok[b-778qursce0] { color: #22c55e; font-size: 0.8125rem; }
.vf-status[b-778qursce0] { margin-top: 0.75rem; font-size: 0.8125rem; color: #22c55e; }
.vf-status.error[b-778qursce0] { color: var(--adm-fgon-f7dfe0-ef4444); }
/* /Pages/Admin/WaitlistSettings.razor.rz.scp.css */
.settings-page[b-6uppcw9poy] {
    min-height: 100vh;
    background: var(--adm-bg-0f172a);
}

.settings-header[b-6uppcw9poy] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--adm-bg-1e293b);
    border-bottom: 1px solid var(--adm-bdon-ffffff-334155);
    position: sticky;
    top: 0;
    z-index: 100;
}

.back-btn[b-6uppcw9poy] {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--adm-bg-334155);
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--adm-fgon-f1f5f9-e2e8f0);
}

.settings-header h1[b-6uppcw9poy] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: var(--adm-fgon-ffffff-f1f5f9);
}

.loading[b-6uppcw9poy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 12px;
    color: var(--adm-fg-94a3b8);
}

.spinner[b-6uppcw9poy] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--adm-bd-334155);
    border-top-color: var(--adm-bd-10b981);
    border-radius: 50%;
    animation: spin-b-6uppcw9poy 1s linear infinite;
}

.spinner-small[b-6uppcw9poy] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--adm-bd-ffffff-a0_3);
    border-top-color: var(--adm-bd-ffffff);
    border-radius: 50%;
    animation: spin-b-6uppcw9poy 0.8s linear infinite;
    display: inline-block;
}

@keyframes spin-b-6uppcw9poy {
    to { transform: rotate(360deg); }
}

.error-message[b-6uppcw9poy] {
    padding: 20px;
    margin: 20px;
    background: var(--adm-bg-dc2626-a0_15);
    border: 1px solid var(--adm-bdon-f4dadc-dc2626);
    border-radius: 12px;
    color: var(--adm-fgon-f4dadc-f87171);
    text-align: center;
}

.error-message button[b-6uppcw9poy] {
    margin-top: 12px;
    padding: 8px 16px;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.settings-content[b-6uppcw9poy] {
    padding: 16px;
    padding-bottom: 100px;
}

/* Section */
.setting-section[b-6uppcw9poy] {
    margin-bottom: 24px;
}

.section-title[b-6uppcw9poy] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--adm-fg-94a3b8);
    margin: 0 0 12px 4px;
}

/* Cards */
.setting-card[b-6uppcw9poy] {
    background: var(--adm-bg-1e293b);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 4px var(--adm-sh-000000-a0_2);
    border: 1px solid var(--adm-bdon-ffffff-334155);
}

.toggle-card[b-6uppcw9poy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.setting-info h3[b-6uppcw9poy] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--adm-fg-f1f5f9);
}

.setting-info p[b-6uppcw9poy] {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: var(--adm-fg-94a3b8);
}

/* Toggle Switch */
.switch[b-6uppcw9poy] {
    position: relative;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

.switch input[b-6uppcw9poy] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-6uppcw9poy] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--adm-bg-475569);
    border-radius: 28px;
    transition: 0.3s;
}

.slider[b-6uppcw9poy]:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.switch input:checked + .slider[b-6uppcw9poy] {
    background-color: #10b981;
}

.switch input:checked + .slider[b-6uppcw9poy]:before {
    transform: translateX(24px);
}

/* Form Fields */
.field-label[b-6uppcw9poy] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--adm-fg-e2e8f0);
    margin-bottom: 8px;
}

.field-hint[b-6uppcw9poy] {
    font-size: 0.8rem;
    color: var(--adm-fg-94a3b8);
    margin: 8px 0 0;
}

/* Input with Suffix */
.input-with-suffix[b-6uppcw9poy] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-with-suffix input[b-6uppcw9poy] {
    width: 100px;
    padding: 10px 12px;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    font-size: 1rem;
    color: var(--adm-fgon-f8fafc-e2e8f0);
    background: var(--adm-bg-0f172a);
}

.input-with-suffix input:focus[b-6uppcw9poy] {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-10b981);
}

.input-with-suffix .suffix[b-6uppcw9poy] {
    font-size: 0.9rem;
    color: var(--adm-fg-94a3b8);
}

/* Text Inputs */
.setting-card input[type="text"][b-6uppcw9poy],
.setting-card input[type="tel"][b-6uppcw9poy],
.setting-card input[type="password"][b-6uppcw9poy] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--adm-fgon-f8fafc-e2e8f0);
    background: var(--adm-bg-0f172a);
}

.setting-card input:focus[b-6uppcw9poy] {
    outline: none;
    border-color: var(--adm-bdon-ffffff-10b981);
}

/* Textarea */
textarea[b-6uppcw9poy] {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--adm-bdon-f8fafc-334155);
    border-radius: 8px;
    font-size: 0.95rem;
    resize: vertical;
    font-family: inherit;
    background: var(--adm-bg-0f172a);
    color: var(--adm-fgon-f8fafc-e2e8f0);
}

textarea:focus[b-6uppcw9poy] {
    outline: none;
    border-color: var(--adm-bdon-f8fafc-10b981);
}

/* Twilio Notice */
.twilio-notice[b-6uppcw9poy] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--adm-bg-f59e0b-a0_15);
    border: 1px solid var(--adm-bdon-f8ecd8-f59e0b);
    border-radius: 10px;
    font-size: 0.85rem;
    color: var(--adm-fgon-f8ecd8-fbbf24);
}

.notice-icon[b-6uppcw9poy] {
    font-size: 1rem;
}

/* Test Button */
.test-btn[b-6uppcw9poy] {
    width: 100%;
    padding: 12px;
    background: var(--adm-bg-334155);
    color: var(--adm-fgon-f1f5f9-e2e8f0);
    border: 1px solid var(--adm-bdon-f1f5f9-475569);
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.test-btn:hover[b-6uppcw9poy] {
    background: var(--adm-bghov-f1f5f9-475569);
}

.test-btn:disabled[b-6uppcw9poy] {
    opacity: 0.7;
    cursor: not-allowed;
}

.test-result[b-6uppcw9poy] {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    text-align: center;
}

.test-result.success[b-6uppcw9poy] {
    background: var(--adm-bg-22c55e-a0_15);
    color: var(--adm-fgon-d8f2e4-4ade80);
}

.test-result.error[b-6uppcw9poy] {
    background: var(--adm-bg-dc2626-a0_15);
    color: var(--adm-fgon-f4dadc-f87171);
}

/* Link Card */
.link-card[b-6uppcw9poy] {
    background: var(--adm-bg-0f172a);
    border: 1px dashed var(--adm-bdon-f8fafc-334155);
}

.link-preview[b-6uppcw9poy] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--adm-bg-1e293b);
    border-radius: 8px;
    border: 1px solid var(--adm-bdon-ffffff-334155);
}

.link-url[b-6uppcw9poy] {
    flex: 1;
    font-size: 0.85rem;
    color: var(--adm-fg-4ade80);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.copy-btn[b-6uppcw9poy] {
    padding: 6px 14px;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
}

/* Save Section */
.save-section[b-6uppcw9poy] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 20px;
    background: var(--adm-bg-1e293b);
    border-top: 1px solid var(--adm-bdon-ffffff-334155);
    display: flex;
    align-items: center;
    gap: 12px;
}

.save-btn[b-6uppcw9poy] {
    flex: 1;
    padding: 14px;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.save-btn:disabled[b-6uppcw9poy] {
    opacity: 0.7;
    cursor: not-allowed;
}

.save-success[b-6uppcw9poy] {
    color: var(--adm-fg-4ade80);
    font-size: 0.9rem;
    font-weight: 500;
}

/* Mobile / tablet drawer width: the AdminLayout sidebar becomes an overlay
   drawer (z-index 100) with a dim backdrop (z-index 90), and both slide over
   this page. .settings-header is sticky with z-index:100 and sits later in the
   DOM, so on a tie it painted ON TOP of the open drawer. It only needs to
   out-rank the page content it sticks over, so drop it under both. */
@media (max-width: 1024px) {
    .settings-header[b-6uppcw9poy] {
        z-index: 10;
    }
}

/* Phone */
@media (max-width: 640px) {
    /* Keep the back button a square 44px touch target (the global layer only
       raises min-height, which would leave it 36px wide). */
    .back-btn[b-6uppcw9poy] {
        width: 44px;
        height: 44px;
    }

    /* Flex child: let the label/description shrink rather than widen the row. */
    .setting-info[b-6uppcw9poy] {
        min-width: 0;
    }

    /* The public URL is nowrap + ellipsis, which hides most of it at phone
       width. Stack it above the copy button and let it wrap. */
    .link-preview[b-6uppcw9poy] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .link-url[b-6uppcw9poy] {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
    }
}
/* /Pages/Admin/Website.razor.rz.scp.css */
/* Mi web (free website). Scoped; light-first with :root[data-theme="dark"] overrides,
   like Asistentes IA. */

.mw-page[b-xa2wjzwtx0] { max-width: 820px; margin: 0 auto; padding: 1rem 1rem 6rem; }

.mw-header[b-xa2wjzwtx0] { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.mw-header h1[b-xa2wjzwtx0] { font-size: 1.5rem; font-weight: 700; margin: 0; color: #111827; }
.mw-header .bi-globe2[b-xa2wjzwtx0] { color: #0f766e; margin-right: .35rem; }
.mw-back[b-xa2wjzwtx0] {
    border: 1px solid #e5e7eb; background: #fff; border-radius: 10px;
    width: 44px; height: 44px; font-size: 1.1rem; cursor: pointer; color: #374151; flex: 0 0 auto;
}
.mw-back:hover[b-xa2wjzwtx0] { background: #f9fafb; }
.mw-pill[b-xa2wjzwtx0] {
    margin-left: auto; font-size: .78rem; font-weight: 700; padding: .25rem .65rem; border-radius: 999px;
    background: #f3f4f6; color: #4b5563; white-space: nowrap;
}
.mw-pill.on[b-xa2wjzwtx0] { background: #dcfce7; color: #166534; }

.mw-loading[b-xa2wjzwtx0], .mw-error[b-xa2wjzwtx0] { display: flex; align-items: center; gap: .75rem; padding: 2rem; color: #6b7280; }
.mw-error button[b-xa2wjzwtx0] { border: 1px solid #d1d5db; background: #fff; border-radius: 8px; padding: .35rem .75rem; cursor: pointer; }
.mw-spinner[b-xa2wjzwtx0] {
    width: 20px; height: 20px; border: 3px solid #e5e7eb; border-top-color: #0f766e;
    border-radius: 50%; animation: mw-spin-b-xa2wjzwtx0 .8s linear infinite;
}
@keyframes mw-spin-b-xa2wjzwtx0 { to { transform: rotate(360deg); } }

.mw-card[b-xa2wjzwtx0] { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 1.1rem 1.15rem; margin-bottom: 1rem; }
.mw-card h2[b-xa2wjzwtx0] { font-size: 1rem; font-weight: 700; margin: 0 0 .5rem; color: #111827; }
.mw-card-head[b-xa2wjzwtx0] { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; }
.mw-card-head h2[b-xa2wjzwtx0] { margin: 0; }
.mw-intro h2[b-xa2wjzwtx0] { font-size: 1.1rem; }
.mw-intro p[b-xa2wjzwtx0] { font-size: .92rem; color: #374151; line-height: 1.5; margin: 0; }
.mw-ready[b-xa2wjzwtx0] { border-color: #99f6e4; background: #f0fdfa; }
.mw-ready .mw-btn[b-xa2wjzwtx0] { margin-top: .85rem; }
.mw-soon[b-xa2wjzwtx0] { border-style: dashed; }

.mw-sub[b-xa2wjzwtx0] { font-size: .88rem; color: #6b7280; line-height: 1.45; margin: 0 0 .75rem; }
.mw-meta[b-xa2wjzwtx0] { font-size: .8rem; color: #6b7280; margin: .35rem 0 0; }
.mw-meta.mw-unpublished[b-xa2wjzwtx0] { color: #b45309; }
.mw-note[b-xa2wjzwtx0] { font-size: .86rem; color: #0f766e; background: #f0fdfa; border: 1px solid #99f6e4; border-radius: 8px; padding: .5rem .7rem; margin: 0 0 .75rem; }
.mw-banner[b-xa2wjzwtx0] { font-size: .88rem; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: .7rem .9rem; margin-bottom: 1rem; }

.mw-field[b-xa2wjzwtx0] { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .75rem; font-size: .85rem; color: #374151; font-weight: 600; }
.mw-field input[b-xa2wjzwtx0], .mw-field textarea[b-xa2wjzwtx0] {
    font: inherit; font-weight: 400; font-size: .95rem; color: #111827; background: #fff;
    border: 1px solid #d1d5db; border-radius: 8px; padding: .55rem .7rem; min-height: 44px; width: 100%;
}
.mw-field textarea[b-xa2wjzwtx0] { resize: vertical; line-height: 1.45; }
.mw-field input:focus[b-xa2wjzwtx0], .mw-field textarea:focus[b-xa2wjzwtx0] { outline: 2px solid #5eead4; outline-offset: 1px; border-color: #14b8a6; }
.mw-grid[b-xa2wjzwtx0] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .9rem; }
.mw-wide[b-xa2wjzwtx0] { grid-column: 1 / -1; }

.mw-btn[b-xa2wjzwtx0] {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    min-height: 44px; padding: 0 1rem; border-radius: 8px; font-weight: 600; font-size: .88rem;
    border: 1px solid #d1d5db; background: #fff; color: #111827; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.mw-btn:hover[b-xa2wjzwtx0] { background: #f9fafb; }
.mw-btn:disabled[b-xa2wjzwtx0] { opacity: .55; cursor: default; }
.mw-ai[b-xa2wjzwtx0] { border-color: #99f6e4; background: #f0fdfa; color: #0f766e; }
.mw-primary[b-xa2wjzwtx0] { background: #0f766e; border-color: #0f766e; color: #fff; }
.mw-primary:hover[b-xa2wjzwtx0] { background: #115e59; }
.mw-link-danger[b-xa2wjzwtx0] { margin-top: .75rem; background: none; border: 0; padding: 0; color: #b91c1c; font-weight: 600; font-size: .85rem; cursor: pointer; text-decoration: underline; }
.mw-link-danger:disabled[b-xa2wjzwtx0] { opacity: .5; cursor: default; }

.mw-url[b-xa2wjzwtx0] { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.mw-url code[b-xa2wjzwtx0] {
    flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere;
    background: #f3f4f6; border-radius: 8px; padding: .6rem .75rem; font-size: .9rem; color: #111827;
}

.mw-row[b-xa2wjzwtx0] { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.mw-toggles[b-xa2wjzwtx0] { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-bottom: .6rem; }
.mw-switch[b-xa2wjzwtx0] { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: #374151; cursor: pointer; min-height: 32px; }
.mw-switch input[b-xa2wjzwtx0] { width: 18px; height: 18px; accent-color: #0f766e; }

.mw-days[b-xa2wjzwtx0] { display: flex; flex-direction: column; margin-bottom: .75rem; }
.mw-day[b-xa2wjzwtx0] { display: flex; align-items: flex-start; gap: .75rem; padding: .55rem 0; border-top: 1px solid #f3f4f6; }
.mw-day:first-child[b-xa2wjzwtx0] { border-top: 0; }
.mw-day-name[b-xa2wjzwtx0] { width: 92px; flex: 0 0 auto; font-weight: 600; font-size: .9rem; color: #111827; padding-top: .55rem; }
.mw-shifts[b-xa2wjzwtx0] { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; }
.mw-shift[b-xa2wjzwtx0] { display: inline-flex; align-items: center; gap: .3rem; }
.mw-shift input[b-xa2wjzwtx0] { font: inherit; font-size: .9rem; border: 1px solid #d1d5db; border-radius: 8px; padding: .4rem .45rem; min-height: 40px; color: #111827; background: #fff; }
.mw-closed[b-xa2wjzwtx0] { font-size: .88rem; color: #9ca3af; padding: .5rem 0; }
.mw-x[b-xa2wjzwtx0] { width: 32px; height: 32px; border-radius: 8px; border: 1px solid #fecaca; background: #fff; color: #b91c1c; cursor: pointer; font-size: 1rem; line-height: 1; }
.mw-add[b-xa2wjzwtx0] { min-height: 36px; padding: 0 .7rem; border-radius: 8px; border: 1px dashed #9ca3af; background: transparent; color: #374151; cursor: pointer; font-size: .85rem; }

.mw-cats[b-xa2wjzwtx0] { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .35rem .9rem; }
.mw-cat[b-xa2wjzwtx0] { display: flex; align-items: center; gap: .5rem; min-height: 36px; font-size: .9rem; color: #111827; cursor: pointer; }
.mw-cat input[b-xa2wjzwtx0] { width: 18px; height: 18px; accent-color: #0f766e; flex: 0 0 auto; }
.mw-cat-name[b-xa2wjzwtx0] { overflow-wrap: anywhere; }
.mw-cat .mw-meta[b-xa2wjzwtx0] { margin: 0 0 0 auto; white-space: nowrap; }

.mw-themes[b-xa2wjzwtx0] { display: flex; flex-wrap: wrap; gap: .6rem; }
.mw-theme[b-xa2wjzwtx0] {
    display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .9rem 0 .55rem;
    border: 2px solid #e5e7eb; border-radius: 10px; background: #fff; color: #111827; font-weight: 600; font-size: .88rem; cursor: pointer;
}
.mw-theme.sel[b-xa2wjzwtx0] { border-color: #0f766e; box-shadow: 0 0 0 3px rgba(15, 118, 110, .15); }
.mw-swatch[b-xa2wjzwtx0] { width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(0, 0, 0, .12); }
.t-clasico .mw-swatch[b-xa2wjzwtx0] { background: linear-gradient(135deg, #fbf7f0 50%, #9a3b26 50%); }
.t-moderno .mw-swatch[b-xa2wjzwtx0] { background: linear-gradient(135deg, #ffffff 50%, #0f766e 50%); }
.t-nocturno .mw-swatch[b-xa2wjzwtx0] { background: linear-gradient(135deg, #141312 50%, #e0a458 50%); }
.t-fresco .mw-swatch[b-xa2wjzwtx0] { background: linear-gradient(135deg, #f6fbf4 50%, #2f7d32 50%); }

.mw-seg[b-xa2wjzwtx0] { display: inline-flex; border: 1px solid #d1d5db; border-radius: 8px; overflow: hidden; }
.mw-seg button[b-xa2wjzwtx0] { min-height: 40px; padding: 0 .8rem; border: 0; background: #fff; color: #374151; font-size: .85rem; cursor: pointer; }
.mw-seg button.sel[b-xa2wjzwtx0] { background: #0f766e; color: #fff; }

.mw-frame-wrap[b-xa2wjzwtx0] { margin-top: .75rem; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; background: #f3f4f6; }
.mw-frame-wrap.mobile[b-xa2wjzwtx0] { max-width: 390px; margin-left: auto; margin-right: auto; }
.mw-frame[b-xa2wjzwtx0] { display: block; width: 100%; height: 720px; border: 0; background: #fff; }

.mw-savebar[b-xa2wjzwtx0] {
    position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; gap: .6rem; flex-wrap: wrap;
    padding: .75rem 0; margin-top: .5rem; background: linear-gradient(to top, #f9fafb 70%, rgba(249, 250, 251, 0));
}

@media (max-width: 560px) {
    .mw-grid[b-xa2wjzwtx0] { grid-template-columns: minmax(0, 1fr); }
    .mw-day[b-xa2wjzwtx0] { flex-direction: column; gap: .25rem; }
    .mw-day-name[b-xa2wjzwtx0] { padding-top: 0; }
    .mw-savebar .mw-btn[b-xa2wjzwtx0] { flex: 1 1 auto; }
}

:root[data-theme="dark"] .mw-header h1[b-xa2wjzwtx0],
:root[data-theme="dark"] .mw-card h2[b-xa2wjzwtx0],
:root[data-theme="dark"] .mw-day-name[b-xa2wjzwtx0],
:root[data-theme="dark"] .mw-cat[b-xa2wjzwtx0] { color: #f3f4f6; }
:root[data-theme="dark"] .mw-intro p[b-xa2wjzwtx0],
:root[data-theme="dark"] .mw-field[b-xa2wjzwtx0],
:root[data-theme="dark"] .mw-switch[b-xa2wjzwtx0] { color: #d1d5db; }
:root[data-theme="dark"] .mw-sub[b-xa2wjzwtx0],
:root[data-theme="dark"] .mw-meta[b-xa2wjzwtx0] { color: #9ca3af; }
:root[data-theme="dark"] .mw-meta.mw-unpublished[b-xa2wjzwtx0] { color: #fbbf24; }
:root[data-theme="dark"] .mw-back[b-xa2wjzwtx0] { background: #1f2937; border-color: #374151; color: #e5e7eb; }
:root[data-theme="dark"] .mw-card[b-xa2wjzwtx0] { background: #1f2937; border-color: #374151; }
:root[data-theme="dark"] .mw-pill[b-xa2wjzwtx0] { background: #374151; color: #d1d5db; }
:root[data-theme="dark"] .mw-pill.on[b-xa2wjzwtx0] { background: rgba(34, 197, 94, .18); color: #86efac; }
:root[data-theme="dark"] .mw-field input[b-xa2wjzwtx0],
:root[data-theme="dark"] .mw-field textarea[b-xa2wjzwtx0],
:root[data-theme="dark"] .mw-shift input[b-xa2wjzwtx0] { background: #111827; border-color: #4b5563; color: #f3f4f6; color-scheme: dark; }
:root[data-theme="dark"] .mw-btn[b-xa2wjzwtx0] { background: #111827; border-color: #4b5563; color: #f3f4f6; }
:root[data-theme="dark"] .mw-btn:hover[b-xa2wjzwtx0] { background: #1f2937; }
:root[data-theme="dark"] .mw-ai[b-xa2wjzwtx0] { background: rgba(20, 184, 166, .12); border-color: rgba(94, 234, 212, .45); color: #5eead4; }
:root[data-theme="dark"] .mw-primary[b-xa2wjzwtx0] { background: #0f766e; border-color: #14b8a6; color: #fff; }
:root[data-theme="dark"] .mw-note[b-xa2wjzwtx0] { background: rgba(20, 184, 166, .12); border-color: rgba(94, 234, 212, .35); color: #5eead4; }
:root[data-theme="dark"] .mw-banner[b-xa2wjzwtx0] { background: rgba(245, 158, 11, .12); border-color: rgba(252, 211, 77, .35); color: #fcd34d; }
:root[data-theme="dark"] .mw-url code[b-xa2wjzwtx0] { background: #111827; color: #f3f4f6; }
:root[data-theme="dark"] .mw-day[b-xa2wjzwtx0] { border-top-color: #374151; }
:root[data-theme="dark"] .mw-x[b-xa2wjzwtx0] { background: transparent; border-color: rgba(248, 113, 113, .45); color: #fca5a5; }
:root[data-theme="dark"] .mw-add[b-xa2wjzwtx0] { border-color: #6b7280; color: #d1d5db; }
:root[data-theme="dark"] .mw-theme[b-xa2wjzwtx0] { background: #111827; border-color: #374151; color: #f3f4f6; }
:root[data-theme="dark"] .mw-theme.sel[b-xa2wjzwtx0] { border-color: #14b8a6; }
:root[data-theme="dark"] .mw-seg[b-xa2wjzwtx0] { border-color: #4b5563; }
:root[data-theme="dark"] .mw-seg button[b-xa2wjzwtx0] { background: #111827; color: #d1d5db; }
:root[data-theme="dark"] .mw-seg button.sel[b-xa2wjzwtx0] { background: #0f766e; color: #fff; }
:root[data-theme="dark"] .mw-frame-wrap[b-xa2wjzwtx0] { border-color: #374151; background: #111827; }
:root[data-theme="dark"] .mw-link-danger[b-xa2wjzwtx0] { color: #fca5a5; }
:root[data-theme="dark"] .mw-savebar[b-xa2wjzwtx0] { background: linear-gradient(to top, #111827 70%, rgba(17, 24, 39, 0)); }

/* ---- v2: address and own domain, the venue, photos, featured, legal ---- */
.mw-h3[b-xa2wjzwtx0] { font-size: .95rem; font-weight: 700; margin: 1rem 0 .35rem; color: #111827; }
.mw-inline[b-xa2wjzwtx0] { background: #f3f4f6; border-radius: 6px; padding: .1rem .4rem; font-size: .85rem; overflow-wrap: anywhere; }
.mw-label[b-xa2wjzwtx0] { font-size: .85rem; font-weight: 600; color: #374151; margin: .9rem 0 .45rem; }
.mw-link[b-xa2wjzwtx0] { background: none; border: 0; padding: .35rem 0; color: #0f766e; font-weight: 600; font-size: .88rem; cursor: pointer; text-decoration: underline; }
.mw-link:disabled[b-xa2wjzwtx0] { opacity: .5; cursor: default; }
.mw-state[b-xa2wjzwtx0] { font-size: .75rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; background: #fef3c7; color: #92400e; }
.mw-state.s-active[b-xa2wjzwtx0] { background: #dcfce7; color: #166534; }
.mw-state.s-error[b-xa2wjzwtx0] { background: #fee2e2; color: #991b1b; }
.mw-domain input[b-xa2wjzwtx0] { flex: 1 1 260px; min-width: 0; font: inherit; font-size: .95rem; border: 1px solid #d1d5db; border-radius: 8px; padding: .55rem .7rem; min-height: 44px; }
.mw-steps[b-xa2wjzwtx0] { margin: .4rem 0 .8rem; padding-left: 1.2rem; font-size: .9rem; color: #374151; line-height: 1.55; }
.mw-steps li[b-xa2wjzwtx0] { margin-bottom: .5rem; }
.mw-dns[b-xa2wjzwtx0] { border-collapse: collapse; margin-top: .4rem; font-size: .88rem; }
.mw-dns th[b-xa2wjzwtx0], .mw-dns td[b-xa2wjzwtx0] { text-align: left; padding: .35rem .7rem; border: 1px solid #e5e7eb; }
.mw-dns th[b-xa2wjzwtx0] { background: #f9fafb; font-weight: 600; }
.mw-suggest[b-xa2wjzwtx0] { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .35rem; }
.mw-suggest li[b-xa2wjzwtx0] { display: flex; justify-content: space-between; gap: .75rem; align-items: center; padding: .45rem .6rem; border: 1px solid #e5e7eb; border-radius: 8px; font-size: .9rem; }
.mw-chips[b-xa2wjzwtx0] { display: flex; flex-wrap: wrap; gap: .4rem; }
.mw-chip[b-xa2wjzwtx0] { min-height: 36px; padding: 0 .8rem; border-radius: 999px; border: 1px solid #d1d5db; background: #fff; color: #374151; font-size: .85rem; cursor: pointer; }
.mw-chip.on[b-xa2wjzwtx0] { background: #0f766e; border-color: #0f766e; color: #fff; }
.mw-chip:disabled[b-xa2wjzwtx0] { opacity: .45; cursor: default; }
.mw-field small[b-xa2wjzwtx0] { font-weight: 400; color: #6b7280; font-size: .8rem; }
.mw-cover[b-xa2wjzwtx0] { display: flex; flex-direction: column; gap: .6rem; }
.mw-cover img[b-xa2wjzwtx0] { width: 100%; max-width: 520px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; border: 1px solid #e5e7eb; }
.mw-file[b-xa2wjzwtx0] { position: relative; overflow: hidden; }
.mw-file[b-xa2wjzwtx0]  input[type=file], .mw-add-photo[b-xa2wjzwtx0]  input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mw-thumbs[b-xa2wjzwtx0] { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; margin: .5rem 0; }
.mw-thumb[b-xa2wjzwtx0] { position: relative; display: block; padding: 0; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; background: #f9fafb; aspect-ratio: 1; cursor: pointer; }
.mw-thumb img[b-xa2wjzwtx0] { width: 100%; height: 100%; object-fit: cover; display: block; }
.mw-thumb .mw-x[b-xa2wjzwtx0] { position: absolute; top: 4px; right: 4px; background: rgba(255, 255, 255, .92); }
.mw-add-photo[b-xa2wjzwtx0] { display: flex; align-items: center; justify-content: center; text-align: center; font-size: .82rem; font-weight: 600; color: #374151; border-style: dashed; }
.mw-dishes[b-xa2wjzwtx0] { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .25rem .9rem; max-height: 340px; overflow: auto; padding-right: .25rem; }
.mw-more[b-xa2wjzwtx0] { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid #f3f4f6; }
.mw-brand[b-xa2wjzwtx0] { margin-top: .9rem; }
.mw-brand input[type=color][b-xa2wjzwtx0] { width: 44px; height: 36px; padding: 0; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; cursor: pointer; }
.mw-legal[b-xa2wjzwtx0] { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: .6rem 0 1rem; font-size: .9rem; }
.mw-legal dt[b-xa2wjzwtx0] { color: #6b7280; }
.mw-legal dd[b-xa2wjzwtx0] { margin: 0; color: #111827; overflow-wrap: anywhere; }
.t-mediterraneo .mw-swatch[b-xa2wjzwtx0] { background: linear-gradient(135deg, #fdfcf8 50%, #1d5fa8 50%); }
.t-taberna .mw-swatch[b-xa2wjzwtx0] { background: linear-gradient(135deg, #f6efe4 50%, #7a2e1c 50%); }
.t-elegante .mw-swatch[b-xa2wjzwtx0] { background: linear-gradient(135deg, #0f0f10 50%, #c9a45c 50%); }
.t-minimal .mw-swatch[b-xa2wjzwtx0] { background: linear-gradient(135deg, #ffffff 50%, #111111 50%); }

:root[data-theme="dark"] .mw-h3[b-xa2wjzwtx0],
:root[data-theme="dark"] .mw-legal dd[b-xa2wjzwtx0] { color: #f3f4f6; }
:root[data-theme="dark"] .mw-label[b-xa2wjzwtx0],
:root[data-theme="dark"] .mw-steps[b-xa2wjzwtx0],
:root[data-theme="dark"] .mw-add-photo[b-xa2wjzwtx0] { color: #d1d5db; }
:root[data-theme="dark"] .mw-inline[b-xa2wjzwtx0] { background: #111827; color: #f3f4f6; }
:root[data-theme="dark"] .mw-link[b-xa2wjzwtx0] { color: #5eead4; }
:root[data-theme="dark"] .mw-state[b-xa2wjzwtx0] { background: rgba(245, 158, 11, .18); color: #fcd34d; }
:root[data-theme="dark"] .mw-state.s-active[b-xa2wjzwtx0] { background: rgba(34, 197, 94, .18); color: #86efac; }
:root[data-theme="dark"] .mw-state.s-error[b-xa2wjzwtx0] { background: rgba(239, 68, 68, .18); color: #fca5a5; }
:root[data-theme="dark"] .mw-domain input[b-xa2wjzwtx0] { background: #111827; border-color: #4b5563; color: #f3f4f6; }
:root[data-theme="dark"] .mw-dns th[b-xa2wjzwtx0], :root[data-theme="dark"] .mw-dns td[b-xa2wjzwtx0] { border-color: #374151; }
:root[data-theme="dark"] .mw-dns th[b-xa2wjzwtx0] { background: #111827; }
:root[data-theme="dark"] .mw-suggest li[b-xa2wjzwtx0] { border-color: #374151; }
:root[data-theme="dark"] .mw-chip[b-xa2wjzwtx0] { background: #111827; border-color: #4b5563; color: #d1d5db; }
:root[data-theme="dark"] .mw-chip.on[b-xa2wjzwtx0] { background: #0f766e; border-color: #14b8a6; color: #fff; }
:root[data-theme="dark"] .mw-cover img[b-xa2wjzwtx0], :root[data-theme="dark"] .mw-thumb[b-xa2wjzwtx0] { border-color: #374151; }
:root[data-theme="dark"] .mw-thumb[b-xa2wjzwtx0] { background: #111827; }
:root[data-theme="dark"] .mw-more[b-xa2wjzwtx0] { border-top-color: #374151; }
:root[data-theme="dark"] .mw-brand input[type=color][b-xa2wjzwtx0] { background: #111827; border-color: #4b5563; }

/* "Visitas a tu web" */
.mwv-range[b-xa2wjzwtx0] { display: inline-flex; border: 1px solid #d1d5db; border-radius: 8px; overflow: hidden; }
.mwv-range button[b-xa2wjzwtx0] { border: 0; background: #fff; color: #374151; font: inherit; font-size: .82rem; font-weight: 600; padding: 0 .8rem; min-height: 36px; cursor: pointer; }
.mwv-range button + button[b-xa2wjzwtx0] { border-left: 1px solid #d1d5db; }
.mwv-range button.on[b-xa2wjzwtx0] { background: #0f766e; color: #fff; }
.mwv-tiles[b-xa2wjzwtx0] { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; margin: .25rem 0 .5rem; }
.mwv-tile[b-xa2wjzwtx0] { display: flex; flex-direction: column; gap: .15rem; background: #f9fafb; border: 1px solid #f3f4f6; border-radius: 10px; padding: .65rem .75rem; min-width: 0; }
.mwv-tile strong[b-xa2wjzwtx0] { font-size: 1.35rem; font-weight: 700; color: #111827; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mwv-tile span[b-xa2wjzwtx0] { font-size: .8rem; color: #4b5563; line-height: 1.3; }
.mwv-tile small[b-xa2wjzwtx0] { font-size: .74rem; color: #6b7280; }
.mwv-tile.main[b-xa2wjzwtx0] { background: #f0fdfa; border-color: #99f6e4; }
.mwv-tile.main strong[b-xa2wjzwtx0] { font-size: 1.7rem; color: #0f766e; }
.mwv-empty[b-xa2wjzwtx0] { margin: .5rem 0 0; }
.mwv-h3[b-xa2wjzwtx0] { font-size: .9rem; font-weight: 700; margin: 1rem 0 .4rem; color: #111827; }
.mwv-bars[b-xa2wjzwtx0] { display: flex; align-items: flex-end; gap: 6px; height: 96px; padding: 0 2px; border-bottom: 1px solid #e5e7eb; }
.mwv-bars.dense[b-xa2wjzwtx0] { gap: 2px; }
.mwv-bar[b-xa2wjzwtx0] { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; min-width: 0; }
.mwv-bar span[b-xa2wjzwtx0] { display: block; width: 100%; min-height: 2px; background: #14b8a6; border-radius: 3px 3px 0 0; }
.mwv-axis[b-xa2wjzwtx0] { display: flex; justify-content: space-between; font-size: .74rem; color: #6b7280; margin-top: .25rem; }
.mwv-sources[b-xa2wjzwtx0] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.mwv-sources li[b-xa2wjzwtx0] { display: grid; grid-template-columns: minmax(0, 13rem) 1fr 3rem; align-items: center; gap: .6rem; font-size: .85rem; color: #374151; }
.mwv-sources strong[b-xa2wjzwtx0] { text-align: right; font-variant-numeric: tabular-nums; color: #111827; }
.mwv-track[b-xa2wjzwtx0] { height: 8px; background: #f3f4f6; border-radius: 999px; overflow: hidden; }
.mwv-track span[b-xa2wjzwtx0] { display: block; height: 100%; background: #14b8a6; border-radius: 999px; }
@media (max-width: 520px) {
    .mwv-tiles[b-xa2wjzwtx0] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mwv-tile.main[b-xa2wjzwtx0] { grid-column: 1 / -1; }
    .mwv-sources li[b-xa2wjzwtx0] { grid-template-columns: 1fr 3rem; }
    .mwv-track[b-xa2wjzwtx0] { grid-column: 1 / -1; grid-row: 2; }
}
:root[data-theme="dark"] .mwv-range[b-xa2wjzwtx0] { border-color: #4b5563; }
:root[data-theme="dark"] .mwv-range button[b-xa2wjzwtx0] { background: #111827; color: #d1d5db; }
:root[data-theme="dark"] .mwv-range button + button[b-xa2wjzwtx0] { border-left-color: #4b5563; }
:root[data-theme="dark"] .mwv-range button.on[b-xa2wjzwtx0] { background: #0f766e; color: #fff; }
:root[data-theme="dark"] .mwv-tile[b-xa2wjzwtx0] { background: #111827; border-color: #374151; }
:root[data-theme="dark"] .mwv-tile strong[b-xa2wjzwtx0], :root[data-theme="dark"] .mwv-h3[b-xa2wjzwtx0], :root[data-theme="dark"] .mwv-sources strong[b-xa2wjzwtx0] { color: #f3f4f6; }
:root[data-theme="dark"] .mwv-tile span[b-xa2wjzwtx0], :root[data-theme="dark"] .mwv-sources li[b-xa2wjzwtx0] { color: #d1d5db; }
:root[data-theme="dark"] .mwv-tile.main[b-xa2wjzwtx0] { background: rgba(20, 184, 166, .12); border-color: #0f766e; }
:root[data-theme="dark"] .mwv-tile.main strong[b-xa2wjzwtx0] { color: #5eead4; }
:root[data-theme="dark"] .mwv-bars[b-xa2wjzwtx0] { border-bottom-color: #374151; }
:root[data-theme="dark"] .mwv-track[b-xa2wjzwtx0] { background: #374151; }
:root[data-theme="dark"] .mw-ready[b-xa2wjzwtx0] { background: rgba(20, 184, 166, .1); border-color: #0f766e; }

/* "Idiomas": one panel per added language */
.mw-lang[b-xa2wjzwtx0] { border: 1px solid #e5e7eb; border-radius: 10px; padding: .6rem .85rem; margin: .6rem 0; }
.mw-lang summary[b-xa2wjzwtx0] { cursor: pointer; display: flex; align-items: baseline; gap: .5rem; min-height: 32px; }
.mw-lang[open] summary[b-xa2wjzwtx0] { margin-bottom: .6rem; }
.mw-select[b-xa2wjzwtx0] { font: inherit; font-size: .88rem; min-height: 44px; padding: 0 .6rem; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: #111827; }
:root[data-theme="dark"] .mw-lang[b-xa2wjzwtx0] { border-color: #374151; }
:root[data-theme="dark"] .mw-select[b-xa2wjzwtx0] { background: #111827; border-color: #4b5563; color: #f3f4f6; }

/* "Compra tu dominio" */
.mw-bad[b-xa2wjzwtx0] { color: #b91c1c; }
:root[data-theme="dark"] .mw-bad[b-xa2wjzwtx0] { color: #fca5a5; }

/* "Tu negocio en Google" */
.mw-google-list[b-xa2wjzwtx0] { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .5rem; }
.mw-google-list li[b-xa2wjzwtx0] { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .75rem; border: 1px solid #e5e7eb; border-radius: 10px; }
.mw-google-list li > div[b-xa2wjzwtx0] { display: grid; min-width: 0; }
.mw-google-place[b-xa2wjzwtx0] { margin-top: .75rem; padding: .75rem; border: 1px solid #e5e7eb; border-radius: 10px; }
.mw-google-place p[b-xa2wjzwtx0] { margin: 0 0 .35rem; }
.mw-google-hours[b-xa2wjzwtx0] { list-style: none; margin: .25rem 0 .75rem; padding: 0; font-size: .86rem; }
.mw-google-hours li span[b-xa2wjzwtx0] { display: inline-block; min-width: 6.5rem; color: #6b7280; }
.mw-attrib[b-xa2wjzwtx0] { font-size: .72rem; color: #6b7280; margin: .5rem 0 0; }
:root[data-theme="dark"] .mw-google-list li[b-xa2wjzwtx0], :root[data-theme="dark"] .mw-google-place[b-xa2wjzwtx0] { border-color: #374151; }
:root[data-theme="dark"] .mw-google-hours li span[b-xa2wjzwtx0], :root[data-theme="dark"] .mw-attrib[b-xa2wjzwtx0] { color: #9ca3af; }
/* /Pages/Admin/WhatsApp.razor.rz.scp.css */
/* WhatsApp admin hub. Scoped (Blazor) so none of these leak. Light-first with
   :root[data-theme="dark"] overrides, matching the other admin pages. */

.wa-page[b-0imyhujatr] {
    max-width: 920px;
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
}

.wa-header[b-0imyhujatr] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.wa-header h1[b-0imyhujatr] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: #111827;
}

.wa-header .bi-whatsapp[b-0imyhujatr] { color: var(--adm-fg-25d366); margin-right: .35rem; }

.wa-back[b-0imyhujatr] {
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 10px;
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
    cursor: pointer;
    color: #374151;
}
.wa-back:hover[b-0imyhujatr] { background: #f9fafb; }

.wa-loading[b-0imyhujatr], .wa-error[b-0imyhujatr] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 2rem;
    color: var(--adm-fg-6b7280);
}
.wa-error button[b-0imyhujatr] {
    border: 1px solid #d1d5db;
    background: #fff;
    border-radius: 8px;
    padding: .35rem .75rem;
    cursor: pointer;
}
.wa-spinner[b-0imyhujatr] {
    width: 20px; height: 20px;
    border: 3px solid var(--adm-bd-e5e7eb);
    border-top-color: var(--adm-bd-25d366);
    border-radius: 50%;
    animation: wa-spin-b-0imyhujatr 0.8s linear infinite;
}
@keyframes wa-spin-b-0imyhujatr { to { transform: rotate(360deg); } }

.wa-conn[b-0imyhujatr] {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    border-radius: 14px;
    margin-bottom: 1.25rem;
    border: 1px solid transparent;
}
.wa-conn .bi[b-0imyhujatr] { font-size: 1.4rem; margin-top: .1rem; }
.wa-conn strong[b-0imyhujatr] { display: block; font-size: 1.05rem; }
.wa-conn p[b-0imyhujatr] { margin: .2rem 0 0; font-size: .9rem; line-height: 1.4; }
.wa-conn.ok[b-0imyhujatr] { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.wa-conn.ok .bi[b-0imyhujatr] { color: #10b981; }
.wa-conn.warn[b-0imyhujatr] { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.wa-conn.warn .bi[b-0imyhujatr] { color: #f59e0b; }

.wa-grid[b-0imyhujatr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.wa-card[b-0imyhujatr] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 1.1rem 1.15rem;
}
.wa-card-head[b-0imyhujatr] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .65rem;
}
.wa-card-head .bi[b-0imyhujatr] { color: var(--adm-fg-25d366); font-size: 1.05rem; }
.wa-card-head h2[b-0imyhujatr] { font-size: 1rem; font-weight: 700; margin: 0; color: #111827; }

.wa-big[b-0imyhujatr] { font-size: 1.6rem; font-weight: 700; margin: 0 0 .35rem; color: #111827; }
.wa-big span[b-0imyhujatr] { font-size: .85rem; font-weight: 500; color: #6b7280; }

.wa-sub[b-0imyhujatr] { font-size: .85rem; color: #6b7280; line-height: 1.45; margin: .35rem 0 .65rem; }
.wa-sub code[b-0imyhujatr], .wa-card code[b-0imyhujatr] {
    background: #f3f4f6;
    border-radius: 5px;
    padding: .05rem .3rem;
    font-size: .82em;
    color: #374151;
}

.wa-chips[b-0imyhujatr] { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; }
.wa-chip[b-0imyhujatr] {
    font-size: .8rem;
    font-weight: 600;
    padding: .25rem .6rem;
    border-radius: 999px;
    border: 1px solid transparent;
}
.wa-chip.on[b-0imyhujatr] { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.wa-chip.on[b-0imyhujatr]::before { content: "● "; color: #10b981; }
.wa-chip.off[b-0imyhujatr] { background: #f3f4f6; color: #9ca3af; border-color: #e5e7eb; }
.wa-chip.off[b-0imyhujatr]::before { content: "○ "; }

.wa-link[b-0imyhujatr] {
    display: inline-block;
    font-size: .85rem;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
    /* Comfortable touch target on tablet admin screens. */
    min-height: 44px;
    line-height: 44px;
}
.wa-link:hover[b-0imyhujatr] { text-decoration: underline; }

/* ===== Dark mode (operators run admin in dark; light-first + overrides) ===== */
:root[data-theme="dark"] .wa-header h1[b-0imyhujatr],
:root[data-theme="dark"] .wa-card-head h2[b-0imyhujatr],
:root[data-theme="dark"] .wa-big[b-0imyhujatr] { color: #f3f4f6; }
:root[data-theme="dark"] .wa-big span[b-0imyhujatr],
:root[data-theme="dark"] .wa-sub[b-0imyhujatr] { color: #9ca3af; }
:root[data-theme="dark"] .wa-back[b-0imyhujatr] {
    background: #1f2937; border-color: #374151; color: #e5e7eb;
}
:root[data-theme="dark"] .wa-back:hover[b-0imyhujatr] { background: #374151; }
:root[data-theme="dark"] .wa-card[b-0imyhujatr] {
    background: #1f2937; border-color: #374151;
}
:root[data-theme="dark"] .wa-sub code[b-0imyhujatr], :root[data-theme="dark"] .wa-card code[b-0imyhujatr] {
    background: #374151; color: #e5e7eb;
}
:root[data-theme="dark"] .wa-chip.off[b-0imyhujatr] { background: #374151; color: #9ca3af; border-color: #4b5563; }
:root[data-theme="dark"] .wa-conn.ok[b-0imyhujatr] { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.4); color: #6ee7b7; }
:root[data-theme="dark"] .wa-conn.warn[b-0imyhujatr] { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.4); color: #fcd34d; }
:root[data-theme="dark"] .wa-link[b-0imyhujatr] { color: #60a5fa; }

/* Light admin (the default since 2026-10-12). Measured light-only contrast, now 4.5:1 or more; dark untouched. */
:root[data-theme="light"] .wa-chip.off[b-0imyhujatr] { color: #4b5563; } /* #9ca3af on #f3f4f6: 2.31:1 */
/* /Pages/Board.razor.rz.scp.css */
/* Pickup board — a TV above the counter. High-contrast, large, glanceable from
   across a room. Two columns: Preparando (amber) / Listo (green). */
.board-page[b-4d9hogo5u9] {
    position: fixed;
    inset: 0;
    display: flex;
    background: #0d0f1a;
    color: #fff;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.board-col[b-4d9hogo5u9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 2.5vh 2vw;
}

.board-prep[b-4d9hogo5u9] { border-right: 2px solid rgba(255, 255, 255, 0.08); }

.board-head[b-4d9hogo5u9] {
    margin: 0 0 2.5vh;
    text-align: center;
    font-size: 4vh;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.board-prep .board-head[b-4d9hogo5u9] { color: #f5a623; }
.board-ready .board-head[b-4d9hogo5u9] { color: #2ecc71; }

.board-tickets[b-4d9hogo5u9] {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 1.4vh 1.2vw;
    overflow: hidden;
}

.board-ticket[b-4d9hogo5u9] {
    min-width: 7vw;
    padding: 1.4vh 1.6vw;
    border-radius: 1.4vh;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(245, 166, 35, 0.5);
    color: #fff;
    font-size: 5vh;
    font-weight: 800;
    text-align: center;
    line-height: 1;
}

.board-ticket-ready[b-4d9hogo5u9] {
    background: rgba(46, 204, 113, 0.16);
    border-color: #2ecc71;
    color: #eafff2;
    /* a gentle attention pulse when a ticket lands in "Listo" */
    animation: boardReadyIn-b-4d9hogo5u9 0.5s ease;
}

@keyframes boardReadyIn-b-4d9hogo5u9 {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.board-none[b-4d9hogo5u9] {
    width: 100%;
    text-align: center;
    font-size: 4vh;
    opacity: 0.25;
    margin-top: 4vh;
}

.board-fatal[b-4d9hogo5u9] {
    margin: auto;
    font-size: 8vh;
    opacity: 0.3;
}

@media (prefers-reduced-motion: reduce) {
    .board-ticket-ready[b-4d9hogo5u9] { animation: none; }
}
/* /Pages/ClubCardPage.razor.rz.scp.css */
/* A club member's card (/club/tarjeta/{token}). Paints its own background (CustomerLayout is a
   dark shell) and follows the phone's light/dark setting. The QR stays on white in both: a scanner
   wants dark modules on a light quiet zone. The venue's colour (--club-brand) leads. */
.club-card-page[b-5xyfs5ete6] {
    --club-brand: #0891b2;
    --cc-bg: #f5f6f8;
    --cc-card: #ffffff;
    --cc-text: #0f172a;
    --cc-muted: #64748b;
    --cc-border: #e5e7eb;
    --cc-wallet: #1e293b;
    --cc-wallet-back: #475569;

    min-height: 100vh;
    background: var(--cc-bg);
    background: radial-gradient(120% 50% at 50% -12%, color-mix(in srgb, var(--club-brand) 18%, transparent), transparent 62%), var(--cc-bg);
    color: var(--cc-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    padding: 20px 16px 48px;
    box-sizing: border-box;
}

@media (prefers-color-scheme: dark) {
    .club-card-page[b-5xyfs5ete6] {
        --cc-bg: #0b1220;
        --cc-card: #151e2e;
        --cc-text: #f1f5f9;
        --cc-muted: #94a3b8;
        --cc-border: #273449;
        --cc-wallet: #334155;
        --cc-wallet-back: #64748b;
    }
}

.cc-center[b-5xyfs5ete6] {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.cc-spinner[b-5xyfs5ete6] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--cc-border);
    border-top-color: var(--club-brand);
    border-radius: 50%;
    animation: cc-spin-b-5xyfs5ete6 1s linear infinite;
}

@keyframes cc-spin-b-5xyfs5ete6 { to { transform: rotate(360deg); } }

.cc-missing[b-5xyfs5ete6] { max-width: 360px; color: var(--cc-muted); }

/* Header: the venue, and the language */
.cc-header[b-5xyfs5ete6] {
    max-width: 420px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.cc-logo[b-5xyfs5ete6] { width: 48px; height: 48px; flex-shrink: 0; object-fit: contain; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14); }
.cc-header h1[b-5xyfs5ete6] { flex: 1; min-width: 0; margin: 0; font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: break-word; }

/* site.css gives every select min-width: 220px, which beats max-width (see ClubJoin.razor.css). */
.cc-lang[b-5xyfs5ete6] {
    flex-shrink: 0;
    width: auto;
    min-width: 0;
    max-width: 8.5rem;
    font: inherit;
    font-size: 0.85rem;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid var(--cc-border);
    background: var(--cc-card);
    color: var(--cc-text);
}

/* The card, drawn as a wallet pass: the venue's band, notches at the tear line, two cards of the
   venue's colour stacked behind it (shadows, no extra elements), and it arrives with one sheen. */
.cc-card[b-5xyfs5ete6] {
    position: relative;
    max-width: 420px;
    margin: 0 auto 20px;
    box-sizing: border-box;
    background: var(--cc-card);
    border: 1px solid var(--cc-border);
    border-radius: 22px;
    overflow: hidden;
    text-align: center;
    padding-bottom: 20px;
    box-shadow:
        0 10px 0 -5px color-mix(in srgb, var(--club-brand) 40%, var(--cc-card)),
        0 20px 0 -10px color-mix(in srgb, var(--club-brand) 18%, var(--cc-card)),
        0 30px 44px -26px rgba(15, 23, 42, 0.55);
    animation: cc-arrive-b-5xyfs5ete6 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.08) both;
}

@keyframes cc-arrive-b-5xyfs5ete6 {
    from { opacity: 0; transform: translateY(26px) scale(0.97); }
    to { opacity: 1; transform: none; }
}

.cc-band[b-5xyfs5ete6] {
    position: relative;
    overflow: hidden;
    min-height: 92px;
    box-sizing: border-box;
    background: var(--club-brand);
    background: linear-gradient(135deg, var(--club-brand), color-mix(in srgb, var(--club-brand) 64%, #000));
    color: #fff;
    padding: 16px 20px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
}

/* Depth: light from the top right, shade at the bottom left. */
.cc-band[b-5xyfs5ete6]::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, 0.2), transparent 55%),
        radial-gradient(90% 80% at 0% 120%, rgba(0, 0, 0, 0.2), transparent 60%);
    pointer-events: none;
}

/* One sheen across the band as the card arrives. */
.cc-band[b-5xyfs5ete6]::after {
    content: '';
    position: absolute;
    inset: -30% -60%;
    background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.35) 50%, transparent 58%);
    transform: translateX(-70%);
    animation: cc-sheen-b-5xyfs5ete6 1.4s 0.55s ease-out both;
    pointer-events: none;
}

@keyframes cc-sheen-b-5xyfs5ete6 { to { transform: translateX(70%); } }

.cc-band > *[b-5xyfs5ete6] { position: relative; }
.cc-band-top[b-5xyfs5ete6] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cc-band-logo[b-5xyfs5ete6] { width: 34px; height: 34px; flex-shrink: 0; box-sizing: border-box; padding: 2px; border-radius: 9px; object-fit: contain; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }

.cc-club[b-5xyfs5ete6] { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.88; }
.cc-member[b-5xyfs5ete6] { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: break-word; }

/* The tear line: a notch each side, cut in the page's colour, edged like the card. */
.cc-seam[b-5xyfs5ete6] { position: relative; height: 0; }
.cc-seam[b-5xyfs5ete6]::before,
.cc-seam[b-5xyfs5ete6]::after {
    content: '';
    position: absolute;
    top: -12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--cc-bg);
    box-shadow: inset 0 0 0 1px var(--cc-border);
}
.cc-seam[b-5xyfs5ete6]::before { left: -13px; }
.cc-seam[b-5xyfs5ete6]::after { right: -13px; }

/* Where the member stands */
.cc-standing[b-5xyfs5ete6] { margin: 16px 20px 0; text-align: left; }
.cc-status[b-5xyfs5ete6] { margin: 16px 20px 0; font-weight: 600; color: var(--cc-text); }
.cc-standing .cc-status[b-5xyfs5ete6] { margin: 0; }
.cc-status.cc-off[b-5xyfs5ete6] { color: var(--cc-muted); }

.cc-standing.is-regular[b-5xyfs5ete6] {
    padding: 12px 14px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--club-brand) 12%, transparent);
}

.cc-status.cc-regular[b-5xyfs5ete6] { color: var(--club-brand); }
.cc-status.cc-regular[b-5xyfs5ete6]::before { content: '★ '; }

.cc-progress[b-5xyfs5ete6] {
    height: 8px;
    margin-top: 10px;
    border-radius: 999px;
    background: var(--cc-border);
    overflow: hidden;
}

.cc-progress span[b-5xyfs5ete6] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--club-brand);
    transition: width 0.4s ease;
}

.cc-progress-label[b-5xyfs5ete6] { margin: 6px 0 0; font-size: 0.8rem; color: var(--cc-muted); }

.cc-points-block[b-5xyfs5ete6] { margin: 14px 20px 0; text-align: left; }
.cc-points[b-5xyfs5ete6] { margin: 0; font-size: 1.15rem; font-weight: 700; }
.cc-points-back[b-5xyfs5ete6] { margin: 2px 0 0; font-size: 0.82rem; color: var(--cc-muted); }

.cc-qr[b-5xyfs5ete6] {
    margin: 18px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.cc-qr img[b-5xyfs5ete6] {
    width: min(240px, 70vw);
    height: auto;
    background: #fff;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid var(--cc-border);
}

.cc-code[b-5xyfs5ete6] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1rem; letter-spacing: 0.08em; color: var(--cc-muted); }
.cc-show[b-5xyfs5ete6] { margin: 12px 20px 0; font-weight: 600; }

/* "Add to … Wallet": black pills, the wallets' own look */
.cc-wallets[b-5xyfs5ete6] {
    max-width: 420px;
    margin: 16px auto 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* What the buttons are for: the card sliding into a wallet, once. */
.cc-save[b-5xyfs5ete6] { display: flex; align-items: center; gap: 14px; padding: 2px 4px 4px; text-align: left; }
.cc-save-art[b-5xyfs5ete6] { width: 72px; height: 56px; flex-shrink: 0; overflow: visible; }
.cc-save-back[b-5xyfs5ete6] { fill: var(--cc-wallet-back); }
.cc-save-pocket[b-5xyfs5ete6] { fill: var(--cc-wallet); }
.cc-save-face[b-5xyfs5ete6] { fill: var(--club-brand); }
.cc-save-mark[b-5xyfs5ete6] { fill: rgba(255, 255, 255, 0.85); }
.cc-save-clasp[b-5xyfs5ete6] { fill: color-mix(in srgb, var(--club-brand) 55%, #fff); }
.cc-save-card[b-5xyfs5ete6] { animation: cc-slide-in-b-5xyfs5ete6 1.1s 0.9s cubic-bezier(0.3, 0.8, 0.3, 1) both; }

@keyframes cc-slide-in-b-5xyfs5ete6 {
    from { opacity: 0; transform: translateY(-14px); }
    40% { opacity: 1; }
    to { opacity: 1; transform: translateY(6px); }
}

.cc-save-title[b-5xyfs5ete6] { margin: 0; font-weight: 700; }
.cc-save-help[b-5xyfs5ete6] { margin: 2px 0 0; font-size: 0.82rem; line-height: 1.4; color: var(--cc-muted); }

.cc-wallet[b-5xyfs5ete6] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 10px 18px;
    border-radius: 14px;
    background: #000;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.cc-wallet:focus-visible[b-5xyfs5ete6] { outline: 2px solid var(--club-brand); outline-offset: 2px; }
button.cc-wallet[b-5xyfs5ete6] { font: inherit; font-weight: 600; border: none; cursor: pointer; }
button.cc-wallet:disabled[b-5xyfs5ete6] { opacity: 0.6; cursor: wait; }
.cc-wallet-error[b-5xyfs5ete6] { margin: 0; font-size: 0.85rem; color: #dc2626; text-align: center; }

/* Visits, and how it works */
.cc-section[b-5xyfs5ete6] {
    max-width: 420px;
    margin: 14px auto 0;
    box-sizing: border-box;
    padding: 18px 20px;
    border-radius: 20px;
    background: var(--cc-card);
    border: 1px solid var(--cc-border);
}

.cc-section h2[b-5xyfs5ete6] { margin: 0 0 10px; font-size: 1rem; }

.cc-visit-list[b-5xyfs5ete6] { list-style: none; margin: 0; padding: 0; }

.cc-visit[b-5xyfs5ete6] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    font-size: 0.92rem;
    border-top: 1px solid var(--cc-border);
}

.cc-visit:first-child[b-5xyfs5ete6] { border-top: none; padding-top: 2px; }
.cc-visit-date[b-5xyfs5ete6] { color: var(--cc-text); }
.cc-visit-amount[b-5xyfs5ete6] { font-weight: 600; font-variant-numeric: tabular-nums; }
.cc-no-visits[b-5xyfs5ete6] { margin: 0; font-size: 0.9rem; color: var(--cc-muted); }

.cc-how ol[b-5xyfs5ete6] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cc-how li[b-5xyfs5ete6] { display: flex; gap: 12px; align-items: flex-start; font-size: 0.92rem; line-height: 1.45; }

.cc-step[b-5xyfs5ete6] {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--club-brand);
    background: color-mix(in srgb, var(--club-brand) 14%, transparent);
}

.cc-keep[b-5xyfs5ete6] { max-width: 420px; margin: 14px auto 0; font-size: 0.8rem; color: var(--cc-muted); text-align: center; }

@media (prefers-reduced-motion: reduce) {
    .cc-spinner[b-5xyfs5ete6] { animation: none; }
    .cc-progress span[b-5xyfs5ete6] { transition: none; }
    .cc-card[b-5xyfs5ete6], .cc-save-card[b-5xyfs5ete6] { animation: none; }
    .cc-save-card[b-5xyfs5ete6] { transform: translateY(6px); }
    .cc-band[b-5xyfs5ete6]::after { display: none; }
}
/* /Pages/ClubJoin.razor.rz.scp.css */
/* The club sign-up page (/{slug}/club). Paints its own background: CustomerLayout is a dark shell,
   and this page follows the phone's light/dark setting instead. The venue's colour (--club-brand)
   leads: the offer, the button, the steps. */
.club-join-page[b-qz8idfe62a] {
    --club-brand: #0891b2;
    --club-bg: #f5f6f8;
    --club-card: #ffffff;
    --club-text: #0f172a;
    --club-muted: #64748b;
    --club-border: #e5e7eb;
    --club-error: #dc2626;

    min-height: 100vh;
    background: var(--club-bg);
    background: radial-gradient(120% 55% at 50% -12%, color-mix(in srgb, var(--club-brand) 18%, transparent), transparent 62%), var(--club-bg);
    color: var(--club-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    padding: 20px 16px 48px;
    box-sizing: border-box;
}

@media (prefers-color-scheme: dark) {
    .club-join-page[b-qz8idfe62a] {
        --club-bg: #0b1220;
        --club-card: #151e2e;
        --club-text: #f1f5f9;
        --club-muted: #94a3b8;
        --club-border: #273449;
        --club-error: #f87171;
    }
}

.club-center[b-qz8idfe62a] {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
}

.club-spinner[b-qz8idfe62a] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--club-border);
    border-top-color: var(--club-brand);
    border-radius: 50%;
    animation: club-spin-b-qz8idfe62a 1s linear infinite;
}

@keyframes club-spin-b-qz8idfe62a { to { transform: rotate(360deg); } }

/* Header: the venue, and the language */
.club-header[b-qz8idfe62a] {
    max-width: 460px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.club-logo[b-qz8idfe62a] {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
}

.club-header h1[b-qz8idfe62a] { flex: 1; min-width: 0; margin: 0; font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: break-word; }

/* site.css gives every select min-width: 220px, which beats max-width: at phone width the language
   took most of the row and the venue's name broke into syllables ("Wok/ama/ma"). */
.club-lang[b-qz8idfe62a] {
    flex-shrink: 0;
    width: auto;
    min-width: 0;
    max-width: 8.5rem;
    font: inherit;
    font-size: 0.85rem;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid var(--club-border);
    background: var(--club-card);
    color: var(--club-text);
}

/* The offer: why join, in the venue's colour */
.club-offer[b-qz8idfe62a] {
    max-width: 460px;
    margin: 0 auto 14px;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 20px;
    color: #fff;
    background: var(--club-brand);
    background: linear-gradient(135deg, var(--club-brand), color-mix(in srgb, var(--club-brand) 68%, #000));
    box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--club-brand) 70%, transparent);
}

.club-eyebrow[b-qz8idfe62a] { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.club-offer .club-rule[b-qz8idfe62a] { margin: 8px 0 0; font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.club-points-rule[b-qz8idfe62a] { margin: 8px 0 0; font-size: 0.95rem; line-height: 1.4; opacity: 0.92; }

/* Claim mode (?c=…): the slip's ticket, its points waiting — a ticket, notched at the sides. */
.club-claim-hero[b-qz8idfe62a] { max-width: 460px; margin: 0 auto 14px; }

.claim-ticket[b-qz8idfe62a] {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    padding: 22px 24px 20px;
    border-radius: 20px;
    text-align: center;
    color: #fff;
    background: var(--club-brand);
    background: linear-gradient(135deg, var(--club-brand), color-mix(in srgb, var(--club-brand) 58%, #000));
    box-shadow: 0 18px 36px -18px color-mix(in srgb, var(--club-brand) 80%, transparent);
    -webkit-mask:
        radial-gradient(circle 11px at 0 58%, #0000 97%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle 11px at 100% 58%, #0000 97%, #000) right / 51% 100% no-repeat;
    mask:
        radial-gradient(circle 11px at 0 58%, #0000 97%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle 11px at 100% 58%, #0000 97%, #000) right / 51% 100% no-repeat;
    animation: claim-pop-b-qz8idfe62a 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

/* A shine crossing the ticket, twice. */
.claim-ticket[b-qz8idfe62a]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.32) 45%, transparent 60%);
    transform: translateX(-110%);
    animation: claim-shine-b-qz8idfe62a 2.4s 0.7s ease-in-out 2;
    pointer-events: none;
}

.claim-eyebrow[b-qz8idfe62a] { display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.88; }
.claim-points[b-qz8idfe62a] {
    margin-top: 6px;
    font-size: clamp(2.8rem, 15vw, 3.8rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
}
.claim-unit[b-qz8idfe62a] { margin-top: 4px; font-size: 1.05rem; font-weight: 700; }
.claim-bonus[b-qz8idfe62a] {
    display: inline-block;
    margin: 12px 0 0;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
}
.claim-expiry[b-qz8idfe62a] { margin: 12px 0 0; padding-top: 10px; border-top: 2px dashed rgba(255, 255, 255, 0.35); font-size: 0.8rem; opacity: 0.85; }

/* Why the slip's QR opened the plain join: used, expired, unknown. */
.club-claim-note[b-qz8idfe62a] {
    max-width: 460px;
    margin: 0 auto 14px;
    box-sizing: border-box;
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--club-card);
    border: 1px solid var(--club-border);
    color: var(--club-muted);
    font-size: 0.92rem;
    text-align: center;
}

@keyframes claim-pop-b-qz8idfe62a {
    from { opacity: 0; transform: translateY(10px) scale(0.96); }
    to { opacity: 1; transform: none; }
}

@keyframes claim-shine-b-qz8idfe62a {
    to { transform: translateX(110%); }
}

/* The form */
.club-card[b-qz8idfe62a] {
    max-width: 460px;
    margin: 0 auto;
    box-sizing: border-box;
    background: var(--club-card);
    border: 1px solid var(--club-border);
    border-radius: 20px;
    padding: 22px 20px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px -18px rgba(15, 23, 42, 0.3);
}

.club-card h2[b-qz8idfe62a] { margin: 0 0 8px; font-size: 1.15rem; }
.club-not-active[b-qz8idfe62a] { color: var(--club-muted); margin: 0; }

.club-form[b-qz8idfe62a] { display: flex; flex-direction: column; gap: 16px; }

.club-field[b-qz8idfe62a] { display: flex; flex-direction: column; gap: 6px; font-size: 0.88rem; font-weight: 600; }

.club-field input[b-qz8idfe62a] {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    font-size: 1rem;      /* 16px: no zoom-on-focus on iOS */
    font-weight: 400;
    padding: 13px 14px;
    border: 1px solid var(--club-border);
    border-radius: 12px;
    background: var(--club-bg);
    color: var(--club-text);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.club-field input:focus[b-qz8idfe62a],
.club-dial:focus[b-qz8idfe62a] {
    outline: none;
    border-color: var(--club-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--club-brand) 25%, transparent);
}

/* Prefix + number: the NUMBER takes the width. A <select> is as wide as its longest option unless it
   may shrink ("+1 US/CA/…" made it most of the row and the number a sliver), so the prefix gets a
   fixed width and min-width: 0; the open list still shows every option in full. */
.club-phone-row[b-qz8idfe62a] { display: flex; gap: 8px; }

.club-dial[b-qz8idfe62a] {
    flex: 0 0 6.75rem;
    width: 6.75rem;
    min-width: 0;
    font: inherit;
    font-size: 1rem;
    font-weight: 400;
    padding: 13px 8px;
    border: 1px solid var(--club-border);
    border-radius: 12px;
    background: var(--club-bg);
    color: var(--club-text);
    text-overflow: ellipsis;
}

.club-phone-row .club-phone[b-qz8idfe62a] { flex: 1 1 auto; min-width: 0; }

/* WhatsApp code step */
.club-code-sent[b-qz8idfe62a] { margin: 0; font-size: 0.95rem; }
.club-field .club-code[b-qz8idfe62a] { letter-spacing: 0.3em; font-size: 1.3rem; text-align: center; }
.club-code-actions[b-qz8idfe62a] { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.club-link[b-qz8idfe62a] {
    font: inherit;
    font-size: 0.9rem;
    background: none;
    border: none;
    padding: 6px 0;
    color: var(--club-brand);
    text-decoration: underline;
    cursor: pointer;
}

.club-link:disabled[b-qz8idfe62a] { opacity: 0.5; cursor: not-allowed; }
.club-member-note[b-qz8idfe62a] { margin: 0; font-size: 0.8rem; color: var(--club-muted); text-align: center; }

.club-consent[b-qz8idfe62a] { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; line-height: 1.4; }
.club-consent input[b-qz8idfe62a] { width: 20px; height: 20px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--club-brand); }

.club-privacy[b-qz8idfe62a] { margin: -4px 0 0; font-size: 0.75rem; color: var(--club-muted); line-height: 1.45; }

.club-btn[b-qz8idfe62a] {
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    min-height: 52px;
    padding: 14px 20px;
    border: none;
    border-radius: 14px;
    background: var(--club-brand);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 10px 20px -12px var(--club-brand);
    transition: transform 0.1s, opacity 0.15s;
}

.club-btn:active[b-qz8idfe62a] { transform: scale(0.98); }
.club-btn:disabled[b-qz8idfe62a] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

.club-error[b-qz8idfe62a] { margin: 0; color: var(--club-error); font-size: 0.9rem; }

.club-done[b-qz8idfe62a] { text-align: center; }
.club-done h3[b-qz8idfe62a] { margin: 8px 0; font-size: 1.2rem; }
.club-done .club-rule[b-qz8idfe62a] { margin: 0 0 8px; font-weight: 600; color: var(--club-brand); }

.club-done-icon[b-qz8idfe62a] {
    width: 56px;
    height: 56px;
    margin: 4px auto 0;
    border-radius: 50%;
    background: var(--club-brand);
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Claimed: the points counting up, a burst of confetti, where the member now stands. */
.claim-done[b-qz8idfe62a] { position: relative; }
.claim-check[b-qz8idfe62a] { animation: claim-pop-b-qz8idfe62a 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.claim-done-title[b-qz8idfe62a] { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.claim-balance[b-qz8idfe62a] { margin: 0 0 14px; font-weight: 700; color: var(--club-brand); }

.claim-progress[b-qz8idfe62a] {
    height: 10px;
    margin: 0 0 6px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--club-border);
}
.claim-progress span[b-qz8idfe62a] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--club-brand);
    transform-origin: left center;
    animation: claim-grow-b-qz8idfe62a 1.2s 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.claim-next[b-qz8idfe62a] { margin: 0 0 12px; font-size: 0.92rem; color: var(--club-muted); }
.claim-next.ready[b-qz8idfe62a] { color: var(--club-brand); font-weight: 700; }
.claim-visit-note[b-qz8idfe62a], .claim-pay[b-qz8idfe62a] { margin: 0 0 12px; font-size: 0.92rem; }
.claim-joined-note[b-qz8idfe62a] { margin: 0 0 10px; }
.claim-card[b-qz8idfe62a] { display: block; box-sizing: border-box; text-align: center; text-decoration: none; margin-top: 6px; line-height: 24px; }

.claim-confetti[b-qz8idfe62a] { position: absolute; left: 0; right: 0; top: -10px; height: 0; pointer-events: none; }
.claim-confetti i[b-qz8idfe62a] {
    position: absolute;
    top: 0;
    left: calc(6% + var(--i) * 5%);
    width: 8px;
    height: 12px;
    border-radius: 2px;
    background: hsl(calc(var(--i) * 47deg) 85% 55%);
    opacity: 0;
    animation: claim-confetti-b-qz8idfe62a 1.7s calc(var(--i) * 45ms) cubic-bezier(0.2, 0.6, 0.4, 1) both;
}

@keyframes claim-grow-b-qz8idfe62a {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes claim-confetti-b-qz8idfe62a {
    0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
    100% { opacity: 0; transform: translate(calc((var(--i) - 9) * 7px), 280px) rotate(calc(var(--i) * 80deg)); }
}

/* How it works */
.club-how[b-qz8idfe62a] {
    max-width: 460px;
    margin: 14px auto 0;
    box-sizing: border-box;
    padding: 18px 20px;
    border-radius: 20px;
    background: var(--club-card);
    border: 1px solid var(--club-border);
}

.club-how h2[b-qz8idfe62a] { margin: 0 0 12px; font-size: 1rem; }
.club-how ol[b-qz8idfe62a] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.club-how li[b-qz8idfe62a] { display: flex; gap: 12px; align-items: flex-start; font-size: 0.92rem; line-height: 1.45; }

.club-step[b-qz8idfe62a] {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--club-brand);
    background: color-mix(in srgb, var(--club-brand) 14%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .club-spinner[b-qz8idfe62a] { animation: none; }
    .club-btn[b-qz8idfe62a] { transition: none; }
    .claim-ticket[b-qz8idfe62a], .claim-ticket[b-qz8idfe62a]::after, .claim-check[b-qz8idfe62a], .claim-progress span[b-qz8idfe62a] { animation: none; }
    .claim-confetti[b-qz8idfe62a] { display: none; }
}
/* /Pages/Fichar.razor.rz.scp.css */
/* The shift alarm (2026-10-08). Scoped to Fichar.razor; the page's own styles stay in its inline block. */

.fichar-alarm-bar[b-r108orden6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 16px;
    max-width: 900px;
    margin: 0 auto 16px;
    padding: 10px 16px;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.35);
    color: #e0e7ff;
    font-size: 14px;
}

.fichar-alarm-bar.is-armed[b-r108orden6] {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.35);
    color: #d1fae5;
}

.fichar-alarm-bar.is-dropped[b-r108orden6] {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fee2e2;
}

.fichar-alarm-arm[b-r108orden6] {
    appearance: none;
    border: 0;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 15px;
    font-weight: 700;
    background: #6366f1;
    color: #fff;
    cursor: pointer;
}

.fichar-alarm-bar.is-dropped .fichar-alarm-arm[b-r108orden6] {
    background: #ef4444;
}

.fichar-alarm-state[b-r108orden6] {
    font-weight: 700;
}

.fichar-alarm-hint[b-r108orden6] {
    font-size: 13px;
    opacity: 0.85;
}

.fichar-alarm-overlay[b-r108orden6] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.94);
    animation: fichar-alarm-pulse-b-r108orden6 1.6s ease-in-out infinite;
}

@keyframes fichar-alarm-pulse-b-r108orden6 {
    0%, 100% { background: rgba(15, 23, 42, 0.94); }
    50% { background: rgba(127, 29, 29, 0.94); }
}

.fichar-alarm-card[b-r108orden6] {
    width: min(720px, 100%);
    max-height: 100%;
    overflow: auto;
    padding: 24px;
    border: 2px solid #ef4444;
    border-radius: 20px;
    background: #0f172a;
    color: #fff;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.fichar-alarm-bell[b-r108orden6] {
    font-size: 64px;
    line-height: 1;
    animation: fichar-alarm-shake-b-r108orden6 0.5s ease-in-out infinite;
}

@keyframes fichar-alarm-shake-b-r108orden6 {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-12deg); }
    75% { transform: rotate(12deg); }
}

.fichar-alarm-title[b-r108orden6] {
    margin: 12px 0 20px;
    font-size: 32px;
    font-weight: 800;
}

.fichar-alarm-row[b-r108orden6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    text-align: left;
}

.fichar-alarm-who[b-r108orden6] {
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fichar-alarm-name[b-r108orden6] {
    font-size: 22px;
    font-weight: 700;
}

.fichar-alarm-when[b-r108orden6] {
    font-size: 16px;
    opacity: 0.85;
}

.fichar-alarm-go[b-r108orden6] {
    appearance: none;
    min-width: 180px;
    border: 0;
    border-radius: 12px;
    padding: 16px 22px;
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
}

.fichar-alarm-go.is-in[b-r108orden6] {
    background: #10b981;
}

.fichar-alarm-go.is-out[b-r108orden6] {
    background: #f59e0b;
}

.fichar-alarm-later[b-r108orden6] {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 12px;
    padding: 14px 16px;
    background: transparent;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .fichar-alarm-overlay[b-r108orden6],
    .fichar-alarm-bell[b-r108orden6] {
        animation: none;
    }
}

/* After a fichaje: the page goes back to the staff list on its own. */
.fichar-return-note[b-r108orden6] {
    margin-top: 8px;
    text-align: center;
    font-size: 14px;
    color: #94a3b8;
}

/* The location check (Fichar 1.0.5's web twin): reading this device's position at the moment of clocking, and the
   warning when the result is flagged. The fichaje is never held up for it. */
.fichar-locating[b-r108orden6] {
    margin-top: 8px;
    text-align: center;
    font-size: 14px;
    color: #94a3b8;
}

.fichar-location-warning[b-r108orden6] {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.12);
    color: #fcd34d;   /* light amber: #b45309, an amber for light backgrounds, read at ~2.9:1 on this dark page */
    font-size: 14px;
    text-align: center;
}
/* /Pages/Home.razor.rz.scp.css */
[b-0myroo6v3o] .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ===== HERO ===== */

[b-0myroo6v3o] .hh-hero {
    position: relative;
    padding: 96px 0 0;
    text-align: center;
    overflow: hidden;
    background: radial-gradient(ellipse 1200px 600px at 50% 0%, rgba(239, 68, 68, 0.12) 0%, transparent 70%),
                radial-gradient(ellipse at 20% 80%, rgba(168, 85, 247, 0.06) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 50%, rgba(245, 158, 11, 0.05) 0%, transparent 60%);
}

[b-0myroo6v3o] .hh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #fde047;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 28px;
}

[b-0myroo6v3o] .hh-eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2);
    animation: hh-pulse-b-0myroo6v3o 2s ease-in-out infinite;
}

@keyframes hh-pulse-b-0myroo6v3o {
    0%, 100% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2); }
    50% { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0.05); }
}

[b-0myroo6v3o] .hh-hero h1 {
    font-size: clamp(2.6rem, 7vw, 5rem);
    font-weight: 900;
    margin: 0 0 18px;
    letter-spacing: -0.035em;
    line-height: 1.02;
    background: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

[b-0myroo6v3o] .hh-sub {
    color: #94a3b8;
    font-size: clamp(1.05rem, 1.7vw, 1.25rem);
    max-width: 680px;
    margin: 0 auto 36px;
    line-height: 1.6;
}

[b-0myroo6v3o] .hh-cta-row {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

[b-0myroo6v3o] .hh-trust {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    color: #64748b;
    font-size: 0.85rem;
}

[b-0myroo6v3o] .hh-trust > span:first-child {
    color: #fbbf24;
}

[b-0myroo6v3o] .hh-mockup-row {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-top: 80px;
    padding-bottom: 80px;
    flex-wrap: wrap;
    perspective: 1400px;
}

[b-0myroo6v3o] .hh-pos-mock {
    width: 360px;
    background: #0a0c12;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.6);
    transform: rotateY(8deg) rotateX(4deg);
}

[b-0myroo6v3o] .hh-pos-tile {
    aspect-ratio: 1;
    border-radius: 8px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.75rem;
}

[b-0myroo6v3o] .hh-pos-tile span:first-child { color: #f1f5f9; font-weight: 800; }
[b-0myroo6v3o] .hh-pos-tile strong { color: #fff; font-weight: 800; font-size: 0.78rem; }
[b-0myroo6v3o] .hh-pos-tile.t { font-size: 0.7rem; color: rgba(255, 255, 255, 0.6); }
[b-0myroo6v3o] .hh-pos-tile.free { background: #1e293b; }
[b-0myroo6v3o] .hh-pos-tile.free span { color: #475569; }
[b-0myroo6v3o] .hh-pos-tile.occ { background: linear-gradient(135deg, #064e3b, #047857); }
[b-0myroo6v3o] .hh-pos-tile.occ.warn { background: linear-gradient(135deg, #7c2d12, #ea580c); }
[b-0myroo6v3o] .hh-pos-tile.res { background: linear-gradient(135deg, #1e3a8a, #4338ca); }

[b-0myroo6v3o] .hh-qr-mock {
    width: 260px;
    background: linear-gradient(180deg, #0f172a 0%, #1e1b4b 100%);
    border: 6px solid #1f2937;
    border-radius: 28px;
    padding: 16px 14px;
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.6);
    transform: rotateY(-8deg) rotateX(4deg);
}

[b-0myroo6v3o] .hh-qr-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

[b-0myroo6v3o] .hh-round {
    background: linear-gradient(90deg, #f59e0b, #ef4444);
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

[b-0myroo6v3o] .hh-time {
    color: #fbbf24;
    font-size: 0.8rem;
    font-weight: 700;
}

[b-0myroo6v3o] .hh-qr-title {
    color: #f1f5f9;
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 12px;
}

[b-0myroo6v3o] .hh-qr-row {
    background: rgba(255, 255, 255, 0.04);
    padding: 8px 10px;
    border-radius: 8px;
    color: #cbd5e1;
    font-size: 0.85rem;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
}

[b-0myroo6v3o] .hh-qr-row .prem {
    background: linear-gradient(90deg, #a855f7, #ec4899);
    color: #fff;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 800;
}

[b-0myroo6v3o] .hh-qr-bar {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    font-size: 0.85rem;
    margin-top: 12px;
    font-weight: 600;
}

[b-0myroo6v3o] .hh-qr-bar strong { font-size: 1.05rem; font-weight: 900; }

/* ===== FEATURE STRIP ===== */

[b-0myroo6v3o] .hh-features {
    padding: 72px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

[b-0myroo6v3o] .hh-feat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

[b-0myroo6v3o] .hh-feat {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 24px;
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s, background 0.15s;
}

[b-0myroo6v3o] .hh-feat:hover {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-2px);
}

[b-0myroo6v3o] .hh-feat-new {
    border-color: rgba(245, 158, 11, 0.3);
}

[b-0myroo6v3o] .hh-feat-new:hover {
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 12px 32px rgba(245, 158, 11, 0.15);
}

[b-0myroo6v3o] .hh-feat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

[b-0myroo6v3o] .hh-feat h3 {
    color: #f1f5f9;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-0myroo6v3o] .hh-feat p {
    color: #94a3b8;
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0;
}

[b-0myroo6v3o] .hh-new {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    font-size: 0.62rem;
    padding: 1px 7px;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

/* ===== BUFFET BIG CALLOUT ===== */

[b-0myroo6v3o] .hh-buffet {
    padding: 24px 0 72px;
}

[b-0myroo6v3o] .hh-buffet-card {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 48px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(239, 68, 68, 0.08) 100%);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 24px;
    padding: 48px;
    align-items: center;
}

[b-0myroo6v3o] .hh-buffet-eye {
    color: #fde047;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

[b-0myroo6v3o] .hh-buffet-text h2 {
    font-size: clamp(1.85rem, 3.5vw, 2.6rem);
    font-weight: 800;
    color: #f1f5f9;
    margin: 0 0 14px;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

[b-0myroo6v3o] .hh-buffet-text p {
    color: #cbd5e1;
    font-size: 1.02rem;
    line-height: 1.6;
    margin: 0 0 28px;
}

[b-0myroo6v3o] .hh-buffet-cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

[b-0myroo6v3o] .hh-buffet-stats {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-left: 32px;
    border-left: 1px solid rgba(245, 158, 11, 0.3);
}

[b-0myroo6v3o] .hh-buffet-stats > div {
    display: flex;
    flex-direction: column;
}

[b-0myroo6v3o] .hh-buffet-stats strong {
    font-size: 2.5rem;
    font-weight: 900;
    color: #fde047;
    letter-spacing: -0.03em;
    line-height: 1;
}

[b-0myroo6v3o] .hh-buffet-stats span {
    color: #94a3b8;
    font-size: 0.88rem;
    margin-top: 4px;
}

/* ===== TYPES OF RESTAURANTS ===== */

[b-0myroo6v3o] .hh-types {
    padding: 72px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

[b-0myroo6v3o] .hh-types h2 {
    font-size: clamp(1.85rem, 3.5vw, 2.6rem);
    font-weight: 800;
    color: #f1f5f9;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
    text-align: center;
}

[b-0myroo6v3o] .hh-types-sub {
    color: #94a3b8;
    text-align: center;
    margin: 0 0 36px;
    font-size: 1.05rem;
}

[b-0myroo6v3o] .hh-types-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

[b-0myroo6v3o] .hh-type {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 24px;
    text-align: center;
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}

[b-0myroo6v3o] .hh-type:hover {
    border-color: rgba(255, 255, 255, 0.14);
    transform: translateY(-2px);
}

[b-0myroo6v3o] .hh-type-new {
    border-color: rgba(245, 158, 11, 0.3);
}

[b-0myroo6v3o] .hh-type-new:hover {
    border-color: rgba(245, 158, 11, 0.5);
}

[b-0myroo6v3o] .hh-type-icon {
    font-size: 2.2rem;
    margin-bottom: 12px;
}

[b-0myroo6v3o] .hh-type h3 {
    color: #f1f5f9;
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 6px;
}

[b-0myroo6v3o] .hh-type p {
    color: #94a3b8;
    font-size: 0.85rem;
    margin: 0;
}

/* ===== SHARED CTAs ===== */

[b-0myroo6v3o] .btn-primary,
[b-0myroo6v3o] .btn-secondary {
    padding: 14px 26px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: transform 0.1s, box-shadow 0.15s;
    display: inline-block;
}

[b-0myroo6v3o] .btn-primary {
    background: linear-gradient(135deg, #c62828 0%, #ef4444 100%);
    color: #fff;
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35);
}

[b-0myroo6v3o] .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(239, 68, 68, 0.5);
}

[b-0myroo6v3o] .btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[b-0myroo6v3o] .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ===== FINAL CTA STRIP ===== */

[b-0myroo6v3o] .cta-strip {
    padding: 80px 0;
    text-align: center;
    background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.1) 0%, transparent 70%);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

[b-0myroo6v3o] .cta-strip h2 {
    font-size: clamp(1.85rem, 3vw, 2.5rem);
    font-weight: 800;
    margin: 0 0 12px;
    letter-spacing: -0.02em;
    color: #f1f5f9;
}

[b-0myroo6v3o] .cta-strip p {
    color: #94a3b8;
    font-size: 1.1rem;
    margin: 0 0 32px;
}

[b-0myroo6v3o] .cta-row {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1080px) {
    [b-0myroo6v3o] .hh-feat-grid { grid-template-columns: repeat(2, 1fr); }
    [b-0myroo6v3o] .hh-types-grid { grid-template-columns: repeat(2, 1fr); }
    [b-0myroo6v3o] .hh-buffet-card {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 32px;
    }
    [b-0myroo6v3o] .hh-buffet-stats {
        flex-direction: row;
        padding-left: 0;
        padding-top: 24px;
        border-left: 0;
        border-top: 1px solid rgba(245, 158, 11, 0.3);
        gap: 32px;
    }
}

@media (max-width: 720px) {
    [b-0myroo6v3o] .hh-hero { padding: 64px 0 0; }
    [b-0myroo6v3o] .hh-mockup-row {
        gap: 16px;
        margin-top: 56px;
        padding-bottom: 56px;
    }
    [b-0myroo6v3o] .hh-pos-mock {
        width: 280px;
        transform: rotateY(4deg);
    }
    [b-0myroo6v3o] .hh-qr-mock {
        width: 220px;
        transform: rotateY(-4deg);
    }
    [b-0myroo6v3o] .hh-feat-grid { grid-template-columns: 1fr; }
    [b-0myroo6v3o] .hh-types-grid { grid-template-columns: 1fr; }
    [b-0myroo6v3o] .hh-buffet-stats {
        flex-direction: column;
        gap: 16px;
    }
}
/* /Pages/Kiosk.razor.rz.scp.css */
.kiosk-page[b-p15og3sva4] {
    /* Design tokens — one place to coordinate colour/type/elevation/motion, and the
       hook for per-restaurant brand theming (--k-accent is overridden inline from
       _menu.Branding.AccentColor, so every kiosk stops looking identically green). */
    --k-bg: #f5f6f8;
    --k-surface: #fff;
    --k-surface-2: #f5f7fa;
    --k-ink: #15161f;
    --k-ink-2: #5b6171;
    --k-ink-3: #9aa0ad;
    --k-line: #e8eaef;
    --k-accent: #2ecc71;
    --k-accent-press: #27ae60;
    --k-accent-soft: rgba(46, 204, 113, 0.14);
    --k-danger: #e74c3c;
    /* Constant dark chip (NOT overridden by themes) — qty badge / promo / combo badge
       always need dark-bg + white text, so they can't follow --k-ink (which inverts on
       dark themes → white-on-white). */
    --k-chip: #15161f;
    --k-chip-ink: #fff;
    --radius-sm: 14px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-pill: 999px;
    --e1: 0 1px 2px rgba(20, 22, 40, 0.05);
    --e2: 0 6px 20px -8px rgba(20, 22, 40, 0.16);
    --e3: 0 18px 56px -14px rgba(20, 22, 40, 0.32);
    --dur-1: 130ms;
    --dur-2: 240ms;
    --ease-emph: cubic-bezier(0.16, 1, 0.3, 1);

    position: fixed;
    inset: 0;
    background: var(--k-bg);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* ===== Phase Transition ===== */
.kiosk-welcome[b-p15og3sva4],
.kiosk-fulfillment[b-p15og3sva4],
.kiosk-menu[b-p15og3sva4],
.kiosk-cart[b-p15og3sva4],
.kiosk-confirmation[b-p15og3sva4] {
    animation: fadeIn-b-p15og3sva4 0.25s ease;
}

/* Slide-only (no opacity fade): on a kiosk touchscreen the opacity:0 start made
   the fulfillment/cart screens look washed-out/blank for a moment. Keeping just
   the gentle upward slide animates the phase change without ever dropping contrast. */
@keyframes fadeIn-b-p15og3sva4 {
    from { transform: translateY(6px); }
    to { transform: translateY(0); }
}

/* ===== Loading / Fatal ===== */
.kiosk-loading[b-p15og3sva4],
.kiosk-fatal[b-p15og3sva4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    background: linear-gradient(160deg, #0f0c29, #302b63, #24243e);
    color: white;
    text-align: center;
    padding: 40px;
}

.kiosk-fatal-icon[b-p15og3sva4] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
}

.kiosk-fatal h2[b-p15og3sva4] { font-size: 2rem; margin: 0; }
.kiosk-fatal p[b-p15og3sva4] { font-size: 1.2rem; opacity: 0.6; margin: 0; max-width: 400px; }

.kiosk-spinner[b-p15og3sva4] {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255,255,255,0.15);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-p15og3sva4 0.8s linear infinite;
}

@keyframes spin-b-p15og3sva4 { to { transform: rotate(360deg); } }

/* ===== Welcome Screen ===== */
.kiosk-welcome[b-p15og3sva4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    cursor: pointer;
    background: linear-gradient(160deg, #0f0c29, #302b63, #24243e);
    color: white;
    text-align: center;
    padding: 40px;
}

.kiosk-logo[b-p15og3sva4] {
    max-width: 200px;
    max-height: 200px;
    object-fit: contain;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.kiosk-welcome h1[b-p15og3sva4] {
    font-size: 3rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.02em;
}

.kiosk-welcome:active[b-p15og3sva4] {
    background: linear-gradient(160deg, #0a0820, #252050, #1e1e34);
}

.kiosk-tap[b-p15og3sva4] {
    font-size: 1.4rem;
    opacity: 0.6;
    margin: 0;
}

.kiosk-tap-ring[b-p15og3sva4] {
    width: 80px;
    height: 80px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    animation: tapRing-b-p15og3sva4 2.5s ease-in-out infinite;
    margin-top: 8px;
}

@keyframes tapRing-b-p15og3sva4 {
    0% { transform: scale(0.8); opacity: 0.6; }
    50% { transform: scale(1.1); opacity: 0.2; }
    100% { transform: scale(0.8); opacity: 0.6; }
}

/* Language picker */
.kiosk-lang-picker[b-p15og3sva4] {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.kiosk-lang-btn[b-p15og3sva4] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.kiosk-lang-btn:hover[b-p15og3sva4] {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.kiosk-lang-btn.active[b-p15og3sva4] {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.6);
    color: #fff;
    font-weight: 600;
}

.kiosk-lang-btn:focus-visible[b-p15og3sva4] {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.kiosk-paused-banner[b-p15og3sva4] {
    background: rgba(231, 76, 60, 0.9);
    backdrop-filter: blur(8px);
    color: white;
    padding: 16px 32px;
    border-radius: 16px;
    font-size: 1.2rem;
    font-weight: 500;
    margin-top: 12px;
    max-width: 500px;
}

/* ===== Fulfillment Choice ===== */
.kiosk-fulfillment[b-p15og3sva4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    background: var(--k-bg);
}

.kiosk-fulfillment h2[b-p15og3sva4] {
    font-size: 2.2rem;
    color: var(--k-ink);
    font-weight: 700;
    letter-spacing: -0.02em;
    /* Center + edge padding so the long title doesn't press the left edge in
       portrait (e.g. 390px) — h2 defaults to left-aligned and spans full width. */
    text-align: center;
    padding: 0 24px;
}

.kiosk-fulfillment-options[b-p15og3sva4] {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 24px;
}

.kiosk-choice[b-p15og3sva4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 56px;
    border: 2px solid var(--k-line);
    border-radius: 24px;
    background: var(--k-surface);
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--k-ink);
    transition: all 0.15s;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    min-width: 200px;
}

.kiosk-choice:hover[b-p15og3sva4] {
    border-color: #2ecc71;
    background: #f0fff4;
    box-shadow: 0 4px 20px rgba(46,204,113,0.15);
}

.kiosk-choice:active[b-p15og3sva4] {
    border-color: #2ecc71;
    background: #f0fff4;
    transform: scale(0.96);
    box-shadow: 0 2px 16px rgba(46,204,113,0.2);
}

.kiosk-choice:focus-visible[b-p15og3sva4] {
    outline: 2px solid #2ecc71;
    outline-offset: 2px;
}

.kiosk-choice-icon[b-p15og3sva4] { font-size: 3.5rem; }

.kiosk-btn-cancel-small[b-p15og3sva4] {
    background: none;
    border: none;
    color: #475569;            /* was #aaa — too faint to read on a kiosk */
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;          /* touch target (was ~40px) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 28px;
    transition: color 0.15s;
}

.kiosk-btn-cancel-small:hover[b-p15og3sva4] { color: var(--k-ink-2); }

/* ===== Header ===== */
.kiosk-header[b-p15og3sva4] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: var(--k-surface);
    border-bottom: 1px solid var(--k-line);
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.kiosk-header h2[b-p15og3sva4] {
    flex: 1;
    min-width: 0;                 /* allow the title to shrink instead of pushing the actions off-screen */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    color: var(--k-ink);
}

.kiosk-back[b-p15og3sva4] {
    background: none;
    border: 2px solid var(--k-line);
    border-radius: 12px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--k-ink-2);
    transition: all 0.1s;
}

.kiosk-back:hover[b-p15og3sva4] { background: var(--k-surface-2); border-color: #ccc; }
.kiosk-back:active[b-p15og3sva4] { background: var(--k-surface-2); transform: scale(0.95); }
.kiosk-back:focus-visible[b-p15og3sva4] { outline: 2px solid #2ecc71; outline-offset: 2px; }

.kiosk-cart-btn[b-p15og3sva4] {
    background: #2ecc71;
    color: white;
    border: none;
    border-radius: 14px;
    padding: 12px 20px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.1s;
    box-shadow: 0 2px 8px rgba(46,204,113,0.3);
}

.kiosk-cart-btn:hover[b-p15og3sva4] { background: #27ae60; box-shadow: 0 4px 14px rgba(46,204,113,0.4); }
.kiosk-cart-btn:active[b-p15og3sva4] { background: #27ae60; transform: scale(0.96); }
.kiosk-cart-btn:focus-visible[b-p15og3sva4] { outline: 2px solid #fff; outline-offset: 2px; }

.kiosk-cart-count[b-p15og3sva4] {
    background: rgba(255,255,255,0.25);
    border-radius: 8px;
    padding: 2px 8px;
    font-size: 0.95rem;
}

.kiosk-cart-total[b-p15og3sva4] { font-size: 0.95rem; opacity: 0.9; }

/* ===== Menu / Grid ===== */
.kiosk-menu[b-p15og3sva4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--k-bg);
}

.kiosk-grid[b-p15og3sva4] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    padding-bottom: 32px;
    display: grid;
    gap: 14px;
    align-content: start;
    /* Size rows to the tile's full content. Without this, a long flat/section grid
       inside this flex:1 + overflow container collapsed `auto` rows to min-content
       (the image area shrank to 0 → 25px "white pill" tiles); max-content keeps each
       row at the real card height and the grid scrolls instead. */
    grid-auto-rows: max-content;
    /* Center the grid on wide kiosk screens so categories/items don't sprawl
       edge-to-edge with big empty gaps (no effect ≤1100px, e.g. portrait). */
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent 100%);
}

/* auto-fit (not auto-fill): with few categories the tracks collapse and the
   cards stretch to fill the centered 1100px grid instead of left-packing with
   empty columns on the right. Portrait (1 col) is unchanged. */
.kiosk-categories[b-p15og3sva4] { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.kiosk-items[b-p15og3sva4] { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

.kiosk-tile[b-p15og3sva4] {
    background: var(--k-surface);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    position: relative;
}

.kiosk-tile:active[b-p15og3sva4] {
    transform: scale(0.96);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.kiosk-tile-added[b-p15og3sva4] {
    animation: addFlash-b-p15og3sva4 0.4s ease;
}

@keyframes addFlash-b-p15og3sva4 {
    0% { box-shadow: 0 0 0 0 rgba(46,204,113,0.6); }
    50% { box-shadow: 0 0 0 8px rgba(46,204,113,0.2); transform: scale(0.97); }
    100% { box-shadow: 0 2px 10px rgba(20,20,50,0.06); transform: scale(1); }
}

/* Media: image with a coloured-monogram fallback. The monogram sits underneath;
   a present, loaded <img> covers it. When the image has no URL (.no-img) or 404s
   (JS adds .img-failed) the gradient + monogram show instead of a broken-image. */
.kiosk-tile-media[b-p15og3sva4] {
    position: relative;
    width: 100%;
    height: 140px;
    flex: 0 0 140px;   /* never let the column-flex shrink the image area to 0 (the
                          long flat-grid compressed it → 25px "white pill" tiles) */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--mono-bg, linear-gradient(135deg, #eef1f5, #e2e6ec));
}

.kiosk-tile-media img[b-p15og3sva4] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kiosk-tile-media.img-failed img[b-p15og3sva4] { display: none; }

.kiosk-tile-mono[b-p15og3sva4] {
    font-size: 2.6rem;
    font-weight: 800;
    color: rgba(20, 20, 40, 0.34);
    letter-spacing: 0.02em;
}

.kiosk-tile-label[b-p15og3sva4] {
    padding: 12px 14px;
    font-weight: 600;
    font-size: 1.05rem;
    text-align: center;
    color: var(--k-ink);
}

.kiosk-item-info[b-p15og3sva4] {
    padding: 10px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kiosk-item-name[b-p15og3sva4] {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--k-ink);
}

.kiosk-item-price[b-p15og3sva4] {
    color: #2ecc71;
    font-weight: 700;
    font-size: 1.05rem;
}

.kiosk-badge[b-p15og3sva4] {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--k-chip);
    color: white;
    border-radius: 10px;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* ===== Empty State ===== */
.kiosk-empty-state[b-p15og3sva4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    color: #999;
    font-size: 1.2rem;
    padding: 40px;
}

/* ===== Cart ===== */
.kiosk-cart[b-p15og3sva4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--k-bg);
}

.kiosk-cart-items[b-p15og3sva4] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 24px;
    -webkit-overflow-scrolling: touch;
}

.kiosk-cart-row[b-p15og3sva4] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--k-line);
}

.kiosk-cart-row:last-child[b-p15og3sva4] {
    border-bottom: none;
}

.kiosk-cart-item-info[b-p15og3sva4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kiosk-cart-name[b-p15og3sva4] {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--k-ink);
}

.kiosk-cart-variant[b-p15og3sva4] {
    font-size: 0.85rem;
    color: var(--k-ink-2);
}

.kiosk-cart-unit[b-p15og3sva4] {
    font-size: 0.8rem;
    color: #aaa;
}

.kiosk-cart-controls[b-p15og3sva4] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kiosk-qty-btn[b-p15og3sva4] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: none;
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.1s;
}

.kiosk-qty-minus[b-p15og3sva4] {
    background: var(--k-surface-2);
    color: var(--k-ink-2);
}

.kiosk-qty-minus:active[b-p15og3sva4] { background: var(--k-line); transform: scale(0.93); }

.kiosk-qty-plus[b-p15og3sva4] {
    background: #2ecc71;
    color: white;
}

.kiosk-qty-plus:active[b-p15og3sva4] { background: #27ae60; transform: scale(0.93); }

.kiosk-qty[b-p15og3sva4] {
    font-size: 1.3rem;
    font-weight: 700;
    min-width: 28px;
    text-align: center;
    color: var(--k-ink);
}

.kiosk-cart-price[b-p15og3sva4] {
    font-weight: 700;
    font-size: 1.15rem;
    min-width: 80px;
    text-align: right;
    color: var(--k-ink);
}

.kiosk-cart-footer[b-p15og3sva4] {
    padding: 20px 24px;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    background: var(--k-surface);
    border-top: 1px solid var(--k-line);
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.04);
}

.kiosk-total[b-p15og3sva4] {
    display: flex;
    justify-content: space-between;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--k-ink);
}

/* Promotions running now: the sum, one row per promotion, then the total after them. */
.kiosk-subtotal[b-p15og3sva4],
.kiosk-promo-row[b-p15og3sva4] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 1.1rem;
    font-feature-settings: 'tnum';
    margin-bottom: -6px;
}

.kiosk-subtotal[b-p15og3sva4] { color: var(--k-ink); opacity: 0.75; }

.kiosk-promo-row[b-p15og3sva4] { color: #16a34a; font-weight: 600; }

.kiosk-btn-primary[b-p15og3sva4] {
    background: #2ecc71;
    color: white;
    border: none;
    border-radius: 16px;
    padding: 18px;
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.12s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 16px rgba(46,204,113,0.3);
}

.kiosk-btn-primary:active[b-p15og3sva4] {
    background: #27ae60;
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(46,204,113,0.3);
}

.kiosk-btn-primary:disabled[b-p15og3sva4] {
    background: #bdc3c7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.kiosk-btn-spinner[b-p15og3sva4] {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-p15og3sva4 0.7s linear infinite;
}

.kiosk-btn-secondary[b-p15og3sva4] {
    background: none;
    border: 2px solid var(--k-line);
    border-radius: 16px;
    padding: 14px;
    font-size: 1.05rem;
    color: var(--k-ink-2);
    cursor: pointer;
    transition: all 0.1s;
}

.kiosk-btn-secondary:active[b-p15og3sva4] { background: var(--k-surface-2); transform: scale(0.98); }

/* Destructive button for the cancel-order confirmation */
.kiosk-btn-danger[b-p15og3sva4] {
    border: none;
    border-radius: 16px;
    padding: 16px;
    min-height: 56px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    background: #e74c3c;
    cursor: pointer;
    transition: background 0.12s, transform 0.1s;
}
.kiosk-btn-danger:active[b-p15og3sva4] { background: #c0392b; transform: scale(0.98); }

/* Cart-cancel confirmation sheet — misfire guard on a public kiosk so a tap on
   "Cancelar" doesn't instantly wipe a built-up basket. */
.kiosk-confirm-overlay[b-p15og3sva4] {
    position: fixed;
    inset: 0;
    background: rgba(15, 12, 41, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 50;
}
.kiosk-confirm-sheet[b-p15og3sva4] {
    background: var(--k-surface);
    border-radius: 24px;
    padding: 32px 28px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    box-shadow: 0 16px 56px rgba(0, 0, 0, 0.28);
}
.kiosk-confirm-sheet h2[b-p15og3sva4] {
    font-size: 1.6rem;
    color: var(--k-ink);
    font-weight: 700;
    margin: 0 0 24px;
}
.kiosk-confirm-sheet-actions[b-p15og3sva4] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Menú del Día "what's included" line */
.kiosk-mdd-includes[b-p15og3sva4] { color: var(--k-accent-press); font-weight: 600; }

/* Pay-at-kiosk (Stripe Payment Element) */
.kiosk-payment-body[b-p15og3sva4] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
    -webkit-overflow-scrolling: touch;
}
.kiosk-pay-total[b-p15og3sva4] { font-size: 1.4rem; color: var(--k-ink); margin: 0 0 20px; text-align: center; }
.kiosk-pay-total strong[b-p15og3sva4] { color: var(--k-accent-press); }
.kiosk-stripe-element[b-p15og3sva4] { min-height: 60px; }
.kiosk-pay-error[b-p15og3sva4] { color: #e74c3c; font-weight: 600; margin-top: 16px; text-align: center; }

/* Pay-method choice: card-on-screen vs phone (QR) */
.kiosk-pay-choice[b-p15og3sva4] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 8px 0 4px;
}
.kiosk-pay-option[b-p15og3sva4] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
    border: 2px solid var(--k-line, rgba(0,0,0,.1));
    border-radius: 18px;
    background: var(--k-surface);
    color: var(--k-ink);
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .12s, transform .05s;
}
.kiosk-pay-option:active[b-p15og3sva4] { transform: translateY(1px); }
.kiosk-pay-option:hover[b-p15og3sva4] { border-color: var(--k-accent, #16a34a); }
.kiosk-pay-option-icon[b-p15og3sva4] { font-size: 2rem; line-height: 1; }

/* Phone (QR) pay */
.kiosk-pay-qr[b-p15og3sva4] { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 4px 0; }
.kiosk-pay-qr-hint[b-p15og3sva4] { font-size: 1.15rem; color: var(--k-ink); text-align: center; margin: 0; }
.kiosk-pay-qr-img[b-p15og3sva4] {
    width: 240px;
    height: 240px;
    background: #fff;
    padding: 12px;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    image-rendering: pixelated;
}
.kiosk-pay-waiting[b-p15og3sva4] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--k-ink-2, #6b7280);
    font-size: 1.05rem;
}

/* Factura QR on the confirmation screen (printer-less kiosks) */
.kiosk-factura-qr[b-p15og3sva4] {
    margin: 14px auto 0;
    background: #fff;
    padding: 16px;
    border-radius: 16px;
    max-width: 280px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.kiosk-factura-qr img[b-p15og3sva4] { width: 200px; height: 200px; image-rendering: pixelated; }
.kiosk-factura-qr p[b-p15og3sva4] { margin: 8px 0 0; color: #4b5563; font-size: 0.95rem; }
.kiosk-payment-footer[b-p15og3sva4] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 24px;
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
    border-top: 1px solid var(--k-line);
    background: var(--k-surface);
}
.kiosk-pay-btn[b-p15og3sva4] { font-size: 1.2rem; padding: 18px; }

/* Drink/dessert gap-fill grid */
.kiosk-gapfill-grid[b-p15og3sva4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}
.kiosk-gapfill-tile[b-p15og3sva4] { border: none; background: var(--k-surface); padding: 0; text-align: left; cursor: pointer; }

/* Combo-upgrade prompt */
.kiosk-upsell-emoji[b-p15og3sva4] { font-size: 2.6rem; line-height: 1; margin-bottom: 6px; }
.kiosk-upsell-msg[b-p15og3sva4] { font-size: 1.1rem; color: var(--k-ink-2); margin: 4px 0 18px; }

/* ===== Confirmation ===== */
.kiosk-confirmation[b-p15og3sva4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    background: linear-gradient(160deg, #0f0c29, #302b63, #24243e);
    color: white;
    text-align: center;
    cursor: pointer;
    padding: 40px;
}

.kiosk-confirm-card[b-p15og3sva4] {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(16px);
    border-radius: 28px;
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    max-width: 400px;
    width: 100%;
}

.kiosk-check[b-p15og3sva4] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #2ecc71;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    animation: popIn-b-p15og3sva4 0.4s ease;
    box-shadow: 0 4px 20px rgba(46,204,113,0.4);
}

@keyframes popIn-b-p15og3sva4 {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

.kiosk-confirmation h1[b-p15og3sva4] {
    font-size: 2rem;
    margin: 0;
    font-weight: 700;
}

.kiosk-confirm-divider[b-p15og3sva4] {
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 4px 0;
}

.kiosk-confirm-label[b-p15og3sva4] {
    font-size: 1.1rem;
    opacity: 0.5;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kiosk-ticket-big[b-p15og3sva4] {
    font-size: 4.5rem;
    font-weight: 800;
    margin: 0;
    line-height: 1;
    /* No pop-in animation: this number is the customer's order proof, so it must
       be at full opacity the instant the confirmation appears (the delayed
       popIn left it invisible for ~0.15s after the "número de pedido" label). */
    letter-spacing: -0.02em;
}

.kiosk-confirm-fulfillment[b-p15og3sva4] {
    font-size: 1rem;
    opacity: 0.5;
    margin: 0;
    font-weight: 500;
    letter-spacing: 0.03em;
}

.kiosk-confirm-total[b-p15og3sva4] {
    font-size: 1.2rem;
    opacity: 0.7;
    margin: 0;
}

.kiosk-wait[b-p15og3sva4] {
    font-size: 1.1rem;
    opacity: 0.5;
    margin: 0;
}

/* Explicit "new order" CTA — the deliberate way to reset (tapping the screen only
   extends the countdown now, so the pickup number can't be wiped by accident). */
.kiosk-new-order-btn[b-p15og3sva4] {
    margin-top: 28px;
    padding: 16px 40px;
    font-size: 1.1rem;
}

.kiosk-countdown[b-p15og3sva4] {
    font-size: 0.9rem;
    opacity: 0.3;
}

/* ===== Toast ===== */
.kiosk-toast[b-p15og3sva4] {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    padding: 16px 32px;
    border-radius: 14px;
    font-size: 1.05rem;
    font-weight: 500;
    cursor: pointer;
    z-index: 1000;
    animation: slideUp-b-p15og3sva4 0.3s ease;
    max-width: 90%;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.kiosk-toast-error[b-p15og3sva4] { background: #e74c3c; }
.kiosk-toast-success[b-p15og3sva4] { background: #2ecc71; }

/* Error toast with a one-tap recovery action (e.g. "Quitar y enviar"). */
.kiosk-toast-action[b-p15og3sva4] {
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: default;
    padding: 14px 16px 14px 24px;
    text-align: left;
}
.kiosk-toast-action .kiosk-toast-msg[b-p15og3sva4] { flex: 1; }
.kiosk-toast-btn[b-p15og3sva4] {
    flex-shrink: 0;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    color: #c0392b;
    font-weight: 700;
    font-size: 1rem;
    padding: 10px 18px;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
}
.kiosk-toast-btn:active[b-p15og3sva4] { transform: scale(0.96); }

@keyframes slideUp-b-p15og3sva4 {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ============================================================
   Premium polish + new layouts (scroll / tabs / grid),
   header language control, item descriptions, language sheet.
   ============================================================ */

/* Softer, more premium tiles. */
.kiosk-tile[b-p15og3sva4] {
    border: 1px solid rgba(20, 20, 50, 0.05);
    box-shadow: 0 2px 10px rgba(20, 20, 50, 0.06);
}

/* Cap category cards + centre them so a 2-category menu doesn't stretch into two
   giant tiles stranded in whitespace (the old auto-fit/1fr did exactly that). */
.kiosk-categories[b-p15og3sva4] {
    grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
    justify-content: center;
}

/* Header right-side actions (language globe + cart). */
.kiosk-header-actions[b-p15og3sva4] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;               /* keep the language globe + cart button fully on screen */
}

.kiosk-lang-globe[b-p15og3sva4] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: 2px solid var(--k-line);
    background: var(--k-surface);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s, background 0.12s;
}
.kiosk-lang-globe:active[b-p15og3sva4] { transform: scale(0.94); background: var(--k-surface-2); }
.kiosk-lang-globe:focus-visible[b-p15og3sva4] { outline: 2px solid #2ecc71; outline-offset: 2px; }

/* Item description (2-line clamp) under the name. */
.kiosk-item-desc[b-p15og3sva4] {
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--k-ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== Tabs layout ===== */
/* Wrap (don't horizontal-scroll-with-hidden-scrollbar): on a self-service kiosk a
   first-time customer won't think to swipe, so trailing categories must stay
   visible. Same reasoning as the TableSlidePanel .edge-tabs--functions fix. */
.kiosk-tabs[b-p15og3sva4] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    row-gap: 8px;
    padding: 12px 20px;
    background: var(--k-surface);
    border-bottom: 1px solid var(--k-line);
    flex-shrink: 0;
}

.kiosk-tab[b-p15og3sva4] {
    flex: 0 0 auto;
    padding: 12px 22px;
    border-radius: 14px;
    border: 2px solid var(--k-line);
    background: var(--k-surface);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--k-ink-2);
    cursor: pointer;
    min-height: 48px;
    transition: transform 0.12s, background 0.12s, border-color 0.12s, color 0.12s;
}
.kiosk-tab:active[b-p15og3sva4] { transform: scale(0.97); }
.kiosk-tab.active[b-p15og3sva4] {
    background: #2ecc71;
    border-color: #2ecc71;
    color: #fff;
    box-shadow: 0 4px 14px rgba(46, 204, 113, 0.3);
}

/* ===== Scroll layout (one page, sticky category headers) ===== */
.kiosk-layout-scroll .kiosk-scroll[b-p15og3sva4] {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
}
.kiosk-layout-scroll .kiosk-grid[b-p15og3sva4] {
    flex: none;
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
    padding-top: 6px;
}
/* Offset scrollIntoView (tap-a-chip) so the section header isn't hidden behind the
   sticky category chips. ~chip-strip height. */
.kiosk-section[b-p15og3sva4] { scroll-margin-top: 64px; }
.kiosk-section-header[b-p15og3sva4] {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0;
    padding: 16px 20px 10px;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--k-ink);
    background: linear-gradient(180deg, var(--k-bg) 72%, rgba(248, 249, 250, 0));
}

/* ===== Language sheet (opened from the menu header 🌐) ===== */
.kiosk-lang-overlay[b-p15og3sva4] {
    position: fixed;
    inset: 0;
    background: rgba(15, 12, 41, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 60;
}
.kiosk-lang-sheet[b-p15og3sva4] {
    background: var(--k-surface);
    border-radius: 24px;
    padding: 24px;
    max-width: 560px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 16px 56px rgba(0, 0, 0, 0.3);
}
.kiosk-lang-grid[b-p15og3sva4] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
/* Re-skin the (dark-on-light) language pills for the white sheet. */
.kiosk-lang-sheet .kiosk-lang-btn[b-p15og3sva4] {
    border: 1px solid var(--k-line);
    background: var(--k-surface-2);
    color: var(--k-ink-2);
}
.kiosk-lang-sheet .kiosk-lang-btn:hover[b-p15og3sva4] { background: #eef0f3; color: var(--k-ink); }
.kiosk-lang-sheet .kiosk-lang-btn.active[b-p15og3sva4] {
    background: var(--k-accent);
    border-color: var(--k-accent);
    color: #fff;
    font-weight: 700;
}

/* ============================================================
   Premium pass: brand-accent retint, merchandising chips,
   promo banner, featured rail, bottom cart bar, a11y.
   (Appended overrides win by source order.)
   ============================================================ */

/* Accent-driven elements now follow --k-accent (per-restaurant brand colour). */
.kiosk-btn-primary[b-p15og3sva4] { background: var(--k-accent); box-shadow: 0 4px 16px -4px var(--k-accent-soft); }
.kiosk-btn-primary:active[b-p15og3sva4] { background: var(--k-accent-press); }
.kiosk-qty-plus[b-p15og3sva4] { background: var(--k-accent); }
.kiosk-qty-plus:active[b-p15og3sva4] { background: var(--k-accent-press); }
.kiosk-tab.active[b-p15og3sva4] { background: var(--k-accent); border-color: var(--k-accent); box-shadow: 0 4px 14px -4px var(--k-accent-soft); }
.kiosk-check[b-p15og3sva4] { background: var(--k-accent); }
.kiosk-cart-btn[b-p15og3sva4] { background: var(--k-accent); }
.kiosk-cart-btn:hover[b-p15og3sva4], .kiosk-cart-btn:active[b-p15og3sva4] { background: var(--k-accent-press); }
.kiosk-choice:hover[b-p15og3sva4], .kiosk-choice:active[b-p15og3sva4] { border-color: var(--k-accent); background: var(--k-accent-soft); box-shadow: 0 4px 20px -6px var(--k-accent-soft); }
.kiosk-lang-globe:focus-visible[b-p15og3sva4], .kiosk-back:focus-visible[b-p15og3sva4] { outline-color: var(--k-accent); }

/* Premium tiles + high-contrast pricing (green-on-white failed WCAG AA). */
.kiosk-tile[b-p15og3sva4] { box-shadow: var(--e2); border-radius: var(--radius-md); }
.kiosk-item-price[b-p15og3sva4] { color: var(--k-ink); font-feature-settings: 'tnum'; }
.kiosk-total[b-p15og3sva4] { font-feature-settings: 'tnum'; }
.kiosk-cart-price[b-p15og3sva4] { font-feature-settings: 'tnum'; }

/* Was-price / happy-hour scheduled pricing (OriginalPrice + PriceRuleName). */
.kiosk-price-row[b-p15og3sva4] { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.kiosk-item-was[b-p15og3sva4] {
    text-decoration: line-through;
    color: var(--k-ink-3);
    font-size: 0.85rem;
    font-weight: 600;
    font-feature-settings: 'tnum';
}
.kiosk-item-price.is-deal[b-p15og3sva4] { color: var(--k-danger); }
.kiosk-rule-chip[b-p15og3sva4] {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--k-accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 4px 9px;
    border-radius: var(--radius-pill);
    box-shadow: var(--e1);
    z-index: 3;
}

/* Out-of-stock treatment (IsOutOfStock). */
.kiosk-tile-oos[b-p15og3sva4] { opacity: 0.72; }
.kiosk-tile-oos:active[b-p15og3sva4] { transform: none; box-shadow: var(--e2); }
.kiosk-oos-ribbon[b-p15og3sva4] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 22, 40, 0.5);
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    z-index: 3;
}

/* Dietary/spice/new tags + EU-FIC allergen icons (Tags + AllergenFlags). */
.kiosk-item-meta[b-p15og3sva4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 1px;
}
.kiosk-tag[b-p15og3sva4] {
    background: var(--k-surface-2);
    color: var(--k-ink-2);
    border-radius: var(--radius-pill);
    padding: 2px 9px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: capitalize;
}
.kiosk-allergens[b-p15og3sva4] {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    font-size: 0.85rem;
    line-height: 1;
    /* now a tappable button — reset default button chrome */
    border: none;
    background: transparent;
    padding: 2px 4px;
    margin: 0;
    border-radius: 8px;
    cursor: pointer;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}
.kiosk-allergens:active[b-p15og3sva4] { background: var(--k-surface-2); transform: scale(0.96); }
.kiosk-allergen-i[b-p15og3sva4] { margin-inline-start: 3px; font-size: 0.8rem; color: var(--k-ink-3); }

/* Operator promo ribbon (PromoBanner). */
.kiosk-promo-banner[b-p15og3sva4] {
    flex-shrink: 0;
    padding: 12px 20px;
    background: var(--k-chip);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
}

/* "Destacados" featured rail (IsFeatured / FeaturedOrder). */
.kiosk-featured[b-p15og3sva4] { flex-shrink: 0; padding: 14px 20px 6px; }
.kiosk-featured-head[b-p15og3sva4] {
    margin: 0 0 10px;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--k-ink);
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.kiosk-featured-head[b-p15og3sva4]::before { content: "★"; color: var(--k-accent); }
.kiosk-featured-rail[b-p15og3sva4] {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.kiosk-featured-rail .kiosk-tile[b-p15og3sva4] { flex: 0 0 196px; scroll-snap-align: start; }

/* Persistent bottom cart bar (thumb-reachable; replaces the corner pill). */
.kiosk-cartbar[b-p15og3sva4] {
    flex-shrink: 0;
    margin: 8px 16px max(16px, env(safe-area-inset-bottom));
    padding: 17px 24px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--k-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--e3);
    transition: transform var(--dur-1) var(--ease-emph), background var(--dur-1);
}
.kiosk-cartbar:active[b-p15og3sva4] { transform: scale(0.99); background: var(--k-accent-press); }
.kiosk-cartbar-left[b-p15og3sva4] { display: flex; align-items: center; gap: 12px; }
.kiosk-cartbar-badge[b-p15og3sva4] {
    min-width: 30px;
    height: 30px;
    padding: 0 9px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 800;
}
.kiosk-cartbar-total[b-p15og3sva4] { font-feature-settings: 'tnum'; }
@keyframes cartbarBump-b-p15og3sva4 {
    0% { transform: scale(1); }
    35% { transform: scale(1.035); }
    70% { transform: scale(0.99); }
    100% { transform: scale(1); }
}
.kiosk-cartbar--bump[b-p15og3sva4] { animation: cartbarBump-b-p15og3sva4 var(--dur-2) var(--ease-emph); }

/* Accessibility: keyboard focus on every control + reduced-motion. */
.kiosk-tile:focus-visible[b-p15og3sva4],
.kiosk-tab:focus-visible[b-p15og3sva4],
.kiosk-cartbar:focus-visible[b-p15og3sva4],
.kiosk-btn-primary:focus-visible[b-p15og3sva4],
.kiosk-btn-secondary:focus-visible[b-p15og3sva4],
.kiosk-btn-danger:focus-visible[b-p15og3sva4],
.kiosk-qty-btn:focus-visible[b-p15og3sva4] {
    outline: 3px solid var(--k-accent);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .kiosk-page *[b-p15og3sva4],
    .kiosk-page *[b-p15og3sva4]::before,
    .kiosk-page *[b-p15og3sva4]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    /* keep the loading spinners spinning */
    .kiosk-spinner[b-p15og3sva4], .kiosk-btn-spinner[b-p15og3sva4] {
        animation-duration: 0.8s !important;
        animation-iteration-count: infinite !important;
    }
}

/* ============================================================
   Attract reel, colour themes, RTL.
   ============================================================ */

/* Attract reel behind the welcome screen. */
.kiosk-reel[b-p15og3sva4] { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.kiosk-reel-img[b-p15og3sva4] {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 1.4s ease;
}
.kiosk-reel-img.active[b-p15og3sva4] { opacity: 0.35; }
/* keep the welcome content above the reel */
.kiosk-welcome > :not(.kiosk-reel)[b-p15og3sva4] { position: relative; z-index: 1; }

/* Themes override the --k-* surface/ink/line tokens. The brand --k-accent is set
   inline from Branding.AccentColor and still wins on top of any theme. */
.kiosk-theme-dark[b-p15og3sva4] {
    --k-bg: #0f1115; --k-surface: #1a1d24; --k-surface-2: #232831;
    --k-ink: #f1f3f7; --k-ink-2: #aab2c0; --k-ink-3: #6c7484; --k-line: #2a2f3a;
}
.kiosk-theme-midnight[b-p15og3sva4] {
    --k-bg: #14122b; --k-surface: #201d3f; --k-surface-2: #29254e;
    --k-ink: #f3f1ff; --k-ink-2: #b9b3e0; --k-ink-3: #7a749f; --k-line: #322c5c;
}
.kiosk-theme-sand[b-p15og3sva4] {
    --k-bg: #f4efe6; --k-surface: #fffdf8; --k-surface-2: #f1ead9;
    --k-ink: #2e2a23; --k-ink-2: #6b6356; --k-ink-3: #a59c8a; --k-line: #e7dfcd;
}
.kiosk-theme-fresh[b-p15og3sva4] {
    --k-bg: #eef7f1; --k-surface: #ffffff; --k-surface-2: #e3f1e9;
    --k-ink: #14241c; --k-ink-2: #4a5d53; --k-ink-3: #8aa097; --k-line: #d4e8dd;
}

/* On dark themes the .kiosk-menu/.kiosk-cart base bg becomes the dark surface and
   the header/cards read against it via the tokenised colours above. The welcome and
   confirmation screens keep their dramatic dark gradient on every theme. */

/* RTL: flip the corner badges/chips and arrow-adjacent spacing. */
[dir="rtl"] .kiosk-badge[b-p15og3sva4] { right: auto; left: 8px; }
[dir="rtl"] .kiosk-rule-chip[b-p15og3sva4] { left: auto; right: 10px; }
[dir="rtl"] .kiosk-oos-ribbon[b-p15og3sva4] { letter-spacing: 0; }
[dir="rtl"] .kiosk-item-meta[b-p15og3sva4] { flex-direction: row-reverse; justify-content: flex-end; }

/* ===== Item-detail sheet (variant + modifier picker) ===== */
.kiosk-detail-overlay[b-p15og3sva4] {
    position: fixed;
    inset: 0;
    background: rgba(15, 12, 41, 0.55);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 70;
}
.kiosk-detail-sheet[b-p15og3sva4] {
    background: var(--k-surface);
    color: var(--k-ink);
    width: 100%;
    max-width: 680px;
    max-height: 88vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    display: flex;
    flex-direction: column;
    box-shadow: var(--e3);
    animation: detailUp-b-p15og3sva4 0.28s var(--ease-emph);
}
@keyframes detailUp-b-p15og3sva4 {
    from { transform: translateY(40px); opacity: 0.6; }
    to { transform: translateY(0); opacity: 1; }
}
.kiosk-detail-head[b-p15og3sva4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 8px;
}
.kiosk-detail-head h2[b-p15og3sva4] { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--k-ink); }
.kiosk-detail-close[b-p15og3sva4] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    border: none;
    background: var(--k-surface-2);
    color: var(--k-ink-2);
    font-size: 1.1rem;
    cursor: pointer;
}
.kiosk-detail-desc[b-p15og3sva4] { margin: 0 24px 8px; color: var(--k-ink-2); font-size: 0.95rem; }
.kiosk-detail-body[b-p15og3sva4] { flex: 1; overflow-y: auto; padding: 8px 24px; -webkit-overflow-scrolling: touch; }
.kiosk-detail-group[b-p15og3sva4] { padding: 14px 0; border-top: 1px solid var(--k-line); }
.kiosk-detail-group:first-child[b-p15og3sva4] { border-top: none; }
.kiosk-detail-group h3[b-p15og3sva4] {
    margin: 0 0 12px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--k-ink);
    display: flex;
    align-items: center;
    gap: 10px;
}
.kiosk-req[b-p15og3sva4] {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--k-accent-press);
    background: var(--k-accent-soft);
    padding: 3px 8px;
    border-radius: var(--radius-pill);
}
.kiosk-opt-hint[b-p15og3sva4] { color: var(--k-ink-2); background: var(--k-surface-2); }
.kiosk-detail-options[b-p15og3sva4] { display: flex; flex-wrap: wrap; gap: 10px; }
.kiosk-opt[b-p15og3sva4] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    min-height: 52px;
    border: 2px solid var(--k-line);
    border-radius: var(--radius-sm);
    background: var(--k-surface);
    color: var(--k-ink);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--dur-1), background var(--dur-1), transform var(--dur-1);
}
.kiosk-opt:active[b-p15og3sva4] { transform: scale(0.97); }
.kiosk-opt.selected[b-p15og3sva4] { border-color: var(--k-accent); background: var(--k-accent-soft); }
.kiosk-opt-delta[b-p15og3sva4] { color: var(--k-ink-2); font-weight: 700; font-feature-settings: 'tnum'; }
.kiosk-opt.selected .kiosk-opt-delta[b-p15og3sva4] { color: var(--k-accent-press); }
.kiosk-detail-footer[b-p15og3sva4] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px max(16px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--k-line);
    background: var(--k-surface);
}
.kiosk-detail-qty[b-p15og3sva4] { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.kiosk-detail-add[b-p15og3sva4] { flex: 1; }
.kiosk-detail-add:disabled[b-p15og3sva4] { background: var(--k-ink-3); box-shadow: none; cursor: not-allowed; }

/* ===== Combos rail ===== */
.kiosk-combos-head[b-p15og3sva4]::before { content: "🍔"; }
.kiosk-combo-badge[b-p15og3sva4] {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--k-chip);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    z-index: 3;
}
[dir="rtl"] .kiosk-combo-badge[b-p15og3sva4] { left: auto; right: 10px; }

/* Fixed scrim over the attract reel so a bright photo can't wash out the welcome text. */
.kiosk-reel[b-p15og3sva4]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 12, 41, 0.35), rgba(15, 12, 41, 0.55));
}

/* Sold-out modifier option (disabled, struck). */
.kiosk-opt-soldout[b-p15og3sva4] {
    opacity: 0.55;
    text-decoration: line-through;
    cursor: not-allowed;
}
.kiosk-opt-soldout .kiosk-opt-delta[b-p15og3sva4] { color: var(--k-danger); text-decoration: none; }

/* Confirmation wait estimate (dark confirmation screen). */
.kiosk-confirm-eta[b-p15og3sva4] {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 4px 0 0;
    color: #fff;
    opacity: 0.92;
}

/* ============================================================
   Branding: logo-in-header + welcome tagline
   ============================================================ */
.kiosk-logo-lg[b-p15og3sva4] {
    max-height: 168px;
    max-width: 78%;
    margin-bottom: 8px;
}
.kiosk-header-logo[b-p15og3sva4] {
    height: 38px;
    max-width: 200px;
    object-fit: contain;
    justify-self: start;
}
.kiosk-tagline[b-p15og3sva4] {
    margin: 6px 0 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--k-ink, #1f2937);
    opacity: 0.78;
    max-width: 30ch;
    text-align: center;
    /* Bound a long (≤140-char) tagline so it can't push the tap-to-start CTA
       off a short/portrait kiosk screen. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* On the welcome (over the attract reel) the text sits on a dim scrim → keep it light */
.kiosk-welcome .kiosk-tagline[b-p15og3sva4] { color: #fff; opacity: 0.92; text-shadow: 0 1px 12px rgba(0,0,0,.45); }

/* ============================================================
   Liveliness: card entrance, featured polish, featured badge,
   gentle checkout-bar pulse. (prefers-reduced-motion is killed
   globally above, so all of this auto-stills for that setting.)
   ============================================================ */
@keyframes kioskCardIn-b-p15og3sva4 {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
.kiosk-grid .kiosk-tile[b-p15og3sva4],
.kiosk-scroll .kiosk-tile[b-p15og3sva4],
.kiosk-tabs .kiosk-tile[b-p15og3sva4],
.kiosk-featured-rail .kiosk-tile[b-p15og3sva4] {
    animation: kioskCardIn-b-p15og3sva4 .34s cubic-bezier(.2,.7,.3,1) both;
}
/* light stagger so the first visible row ripples in instead of popping as one block */
.kiosk-grid .kiosk-tile:nth-child(1)[b-p15og3sva4],
.kiosk-scroll .kiosk-tile:nth-child(1)[b-p15og3sva4] { animation-delay: .02s; }
.kiosk-grid .kiosk-tile:nth-child(2)[b-p15og3sva4],
.kiosk-scroll .kiosk-tile:nth-child(2)[b-p15og3sva4] { animation-delay: .06s; }
.kiosk-grid .kiosk-tile:nth-child(3)[b-p15og3sva4],
.kiosk-scroll .kiosk-tile:nth-child(3)[b-p15og3sva4] { animation-delay: .10s; }
.kiosk-grid .kiosk-tile:nth-child(4)[b-p15og3sva4],
.kiosk-scroll .kiosk-tile:nth-child(4)[b-p15og3sva4] { animation-delay: .14s; }
.kiosk-grid .kiosk-tile:nth-child(5)[b-p15og3sva4],
.kiosk-scroll .kiosk-tile:nth-child(5)[b-p15og3sva4] { animation-delay: .18s; }
.kiosk-grid .kiosk-tile:nth-child(6)[b-p15og3sva4],
.kiosk-scroll .kiosk-tile:nth-child(6)[b-p15og3sva4] { animation-delay: .22s; }

/* "⭐" featured corner badge. Bottom-left of the image so it never stacks on the
   top-left price-rule chip or the top-right qty badge (RTL mirrors to bottom-right). */
.kiosk-pop-badge[b-p15og3sva4] {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: 1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffd24d, #ffb017);
    box-shadow: 0 2px 8px rgba(0,0,0,.22);
    animation: kioskStarPop-b-p15og3sva4 .4s ease both;
}
[dir="rtl"] .kiosk-pop-badge[b-p15og3sva4] { left: auto; right: 8px; }
@keyframes kioskStarPop-b-p15og3sva4 {
    from { opacity: 0; transform: scale(.4); }
    60%  { transform: scale(1.12); }
    to   { opacity: 1; transform: none; }
}

/* Featured rail: a touch more presence */
.kiosk-featured-head[b-p15og3sva4] {
    position: relative;
    padding-inline-start: 14px;
}
/* Accent bar for Destacados, but NOT the combos head — it keeps its 🍔 (equal-
   specificity ::before; without the :not() this content:"" wins by source order). */
.kiosk-featured-head:not(.kiosk-combos-head)[b-p15og3sva4]::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 1.05em;
    border-radius: 3px;
    background: var(--k-accent, #16a34a);
}

/* Gentle breathing on the persistent checkout bar to pull the eye to the CTA.
   Transform-only so it's GPU-composited (no per-frame repaint) — important on an
   always-on kiosk; animating box-shadow here would repaint every frame for hours. */
@keyframes kioskCartPulse-b-p15og3sva4 {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.015); }
}
.kiosk-cartbar[b-p15og3sva4] { animation: kioskCartPulse-b-p15og3sva4 2.6s ease-in-out infinite; }
/* don't pulse while it's doing the add-bump */
.kiosk-cartbar.kiosk-cartbar--bump[b-p15og3sva4] { animation: cartbarBump-b-p15og3sva4 .4s ease; }

/* ============================================================
   UX pack — in-menu search + category quick-nav chips
   ============================================================ */
.kiosk-search[b-p15og3sva4] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 20px 6px;
    padding: 0 14px;
    background: var(--k-surface, #fff);
    border: 1px solid var(--k-line, rgba(0,0,0,.1));
    border-radius: 14px;
    flex-shrink: 0;
}
.kiosk-search-icon[b-p15og3sva4] { font-size: 1.1rem; opacity: .55; }
.kiosk-search-input[b-p15og3sva4] {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 14px 0;
    font-size: 1.1rem;
    color: var(--k-ink, #1f2937);
    outline: none;
}
.kiosk-search-input[b-p15og3sva4]::placeholder { color: var(--k-ink, #1f2937); opacity: .42; }
.kiosk-search-clear[b-p15og3sva4] {
    flex-shrink: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1.05rem;
    color: var(--k-ink, #1f2937);
    opacity: .6;
    width: 40px;
    height: 40px;
    border-radius: 999px;
}

.kiosk-cat-chips[b-p15og3sva4] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 20px 10px;
    flex-shrink: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Center the chips when they fit (the common case — a short menu pins them left
       otherwise). The `safe` keyword falls back to flex-start when they overflow, so a
       long menu stays fully scrollable and the first chip is never clipped off-screen. */
    justify-content: safe center;
}
.kiosk-cat-chips[b-p15og3sva4]::-webkit-scrollbar { display: none; }
.kiosk-chip[b-p15og3sva4] {
    flex: 0 0 auto;
    border: 1px solid var(--k-line, rgba(0,0,0,.1));
    background: var(--k-chip, #fff);
    color: var(--k-chip-ink, #1f2937);
    border-radius: 999px;
    padding: 11px 20px;
    font-size: 1.02rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}
.kiosk-chip.active[b-p15og3sva4] {
    background: var(--k-accent, #16a34a);
    border-color: var(--k-accent, #16a34a);
    color: #fff;
}

/* Scroll-spy nav (one-page "scroll" layout): the chip strip is a fixed bar above the
   scrolling sections — a hairline separates it as content scrolls beneath. */
.kiosk-layout-scroll .kiosk-cat-chips--spy[b-p15og3sva4] {
    background: var(--k-bg);
    box-shadow: 0 1px 0 var(--k-line, rgba(0,0,0,.07));
    scroll-behavior: smooth;
}

/* ---- Idle "still there?" countdown ---- */
.kiosk-idle-count[b-p15og3sva4] {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--k-accent, #16a34a);
    margin: 6px 0 14px;
}

/* ---- Special-instructions note (item detail) ---- */
.kiosk-note-input[b-p15og3sva4] {
    width: 100%;
    border: 1px solid var(--k-line, rgba(0,0,0,.12));
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--k-ink, #1f2937);
    background: var(--k-surface, #fff);
    resize: none;
    outline: none;
    box-sizing: border-box;
}
.kiosk-note-input[b-p15og3sva4]::placeholder { color: var(--k-ink, #1f2937); opacity: .4; }

/* ---- Cart row thumbnail + note ---- */
.kiosk-cart-thumb[b-p15og3sva4] {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 12px;
    flex-shrink: 0;
}
.kiosk-cart-note[b-p15og3sva4] {
    display: block;
    font-size: .92rem;
    color: var(--k-ink-2, #5b6171);
    font-style: italic;
    margin-top: 2px;
}

/* ---- Cart upsell rail ---- */
.kiosk-cart-upsell[b-p15og3sva4] { padding: 10px 0 4px; }
.kiosk-upsell-tile[b-p15og3sva4] {
    flex: 0 0 150px;
    text-align: start;
    border: 1px solid var(--k-line, rgba(0,0,0,.06));
    background: var(--k-surface, #fff);
    border-radius: var(--radius-md, 18px);
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--e2);
}
.kiosk-upsell-tile .kiosk-tile-media[b-p15og3sva4] { height: 96px; }

/* ===== Group C: accessibility text-size toggle + allergen detail ===== */

/* Header text-size button — small-A + large-A glyph (language-free). */
.kiosk-fontsize-btn[b-p15og3sva4] {
    flex-shrink: 0;
    height: 48px;
    min-width: 48px;
    padding: 0 12px;
    border-radius: 14px;
    border: 2px solid var(--k-line);
    background: var(--k-surface);
    color: var(--k-ink);
    cursor: pointer;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 1px;
    transition: transform 0.12s, background 0.12s, border-color 0.12s;
}
.kiosk-fontsize-btn .kiosk-fs-a[b-p15og3sva4] { font-weight: 800; line-height: 1; }
.kiosk-fontsize-btn .kiosk-fs-a-sm[b-p15og3sva4] { font-size: 0.95rem; }
.kiosk-fontsize-btn .kiosk-fs-a-lg[b-p15og3sva4] { font-size: 1.4rem; }
.kiosk-fontsize-btn:active[b-p15og3sva4] { transform: scale(0.94); background: var(--k-surface-2); }
.kiosk-fontsize-btn.active[b-p15og3sva4] { border-color: var(--k-accent); background: var(--k-accent-soft); color: var(--k-accent-press); }
.kiosk-fontsize-btn:focus-visible[b-p15og3sva4] { outline: 2px solid var(--k-accent); outline-offset: 2px; }

/* Allergen pills inside the item-detail sheet. */
.kiosk-detail-allergens[b-p15og3sva4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 24px 6px;
}
.kiosk-detail-allergens-label[b-p15og3sva4] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--k-ink-2);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-inline-end: 2px;
}
.kiosk-allergen-pill[b-p15og3sva4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--k-surface-2);
    border: 1px solid var(--k-line);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--k-ink);
}

/* Standalone allergen sheet (reached from the tile's allergen icons). */
.kiosk-allergen-sheet[b-p15og3sva4] {
    background: var(--k-surface);
    color: var(--k-ink);
    width: 100%;
    max-width: 520px;
    max-height: 80vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    display: flex;
    flex-direction: column;
    box-shadow: var(--e3);
    animation: detailUp-b-p15og3sva4 0.28s var(--ease-emph);
}
.kiosk-allergen-item-name[b-p15og3sva4] {
    margin: 0 24px 4px;
    color: var(--k-ink-2);
    font-size: 1rem;
    font-weight: 600;
}
.kiosk-allergen-list[b-p15og3sva4] {
    list-style: none;
    margin: 0;
    padding: 10px 24px 28px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.kiosk-allergen-row[b-p15og3sva4] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--k-line);
}
.kiosk-allergen-row:first-child[b-p15og3sva4] { border-top: none; }
.kiosk-allergen-row-icon[b-p15og3sva4] { font-size: 1.8rem; line-height: 1; flex-shrink: 0; }
.kiosk-allergen-row-name[b-p15og3sva4] { font-size: 1.2rem; font-weight: 600; color: var(--k-ink); }
/* /Pages/KioskPay.razor.rz.scp.css */
.kpay[b-cgbkxcmw5s] {
    min-height: 100dvh;
    background: #f6f7f9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.kpay-card[b-cgbkxcmw5s] {
    background: #fff;
    width: 100%;
    max-width: 460px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    padding: 28px 22px 20px;
}

.kpay-head[b-cgbkxcmw5s] { text-align: center; margin-bottom: 18px; }
.kpay-head h1[b-cgbkxcmw5s] { font-size: 1.35rem; font-weight: 800; margin: 0 0 6px; color: #16181d; }
.kpay-amount[b-cgbkxcmw5s] { font-size: 2rem; font-weight: 800; color: #16a34a; margin: 4px 0 0; }

.kpay-element[b-cgbkxcmw5s] { margin: 8px 0 14px; min-height: 40px; }

.kpay-btn[b-cgbkxcmw5s] {
    width: 100%;
    border: none;
    border-radius: 14px;
    background: #16a34a;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    padding: 16px;
    cursor: pointer;
    transition: background .12s, transform .05s;
}
.kpay-btn:active[b-cgbkxcmw5s] { transform: translateY(1px); }
.kpay-btn:disabled[b-cgbkxcmw5s] { opacity: .6; cursor: default; }

.kpay-msg-error[b-cgbkxcmw5s] { color: #dc2626; font-size: .95rem; text-align: center; margin: 8px 0; }

.kpay-state[b-cgbkxcmw5s] { text-align: center; padding: 18px 4px; }
.kpay-emoji[b-cgbkxcmw5s] { font-size: 3.2rem; line-height: 1; margin-bottom: 10px; }
.kpay-state h1[b-cgbkxcmw5s] { font-size: 1.4rem; font-weight: 800; margin: 0 0 8px; color: #16181d; }
.kpay-state p[b-cgbkxcmw5s] { color: #4b5563; margin: 0; line-height: 1.45; }
.kpay-ok h1[b-cgbkxcmw5s] { color: #16a34a; }
.kpay-error p[b-cgbkxcmw5s] { color: #b91c1c; }

.kpay-secure[b-cgbkxcmw5s] { text-align: center; color: #9aa1ab; font-size: .82rem; margin: 16px 0 2px; }

.kpay-spinner[b-cgbkxcmw5s] {
    width: 34px; height: 34px;
    border: 3px solid #e5e7eb;
    border-top-color: #16a34a;
    border-radius: 50%;
    margin: 18px auto;
    animation: kpay-spin-b-cgbkxcmw5s .8s linear infinite;
}
@keyframes kpay-spin-b-cgbkxcmw5s { to { transform: rotate(360deg); } }
/* /Pages/OnlineOrder.razor.rz.scp.css */
/* The online ordering page (/{slug}/pedir): the venue's storefront, its menu and one checkout page. The palettes, the
   theme presets and the dark mode are in wwwroot/css/online-order.css (shared with the tracking page); this is the
   page's layout. Every class is "oo-" (site.css styles generic names for the staff screens). */

/* ---- The top bar ---- */
.oo-topbar[b-u9xpfvsxoi] {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 0.5rem;
    min-height: 56px; padding: 0.5rem 1rem;
    background: color-mix(in srgb, var(--page-solid) 90%, transparent);
    backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--border);
}
.oo-topbar-name[b-u9xpfvsxoi] { flex: 1; min-width: 0; font-weight: 600; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oo-topbar .oo-lang[b-u9xpfvsxoi] { margin-inline-start: auto; }
/* The storefront's: no bar, the languages over the top corner of the column (its cover photo when it has one). */
.oo-topbar.plain[b-u9xpfvsxoi] {
    position: absolute; z-index: 5; top: 0; left: max(0px, calc((100% - 560px) / 2)); right: max(0px, calc((100% - 560px) / 2));
    min-height: 0; padding: 0.75rem; background: none; border-bottom: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    pointer-events: none;
}
.oo-topbar.plain > *[b-u9xpfvsxoi] { pointer-events: auto; }
.oo-topbar.plain .oo-lang[b-u9xpfvsxoi] { box-shadow: 0 2px 10px var(--shadow); }
.oo-iconbtn[b-u9xpfvsxoi] {
    position: relative; width: 40px; height: 40px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px; border: none; background: transparent; cursor: pointer; color: var(--text);
}
.oo-iconbtn:hover[b-u9xpfvsxoi] { background: var(--surface-2); }
.oo-iconbtn svg[b-u9xpfvsxoi], .oo-lang svg[b-u9xpfvsxoi], .oo-search svg[b-u9xpfvsxoi] { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.oo-iconbtn.small[b-u9xpfvsxoi] { width: 34px; height: 34px; }
.oo-iconbtn.small svg[b-u9xpfvsxoi] { width: 16px; height: 16px; }
.oo-count[b-u9xpfvsxoi] {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent); color: var(--on-accent); font-size: 0.72rem; font-weight: 700; line-height: 1;
}
.oo-lang[b-u9xpfvsxoi] {
    display: inline-flex; align-items: center; gap: 0.25rem; height: 36px; padding: 0 0.35rem 0 0.55rem;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted);
}
.oo-lang svg[b-u9xpfvsxoi] { width: 16px; height: 16px; }
.oo-lang select[b-u9xpfvsxoi] {
    appearance: none; -webkit-appearance: none; border: none; background: transparent; color: var(--text);
    font: inherit; font-size: 0.82rem; padding: 0 0.2rem; min-width: 0; max-width: 7.5rem; cursor: pointer; outline: none;
}

/* ---- The storefront ---- */
.oo-hero[b-u9xpfvsxoi] { position: relative; }
.oo-cover[b-u9xpfvsxoi] { height: 168px; background-size: cover; background-position: center; }
.oo-hero-body[b-u9xpfvsxoi] { position: relative; padding: 1.25rem 1.25rem 1rem; }
.oo-hero.has-cover .oo-hero-body[b-u9xpfvsxoi] { padding-top: 0; }
.oo-logo[b-u9xpfvsxoi] {
    width: 64px; height: 64px; border-radius: 18px; object-fit: cover; display: block;
    background: var(--surface); border: 1px solid var(--border); box-shadow: 0 4px 14px var(--shadow);
}
.oo-hero.has-cover .oo-logo[b-u9xpfvsxoi] { margin-top: -32px; border: 3px solid var(--page-solid); }
.oo-logo-initial[b-u9xpfvsxoi] {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; color: var(--accent-text);
}
.oo-venue[b-u9xpfvsxoi] { font-family: var(--font-display); font-weight: 700; font-size: 1.85rem; line-height: 1.15; letter-spacing: -0.01em; margin-top: 0.75rem; }
.oo-status[b-u9xpfvsxoi] { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.4rem; font-size: 0.88rem; font-weight: 500; color: var(--text-muted); }
.oo-dot[b-u9xpfvsxoi] { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.oo-status.closed .oo-dot[b-u9xpfvsxoi] { background: var(--text-subtle); box-shadow: 0 0 0 3px var(--surface-2); }
.oo-address[b-u9xpfvsxoi] { margin-top: 0.15rem; font-size: 0.88rem; color: var(--text-muted); }
.oo-way-info[b-u9xpfvsxoi] { margin-top: 0.6rem; font-size: 0.85rem; color: var(--text-muted); }

/* The switch: Recogida | A domicilio | En mesa (and «Lo antes posible | Programar» in the checkout) */
.oo-seg[b-u9xpfvsxoi] { display: flex; gap: 4px; margin-top: 1rem; padding: 4px; background: var(--surface-2); border-radius: 14px; }
.oo-seg-btn[b-u9xpfvsxoi] {
    flex: 1; min-height: 40px; padding: 0.4rem 0.6rem; border: none; border-radius: 10px; background: transparent;
    color: var(--text-muted); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.oo-seg-btn.on[b-u9xpfvsxoi] { background: var(--raised); color: var(--text); box-shadow: 0 1px 3px var(--shadow-strong); }
.oo-seg-btn:disabled[b-u9xpfvsxoi] { opacity: 0.55; cursor: default; }

.oo-promos[b-u9xpfvsxoi] { display: grid; gap: 0.5rem; padding: 0 1rem 0.5rem; }
.oo-promo[b-u9xpfvsxoi] { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); font-size: 0.88rem; }
.oo-tag[b-u9xpfvsxoi] {
    display: inline-flex; align-items: center; padding: 0.1rem 0.5rem; border-radius: 999px;
    background: var(--chip-bg); color: var(--text-muted); font-size: 0.72rem; font-weight: 600; white-space: nowrap;
}
.oo-tag.promo[b-u9xpfvsxoi] { background: var(--accent); color: var(--on-accent); }

/* ---- The menu ---- */
.oo-search[b-u9xpfvsxoi] { position: relative; margin: 0.5rem 1rem 0.75rem; color: var(--text-subtle); }
.oo-search svg[b-u9xpfvsxoi] { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; pointer-events: none; }
.oo-search-input[b-u9xpfvsxoi] {
    width: 100%; min-width: 0; height: 46px; padding: 0; padding-inline: 2.6rem 1rem; border-radius: 999px;
    border: 1px solid transparent; background: var(--input-bg); color: var(--text); font: inherit; font-size: 0.95rem; outline: none;
}
.oo-search-input[b-u9xpfvsxoi]::placeholder { color: var(--text-subtle); }
.oo-search-input:focus[b-u9xpfvsxoi] { border-color: var(--border-strong); background: var(--surface); }

.oo-repeat[b-u9xpfvsxoi] {
    display: flex; align-items: center; gap: 0.75rem; margin: 0 1rem 1rem; padding: 0.9rem 1rem;
    border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border);
}
.oo-repeat-text[b-u9xpfvsxoi] { flex: 1; min-width: 0; display: grid; gap: 0.15rem; }
.oo-repeat-title[b-u9xpfvsxoi] { font-weight: 600; }
.oo-repeat-lines[b-u9xpfvsxoi] { font-size: 0.83rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.oo-section-title[b-u9xpfvsxoi] { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; padding: 0 1rem; margin-bottom: 0.6rem; }
.oo-popular[b-u9xpfvsxoi] { margin-bottom: 1rem; }
.oo-popular-row[b-u9xpfvsxoi] { display: flex; gap: 0.75rem; overflow-x: auto; padding: 0 1rem 0.25rem; scroll-snap-type: x mandatory; scrollbar-width: none; }
.oo-popular-row[b-u9xpfvsxoi]::-webkit-scrollbar { display: none; }
.oo-popular-card[b-u9xpfvsxoi] {
    flex: 0 0 148px; scroll-snap-align: start; display: grid; gap: 0.2rem; text-align: start; cursor: pointer;
    padding: 0 0 0.6rem; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: var(--surface);
}
.oo-popular-card img[b-u9xpfvsxoi] { width: 100%; height: 104px; object-fit: cover; display: block; margin-bottom: 0.35rem; }
.oo-popular-name[b-u9xpfvsxoi] { padding: 0 0.65rem; font-weight: 600; font-size: 0.86rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.oo-popular-price[b-u9xpfvsxoi] { padding: 0 0.65rem; font-size: 0.83rem; color: var(--text-muted); }

.oo-chips[b-u9xpfvsxoi] {
    position: sticky; top: 0; z-index: 20; display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.6rem 1rem;
    background: var(--page-solid); scrollbar-width: none; border-bottom: 1px solid var(--border);
}
.oo-chips[b-u9xpfvsxoi]::-webkit-scrollbar { display: none; }
.oo-chip[b-u9xpfvsxoi] {
    flex: none; height: 36px; padding: 0 0.95rem; border-radius: 999px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text-muted); font-size: 0.88rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.oo-chip.on[b-u9xpfvsxoi] { background: var(--text); color: var(--page-solid); border-color: var(--text); }

.oo-items[b-u9xpfvsxoi] { padding: 0.25rem 1rem 1rem; }
.oo-cat-title[b-u9xpfvsxoi] { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; margin: 0.9rem 0 0.25rem; }
.oo-noresults[b-u9xpfvsxoi] { padding: 2rem 0; text-align: center; color: var(--text-muted); }
.oo-dish[b-u9xpfvsxoi] {
    position: relative; display: flex; align-items: flex-start; gap: 0.9rem; padding: 1rem 0;
    border-bottom: 1px solid var(--border); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.oo-dish:last-child[b-u9xpfvsxoi] { border-bottom: none; }
.oo-dish:focus-visible[b-u9xpfvsxoi] { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.oo-dish-text[b-u9xpfvsxoi] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.oo-dish-name[b-u9xpfvsxoi] { font-weight: 600; font-size: 1rem; line-height: 1.3; }
.oo-dish-tags[b-u9xpfvsxoi] { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.oo-dish-desc[b-u9xpfvsxoi] { color: var(--text-muted); font-size: 0.88rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.oo-allergens[b-u9xpfvsxoi] { font-size: 0.76rem; color: var(--text-subtle); }
.oo-allergens.trace[b-u9xpfvsxoi] { color: var(--warn); }
.oo-dish-price[b-u9xpfvsxoi] { font-weight: 600; font-size: 0.95rem; margin-top: 0.15rem; }
.oo-dish-img[b-u9xpfvsxoi] { width: 96px; height: 96px; border-radius: 14px; object-fit: cover; flex: none; background: var(--surface-2); }
.oo-add[b-u9xpfvsxoi] {
    position: absolute; inset-inline-end: 0; bottom: 0.85rem; width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
    font-size: 1.2rem; font-weight: 600; line-height: 1; box-shadow: 0 2px 8px var(--shadow);
}
.oo-dish:has(.oo-dish-img) .oo-add[b-u9xpfvsxoi] { inset-inline-end: -6px; bottom: 0.55rem; }
.oo-dish:not(:has(.oo-dish-img)) .oo-dish-text[b-u9xpfvsxoi] { padding-inline-end: 48px; }
.oo-add.has[b-u9xpfvsxoi] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-size: 0.9rem; }

/* ---- The dock: the basket bar, «Continuar al pago», «Pagar» — in the thumb's reach ---- */
.oo-dock[b-u9xpfvsxoi] {
    position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); bottom: 0;
    width: 100%; max-width: 560px; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, var(--page-solid) 70%, transparent);
}
.oo-cta[b-u9xpfvsxoi] {
    width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 0.75rem;
    padding: 0 1.1rem; border: none; border-radius: 16px; cursor: pointer;
    background: var(--accent); color: var(--on-accent); font-size: 1.02rem; font-weight: 700;
    box-shadow: 0 8px 22px var(--shadow-strong); transition: transform 0.1s, opacity 0.15s;
}
.oo-cta:active[b-u9xpfvsxoi] { transform: scale(0.99); }
.oo-cta:disabled[b-u9xpfvsxoi] { opacity: 0.6; cursor: default; }
.oo-cta-amount[b-u9xpfvsxoi] { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.oo-basket-bar .oo-count[b-u9xpfvsxoi] { background: var(--on-accent); color: var(--accent); }
.oo-trust[b-u9xpfvsxoi] { display: flex; align-items: center; justify-content: center; gap: 0.35rem; margin-top: 0.5rem; font-size: 0.75rem; color: var(--text-subtle); }
.oo-trust svg[b-u9xpfvsxoi] { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* ---- The dish's sheet ---- */
.oo-sheet-backdrop[b-u9xpfvsxoi] {
    position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center;
    background: rgba(17, 16, 15, 0.45); animation: oo-fade-b-u9xpfvsxoi 0.18s ease-out;
}
.oo-sheet[b-u9xpfvsxoi] {
    position: relative; width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh; display: flex; flex-direction: column;
    background: var(--surface); border-radius: 22px 22px 0 0; overflow: hidden; animation: oo-rise-b-u9xpfvsxoi 0.22s ease-out;
}
.oo-sheet-close[b-u9xpfvsxoi] {
    position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--surface) 88%, transparent);
    color: var(--text); box-shadow: 0 2px 8px var(--shadow-strong);
}
.oo-sheet-close svg[b-u9xpfvsxoi] { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.oo-sheet-img[b-u9xpfvsxoi] { width: 100%; height: 220px; object-fit: cover; display: block; flex: none; }
.oo-sheet-body[b-u9xpfvsxoi] { overflow-y: auto; padding: 1.25rem 1.25rem 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.oo-sheet-title[b-u9xpfvsxoi] { font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; line-height: 1.2; padding-inline-end: 2.5rem; }
.oo-sheet-desc[b-u9xpfvsxoi] { color: var(--text-muted); font-size: 0.93rem; line-height: 1.5; }
.oo-group[b-u9xpfvsxoi] { margin-top: 0.6rem; }
.oo-group-label[b-u9xpfvsxoi] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-weight: 600; margin-bottom: 0.55rem; }
.oo-group-rule[b-u9xpfvsxoi] { font-size: 0.72rem; font-weight: 700; color: var(--accent-text); background: var(--surface-2); border-radius: 999px; padding: 0.15rem 0.55rem; }
.oo-group-rule.soft[b-u9xpfvsxoi] { color: var(--text-muted); }
.oo-options[b-u9xpfvsxoi] { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.oo-option[b-u9xpfvsxoi] {
    min-height: 42px; padding: 0.45rem 0.85rem; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 0.9rem; font-weight: 500;
}
.oo-option.on[b-u9xpfvsxoi] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); font-weight: 600; }
.oo-option-price[b-u9xpfvsxoi] { color: var(--text-muted); font-weight: 500; margin-inline-start: 0.25rem; }
.oo-sheet-foot[b-u9xpfvsxoi] {
    display: flex; gap: 0.75rem; align-items: center; padding: 0.85rem 1.25rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border); background: var(--surface);
}
.oo-sheet-foot .oo-cta[b-u9xpfvsxoi] { flex: 1; box-shadow: none; }
.oo-stepper[b-u9xpfvsxoi] { display: inline-flex; align-items: center; gap: 0.25rem; padding: 4px; border-radius: 14px; background: var(--surface-2); flex: none; }
.oo-stepper button[b-u9xpfvsxoi] {
    width: 38px; height: 38px; border-radius: 10px; border: none; background: var(--raised); cursor: pointer;
    font-size: 1.15rem; font-weight: 600; box-shadow: 0 1px 2px var(--shadow);
}
.oo-stepper button:disabled[b-u9xpfvsxoi] { opacity: 0.4; cursor: default; }
.oo-stepper span[b-u9xpfvsxoi] { min-width: 1.6rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.oo-stepper.small[b-u9xpfvsxoi] { padding: 2px; border-radius: 10px; }
.oo-stepper.small button[b-u9xpfvsxoi] { width: 30px; height: 30px; border-radius: 8px; font-size: 1rem; }
.oo-stepper.small span[b-u9xpfvsxoi] { min-width: 1.3rem; font-size: 0.9rem; }

@keyframes oo-fade-b-u9xpfvsxoi { from { opacity: 0; } to { opacity: 1; } }
@keyframes oo-rise-b-u9xpfvsxoi { from { transform: translateY(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }

/* ---- The checkout: one page, in cards ---- */
.oo-checkout[b-u9xpfvsxoi] { padding: 0.75rem 1rem 1rem; display: grid; gap: 0.85rem; }
.oo-card[b-u9xpfvsxoi] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem 1.1rem; box-shadow: 0 1px 2px var(--shadow); }
.oo-card-head[b-u9xpfvsxoi] { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.65rem; }
.oo-card-head h2[b-u9xpfvsxoi] { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; }
.oo-link[b-u9xpfvsxoi] { background: none; border: none; padding: 0.2rem 0; cursor: pointer; color: var(--accent-text); font-size: 0.88rem; font-weight: 600; text-decoration: none; }
.oo-link:hover[b-u9xpfvsxoi] { text-decoration: underline; }
.oo-link:disabled[b-u9xpfvsxoi] { opacity: 0.5; cursor: default; }
.oo-link.inline[b-u9xpfvsxoi] { margin-inline-start: 0.5rem; white-space: nowrap; }
.oo-sheet-body .oo-link[b-u9xpfvsxoi] { align-self: flex-start; }
.oo-soft-note[b-u9xpfvsxoi] { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.5rem; }

.oo-lines[b-u9xpfvsxoi] { list-style: none; margin: 0; padding: 0; }
.oo-line[b-u9xpfvsxoi] { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0; border-bottom: 1px solid var(--border); }
.oo-line:last-child[b-u9xpfvsxoi] { border-bottom: none; }
.oo-line-text[b-u9xpfvsxoi] { flex: 1; min-width: 0; display: grid; gap: 0.1rem; }
.oo-line-name[b-u9xpfvsxoi] { font-weight: 600; font-size: 0.95rem; }
.oo-line-sub[b-u9xpfvsxoi] { font-size: 0.8rem; color: var(--text-muted); }
.oo-line-sub.note[b-u9xpfvsxoi] { font-style: italic; }
.oo-line-qty[b-u9xpfvsxoi] { color: var(--text-muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.oo-line-price[b-u9xpfvsxoi] { min-width: 4.5rem; text-align: end; font-weight: 600; font-variant-numeric: tabular-nums; }

.oo-upsell[b-u9xpfvsxoi] { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px dashed var(--border-strong); }
.oo-upsell-title[b-u9xpfvsxoi] { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; }
.oo-upsell-row[b-u9xpfvsxoi] { display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none; }
.oo-upsell-item[b-u9xpfvsxoi] {
    flex: none; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.75rem 0.4rem 0.4rem; cursor: pointer;
    border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); font-size: 0.85rem; font-weight: 500;
}
.oo-upsell-item img[b-u9xpfvsxoi] { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.oo-upsell-price[b-u9xpfvsxoi] { color: var(--text-muted); }

.oo-sum-line[b-u9xpfvsxoi] { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; font-size: 0.92rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.oo-sum-line.promo[b-u9xpfvsxoi] { color: var(--ok); }
.oo-sum-line.total[b-u9xpfvsxoi] { margin-top: 0.4rem; padding-top: 0.7rem; border-top: 1px solid var(--border); color: var(--text); font-weight: 700; font-size: 1.08rem; }
.oo-summary[b-u9xpfvsxoi] { margin-top: 0.75rem; }
.oo-vat[b-u9xpfvsxoi] { font-size: 0.75rem; color: var(--text-subtle); text-align: end; margin-top: 0.15rem; }
.oo-promo-row[b-u9xpfvsxoi] { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.oo-promo-row .oo-input[b-u9xpfvsxoi] { flex: 1; }

.oo-summary-line[b-u9xpfvsxoi] { font-size: 0.93rem; color: var(--text-muted); line-height: 1.5; }
.oo-summary-line strong[b-u9xpfvsxoi] { color: var(--text); font-weight: 600; }

/* Fields */
.oo-field[b-u9xpfvsxoi] { margin-top: 0.9rem; }
.oo-label[b-u9xpfvsxoi] { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.35rem; }
.oo-input[b-u9xpfvsxoi] {
    width: 100%; min-width: 0; height: 48px; padding: 0 0.95rem; border-radius: 12px;
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-size: 1rem; outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.oo-input[b-u9xpfvsxoi]::placeholder { color: var(--text-subtle); }
.oo-input:focus[b-u9xpfvsxoi] { border-color: var(--text); box-shadow: 0 0 0 3px var(--surface-3); }
.oo-input:disabled[b-u9xpfvsxoi], .oo-input[readonly][b-u9xpfvsxoi] { background: var(--surface-2); color: var(--text-muted); }
.oo-input.short[b-u9xpfvsxoi] { max-width: 8rem; }
.oo-input.invalid[b-u9xpfvsxoi] { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-bg); }
.oo-field-error[b-u9xpfvsxoi] { margin-top: 0.4rem; color: var(--bad); font-size: 0.85rem; font-weight: 500; }
textarea.oo-input[b-u9xpfvsxoi] { height: auto; min-height: 72px; padding: 0.7rem 0.95rem; resize: vertical; }
.oo-code[b-u9xpfvsxoi] { text-align: center; font-size: 1.5rem; letter-spacing: 0.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.oo-hint[b-u9xpfvsxoi] { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.35rem; }
.oo-hint.warn[b-u9xpfvsxoi] { color: var(--warn); }
.oo-error[b-u9xpfvsxoi] { margin-top: 0.6rem; padding: 0.6rem 0.8rem; border-radius: 12px; background: var(--bad-bg); color: var(--bad); font-size: 0.88rem; line-height: 1.4; }
.oo-error.small[b-u9xpfvsxoi] { padding: 0.4rem 0.65rem; font-size: 0.82rem; }
/* A field or message that takes the focus clears the sticky top bar and the dock. */
.oo-input[b-u9xpfvsxoi], .oo-error[b-u9xpfvsxoi] { scroll-margin-top: 84px; scroll-margin-bottom: 120px; }
.oo-error:focus[b-u9xpfvsxoi] { outline: none; }
.oo-ok[b-u9xpfvsxoi] { margin-top: 0.6rem; color: var(--ok); font-size: 0.88rem; font-weight: 500; }
.oo-ok.small[b-u9xpfvsxoi] { font-size: 0.82rem; }

/* The delivery address: Google's suggestions under the field */
.oo-suggestions[b-u9xpfvsxoi] { list-style: none; margin: 0.4rem 0 0; padding: 0; border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden; background: var(--surface); box-shadow: 0 8px 24px var(--shadow); }
.oo-suggestions li + li[b-u9xpfvsxoi] { border-top: 1px solid var(--border); }
.oo-suggestions button[b-u9xpfvsxoi] { display: block; width: 100%; text-align: start; padding: 0.7rem 0.9rem; border: none; background: none; cursor: pointer; }
.oo-suggestions button:hover[b-u9xpfvsxoi], .oo-suggestions button:focus-visible[b-u9xpfvsxoi] { background: var(--surface-2); outline: none; }
.oo-suggestions strong[b-u9xpfvsxoi] { display: block; font-weight: 600; font-size: 0.95rem; }
.oo-suggestions span[b-u9xpfvsxoi] { display: block; font-size: 0.8rem; color: var(--text-muted); margin-top: 0.1rem; }
.oo-zone[b-u9xpfvsxoi] { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem; font-size: 0.88rem; font-weight: 500; }
.oo-zone svg[b-u9xpfvsxoi] { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.oo-zone.ok[b-u9xpfvsxoi] { color: var(--ok); }
.oo-zone.bad[b-u9xpfvsxoi] { color: var(--bad); }
.oo-saved[b-u9xpfvsxoi] { margin-top: 0.9rem; display: grid; gap: 0.4rem; }
.oo-saved-row[b-u9xpfvsxoi] { display: flex; gap: 0.35rem; align-items: center; }
.oo-saved-btn[b-u9xpfvsxoi] { flex: 1; min-width: 0; text-align: start; padding: 0.6rem 0.8rem; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); cursor: pointer; }
.oo-saved-btn.on[b-u9xpfvsxoi] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.oo-saved-btn strong[b-u9xpfvsxoi] { display: block; font-size: 0.88rem; }
.oo-saved-btn span[b-u9xpfvsxoi] { display: block; font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* When */
.oo-when-label[b-u9xpfvsxoi] { margin-top: 1.1rem; }
.oo-when-label + .oo-error[b-u9xpfvsxoi] { margin: 0 0 0.5rem; }
.oo-card .oo-seg[b-u9xpfvsxoi] { margin-top: 0.35rem; }
.oo-slots[b-u9xpfvsxoi] { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 0.5rem; margin-top: 0.75rem; }
.oo-slot[b-u9xpfvsxoi] {
    min-height: 42px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); cursor: pointer;
    font-weight: 600; font-size: 0.92rem; font-variant-numeric: tabular-nums;
}
.oo-slot.on[b-u9xpfvsxoi] { background: var(--text); color: var(--page-solid); border-color: var(--text); }
.oo-slot:disabled[b-u9xpfvsxoi] { opacity: 0.4; cursor: default; }

/* The guest: account, login, past orders */
.oo-account[b-u9xpfvsxoi] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.7rem 0.85rem; border-radius: 12px; background: var(--surface-2); font-size: 0.9rem; }
.oo-account-actions[b-u9xpfvsxoi] { display: inline-flex; gap: 0.8rem; }
.oo-account-prompt[b-u9xpfvsxoi] { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; color: var(--text-subtle); }
.oo-login[b-u9xpfvsxoi] { display: grid; gap: 0.5rem; padding: 0.85rem; border-radius: 12px; background: var(--surface-2); }
.oo-login-actions[b-u9xpfvsxoi] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.oo-history[b-u9xpfvsxoi] { margin-top: 0.6rem; display: grid; gap: 0.35rem; }
.oo-history-row[b-u9xpfvsxoi] {
    display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0.75rem; border-radius: 10px; width: 100%;
    background: var(--surface-2); border: none; font-size: 0.85rem; text-align: start; cursor: pointer;
}

/* The payment */
.oo-tips[b-u9xpfvsxoi] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.oo-tip[b-u9xpfvsxoi] {
    min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.05rem;
    border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); cursor: pointer; font-weight: 600; font-size: 0.88rem; line-height: 1.15;
}
.oo-tip small[b-u9xpfvsxoi] { font-weight: 500; font-size: 0.74rem; color: var(--text-muted); }
.oo-tip.on[b-u9xpfvsxoi] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.oo-methods[b-u9xpfvsxoi] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 1rem; }
.oo-method[b-u9xpfvsxoi] {
    min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.6rem;
    border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); cursor: pointer; font-weight: 600; font-size: 0.9rem; text-align: center; line-height: 1.2;
}
.oo-method svg[b-u9xpfvsxoi] { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.oo-method.on[b-u9xpfvsxoi] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.oo-stripe[b-u9xpfvsxoi] { margin-top: 1rem; }
.oo-stripe:empty[b-u9xpfvsxoi] { margin-top: 0; }

/* Buttons that are not the main one */
.oo-btn[b-u9xpfvsxoi] {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 44px; padding: 0 1rem; border-radius: 12px;
    border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 0.9rem; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.oo-btn:disabled[b-u9xpfvsxoi] { opacity: 0.5; cursor: default; }
.oo-btn.ghost[b-u9xpfvsxoi] { background: transparent; color: var(--text); border-color: var(--border-strong); }
.oo-btn.wide[b-u9xpfvsxoi] { width: 100%; }

/* The confirmation */
.oo-confirm[b-u9xpfvsxoi] { padding: 1.5rem 1rem 2rem; display: grid; gap: 0.85rem; }
.oo-confirm-head[b-u9xpfvsxoi] { text-align: center; display: grid; justify-items: center; gap: 0.35rem; padding: 0.5rem 0 0.75rem; }
.oo-check[b-u9xpfvsxoi] { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ok-bg); color: var(--ok); animation: oo-pop-b-u9xpfvsxoi 0.35s ease-out; }
.oo-check svg[b-u9xpfvsxoi] { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.oo-confirm-head h1[b-u9xpfvsxoi] { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; }
.oo-confirm-no[b-u9xpfvsxoi] { color: var(--text-muted); font-size: 0.95rem; }
.oo-paid[b-u9xpfvsxoi] { display: inline-flex; padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600; background: var(--ok-bg); color: var(--ok); }
.oo-actions-row[b-u9xpfvsxoi] { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.oo-confirm-actions[b-u9xpfvsxoi] { display: grid; gap: 0.6rem; margin-top: 0.25rem; }
@keyframes oo-pop-b-u9xpfvsxoi { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* Loading, nothing to show */
.oo-skeleton[b-u9xpfvsxoi] { padding: 1.25rem 1rem; display: grid; gap: 0.9rem; }
.oo-sk[b-u9xpfvsxoi] { border-radius: 14px; background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: oo-shimmer-b-u9xpfvsxoi 1.2s infinite linear; }
.oo-sk-hero[b-u9xpfvsxoi] { height: 150px; }
.oo-sk-line[b-u9xpfvsxoi] { height: 18px; width: 60%; }
.oo-sk-row[b-u9xpfvsxoi] { height: 76px; }
@keyframes oo-shimmer-b-u9xpfvsxoi { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.oo-empty[b-u9xpfvsxoi] { min-height: 70vh; display: grid; place-content: center; justify-items: center; gap: 0.6rem; padding: 2rem 1.5rem; text-align: center; color: var(--text-muted); }
.oo-empty-icon[b-u9xpfvsxoi] { width: 44px; height: 44px; fill: none; stroke: var(--text-subtle); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.oo-empty-title[b-u9xpfvsxoi] { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--text); }

/* Right to left (Arabic): the arrows follow; an amount stays as the venue writes it («4,50 €», not «€ 4,50»). */
.online-order[dir="rtl"] .oo-iconbtn svg[viewBox] path[d^="M15 18"][b-u9xpfvsxoi] { transform: scaleX(-1); transform-origin: center; }
.oo-dish-price[b-u9xpfvsxoi], .oo-line-price[b-u9xpfvsxoi], .oo-cta-amount[b-u9xpfvsxoi], .oo-option-price[b-u9xpfvsxoi], .oo-popular-price[b-u9xpfvsxoi], .oo-upsell-price[b-u9xpfvsxoi], .oo-sum-line > span:last-child[b-u9xpfvsxoi], .oo-tip small[b-u9xpfvsxoi] { direction: ltr; unicode-bidi: isolate; }

@media (min-width: 600px) {
    .oo-cover[b-u9xpfvsxoi] { height: 210px; border-radius: 0 0 var(--radius) var(--radius); }
    .oo-dish-img[b-u9xpfvsxoi] { width: 112px; height: 112px; }
}

@media (prefers-reduced-motion: reduce) {
    .oo-sheet[b-u9xpfvsxoi], .oo-sheet-backdrop[b-u9xpfvsxoi], .oo-check[b-u9xpfvsxoi], .oo-sk[b-u9xpfvsxoi] { animation: none; }
}
/* /Pages/OnlineTracking.razor.rz.scp.css */
/* The order's tracking page (/{slug}/pedir/track/{id}): the ordering page's look (the palettes, the theme presets and
   the dark mode are in wwwroot/css/online-order.css), its moment said big at the top. The cards, buttons and top bar
   repeat OnlineOrder.razor.css's on purpose: scoped, they outrank site.css's element rules on a guest page. */

.oo-track[b-1sdnptf2gi] { padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); }

/* ---- The top bar: the venue ---- */
.oo-topbar[b-1sdnptf2gi] {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 0.6rem;
    min-height: 56px; padding: 0.5rem 1rem;
    background: color-mix(in srgb, var(--page-solid) 90%, transparent);
    backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--border);
}
.oo-track-logo[b-1sdnptf2gi] { width: 32px; height: 32px; border-radius: 10px; object-fit: cover; border: 1px solid var(--border); background: var(--surface); flex: none; }
.oo-topbar-name[b-1sdnptf2gi] { flex: 1; min-width: 0; font-weight: 600; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oo-live[b-1sdnptf2gi] { display: inline-flex; align-items: center; gap: 0.4rem; flex: none; font-size: 0.78rem; font-weight: 600; color: var(--ok); }
.oo-live-dot[b-1sdnptf2gi] { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: oo-live-b-1sdnptf2gi 1.8s ease-in-out infinite; }
@keyframes oo-live-b-1sdnptf2gi { 0%, 100% { box-shadow: 0 0 0 0 var(--ok-bg); } 50% { box-shadow: 0 0 0 5px var(--ok-bg); } }

.oo-track-main[b-1sdnptf2gi] { padding: 1rem; display: grid; gap: 0.85rem; }

/* ---- The moment ---- */
.oo-track-hero[b-1sdnptf2gi] {
    display: grid; justify-items: center; text-align: center; gap: 0.35rem;
    padding: 1.6rem 1.1rem 1.25rem; border-radius: 20px; background: var(--surface); border: 1px solid var(--border);
    box-shadow: 0 1px 2px var(--shadow);
}
.oo-track-icon[b-1sdnptf2gi] {
    width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface-2); color: var(--text); margin-bottom: 0.4rem;
}
.oo-track-icon svg[b-1sdnptf2gi] { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.oo-track-hero.ok .oo-track-icon[b-1sdnptf2gi] { background: var(--ok-bg); color: var(--ok); }
.oo-track-hero.bad .oo-track-icon[b-1sdnptf2gi] { background: var(--bad-bg); color: var(--bad); }
.oo-track-hero.just-now[b-1sdnptf2gi] { animation: oo-ready-b-1sdnptf2gi 0.5s ease-out 2; box-shadow: 0 0 0 4px var(--ok-bg); }
@keyframes oo-ready-b-1sdnptf2gi { 0% { transform: scale(0.97); } 50% { transform: scale(1.02); } 100% { transform: none; } }
.oo-track-no[b-1sdnptf2gi] { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0.01em; }
.oo-track-title[b-1sdnptf2gi] { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; line-height: 1.2; }
.oo-track-sub[b-1sdnptf2gi] { color: var(--text-muted); font-size: 0.95rem; max-width: 32ch; }

/* The way's steps: a bar per step, the current one breathing */
.oo-steps[b-1sdnptf2gi] { list-style: none; margin: 1.1rem 0 0; padding: 0; width: 100%; display: flex; gap: 6px; }
.oo-step[b-1sdnptf2gi] { flex: 1; min-width: 0; display: grid; gap: 0.4rem; }
.oo-step-bar[b-1sdnptf2gi] { height: 6px; border-radius: 999px; background: var(--surface-3); }
.oo-step.done .oo-step-bar[b-1sdnptf2gi] { background: var(--accent); }
.oo-step.active .oo-step-bar[b-1sdnptf2gi] { background: var(--accent); animation: oo-breathe-b-1sdnptf2gi 1.6s ease-in-out infinite; }
@keyframes oo-breathe-b-1sdnptf2gi { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
/* Whole words only ("Preparand-o" read badly): a word a little wider than its bar spills into the gap. */
.oo-step-label[b-1sdnptf2gi] { font-size: 0.68rem; line-height: 1.2; color: var(--text-subtle); overflow-wrap: normal; }
.oo-step.done .oo-step-label[b-1sdnptf2gi], .oo-step.active .oo-step-label[b-1sdnptf2gi] { color: var(--text); font-weight: 600; }

/* ---- Cards ---- */
.oo-card[b-1sdnptf2gi] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem 1.1rem; box-shadow: 0 1px 2px var(--shadow); }
.oo-card-head[b-1sdnptf2gi] { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; }
.oo-card-head h2[b-1sdnptf2gi] { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; }
.oo-label[b-1sdnptf2gi] { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.35rem; }
.oo-summary-line[b-1sdnptf2gi] { font-size: 0.93rem; color: var(--text-muted); line-height: 1.5; }
.oo-summary-line strong[b-1sdnptf2gi] { color: var(--text); font-weight: 600; }
.oo-actions-row[b-1sdnptf2gi] { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.oo-hint[b-1sdnptf2gi] { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.5rem; }
.oo-hint.center[b-1sdnptf2gi] { text-align: center; }

.oo-lines[b-1sdnptf2gi] { list-style: none; margin: 0; padding: 0; }
.oo-line[b-1sdnptf2gi] { display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 0; border-bottom: 1px solid var(--border); }
.oo-line:last-child[b-1sdnptf2gi] { border-bottom: none; }
.oo-line-qty[b-1sdnptf2gi] { color: var(--text-muted); font-size: 0.9rem; min-width: 2rem; font-variant-numeric: tabular-nums; }
.oo-line-name[b-1sdnptf2gi] { flex: 1; min-width: 0; font-weight: 600; font-size: 0.95rem; }
.oo-pill[b-1sdnptf2gi] {
    flex: none; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.74rem; font-weight: 600; white-space: nowrap;
    background: var(--surface-2); color: var(--text-muted);
}
.oo-pill.preparing[b-1sdnptf2gi] { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.oo-pill.ready[b-1sdnptf2gi], .oo-pill.delivered[b-1sdnptf2gi] { background: var(--ok-bg); color: var(--ok); }
.oo-pill.cancelled[b-1sdnptf2gi] { background: var(--bad-bg); color: var(--bad); text-decoration: line-through; }

/* «Avísame cuando esté listo» */
.oo-notify[b-1sdnptf2gi] { display: grid; gap: 0.1rem; }
.oo-notify-on[b-1sdnptf2gi] { padding: 0.15rem 0; text-align: center; font-size: 0.88rem; font-weight: 500; color: var(--ok); }
.oo-notify-on.muted[b-1sdnptf2gi] { color: var(--text-muted); font-weight: 400; }

/* ---- Buttons ---- */
.oo-cta[b-1sdnptf2gi] {
    width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    padding: 0 1.1rem; border: none; border-radius: 16px; cursor: pointer;
    background: var(--accent); color: var(--on-accent); font-size: 1rem; font-weight: 700;
}
.oo-cta svg[b-1sdnptf2gi] { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.oo-cta:disabled[b-1sdnptf2gi] { opacity: 0.6; cursor: default; }
.oo-btn[b-1sdnptf2gi] {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 44px; padding: 0 1rem; border-radius: 12px;
    border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 0.9rem; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.oo-btn.ghost[b-1sdnptf2gi] { background: transparent; color: var(--text); border-color: var(--border-strong); }
.oo-btn.wide[b-1sdnptf2gi] { width: 100%; }

/* ---- Loading, nothing to show ---- */
.oo-skeleton[b-1sdnptf2gi] { padding: 1.25rem 1rem; display: grid; gap: 0.9rem; }
.oo-sk[b-1sdnptf2gi] { border-radius: 14px; background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: oo-shimmer-b-1sdnptf2gi 1.2s infinite linear; }
.oo-sk-hero[b-1sdnptf2gi] { height: 220px; }
.oo-sk-line[b-1sdnptf2gi] { height: 18px; width: 60%; }
.oo-sk-row[b-1sdnptf2gi] { height: 120px; }
@keyframes oo-shimmer-b-1sdnptf2gi { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.oo-empty[b-1sdnptf2gi] { min-height: 70vh; display: grid; place-content: center; justify-items: center; gap: 0.6rem; padding: 2rem 1.5rem; text-align: center; color: var(--text-muted); }
.oo-empty-icon[b-1sdnptf2gi] { width: 44px; height: 44px; fill: none; stroke: var(--text-subtle); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.oo-empty-title[b-1sdnptf2gi] { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--text); }

@media (prefers-reduced-motion: reduce) {
    .oo-live-dot[b-1sdnptf2gi], .oo-step.active .oo-step-bar[b-1sdnptf2gi], .oo-track-hero.just-now[b-1sdnptf2gi], .oo-sk[b-1sdnptf2gi] { animation: none; }
}
/* /Pages/OrderPanel.razor.rz.scp.css */
/* Kitchen Display - Eats order styling */

/* Base kitchen ticket */
.kitchen-ticket[b-x5umekbaiz] {
    transition: all 0.2s ease;
}

/* Delivery orders - red/urgent theme */
.kitchen-ticket-delivery[b-x5umekbaiz] {
    border-left: 6px solid #dc3545;
    background: linear-gradient(to right, rgba(220, 53, 69, 0.08), transparent);
}

.kitchen-ticket-delivery .card-header[b-x5umekbaiz] {
    background-color: rgba(220, 53, 69, 0.15);
    border-bottom-color: rgba(220, 53, 69, 0.3);
}

/* TakeAway orders - orange/warning theme */
.kitchen-ticket-takeaway[b-x5umekbaiz] {
    border-left: 6px solid #ffc107;
    background: linear-gradient(to right, rgba(255, 193, 7, 0.08), transparent);
}

.kitchen-ticket-takeaway .card-header[b-x5umekbaiz] {
    background-color: rgba(255, 193, 7, 0.15);
    border-bottom-color: rgba(255, 193, 7, 0.3);
}

/* Kitchen course styling */
.kitchen-course[b-x5umekbaiz] {
    padding: 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid #dee2e6;
}

.k-course-pending[b-x5umekbaiz] {
    background-color: #fff3cd;
}

.k-course-fired[b-x5umekbaiz] {
    background-color: #d1e7dd;
}

/* Kitchen board container */
.kitchen-board[b-x5umekbaiz] {
    padding: 1rem 0;
}
/* /Pages/Pos.razor.rz.scp.css */

:root[b-g2xxwyov9v] {
    --brand: #c62828;
    --brand-dark: #8e0000;
    --ink: #1f2937;
    --ok: #059669;
    --bg: #f7f7f8;
    --card: #ffffff;
    --muted: #6b7280;
}

.pos-shell[b-g2xxwyov9v] {
    height: 100vh;
    height: 100dvh; /* iPad Safari: excludes URL bar from height */
    height: calc(100dvh - var(--pwa-banner-h, 0px) - var(--top-banners-h, 0px)); /* ends above the «Instalar Mesero TPV» bar while it shows (index.html) */
    display: flex;
    flex-direction: column;
    background: var(--bg);
    overflow: hidden;
}

/* Basket-full mode: two-column grid layout */
.pos-shell.basket-full[b-g2xxwyov9v] {
    display: grid;
    grid-template-columns: 62% 38%;
    flex-direction: unset;
}

/* Left section contains topbar + main-content */
.left-section[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* In compact mode, left-section fills full width */
.pos-shell.basket-compact .left-section[b-g2xxwyov9v] {
    width: 100%;
}

.topbar[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 16px;
    /* Extra left padding clears the fixed .sidebar-toggle (12px from edge,
       44px wide → ends at x=56). Without this, the printer/connection
       icons sit underneath the hamburger. The narrow-viewport breakpoint
       had this fix; the base rule didn't. */
    padding: 12px 16px 12px 64px;
    /* Respect the notch / status-bar inset so the connection + printer
       row isn't clipped at the top on phones (the "Conexión activa"
       cut-off). No-op on desktop: env() resolves to 0 there, so
       max(12px, 0) == the original 12px top padding. */
    padding-top: max(12px, env(safe-area-inset-top, 0px));
    background: var(--card);
    border-bottom: 1px solid #ececec;
    position: sticky;
    top: 0;
    z-index: 20;
    flex-wrap: nowrap;
    min-width: 0;
}

/* Compact topbar in basket-full mode */
.pos-shell.basket-full .topbar[b-g2xxwyov9v] {
    gap: 10px;
    padding: 8px 12px 8px 60px;
}

.pos-shell.basket-full .topbar .title[b-g2xxwyov9v] {
    font-size: 0.9rem;
}

.pos-shell.basket-full .topbar .muted[b-g2xxwyov9v] {
    font-size: 0.85rem;
}

.pos-shell.basket-full .topbar .btn[b-g2xxwyov9v] {
    padding: 6px 10px;
    font-size: 0.85rem;
}

/* ========================================
   CONNECTION STATUS - Animated WiFi
   ======================================== */
.connection-status[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

.wifi-icon[b-g2xxwyov9v] {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 16px;
}

.wifi-bar[b-g2xxwyov9v] {
    width: 3px;
    border-radius: 2px;
    background: #10b981;
    animation: wifi-pulse-b-g2xxwyov9v 1.4s ease-in-out infinite;
}

.wifi-bar.bar-1[b-g2xxwyov9v] {
    height: 5px;
    animation-delay: 0s;
}

.wifi-bar.bar-2[b-g2xxwyov9v] {
    height: 9px;
    animation-delay: 0.15s;
}

.wifi-bar.bar-3[b-g2xxwyov9v] {
    height: 14px;
    animation-delay: 0.3s;
}

@keyframes wifi-pulse-b-g2xxwyov9v {
    0%, 100% {
        opacity: 0.4;
        transform: scaleY(0.8);
    }
    50% {
        opacity: 1;
        transform: scaleY(1);
    }
}

/* Disconnected state */
.connection-status.offline .wifi-bar[b-g2xxwyov9v] {
    background: #ef4444;
    animation: none;
    opacity: 0.3;
}

/* Offline badge styling */
.connection-status.offline[b-g2xxwyov9v] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #fecaca 0%, #fee2e2 100%);
    border: 1px solid #f87171;
    border-radius: 999px;
    padding: 4px 10px;
    animation: offline-pulse-b-g2xxwyov9v 1.5s ease-in-out infinite;
}

.offline-icon[b-g2xxwyov9v] {
    font-size: 0.85rem;
    animation: offline-flash-b-g2xxwyov9v 0.8s ease-in-out infinite;
}

.offline-text[b-g2xxwyov9v] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #b91c1c;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@keyframes offline-pulse-b-g2xxwyov9v {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
    }
}

@keyframes offline-flash-b-g2xxwyov9v {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Dark mode offline badge */
:root[data-theme="dark"] .connection-status.offline[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 100%);
    border-color: #ef4444;
}

:root[data-theme="dark"] .offline-text[b-g2xxwyov9v] {
    color: #fca5a5;
}

/* Reconnecting state - yellow/orange spinner */
.connection-status.reconnecting[b-g2xxwyov9v] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    border-radius: 999px;
    padding: 4px 10px;
}

.reconnect-spinner[b-g2xxwyov9v] {
    width: 14px;
    height: 14px;
    border: 2px solid #f59e0b;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-g2xxwyov9v 0.8s linear infinite;
}

@keyframes spin-b-g2xxwyov9v {
    to { transform: rotate(360deg); }
}

:root[data-theme="dark"] .connection-status.reconnecting[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #451a03 0%, #78350f 100%);
    border-color: #f59e0b;
}

:root[data-theme="dark"] .reconnect-spinner[b-g2xxwyov9v] {
    border-color: #fbbf24;
    border-top-color: transparent;
}

.title[b-g2xxwyov9v] {
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
}

/* Truncate long titles in compact mode */
.pos-shell.basket-full .topbar .title[b-g2xxwyov9v] {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.muted[b-g2xxwyov9v] {
    color: var(--muted);
    font-weight: 600;
    white-space: nowrap
}

.flex-1[b-g2xxwyov9v] {
    flex: 1;
    min-width: 0
}

.total[b-g2xxwyov9v] {
    background: var(--ink);
    color: #fff;
    font-weight: 900;
    padding: 10px 14px;
    border-radius: 10px;
    letter-spacing: .3px;
    box-shadow: 0 10px 18px rgba(0,0,0,.18);
    display: flex;
    align-items: center;
    gap: 4px;
}

.total .total-label[b-g2xxwyov9v] {
    font-weight: 600;
    opacity: 0.85;
}

.actions[b-g2xxwyov9v] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    padding: 10px 16px;
    background: var(--card);
    border-bottom: 2px solid #e5e7eb;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

.actions.actions-left[b-g2xxwyov9v] {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    padding: 8px 12px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    overflow: hidden;
}
.actions.actions-left .btn[b-g2xxwyov9v] {
    flex: 0 0 auto;
    min-width: auto;
    padding: 8px 10px;
    font-size: 0.9rem;
}
.actions.actions-left .dropdown[b-g2xxwyov9v] {
    display: inline-flex;
    flex: 0 0 auto;
}

/* ========================================
   RECENT ITEMS SECTION
   ======================================== */
.recent-section[b-g2xxwyov9v] {
    padding: 8px 16px;
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 100%);
    border-bottom: 1px solid rgba(16, 185, 129, 0.15);
    flex-shrink: 0;
}

.recent-header[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.recent-icon[b-g2xxwyov9v] {
    font-size: 0.9rem;
}

.recent-title[b-g2xxwyov9v] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #059669;
}

.recent-items[b-g2xxwyov9v] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}

.recent-items[b-g2xxwyov9v]::-webkit-scrollbar {
    height: 4px;
}

.recent-items[b-g2xxwyov9v]::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.3);
    border-radius: 2px;
}

.recent-item[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 12px;
    background: white;
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    min-width: 90px;
    max-width: 140px;
}

.recent-item:hover[b-g2xxwyov9v] {
    background: rgba(16, 185, 129, 0.1);
    border-color: #10b981;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.recent-item:active[b-g2xxwyov9v] {
    transform: translateY(0);
}

.recent-name[b-g2xxwyov9v] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.recent-price[b-g2xxwyov9v] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #059669;
}

/* Dark theme */
html[data-theme="dark"] .recent-section[b-g2xxwyov9v] {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.04) 100%);
    border-bottom-color: rgba(16, 185, 129, 0.2);
}

html[data-theme="dark"] .recent-title[b-g2xxwyov9v] {
    color: #34d399;
}

html[data-theme="dark"] .recent-item[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: rgba(16, 185, 129, 0.3);
}

html[data-theme="dark"] .recent-item:hover[b-g2xxwyov9v] {
    background: rgba(16, 185, 129, 0.15);
    border-color: #10b981;
}

html[data-theme="dark"] .recent-name[b-g2xxwyov9v] {
    color: #f3f4f6;
}

html[data-theme="dark"] .recent-price[b-g2xxwyov9v] {
    color: #34d399;
}

.btn[b-g2xxwyov9v] {
    border: 1px solid var(--action-neutral-border, #d5dde9);
    /* 12px vertical padding + min-height 48px puts these at the same tap
       footprint as the bumped category chips, so the action row reads as
       one consistent strip instead of two height bands. */
    padding: 12px 16px;
    min-height: 48px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    background: var(--action-neutral, #e8edf4);
    color: #0f172a;
    transition: transform .08s ease,filter .12s ease
}

    .btn:hover[b-g2xxwyov9v] {
        filter: brightness(1.03);
        transform: translateY(-1px)
    }

    .btn:focus-visible[b-g2xxwyov9v] {
        outline: 2px solid #3b82f6;
        outline-offset: 2px;
    }

.btn-ghost[b-g2xxwyov9v] {
    background: var(--action-ghost, #fff);
    color: #0f172a;
    border: 1px solid var(--action-ghost-border, #e5e7eb)
}

.btn-ghost.active[b-g2xxwyov9v] {
    background: #0ea5e9;
    color: #fff;
    border-color: #0284c7;
}

/* Waiter-switch sheet: the staff picker stage. The PIN stage reuses .pin-* wholesale. */
.usw-search[b-g2xxwyov9v] {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 10px;
    border-radius: 10px;
    border: 1px solid #334155;
    background: #0f172a;
    color: #e2e8f0;
    font-size: .95rem;
    outline: none;
}
.usw-list[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: min(46vh, 340px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.usw-item[b-g2xxwyov9v] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #334155;
    background: #0f172a;
    color: #e2e8f0;
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
}
.usw-item:hover[b-g2xxwyov9v] { border-color: #6366f1; }
.usw-item-name[b-g2xxwyov9v] { font-weight: 650; }
.usw-item-role[b-g2xxwyov9v] { opacity: .6; font-size: .8rem; letter-spacing: .04em; }
.usw-item-hint[b-g2xxwyov9v] { margin-left: auto; opacity: .55; font-size: .76rem; }
.usw-item-disabled[b-g2xxwyov9v] { opacity: .45; cursor: not-allowed; }
.usw-item-disabled:hover[b-g2xxwyov9v] { border-color: #334155; }
.usw-empty[b-g2xxwyov9v] { padding: 18px 4px; text-align: center; opacity: .6; font-size: .92rem; }

/* WHO IS ON THE TILL. Deliberately NOT built on .muted: `.topbar .muted{display:none}`
   in the max-width:600px block hides that class outright on phones, which is why the old
   role label never appeared there at all. The name is the important half, so the ROLE is
   what collapses on a narrow toolbar — the reverse of .btn-reservas-label. */
.btn-user[b-g2xxwyov9v] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex: 0 0 auto;
}
.btn-user-name[b-g2xxwyov9v] {
    font-weight: 600;
    max-width: 12ch;
    overflow: hidden;
    text-overflow: ellipsis;
}
.btn-user-role[b-g2xxwyov9v] {
    opacity: .62;
    font-size: .82em;
    letter-spacing: .04em;
}
@media (max-width: 720px) {
    .btn-user-role[b-g2xxwyov9v] { display: none; }
}

/* Always-visible Reservas entry point in the topbar. The label collapses
   on narrow toolbars (the 📅 icon stays) so a long restaurant name doesn't
   force the header to wrap. */
.btn-reservas[b-g2xxwyov9v],
.btn-admin[b-g2xxwyov9v] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
/* Admin shortcut: faint accent border so it reads as a "leave the POS" affordance
   without shouting. Inherits .btn-ghost; text-decoration:none since it's an <a>. */
.btn-admin[b-g2xxwyov9v] {
    text-decoration: none;
    border-color: rgba(124, 92, 255, .35);
}
.btn-admin:hover[b-g2xxwyov9v] {
    border-color: rgba(124, 92, 255, .6);
}
/* "opens in a new tab" hint next to the Admin label */
.btn-ext-icon[b-g2xxwyov9v] {
    font-size: .72em;
    opacity: .6;
    margin-left: 3px;
}

@media (max-width: 720px) {
    .btn-reservas-label[b-g2xxwyov9v],
    .btn-admin-label[b-g2xxwyov9v] {
        display: none;
    }
}

/* Line-action modal: highlight the button matching the line's current state
   (discount % already applied, current course, comped status). Without this,
   the modal hides which action is the current one — the operator can't tell
   if they already applied 20% off, leading to double-taps or confusion. */
.modal-card .btn.active[b-g2xxwyov9v] {
    background: #0ea5e9;
    color: #fff;
    border-color: #0284c7;
    box-shadow: inset 0 0 0 2px rgba(2, 132, 199, 0.4);
}

.modal-card .btn.outline[b-g2xxwyov9v] {
    background: transparent;
    color: #475569;
    border: 1px solid #cbd5e1;
}

.modal-card .btn.outline:hover[b-g2xxwyov9v] {
    background: #f1f5f9;
    color: #0f172a;
}

/* Danger button for Cortesía — a single tap zeros the line. Pre-fix the button
   looked identical to "Cambiar cantidad" / "Editar precio" and finger-slips
   were giving away meals. Red tint + danger badge make the gravity obvious;
   the confirm prompt added in CompLine() is the second line of defense. */
.modal-card .btn.danger[b-g2xxwyov9v] {
    background: rgba(239, 68, 68, 0.08);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.modal-card .btn.danger:hover[b-g2xxwyov9v] {
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(239, 68, 68, 0.55);
}

.modal-card .btn.danger.active[b-g2xxwyov9v] {
    background: #dc2626;
    color: #fff;
    border-color: #b91c1c;
    box-shadow: inset 0 0 0 2px rgba(127, 29, 29, 0.5);
}

.btn-neutral[b-g2xxwyov9v] {
    background: var(--action-neutral, #e8edf4);
    color: #0f172a;
    border: 1px solid var(--action-neutral-border, #d5dde9);
}

.btn-tint[b-g2xxwyov9v] {
    background: var(--action-tint, #0f172a);
    color: #fff;
    border: 1px solid var(--action-tint, #0f172a);
}

/* Square icon-only variant. Pre-fix the topbar's ⚙️ Sistema /
   🥡 Para Llevar / 🆕 Nuevo were full-width text buttons that
   wrapped to two lines on narrow restaurant-name + ADMIN-tag
   layouts. Sistema is the only icon-only survivor — Nuevo got
   removed, Para Llevar got its text restored — so the icon size
   is bumped to 1.35rem (operator on Wokamama reported the prior
   1.1rem ⚙ felt too small to find). 48px width still fits the
   row and matches the iOS minimum touch target. */
.btn.btn-icon[b-g2xxwyov9v] {
    padding: 0;
    width: 48px;
    min-width: 48px;
    flex: 0 0 auto;
    font-size: 1.35rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Dark theme stay legible */
html[data-theme="dark"][b-g2xxwyov9v] {
    --action-tint: #161f2e;
    --action-neutral: #2a3343;
    --action-neutral-border: #354155;
    --action-ghost: #1f2937;
    --action-ghost-border: #3b4250;
}

/* Dark theme button text visibility */
html[data-theme="dark"] .btn[b-g2xxwyov9v] {
    color: #f3f4f6;
}

html[data-theme="light"][b-g2xxwyov9v] {
    --action-tint: #0f172a;
    --action-neutral: #e8edf4;
    --action-neutral-border: #d5dde9;
    --action-ghost: #ffffff;
    --action-ghost-border: #e5e7eb;
}

.btn-danger[b-g2xxwyov9v] {
    background: #c62828;
    color: #fff
}

    .btn-danger:hover[b-g2xxwyov9v] {
        background: #8e0000
    }

/* Secondary button - for utility actions like cash drawer */
.btn-secondary[b-g2xxwyov9v] {
    background: #374151;
    color: #fff;
    border: 1px solid #374151;
}

    .btn-secondary:hover[b-g2xxwyov9v] {
        background: #1f2937;
        border-color: #1f2937;
    }

/* Danger outline button - for destructive actions that need visual separation */
.btn-danger-outline[b-g2xxwyov9v] {
    background: transparent;
    color: #dc2626;
    border: 2px solid #dc2626;
    transition: all 0.15s ease;
}

.btn-danger-outline:hover:not(:disabled)[b-g2xxwyov9v] {
    background: #fef2f2;
    border-color: #b91c1c;
    color: #b91c1c;
}

.btn-danger-outline:disabled[b-g2xxwyov9v] {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: #9ca3af;
    color: #9ca3af;
}

/* Visual separator for destructive actions */
.action-divider[b-g2xxwyov9v] {
    display: inline-block;
    width: 1px;
    height: 28px;
    background: #d1d5db;
    margin: 0 8px;
    flex-shrink: 0;
    align-self: center;
}

/* Dark theme support */
html[data-theme="dark"] .btn-danger-outline[b-g2xxwyov9v] {
    color: #f87171;
    border-color: #f87171;
}

html[data-theme="dark"] .btn-danger-outline:hover:not(:disabled)[b-g2xxwyov9v] {
    background: #450a0a;
    border-color: #ef4444;
    color: #fecaca;
}

html[data-theme="dark"] .btn-danger-outline:disabled[b-g2xxwyov9v] {
    border-color: #6b7280;
    color: #6b7280;
}

html[data-theme="dark"] .action-divider[b-g2xxwyov9v] {
    background: #4b5563;
}

/* Action row search input - prominent position */
.action-search[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 8px 12px;
    gap: 6px;
    min-width: 130px;
    max-width: 200px;
    flex: 1;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.action-search:focus-within[b-g2xxwyov9v] {
    border-color: #c62828;
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.1);
}

.action-search-icon[b-g2xxwyov9v] {
    font-size: 1rem;
    opacity: 0.6;
    flex-shrink: 0;
}

.action-search-input[b-g2xxwyov9v] {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.95rem;
    font-weight: 500;
    width: 100%;
    min-width: 0;
}

.action-search-input[b-g2xxwyov9v]::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

.action-search-clear[b-g2xxwyov9v] {
    background: #f3f4f6;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.75rem;
    color: #6b7280;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.action-search-clear:hover[b-g2xxwyov9v] {
    background: #ef4444;
    color: white;
}

/* Dark theme */
html[data-theme="dark"] .action-search[b-g2xxwyov9v] {
    background: #1e293b;
    border-color: #334155;
}

html[data-theme="dark"] .action-search:focus-within[b-g2xxwyov9v] {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

html[data-theme="dark"] .action-search-input[b-g2xxwyov9v] {
    color: #f1f5f9;
}

html[data-theme="dark"] .action-search-input[b-g2xxwyov9v]::placeholder {
    color: #64748b;
}

html[data-theme="dark"] .action-search-clear[b-g2xxwyov9v] {
    background: #334155;
    color: #94a3b8;
}

html[data-theme="dark"] .action-search-clear:hover[b-g2xxwyov9v] {
    background: #ef4444;
    color: white;
}

.icon[b-g2xxwyov9v] {
    opacity: .8;
    margin-right: 8px
}

.filters[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: linear-gradient(180deg, #fafbfc 0%, var(--card) 100%);
    border-bottom: 1px solid #e5e7eb;
}

html[data-theme="dark"] .filters[b-g2xxwyov9v] {
    background: linear-gradient(180deg, #1a2332 0%, var(--card) 100%);
    border-bottom-color: #374151;
}

.filters.filters-left[b-g2xxwyov9v] {
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    transition: all 0.3s ease;
    box-sizing: border-box;
    overflow: hidden;
}

.filters.filters-left .chipbar-wrap[b-g2xxwyov9v] {
    flex: 1 1 auto;
}

.filters.filters-left .search[b-g2xxwyov9v] {
    margin-left: 12px;
    max-width: 200px;
    flex-shrink: 0;
}

.filters.filters-left .layout-switch.global[b-g2xxwyov9v] {
    display: none;
}

.filters .search[b-g2xxwyov9v] {
    flex: 0 0 220px;
}

.filters .layout-switch.global[b-g2xxwyov9v] {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* Chipbar wrapper with scroll indicators */
.chipbar-wrap[b-g2xxwyov9v] {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.chipbar-wrap[b-g2xxwyov9v]::before,
.chipbar-wrap[b-g2xxwyov9v]::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.chipbar-wrap[b-g2xxwyov9v]::before {
    left: 0;
    background: linear-gradient(90deg, var(--card, #fafbfc) 0%, transparent 100%);
}

.chipbar-wrap[b-g2xxwyov9v]::after {
    right: 0;
    background: linear-gradient(270deg, var(--card, #fafbfc) 0%, transparent 100%);
}

.chipbar-wrap.can-scroll-left[b-g2xxwyov9v]::before {
    opacity: 1;
}

.chipbar-wrap.can-scroll-right[b-g2xxwyov9v]::after {
    opacity: 1;
}

.chipbar[b-g2xxwyov9v] {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 0;
}

    .chipbar[b-g2xxwyov9v]::-webkit-scrollbar {
        display: none
    }

.chip[b-g2xxwyov9v] {
    white-space: nowrap;
    border: 1px solid transparent;
    /* ~44px tap target for rush-hour thumb accuracy. Anything smaller and
       servers mis-tap to the next category during peak service. */
    padding: 12px 20px;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    font-weight: 700;
    font-size: 1rem;
    color: #6b7280;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

    .chip:hover:not(.active)[b-g2xxwyov9v] {
        color: #374151;
        background: rgba(0, 0, 0, 0.04);
    }

    .chip.active[b-g2xxwyov9v] {
        border-color: #1f2937;
        color: #fff;
        background: #1f2937;
    }

/* Dark mode: invert the active chip so it actually stands out against the
   already-dark filters bar. Slate-200 fill + dark text mirrors how the rest
   of the dark theme handles selected states.
   Scoped with :not(.basket-toggle):not(.low-stock-chip) so the specialty
   chips (sky-blue basket toggle, orange low-stock filter) keep their own
   coloured active states — they signal different things and shouldn't
   collapse into the generic "category active" treatment. */
html[data-theme="dark"] .chip:not(.basket-toggle):not(.low-stock-chip)[b-g2xxwyov9v] {
    /* Inactive chips were #6b7280 (gray-500) on a dark panel — borderline at
       arm's length. Slate-300 reads cleanly without competing with the active
       state. */
    color: #cbd5e1;
}

html[data-theme="dark"] .chip.active:not(.basket-toggle):not(.low-stock-chip)[b-g2xxwyov9v] {
    border-color: #e2e8f0;
    color: #1f2937;
    background: #e2e8f0;
}

html[data-theme="dark"] .chip:hover:not(.active):not(.basket-toggle):not(.low-stock-chip)[b-g2xxwyov9v] {
    color: #f1f5f9;
    background: rgba(255, 255, 255, 0.06);
}

.chip.basket-toggle[b-g2xxwyov9v] {
    background: #f0f9ff;
    border-color: #0ea5e9;
    color: #0284c7;
    font-weight: 800;
}

.chip.basket-toggle.active[b-g2xxwyov9v] {
    background: #0ea5e9;
    border-color: #0284c7;
    color: #fff;
}

.chip.low-stock-chip[b-g2xxwyov9v] {
    background: #fffbeb;
    border-color: #fbbf24;
    color: #b45309;
    font-weight: 800;
}

.chip.low-stock-chip.active[b-g2xxwyov9v] {
    background: #f59e0b;
    border-color: #d97706;
    color: #fff;
}

.search[b-g2xxwyov9v] {
    margin-left: auto;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 10px 12px;
    border-radius: 10px;
    min-width: 260px;
    gap: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.search:focus-within[b-g2xxwyov9v] {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

.search .search-icon[b-g2xxwyov9v] {
    color: #9ca3af;
    font-size: 14px;
    flex-shrink: 0;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: background 0.15s;
}

.search .search-icon:hover[b-g2xxwyov9v] {
    background: rgba(0,0,0,0.05);
}

.search input[b-g2xxwyov9v] {
    border: none;
    outline: none;
    font-size: 16px;
    width: 100%;
    background: transparent;
}

.search .kbd-hint[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.search:focus-within .kbd-hint[b-g2xxwyov9v] {
    opacity: 0;
    pointer-events: none;
}

/* Keyboard trigger button */
.tk-trigger[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: linear-gradient(180deg, #f8fafc, #e5e7eb);
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.tk-trigger:hover[b-g2xxwyov9v] {
    background: linear-gradient(180deg, #e5e7eb, #d1d5db);
    border-color: #d1d5db;
    transform: scale(1.05);
}

.tk-trigger:active[b-g2xxwyov9v] {
    transform: scale(0.95);
    box-shadow: none;
}

/* Dark theme keyboard trigger */
html[data-theme="dark"] .tk-trigger[b-g2xxwyov9v] {
    background: linear-gradient(180deg, #374151, #1f2937);
    border-color: #4b5563;
}

html[data-theme="dark"] .tk-trigger:hover[b-g2xxwyov9v] {
    background: linear-gradient(180deg, #4b5563, #374151);
    border-color: #6b7280;
}

.kbd[b-g2xxwyov9v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background: linear-gradient(180deg, #f8f9fa, #e9ecef);
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    box-shadow: 0 1px 0 #adb5bd;
}

/* Dark theme keyboard hint */
html[data-theme="dark"] .kbd[b-g2xxwyov9v] {
    background: linear-gradient(180deg, #374151, #1f2937);
    border-color: #4b5563;
    color: #9ca3af;
    box-shadow: 0 1px 0 #111827;
}

/* Workspace now only contains products (summary is outside) */
.workspace[b-g2xxwyov9v] {
    display: block;
    padding: 12px 16px 16px;
    height: 100%;
    position: relative;
}

.products-panel[b-g2xxwyov9v] {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    min-width: 0;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.summary[b-g2xxwyov9v] {
    height: 100%;
    position: relative;
}

/* When TableSlidePanel is in auto-hide mode, add right padding so scrollbar isn't hidden under hot edge */
.page.with-tables.tables-auto .summary[b-g2xxwyov9v] {
    padding-right: 4px;
}

.workspace.full-products .summary[b-g2xxwyov9v] {
    display: none;
}

/* ========================================
   MAIN CONTENT LAYOUT MODES
   ======================================== */

/* Smooth transitions for mode switching */
.main-content[b-g2xxwyov9v] {
    transition: grid-template-columns 0.5s ease-in-out;
}

.summary[b-g2xxwyov9v] {
    transition: all 0.5s ease-in-out;
}

.left-column[b-g2xxwyov9v] {
    transition: all 0.5s ease-in-out;
}

.workspace[b-g2xxwyov9v] {
    transition: all 0.5s ease-in-out;
}

.actions[b-g2xxwyov9v], .filters[b-g2xxwyov9v] {
    transition: all 0.4s ease-in-out;
}

/* COMPACT MODE - simple two-column flexbox */
.main-content:not(.main-content-grid)[b-g2xxwyov9v] {
    flex: 1;
    display: flex;
    flex-direction: row;
    min-height: 0;
    overflow: hidden;
}

/* Left column: 60% width, flex column layout */
.main-content:not(.main-content-grid) .left-column[b-g2xxwyov9v] {
    flex: 0 0 60%;
    width: 60%;
    max-width: 60%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Actions bar - no shrink */
.main-content:not(.main-content-grid) .left-column .actions[b-g2xxwyov9v] {
    flex-shrink: 0;
}

/* Filters bar - no shrink */
.main-content:not(.main-content-grid) .left-column .filters[b-g2xxwyov9v] {
    flex-shrink: 0;
}

/* Workspace fills remaining height */
.main-content:not(.main-content-grid) .left-column .workspace[b-g2xxwyov9v] {
    flex: 1 1 auto;
    padding: 12px 16px;
    overflow: hidden;
    min-height: 0;
}

/* Products panel scrolls within workspace - grid is layout only */
.main-content:not(.main-content-grid) .left-column .workspace .products-panel[b-g2xxwyov9v] {
    height: 100%;
    overflow-y: auto;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.main-content:not(.main-content-grid) .left-column .workspace .grid[b-g2xxwyov9v] {
    height: auto;
    overflow: visible;
}

/* Payment bar at bottom - no shrink */
.main-content:not(.main-content-grid) .left-column .payment-bar[b-g2xxwyov9v] {
    flex-shrink: 0;
}

/* Summary: 40% width on right */
.main-content:not(.main-content-grid) .summary[b-g2xxwyov9v] {
    flex: 0 0 40%;
    width: 40%;
    max-width: 40%;
    display: flex;
    flex-direction: column;
    background: var(--card);
    overflow: hidden;
    min-height: 0;
    padding: 14px;
    margin: 8px 16px 8px 0;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,.04);
}

/* ========================================
   BASKET-FULL (ALTA) MODE - Two columns
   ======================================== */

/* Main content in basket-full mode - fills remaining height of left-section */
.main-content.main-content-grid[b-g2xxwyov9v] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

/* Left column - flex column for internal layout */
.main-content-grid .left-column[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Workspace fills remaining height */
.main-content-grid .workspace[b-g2xxwyov9v] {
    flex: 1 1 auto;
    padding: 12px 16px;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}

/* Payment bar at bottom of left column */
.main-content-grid .payment-bar[b-g2xxwyov9v] {
    flex-shrink: 0;
}

/* Summary: right column - full height, direct child of pos-shell in basket-full mode */
.pos-shell.basket-full > .summary[b-g2xxwyov9v],
.summary.summary-full[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border-left: 4px solid #e5e7eb;
    box-shadow: -4px 0 20px rgba(0,0,0,0.1);
    border-radius: 0;
    min-height: 0;
    max-height: 100vh;
    max-height: 100dvh;    /* explicit height constraint for scroll */
    max-height: calc(100dvh - var(--pwa-banner-h, 0px));
    padding: 0;
    margin: 0;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

/* Visual order status - colored left border */
.summary.has-new[b-g2xxwyov9v] {
    border-left-color: #f59e0b; /* Yellow/amber - new items pending */
}

.summary.all-sent[b-g2xxwyov9v] {
    border-left-color: #10b981; /* Green - all items sent */
}

.summary.empty-basket[b-g2xxwyov9v] {
    border-left-color: #e5e7eb; /* Gray - no items */
}

/* Ensure ticket-bar is flush to top */
.pos-shell.basket-full > .summary .ticket-bar[b-g2xxwyov9v],
.summary.summary-full .ticket-bar[b-g2xxwyov9v] {
    margin-top: 0;
}

.pos-shell.basket-full > .summary .lines[b-g2xxwyov9v],
.summary.summary-full .lines[b-g2xxwyov9v] {
    flex: 1 1 auto;
    overflow-y: auto;
    max-height: none;
    padding-bottom: 16px;
}

/* Basket content - scrollable area with padding */
.basket-content[b-g2xxwyov9v] {
    flex: 1 1 0;          /* 0 basis forces flex to constrain height */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;   /* prevent scroll chaining to parent */
    padding: 0 14px;
    min-height: 0;
}

/* Kitchen button at bottom */
.pos-shell.basket-full > .summary .btn-kitchen[b-g2xxwyov9v],
.summary.summary-full .btn-kitchen[b-g2xxwyov9v] {
    flex-shrink: 0;
    margin: 0;
    border-radius: 0;
}

/* Left column items in basket-full mode - more compact */
.main-content-grid .actions[b-g2xxwyov9v] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
}

.main-content-grid .filters[b-g2xxwyov9v] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
}

.grid-toggle-bar[b-g2xxwyov9v] {
    display: flex;
    justify-content: flex-end;
    padding: 0 16px 6px;
}

.grid-toggle-btn[b-g2xxwyov9v] {
    border: 1px solid #d5dde9;
    background: #fff;
    border-radius: 10px;
    padding: 6px 10px;
    font-weight: 700;
    cursor: pointer;
}

.grid-toggle-btn:hover[b-g2xxwyov9v] {
    background: #f3f4f6;
}




.grid[b-g2xxwyov9v] {
    background: var(--card);
    border-radius: 14px;
    padding: 14px;
    padding-right: 8px; /* Space between content and scrollbar */
    overflow: visible; /* Let products-panel handle scrolling - fixes Chrome/Edge */
    box-shadow: 0 6px 18px rgba(0,0,0,.04);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Scrollbar styling moved to site.css (CSS isolation doesn't work with pseudo-elements) */

.tile[b-g2xxwyov9v] {
    position: relative; /* Required for absolute positioned badges */
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 90px; /* Consistent card height */
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.tile:hover[b-g2xxwyov9v] {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
    border-color: var(--brand);
    background: #fff;
}

.tile:active[b-g2xxwyov9v] {
    transform: translateY(-1px) scale(1.005);
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
    background: #f8f8f8;
    border-color: var(--brand-dark);
}

/* Sold-out (86'd) items */
.tile.sold-out[b-g2xxwyov9v] {
    background: #f3f4f6;
    border-color: #d1d5db;
    opacity: 0.65;
    cursor: not-allowed;
    position: relative;
}

.tile.sold-out:hover[b-g2xxwyov9v] {
    transform: none;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
    border-color: #d1d5db;
    background: #f3f4f6;
}

.tile.sold-out:active[b-g2xxwyov9v] {
    transform: none;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
    background: #f3f4f6;
    border-color: #d1d5db;
}

.tile.sold-out .tile-name[b-g2xxwyov9v] {
    color: #6b7280;
    text-decoration: line-through;
}

.tile.sold-out .price[b-g2xxwyov9v] {
    color: #9ca3af;
    text-decoration: line-through;
}

.sold-out-badge[b-g2xxwyov9v] {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #dc2626;
    color: white;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
}

.stock-badge[b-g2xxwyov9v] {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #f59e0b;
    color: white;
    font-size: 0.75rem;
    font-weight: 800;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.4);
}

/* Low stock quantity badge (top-right) - shows remaining stock for items running low */
.low-stock-qty-badge[b-g2xxwyov9v] {
    position: absolute;
    top: 6px;
    right: 6px;
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
    color: white;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 3px;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(194, 65, 12, 0.5);
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
    letter-spacing: 0.02em;
}

/* Softer amber border for low-stock tiles - less glare */
.tile.low-stock[b-g2xxwyov9v] {
    border-color: #d4a574;
    border-width: 2px;
    background: linear-gradient(135deg, #fef9f3 0%, #fef3e2 100%);
}

.tile.low-stock:hover[b-g2xxwyov9v] {
    border-color: #c9956a;
    background: linear-gradient(135deg, #fef3e2 0%, #fde9cc 100%);
}

.tile-name[b-g2xxwyov9v] {
    font-weight: 700;
    color: var(--ink);
    /* Height-aware so the name stays large AND consistent across machines.
       The old fixed 1.5rem got cliff-dropped to 0.8rem by the max-height:768/800
       rules below — which a Mac 15" Retina (≈780px viewport) trips but a Windows
       15" at 1080p (≈960px viewport) doesn't, so "the same 15 inch" looked half
       the size on the Mac. This scales smoothly ~1.2rem→1.5rem with viewport
       height instead; the per-height .tile-name overrides below were removed. */
    font-size: clamp(1.15rem, 1.39vh + 0.6rem, 1.5rem);
    line-height: 1.2;
    letter-spacing: 0.005em;
    /* Always reserve 2 lines so single-line and two-line names produce equal
       tile heights — without this, "Beef Fried Rice" and "Black Pepper Beef"
       sit at different vertical positions and the grid feels jittery. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em; /* 2 lines × line-height (em scales with font-size on mobile breakpoints) */
}

.price[b-g2xxwyov9v] {
    margin-top: auto;
    align-self: flex-end;
    color: var(--ink);
    opacity: 0.72;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.01em;
}

/* Cards with images get different treatment */
.tile.has-img[b-g2xxwyov9v] {
    background: #fff;
    border-color: #e5e7eb;
    min-height: auto;
}

.tile.has-img:hover[b-g2xxwyov9v] {
    background: #fafafa;
    border-color: #d1d5db;
}

/* Thin colored stripe for image-less tiles — replaces the old
   tile-placeholder block. Gives a category-recognition cue without
   stealing visual weight from the item name. */
.tile-stripe[b-g2xxwyov9v] {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    margin-bottom: 4px;
    flex-shrink: 0;
    opacity: 0.85;
}

.tile.no-img[b-g2xxwyov9v] {
    background: var(--card);
    border-color: transparent;
}

.tile.no-img:hover[b-g2xxwyov9v] {
    border-color: #4b5563;
}

/* ========================================
   COMPACT VIEW - Smaller tiles for small screens
   ======================================== */
.grid.compact[b-g2xxwyov9v] {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
    padding: 10px;
}

.grid.compact .tile[b-g2xxwyov9v] {
    padding: 8px;
    gap: 4px;
    min-height: 50px;
    border-radius: 8px;
}

.grid.compact .tile-name[b-g2xxwyov9v] {
    font-size: 0.85rem;
    font-weight: 700;
    -webkit-line-clamp: 2;
}

.grid.compact .price[b-g2xxwyov9v] {
    font-size: 0.85rem;
    font-weight: 800;
}

.grid.compact .muted[b-g2xxwyov9v] {
    font-size: 0.7rem;
}

.summary[b-g2xxwyov9v] {
    background: var(--card);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 18px rgba(0,0,0,.04);
    min-height: 0;
}

    .summary h3[b-g2xxwyov9v] {
        margin: 0 0 8px;
        color: var(--ink)
    }

    .summary .lines[b-g2xxwyov9v] {
        flex: 1;
        overflow: auto;
        overscroll-behavior: contain;
    }

/* Basket lines */
.line[b-g2xxwyov9v] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 8px;
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
    min-height: 56px;
    position: relative;
}

    .line .info[b-g2xxwyov9v] {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }

    .line .name[b-g2xxwyov9v] {
        display: grid;
        grid-template-columns: auto minmax(0,1fr) auto;
        align-items: center;
        column-gap: 8px;
        min-width: 0;
        white-space: nowrap;
    }

        .line .name .name-text[b-g2xxwyov9v] {
            min-width: 0;
            white-space: nowrap;
            overflow: visible;
            text-overflow: unset;
        }

.line-actions[b-g2xxwyov9v] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: nowrap;
}

/* Extra spacing before destructive action (trash) */
.line-actions .trash[b-g2xxwyov9v] {
    margin-left: 8px;
}

    .line-actions .qty[b-g2xxwyov9v] {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        flex-wrap: nowrap;
        flex: 0 0 auto;
    }

.line-total[b-g2xxwyov9v] {
    white-space: nowrap;
    font-weight: 800;
    min-width: 120px;
    text-align: right;
    margin-left: auto;
    margin-right: 12px;
    flex: 0 0 auto;
}

.line .more[b-g2xxwyov9v],
.line .trash[b-g2xxwyov9v] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: grid;
    place-items: center;
}

.line-actions .qty button[b-g2xxwyov9v],
.line-actions .more[b-g2xxwyov9v],
.line-actions .trash[b-g2xxwyov9v] {
    min-width: 44px;
    min-height: 44px;
    text-align: center;
}

/* Status styling */
.basket-item.status-new[b-g2xxwyov9v] {
    border-left: 4px solid #e0e0e0;
    background: #fff;
}

    .basket-item.status-new[b-g2xxwyov9v]::before {
        content: "•";
        color: #999;
        font-size: 18px;
        position: absolute;
        left: 8px;
        top: 10px;
    }

/* Group headers */
.section-header[b-g2xxwyov9v] {
    background: #f8f9fa;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 8px;
    margin: 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
}

    .section-header:hover[b-g2xxwyov9v] {
        background: #e9ecef;
    }

.section-title[b-g2xxwyov9v] {
    font-weight: 800;
}

.section-count[b-g2xxwyov9v] {
    color: #6b7280;
    font-weight: 700;
}

.section-total[b-g2xxwyov9v] {
    margin-left: auto;
    font-weight: 800;
}

.section-items[b-g2xxwyov9v] {
    overflow: hidden;
    transition: max-height 0.25s ease;
}

    .section-items.collapsed[b-g2xxwyov9v] {
    max-height: 0;
    padding: 0;
    margin: 0;
}

.time-in-table[b-g2xxwyov9v] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin: 4px 0 8px;
    font-size: 0.9rem;
    background: #6b7280;
    border: none;
    border-radius: 20px;
    color: #fff;
    font-weight: 700;
    transition: all 0.3s ease;
}

.time-in-table[b-g2xxwyov9v]::before {
    content: "⏱";
    font-size: 1.1rem;
}

.time-in-table .time-value[b-g2xxwyov9v] {
    font-weight: 900;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.time-in-table .time-label[b-g2xxwyov9v] {
    font-weight: 600;
    opacity: 0.9;
}

.time-in-table .time-status[b-g2xxwyov9v] {
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.time-in-table .time-separator[b-g2xxwyov9v] {
    opacity: 0.7;
    font-weight: 400;
}

/* Green state - 0-30 minutes (normal) */
.time-in-table.timer-green[b-g2xxwyov9v] {
    background: #22c55e;
    color: #fff;
}

/* Amber state - 30-60 minutes (long) */
.time-in-table.timer-amber[b-g2xxwyov9v] {
    background: #f59e0b;
    color: #fff;
    animation: timer-amber-pulse-b-g2xxwyov9v 2s ease-in-out infinite;
}

@keyframes timer-amber-pulse-b-g2xxwyov9v {
    0%, 100% { background: #f59e0b; }
    50% { background: #d97706; }
}

/* Red state - 60+ minutes (attention) */
.time-in-table.timer-red[b-g2xxwyov9v] {
    background: #ef4444;
    color: #fff;
    animation: timer-red-pulse-b-g2xxwyov9v 1s ease-in-out infinite;
}

@keyframes timer-red-pulse-b-g2xxwyov9v {
    0%, 100% { background: #ef4444; transform: scale(1); }
    50% { background: #dc2626; transform: scale(1.02); }
}

.time-in-table .muted[b-g2xxwyov9v] {
    font-weight: 600;
    opacity: 0.9;
}

/* Partial Payment Indicator - shown when order has partial payment */
.partial-payment-indicator[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 0 0 8px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: 12px;
    font-size: 0.9rem;
    animation: partial-pulse-b-g2xxwyov9v 2s ease-in-out infinite;
}

@keyframes partial-pulse-b-g2xxwyov9v {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2); }
}

.partial-payment-indicator .partial-icon[b-g2xxwyov9v] {
    font-size: 1.2rem;
}

.partial-payment-indicator .partial-text[b-g2xxwyov9v] {
    font-weight: 800;
    color: #92400e;
}

.partial-payment-indicator .partial-pending[b-g2xxwyov9v] {
    margin-left: auto;
    font-weight: 700;
    color: #b45309;
    background: rgba(180, 83, 9, 0.15);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.85rem;
}

.partial-payment-indicator .expand-icon[b-g2xxwyov9v] {
    color: #92400e;
    font-size: 0.7rem;
    margin-left: 8px;
}

/* Payment History List */
.payment-history-list[b-g2xxwyov9v] {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 8px;
}

.payment-history-item[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    font-size: 0.85rem;
    border-bottom: 1px solid #fed7aa;
}

.payment-history-item:last-child[b-g2xxwyov9v] {
    border-bottom: none;
}

.payment-history-item .payment-method-icon[b-g2xxwyov9v] {
    font-size: 1rem;
}

.payment-history-item .payment-method[b-g2xxwyov9v] {
    color: #92400e;
    font-weight: 500;
}

.payment-history-item .payment-amount[b-g2xxwyov9v] {
    margin-left: auto;
    font-weight: 700;
    color: #b45309;
}

.payment-history-item .payment-time[b-g2xxwyov9v] {
    color: #78716c;
    font-size: 0.75rem;
    margin-left: 8px;
}

/* Fully Paid Indicator */
.partial-payment-indicator.fully-paid[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border-color: #6ee7b7;
    animation: none;
}

.partial-payment-indicator.fully-paid .partial-icon[b-g2xxwyov9v] {
    color: #059669;
}

.partial-payment-indicator.fully-paid .fully-paid-text[b-g2xxwyov9v] {
    color: #047857;
    font-weight: 800;
}

.partial-payment-indicator.fully-paid .expand-icon[b-g2xxwyov9v] {
    color: #059669;
}

/* QR Payment Badge */
.qr-payment-badge[b-g2xxwyov9v] {
    background: #8b5cf6;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
    margin-right: 4px;
}

/* QR Payment in history list */
.payment-history-item.qr-payment[b-g2xxwyov9v] {
    background: rgba(139, 92, 246, 0.1);
    border-radius: 4px;
}

.payment-history-item.qr-payment .payment-method[b-g2xxwyov9v] {
    color: #7c3aed;
}

/* Fully paid history list */
.partial-payment-indicator.fully-paid + .payment-history-list[b-g2xxwyov9v],
.partial-payment-indicator.fully-paid ~ .payment-history-list[b-g2xxwyov9v] {
    background: #ecfdf5;
    border-color: #a7f3d0;
}

/* Auto-promotion applied indicator */
.promo-applied-indicator[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin: 0 0 8px;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border: 2px solid #60a5fa;
    border-radius: 12px;
    font-size: 0.85rem;
}

.promo-applied-indicator .promo-icon[b-g2xxwyov9v] {
    font-size: 1.1rem;
}

.promo-applied-indicator .promo-savings[b-g2xxwyov9v] {
    font-weight: 700;
    color: #1e40af;
}

/* Send to Kitchen button - inside basket */
.btn-kitchen[b-g2xxwyov9v] {
    width: 100%;
    margin-top: 12px;
    padding: 14px 20px;
    border: none;
    border-radius: 12px;
    font-weight: 900;
    font-size: 1rem;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(180deg, #22c55e, #16a34a);
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
    transition: all 0.2s ease;
}

.btn-kitchen:hover:not(:disabled)[b-g2xxwyov9v] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(22, 163, 74, 0.4);
}

.btn-kitchen:active:not(:disabled)[b-g2xxwyov9v] {
    transform: translateY(0);
}

.btn-kitchen:disabled[b-g2xxwyov9v] {
    background: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
}

html[data-theme="dark"] .btn-kitchen:disabled[b-g2xxwyov9v] {
    background: #374151;
    color: #6b7280;
}

/* Inline nuevos total in kitchen button - always visible */
.btn-kitchen-total[b-g2xxwyov9v] {
    font-weight: 900;
    opacity: 0.9;
}

.basket-item.status-sent[b-g2xxwyov9v] {
    border-left: 4px solid #4CAF50;
    background: #e8f5e9;
}

.basket-item.status-pending[b-g2xxwyov9v] {
    border-left: 4px solid #FF9800;
    background: #fff3e0;
}

.basket-item.status-preparing[b-g2xxwyov9v] {
    border-left: 4px solid #2563eb;
    background: #e5edff;
}

.basket-item.status-cancelled[b-g2xxwyov9v] {
    border-left: 4px solid #ef4444;
    background: #ffebee;
}

    .basket-item.status-cancelled .name-text[b-g2xxwyov9v] {
        text-decoration: line-through;
    }

.basket-item.item-added[b-g2xxwyov9v] {
    animation: item-added-b-g2xxwyov9v 0.5s ease-out 1;
}

@keyframes item-added-b-g2xxwyov9v {
    0% {
        background: #ffeb3b40;
    }

    100% {
        background: #fff;
    }
}



/* Payment bar in left column */
.payment-bar[b-g2xxwyov9v] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--card);
    border-top: 1px solid #ececec;
    flex-shrink: 0;
    flex-grow: 0;
    width: 100%;
    box-sizing: border-box;
}

.pay[b-g2xxwyov9v] {
    flex: 1 1 0%;
    padding: 14px 12px;
    border: none;
    border-radius: 12px;
    font-weight: 800;
    font-size: 1rem;
    color: #fff;
    cursor: pointer;
    min-height: 52px;
    min-width: 0;
    max-width: none;
    position: relative;
    transition: transform 0.1s ease, filter 0.1s ease, box-shadow 0.1s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.pay .shortcut-hint[b-g2xxwyov9v] {
    font-size: 0.7rem;
    opacity: 0.7;
    font-weight: 600;
}

.pay:hover:not(:disabled)[b-g2xxwyov9v] {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.pay:active:not(:disabled)[b-g2xxwyov9v] {
    transform: translateY(0);
    filter: brightness(0.95);
}

.pay:disabled[b-g2xxwyov9v] {
    background: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
}

html[data-theme="dark"] .pay:disabled[b-g2xxwyov9v] {
    background: #374151;
    color: #6b7280;
}

.pay-cash[b-g2xxwyov9v] {
    background: linear-gradient(180deg,#10b981,#059669);
}

.pay-card[b-g2xxwyov9v] {
    background: linear-gradient(180deg,#60a5fa,#2563eb);
}

.pay-screen[b-g2xxwyov9v] {
    background: linear-gradient(180deg,#f59e0b,#d97706);
}

/* Dark theme payment bar */
html[data-theme="dark"] .payment-bar[b-g2xxwyov9v] {
    background: var(--card);
    border-top-color: #374151;
}

.modal-root[b-g2xxwyov9v] {
    position: fixed;
    inset: 0 0 var(--pwa-banner-h, 0px) 0; /* dialogs centre above the «Instalar Mesero TPV» bar while it shows (index.html) */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    pointer-events: none
}

    .modal-root.open[b-g2xxwyov9v] {
        pointer-events: auto
    }

.modal-backdrop[b-g2xxwyov9v] {
    position: absolute;
    inset: 0;
    /* Explicit z-index so the backdrop can NEVER paint above its sibling
       .modal-card. Previously both relied on DOM order + z-index:auto,
       which is fragile against any ancestor/context that alters the
       card's positioning or stacking (e.g. the .page.with-tables
       .tablesbar !important neutralizers): the dark backdrop would then
       render over the modal and swallow clicks, dismissing it. Pinning
       backdrop:0 / card:1 makes the order unconditional. */
    z-index: 0;
    background: rgba(0,0,0,.45);
    opacity: 0;
    transition: opacity .2s ease
}

.modal-root.open .modal-backdrop[b-g2xxwyov9v] {
    opacity: 1
}

/* Base modal card — applies to every confirm/info/picker modal in
   Pos.razor. Custom modal classes (.move-table-modal, .history-modal,
   .shortcuts-modal, etc.) live in this same scoped stylesheet with
   specificity (0,2,0) equal to this base, and come later in source
   order — so they override the base naturally without specificity
   tricks. Previously this block used `:not(.discount-modal):not(.pin-modal)`
   which lifted the specificity to (0,4,0) and inadvertently beat every
   custom modifier class, forcing move-table-modal (dark, 520px), the
   history-modal, and every other modifier modal into the default white
   420px look. */
.modal-card[b-g2xxwyov9v] {
    position: relative;
    /* Always above the .modal-backdrop sibling — see backdrop note. */
    z-index: 1;
    width: 420px;
    max-width: 90vw;
    background: #fff;
    border-radius: 16px;
    padding: 26px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
    transform: translateY(8px) scale(.98);
    opacity: 0;
    transition: all .22s ease;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: hidden;
    box-sizing: border-box
}

.modal-card > div[b-g2xxwyov9v] {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word
}

/* Discount + PIN modals own their own sizing / layout / typography.
   Scoped here (rather than relying on site.css `.modal-card.discount-modal`)
   so specificity is (0,3,0) — beats the base (0,2,0) in the same scope
   and wins cleanly without having to fight scoped-CSS source order
   against the unscoped site.css rule. The content styling
   (.disc-hero, .disc-preview, chips, CTA gradient, etc.) still lives
   in site.css since those selectors don't conflict with anything here.

   word-wrap / overflow-wrap reset to `normal` so labels like
   "DESCUENTO", "A PAGAR", "MOTIVO (OPCIONAL)" can't break letter-by-
   letter on narrow columns — the original regression that kicked off
   this whole chain. */
.modal-card.discount-modal[b-g2xxwyov9v],
.modal-card.pin-modal[b-g2xxwyov9v] {
    width: 720px;
    max-width: 95vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    text-align: left;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 20px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.32), 0 2px 4px rgba(15, 23, 42, 0.06);
    color: #0f172a;
    font-family: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    word-wrap: normal;
    overflow-wrap: normal;
}

.modal-card.pin-modal[b-g2xxwyov9v] {
    width: 460px;
}

.modal-card.discount-modal > div[b-g2xxwyov9v],
.modal-card.pin-modal > div[b-g2xxwyov9v] {
    max-width: none;
    word-wrap: normal;
    overflow-wrap: normal;
}

.modal-card .muted[b-g2xxwyov9v] {
    white-space: normal
}

/* The confirm dialog's body is the one place we compose MULTI-LINE operator text:
   the print-failure paths join a per-role diagnosis ("Cocina (192.168.1.50:9100):
   la impresora no respondió") with newlines. `white-space: normal` — inherited
   from .modal-card .muted above — collapses those newlines into spaces, fusing
   every line into one run-on paragraph, which is exactly the unreadable wall the
   per-role breakdown exists to avoid. `pre-line` keeps the line breaks while still
   collapsing incidental spaces and wrapping normally.

   Scoped to the id, not to .muted, so other modals keep their current behaviour.

   The height cap is the safety valve that makes this change self-contained: now
   that the body really can be several lines, a venue with many failing zones could
   otherwise grow the card until ACEPTAR sits below the fold on a phone, leaving the
   operator with a modal they cannot dismiss. Scroll the text, never the button. */
#confirm-text[b-g2xxwyov9v] {
    white-space: pre-line;
    max-height: 42vh;
    overflow-y: auto;
}

.modal-root.open .modal-card[b-g2xxwyov9v] {
    transform: translateY(0) scale(1);
    opacity: 1
}

.modal-cta[b-g2xxwyov9v] {
    margin-top: 12px;
    background: #111827;
    color: #fff;
    border: none;
    padding: 12px 18px;
    border-radius: 10px;
    font-weight: 800;
    cursor: pointer
}

/* Confirm-modal action link (e.g. "Descargar Mesero Comandas →"). Primary
   blue so it's the obvious next step; the plain ACEPTAR drops to a muted
   secondary below it. Only appears when a caller sets ConfirmCtaUrl. */
.confirm-cta-primary[b-g2xxwyov9v], .confirm-cta-link[b-g2xxwyov9v] {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 6px rgba(29, 78, 216, 0.35);
}
.modal-cta-secondary[b-g2xxwyov9v] {
    display: block;
    width: 100%;
    margin-top: 8px;
    background: transparent;
    color: var(--muted, #94a3b8);
    border: none;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

.modal-cta.cta-flash:not(:disabled)[b-g2xxwyov9v] {
    animation: cta-flash-b-g2xxwyov9v .8s ease-in-out 0s 2;
    background: #059669;
}

@keyframes cta-flash-b-g2xxwyov9v {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* ========================================
   TABLE PICKER MODAL - Improved UI
   ======================================== */
.table-picker-modal[b-g2xxwyov9v] {
    width: 520px;
    max-width: 95vw;
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.picker-header[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
}

.picker-icon[b-g2xxwyov9v] {
    font-size: 1.6rem;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

.picker-title[b-g2xxwyov9v] {
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

.picker-grid-container[b-g2xxwyov9v] {
    max-height: 45vh;
    overflow-y: auto;
    padding: 16px 20px;
    background: #111827;
}

.picker-section-label[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #10b981;
    margin-bottom: 10px;
    margin-top: 16px;
}

.picker-section-label[b-g2xxwyov9v]::before {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #374151);
}

.picker-section-label[b-g2xxwyov9v]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, #374151, transparent);
}

.picker-section-label:first-child[b-g2xxwyov9v] {
    margin-top: 0;
}

.picker-section-label.muted[b-g2xxwyov9v] {
    color: #9ca3af;
}

.picker-grid[b-g2xxwyov9v] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
}

.picker-grid-busy[b-g2xxwyov9v] {
    opacity: 0.45;
}

.picker-table-btn[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 14px 8px;
    border-radius: 12px;
    border: 2px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 64px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.picker-table-btn:hover:not(:disabled)[b-g2xxwyov9v] {
    border-color: #3b82f6;
    background: #eff6ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.picker-table-btn.selected[b-g2xxwyov9v] {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.picker-table-btn.selected .table-seats[b-g2xxwyov9v] {
    color: rgba(255,255,255,0.85);
}

.picker-table-btn.busy[b-g2xxwyov9v] {
    cursor: not-allowed;
    background: #64748b;
    border-color: #475569;
    box-shadow: none;
    color: #fff;
}

.picker-table-btn.busy .table-label[b-g2xxwyov9v] {
    color: #fff;
}

.picker-table-btn .table-label[b-g2xxwyov9v] {
    font-weight: 800;
    font-size: .95rem;
    color: #1e293b;
}

.picker-table-btn .table-seats[b-g2xxwyov9v] {
    font-size: .85rem;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 2px;
}

.picker-guests[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0 20px 16px;
    padding: 14px 16px;
    background: #1e293b;
    border-radius: 12px;
    border: 1px solid #334155;
}

.picker-guests label[b-g2xxwyov9v] {
    font-weight: 700;
    color: #e2e8f0;
    font-size: .9rem;
}

.guests-control[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 0;
    border: 2px solid #475569;
    border-radius: 10px;
    overflow: hidden;
    background: #0f172a;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.guests-control input[b-g2xxwyov9v] {
    width: 56px;
    text-align: center;
    border: none;
    padding: 10px 4px;
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    background: #0f172a;
    -moz-appearance: textfield;
    cursor: pointer;
}

.guests-control input[b-g2xxwyov9v]::-webkit-outer-spin-button,
.guests-control input[b-g2xxwyov9v]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.guests-btn[b-g2xxwyov9v] {
    width: 40px;
    height: 40px;
    border: none;
    background: #334155;
    cursor: pointer;
    font-size: 1.3rem;
    font-weight: 700;
    color: #e2e8f0;
    transition: all 0.15s;
}

.guests-btn:hover[b-g2xxwyov9v] {
    background: #475569;
    color: #fff;
}

.guests-btn:active[b-g2xxwyov9v] {
    background: #1e293b;
}

.picker-actions[b-g2xxwyov9v] {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 16px 20px 20px;
    background: #1e293b;
    border-top: 1px solid #334155;
}

.picker-actions .modal-cta[b-g2xxwyov9v] {
    margin-top: 0;
    padding: 12px 24px;
    font-size: .95rem;
}

.picker-actions .btn[b-g2xxwyov9v] {
    padding: 10px 20px;
}

/* Input highlight when keypad active */
.guests-control input.keypad-active[b-g2xxwyov9v] {
    background: #1e3a5f;
    border-color: #3b82f6;
    outline: 2px solid #3b82f6;
}

/* ========================================
   NUMERIC KEYPAD MODAL
   ======================================== */
.numpad-modal[b-g2xxwyov9v] {
    background: #fff;
    border-radius: 20px;
    padding: 0;
    width: 280px;
    max-width: 90vw;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    opacity: 0;
    transform: translateY(8px) scale(.98);
    transition: all .2s ease;
}

.modal-root.open .numpad-modal[b-g2xxwyov9v] {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.numpad-header[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
}

.numpad-header span:first-child[b-g2xxwyov9v] {
    font-weight: 600;
    font-size: .95rem;
}

.numpad-value[b-g2xxwyov9v] {
    font-size: 2rem;
    font-weight: 800;
    min-width: 60px;
    text-align: right;
}

.numpad-modal .numpad-grid[b-g2xxwyov9v] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 20px;
}

.numpad-btn[b-g2xxwyov9v] {
    height: 56px;
    border: none;
    border-radius: 12px;
    background: #f1f5f9;
    font-size: 1.4rem;
    font-weight: 700;
    color: #1e293b;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: all 0.1s ease;
}

.numpad-btn:hover[b-g2xxwyov9v] {
    background: #e2e8f0;
    transform: scale(1.03);
}

.numpad-btn:active[b-g2xxwyov9v] {
    transform: scale(0.97);
    background: #cbd5e1;
}

.numpad-clear[b-g2xxwyov9v] {
    background: #fef2f2;
    color: #dc2626;
}

.numpad-clear:hover[b-g2xxwyov9v] {
    background: #fee2e2;
}

.numpad-ok[b-g2xxwyov9v] {
    background: #10b981;
    color: #fff;
}

.numpad-ok:hover[b-g2xxwyov9v] {
    background: #059669;
}

/* ========================================
   MOVE TABLE MODAL — Premium redesign
   ======================================== */
.move-table-modal[b-g2xxwyov9v] {
    width: 520px;
    max-width: 95vw;
    padding: 0;
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 16px;
    overflow: hidden;
}

.move-modal-header[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid #1e293b;
}
.move-title-row[b-g2xxwyov9v] { display: flex; align-items: center; gap: 10px; }
.move-icon[b-g2xxwyov9v] { font-size: 1.25rem; color: #818cf8; }
.move-title[b-g2xxwyov9v] {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #f8fafc;
    letter-spacing: -0.01em;
}
.move-close-x[b-g2xxwyov9v] {
    width: 28px; height: 28px;
    border-radius: 8px;
    border: 1px solid #1e293b;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    display: grid; place-items: center;
    transition: all .15s;
}
.move-close-x:hover[b-g2xxwyov9v] {
    background: #1e293b;
    color: #f8fafc;
    border-color: #334155;
}

/* Source order summary */
.move-source[b-g2xxwyov9v] {
    padding: 14px 20px;
    background: #0c1424;
    border-bottom: 1px solid #1e293b;
}
.move-source-row[b-g2xxwyov9v] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.875rem;
    color: #cbd5e1;
    flex-wrap: wrap;
}
.src-label[b-g2xxwyov9v] { color: #64748b; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.src-table[b-g2xxwyov9v] { color: #f8fafc; font-weight: 700; font-size: 1rem; }
.src-meta[b-g2xxwyov9v] { color: #64748b; font-size: 0.8125rem; }
.src-total[b-g2xxwyov9v] { margin-left: auto; color: #f8fafc; font-weight: 700; font-size: 1rem; }

.move-arrow-row[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 10px;
}
.move-arrow-row.merge[b-g2xxwyov9v] {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.3);
}
.arrow-down[b-g2xxwyov9v] { color: #818cf8; font-size: 1rem; font-weight: 700; }
.move-arrow-row.merge .arrow-down[b-g2xxwyov9v] { color: #fbbf24; }
.dst-table[b-g2xxwyov9v] { color: #f8fafc; font-weight: 700; font-size: 0.9375rem; }
.merge-pill[b-g2xxwyov9v] {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    text-transform: uppercase;
}

/* Tables grid container */
.move-tables-grid-container[b-g2xxwyov9v] {
    max-height: 45vh;
    overflow-y: auto;
    padding: 16px 20px;
}

.table-section-label[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    margin: 0 0 10px 0;
}
.table-section-label:not(:first-child)[b-g2xxwyov9v] { margin-top: 18px; }
.table-section-label .status-dot[b-g2xxwyov9v] {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.table-section-label .status-dot.free[b-g2xxwyov9v] { background: #22c55e; }
.table-section-label .status-dot.occupied[b-g2xxwyov9v] { background: #f59e0b; }
.count-badge[b-g2xxwyov9v] {
    background: #1e293b;
    color: #cbd5e1;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 999px;
}
.table-section-label .section-hint[b-g2xxwyov9v] {
    color: #64748b;
    font-style: italic;
    font-size: 0.6875rem;
    margin-left: 4px;
}

.move-tables-grid[b-g2xxwyov9v] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

/* Premium table buttons — subtle, no green flood */
.mt-btn[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    padding: 14px 6px;
    border: 1px solid #1e293b;
    border-left: 3px solid #1e293b;
    border-radius: 10px;
    background: #111827;
    cursor: pointer;
    transition: all .15s;
    position: relative;
}
.mt-btn:hover[b-g2xxwyov9v] {
    background: #1a2332;
    border-color: #334155;
    transform: translateY(-1px);
}
.mt-label[b-g2xxwyov9v] {
    font-weight: 600;
    font-size: 0.875rem;
    color: #f8fafc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.mt-seats[b-g2xxwyov9v] {
    font-size: 0.6875rem;
    color: #64748b;
    font-weight: 500;
}

.mt-btn.free[b-g2xxwyov9v] { border-left-color: #22c55e; }
.mt-btn.occupied[b-g2xxwyov9v] { border-left-color: #f59e0b; }

.mt-btn.selected[b-g2xxwyov9v] {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
    box-shadow: 0 0 0 1px #6366f1;
}
.mt-btn.selected.free[b-g2xxwyov9v] { border-left-color: #6366f1; }
.mt-btn.selected.occupied[b-g2xxwyov9v] { border-left-color: #6366f1; }
.mt-btn.selected .mt-label[b-g2xxwyov9v] { color: #f8fafc; }

/* Footer with proper button hierarchy */
.move-modal-footer[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid #1e293b;
    background: #0c1424;
}

.mv-btn[b-g2xxwyov9v] {
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all .15s;
    border: 1px solid transparent;
    white-space: nowrap;
}
.mv-secondary[b-g2xxwyov9v] {
    background: transparent;
    color: #94a3b8;
    border-color: #1e293b;
    padding: 10px 14px;
}
.mv-secondary:hover[b-g2xxwyov9v] {
    background: #1e293b;
    color: #f8fafc;
}
.mv-cancel[b-g2xxwyov9v] {
    background: transparent;
    color: #94a3b8;
    border-color: #1e293b;
    margin-left: auto;
}
.mv-cancel:hover[b-g2xxwyov9v] {
    background: #1e293b;
    color: #f8fafc;
}
.mv-primary[b-g2xxwyov9v] {
    background: #6366f1;
    color: #fff;
    border-color: #6366f1;
}
.mv-primary:hover:not(:disabled):not(.disabled)[b-g2xxwyov9v] {
    background: #4f46e5;
    border-color: #4f46e5;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
.mv-primary.disabled[b-g2xxwyov9v],
.mv-primary:disabled[b-g2xxwyov9v] {
    background: #1e293b;
    color: #475569;
    border-color: #1e293b;
    cursor: not-allowed;
}

/* Light mode override (modal stays dark for premium feel) */
html:not([data-theme="dark"]) .move-table-modal[b-g2xxwyov9v] {
    background: #0f172a;
    color: #f8fafc;
}

/* ============================================
   UNIR MESAS (link picker) — premium polish
   ============================================
   The link picker shares the .move-table-modal shell with the move-table
   modal but uses its own context/preview/hint/footer-button class names
   (.move-from-context, .move-preview, .move-hint, .move-confirm-btn,
   .move-cancel-btn). Those classes had NO CSS before this block — the
   "Mesa principal", "Mesa + Mesa 2", and the footer buttons were
   rendering as flat unstyled spans/buttons against the dark modal
   background, which made the screen read as an unfinished prototype
   rather than a premium 10/10 modal. Mirrors the move-table palette
   (slate + indigo accent) so both modals feel like one product. */
.move-from-context[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    background: #0c1424;
    border-bottom: 1px solid #1e293b;
    font-size: 0.875rem;
    color: #cbd5e1;
}
.move-from-context .from-label[b-g2xxwyov9v] {
    color: #64748b;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.move-from-context .from-table[b-g2xxwyov9v] {
    color: #f8fafc;
    font-weight: 700;
    font-size: 1rem;
}

.move-preview[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 14px 20px 0;
    padding: 10px 14px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 10px;
    color: #f8fafc;
    font-size: 0.9375rem;
    font-weight: 600;
    flex-wrap: wrap;
    text-align: center;
}
.move-preview .preview-from[b-g2xxwyov9v],
.move-preview .preview-to[b-g2xxwyov9v] {
    color: #f8fafc;
    font-weight: 700;
}
.move-preview .preview-arrow[b-g2xxwyov9v] {
    color: #818cf8;
    font-weight: 700;
    font-size: 1rem;
}

.move-hint[b-g2xxwyov9v] {
    margin: 14px 20px 0;
    padding: 10px 14px;
    background: rgba(148, 163, 184, 0.06);
    border: 1px dashed #334155;
    border-radius: 10px;
    color: #94a3b8;
    font-size: 0.8125rem;
    text-align: center;
}

/* Footer button hierarchy — mirror the .mv-primary / .mv-cancel pair so
   the modal is visually consistent with the move-table modal. */
.move-confirm-btn[b-g2xxwyov9v],
.move-cancel-btn[b-g2xxwyov9v] {
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all .15s;
    border: 1px solid transparent;
    white-space: nowrap;
    min-height: 44px;
}
.move-confirm-btn[b-g2xxwyov9v] {
    background: #6366f1;
    color: #fff;
    border-color: #6366f1;
}
.move-confirm-btn:hover:not(:disabled):not(.disabled)[b-g2xxwyov9v] {
    background: #4f46e5;
    border-color: #4f46e5;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
.move-confirm-btn.disabled[b-g2xxwyov9v],
.move-confirm-btn:disabled[b-g2xxwyov9v] {
    background: #1e293b;
    color: #475569;
    border-color: #1e293b;
    cursor: not-allowed;
}
.move-cancel-btn[b-g2xxwyov9v] {
    background: transparent;
    color: #94a3b8;
    border-color: #1e293b;
    margin-left: auto;
}
.move-cancel-btn:hover[b-g2xxwyov9v] {
    background: #1e293b;
    color: #f8fafc;
}

/* Picker grid container needs a clear scrolling region; the markup
   currently calls it .move-tables-grid-container (not .picker-grid-
   container which is the dark variant). Bring it in line so the link
   picker also gets the dark canvas + scroll cap. */
.move-table-modal .move-tables-grid-container[b-g2xxwyov9v] {
    background: #111827;
}

@keyframes pulse-b-g2xxwyov9v {
    0% {
        box-shadow: 0 0 0 0 rgba(5,150,105,.75)
    }

    70% {
        box-shadow: 0 0 0 14px rgba(5,150,105,0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(5,150,105,0)
    }
}

.status-dot[b-g2xxwyov9v] {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    margin-right: 6px
}


    .status-dot.pulse[b-g2xxwyov9v]::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 999px;
        box-shadow: 0 0 0 0 rgba(5,150,105,.65);
        animation: line-pulse-b-g2xxwyov9v 1s ease-out 1
    }

.save-badge[b-g2xxwyov9v] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity .18s ease,transform .18s ease
}

    .save-badge.show[b-g2xxwyov9v] {
        opacity: 1;
        transform: none
    }

.pulse-dot[b-g2xxwyov9v] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--ok);
    box-shadow: 0 0 0 0 rgba(5,150,105,.75);
    animation: pulse-b-g2xxwyov9v 1.4s ease-out 1
}



@keyframes line-pulse-b-g2xxwyov9v {
    0% {
        box-shadow: 0 0 0 0 rgba(5,150,105,.65);
        opacity: 1
    }

    100% {
        box-shadow: 0 0 0 12px rgba(5,150,105,0);
        opacity: 0
    }
}


.tile.has-img[b-g2xxwyov9v] {
    background: #fff;
    border: 1px solid #eee;
}

/* Light theme: tint the primary actions to dark, keep neutral/ghost/danger distinct */
html[data-theme="light"] .actions .btn.btn-tint[b-g2xxwyov9v] {
    background: #0f172a;
    color: #fff;
    border: 1px solid #0f172a;
}

    html[data-theme="light"] .actions .btn.btn-tint:hover[b-g2xxwyov9v] {
        filter: brightness(1.08);
    }

html[data-theme="light"] .actions .btn.btn-neutral[b-g2xxwyov9v] {
    background: #e5e7eb;
    color: #111827;
    border: 1px solid #d1d5db;
}

html[data-theme="light"] .actions .btn.btn-ghost[b-g2xxwyov9v] {
    background: #fff;
    color: #111827;
    border: 1px solid #e5e7eb;
}

html[data-theme="light"] .actions .btn.btn-danger[b-g2xxwyov9v] {
    background: #c62828;
    border-color: #c62828;
}

.tile-img-wrap[b-g2xxwyov9v] {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 10px;
    background: #f3f4f6;
}

.tile-img[b-g2xxwyov9v] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Image-load fallback. The stripe sits inside the img-wrap, hidden while the
   image loads fine. If the <img> fails, onerror adds .tile-img-failed on the
   TILE, which makes the tile render exactly like an image-less .tile.no-img:
   drop the white has-img background, collapse the square img-wrap, and reveal
   the 4px category stripe — so a dead URL degrades to the normal no-image
   look instead of an empty grey square. */
.tile-stripe-fallback[b-g2xxwyov9v] {
    display: none;
}

/* Match .tile.no-img so a failed-image tile is visually identical to one
   that never had an image. */
.tile.tile-img-failed[b-g2xxwyov9v] {
    background: var(--card);
    border-color: transparent;
}

.tile.tile-img-failed:hover[b-g2xxwyov9v] {
    border-color: #4b5563;
}

.tile.tile-img-failed .tile-img-wrap[b-g2xxwyov9v] {
    aspect-ratio: auto;
    overflow: visible;
    border-radius: 0;
    background: transparent;
}

.tile.tile-img-failed .tile-img[b-g2xxwyov9v] {
    display: none;
}

.tile.tile-img-failed .tile-stripe-fallback[b-g2xxwyov9v] {
    display: block;
}


/* Make sure the cash-drawer button is red */
.actions .btn.btn-danger[b-g2xxwyov9v] {
    background: #c62828 !important;
    color: #fff !important;
}

    .actions .btn.btn-danger:hover[b-g2xxwyov9v] {
        background: #8e0000 !important;
    }

.actions .dropdown[b-g2xxwyov9v] {
    display: inline-flex;
    position: relative;
    padding: 0;
    border: 0;
    background: transparent;
}

.actions .dropdown .dropdown-main[b-g2xxwyov9v] {
    flex: 1;
    padding: 10px 12px;
    border-radius: 12px 0 0 12px;
    border: 1px solid var(--action-neutral-border, #d5dde9);
    background: var(--action-neutral, #e8edf4);
    color: #0f172a;
    font-weight: 800;
    cursor: pointer;
}

.actions .dropdown .dropdown-toggle[b-g2xxwyov9v] {
    width: 38px;
    border-radius: 0 12px 12px 0;
    border: 1px solid var(--action-neutral-border, #d5dde9);
    border-left: 0;
    background: var(--action-neutral, #e8edf4);
    color: #0f172a;
    cursor: pointer;
    font-weight: 900;
}

.actions .dropdown .dropdown-menu[b-g2xxwyov9v] {
    position: absolute;
    top: 110%;
    left: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,.1);
    padding: 6px;
    display: grid;
    gap: 6px;
    z-index: 5;
}

.actions .dropdown .dropdown-menu button[b-g2xxwyov9v] {
    width: 100%;
    text-align: left;
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
    font-weight: 800;
    cursor: pointer;
}

.actions .dropdown .dropdown-menu button:hover[b-g2xxwyov9v] {
    background: #eef2ff;
}

/* Dark theme dropdown buttons */
html[data-theme="dark"] .actions .dropdown .dropdown-main[b-g2xxwyov9v],
html[data-theme="dark"] .actions .dropdown .dropdown-toggle[b-g2xxwyov9v] {
    color: #f3f4f6 !important;
    background: #374151 !important;
    border-color: #4b5563 !important;
}

/* Dark theme dropdown menu */
html[data-theme="dark"] .actions .dropdown .dropdown-menu[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: #374151;
}

html[data-theme="dark"] .actions .dropdown .dropdown-menu button[b-g2xxwyov9v] {
    background: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
}

html[data-theme="dark"] .actions .dropdown .dropdown-menu button:hover[b-g2xxwyov9v] {
    background: #4b5563;
}



/* Optional: course pill */
.pill[b-g2xxwyov9v] {
    display: inline-block;
    padding: 2px 6px;
    margin-left: 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    border: 1px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
}

.pill-course[b-g2xxwyov9v] {
    color: #111827;
}


.hint-tip[b-g2xxwyov9v] {
    margin: 6px 0 10px;
    padding: 8px 10px;
    border: 1px dashed #d1d5db;
    border-radius: 10px;
    background: #f9fafb;
    color: var(--muted);
    font-size: .9rem;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}

.hint-dismiss[b-g2xxwyov9v] {
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-weight: 700;
}


.course-pill[b-g2xxwyov9v] {
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .72rem;
    border: 1px dashed #e5e7eb;
    background: #fff;
    cursor: pointer;
}

    .course-pill.empty[b-g2xxwyov9v] {
        color: var(--muted);
    }

    .course-pill.app[b-g2xxwyov9v] {
        background: #e0f2fe;
        border-color: #bae6fd;
    }
    /* Entrante */
    .course-pill.main[b-g2xxwyov9v] {
        background: #ecfdf5;
        border-color: #bbf7d0;
    }
    /* Principal */
    .course-pill.des[b-g2xxwyov9v] {
        background: #fff7ed;
        border-color: #fed7aa;
    }
/* Postre */


/* ========================================
   SISTEMA DROPDOWN
   ======================================== */

.sistema-dropdown[b-g2xxwyov9v] {
    position: relative;
}

.sistema-backdrop[b-g2xxwyov9v] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.sistema-menu[b-g2xxwyov9v] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 260px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,.15);
    padding: 12px;
    z-index: 100;
    animation: sistema-in-b-g2xxwyov9v 0.15s ease;
}

@keyframes sistema-in-b-g2xxwyov9v {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sistema-item[b-g2xxwyov9v] {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: #111827;
    font-weight: 700;
    transition: background 0.15s;
}

.sistema-item:hover[b-g2xxwyov9v] {
    background: #f3f4f6;
}

/* Quick-stock entry: only surfaced in the menu on phones, where the
   action-row Stock button is hidden. Desktop keeps it in the action row. */
.sistema-stock[b-g2xxwyov9v] {
    display: none;
}

.sistema-divider[b-g2xxwyov9v] {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin: 10px 0;
}

.sistema-label[b-g2xxwyov9v] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 4px 8px;
}

.sistema-row[b-g2xxwyov9v] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.sistema-chip[b-g2xxwyov9v] {
    flex: 1;
    min-width: 70px;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
}

.sistema-chip:hover[b-g2xxwyov9v] {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.sistema-chip.active[b-g2xxwyov9v] {
    background: #0ea5e9;
    color: #fff;
    border-color: #0284c7;
}

/* Dark theme support */
html[data-theme="dark"] .sistema-menu[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: #374151;
}

html[data-theme="dark"] .sistema-item[b-g2xxwyov9v] {
    color: #f3f4f6;
}

html[data-theme="dark"] .sistema-item:hover[b-g2xxwyov9v] {
    background: #374151;
}

html[data-theme="dark"] .sistema-divider[b-g2xxwyov9v] {
    border-color: #374151;
}

html[data-theme="dark"] .sistema-label[b-g2xxwyov9v] {
    color: #9ca3af;
}

html[data-theme="dark"] .sistema-chip[b-g2xxwyov9v] {
    background: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
}

html[data-theme="dark"] .sistema-chip:hover[b-g2xxwyov9v] {
    background: #4b5563;
}

html[data-theme="dark"] .sistema-chip.active[b-g2xxwyov9v] {
    background: #0ea5e9;
    border-color: #0284c7;
}

html[data-theme="dark"] .chip.low-stock-chip[b-g2xxwyov9v] {
    background: #422006;
    border-color: #f59e0b;
    color: #fbbf24;
}

html[data-theme="dark"] .chip.low-stock-chip.active[b-g2xxwyov9v] {
    background: #f59e0b;
    border-color: #d97706;
    color: #1f2937;
}

/* Logout button */
.sistema-logout[b-g2xxwyov9v] {
    width: 100%;
    text-align: left;
    color: #dc2626;
    border: none;
    background: transparent;
    cursor: pointer;
}

.sistema-logout:hover[b-g2xxwyov9v] {
    background: #fef2f2;
}

html[data-theme="dark"] .sistema-logout[b-g2xxwyov9v] {
    color: #f87171;
}

html[data-theme="dark"] .sistema-logout:hover[b-g2xxwyov9v] {
    background: #7f1d1d33;
}

/* ── Phone: settings becomes a native-feeling bottom sheet ──────────────
   A top-anchored 260px dropdown reads as cramped/desktop-y on a phone.
   On ≤600px we re-dock the same menu to the bottom edge, full width, with
   a grab handle, larger tap targets and a dimmed backdrop — the pattern
   users expect from an iOS/Android action sheet. Desktop is untouched. */
@media (max-width: 600px) {
    .sistema-backdrop[b-g2xxwyov9v] {
        background: rgba(0, 0, 0, .45);
        /* The dim area behind the sheet must be inert to touch — otherwise a drag
           there scrolls the POS underneath instead of doing nothing. */
        touch-action: none;
        overscroll-behavior: none;
    }

    .sistema-menu[b-g2xxwyov9v] {
        position: fixed;
        top: auto;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        min-width: 0;
        max-width: none;
        max-height: 85vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* Trap the scroll INSIDE the sheet — without this, scrolling the sheet
           (e.g. to reach Hardware below the fold) chains to the POS behind it. */
        overscroll-behavior: contain;
        touch-action: pan-y;
        border-radius: 20px 20px 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        padding: 22px 16px max(18px, env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -12px 40px rgba(0, 0, 0, .28);
        animation: sistema-sheet-in-b-g2xxwyov9v 0.24s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Grab handle */
    .sistema-menu[b-g2xxwyov9v]::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: #d1d5db;
    }
    html[data-theme="dark"] .sistema-menu[b-g2xxwyov9v]::before {
        background: #4b5563;
    }

    /* Roomier touch targets in the sheet */
    .sistema-menu .sistema-item[b-g2xxwyov9v],
    .sistema-menu .sistema-stock[b-g2xxwyov9v] {
        padding: 14px 12px;
        font-size: 1rem;
    }
    .sistema-menu .sistema-stock[b-g2xxwyov9v] {
        display: block;
    }
    .sistema-menu .sistema-chip[b-g2xxwyov9v] {
        padding: 12px 10px;
        min-height: 46px;
        font-size: 0.95rem;
    }
    .sistema-menu .sistema-label[b-g2xxwyov9v] {
        font-size: 0.78rem;
        padding: 6px 4px 8px;
    }
}

@keyframes sistema-sheet-in-b-g2xxwyov9v {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Clock in/out buttons */
.sistema-clock-status[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 4px 0;
    border-radius: 6px;
    font-size: 0.8rem;
}

.sistema-clock-status.clocked-in[b-g2xxwyov9v] {
    background: #dcfce7;
    color: #166534;
}

.sistema-clock-status .clock-icon[b-g2xxwyov9v] {
    font-size: 1rem;
}

.sistema-clockin[b-g2xxwyov9v] {
    color: #16a34a !important;
}

.sistema-clockin:hover[b-g2xxwyov9v] {
    background: #f0fdf4 !important;
}

.sistema-clockout[b-g2xxwyov9v] {
    color: #dc2626 !important;
}

.sistema-clockout:hover[b-g2xxwyov9v] {
    background: #fef2f2 !important;
}

html[data-theme="dark"] .sistema-clock-status.clocked-in[b-g2xxwyov9v] {
    background: #166534;
    color: #dcfce7;
}

html[data-theme="dark"] .sistema-clockin[b-g2xxwyov9v] {
    color: #4ade80 !important;
}

html[data-theme="dark"] .sistema-clockin:hover[b-g2xxwyov9v] {
    background: #14532d33 !important;
}

html[data-theme="dark"] .sistema-clockout[b-g2xxwyov9v] {
    color: #f87171 !important;
}

html[data-theme="dark"] .sistema-clockout:hover[b-g2xxwyov9v] {
    background: #7f1d1d33 !important;
}

/* Dark theme: totals toggle link */
html[data-theme="dark"] .totals-toggle-link[b-g2xxwyov9v] {
    border-color: #4b5563;
    color: #9ca3af;
}

html[data-theme="dark"] .totals-toggle-link:hover[b-g2xxwyov9v] {
    background: #374151;
    border-color: #6b7280;
    color: #f3f4f6;
}

html[data-theme="dark"] .totals-card.totals-compact[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: #374151;
}

html[data-theme="dark"] .totals-card.totals-compact .totals-head[b-g2xxwyov9v] {
    border-color: #374151;
}

html[data-theme="dark"] .totals-card.totals-compact .toggle-details[b-g2xxwyov9v] {
    color: #9ca3af;
}

html[data-theme="dark"] .totals-card.totals-compact .toggle-details:hover[b-g2xxwyov9v] {
    color: #f3f4f6;
}

/* ========================================
   TOUCH KEYBOARD
   ======================================== */
.search.keyboard-active[b-g2xxwyov9v] {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

.touch-keyboard-overlay[b-g2xxwyov9v] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 90;
    animation: tk-fade-in-b-g2xxwyov9v 0.15s ease;
}

@keyframes tk-fade-in-b-g2xxwyov9v {
    from { opacity: 0; }
    to { opacity: 1; }
}

.touch-keyboard[b-g2xxwyov9v] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    padding: 16px;
    z-index: 100;
    min-width: 520px;
    max-width: 95vw;
    animation: tk-slide-up-b-g2xxwyov9v 0.2s ease;
}

@keyframes tk-slide-up-b-g2xxwyov9v {
    from {
        opacity: 0;
        transform: translate(-50%, -45%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.tk-search-display[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 14px;
    font-size: 1.1rem;
    min-height: 52px;
}

.tk-icon[b-g2xxwyov9v] {
    font-size: 1.2rem;
    opacity: 0.6;
}

.tk-text[b-g2xxwyov9v] {
    flex: 1;
    font-weight: 600;
    color: #111827;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tk-text:empty[b-g2xxwyov9v]::before,
.tk-search-display .tk-text:first-child:last-child[b-g2xxwyov9v]::before {
    content: "buscar...";
    color: #9ca3af;
}

.tk-cursor[b-g2xxwyov9v] {
    color: #0ea5e9;
    animation: tk-blink-b-g2xxwyov9v 1s step-end infinite;
    font-weight: 400;
}

@keyframes tk-blink-b-g2xxwyov9v {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.tk-clear-inline[b-g2xxwyov9v] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #6b7280;
    font-size: 14px;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.tk-clear-inline:hover[b-g2xxwyov9v] {
    background: #fee2e2;
    border-color: #fecaca;
    color: #dc2626;
}

.tk-rows[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tk-row[b-g2xxwyov9v] {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.tk-key[b-g2xxwyov9v] {
    min-width: 44px;
    height: 48px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: linear-gradient(180deg, #fff, #f3f4f6);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.1s ease;
    box-shadow: 0 2px 0 #d1d5db;
}

.tk-key:hover[b-g2xxwyov9v] {
    background: linear-gradient(180deg, #f8fafc, #e5e7eb);
    border-color: #9ca3af;
}

.tk-key:active[b-g2xxwyov9v] {
    transform: translateY(2px);
    box-shadow: 0 0 0 #d1d5db;
    background: #e5e7eb;
}

.tk-backspace[b-g2xxwyov9v] {
    min-width: 60px;
    background: linear-gradient(180deg, #fef2f2, #fee2e2);
    border-color: #fecaca;
    color: #dc2626;
    box-shadow: 0 2px 0 #fecaca;
}

.tk-backspace:hover[b-g2xxwyov9v] {
    background: linear-gradient(180deg, #fee2e2, #fecaca);
}

.tk-action[b-g2xxwyov9v] {
    min-width: 90px;
    font-size: 0.75rem;
    background: linear-gradient(180deg, #f8fafc, #e5e7eb);
    color: #4b5563;
}

.tk-confirm[b-g2xxwyov9v] {
    min-width: 120px;
    background: linear-gradient(180deg, #22c55e, #16a34a);
    border-color: #16a34a;
    color: #fff;
    box-shadow: 0 2px 0 #15803d;
    font-size: 0.85rem;
}

.tk-confirm:hover[b-g2xxwyov9v] {
    background: linear-gradient(180deg, #16a34a, #15803d);
}

.tk-confirm:active[b-g2xxwyov9v] {
    box-shadow: 0 0 0 #15803d;
}

/* Hide keyboard hint on touch devices */
@media (pointer: coarse) {
    .search .kbd-hint[b-g2xxwyov9v] {
        display: none;
    }
}

/* Dark theme touch keyboard */
html[data-theme="dark"] .touch-keyboard[b-g2xxwyov9v] {
    background: #1f2937;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .tk-search-display[b-g2xxwyov9v] {
    background: #111827;
    border-color: #374151;
}

html[data-theme="dark"] .tk-text[b-g2xxwyov9v] {
    color: #f3f4f6;
}

html[data-theme="dark"] .tk-clear-inline[b-g2xxwyov9v] {
    background: #374151;
    border-color: #4b5563;
    color: #9ca3af;
}

html[data-theme="dark"] .tk-key[b-g2xxwyov9v] {
    background: linear-gradient(180deg, #374151, #1f2937);
    border-color: #4b5563;
    color: #f3f4f6;
    box-shadow: 0 2px 0 #111827;
}

html[data-theme="dark"] .tk-key:hover[b-g2xxwyov9v] {
    background: linear-gradient(180deg, #4b5563, #374151);
}

html[data-theme="dark"] .tk-key:active[b-g2xxwyov9v] {
    background: #111827;
}

html[data-theme="dark"] .tk-backspace[b-g2xxwyov9v] {
    background: linear-gradient(180deg, #7f1d1d, #991b1b);
    border-color: #991b1b;
    color: #fecaca;
    box-shadow: 0 2px 0 #7f1d1d;
}

html[data-theme="dark"] .tk-action[b-g2xxwyov9v] {
    background: linear-gradient(180deg, #374151, #1f2937);
    color: #9ca3af;
}

/* Touch keyboard footer with disable toggle */
.tk-footer[b-g2xxwyov9v] {
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: center;
}

.tk-disable-toggle[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #6b7280;
    cursor: pointer;
    user-select: none;
}

.tk-disable-toggle input[type="checkbox"][b-g2xxwyov9v] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #3b82f6;
}

.tk-disable-toggle span[b-g2xxwyov9v] {
    white-space: nowrap;
}

html[data-theme="dark"] .tk-footer[b-g2xxwyov9v] {
    border-top-color: #374151;
}

html[data-theme="dark"] .tk-disable-toggle[b-g2xxwyov9v],
html[data-theme="dark"] .tk-disable-toggle span[b-g2xxwyov9v] {
    color: #d1d5db;
}

/* ========================================
   SEARCH ENHANCEMENTS
   ======================================== */

/* Clear button inside search input */
.search-clear[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #6b7280;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.search-clear:hover[b-g2xxwyov9v] {
    background: #fee2e2;
    border-color: #fecaca;
    color: #dc2626;
}

/* Results chip styling */
.chip.results-chip[b-g2xxwyov9v] {
    cursor: default;
    background: #0ea5e9;
    border-color: #0284c7;
    color: #fff;
}

/* Single match tile highlight */
.tile.single-match[b-g2xxwyov9v] {
    border: 2px solid #22c55e;
    background: #f0fdf4;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2), 0 4px 12px rgba(34, 197, 94, 0.15);
    animation: single-match-pulse-b-g2xxwyov9v 1.5s ease-in-out infinite;
}

.tile.single-match:hover[b-g2xxwyov9v] {
    border-color: #16a34a;
    background: #dcfce7;
}

@keyframes single-match-pulse-b-g2xxwyov9v {
    0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2), 0 4px 12px rgba(34, 197, 94, 0.15); }
    50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.1), 0 6px 16px rgba(34, 197, 94, 0.2); }
}

/* Empty search state */
.empty-search[b-g2xxwyov9v] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    text-align: center;
    color: #6b7280;
}

.empty-search .empty-icon[b-g2xxwyov9v] {
    font-size: 3rem;
    opacity: 0.5;
}

.empty-search .empty-text[b-g2xxwyov9v] {
    font-size: 1rem;
    font-weight: 600;
}

.empty-search .empty-clear[b-g2xxwyov9v] {
    padding: 10px 20px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.empty-search .empty-clear:hover[b-g2xxwyov9v] {
    background: #f3f4f6;
    border-color: #d1d5db;
}

/* Touch keyboard results hint */
.tk-results-hint[b-g2xxwyov9v] {
    padding: 10px 14px;
    margin-bottom: 10px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
}

.tk-results-hint .tk-no-results[b-g2xxwyov9v] {
    color: #dc2626;
}

.tk-results-hint .tk-single-match[b-g2xxwyov9v] {
    color: #16a34a;
    background: #f0fdf4;
    padding: 8px 14px;
    border-radius: 8px;
    display: inline-block;
}

.tk-results-hint .tk-count[b-g2xxwyov9v] {
    color: #0369a1;
}

/* Single match add button styling */
.tk-key.tk-add[b-g2xxwyov9v] {
    background: linear-gradient(180deg, #22c55e, #16a34a);
    border-color: #16a34a;
    box-shadow: 0 2px 0 #15803d;
}

.tk-key.tk-add:hover[b-g2xxwyov9v] {
    background: linear-gradient(180deg, #16a34a, #15803d);
}

/* Dark theme search enhancements */
html[data-theme="dark"] .search-clear[b-g2xxwyov9v] {
    background: #374151;
    border-color: #4b5563;
    color: #9ca3af;
}

html[data-theme="dark"] .search-clear:hover[b-g2xxwyov9v] {
    background: #7f1d1d;
    border-color: #991b1b;
    color: #fecaca;
}

/* Dark theme tiles - use a muted slate/warm gray instead of harsh pink/red */
html[data-theme="dark"] .tile[b-g2xxwyov9v] {
    background: #292524; /* warm stone-900 */
    border-color: #44403c; /* stone-700 */
    color: #fafaf9; /* stone-50 */
}

html[data-theme="dark"] .tile:hover[b-g2xxwyov9v] {
    background: #3f3f46; /* zinc-700 */
    border-color: #52525b; /* zinc-600 */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .tile .tile-name[b-g2xxwyov9v] {
    color: #fafaf9;
}

html[data-theme="dark"] .tile .tile-price[b-g2xxwyov9v] {
    color: #a8a29e; /* stone-400 */
}

html[data-theme="dark"] .tile.single-match[b-g2xxwyov9v] {
    background: #14532d;
    border-color: #22c55e;
}

html[data-theme="dark"] .tile.single-match:hover[b-g2xxwyov9v] {
    background: #166534;
}

/* Dark theme for low stock badge - stronger orange for visibility */
html[data-theme="dark"] .low-stock-qty-badge[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.5);
}

/* Softer border in dark mode - muted brown/amber */
html[data-theme="dark"] .tile.low-stock[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #292117 0%, #2d241a 100%);
    border-color: #8b6b4a;
    border-width: 2px;
}

html[data-theme="dark"] .tile.low-stock:hover[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #2d241a 0%, #362c1f 100%);
    border-color: #a67c52;
}

html[data-theme="dark"] .empty-search[b-g2xxwyov9v] {
    color: #9ca3af;
}

html[data-theme="dark"] .empty-search .empty-clear[b-g2xxwyov9v] {
    background: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
}

html[data-theme="dark"] .empty-search .empty-clear:hover[b-g2xxwyov9v] {
    background: #4b5563;
}

html[data-theme="dark"] .tk-results-hint .tk-single-match[b-g2xxwyov9v] {
    background: #14532d;
    color: #86efac;
}

/* ========================================
   PRODUCT LOADING SKELETONS
   ======================================== */

@keyframes skeleton-shimmer-b-g2xxwyov9v {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.tile.tile-skeleton[b-g2xxwyov9v] {
    background: #f8fafc;
    border-color: #e2e8f0;
    pointer-events: none;
    animation: skeleton-pulse-b-g2xxwyov9v 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse-b-g2xxwyov9v {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.tile-skeleton .skeleton-name[b-g2xxwyov9v] {
    height: 18px;
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: skeleton-shimmer-b-g2xxwyov9v 1.5s infinite;
    width: 80%;
}

.tile-skeleton .skeleton-category[b-g2xxwyov9v] {
    height: 12px;
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: skeleton-shimmer-b-g2xxwyov9v 1.5s infinite;
    width: 50%;
    margin-top: 6px;
}

.tile-skeleton .skeleton-price[b-g2xxwyov9v] {
    height: 16px;
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: skeleton-shimmer-b-g2xxwyov9v 1.5s infinite;
    width: 60px;
    margin-top: auto;
}

/* Dark theme skeletons */
html[data-theme="dark"] .tile.tile-skeleton[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: #374151;
}

html[data-theme="dark"] .tile-skeleton .skeleton-name[b-g2xxwyov9v],
html[data-theme="dark"] .tile-skeleton .skeleton-category[b-g2xxwyov9v],
html[data-theme="dark"] .tile-skeleton .skeleton-price[b-g2xxwyov9v] {
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
    background-size: 200% 100%;
}

/* ========================================
   EMPTY CATEGORY STATE
   ======================================== */

.empty-category[b-g2xxwyov9v] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: #6b7280;
}

.empty-category-icon[b-g2xxwyov9v] {
    font-size: 3rem;
    margin-bottom: 12px;
    opacity: 0.6;
}

.empty-category-title[b-g2xxwyov9v] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 6px;
}

.empty-category-hint[b-g2xxwyov9v] {
    font-size: 0.9rem;
    color: #9ca3af;
}

html[data-theme="dark"] .empty-category[b-g2xxwyov9v] {
    color: #9ca3af;
}

html[data-theme="dark"] .empty-category-title[b-g2xxwyov9v] {
    color: #e5e7eb;
}

html[data-theme="dark"] .empty-category-hint[b-g2xxwyov9v] {
    color: #6b7280;
}

/* Brand-new restaurant onramp — shown when the whole menu is empty
   (Items.Count == 0). Replaces the terse "Sin productos" dead-end with
   a premium gradient card that converts the empty state into a guided
   CTA. Uses the same purple/indigo gradient as OnboardingBanner so the
   two surfaces feel like one system. */
.empty-onboarding[b-g2xxwyov9v] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.empty-onboarding-card[b-g2xxwyov9v] {
    max-width: 520px;
    width: 100%;
    padding: 36px 32px;
    border-radius: 20px;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #a855f7 100%);
    color: #fff;
    text-align: center;
    box-shadow: 0 20px 50px -15px rgba(99, 102, 241, .55);
    position: relative;
    overflow: hidden;
}

.empty-onboarding-card[b-g2xxwyov9v]::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .18), transparent 50%),
        radial-gradient(circle at 85% 0%, rgba(255, 255, 255, .14), transparent 55%);
    pointer-events: none;
}

.empty-onboarding-icon[b-g2xxwyov9v] {
    font-size: 3.5rem;
    margin-bottom: 14px;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .2));
    position: relative;
}

.empty-onboarding-title[b-g2xxwyov9v] {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    margin-bottom: 10px;
    position: relative;
}

.empty-onboarding-desc[b-g2xxwyov9v] {
    font-size: 0.95rem;
    opacity: 0.92;
    line-height: 1.5;
    margin-bottom: 22px;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.empty-onboarding-actions[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    position: relative;
}

.empty-onboarding-cta[b-g2xxwyov9v] {
    padding: 14px 32px;
    border-radius: 999px;
    border: none;
    background: #fff;
    color: #4338ca;
    font-weight: 800;
    font-size: 1.02rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 6px 18px -4px rgba(0, 0, 0, .25);
    transition: transform .15s ease, box-shadow .15s ease;
    min-height: 52px; /* gloved tap target */
}

.empty-onboarding-cta:hover[b-g2xxwyov9v] {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -4px rgba(0, 0, 0, .35);
}

.empty-onboarding-cta:active[b-g2xxwyov9v] { transform: translateY(0); }

/* Secondary "Ver un ejemplo" action: translucent outline on the gradient card,
   one notch below the solid white primary CTA. */
.empty-onboarding-cta-ghost[b-g2xxwyov9v] {
    padding: 13px 30px;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-weight: 700;
    font-size: 0.98rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background .15s ease, border-color .15s ease;
    min-height: 50px; /* gloved tap target */
}

.empty-onboarding-cta-ghost:hover[b-g2xxwyov9v] {
    background: rgba(255, 255, 255, .16);
    border-color: #fff;
}

.empty-onboarding-cta-ghost:disabled[b-g2xxwyov9v] { opacity: .6; cursor: default; }

/* Surfaced when the demo seed POST hard-fails (e.g. a 500) — instead of leaving the
   owner on a silent empty card. Crear carta still works regardless. */
.empty-onboarding-error[b-g2xxwyov9v] {
    margin-top: 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    background: rgba(220, 38, 38, .35);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 10px;
    padding: 8px 14px;
}

.empty-onboarding-link[b-g2xxwyov9v] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    color: rgba(255, 255, 255, .85);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.empty-onboarding-link:hover[b-g2xxwyov9v] { color: #fff; }

/* No dark-theme override needed — the gradient is deliberately the same
   in light and dark. It's a premium accent, not a neutral surface. */

/* ========================================
   DARK THEME - BASKET/SUMMARY
   ======================================== */

/* Summary container */
html[data-theme="dark"] .summary[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: #374151;
}

/* Summary in full/grid mode */
html[data-theme="dark"] .pos-shell.basket-full > .summary[b-g2xxwyov9v],
html[data-theme="dark"] .summary.summary-full[b-g2xxwyov9v] {
    background: #1f2937;
    border-left-color: #374151;
    box-shadow: -4px 0 20px rgba(0,0,0,0.3);
}

/* Summary header */
html[data-theme="dark"] .summary-head[b-g2xxwyov9v] {
    background: transparent;
}

html[data-theme="dark"] .summary h3[b-g2xxwyov9v] {
    color: #f3f4f6;
    background: transparent;
}

html[data-theme="dark"] .summary h3 .muted[b-g2xxwyov9v] {
    color: #9ca3af;
}

/* Basket line items - text visibility */
html[data-theme="dark"] .line .name[b-g2xxwyov9v],
html[data-theme="dark"] .line .name-text[b-g2xxwyov9v] {
    color: #f3f4f6;
}

html[data-theme="dark"] .line[b-g2xxwyov9v] {
    border-bottom-color: #374151;
}

html[data-theme="dark"] .line-total[b-g2xxwyov9v] {
    color: #f3f4f6;
}

/* Section headers in basket */
html[data-theme="dark"] .section-header[b-g2xxwyov9v] {
    background: #374151;
    color: #f3f4f6;
}

html[data-theme="dark"] .section-header:hover[b-g2xxwyov9v] {
    background: #4b5563;
}

html[data-theme="dark"] .section-count[b-g2xxwyov9v] {
    color: #9ca3af;
}

/* Totals card */
html[data-theme="dark"] .totals-card[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: #374151;
}

html[data-theme="dark"] .totals-card .label[b-g2xxwyov9v] {
    color: #9ca3af;
}

html[data-theme="dark"] .totals-card .value[b-g2xxwyov9v],
html[data-theme="dark"] .totals-card .total[b-g2xxwyov9v] {
    color: #f3f4f6;
}

html[data-theme="dark"] .totals-card hr[b-g2xxwyov9v] {
    border-color: #374151;
}

/* Course pills */
html[data-theme="dark"] .course-pill[b-g2xxwyov9v] {
    background: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}

html[data-theme="dark"] .course-pill.empty[b-g2xxwyov9v] {
    color: #9ca3af;
}

/* ========================================
   DARK THEME - DISABLED BUTTONS
   ======================================== */

html[data-theme="dark"] .btn:disabled[b-g2xxwyov9v],
html[data-theme="dark"] .btn[disabled][b-g2xxwyov9v] {
    color: #6b7280;
    opacity: 0.6;
}

html[data-theme="dark"] .actions .dropdown .dropdown-main:disabled[b-g2xxwyov9v],
html[data-theme="dark"] .actions .dropdown .dropdown-toggle:disabled[b-g2xxwyov9v] {
    color: #6b7280;
    opacity: 0.6;
}

/* ========================================
   PHASE 13: MODIFIER MODAL
   ======================================== */

.modifier-modal[b-g2xxwyov9v] {
    max-width: 780px;
    width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Sticky footer for modifier modal */
.modifier-modal .modifier-footer[b-g2xxwyov9v] {
    position: sticky;
    bottom: 0;
    z-index: 5;
    flex-shrink: 0;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}

.modifier-header[b-g2xxwyov9v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: white;
    border-radius: 16px 16px 0 0;
}

.modifier-title[b-g2xxwyov9v] {
    font-weight: 700;
    font-size: 1.2rem;
}

.modifier-title .edit-badge[b-g2xxwyov9v] {
    font-size: 0.65rem;
    font-weight: 600;
    color: #1d4ed8;
    background: #dbeafe;
    padding: 2px 8px;
    border-radius: 99px;
    margin-left: 8px;
    vertical-align: middle;
}

html[data-theme="dark"] .modifier-title .edit-badge[b-g2xxwyov9v] {
    color: #93c5fd;
    background: #1e3a5f;
}

.modifier-price[b-g2xxwyov9v] {
    font-weight: 600;
    font-size: 1.1rem;
    opacity: 0.9;
}

.modifier-groups[b-g2xxwyov9v] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden; /* Prevent horizontal scrollbar */
    padding: 16px;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.modifier-group[b-g2xxwyov9v] {
    margin-bottom: 20px;
    padding: 14px;
    background: #fafafa;
    border-radius: 12px;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

.modifier-group.needs-selection[b-g2xxwyov9v] {
    border-color: #fbbf24;
    background: #fffbeb;
}

.modifier-group.max-reached[b-g2xxwyov9v] {
    border-color: #10b981;
    background: #ecfdf5;
}

/* Minimum met but can still add more */
.modifier-group.min-met[b-g2xxwyov9v] {
    border-color: #86efac;
    background: #f0fdf4;
}

.modifier-group.min-met .group-hint[b-g2xxwyov9v] {
    color: #059669;
}

/* Configuration error: Min > Max */
.modifier-group.config-error[b-g2xxwyov9v] {
    border-color: #f97316;
    background: #fff7ed;
}

.modifier-group.config-error .group-hint[b-g2xxwyov9v]::after {
    content: " ⚠️";
}

.modifier-no-results[b-g2xxwyov9v] {
    grid-column: 1 / -1;
    text-align: center;
    padding: 16px;
    color: var(--muted);
    font-style: italic;
    font-size: 0.9rem;
}

.modifier-no-results.modifier-config-warning[b-g2xxwyov9v] {
    color: #b45309;
    font-style: normal;
    font-weight: 500;
}

.modifier-no-groups[b-g2xxwyov9v] {
    text-align: center;
    padding: 24px 16px;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    font-size: 0.95rem;
}

.max-badge[b-g2xxwyov9v] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #059669;
    background: #d1fae5;
    padding: 2px 8px;
    border-radius: 99px;
}

.modifier-group-header[b-g2xxwyov9v] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.group-name[b-g2xxwyov9v] {
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-hint[b-g2xxwyov9v] {
    font-size: 0.8rem;
    color: var(--muted);
}

/* When selection is complete, show hint in green */
.modifier-group.selection-complete .group-hint[b-g2xxwyov9v] {
    color: #059669;
    font-weight: 500;
}

/* Subtle green tint for completed single-select groups */
.modifier-group.selection-complete:not(.max-reached)[b-g2xxwyov9v] {
    border-color: #86efac;
    background: #f0fdf4;
}

.required-badge[b-g2xxwyov9v] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #dc2626;
    background: #fef2f2;
    padding: 2px 8px;
    border-radius: 99px;
}

.modifier-options[b-g2xxwyov9v] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

/* 2 columns on medium screens */
@media (max-width: 650px) {
    .modifier-options[b-g2xxwyov9v] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Single column on very narrow screens */
@media (max-width: 400px) {
    .modifier-options[b-g2xxwyov9v] {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   MODIFIER MODAL — PHONE (≤ 500px)
   Fullscreen modal, compacted spacing
   ======================================== */
@media (max-width: 500px) {
    /* Fullscreen on phone — remove outer padding from .modal-card base */
    .modifier-modal[b-g2xxwyov9v] {
        width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        max-height: 100dvh;
        max-height: calc(100dvh - var(--pwa-banner-h, 0px));
        height: 100vh;
        height: 100dvh;
        height: calc(100dvh - var(--pwa-banner-h, 0px));
        padding: 0;
        border-radius: 0;
    }

    .modifier-header[b-g2xxwyov9v] {
        padding: 12px 16px;
        border-radius: 0;
    }

    .modifier-title[b-g2xxwyov9v] {
        font-size: 1.05rem;
    }

    .modifier-price[b-g2xxwyov9v] {
        font-size: 0.95rem;
    }

    .modifier-groups[b-g2xxwyov9v] {
        padding: 10px;
    }

    .modifier-group[b-g2xxwyov9v] {
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 10px;
    }

    .modifier-group-header[b-g2xxwyov9v] {
        margin-bottom: 8px;
        gap: 6px;
    }

    .group-name[b-g2xxwyov9v] {
        font-size: 0.9rem;
    }

    .group-hint[b-g2xxwyov9v] {
        font-size: 0.75rem;
    }

    .max-badge[b-g2xxwyov9v],
    .required-badge[b-g2xxwyov9v] {
        font-size: 0.65rem;
        padding: 2px 6px;
    }

    /* Single column options for maximum readability */
    .modifier-options[b-g2xxwyov9v] {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    /* Touch-friendly option buttons */
    .modifier-option[b-g2xxwyov9v] {
        padding: 12px 10px;
        min-height: 44px;
        gap: 8px;
        border-radius: 8px;
    }

    .option-check[b-g2xxwyov9v] {
        width: 22px;
        height: 22px;
    }

    .option-name[b-g2xxwyov9v] {
        font-size: 0.9rem;
    }

    .option-price[b-g2xxwyov9v] {
        font-size: 0.8rem;
        padding: 2px 6px;
    }

    /* Compact footer */
    .modifier-footer[b-g2xxwyov9v] {
        padding: 12px 14px;
        border-radius: 0;
    }

    .modifier-total[b-g2xxwyov9v] {
        font-size: 1rem;
        margin-bottom: 10px;
    }

    .total-price[b-g2xxwyov9v] {
        font-size: 1.1rem;
    }

    .modifier-validation[b-g2xxwyov9v] {
        padding: 8px 12px;
        font-size: 0.8rem;
        margin-bottom: 8px;
    }

    .modifier-actions[b-g2xxwyov9v] {
        flex-direction: column;
        gap: 8px;
    }

    .modifier-actions .btn-cancel[b-g2xxwyov9v],
    .modifier-actions .btn-confirm[b-g2xxwyov9v] {
        flex: none;
        width: 100%;
        padding: 14px;
        min-height: 48px;
    }

    /* Hide custom keyboard toggle on mobile — native keyboard is better */
    .modifier-keyboard-toggle[b-g2xxwyov9v] {
        display: none;
    }

    /* Compact search bar */
    .modifier-search[b-g2xxwyov9v] {
        padding: 8px 10px;
    }

    .modifier-search-input[b-g2xxwyov9v] {
        font-size: 14px;
        padding: 8px 10px;
    }
}

.modifier-option[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    min-width: 0;
}

.modifier-option:hover[b-g2xxwyov9v] {
    border-color: var(--brand);
    background: #fef7f7;
}

.modifier-option:focus-visible[b-g2xxwyov9v] {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.25);
}

.modifier-option.selected[b-g2xxwyov9v] {
    border-color: var(--brand);
    background: #fef2f2;
}

.option-check[b-g2xxwyov9v] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--brand);
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-top: 2px;
    border: 2px solid #d1d5db;
    transition: all 0.15s ease;
}

/* Radio style for single-select groups */
.option-check.radio[b-g2xxwyov9v] {
    border-radius: 50%;
}

/* Checkbox style for multi-select groups (default square-ish) */
.option-check.checkbox[b-g2xxwyov9v] {
    border-radius: 4px;
}

.modifier-option.selected .option-check[b-g2xxwyov9v] {
    background: var(--brand);
    color: white;
    border-color: var(--brand);
}

.modifier-option.disabled[b-g2xxwyov9v] {
    opacity: 0.5;
    cursor: not-allowed;
}

.modifier-option.disabled:hover[b-g2xxwyov9v] {
    border-color: #e5e7eb;
    background: white;
}

/* Sold-out (86'd) option — distinct from generic disabled so staff can
   tell "agotado" from "max reached". Name struck through, red badge. */
.modifier-option.sold-out .option-name[b-g2xxwyov9v] {
    text-decoration: line-through;
    color: #9ca3af;
}

.option-soldout-badge[b-g2xxwyov9v] {
    font-size: 11px;
    font-weight: 700;
    color: #dc2626;
    background: rgba(239, 68, 68, .12);
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

html[data-theme="dark"] .option-soldout-badge[b-g2xxwyov9v] {
    color: #f87171;
    background: rgba(239, 68, 68, .2);
}

.option-name[b-g2xxwyov9v] {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    color: var(--ink);
    /* Wrap to two lines instead of truncating — in the 3-col grid a short
       name like "Queso extra" was clipped to "Queso e..." even on a wide
       desktop modal. Line-clamp still caps pathologically long names. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.option-price[b-g2xxwyov9v] {
    font-weight: 700;
    color: var(--muted);
    font-size: 0.9rem;
    flex-shrink: 0;
    white-space: nowrap;
    padding: 2px 8px;
    border-radius: 6px;
    background: #f3f4f6;
}

.option-price.price-add[b-g2xxwyov9v] {
    color: #dc2626;
    background: #fef2f2;
}

.option-price.price-discount[b-g2xxwyov9v] {
    color: #059669;
    background: #ecfdf5;
}

.modifier-footer[b-g2xxwyov9v] {
    padding: 16px 20px;
    border-top: 1px solid #eee;
    background: #fafafa;
    border-radius: 0 0 16px 16px;
}

.modifier-validation[b-g2xxwyov9v] {
    padding: 10px 14px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    color: #92400e;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 12px;
    text-align: center;
}

.modifier-total[b-g2xxwyov9v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    font-weight: 600;
    font-size: 1.1rem;
}

.total-price[b-g2xxwyov9v] {
    color: var(--brand);
    font-size: 1.3rem;
}

.modifier-actions[b-g2xxwyov9v] {
    display: flex;
    gap: 12px;
}

.modifier-actions .btn-cancel[b-g2xxwyov9v] {
    flex: 1;
    padding: 14px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: white;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    transition: all 0.15s;
}

.modifier-actions .btn-cancel:hover[b-g2xxwyov9v] {
    background: #f3f4f6;
}

.modifier-actions .btn-cancel:focus-visible[b-g2xxwyov9v] {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.2);
}

.modifier-actions .btn-cancel:disabled[b-g2xxwyov9v] {
    opacity: 0.5;
    cursor: not-allowed;
}

.modifier-actions .btn-cancel:disabled:hover[b-g2xxwyov9v] {
    background: white;
}

.modifier-actions .btn-confirm[b-g2xxwyov9v] {
    flex: 2;
    padding: 14px;
    border: none;
    border-radius: 10px;
    background-color: #c62828 !important;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.15s;
}

.modifier-actions .btn-confirm:hover:not(:disabled)[b-g2xxwyov9v] {
    background-color: #8e0000 !important;
}

.modifier-actions .btn-confirm:focus-visible[b-g2xxwyov9v] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.4);
}

.modifier-actions .btn-confirm:disabled[b-g2xxwyov9v] {
    background-color: #e5e7eb !important;
    color: #4b5563 !important;
    cursor: not-allowed;
}

/* Dark theme */
html[data-theme="dark"] .modifier-group[b-g2xxwyov9v] {
    background: #374151;
}

html[data-theme="dark"] .modifier-group.needs-selection[b-g2xxwyov9v] {
    background: #4a3d1a;
    border-color: #ca8a04;
}

html[data-theme="dark"] .modifier-group.max-reached[b-g2xxwyov9v] {
    background: #1a3a2a;
    border-color: #10b981;
}

html[data-theme="dark"] .modifier-group.min-met[b-g2xxwyov9v] {
    background: #14352a;
    border-color: #22c55e;
}

html[data-theme="dark"] .modifier-group.min-met .group-hint[b-g2xxwyov9v] {
    color: #6ee7b7;
}

html[data-theme="dark"] .modifier-group.config-error[b-g2xxwyov9v] {
    border-color: #f97316;
    background: #431407;
}

html[data-theme="dark"] .modifier-no-results[b-g2xxwyov9v] {
    color: #9ca3af;
}

html[data-theme="dark"] .modifier-no-results.modifier-config-warning[b-g2xxwyov9v] {
    color: #fbbf24;
}

html[data-theme="dark"] .modifier-no-groups[b-g2xxwyov9v] {
    color: #fcd34d;
    background: #422006;
    border-color: #92400e;
}

html[data-theme="dark"] .modifier-group.selection-complete:not(.max-reached)[b-g2xxwyov9v] {
    background: #14352a;
    border-color: #22c55e;
}

html[data-theme="dark"] .modifier-group.selection-complete .group-hint[b-g2xxwyov9v] {
    color: #6ee7b7;
}

html[data-theme="dark"] .max-badge[b-g2xxwyov9v] {
    background: #064e3b;
    color: #6ee7b7;
}

html[data-theme="dark"] .group-name[b-g2xxwyov9v] {
    color: #f9fafb;
}

html[data-theme="dark"] .modifier-option[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: #4b5563;
}

html[data-theme="dark"] .modifier-option:hover[b-g2xxwyov9v] {
    background: #374151;
}

html[data-theme="dark"] .modifier-option:focus-visible[b-g2xxwyov9v] {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.4);
}

html[data-theme="dark"] .modifier-option.selected[b-g2xxwyov9v] {
    background: #4a2020;
}

html[data-theme="dark"] .option-check[b-g2xxwyov9v] {
    background: #4b5563;
    border-color: #6b7280;
}

html[data-theme="dark"] .modifier-option.selected .option-check[b-g2xxwyov9v] {
    border-color: var(--brand);
}

html[data-theme="dark"] .modifier-option.disabled[b-g2xxwyov9v] {
    opacity: 0.4;
}

html[data-theme="dark"] .modifier-option.disabled:hover[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: #4b5563;
}

html[data-theme="dark"] .option-price[b-g2xxwyov9v] {
    background: #374151;
}

html[data-theme="dark"] .option-price.price-add[b-g2xxwyov9v] {
    background: #4a2020;
    color: #fca5a5;
}

html[data-theme="dark"] .option-price.price-discount[b-g2xxwyov9v] {
    background: #064e3b;
    color: #6ee7b7;
}

html[data-theme="dark"] .option-name[b-g2xxwyov9v] {
    color: #f9fafb;
}

html[data-theme="dark"] .modifier-footer[b-g2xxwyov9v] {
    background: #1f2937;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .modifier-validation[b-g2xxwyov9v] {
    background: #4a3d1a;
    border-color: #ca8a04;
    color: #fcd34d;
}

html[data-theme="dark"] .modifier-actions .btn-cancel[b-g2xxwyov9v] {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

html[data-theme="dark"] .modifier-actions .btn-cancel:hover[b-g2xxwyov9v] {
    background: #4b5563;
}

html[data-theme="dark"] .modifier-actions .btn-cancel:focus-visible[b-g2xxwyov9v] {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
}

html[data-theme="dark"] .modifier-actions .btn-cancel:disabled[b-g2xxwyov9v] {
    opacity: 0.5;
}

html[data-theme="dark"] .modifier-actions .btn-cancel:disabled:hover[b-g2xxwyov9v] {
    background: #374151;
}

html[data-theme="dark"] .modifier-actions .btn-confirm:focus-visible[b-g2xxwyov9v] {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.5);
}

html[data-theme="dark"] .modifier-actions .btn-confirm:disabled[b-g2xxwyov9v] {
    background-color: #374151 !important;
    color: #6b7280 !important;
}

/* ========================================
   MODIFIER SEARCH
   ======================================== */

.modifier-search[b-g2xxwyov9v] {
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #eee;
}

.modifier-search-input[b-g2xxwyov9v] {
    width: 100%;
    padding: 12px 40px 12px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    background: white;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.modifier-search-input:focus[b-g2xxwyov9v] {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.1);
}

.modifier-search-input[b-g2xxwyov9v]::placeholder {
    color: #9ca3af;
}

.modifier-search-clear[b-g2xxwyov9v] {
    position: absolute;
    right: 26px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.modifier-search-clear:hover[b-g2xxwyov9v] {
    background: #fee2e2;
    color: #dc2626;
}

.modifier-search-clear:focus-visible[b-g2xxwyov9v] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(198, 40, 40, 0.4);
}

/* Dark theme modifier search */
html[data-theme="dark"] .modifier-search[b-g2xxwyov9v] {
    background: #1f2937;
    border-bottom-color: #374151;
}

html[data-theme="dark"] .modifier-search-input[b-g2xxwyov9v] {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

html[data-theme="dark"] .modifier-search-input:focus[b-g2xxwyov9v] {
    border-color: var(--brand);
}

html[data-theme="dark"] .modifier-search-input[b-g2xxwyov9v]::placeholder {
    color: #9ca3af;
}

html[data-theme="dark"] .modifier-search-clear[b-g2xxwyov9v] {
    background: #4b5563;
    color: #9ca3af;
}

html[data-theme="dark"] .modifier-search-clear:hover[b-g2xxwyov9v] {
    background: #7f1d1d;
    color: #fecaca;
}

html[data-theme="dark"] .modifier-search-clear:focus-visible[b-g2xxwyov9v] {
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.5);
}

/* Modifier search row with keyboard toggle */
.modifier-search-row[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.modifier-search-row .modifier-search-input[b-g2xxwyov9v] {
    flex: 1;
    padding-right: 40px;
}

.modifier-search-row .modifier-search-clear[b-g2xxwyov9v] {
    position: absolute;
    right: 66px; /* Account for keyboard toggle button + gap */
    top: 50%;
    transform: translateY(-50%);
}

.modifier-keyboard-toggle[b-g2xxwyov9v] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.modifier-keyboard-toggle:hover[b-g2xxwyov9v],
.modifier-keyboard-toggle.active[b-g2xxwyov9v] {
    background: #fee2e2;
    border-color: var(--brand);
}

html[data-theme="dark"] .modifier-keyboard-toggle[b-g2xxwyov9v] {
    background: #374151;
    border-color: #4b5563;
}

html[data-theme="dark"] .modifier-keyboard-toggle:hover[b-g2xxwyov9v],
html[data-theme="dark"] .modifier-keyboard-toggle.active[b-g2xxwyov9v] {
    background: rgba(239, 68, 68, 0.2);
    border-color: var(--brand);
}

/* Modifier touch keyboard */
.modifier-touch-keyboard[b-g2xxwyov9v] {
    background: #f3f4f6;
    border-radius: 12px;
    padding: 8px;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

html[data-theme="dark"] .modifier-touch-keyboard[b-g2xxwyov9v] {
    background: #1f2937;
}

.mod-kb-row[b-g2xxwyov9v] {
    display: flex;
    justify-content: center;
    gap: 4px;
}

.mod-key[b-g2xxwyov9v] {
    min-width: 36px;
    height: 44px;
    border: none;
    border-radius: 8px;
    background: white;
    color: #1f2937;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.mod-key:hover[b-g2xxwyov9v] {
    background: #f3f4f6;
}

.mod-key:active[b-g2xxwyov9v] {
    background: #e5e7eb;
    transform: scale(0.95);
}

html[data-theme="dark"] .mod-key[b-g2xxwyov9v] {
    background: #374151;
    color: #f9fafb;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

html[data-theme="dark"] .mod-key:hover[b-g2xxwyov9v] {
    background: #4b5563;
}

html[data-theme="dark"] .mod-key:active[b-g2xxwyov9v] {
    background: #6b7280;
}

.mod-key--shift[b-g2xxwyov9v],
.mod-key--delete[b-g2xxwyov9v] {
    width: 52px;
    font-size: 1.1rem;
}

.mod-key--shift.active[b-g2xxwyov9v] {
    background: var(--brand);
    color: white;
}

html[data-theme="dark"] .mod-key--shift.active[b-g2xxwyov9v] {
    background: var(--brand);
    color: white;
}

.mod-key--space[b-g2xxwyov9v] {
    flex: 1;
    max-width: 200px;
    font-size: 0.85rem;
    color: #6b7280;
}

html[data-theme="dark"] .mod-key--space[b-g2xxwyov9v] {
    color: #9ca3af;
}

.mod-key--done[b-g2xxwyov9v] {
    width: 60px;
    background: #22c55e;
    color: white;
    font-size: 1.2rem;
}

.mod-key--done:hover[b-g2xxwyov9v] {
    background: #16a34a;
}

html[data-theme="dark"] .mod-key--done[b-g2xxwyov9v] {
    background: #22c55e;
    color: white;
}

html[data-theme="dark"] .mod-key--done:hover[b-g2xxwyov9v] {
    background: #16a34a;
}

.mod-kb-row--bottom[b-g2xxwyov9v] {
    padding: 4px 8px 0;
}

/* ========================================
   UNIFIED TICKET MANAGER (Split/Merge)
   ======================================== */

.ticket-manager[b-g2xxwyov9v] {
    width: min(95vw, 580px);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

/* Tabs */
.tm-tabs[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    padding: 0;
}

.tm-tab[b-g2xxwyov9v] {
    flex: 1;
    padding: 14px 20px;
    border: none;
    background: transparent;
    font-size: 0.95rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s;
    border-bottom: 3px solid transparent;
}

.tm-tab:hover[b-g2xxwyov9v] {
    background: #f1f5f9;
    color: #374151;
}

.tm-tab.active[b-g2xxwyov9v] {
    color: var(--brand, #c62828);
    border-bottom-color: var(--brand, #c62828);
    background: white;
}

.tm-close[b-g2xxwyov9v] {
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.tm-close:hover[b-g2xxwyov9v] {
    background: #fee2e2;
    color: #dc2626;
}

/* Content area */
.tm-content[b-g2xxwyov9v] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tm-header[b-g2xxwyov9v] {
    padding: 16px 20px 12px;
    background: white;
}

.tm-title[b-g2xxwyov9v] {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--ink, #1f2937);
    margin-bottom: 4px;
}

.tm-subtitle[b-g2xxwyov9v] {
    font-size: 0.88rem;
    color: #6b7280;
}

.tm-current-badge[b-g2xxwyov9v] {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    background: var(--brand, #c62828);
    color: white;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Quick actions */
.tm-quick-actions[b-g2xxwyov9v] {
    display: flex;
    gap: 8px;
    padding: 0 20px 12px;
    background: white;
}

.tm-quick-btn[b-g2xxwyov9v] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
    color: #374151;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.tm-quick-btn:hover[b-g2xxwyov9v] {
    border-color: var(--brand, #c62828);
    background: #fef2f2;
    color: var(--brand, #c62828);
}

.tm-quick-icon[b-g2xxwyov9v] {
    font-size: 1rem;
}

/* Items list */
.tm-items-list[b-g2xxwyov9v] {
    flex: 1;
    overflow-y: auto;
    padding: 0 12px;
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

/* Section headers - matching basket */
.tm-section-header[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin: 8px 0 4px 0;
    background: linear-gradient(135deg, #4a3d1a 0%, #5c4c2e 100%);
    border-radius: 10px;
    color: #fcd34d;
    font-size: 0.85rem;
    font-weight: 700;
}

.tm-section-icon[b-g2xxwyov9v] {
    font-size: 1rem;
}

.tm-section-title[b-g2xxwyov9v] {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tm-section-count[b-g2xxwyov9v] {
    color: #d4a574;
    font-weight: 500;
}

.tm-section-total[b-g2xxwyov9v] {
    margin-left: auto;
    font-weight: 700;
    color: white;
}

.tm-item[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    margin: 8px 0;
    background: white;
    border-radius: 12px;
    border: 2px solid #e5e7eb;
    transition: all 0.15s;
}

.tm-item.has-transfer[b-g2xxwyov9v] {
    border-color: var(--brand, #c62828);
    background: #fef7f7;
}

.tm-item-info[b-g2xxwyov9v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tm-item-name[b-g2xxwyov9v] {
    font-weight: 600;
    color: var(--ink, #1f2937);
    font-size: 0.95rem;
    flex: 1;
}

.tm-item-price[b-g2xxwyov9v] {
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 500;
}

.tm-item-total[b-g2xxwyov9v] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink, #1f2937);
}

/* Course pill - matching basket */
.tm-course-pill[b-g2xxwyov9v] {
    padding: 3px 8px;
    background: #374151;
    color: #e5e7eb;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Modifiers - matching basket */
.tm-item-modifiers[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 8px;
    border-left: 2px solid #e5e7eb;
    margin-left: 4px;
}

.tm-modifier[b-g2xxwyov9v] {
    font-size: 0.8rem;
    color: #6b7280;
}

.tm-item-controls[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tm-qty-group[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
}

.tm-qty-label[b-g2xxwyov9v] {
    font-size: 0.7rem;
    color: #9ca3af;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.tm-qty-value[b-g2xxwyov9v] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #374151;
}

.tm-qty-value.stays[b-g2xxwyov9v] {
    color: #059669;
}

.tm-qty-value.moves[b-g2xxwyov9v] {
    color: #9ca3af;
}

.tm-qty-value.moves.active[b-g2xxwyov9v] {
    color: var(--brand, #c62828);
}

.tm-transfer-controls[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #f1f5f9;
    border-radius: 10px;
}

.tm-qty-btn[b-g2xxwyov9v] {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: white;
    color: var(--ink, #1f2937);
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.tm-qty-btn:hover:not(:disabled)[b-g2xxwyov9v] {
    background: var(--brand, #c62828);
    color: white;
    transform: scale(1.05);
}

.tm-qty-btn:disabled[b-g2xxwyov9v] {
    opacity: 0.4;
    cursor: not-allowed;
}

.tm-transfer-value[b-g2xxwyov9v] {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--brand, #c62828);
    min-width: 28px;
    text-align: center;
}

/* Summary */
.tm-summary[b-g2xxwyov9v] {
    padding: 12px 20px;
    background: white;
    border-top: 1px solid #e5e7eb;
}

.tm-summary-row[b-g2xxwyov9v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.tm-summary-row.highlight[b-g2xxwyov9v] {
    padding: 10px 12px;
    margin-top: 6px;
    background: #fef2f2;
    border-radius: 8px;
    border: 1px solid #fecaca;
}

.tm-summary-label[b-g2xxwyov9v] {
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 500;
}

.tm-summary-row.highlight .tm-summary-label[b-g2xxwyov9v] {
    color: var(--brand, #c62828);
    font-weight: 600;
}

.tm-summary-value[b-g2xxwyov9v] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink, #1f2937);
}

.tm-summary-row.highlight .tm-summary-value[b-g2xxwyov9v] {
    font-size: 1.15rem;
    color: var(--brand, #c62828);
}

/* Actions */
.tm-actions[b-g2xxwyov9v] {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
}

.tm-btn-cancel[b-g2xxwyov9v] {
    flex: 1;
    padding: 14px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: white;
    color: #374151;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.15s;
}

.tm-btn-cancel:hover[b-g2xxwyov9v] {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.tm-btn-confirm[b-g2xxwyov9v] {
    flex: 2;
    padding: 14px;
    border: none;
    border-radius: 10px;
    background: var(--brand, #c62828);
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.15s;
}

.tm-btn-confirm:hover:not(:disabled)[b-g2xxwyov9v] {
    background: #991b1b;
    transform: translateY(-1px);
}

.tm-btn-confirm:disabled[b-g2xxwyov9v] {
    background: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
}

/* Merge tab specific */
.tm-empty[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #9ca3af;
}

.tm-empty-icon[b-g2xxwyov9v] {
    font-size: 3rem;
    margin-bottom: 12px;
}

.tm-empty-text[b-g2xxwyov9v] {
    font-size: 0.95rem;
    text-align: center;
}

.tm-merge-list[b-g2xxwyov9v] {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tm-merge-ticket[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: white;
    cursor: pointer;
    transition: all 0.15s;
}

.tm-merge-ticket:hover[b-g2xxwyov9v] {
    border-color: #d1d5db;
    background: #f8fafc;
}

.tm-merge-ticket.selected[b-g2xxwyov9v] {
    border-color: var(--brand, #c62828);
    background: #fef7f7;
}

.tm-merge-ticket-info[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tm-merge-ticket-label[b-g2xxwyov9v] {
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink, #1f2937);
}

.tm-merge-ticket-total[b-g2xxwyov9v] {
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 500;
}

.tm-merge-check[b-g2xxwyov9v] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand, #c62828);
    color: white;
    border-radius: 50%;
    font-weight: 700;
}

.tm-merge-preview[b-g2xxwyov9v] {
    padding: 16px 20px;
    background: #fef7f7;
    border-top: 1px solid #fecaca;
    border-bottom: 1px solid #fecaca;
}

.tm-merge-arrow[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
}

.tm-merge-from[b-g2xxwyov9v],
.tm-merge-to[b-g2xxwyov9v] {
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.95rem;
}

.tm-merge-from[b-g2xxwyov9v] {
    background: #fee2e2;
    color: #991b1b;
}

.tm-merge-to[b-g2xxwyov9v] {
    background: #d1fae5;
    color: #065f46;
}

.tm-merge-arrow-icon[b-g2xxwyov9v] {
    font-size: 1.5rem;
    color: #9ca3af;
}

.tm-merge-result[b-g2xxwyov9v] {
    text-align: center;
    font-size: 0.9rem;
    color: #374151;
}

.tm-merge-manual[b-g2xxwyov9v] {
    padding: 12px 20px;
    background: white;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tm-merge-manual-label[b-g2xxwyov9v] {
    font-size: 0.85rem;
    color: #6b7280;
}

.tm-merge-input[b-g2xxwyov9v] {
    padding: 10px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.15s;
}

.tm-merge-input:focus[b-g2xxwyov9v] {
    outline: none;
    border-color: var(--brand, #c62828);
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.1);
}

/* ========================================
   TICKET MANAGER - DARK THEME
   ======================================== */

html[data-theme="dark"] .ticket-manager[b-g2xxwyov9v] {
    background: #1f2937;
}

html[data-theme="dark"] .tm-tabs[b-g2xxwyov9v] {
    background: #111827;
    border-bottom-color: #374151;
}

html[data-theme="dark"] .tm-tab[b-g2xxwyov9v] {
    color: #9ca3af;
}

html[data-theme="dark"] .tm-tab:hover[b-g2xxwyov9v] {
    background: #1f2937;
    color: #e5e7eb;
}

html[data-theme="dark"] .tm-tab.active[b-g2xxwyov9v] {
    background: #1f2937;
    color: #f87171;
    border-bottom-color: #f87171;
}

html[data-theme="dark"] .tm-close:hover[b-g2xxwyov9v] {
    background: #7f1d1d;
    color: #fecaca;
}

html[data-theme="dark"] .tm-header[b-g2xxwyov9v] {
    background: #1f2937;
}

html[data-theme="dark"] .tm-title[b-g2xxwyov9v] {
    color: #f9fafb;
}

html[data-theme="dark"] .tm-subtitle[b-g2xxwyov9v] {
    color: #9ca3af;
}

html[data-theme="dark"] .tm-current-badge[b-g2xxwyov9v] {
    background: #dc2626;
}

html[data-theme="dark"] .tm-quick-actions[b-g2xxwyov9v] {
    background: #1f2937;
}

html[data-theme="dark"] .tm-quick-btn[b-g2xxwyov9v] {
    border-color: #4b5563;
    background: #374151;
    color: #e5e7eb;
}

html[data-theme="dark"] .tm-quick-btn:hover[b-g2xxwyov9v] {
    border-color: #f87171;
    background: #4a2020;
    color: #f87171;
}

html[data-theme="dark"] .tm-items-list[b-g2xxwyov9v] {
    background: #111827;
    border-color: #374151;
}

html[data-theme="dark"] .tm-section-header[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #4a3d1a 0%, #5c4c2e 100%);
}

html[data-theme="dark"] .tm-item-total[b-g2xxwyov9v] {
    color: #f9fafb;
}

html[data-theme="dark"] .tm-course-pill[b-g2xxwyov9v] {
    background: #4b5563;
    color: #e5e7eb;
}

html[data-theme="dark"] .tm-item-modifiers[b-g2xxwyov9v] {
    border-left-color: #4b5563;
}

html[data-theme="dark"] .tm-modifier[b-g2xxwyov9v] {
    color: #9ca3af;
}

html[data-theme="dark"] .tm-item[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: #374151;
}

html[data-theme="dark"] .tm-item.has-transfer[b-g2xxwyov9v] {
    border-color: #f87171;
    background: #2a1f1f;
}

html[data-theme="dark"] .tm-item-name[b-g2xxwyov9v] {
    color: #f9fafb;
}

html[data-theme="dark"] .tm-item-price[b-g2xxwyov9v] {
    color: #9ca3af;
}

html[data-theme="dark"] .tm-qty-value[b-g2xxwyov9v] {
    color: #e5e7eb;
}

html[data-theme="dark"] .tm-qty-value.stays[b-g2xxwyov9v] {
    color: #34d399;
}

html[data-theme="dark"] .tm-qty-value.moves.active[b-g2xxwyov9v] {
    color: #f87171;
}

html[data-theme="dark"] .tm-transfer-controls[b-g2xxwyov9v] {
    background: #374151;
}

html[data-theme="dark"] .tm-qty-btn[b-g2xxwyov9v] {
    background: #4b5563;
    color: #f9fafb;
    box-shadow: none;
}

html[data-theme="dark"] .tm-qty-btn:hover:not(:disabled)[b-g2xxwyov9v] {
    background: #dc2626;
}

html[data-theme="dark"] .tm-transfer-value[b-g2xxwyov9v] {
    color: #f87171;
}

html[data-theme="dark"] .tm-summary[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: #374151;
}

html[data-theme="dark"] .tm-summary-row.highlight[b-g2xxwyov9v] {
    background: #4a2020;
    border-color: #7f1d1d;
}

html[data-theme="dark"] .tm-summary-label[b-g2xxwyov9v] {
    color: #9ca3af;
}

html[data-theme="dark"] .tm-summary-row.highlight .tm-summary-label[b-g2xxwyov9v] {
    color: #fca5a5;
}

html[data-theme="dark"] .tm-summary-value[b-g2xxwyov9v] {
    color: #f9fafb;
}

html[data-theme="dark"] .tm-summary-row.highlight .tm-summary-value[b-g2xxwyov9v] {
    color: #f87171;
}

html[data-theme="dark"] .tm-actions[b-g2xxwyov9v] {
    background: #111827;
    border-color: #374151;
}

html[data-theme="dark"] .tm-btn-cancel[b-g2xxwyov9v] {
    border-color: #4b5563;
    background: #374151;
    color: #e5e7eb;
}

html[data-theme="dark"] .tm-btn-cancel:hover[b-g2xxwyov9v] {
    background: #4b5563;
    border-color: #6b7280;
}

html[data-theme="dark"] .tm-btn-confirm[b-g2xxwyov9v] {
    background: #dc2626;
}

html[data-theme="dark"] .tm-btn-confirm:hover:not(:disabled)[b-g2xxwyov9v] {
    background: #b91c1c;
}

html[data-theme="dark"] .tm-btn-confirm:disabled[b-g2xxwyov9v] {
    background: #4b5563;
    color: #6b7280;
}

html[data-theme="dark"] .tm-empty[b-g2xxwyov9v] {
    color: #6b7280;
}

html[data-theme="dark"] .tm-merge-list[b-g2xxwyov9v] {
    background: #111827;
}

html[data-theme="dark"] .tm-merge-ticket[b-g2xxwyov9v] {
    border-color: #374151;
    background: #1f2937;
}

html[data-theme="dark"] .tm-merge-ticket:hover[b-g2xxwyov9v] {
    border-color: #4b5563;
    background: #374151;
}

html[data-theme="dark"] .tm-merge-ticket.selected[b-g2xxwyov9v] {
    border-color: #f87171;
    background: #2a1f1f;
}

html[data-theme="dark"] .tm-merge-ticket-label[b-g2xxwyov9v] {
    color: #f9fafb;
}

html[data-theme="dark"] .tm-merge-ticket-total[b-g2xxwyov9v] {
    color: #9ca3af;
}

html[data-theme="dark"] .tm-merge-check[b-g2xxwyov9v] {
    background: #dc2626;
}

html[data-theme="dark"] .tm-merge-preview[b-g2xxwyov9v] {
    background: #2a1f1f;
    border-color: #7f1d1d;
}

html[data-theme="dark"] .tm-merge-from[b-g2xxwyov9v] {
    background: #7f1d1d;
    color: #fecaca;
}

html[data-theme="dark"] .tm-merge-to[b-g2xxwyov9v] {
    background: #064e3b;
    color: #6ee7b7;
}

html[data-theme="dark"] .tm-merge-result[b-g2xxwyov9v] {
    color: #e5e7eb;
}

html[data-theme="dark"] .tm-merge-manual[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: #374151;
}

html[data-theme="dark"] .tm-merge-input[b-g2xxwyov9v] {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

html[data-theme="dark"] .tm-merge-input:focus[b-g2xxwyov9v] {
    border-color: #f87171;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.2);
}

/* Ticket-manager — phone */
@media (max-width: 500px) {
    .ticket-manager[b-g2xxwyov9v] {
        width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        max-height: 100dvh;
        max-height: calc(100dvh - var(--pwa-banner-h, 0px));
        height: 100vh;
        height: 100dvh;
        height: calc(100dvh - var(--pwa-banner-h, 0px));
        border-radius: 0;
    }

    .tm-tab[b-g2xxwyov9v] {
        padding: 12px 14px;
        font-size: 0.88rem;
    }

    .tm-header[b-g2xxwyov9v] {
        padding: 12px 16px 10px;
    }

    .tm-title[b-g2xxwyov9v] {
        font-size: 1rem;
    }

    .tm-quick-actions[b-g2xxwyov9v] {
        padding: 0 12px 10px;
        gap: 6px;
    }

    .tm-quick-btn[b-g2xxwyov9v] {
        padding: 10px 8px;
        font-size: 0.82rem;
        min-height: 44px;
    }

    .tm-item[b-g2xxwyov9v] {
        padding: 10px;
        margin: 6px 0;
    }

    .tm-actions[b-g2xxwyov9v] {
        padding: 12px;
    }

    .tm-btn-cancel[b-g2xxwyov9v],
    .tm-btn-confirm[b-g2xxwyov9v] {
        min-height: 48px;
        font-size: 0.95rem;
    }
}

/* ============================================
   LABEL INPUT MODAL
   ============================================ */
.label-modal[b-g2xxwyov9v] {
    max-width: 400px;
    padding: 0;
    overflow: hidden;
}

.label-modal-header[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #c62828 0%, #8e0000 100%);
    color: white;
}

.label-modal-icon[b-g2xxwyov9v] {
    font-size: 1.5rem;
}

.label-modal-title[b-g2xxwyov9v] {
    font-size: 1.25rem;
    font-weight: 700;
}

.label-modal-body[b-g2xxwyov9v] {
    padding: 24px;
}

.label-input-label[b-g2xxwyov9v] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.label-input[b-g2xxwyov9v] {
    width: 100%;
    padding: 14px 16px;
    font-size: 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.label-input:focus[b-g2xxwyov9v] {
    border-color: #c62828;
    box-shadow: 0 0 0 4px rgba(198, 40, 40, 0.15);
}

.label-input[b-g2xxwyov9v]::placeholder {
    color: #9ca3af;
}

/* Note textarea (multiline) */
.note-textarea[b-g2xxwyov9v] {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
    line-height: 1.5;
}

.label-hint[b-g2xxwyov9v] {
    margin-top: 8px;
    font-size: 0.8rem;
    color: #6b7280;
}

.label-modal-actions[b-g2xxwyov9v] {
    display: flex;
    gap: 12px;
    padding: 16px 24px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.label-modal-actions .btn[b-g2xxwyov9v] {
    flex: 1;
    padding: 12px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 10px;
}

.label-modal-actions .btn-primary[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #c62828 0%, #8e0000 100%);
    color: white;
    border: none;
}

.label-modal-actions .btn-ghost[b-g2xxwyov9v] {
    background: white;
    border: 2px solid #e5e7eb;
    color: #374151;
}

/* ============================================
   NOTE MODAL IMPROVEMENTS
   ============================================ */
.note-modal-card[b-g2xxwyov9v] {
    max-width: 450px;
}

.note-modal-header[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}

.note-modal-item[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: #fef3c7;
    border-bottom: 2px solid #fcd34d;
}

.note-modal-item-name[b-g2xxwyov9v] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #92400e;
}

.note-modal-item-price[b-g2xxwyov9v] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #b45309;
    background: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    /* The price chip is a tight inline pill — without nowrap, "15,90 €"
       wraps when the article name pushes the row past the modal width
       (long names like "(Fesenjan) sallón Estafado de Nueces Y Grandas"
       make this routine). flex-shrink:0 stops the parent flex container
       from compressing the chip to the point of wrapping the price. */
    white-space: nowrap;
    flex-shrink: 0;
}

.note-modal-card .note-textarea[b-g2xxwyov9v] {
    background: #fffbeb;
    border: 2px solid #fcd34d;
    color: #1f2937;
    font-size: 1rem;
}

.note-modal-card .note-textarea:focus[b-g2xxwyov9v] {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
    outline: none;
}

.note-modal-card .note-textarea[b-g2xxwyov9v]::placeholder {
    color: #92400e;
    opacity: 0.6;
}

.note-modal-card .label-hint[b-g2xxwyov9v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.note-shortcut[b-g2xxwyov9v] {
    font-size: 0.75rem;
    color: #9ca3af;
    font-family: monospace;
}

.visually-hidden[b-g2xxwyov9v] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Dark theme - Note modal */
html[data-theme="dark"] .note-modal-item[b-g2xxwyov9v] {
    background: #78350f;
    border-color: #f59e0b;
}

html[data-theme="dark"] .note-modal-item-name[b-g2xxwyov9v] {
    color: #fef3c7;
}

html[data-theme="dark"] .note-modal-item-price[b-g2xxwyov9v] {
    background: #451a03;
    color: #fbbf24;
}

html[data-theme="dark"] .note-modal-card .note-textarea[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: #f59e0b;
    color: #f3f4f6;
}

html[data-theme="dark"] .note-modal-card .note-textarea[b-g2xxwyov9v]::placeholder {
    color: #fbbf24;
    opacity: 0.5;
}

/* Note modal touch keyboard */
.note-textarea-wrapper[b-g2xxwyov9v] {
    position: relative;
    display: flex;
    gap: 8px;
}

.note-textarea-wrapper .note-textarea[b-g2xxwyov9v] {
    flex: 1;
}

.note-keyboard-toggle[b-g2xxwyov9v] {
    width: 44px;
    height: 44px;
    border: 2px solid #fcd34d;
    background: #fffbeb;
    border-radius: 8px;
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
    align-self: flex-start;
}

.note-keyboard-toggle:hover[b-g2xxwyov9v] {
    background: #fef3c7;
}

.note-keyboard-toggle.active[b-g2xxwyov9v] {
    background: #f59e0b;
    border-color: #d97706;
}

html[data-theme="dark"] .note-keyboard-toggle[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: #f59e0b;
}

html[data-theme="dark"] .note-keyboard-toggle:hover[b-g2xxwyov9v] {
    background: #374151;
}

html[data-theme="dark"] .note-keyboard-toggle.active[b-g2xxwyov9v] {
    background: #f59e0b;
}

.note-modal-card.with-keyboard[b-g2xxwyov9v] {
    max-width: 520px;
}

.note-keyboard[b-g2xxwyov9v] {
    padding: 12px 24px 16px;
    background: #fef3c7;
    border-top: 2px solid #fcd34d;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

html[data-theme="dark"] .note-keyboard[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: #f59e0b;
}

.note-kb-row[b-g2xxwyov9v] {
    display: flex;
    justify-content: center;
    gap: 4px;
}

.note-key[b-g2xxwyov9v] {
    min-width: 32px;
    height: 40px;
    padding: 0 8px;
    border: none;
    background: #fff;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.1s ease;
    box-shadow: 0 2px 0 #d1d5db;
    -webkit-tap-highlight-color: transparent;
}

.note-key:active[b-g2xxwyov9v] {
    transform: translateY(2px);
    box-shadow: 0 0 0 #d1d5db;
    background: #f59e0b;
    color: white;
}

html[data-theme="dark"] .note-key[b-g2xxwyov9v] {
    background: #374151;
    color: #f3f4f6;
    box-shadow: 0 2px 0 #1f2937;
}

html[data-theme="dark"] .note-key:active[b-g2xxwyov9v] {
    background: #f59e0b;
    color: white;
}

.note-key-shift[b-g2xxwyov9v],
.note-key-delete[b-g2xxwyov9v] {
    min-width: 48px;
    font-size: 1.1rem;
}

.note-key-shift.active[b-g2xxwyov9v] {
    background: #f59e0b;
    color: white;
}

.note-key-space[b-g2xxwyov9v] {
    flex: 1;
    max-width: 200px;
    font-size: 0.75rem;
    letter-spacing: 1px;
}

.note-key-comma[b-g2xxwyov9v],
.note-key-period[b-g2xxwyov9v] {
    min-width: 44px;
}

.note-kb-row-accents[b-g2xxwyov9v] {
    background: rgba(245, 158, 11, 0.1);
    padding: 4px 8px;
    border-radius: 6px;
    margin: 2px 0;
}

.note-kb-row-accents .note-key[b-g2xxwyov9v] {
    background: #fef3c7;
    color: #92400e;
    box-shadow: 0 2px 0 #fcd34d;
}

.note-kb-row-accents .note-key:active[b-g2xxwyov9v] {
    background: #f59e0b;
    color: white;
}

html[data-theme="dark"] .note-kb-row-accents[b-g2xxwyov9v] {
    background: rgba(245, 158, 11, 0.15);
}

html[data-theme="dark"] .note-kb-row-accents .note-key[b-g2xxwyov9v] {
    background: #78350f;
    color: #fef3c7;
    box-shadow: 0 2px 0 #451a03;
}

.note-kb-row-bottom[b-g2xxwyov9v] {
    margin-top: 4px;
}

/* Responsive note keyboard for small screens */
@media (max-width: 480px) {
    .note-modal-card.with-keyboard[b-g2xxwyov9v] {
        max-width: 100%;
    }

    .note-keyboard[b-g2xxwyov9v] {
        padding: 8px 12px 12px;
        gap: 4px;
    }

    .note-kb-row[b-g2xxwyov9v] {
        gap: 2px;
    }

    .note-key[b-g2xxwyov9v] {
        min-width: 26px;
        height: 36px;
        padding: 0 4px;
        font-size: 0.85rem;
    }

    .note-key-shift[b-g2xxwyov9v],
    .note-key-delete[b-g2xxwyov9v] {
        min-width: 38px;
        font-size: 0.95rem;
    }

    .note-key-space[b-g2xxwyov9v] {
        max-width: 140px;
        font-size: 0.65rem;
    }

    .note-key-comma[b-g2xxwyov9v],
    .note-key-period[b-g2xxwyov9v] {
        min-width: 36px;
    }

    .note-kb-row-accents[b-g2xxwyov9v] {
        padding: 3px 6px;
    }
}

/* ============================================
   REDESIGNED TICKETS PANEL
   ============================================ */
.tickets-panel[b-g2xxwyov9v] {
    max-width: 420px;
    width: 90vw;
    padding: 0;
    overflow: hidden;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.tickets-header[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #1e3a5f 0%, #0d1b2a 100%);
    color: white;
}

.tickets-icon[b-g2xxwyov9v] {
    font-size: 1.5rem;
}

.tickets-title[b-g2xxwyov9v] {
    font-size: 1.2rem;
    font-weight: 700;
    flex: 1;
}

.tickets-count[b-g2xxwyov9v] {
    font-size: 0.85rem;
    background: rgba(255,255,255,0.2);
    padding: 4px 12px;
    border-radius: 20px;
}

/* Merged tables row inside tickets modal */
.tickets-merged-tables[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    background: rgba(30, 58, 95, 0.15);
    flex-wrap: wrap;
}

.tickets-merged-tables .merged-label[b-g2xxwyov9v] {
    font-size: 0.85rem;
}

.tickets-list[b-g2xxwyov9v] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tickets-section-label[b-g2xxwyov9v] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #059669;
    padding: 8px 4px 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tickets-section-label.empty-section[b-g2xxwyov9v] {
    color: #9ca3af;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e5e7eb;
}

.empty-hint[b-g2xxwyov9v] {
    font-weight: 400;
    font-size: 0.7rem;
}

.ticket-card[b-g2xxwyov9v] {
    display: flex;
    gap: 8px;
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.ticket-card:hover[b-g2xxwyov9v] {
    border-color: #c62828;
    background: #fff;
}

.ticket-card.active[b-g2xxwyov9v] {
    border-color: #059669;
    background: #ecfdf5;
}

.ticket-card.empty[b-g2xxwyov9v] {
    border-style: dashed;
    background: #fafafa;
}

.ticket-card.empty:hover[b-g2xxwyov9v] {
    border-color: #9ca3af;
}

.ticket-main[b-g2xxwyov9v] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    min-width: 0;
}

.ticket-info[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ticket-label[b-g2xxwyov9v] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticket-active-badge[b-g2xxwyov9v] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    background: #059669;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
}

.ticket-total[b-g2xxwyov9v] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #059669;
    flex-shrink: 0;
}

.ticket-total.empty-total[b-g2xxwyov9v] {
    color: #9ca3af;
}

.ticket-action[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    background: transparent;
    border: none;
    border-left: 1px solid #e5e7eb;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.2s ease;
}

.ticket-action.merge-btn:hover[b-g2xxwyov9v] {
    background: #dbeafe;
}

.ticket-action.delete-btn:hover[b-g2xxwyov9v] {
    background: #fee2e2;
}

.no-tickets[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 20px;
    color: #9ca3af;
}

.no-tickets-icon[b-g2xxwyov9v] {
    font-size: 2rem;
    opacity: 0.5;
}

.tickets-footer[b-g2xxwyov9v] {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    background: #f3f4f6;
    border-top: 1px solid #e5e7eb;
}

.tickets-footer .btn[b-g2xxwyov9v] {
    padding: 12px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 10px;
}

.new-ticket-btn[b-g2xxwyov9v] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: white;
    border: none;
}

.new-ticket-btn span[b-g2xxwyov9v] {
    font-size: 1.2rem;
    font-weight: 300;
}

.tickets-footer .btn-ghost[b-g2xxwyov9v] {
    background: white;
    border: 2px solid #e5e7eb;
    color: #374151;
}

/* ============================================
   DARK THEME - Label Modal
   ============================================ */
html[data-theme="dark"] .label-modal-header[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%);
}

html[data-theme="dark"] .label-modal-body[b-g2xxwyov9v] {
    background: #1f2937;
}

html[data-theme="dark"] .label-input-label[b-g2xxwyov9v] {
    color: #d1d5db;
}

html[data-theme="dark"] .label-input[b-g2xxwyov9v] {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

html[data-theme="dark"] .label-input:focus[b-g2xxwyov9v] {
    border-color: #f87171;
    box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.2);
}

html[data-theme="dark"] .label-input[b-g2xxwyov9v]::placeholder {
    color: #6b7280;
}

html[data-theme="dark"] .label-hint[b-g2xxwyov9v] {
    color: #9ca3af;
}

html[data-theme="dark"] .label-modal-actions[b-g2xxwyov9v] {
    background: #111827;
    border-color: #374151;
}

html[data-theme="dark"] .label-modal-actions .btn-ghost[b-g2xxwyov9v] {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

/* ============================================
   DARK THEME - Tickets Panel
   ============================================ */
html[data-theme="dark"] .tickets-header[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #1e3a5f 0%, #0d1b2a 100%);
}

html[data-theme="dark"] .tickets-list[b-g2xxwyov9v] {
    background: #1f2937;
}

html[data-theme="dark"] .tickets-section-label[b-g2xxwyov9v] {
    color: #34d399;
}

html[data-theme="dark"] .tickets-section-label.empty-section[b-g2xxwyov9v] {
    color: #6b7280;
    border-color: #374151;
}

html[data-theme="dark"] .ticket-card[b-g2xxwyov9v] {
    background: #374151;
    border-color: #4b5563;
}

html[data-theme="dark"] .ticket-card:hover[b-g2xxwyov9v] {
    border-color: #f87171;
    background: #4b5563;
}

html[data-theme="dark"] .ticket-card.active[b-g2xxwyov9v] {
    border-color: #34d399;
    background: rgba(52, 211, 153, 0.1);
}

html[data-theme="dark"] .ticket-card.empty[b-g2xxwyov9v] {
    background: #2d3748;
}

html[data-theme="dark"] .ticket-label[b-g2xxwyov9v] {
    color: #f9fafb;
}

html[data-theme="dark"] .ticket-total[b-g2xxwyov9v] {
    color: #34d399;
}

html[data-theme="dark"] .ticket-total.empty-total[b-g2xxwyov9v] {
    color: #6b7280;
}

html[data-theme="dark"] .ticket-action[b-g2xxwyov9v] {
    border-color: #4b5563;
}

html[data-theme="dark"] .ticket-action.merge-btn:hover[b-g2xxwyov9v] {
    background: rgba(59, 130, 246, 0.2);
}

html[data-theme="dark"] .ticket-action.delete-btn:hover[b-g2xxwyov9v] {
    background: rgba(248, 113, 113, 0.2);
}

html[data-theme="dark"] .no-tickets[b-g2xxwyov9v] {
    color: #6b7280;
}

html[data-theme="dark"] .tickets-footer[b-g2xxwyov9v] {
    background: #111827;
    border-color: #374151;
}

html[data-theme="dark"] .tickets-footer .btn-ghost[b-g2xxwyov9v] {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

/* ============================================
   UNIFIED TICKET BAR
   ============================================ */
.ticket-bar[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f2744 100%);
    border-radius: 0; /* Flush to edges */
    padding: 14px 16px;
    margin: 0;
    position: relative;
    flex-shrink: 0;
}

.ticket-bar-main[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.current-ticket[b-g2xxwyov9v] {
    flex: 1;
    min-width: 0; /* allow shrinking in narrow docked layouts */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.current-ticket:hover[b-g2xxwyov9v] {
    background: rgba(255, 255, 255, 0.15);
}

.current-ticket.empty[b-g2xxwyov9v] {
    background: rgba(255, 255, 255, 0.05);
    border: 2px dashed rgba(255, 255, 255, 0.2);
}

.ticket-number[b-g2xxwyov9v] {
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    min-width: 40px;
    text-align: center;
    background: rgba(255, 255, 255, 0.15);
    padding: 4px 12px;
    border-radius: 8px;
}

/* A table's ticket leads with the table ("Mesa 1"), in the number chip's place and sizes. */
.ticket-number.ticket-table[b-g2xxwyov9v] {
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 1 auto;
}

.ticket-info-stack[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 1px;
    min-width: 0;
    overflow: hidden;
}

.ticket-total-display[b-g2xxwyov9v] {
    font-size: 1.3rem;
    font-weight: 700;
    color: #34d399;
}

.ticket-subtitle[b-g2xxwyov9v] {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Inline pax edit — tap to change comensales */
.pax-edit[b-g2xxwyov9v] {
    cursor: pointer;
    border-radius: 4px;
    padding: 0 2px;
    transition: background .15s;
}
.pax-edit:hover[b-g2xxwyov9v] {
    background: rgba(255,255,255,.12);
}
.pax-value[b-g2xxwyov9v] {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

.ticket-expand[b-g2xxwyov9v] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
}

.ticket-empty-text[b-g2xxwyov9v] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.95rem;
}

.ticket-create[b-g2xxwyov9v] {
    color: #34d399;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Ticket Actions */
.ticket-actions[b-g2xxwyov9v] {
    display: flex;
    gap: 6px;
    flex-shrink: 0; /* keep action buttons visible, let text truncate */
}

.ticket-action-btn[b-g2xxwyov9v] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.2s ease;
}

.ticket-action-btn:hover:not(:disabled)[b-g2xxwyov9v] {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.ticket-action-btn:disabled[b-g2xxwyov9v] {
    opacity: 0.3;
    cursor: not-allowed;
}

.ticket-action-btn.split:hover:not(:disabled)[b-g2xxwyov9v] {
    background: rgba(239, 68, 68, 0.3);
}

.ticket-action-btn.merge:hover:not(:disabled)[b-g2xxwyov9v] {
    background: rgba(59, 130, 246, 0.3);
}

/* More Dropdown */
.ticket-more-dropdown[b-g2xxwyov9v] {
    position: relative;
}

/* Invisible backdrop to catch clicks outside dropdown */
.dropdown-backdrop[b-g2xxwyov9v] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.ticket-dropdown-menu[b-g2xxwyov9v] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    background: #1f2937;
    border: 1px solid #374151;
    border-radius: 10px;
    padding: 6px;
    min-width: 180px;
    z-index: 100;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.ticket-dropdown-menu button[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #f9fafb;
    font-size: 0.9rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease;
}

.ticket-dropdown-menu button:hover:not(:disabled)[b-g2xxwyov9v] {
    background: rgba(255, 255, 255, 0.1);
}

.ticket-dropdown-menu button:disabled[b-g2xxwyov9v] {
    opacity: 0.4;
    cursor: not-allowed;
}

.ticket-dropdown-menu button.danger[b-g2xxwyov9v] {
    color: #f87171;
}

.ticket-dropdown-menu button.danger:hover:not(:disabled)[b-g2xxwyov9v] {
    background: rgba(248, 113, 113, 0.15);
}

.ticket-dropdown-menu button span[b-g2xxwyov9v] {
    width: 24px;
    text-align: center;
}

/* Phone: the "···" ticket menu opened as an absolute dropdown that clipped /
   mis-positioned on narrow screens. Re-dock it as a bottom-sheet (like the ⚙️
   menu and the line-item modal that already read well), full-width with a
   dimmed backdrop, so it's always fully visible. */
@media (max-width: 600px) {
    .ticket-more-dropdown[b-g2xxwyov9v] { position: static; }
    .dropdown-backdrop[b-g2xxwyov9v] { background: rgba(0, 0, 0, .45); z-index: 9998; }
    .ticket-dropdown-menu[b-g2xxwyov9v] {
        position: fixed;
        left: 0; right: 0; bottom: 0; top: auto;
        margin: 0;
        width: 100%;
        min-width: 0;
        max-height: 80vh;
        overflow-y: auto;
        border-radius: 16px 16px 0 0;
        padding: 10px 10px max(12px, env(safe-area-inset-bottom, 0px));
        z-index: 9999;
        animation: ticket-sheet-in-b-g2xxwyov9v 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .ticket-dropdown-menu button[b-g2xxwyov9v] { padding: 14px 12px; font-size: 1rem; }
}
@keyframes ticket-sheet-in-b-g2xxwyov9v { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }

/* Phone: lock the POS shell to the viewport so the whole page can't be dragged
   up to reveal empty space below — only the product grid / basket scroll. */
@media (max-width: 600px) {
    .pos-shell[b-g2xxwyov9v] { overscroll-behavior: none; }
    .products-panel[b-g2xxwyov9v],
    .basket-content[b-g2xxwyov9v],
    .summary .lines[b-g2xxwyov9v] { overscroll-behavior-y: contain; }
}

/* Phone: a ▲/▼ toggle on the ticket bar grows the basket from the default 40vh
   to most of the screen (and back) so the operator can see the whole order. */
.basket-expand-toggle[b-g2xxwyov9v] { display: none; }
@media (max-width: 600px) {
    .basket-expand-toggle[b-g2xxwyov9v] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        color: var(--muted, #94a3b8);
        font-size: 1rem;
        padding: 6px 8px;
        min-width: 36px;
        cursor: pointer;
    }
    .pos-shell.basket-full > .summary.mobile-basket-expanded[b-g2xxwyov9v],
    .summary.summary-full.mobile-basket-expanded[b-g2xxwyov9v] {
        max-height: 75dvh;
    }
}

/* Quick Switch Pills */
.ticket-pills[b-g2xxwyov9v] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ticket-pill[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 60px;
}

.ticket-pill:hover[b-g2xxwyov9v] {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
}

.ticket-pill.active[b-g2xxwyov9v] {
    background: rgba(52, 211, 153, 0.2);
    border-color: #34d399;
}

.ticket-pill.empty[b-g2xxwyov9v] {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.2);
}

.ticket-pill.empty .pill-total[b-g2xxwyov9v] {
    color: #9ca3af;
}

.pill-label[b-g2xxwyov9v] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
}

.pill-total[b-g2xxwyov9v] {
    font-size: 0.75rem;
    color: #34d399;
    font-weight: 600;
}

.ticket-pill.add[b-g2xxwyov9v] {
    background: rgba(52, 211, 153, 0.15);
    border-color: rgba(52, 211, 153, 0.3);
    color: #34d399;
    font-size: 1.2rem;
    font-weight: 300;
    min-width: 44px;
    padding: 10px;
}

.ticket-pill.add:hover[b-g2xxwyov9v] {
    background: rgba(52, 211, 153, 0.25);
    border-color: #34d399;
}

/* Save Badge in Ticket Bar */
.ticket-bar .save-badge[b-g2xxwyov9v] {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 0.75rem;
}

/* ============================================
   LIGHT THEME - Ticket Bar
   ============================================ */
html:not([data-theme="dark"]) .ticket-bar[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: 1px solid #cbd5e1;
}

html:not([data-theme="dark"]) .current-ticket[b-g2xxwyov9v] {
    background: #fff;
    border: 1px solid #e2e8f0;
}

html:not([data-theme="dark"]) .current-ticket:hover[b-g2xxwyov9v] {
    background: #f8fafc;
    border-color: #cbd5e1;
}

html:not([data-theme="dark"]) .current-ticket.empty[b-g2xxwyov9v] {
    background: #f9fafb;
    border: 2px dashed #d1d5db;
}

html:not([data-theme="dark"]) .ticket-number[b-g2xxwyov9v] {
    color: #1f2937;
    background: #e5e7eb;
}

html:not([data-theme="dark"]) .ticket-total-display[b-g2xxwyov9v] {
    color: #059669;
}

html:not([data-theme="dark"]) .ticket-expand[b-g2xxwyov9v] {
    color: #9ca3af;
}

html:not([data-theme="dark"]) .ticket-subtitle[b-g2xxwyov9v] {
    color: #6b7280;
}

html:not([data-theme="dark"]) .ticket-empty-text[b-g2xxwyov9v] {
    color: #9ca3af;
}

html:not([data-theme="dark"]) .ticket-create[b-g2xxwyov9v] {
    color: #059669;
}

html:not([data-theme="dark"]) .ticket-action-btn[b-g2xxwyov9v] {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
}

html:not([data-theme="dark"]) .ticket-action-btn:hover:not(:disabled)[b-g2xxwyov9v] {
    background: #e5e7eb;
}

html:not([data-theme="dark"]) .ticket-action-btn.split:hover:not(:disabled)[b-g2xxwyov9v] {
    background: #fee2e2;
    border-color: #fca5a5;
}

html:not([data-theme="dark"]) .ticket-action-btn.merge:hover:not(:disabled)[b-g2xxwyov9v] {
    background: #dbeafe;
    border-color: #93c5fd;
}

html:not([data-theme="dark"]) .ticket-dropdown-menu[b-g2xxwyov9v] {
    background: #fff;
    border-color: #e5e7eb;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

html:not([data-theme="dark"]) .ticket-dropdown-menu button[b-g2xxwyov9v] {
    color: #374151;
}

html:not([data-theme="dark"]) .ticket-dropdown-menu button:hover:not(:disabled)[b-g2xxwyov9v] {
    background: #f3f4f6;
}

html:not([data-theme="dark"]) .ticket-dropdown-menu button.danger[b-g2xxwyov9v] {
    color: #dc2626;
}

html:not([data-theme="dark"]) .ticket-dropdown-menu button.danger:hover:not(:disabled)[b-g2xxwyov9v] {
    background: #fee2e2;
}

html:not([data-theme="dark"]) .ticket-pills[b-g2xxwyov9v] {
    border-color: #e5e7eb;
}

html:not([data-theme="dark"]) .ticket-pill[b-g2xxwyov9v] {
    background: #f9fafb;
    border-color: #e5e7eb;
}

html:not([data-theme="dark"]) .ticket-pill:hover[b-g2xxwyov9v] {
    background: #f3f4f6;
    border-color: #d1d5db;
}

html:not([data-theme="dark"]) .ticket-pill.active[b-g2xxwyov9v] {
    background: #ecfdf5;
    border-color: #059669;
}

html:not([data-theme="dark"]) .ticket-pill.empty[b-g2xxwyov9v] {
    border-color: #d1d5db;
}

html:not([data-theme="dark"]) .pill-label[b-g2xxwyov9v] {
    color: #1f2937;
}

html:not([data-theme="dark"]) .pill-total[b-g2xxwyov9v] {
    color: #059669;
}

html:not([data-theme="dark"]) .ticket-pill.add[b-g2xxwyov9v] {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #059669;
}

html:not([data-theme="dark"]) .ticket-pill.add:hover[b-g2xxwyov9v] {
    background: #d1fae5;
    border-color: #059669;
}

/* ========================================
   LOW RESOLUTION SCREENS (1024x768, 4:3 monitors)
   Optimized for ELO Touch and similar POS monitors
   ======================================== */
@media (max-height: 800px) {
    /* Hide RECIENTES section to save vertical space */
    .recent-section[b-g2xxwyov9v] {
        display: none;
    }

    /* Compact topbar */
    .topbar[b-g2xxwyov9v] {
        padding: 8px 12px;
        gap: 10px;
    }


    /* Compact action buttons */
    .actions .btn[b-g2xxwyov9v] {
        padding: 6px 10px;
        min-height: 36px;
        font-size: 0.85rem;
    }

    /* Compact filters bar */
    .filters[b-g2xxwyov9v] {
        padding: 8px 12px;
        gap: 6px;
    }

    /* Smaller chips - scroll instead of wrap */
    .chipbar[b-g2xxwyov9v] {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px;
    }

    .chip[b-g2xxwyov9v] {
        padding: 6px 10px;
        font-size: 0.85rem;
        flex-shrink: 0;
    }

    /* Smaller search */
    .search[b-g2xxwyov9v] {
        min-width: 180px;
        padding: 6px 10px;
    }

    /* Compact menu grid */
    .grid[b-g2xxwyov9v] {
        gap: 8px;
        padding: 8px;
    }

    .tile[b-g2xxwyov9v] {
        padding: 10px;
    }

    /* .tile-name handled by its height-aware clamp() base — no per-height cliff. */
    .tile .price[b-g2xxwyov9v] {
        font-size: 0.9rem;
    }

    /* Compact payment buttons */
    .payment-bar[b-g2xxwyov9v] {
        gap: 6px;
        padding: 8px 12px;
    }

    .pay[b-g2xxwyov9v] {
        padding: 10px 8px;
        font-size: 0.9rem;
        min-height: 44px;
    }
}

/* Extra compact for very low resolution (768px height) */
@media (max-height: 768px) {
    .topbar[b-g2xxwyov9v] {
        padding: 6px 10px;
        gap: 8px;
    }


    .actions .btn[b-g2xxwyov9v] {
        padding: 5px 8px;
        min-height: 32px;
        font-size: 0.8rem;
        border-radius: 8px;
    }

    .filters[b-g2xxwyov9v] {
        padding: 6px 10px;
    }

    .chip[b-g2xxwyov9v] {
        padding: 5px 8px;
        font-size: 0.8rem;
        border-radius: 8px;
    }

    .search[b-g2xxwyov9v] {
        min-width: 140px;
        padding: 5px 8px;
        font-size: 0.85rem;
    }

    .grid[b-g2xxwyov9v] {
        gap: 6px;
        padding: 6px;
    }

    .tile[b-g2xxwyov9v] {
        padding: 8px;
        border-radius: 8px;
    }

    /* .tile-name handled by its height-aware clamp() base — no per-height cliff. */
    .tile .price[b-g2xxwyov9v] {
        font-size: 0.85rem;
    }

    .payment-bar[b-g2xxwyov9v] {
        gap: 4px;
        padding: 6px 10px;
    }

    .pay[b-g2xxwyov9v] {
        padding: 8px 6px;
        font-size: 0.85rem;
        min-height: 40px;
        border-radius: 8px;
    }

    /* Tighter basket in low-res */
    .summary-header[b-g2xxwyov9v] {
        padding: 8px 12px;
    }

    .summary-body[b-g2xxwyov9v] {
        padding: 8px;
    }

    /* Compact ticket bar */
    .ticket-bar[b-g2xxwyov9v] {
        padding: 6px 10px;
    }

    .current-ticket[b-g2xxwyov9v] {
        padding: 6px 10px;
        gap: 8px;
    }

    .ticket-number[b-g2xxwyov9v] {
        font-size: 1.1rem;
        padding: 3px 8px;
    }

    .ticket-total-display[b-g2xxwyov9v] {
        font-size: 1.1rem;
    }

    .ticket-subtitle[b-g2xxwyov9v] {
        font-size: 0.6rem;
    }

    .ticket-action-btn[b-g2xxwyov9v] {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
}

/* Mobile / very narrow basket */
@media (max-width: 400px) {
    .ticket-subtitle[b-g2xxwyov9v] {
        font-size: 0.55rem;
    }

    .ticket-total-display[b-g2xxwyov9v] {
        font-size: 1rem;
    }

    .ticket-number[b-g2xxwyov9v] {
        font-size: 1rem;
        padding: 2px 6px;
    }
}

/* ===== KEYBOARD SHORTCUTS HELP MODAL ===== */
.shortcuts-modal[b-g2xxwyov9v] {
    max-width: 480px;
    width: 94vw;
}

.shortcuts-header[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.shortcuts-icon[b-g2xxwyov9v] {
    font-size: 1.5rem;
}

.shortcuts-title[b-g2xxwyov9v] {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--ink);
    flex: 1;
}

.shortcuts-close[b-g2xxwyov9v] {
    border: none;
    background: #f1f5f9;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    color: #6b7280;
    transition: all 0.15s ease;
}

.shortcuts-close:hover[b-g2xxwyov9v] {
    background: #e5e7eb;
    color: #1f2937;
}

.shortcuts-body[b-g2xxwyov9v] {
    padding: 16px 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.shortcuts-section[b-g2xxwyov9v] {
    margin-bottom: 20px;
}

.shortcuts-section:last-child[b-g2xxwyov9v] {
    margin-bottom: 0;
}

.shortcuts-section-title[b-g2xxwyov9v] {
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f1f5f9;
}

.shortcut-row[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    gap: 12px;
}

.shortcut-row:not(:last-child)[b-g2xxwyov9v] {
    border-bottom: 1px dashed #f1f5f9;
}

.shortcut-keys[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.shortcut-keys kbd[b-g2xxwyov9v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 26px;
    padding: 0 8px;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: #374151;
    background: linear-gradient(180deg, #fff 0%, #f3f4f6 100%);
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.8);
}

.shortcut-desc[b-g2xxwyov9v] {
    font-size: 0.875rem;
    color: #4b5563;
    text-align: right;
}

.shortcuts-footer[b-g2xxwyov9v] {
    padding: 12px 20px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    text-align: center;
}

.shortcuts-hint[b-g2xxwyov9v] {
    font-size: 0.75rem;
    color: #9ca3af;
}

.shortcuts-hint kbd[b-g2xxwyov9v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    font-family: inherit;
    font-size: 0.65rem;
    font-weight: 600;
    color: #6b7280;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    margin: 0 2px;
}

/* Dark mode for shortcuts modal */
:root[data-theme="dark"] .shortcuts-header[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    border-color: #374151;
}

:root[data-theme="dark"] .shortcuts-title[b-g2xxwyov9v] {
    color: #f9fafb;
}

:root[data-theme="dark"] .shortcuts-close[b-g2xxwyov9v] {
    background: #374151;
    color: #9ca3af;
}

:root[data-theme="dark"] .shortcuts-close:hover[b-g2xxwyov9v] {
    background: #4b5563;
    color: #f9fafb;
}

:root[data-theme="dark"] .shortcuts-body[b-g2xxwyov9v] {
    background: #111827;
}

:root[data-theme="dark"] .shortcuts-section-title[b-g2xxwyov9v] {
    color: #9ca3af;
    border-color: #374151;
}

:root[data-theme="dark"] .shortcut-row[b-g2xxwyov9v] {
    border-color: #1f2937;
}

:root[data-theme="dark"] .shortcut-keys kbd[b-g2xxwyov9v] {
    background: linear-gradient(180deg, #374151 0%, #1f2937 100%);
    border-color: #4b5563;
    color: #e5e7eb;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05);
}

:root[data-theme="dark"] .shortcut-desc[b-g2xxwyov9v] {
    color: #d1d5db;
}

:root[data-theme="dark"] .shortcuts-footer[b-g2xxwyov9v] {
    background: #0f172a;
    border-color: #374151;
}

:root[data-theme="dark"] .shortcuts-hint[b-g2xxwyov9v] {
    color: #6b7280;
}

:root[data-theme="dark"] .shortcuts-hint kbd[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: #374151;
    color: #9ca3af;
}

/* ===== TABLE ORDER HISTORY MODAL ===== */
.history-modal[b-g2xxwyov9v] {
    max-width: 420px;
    width: 94vw;
}

.history-header[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.history-icon[b-g2xxwyov9v] {
    font-size: 1.5rem;
}

.history-title[b-g2xxwyov9v] {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--ink);
    flex: 1;
}

.history-close[b-g2xxwyov9v] {
    border: none;
    background: #f1f5f9;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    color: #6b7280;
    transition: all 0.15s ease;
}

.history-close:hover[b-g2xxwyov9v] {
    background: #e5e7eb;
    color: #1f2937;
}

.history-body[b-g2xxwyov9v] {
    padding: 16px 20px;
    max-height: 55vh;
    overflow-y: auto;
}

.history-loading[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 20px;
    color: #6b7280;
}

.history-loading .spinner[b-g2xxwyov9v] {
    width: 28px;
    height: 28px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin-b-g2xxwyov9v 0.8s linear infinite;
}

.history-empty[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 20px;
    text-align: center;
}

.history-empty .empty-icon[b-g2xxwyov9v] {
    font-size: 2.5rem;
    opacity: 0.6;
}

.history-empty .empty-text[b-g2xxwyov9v] {
    color: #6b7280;
    font-size: 0.9rem;
}

.history-list[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.history-item[b-g2xxwyov9v] {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px;
    background: #fff;
    transition: all 0.15s ease;
}

.history-item:hover[b-g2xxwyov9v] {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.history-item.closed[b-g2xxwyov9v] {
    border-left: 4px solid #10b981;
}

.history-item.open[b-g2xxwyov9v] {
    border-left: 4px solid #f59e0b;
}

.history-item.cancelled[b-g2xxwyov9v] {
    border-left: 4px solid #ef4444;
    opacity: 0.7;
}

.history-item-top[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.history-ticket-no[b-g2xxwyov9v] {
    font-weight: 800;
    font-size: 1rem;
    color: var(--ink);
}

.history-label[b-g2xxwyov9v] {
    background: #f3f4f6;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    color: #6b7280;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-status[b-g2xxwyov9v] {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
}

.history-status.closed[b-g2xxwyov9v] {
    background: #d1fae5;
    color: #065f46;
}

.history-status.open[b-g2xxwyov9v] {
    background: #fef3c7;
    color: #92400e;
}

.history-status.cancelled[b-g2xxwyov9v] {
    background: #fee2e2;
    color: #b91c1c;
}

.history-item-bottom[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8rem;
    color: #6b7280;
}

.history-time[b-g2xxwyov9v] {
    color: #9ca3af;
}

.history-total[b-g2xxwyov9v] {
    margin-left: auto;
    font-weight: 700;
    color: var(--ink);
    font-size: 0.95rem;
}

.history-footer[b-g2xxwyov9v] {
    padding: 12px 20px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    text-align: center;
}

.history-hint[b-g2xxwyov9v] {
    font-size: 0.75rem;
    color: #9ca3af;
}

/* Dark mode for history modal */
:root[data-theme="dark"] .history-header[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    border-color: #374151;
}

:root[data-theme="dark"] .history-title[b-g2xxwyov9v] {
    color: #f9fafb;
}

:root[data-theme="dark"] .history-close[b-g2xxwyov9v] {
    background: #374151;
    color: #9ca3af;
}

:root[data-theme="dark"] .history-close:hover[b-g2xxwyov9v] {
    background: #4b5563;
    color: #f9fafb;
}

:root[data-theme="dark"] .history-body[b-g2xxwyov9v] {
    background: #111827;
}

:root[data-theme="dark"] .history-empty .empty-text[b-g2xxwyov9v] {
    color: #9ca3af;
}

:root[data-theme="dark"] .history-item[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: #374151;
}

:root[data-theme="dark"] .history-item:hover[b-g2xxwyov9v] {
    border-color: #4b5563;
}

:root[data-theme="dark"] .history-ticket-no[b-g2xxwyov9v] {
    color: #f9fafb;
}

:root[data-theme="dark"] .history-label[b-g2xxwyov9v] {
    background: #374151;
    color: #d1d5db;
}

:root[data-theme="dark"] .history-status.closed[b-g2xxwyov9v] {
    background: #064e3b;
    color: #6ee7b7;
}

:root[data-theme="dark"] .history-status.open[b-g2xxwyov9v] {
    background: #78350f;
    color: #fcd34d;
}

:root[data-theme="dark"] .history-status.cancelled[b-g2xxwyov9v] {
    background: #7f1d1d;
    color: #fca5a5;
}

:root[data-theme="dark"] .history-item-bottom[b-g2xxwyov9v] {
    color: #9ca3af;
}

:root[data-theme="dark"] .history-total[b-g2xxwyov9v] {
    color: #f9fafb;
}

:root[data-theme="dark"] .history-footer[b-g2xxwyov9v] {
    background: #0f172a;
    border-color: #374151;
}

:root[data-theme="dark"] .history-hint[b-g2xxwyov9v] {
    color: #6b7280;
}

/* ===== KITCHEN BUTTON GROUP ===== */
.kitchen-btn-group[b-g2xxwyov9v] {
    display: flex;
    gap: 0;
    margin: 0.5rem;
}

.kitchen-btn-group .btn-kitchen[b-g2xxwyov9v] {
    flex: 1;
    border-radius: 8px 0 0 8px;
    margin: 0;
}

.kitchen-btn-group .btn-preview[b-g2xxwyov9v] {
    width: 48px;
    min-width: 48px;
    padding: 0;
    border: none;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #fff;
    font-size: 1.25rem;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid rgba(255,255,255,0.2);
}

.kitchen-btn-group .btn-preview:hover:not(:disabled)[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #15803d 0%, #166534 100%);
}

.kitchen-btn-group .btn-preview:disabled[b-g2xxwyov9v] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== PRINT PREVIEW MODAL ===== */
.print-preview-modal[b-g2xxwyov9v] {
    width: min(95vw, 420px);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.print-preview-header[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #fff;
    border-radius: 12px 12px 0 0;
}

.print-preview-icon[b-g2xxwyov9v] {
    font-size: 1.5rem;
}

.print-preview-title[b-g2xxwyov9v] {
    font-size: 1.125rem;
    font-weight: 600;
    flex: 1;
}

.print-preview-close[b-g2xxwyov9v] {
    background: rgba(255,255,255,0.2);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1rem;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.print-preview-close:hover[b-g2xxwyov9v] {
    background: rgba(255,255,255,0.3);
}

.print-preview-body[b-g2xxwyov9v] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
}

.print-preview-empty[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    gap: 0.75rem;
    color: #6b7280;
}

.print-preview-empty .empty-icon[b-g2xxwyov9v] {
    font-size: 2.5rem;
    opacity: 0.6;
}

.print-preview-empty .empty-text[b-g2xxwyov9v] {
    font-size: 0.95rem;
}

.print-preview-summary[b-g2xxwyov9v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #f0fdf4;
    border-radius: 8px;
    margin-bottom: 1rem;
    border: 1px solid #bbf7d0;
}

.summary-count[b-g2xxwyov9v] {
    font-weight: 500;
    color: #166534;
}

.summary-total[b-g2xxwyov9v] {
    font-weight: 700;
    color: #16a34a;
    font-size: 1.125rem;
}

.print-preview-items[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.course-section[b-g2xxwyov9v] {
    margin-bottom: 0.5rem;
}

.course-header[b-g2xxwyov9v] {
    padding: 0.5rem 0;
    margin-bottom: 0.25rem;
}

.course-badge[b-g2xxwyov9v] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: #f3f4f6;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 2.5rem;
    text-align: center;
}

.preview-item[b-g2xxwyov9v] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.preview-qty[b-g2xxwyov9v] {
    font-weight: 700;
    color: #16a34a;
    font-size: 1rem;
    min-width: 28px;
}

.preview-info[b-g2xxwyov9v] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.preview-name[b-g2xxwyov9v] {
    font-weight: 500;
    color: #1f2937;
}

.preview-mods[b-g2xxwyov9v] {
    font-size: 0.8rem;
    color: #9333ea;
    font-style: italic;
}

.preview-note[b-g2xxwyov9v] {
    font-size: 0.8rem;
    color: #d97706;
    background: #fffbeb;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-top: 0.25rem;
}

.preview-price[b-g2xxwyov9v] {
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}

.print-preview-footer[b-g2xxwyov9v] {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 0 0 12px 12px;
}

.print-preview-footer .btn-cancel[b-g2xxwyov9v] {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.print-preview-footer .btn-cancel:hover[b-g2xxwyov9v] {
    background: #f9fafb;
    border-color: #9ca3af;
}

.print-preview-footer .btn-confirm[b-g2xxwyov9v] {
    flex: 2;
    padding: 0.75rem 1rem;
    border: none;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.print-preview-footer .btn-confirm:hover:not(:disabled)[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #15803d 0%, #166534 100%);
}

.print-preview-footer .btn-confirm:disabled[b-g2xxwyov9v] {
    opacity: 0.6;
    cursor: not-allowed;
}

.spinner-small[b-g2xxwyov9v] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-g2xxwyov9v 0.8s linear infinite;
}

/* Print Preview Modal - Dark Mode */
:root[data-theme="dark"] .print-preview-header[b-g2xxwyov9v] {
    border-color: #374151;
}

:root[data-theme="dark"] .print-preview-body[b-g2xxwyov9v] {
    background: #1f2937;
}

:root[data-theme="dark"] .print-preview-empty[b-g2xxwyov9v] {
    color: #9ca3af;
}

:root[data-theme="dark"] .print-preview-summary[b-g2xxwyov9v] {
    background: #14532d;
    border-color: #166534;
}

:root[data-theme="dark"] .summary-count[b-g2xxwyov9v] {
    color: #86efac;
}

:root[data-theme="dark"] .summary-total[b-g2xxwyov9v] {
    color: #4ade80;
}

:root[data-theme="dark"] .course-badge[b-g2xxwyov9v] {
    background: #374151;
    color: #9ca3af;
}

:root[data-theme="dark"] .preview-item[b-g2xxwyov9v] {
    background: #111827;
    border-color: #374151;
}

:root[data-theme="dark"] .preview-name[b-g2xxwyov9v] {
    color: #f9fafb;
}

:root[data-theme="dark"] .preview-mods[b-g2xxwyov9v] {
    color: #c4b5fd;
}

:root[data-theme="dark"] .preview-note[b-g2xxwyov9v] {
    background: #451a03;
    color: #fbbf24;
}

:root[data-theme="dark"] .preview-price[b-g2xxwyov9v] {
    color: #d1d5db;
}

:root[data-theme="dark"] .print-preview-footer[b-g2xxwyov9v] {
    background: #111827;
    border-color: #374151;
}

:root[data-theme="dark"] .print-preview-footer .btn-cancel[b-g2xxwyov9v] {
    background: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}

:root[data-theme="dark"] .print-preview-footer .btn-cancel:hover[b-g2xxwyov9v] {
    background: #4b5563;
}

/* ===== COURSE BATCH FEATURE ===== */
.course-batch-wrapper[b-g2xxwyov9v] {
    position: relative;
}

.btn-course-batch[b-g2xxwyov9v] {
    width: 48px;
    min-width: 48px;
    height: 100%;
    padding: 0;
    border: none;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: #fff;
    font-size: 1.25rem;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(255,255,255,0.2);
}

.btn-course-batch:hover:not(:disabled)[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
}

.btn-course-batch:disabled[b-g2xxwyov9v] {
    opacity: 0.5;
    cursor: not-allowed;
}

.spinner-tiny[b-g2xxwyov9v] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-g2xxwyov9v 0.8s linear infinite;
}

.course-batch-menu[b-g2xxwyov9v] {
    position: absolute;
    bottom: 100%;
    left: 0;
    min-width: 160px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    padding: 0.5rem;
    margin-bottom: 8px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.course-batch-title[b-g2xxwyov9v] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    padding: 0.25rem 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.course-batch-menu button[b-g2xxwyov9v] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: none;
    background: #f9fafb;
    text-align: left;
    font-size: 0.95rem;
    font-weight: 500;
    color: #1f2937;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.course-batch-menu button:hover[b-g2xxwyov9v] {
    background: #8b5cf6;
    color: #fff;
}

.course-batch-overlay[b-g2xxwyov9v] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
}

/* Course Batch - Dark Mode */
:root[data-theme="dark"] .course-batch-menu[b-g2xxwyov9v] {
    background: #1f2937;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

:root[data-theme="dark"] .course-batch-title[b-g2xxwyov9v] {
    color: #9ca3af;
}

:root[data-theme="dark"] .course-batch-menu button[b-g2xxwyov9v] {
    background: #374151;
    color: #f9fafb;
}

:root[data-theme="dark"] .course-batch-menu button:hover[b-g2xxwyov9v] {
    background: #8b5cf6;
    color: #fff;
}

/* ========================================
   COMPACT MODE FOR SMALLER/TOUCH SCREENS
   (ELO 1024x768, tablets with scaling)
   ======================================== */

/* Hide keyboard shortcuts on smaller screens (768px height and below) */
@media (max-height: 800px) {
    .shortcut-hint[b-g2xxwyov9v] {
        display: none !important;
    }
}

@media (max-height: 700px) {
    .grid[b-g2xxwyov9v] {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 10px;
        padding: 10px;
    }

    .tile[b-g2xxwyov9v] {
        padding: 10px;
        min-height: 80px;
        gap: 6px;
    }

    .tile-stripe[b-g2xxwyov9v] {
        height: 3px;
        margin-bottom: 3px;
    }

    /* .tile-name handled by its height-aware clamp() base — no per-height cliff. */
    .price[b-g2xxwyov9v] {
        font-size: 0.95rem;
    }
}

/* ========== EATS ORDER BADGE ========== */
.current-ticket.is-eats[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border-left: 3px solid #f7931e;
}

.eats-badge-small[b-g2xxwyov9v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    border-radius: 6px;
    padding: 2px 6px;
    margin-left: 4px;
    animation: eats-glow-b-g2xxwyov9v 2s infinite;
}

@keyframes eats-glow-b-g2xxwyov9v {
    0%, 100% { box-shadow: 0 0 4px rgba(247, 147, 30, 0.4); }
    50% { box-shadow: 0 0 12px rgba(247, 147, 30, 0.8); }
}

/* Dark mode */
html[data-theme="dark"] .current-ticket.is-eats[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #422006 0%, #431407 100%);
    border-left-color: #f97316;
}

/* ========== DELIVERY ORDER BADGE (Glovo, Just Eat, etc.) ========== */
.current-ticket.is-delivery[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 3px solid #f59e0b;
}

.delivery-badge-small[b-g2xxwyov9v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-radius: 6px;
    padding: 2px 6px;
    margin-left: 4px;
    animation: delivery-glow-b-g2xxwyov9v 2s infinite;
}

@keyframes delivery-glow-b-g2xxwyov9v {
    0%, 100% { box-shadow: 0 0 4px rgba(245, 158, 11, 0.4); }
    50% { box-shadow: 0 0 12px rgba(245, 158, 11, 0.8); }
}

/* Dark mode for delivery (no ::deep before html: scoped CSS would look for an <html> inside this page) */
html[data-theme="dark"] .current-ticket.is-delivery[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #451a03 0%, #78350f 100%);
    border-left-color: #f59e0b;
}

/* ========== DELIVERY INFO PANEL (in basket) ========== */
.delivery-info-panel[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #f59e0b;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
}

.delivery-platform-header[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(245, 158, 11, 0.3);
}

.delivery-platform-icon[b-g2xxwyov9v] {
    font-size: 1.2rem;
}

.delivery-platform-name[b-g2xxwyov9v] {
    color: #92400e;
    flex: 1;
}

.delivery-order-id[b-g2xxwyov9v] {
    font-family: 'Consolas', monospace;
    font-size: 0.85rem;
    color: #b45309;
    background: rgba(245, 158, 11, 0.2);
    padding: 2px 8px;
    border-radius: 4px;
}

.delivery-customer-info[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.delivery-field[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    color: #78350f;
}

.delivery-icon[b-g2xxwyov9v] {
    font-size: 1rem;
    width: 24px;
    text-align: center;
}

.delivery-value[b-g2xxwyov9v] {
    flex: 1;
}

.delivery-instructions[b-g2xxwyov9v] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(245, 158, 11, 0.3);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.9rem;
    color: #92400e;
    font-style: italic;
}

.delivery-instructions-text[b-g2xxwyov9v] {
    flex: 1;
    line-height: 1.4;
}

.delivery-address[b-g2xxwyov9v] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(245, 158, 11, 0.2);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.95rem;
    color: #78350f;
}

.delivery-address-content[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.delivery-address-street[b-g2xxwyov9v] {
    font-weight: 500;
}

.delivery-address-detail[b-g2xxwyov9v] {
    font-size: 0.85rem;
    color: #92400e;
}

.delivery-address-city[b-g2xxwyov9v] {
    font-size: 0.85rem;
    color: #a16207;
}

/* Dark mode for delivery info panel */
html[data-theme="dark"] .delivery-info-panel[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #451a03 0%, #78350f 100%);
    border-color: #f59e0b;
}

html[data-theme="dark"] .delivery-platform-name[b-g2xxwyov9v],
html[data-theme="dark"] .delivery-field[b-g2xxwyov9v],
html[data-theme="dark"] .delivery-instructions[b-g2xxwyov9v],
html[data-theme="dark"] .delivery-address[b-g2xxwyov9v] {
    color: #fef3c7;
}

html[data-theme="dark"] .delivery-address-detail[b-g2xxwyov9v],
html[data-theme="dark"] .delivery-address-city[b-g2xxwyov9v] {
    color: #fcd34d;
}

html[data-theme="dark"] .delivery-order-id[b-g2xxwyov9v] {
    background: rgba(245, 158, 11, 0.3);
    color: #fcd34d;
}

/* ========== WAITER CALL NOTIFICATIONS ========== */
.waiter-calls-container[b-g2xxwyov9v] {
    position: fixed;
    top: 70px;
    right: 16px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 320px;
}

.waiter-call-toast[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    padding: 14px 18px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(220, 38, 38, 0.4);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: waiterCallPulse-b-g2xxwyov9v 1s ease-in-out infinite;
    cursor: pointer;
    transition: transform 0.15s;
}

.waiter-call-toast:hover[b-g2xxwyov9v] {
    transform: scale(1.02);
}

.waiter-call-toast .icon[b-g2xxwyov9v] {
    font-size: 1.6rem;
    animation: bellRing-b-g2xxwyov9v 0.5s ease-in-out infinite;
}

.waiter-call-toast .info[b-g2xxwyov9v] {
    flex: 1;
}

.waiter-call-toast .table-name[b-g2xxwyov9v] {
    font-weight: 900;
    font-size: 1.1rem;
}

.waiter-call-toast .zone-name[b-g2xxwyov9v] {
    font-size: 0.85rem;
    opacity: 0.9;
}

.waiter-call-toast .dismiss[b-g2xxwyov9v] {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: 900;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.waiter-call-toast .dismiss:hover[b-g2xxwyov9v] {
    background: rgba(255,255,255,0.35);
}

@keyframes waiterCallPulse-b-g2xxwyov9v {
    0%, 100% { box-shadow: 0 8px 24px rgba(220, 38, 38, 0.4); }
    50% { box-shadow: 0 8px 32px rgba(220, 38, 38, 0.65); }
}

@keyframes bellRing-b-g2xxwyov9v {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(15deg); }
    75% { transform: rotate(-15deg); }
}

/* ========================================
   DELIVERY ORDER NOTIFICATIONS
   ======================================== */
.delivery-notifications-container[b-g2xxwyov9v] {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 320px;
}

.delivery-order-toast[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    padding: 14px 18px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: deliveryPulse-b-g2xxwyov9v 1s ease-in-out infinite;
    cursor: pointer;
    transition: transform 0.15s;
}

.delivery-order-toast:hover[b-g2xxwyov9v] {
    transform: scale(1.02);
}

.delivery-order-toast .icon[b-g2xxwyov9v] {
    font-size: 1.8rem;
    animation: scooterWiggle-b-g2xxwyov9v 0.6s ease-in-out infinite;
}

.delivery-order-toast .info[b-g2xxwyov9v] {
    flex: 1;
}

.delivery-order-toast .platform-name[b-g2xxwyov9v] {
    font-weight: 900;
    font-size: 1.1rem;
    text-transform: uppercase;
}

.delivery-order-toast .customer-name[b-g2xxwyov9v] {
    font-size: 0.9rem;
    opacity: 0.95;
}

.delivery-order-toast .order-total[b-g2xxwyov9v] {
    font-weight: 700;
    font-size: 0.95rem;
    margin-top: 2px;
}

.delivery-order-toast .dismiss[b-g2xxwyov9v] {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: 900;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delivery-order-toast .dismiss:hover[b-g2xxwyov9v] {
    background: rgba(255,255,255,0.35);
}

@keyframes deliveryPulse-b-g2xxwyov9v {
    0%, 100% { box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4); }
    50% { box-shadow: 0 8px 32px rgba(245, 158, 11, 0.65); }
}

@keyframes scooterWiggle-b-g2xxwyov9v {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(3px); }
    75% { transform: translateX(-3px); }
}

/* ========================================
   TIP RECEIVED NOTIFICATIONS
   ======================================== */
.tip-notifications-container[b-g2xxwyov9v] {
    position: fixed;
    top: 230px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 320px;
}

.tip-received-toast[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    padding: 14px 18px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: tipPulse-b-g2xxwyov9v 1.2s ease-in-out infinite;
    cursor: default;
    transition: transform 0.15s;
}

.tip-received-toast:hover[b-g2xxwyov9v] {
    transform: scale(1.02);
}

.tip-received-toast .icon[b-g2xxwyov9v] {
    font-size: 1.6rem;
    animation: tipBounce-b-g2xxwyov9v 0.6s ease-in-out infinite;
}

.tip-received-toast .info[b-g2xxwyov9v] {
    flex: 1;
}

.tip-received-toast .tip-amount[b-g2xxwyov9v] {
    font-weight: 900;
    font-size: 1.15rem;
}

.tip-received-toast .table-name[b-g2xxwyov9v] {
    font-size: 0.9rem;
    opacity: 0.95;
    font-weight: 600;
}

.tip-received-toast .customer-name[b-g2xxwyov9v] {
    font-size: 0.8rem;
    opacity: 0.85;
}

.tip-received-toast .dismiss[b-g2xxwyov9v] {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: 900;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tip-received-toast .dismiss:hover[b-g2xxwyov9v] {
    background: rgba(255,255,255,0.35);
}

@keyframes tipPulse-b-g2xxwyov9v {
    0%, 100% { box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4); }
    50% { box-shadow: 0 8px 32px rgba(16, 185, 129, 0.65); }
}

@keyframes tipBounce-b-g2xxwyov9v {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* ========================================
   ACCESSIBILITY UTILITIES
   ======================================== */
.visually-hidden[b-g2xxwyov9v] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   SCHEDULED PRICING DISPLAY
   ======================================== */
.tile .price.scheduled-price[b-g2xxwyov9v] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.tile .scheduled-price .original-price[b-g2xxwyov9v] {
    text-decoration: line-through;
    color: var(--muted);
    font-size: 0.85rem;
    opacity: 0.7;
}

.tile .scheduled-price .effective-price[b-g2xxwyov9v] {
    font-weight: 700;
    color: #4CAF50;
}

.tile .scheduled-price .price-badge[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* A promotion running now that targets this product ("2x1", "-10 %", the owner's badge). The look of
   the scheduled-price badge above; the owner's own casing is kept. Information only — the price on the
   button is unchanged and the server takes the promotion off the bill. */
.tile .tile-promo-tags[b-g2xxwyov9v] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
}

.tile .tile-promo-tags .promo-tag[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========================================
   MENÚ DEL DÍA SELECTION MODAL
   ======================================== */
.mdd-modal[b-g2xxwyov9v] {
    max-width: 500px;
    max-height: 85vh;
    overflow-y: auto;
}

.mdd-modal-header[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
    margin-bottom: 12px;
}

.mdd-modal-icon[b-g2xxwyov9v] {
    font-size: 1.8rem;
}

.mdd-modal-title[b-g2xxwyov9v] {
    font-size: 1.25rem;
    font-weight: 700;
    flex: 1;
}

.mdd-modal-price[b-g2xxwyov9v] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #4CAF50;
}

.mdd-modal-desc[b-g2xxwyov9v] {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0 0 12px;
}

.mdd-modal-includes[b-g2xxwyov9v] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.mdd-include-tag[b-g2xxwyov9v] {
    background: #e8f5e9;
    color: #2e7d32;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.mdd-courses[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mdd-course[b-g2xxwyov9v] {
    background: #f9f9f9;
    border-radius: 10px;
    padding: 12px;
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
}

.mdd-course.complete[b-g2xxwyov9v] {
    border-color: #4CAF50;
    background: #f1f8e9;
}

.mdd-course-header[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.mdd-course-name[b-g2xxwyov9v] {
    font-weight: 600;
    font-size: 0.95rem;
    flex: 1;
}

.mdd-course-hint[b-g2xxwyov9v] {
    color: var(--muted);
    font-size: 0.8rem;
}

.mdd-course-check[b-g2xxwyov9v] {
    background: #4CAF50;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.mdd-course-items[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mdd-item[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    font-size: 0.9rem;
}

.mdd-item:hover[b-g2xxwyov9v] {
    border-color: #4CAF50;
    background: #fafffe;
}

.mdd-item.selected[b-g2xxwyov9v] {
    border-color: #4CAF50;
    background: #e8f5e9;
}

.mdd-item-check[b-g2xxwyov9v] {
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: transparent;
    flex-shrink: 0;
}

.mdd-item.selected .mdd-item-check[b-g2xxwyov9v] {
    background: #4CAF50;
    border-color: #4CAF50;
    color: white;
}

.mdd-item-name[b-g2xxwyov9v] {
    flex: 1;
}

.mdd-item-supplement[b-g2xxwyov9v] {
    color: #ff9800;
    font-weight: 600;
    font-size: 0.85rem;
}

.mdd-modal-footer[b-g2xxwyov9v] {
    border-top: 1px solid #eee;
    padding-top: 14px;
    margin-top: 14px;
}

.mdd-qty-row[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.mdd-qty-controls[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mdd-qty-btn[b-g2xxwyov9v] {
    width: 32px;
    height: 32px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: white;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.mdd-qty-btn:hover:not(:disabled)[b-g2xxwyov9v] {
    background: #f0f0f0;
}

.mdd-qty-btn:disabled[b-g2xxwyov9v] {
    opacity: 0.4;
    cursor: not-allowed;
}

.mdd-qty-value[b-g2xxwyov9v] {
    font-weight: 700;
    font-size: 1.1rem;
    min-width: 24px;
    text-align: center;
}

.mdd-total-row[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.mdd-total-price[b-g2xxwyov9v] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #4CAF50;
}

.mdd-actions[b-g2xxwyov9v] {
    display: flex;
    gap: 10px;
}

.mdd-actions .btn-cancel[b-g2xxwyov9v] {
    flex: 1;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: white;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.mdd-actions .btn-cancel:hover[b-g2xxwyov9v] {
    background: #f0f0f0;
}

.mdd-actions .btn-confirm[b-g2xxwyov9v] {
    flex: 2;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: #4CAF50;
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.mdd-actions .btn-confirm:hover:not(:disabled)[b-g2xxwyov9v] {
    background: #43A047;
}

.mdd-actions .btn-confirm:disabled[b-g2xxwyov9v] {
    background: #ccc;
    cursor: not-allowed;
}

/* Dark mode for MDD Modal */
html[data-theme="dark"] .mdd-modal[b-g2xxwyov9v] {
    background: #1e293b;
}

html[data-theme="dark"] .mdd-modal-header[b-g2xxwyov9v] {
    border-bottom-color: #334155;
}

html[data-theme="dark"] .mdd-modal-title[b-g2xxwyov9v] {
    color: #f1f5f9;
}

html[data-theme="dark"] .mdd-modal-desc[b-g2xxwyov9v] {
    color: #94a3b8;
}

html[data-theme="dark"] .mdd-include-tag[b-g2xxwyov9v] {
    background: rgba(76, 175, 80, 0.2);
    color: #4ade80;
}

html[data-theme="dark"] .mdd-course[b-g2xxwyov9v] {
    background: #0f172a;
}

html[data-theme="dark"] .mdd-course.complete[b-g2xxwyov9v] {
    background: rgba(76, 175, 80, 0.1);
    border-color: #4CAF50;
}

html[data-theme="dark"] .mdd-course-title[b-g2xxwyov9v] {
    color: #e2e8f0;
}

html[data-theme="dark"] .mdd-course-selection[b-g2xxwyov9v] {
    color: #94a3b8;
}

html[data-theme="dark"] .mdd-items[b-g2xxwyov9v] {
    border-color: #334155;
}

html[data-theme="dark"] .mdd-item[b-g2xxwyov9v] {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

html[data-theme="dark"] .mdd-item:hover[b-g2xxwyov9v] {
    background: #334155;
    border-color: #475569;
}

html[data-theme="dark"] .mdd-item.selected[b-g2xxwyov9v] {
    background: rgba(76, 175, 80, 0.15);
    border-color: #4CAF50;
}

html[data-theme="dark"] .mdd-item-name[b-g2xxwyov9v] {
    color: #e2e8f0;
}

html[data-theme="dark"] .mdd-qty-row[b-g2xxwyov9v],
html[data-theme="dark"] .mdd-total-row[b-g2xxwyov9v] {
    color: #e2e8f0;
}

html[data-theme="dark"] .mdd-qty-btn[b-g2xxwyov9v] {
    background: #334155;
    border-color: #475569;
    color: #e2e8f0;
}

html[data-theme="dark"] .mdd-qty-btn:hover:not(:disabled)[b-g2xxwyov9v] {
    background: #475569;
}

html[data-theme="dark"] .mdd-actions .btn-cancel[b-g2xxwyov9v] {
    background: #334155;
    border-color: #475569;
    color: #e2e8f0;
}

html[data-theme="dark"] .mdd-actions .btn-cancel:hover[b-g2xxwyov9v] {
    background: #475569;
}

html[data-theme="dark"] .mdd-actions .btn-confirm:disabled[b-g2xxwyov9v] {
    background: #475569;
    color: #94a3b8;
}

/* MDD modal — phone */
@media (max-width: 500px) {
    .mdd-modal[b-g2xxwyov9v] {
        padding: 14px;
        max-height: 90vh;
        max-height: 90dvh;
    }

    .mdd-modal-header[b-g2xxwyov9v] {
        gap: 8px;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    .mdd-modal-icon[b-g2xxwyov9v] {
        font-size: 1.4rem;
    }

    .mdd-modal-title[b-g2xxwyov9v] {
        font-size: 1.05rem;
    }

    .mdd-modal-price[b-g2xxwyov9v] {
        font-size: 1.2rem;
    }

    .mdd-item[b-g2xxwyov9v] {
        padding: 10px;
        gap: 8px;
    }

    .mdd-course[b-g2xxwyov9v] {
        padding: 10px;
    }

    .mdd-modal-footer[b-g2xxwyov9v] {
        padding-top: 10px;
        margin-top: 10px;
    }

    .mdd-actions[b-g2xxwyov9v] {
        flex-direction: column;
        gap: 8px;
    }

    .mdd-actions .btn-cancel[b-g2xxwyov9v],
    .mdd-actions .btn-confirm[b-g2xxwyov9v] {
        width: 100%;
        min-height: 48px;
    }
}

/* ========== MENU MANAGEMENT MODAL (POS inline) ========== */

.menu-mgmt-modal[b-g2xxwyov9v] {
    width: 700px;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}

.mgmt-modal-header[b-g2xxwyov9v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}

.mgmt-modal-header h2[b-g2xxwyov9v] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.modal-close-btn[b-g2xxwyov9v] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #666;
    line-height: 1;
    /* 44px touch target for POS hardware (was ~30×32 from padding only). */
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mgmt-tabs[b-g2xxwyov9v] {
    display: flex;
    gap: 4px;
    padding: 12px 20px;
    background: #f5f5f5;
    border-bottom: 1px solid #eee;
}

.mgmt-tab[b-g2xxwyov9v] {
    min-height: 44px;            /* touch target for POS hardware (was ~38px) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    color: #666;
    transition: all 0.15s ease;
}

.mgmt-tab:hover[b-g2xxwyov9v] {
    background: #e8e8e8;
}

.mgmt-tab.active[b-g2xxwyov9v] {
    background: #4CAF50;
    color: white;
}

.mgmt-loading[b-g2xxwyov9v],
.mgmt-error[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: 12px;
    color: #666;
}

.mgmt-content[b-g2xxwyov9v] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.mgmt-search[b-g2xxwyov9v] {
    margin-bottom: 12px;
}

.mgmt-search input[b-g2xxwyov9v] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.9rem;
}

.mgmt-search input:focus[b-g2xxwyov9v] {
    outline: none;
    border-color: #4CAF50;
}

.mgmt-empty[b-g2xxwyov9v] {
    text-align: center;
    padding: 40px;
    color: #666;
}

.mgmt-list[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mgmt-list.scrollable[b-g2xxwyov9v] {
    max-height: 400px;
    overflow-y: auto;
}

.mgmt-item[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: #f9f9f9;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.mgmt-item:hover[b-g2xxwyov9v] {
    background: #f0f0f0;
}

.mgmt-item.inactive[b-g2xxwyov9v] {
    opacity: 0.5;
}

.mgmt-item.unavailable[b-g2xxwyov9v] {
    background: #fff5f5;
}

.mgmt-item.has-active[b-g2xxwyov9v] {
    background: #fff8e1;
}

.mgmt-item-info[b-g2xxwyov9v] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    align-items: flex-start;
}

.mgmt-item-info strong[b-g2xxwyov9v] {
    font-size: 0.95rem;
    text-align: left;
}

.mgmt-item-category[b-g2xxwyov9v] {
    font-size: 0.8rem;
    color: #888;
}

.mgmt-item-price[b-g2xxwyov9v] {
    font-weight: 600;
    color: #4CAF50;
}

.mgmt-item-price.base[b-g2xxwyov9v] {
    font-weight: 400;
    color: #666;
    font-size: 0.85rem;
}

.mgmt-item-schedule[b-g2xxwyov9v] {
    font-size: 0.8rem;
    color: #888;
}

.mgmt-item-schedule.has-schedule[b-g2xxwyov9v] {
    color: #1976D2;
}

.mgmt-item-schedule.always[b-g2xxwyov9v] {
    color: #388E3C;
}

.mgmt-item-status[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mgmt-item-status .status-ok[b-g2xxwyov9v] {
    color: #4CAF50;
    font-weight: 600;
}

.mgmt-item-status .status-no[b-g2xxwyov9v] {
    color: #d32f2f;
    font-weight: 600;
}

.mgmt-item-price-status[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.mgmt-item-price-status .effective-price[b-g2xxwyov9v] {
    font-weight: 700;
    color: #ff9800;
    font-size: 1.1rem;
}

.mgmt-item-price-status .active-rule[b-g2xxwyov9v] {
    font-size: 0.75rem;
    color: #888;
}

.mgmt-item-price-status .current-price[b-g2xxwyov9v] {
    font-weight: 600;
    color: #333;
}

.mgmt-item-actions[b-g2xxwyov9v] {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Toggle Switch */
.toggle-switch[b-g2xxwyov9v] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle-switch input[b-g2xxwyov9v] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-g2xxwyov9v] {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 24px;
}

.toggle-slider[b-g2xxwyov9v]::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider[b-g2xxwyov9v] {
    background-color: #4CAF50;
}

.toggle-switch input:checked + .toggle-slider[b-g2xxwyov9v]::before {
    transform: translateX(20px);
}

/* Small Toggle Switch */
.toggle-switch.small[b-g2xxwyov9v] {
    width: 36px;
    height: 20px;
}

.toggle-switch.small .toggle-slider[b-g2xxwyov9v] {
    border-radius: 20px;
}

.toggle-switch.small .toggle-slider[b-g2xxwyov9v]::before {
    height: 14px;
    width: 14px;
}

.toggle-switch.small input:checked + .toggle-slider[b-g2xxwyov9v]::before {
    transform: translateX(16px);
}

/* Price Rules Item Group */
.mgmt-item-group[b-g2xxwyov9v] {
    background: #fafafa;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid #eee;
    text-align: left;
}

.mgmt-item-group.has-active[b-g2xxwyov9v] {
    background: #fff8e1;
    border-color: #FF9800;
}

.mgmt-item-header[b-g2xxwyov9v] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}

.mgmt-item-header .mgmt-item-info[b-g2xxwyov9v] {
    text-align: left;
    align-items: flex-start;
}

.mgmt-rules-list[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #ddd;
}

.mgmt-rule[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}

.mgmt-rule.inactive[b-g2xxwyov9v] {
    opacity: 0.6;
    background: #f5f5f5;
}

.rule-info[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rule-name[b-g2xxwyov9v] {
    font-weight: 600;
    color: #333;
}

.rule-time[b-g2xxwyov9v] {
    font-size: 0.8rem;
    color: #666;
}

.rule-discount[b-g2xxwyov9v] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #FF9800;
}

.mgmt-no-rules[b-g2xxwyov9v] {
    font-size: 0.85rem;
    color: #999;
    text-align: left;
    padding: 12px 0;
    font-style: italic;
}

.mgmt-item-footer[b-g2xxwyov9v] {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #ddd;
}

/* Schedule Edit Sub-Modal */
.mgmt-sub-modal-overlay[b-g2xxwyov9v] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.mgmt-sub-modal[b-g2xxwyov9v] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    width: 500px;
    max-width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.mgmt-sub-modal h3[b-g2xxwyov9v] {
    margin: 0 0 16px;
    font-size: 1.1rem;
}

.schedule-form[b-g2xxwyov9v] {
    margin-bottom: 16px;
}

.schedule-form .checkbox[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 8px;
}

.schedule-form .hint[b-g2xxwyov9v] {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 16px;
}

.days-config[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.day-row[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: #f5f5f5;
    border-radius: 6px;
}

.day-label[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 100px;
    cursor: pointer;
}

.time-windows[b-g2xxwyov9v] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.time-window[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: white;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.time-window input[type="time"][b-g2xxwyov9v] {
    border: none;
    background: transparent;
    font-size: 0.85rem;
    width: 85px;
}

.preset-buttons[b-g2xxwyov9v] {
    display: flex;
    gap: 8px;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

.preset-label[b-g2xxwyov9v] {
    font-size: 0.85rem;
    color: #666;
}

.sub-modal-actions[b-g2xxwyov9v] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

/* Buttons in mgmt modal */
.mgmt-item-actions .btn[b-g2xxwyov9v],
.mgmt-content .btn[b-g2xxwyov9v],
.mgmt-empty .btn[b-g2xxwyov9v],
.sub-modal-actions .btn[b-g2xxwyov9v] {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    background: #e8e8e8;
    color: #333;
    text-decoration: none;
    transition: background 0.15s ease;
}

.mgmt-item-actions .btn:hover[b-g2xxwyov9v],
.mgmt-content .btn:hover[b-g2xxwyov9v],
.mgmt-empty .btn:hover[b-g2xxwyov9v],
.sub-modal-actions .btn:hover[b-g2xxwyov9v] {
    background: #ddd;
}

.mgmt-item-actions .btn.small[b-g2xxwyov9v] {
    padding: 4px 10px;
    font-size: 0.8rem;
}

.mgmt-item-actions .btn.danger[b-g2xxwyov9v] {
    background: #ffebee;
    color: #d32f2f;
}

.mgmt-item-actions .btn.danger:hover[b-g2xxwyov9v] {
    background: #ffcdd2;
}

.mgmt-empty .btn.primary[b-g2xxwyov9v],
.sub-modal-actions .btn.primary[b-g2xxwyov9v] {
    background: #4CAF50;
    color: white;
}

.mgmt-empty .btn.primary:hover[b-g2xxwyov9v],
.sub-modal-actions .btn.primary:hover[b-g2xxwyov9v] {
    background: #43A047;
}

/* Menú del Día inline creation - uses dark theme to match POS */
.mdd-pin-section[b-g2xxwyov9v] {
    background: #1e1e1e;
    padding: 16px;
    border-radius: 8px;
    margin-top: 12px;
}

.mdd-pin-label[b-g2xxwyov9v] {
    margin: 0 0 10px;
    font-weight: 500;
    font-size: 0.95rem;
    color: #e0e0e0;
}

.mdd-pin-input-row[b-g2xxwyov9v] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.mdd-pin-input[b-g2xxwyov9v] {
    flex: 0 0 100px;
    padding: 8px 12px;
    border: 1px solid #3d3d3d;
    border-radius: 6px;
    font-size: 1rem;
    text-align: center;
    letter-spacing: 2px;
    background: #2d2d2d;
    color: #e0e0e0;
}

.mdd-pin-input:focus[b-g2xxwyov9v] {
    outline: none;
    border-color: #4CAF50;
}

.mdd-error[b-g2xxwyov9v] {
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(211, 47, 47, 0.2);
    color: #ef5350;
    border-radius: 6px;
    font-size: 0.85rem;
}

.mdd-success[b-g2xxwyov9v] {
    margin-bottom: 12px;
    padding: 10px 14px;
    background: rgba(76, 175, 80, 0.2);
    color: #4CAF50;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    animation: fadeIn-b-g2xxwyov9v 0.3s ease;
}

@keyframes fadeIn-b-g2xxwyov9v {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.mdd-create-form[b-g2xxwyov9v] {
    background: #1e1e1e;
    padding: 16px;
    border-radius: 8px;
    margin-top: 12px;
}

.mdd-create-form h4[b-g2xxwyov9v] {
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 600;
    color: #e0e0e0;
}

.mdd-form-row[b-g2xxwyov9v] {
    margin-bottom: 12px;
}

.mdd-form-row label[b-g2xxwyov9v] {
    display: block;
    font-size: 0.85rem;
    color: #9e9e9e;
    margin-bottom: 4px;
}

.mdd-form-row input[type="text"][b-g2xxwyov9v],
.mdd-form-row input[type="number"][b-g2xxwyov9v] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #3d3d3d;
    border-radius: 6px;
    font-size: 0.95rem;
    background: #2d2d2d;
    color: #e0e0e0;
}

.mdd-form-row input:focus[b-g2xxwyov9v] {
    outline: none;
    border-color: #4CAF50;
}

.mdd-form-row.checkboxes[b-g2xxwyov9v] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.checkbox-inline[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #e0e0e0;
}

.checkbox-inline input[b-g2xxwyov9v] {
    width: auto;
    margin: 0;
}

.mdd-form-actions[b-g2xxwyov9v] {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.mdd-form-hint[b-g2xxwyov9v] {
    margin: 12px 0 0;
    font-size: 0.8rem;
    color: #757575;
}

.mdd-create-btn-row[b-g2xxwyov9v] {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #3d3d3d;
}

/* Note: MDD inline creation uses dark base colors to match POS dark theme */

/* Dark mode for menu mgmt modal */
:root[data-theme="dark"] .menu-mgmt-modal[b-g2xxwyov9v],
[data-theme="dark"] .menu-mgmt-modal[b-g2xxwyov9v] {
    background: #2d2d2d;
    color: #e0e0e0;
}

:root[data-theme="dark"] .mgmt-modal-header[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-modal-header[b-g2xxwyov9v] {
    border-bottom-color: #3d3d3d;
}

:root[data-theme="dark"] .mgmt-tabs[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-tabs[b-g2xxwyov9v] {
    background: #1e1e1e;
    border-bottom-color: #3d3d3d;
}

:root[data-theme="dark"] .mgmt-tab[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-tab[b-g2xxwyov9v] {
    color: #9e9e9e;
}

:root[data-theme="dark"] .mgmt-tab:hover[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-tab:hover[b-g2xxwyov9v] {
    background: #3d3d3d;
}

:root[data-theme="dark"] .mgmt-search input[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-search input[b-g2xxwyov9v] {
    background: #1e1e1e;
    border-color: #3d3d3d;
    color: #e0e0e0;
}

:root[data-theme="dark"] .mgmt-item[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-item[b-g2xxwyov9v] {
    background: #1e1e1e;
}

:root[data-theme="dark"] .mgmt-item:hover[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-item:hover[b-g2xxwyov9v] {
    background: #2a2a2a;
}

:root[data-theme="dark"] .mgmt-item.unavailable[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-item.unavailable[b-g2xxwyov9v] {
    background: rgba(211, 47, 47, 0.1);
}

:root[data-theme="dark"] .mgmt-item.has-active[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-item.has-active[b-g2xxwyov9v] {
    background: rgba(255, 152, 0, 0.15);
}

:root[data-theme="dark"] .mgmt-item-group[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-item-group[b-g2xxwyov9v] {
    background: #1e1e1e;
    border-color: #3d3d3d;
}

:root[data-theme="dark"] .mgmt-item-group.has-active[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-item-group.has-active[b-g2xxwyov9v] {
    background: rgba(255, 152, 0, 0.15);
    border-color: #FF9800;
}

:root[data-theme="dark"] .mgmt-rules-list[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-rules-list[b-g2xxwyov9v] {
    border-top-color: #3d3d3d;
}

:root[data-theme="dark"] .mgmt-rule[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-rule[b-g2xxwyov9v] {
    background: #2d2d2d;
    border-color: #3d3d3d;
}

:root[data-theme="dark"] .mgmt-rule.inactive[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-rule.inactive[b-g2xxwyov9v] {
    background: #1e1e1e;
}

:root[data-theme="dark"] .rule-name[b-g2xxwyov9v],
[data-theme="dark"] .rule-name[b-g2xxwyov9v] {
    color: #e0e0e0;
}

:root[data-theme="dark"] .rule-time[b-g2xxwyov9v],
[data-theme="dark"] .rule-time[b-g2xxwyov9v] {
    color: #9e9e9e;
}

:root[data-theme="dark"] .mgmt-no-rules[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-no-rules[b-g2xxwyov9v] {
    color: #757575;
}

:root[data-theme="dark"] .mgmt-item-footer[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-item-footer[b-g2xxwyov9v] {
    border-top-color: #3d3d3d;
}

:root[data-theme="dark"] .mgmt-item-category[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-item-category[b-g2xxwyov9v] {
    color: #757575;
}

:root[data-theme="dark"] .mgmt-item-schedule[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-item-schedule[b-g2xxwyov9v] {
    color: #9e9e9e;
}

:root[data-theme="dark"] .mgmt-item-price-status .current-price[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-item-price-status .current-price[b-g2xxwyov9v] {
    color: #e0e0e0;
}

:root[data-theme="dark"] .mgmt-sub-modal[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-sub-modal[b-g2xxwyov9v] {
    background: #2d2d2d;
    color: #e0e0e0;
}

:root[data-theme="dark"] .day-row[b-g2xxwyov9v],
[data-theme="dark"] .day-row[b-g2xxwyov9v] {
    background: #1e1e1e;
}

:root[data-theme="dark"] .time-window[b-g2xxwyov9v],
[data-theme="dark"] .time-window[b-g2xxwyov9v] {
    background: #2d2d2d;
    border-color: #3d3d3d;
}

:root[data-theme="dark"] .time-window input[type="time"][b-g2xxwyov9v],
[data-theme="dark"] .time-window input[type="time"][b-g2xxwyov9v] {
    color: #e0e0e0;
}

:root[data-theme="dark"] .schedule-form .hint[b-g2xxwyov9v],
[data-theme="dark"] .schedule-form .hint[b-g2xxwyov9v] {
    color: #9e9e9e;
}

:root[data-theme="dark"] .preset-buttons[b-g2xxwyov9v],
[data-theme="dark"] .preset-buttons[b-g2xxwyov9v] {
    border-top-color: #3d3d3d;
}

:root[data-theme="dark"] .sub-modal-actions[b-g2xxwyov9v],
[data-theme="dark"] .sub-modal-actions[b-g2xxwyov9v] {
    border-top-color: #3d3d3d;
}

:root[data-theme="dark"] .mgmt-item-actions .btn[b-g2xxwyov9v],
:root[data-theme="dark"] .mgmt-content .btn[b-g2xxwyov9v],
:root[data-theme="dark"] .sub-modal-actions .btn[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-item-actions .btn[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-content .btn[b-g2xxwyov9v],
[data-theme="dark"] .sub-modal-actions .btn[b-g2xxwyov9v] {
    background: #3d3d3d;
    color: #e0e0e0;
}

:root[data-theme="dark"] .mgmt-item-actions .btn:hover[b-g2xxwyov9v],
:root[data-theme="dark"] .mgmt-content .btn:hover[b-g2xxwyov9v],
:root[data-theme="dark"] .sub-modal-actions .btn:hover[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-item-actions .btn:hover[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-content .btn:hover[b-g2xxwyov9v],
[data-theme="dark"] .sub-modal-actions .btn:hover[b-g2xxwyov9v] {
    background: #4d4d4d;
}

:root[data-theme="dark"] .mgmt-item-actions .btn.danger[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-item-actions .btn.danger[b-g2xxwyov9v] {
    background: rgba(211, 47, 47, 0.2);
    color: #ef5350;
}

:root[data-theme="dark"] .mgmt-tab.active[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-tab.active[b-g2xxwyov9v] {
    background: #4CAF50;
    color: white;
}

:root[data-theme="dark"] .mgmt-empty[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-empty[b-g2xxwyov9v] {
    color: #9e9e9e;
}

:root[data-theme="dark"] .mgmt-loading[b-g2xxwyov9v],
:root[data-theme="dark"] .mgmt-error[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-loading[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-error[b-g2xxwyov9v] {
    color: #9e9e9e;
}

/* Menu-mgmt modal — phone */
@media (max-width: 500px) {
    .menu-mgmt-modal[b-g2xxwyov9v] {
        width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        max-height: 100dvh;
        max-height: calc(100dvh - var(--pwa-banner-h, 0px));
        height: 100vh;
        height: 100dvh;
        height: calc(100dvh - var(--pwa-banner-h, 0px));
        border-radius: 0;
        padding: 0;
    }

    .mgmt-modal-header[b-g2xxwyov9v] {
        padding: 12px 16px;
    }

    .mgmt-modal-header h2[b-g2xxwyov9v] {
        font-size: 1.05rem;
    }

    .mgmt-tabs[b-g2xxwyov9v] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 10px 12px;
        gap: 4px;
        flex-wrap: nowrap;
    }

    .mgmt-tab[b-g2xxwyov9v] {
        flex-shrink: 0;
        padding: 8px 12px;
        font-size: 0.85rem;
        min-height: 44px;        /* touch target on mobile (was 40px) */
    }

    .mgmt-content[b-g2xxwyov9v] {
        padding: 12px;
    }

    .mgmt-item[b-g2xxwyov9v] {
        padding: 10px 12px;
        gap: 10px;
    }

    .mgmt-list.scrollable[b-g2xxwyov9v] {
        max-height: none;
    }

    .mgmt-sub-modal-overlay .mgmt-sub-modal[b-g2xxwyov9v] {
        width: 95vw;
        max-height: 85dvh;
    }
}

/* ---- Merged table chips ---- */
.merged-chip[b-g2xxwyov9v] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #dbeafe;
    color: #1d4ed8;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}

.merged-chip .chip-remove[b-g2xxwyov9v] {
    background: none;
    border: none;
    color: #1d4ed8;
    font-size: 1rem;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    opacity: 0.7;
}

.merged-chip .chip-remove:hover[b-g2xxwyov9v] {
    opacity: 1;
    color: #dc2626;
}

html[data-theme="dark"] .merged-chip[b-g2xxwyov9v] {
    background: #1e3a5f;
    color: #93c5fd;
}

html[data-theme="dark"] .merged-chip .chip-remove[b-g2xxwyov9v] {
    color: #93c5fd;
}

/* ========================================
   PHONE LAYOUT (≤ 600px width)
   Stack everything vertically, compact all UI
   ======================================== */
@media (max-width: 600px) {
    /* Force single-column layout even in basket-full mode */
    .pos-shell.basket-full[b-g2xxwyov9v] {
        display: flex;
        flex-direction: column;
        grid-template-columns: unset;
    }

    /* Left section takes remaining space, internal scroll chain intact.
       z-index:2 (vs the summary's 1 below) lifts this flex column — and the
       ⚙️ settings bottom-sheet that lives inside its .topbar — ABOVE the
       summary. Without it the summary (a later flex sibling) painted over the
       fixed sheet (the "config goes under the basket" bug). They don't overlap
       in normal flow, so this only affects the fixed sheet's paint order. */
    .left-section[b-g2xxwyov9v] {
        flex: 1 1 0%;
        min-height: 0;
        overflow: hidden;
        position: relative;
        z-index: 2;
    }

    /* Summary: fixed bottom panel with limited height */
    .pos-shell.basket-full > .summary[b-g2xxwyov9v],
    .summary.summary-full[b-g2xxwyov9v] {
        border-left: none;
        border-top: 3px solid #e5e7eb;
        box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
        max-height: 40vh;
        flex-shrink: 0;
        position: relative;
        z-index: 1;
    }

    /* Empty basket doesn't need 40vh — it's just "+ Crear" + an empty hint. Cap
       it lower so the product grid stays visible instead of a tall empty basket
       hogging the screen (operator couldn't see the items to tap). Higher
       specificity than the 40vh rule above, so it wins. */
    .pos-shell.basket-full > .summary.empty-basket[b-g2xxwyov9v],
    .summary.summary-full.empty-basket[b-g2xxwyov9v] {
        max-height: 28vh;
    }

    .summary.has-new[b-g2xxwyov9v] {
        border-left-color: transparent;
        border-top-color: #f59e0b;
    }
    .summary.all-sent[b-g2xxwyov9v] {
        border-left-color: transparent;
        border-top-color: #10b981;
    }

    /* Dark mode: override left-border/shadow with top-border/shadow on phone */
    html[data-theme="dark"] .pos-shell.basket-full > .summary[b-g2xxwyov9v],
    html[data-theme="dark"] .summary.summary-full[b-g2xxwyov9v] {
        border-left-color: transparent;
        border-top-color: #374151;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
    }

    /* Compact topbar — left padding makes room for the fixed hamburger
       (44px wide at left:12px → ends at x=56). 62px clears it with a buffer so
       the printer status chip no longer tucks under the hamburger. */
    .topbar[b-g2xxwyov9v] {
        padding: 6px 10px 6px 76px;
        gap: 6px;
    }

    .topbar .title[b-g2xxwyov9v] {
        font-size: 0.8rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 80px;
    }

    .topbar .muted[b-g2xxwyov9v] {
        display: none;
    }

    .pos-shell.basket-full .topbar .btn[b-g2xxwyov9v],
    .topbar .btn[b-g2xxwyov9v] {
        padding: 4px 8px;
        font-size: 0.75rem;
        min-height: 32px;
        border-radius: 8px;
    }

    /* Sistema dropdown compact */
    .sistema-dropdown .btn[b-g2xxwyov9v] {
        padding: 4px 8px;
        font-size: 0.75rem;
    }

    /* Actions row on phones: ONE non-wrapping line. The base grid
       (minmax(140px,1fr)) wraps to 3 rows on a phone — instead lay the row
       out as a horizontal flex strip of icon-only buttons + the search box.
       Labels are hidden (.action-btn-label) leaving just the emoji, and the
       Stock quick-button is dropped here (it moves into the ⚙️ menu), so the
       remaining four icons + buscar fit without wrapping. Overflow scrolls. */
    .actions[b-g2xxwyov9v],
    .main-content-grid .actions[b-g2xxwyov9v] {
        display: flex;
        grid-template-columns: none;
        flex-wrap: nowrap;
        align-items: center;
        padding: 6px 8px;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .actions[b-g2xxwyov9v]::-webkit-scrollbar { display: none; }

    .actions .btn[b-g2xxwyov9v] {
        padding: 8px 10px;
        font-size: 1rem;          /* keep the emoji legible at icon-only size */
        min-height: 42px;
        border-radius: 10px;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* Icon-only: keep the leading emoji, hide the text label */
    .actions .action-btn-label[b-g2xxwyov9v] {
        display: none;
    }

    /* Stock quick-panel is offered in the ⚙️ menu on phones (see .sistema-stock) */
    .actions .action-stock[b-g2xxwyov9v] {
        display: none;
    }

    /* Search fills whatever width is left on the row */
    .action-search[b-g2xxwyov9v] {
        flex: 1 1 auto;
        min-width: 90px;
        max-width: none;
        padding: 6px 10px;
        border-radius: 10px;
    }

    .action-search-input[b-g2xxwyov9v] {
        font-size: 0.8rem;
    }

    /* Compact filters */
    .filters[b-g2xxwyov9v],
    .main-content-grid .filters[b-g2xxwyov9v] {
        padding: 4px 8px;
        gap: 4px;
    }

    /* Category switching is a primary, high-frequency tap during service.
       The chipbar already scrolls horizontally, so width is free — keep the
       target ~40px, not the 26px a 4px/0.75rem chip collapses to (matches
       the established "no sub-44px tap targets" POS direction). */
    .chip[b-g2xxwyov9v] {
        padding: 8px 14px;
        font-size: 0.85rem;
        border-radius: 8px;
    }

    /* Hide recent section on phone */
    .recent-section[b-g2xxwyov9v] {
        display: none;
    }

    /* Product grid: 2 columns, compact */
    .grid[b-g2xxwyov9v] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px;
        padding: 6px;
    }

    .tile[b-g2xxwyov9v] {
        padding: 8px;
        border-radius: 8px;
    }

    .tile-name[b-g2xxwyov9v] {
        font-size: 0.75rem;
    }

    .tile .price[b-g2xxwyov9v] {
        font-size: 0.8rem;
    }

    /* Compact payment bar — horizontal, short buttons. Sticky to the bottom of
       the scrolling left-column so it reads as "pay this ticket" and stops
       floating mid-screen above the products as you scroll. (Branch A already
       hides it entirely when the ticket is empty via .payment-bar-empty.) */
    .payment-bar[b-g2xxwyov9v] {
        padding: 6px 8px;
        gap: 4px;
        align-items: center;
        flex-grow: 0;
        position: sticky;
        bottom: 0;
        z-index: 5;
        background: var(--card, #0f172a);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.18);
    }

    .pay[b-g2xxwyov9v] {
        padding: 10px 4px;
        font-size: 0.7rem;
        min-height: 36px;
        max-height: 48px;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    }

    .pay .shortcut-hint[b-g2xxwyov9v] {
        display: none;
    }

    /* Hide payment icon emoji on very narrow screens */
    .pay .pay-icon[b-g2xxwyov9v] {
        font-size: 0.85rem;
    }

    /* Compact ticket bar */
    .ticket-bar[b-g2xxwyov9v] {
        padding: 4px 8px;
    }

    .current-ticket[b-g2xxwyov9v] {
        padding: 4px 8px;
        gap: 6px;
    }

    .ticket-number[b-g2xxwyov9v] {
        font-size: 0.9rem;
        padding: 2px 6px;
    }

    .ticket-total-display[b-g2xxwyov9v] {
        font-size: 0.95rem;
    }

    .ticket-subtitle[b-g2xxwyov9v] {
        font-size: 0.55rem;
    }

    /* Basket content compact */
    .basket-content[b-g2xxwyov9v] {
        padding: 0 8px;
    }

    .line[b-g2xxwyov9v] {
        padding: 6px 0;
        min-height: 40px;
    }

    .line-total[b-g2xxwyov9v] {
        min-width: 60px;
        font-size: 0.85rem;
    }

    /* Kitchen button compact */
    .btn-kitchen[b-g2xxwyov9v] {
        padding: 10px;
        font-size: 0.85rem;
    }

    /* Workspace compact padding */
    .workspace[b-g2xxwyov9v],
    .main-content-grid .workspace[b-g2xxwyov9v] {
        padding: 4px 6px;
    }

    /* Ensure products panel still scrolls on phone */
    .products-panel[b-g2xxwyov9v] {
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
    }

    /* Line actions: tighter on phone */
    .line-actions[b-g2xxwyov9v] {
        gap: 10px;
    }

    .line-actions .qty[b-g2xxwyov9v] {
        gap: 8px;
    }

    /* Ticket action buttons compact */
    .ticket-action-btn[b-g2xxwyov9v] {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    /* Show the mobile-only Mesas button (opens the floor overlay). On desktop
       the tablesbar handles this; on phones that bar is hidden, so this is the
       only table-access entry point.
       NOTE: this MUST out-specify the base `.btn-mesas-mobile{display:none}`
       below. They have equal specificity and the base rule comes later in
       source, so a bare `.btn-mesas-mobile` here would LOSE the cascade and
       the button would stay hidden on phones (the long-standing bug that left
       phones with no tables entry point). Scoping to `.topbar` (0,2,0) wins. */
    .topbar .btn-mesas-mobile[b-g2xxwyov9v],
    .topbar .btn-list-mobile[b-g2xxwyov9v] {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
    /* Icon-only on phones so 📅 🪑 📋 ⚙️ all fit the topbar without wrapping. */
    .btn-mesas-mobile-label[b-g2xxwyov9v],
    .btn-list-mobile-label[b-g2xxwyov9v] {
        display: none;
    }
}

/* Mobile-only Mesas/Lista buttons are hidden on desktop/tablet (the tablesbar
   covers table access there via hover). Shown only inside the ≤600px block. */
.btn-mesas-mobile[b-g2xxwyov9v],
.btn-list-mobile[b-g2xxwyov9v] {
    display: none;
}

/* Visible edge tab (right screen edge) that opens the table-list panel on a
   tap — touch has no hover to reveal the off-canvas panel, and the old edge
   pill was invisible. Desktop hides it (the panel reveals on hover there). */
.tables-edge-tab[b-g2xxwyov9v] {
    display: none;
}
@media (max-width: 600px) {
    .tables-edge-tab[b-g2xxwyov9v] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        position: fixed;
        right: 0;
        top: 46%;
        transform: translateY(-50%);
        z-index: 40;                 /* below the panel (z-index 46): covered when the panel is open */
        padding: 12px 7px 12px 9px;
        border: none;
        border-radius: 14px 0 0 14px;
        background: var(--brand, #c62828);
        color: #fff;
        box-shadow: -6px 0 18px rgba(0, 0, 0, .35);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .tables-edge-tab__chev[b-g2xxwyov9v] { font-size: 1rem; font-weight: 900; line-height: 1; opacity: .9; }
    .tables-edge-tab__icon[b-g2xxwyov9v] { font-size: 1.25rem; line-height: 1; }
    .tables-edge-tab:active[b-g2xxwyov9v] { filter: brightness(1.1); }
}

/* Floor plan overlay — slide down from top */
.tables-overlay[b-g2xxwyov9v] {
    position: fixed;
    inset: 0;
    z-index: 10002;
    background: #f5f6f8;
    animation: tables-slide-down-b-g2xxwyov9v 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes tables-slide-down-b-g2xxwyov9v {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Compact layout for small/4:3 screens (1024x768 touch monitors) ===== */
@media (max-width: 1100px) {
    /* Widen left column to give catalog more space */
    .pos-shell.basket-full[b-g2xxwyov9v] {
        grid-template-columns: 58% 42%;
    }

    .pos-shell.basket-full .topbar[b-g2xxwyov9v] {
        gap: 6px;
        /* padding-left clears the fixed hamburger. This rule (0,3,0) out-specifies
           the plain `.topbar` mobile rule, so the clearance MUST live here too —
           a bare `padding: 6px 8px` reset the left to 8px and tucked the printer
           chip under the hamburger (the long-standing "printer under sandwich" bug). */
        padding: 6px 8px 6px 76px;
    }

    .pos-shell.basket-full .topbar .title[b-g2xxwyov9v] {
        max-width: 100px;
        font-size: 0.85rem;
    }

    /* Compact topbar buttons */
    .pos-shell.basket-full .topbar .btn[b-g2xxwyov9v] {
        padding: 4px 8px;
        font-size: 0.8rem;
    }

    /* Reduce tile grid min size for narrower catalog */
    .grid[b-g2xxwyov9v] {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
        gap: 6px !important;
    }

    /* Compact order lines */
    .line[b-g2xxwyov9v] {
        column-gap: 6px;
        row-gap: 4px;
        padding: 6px 0;
        min-height: 44px;
    }

    .line .name[b-g2xxwyov9v] {
        column-gap: 4px;
    }

    .line .name .name-text[b-g2xxwyov9v] {
        font-size: 0.85rem;
    }

    .line-actions[b-g2xxwyov9v] {
        gap: 6px;
    }

    .line-actions .qty[b-g2xxwyov9v] {
        gap: 4px;
    }

    .line-actions .qty button[b-g2xxwyov9v],
    .line-actions .more[b-g2xxwyov9v],
    .line-actions .trash[b-g2xxwyov9v] {
        min-width: 34px;
        min-height: 34px;
        width: 34px;
        height: 34px;
    }

    .line-total[b-g2xxwyov9v] {
        min-width: 56px;
        font-size: 0.85rem;
        margin-right: 2px;
    }

    /* Compact summary/basket area */
    .summary[b-g2xxwyov9v] {
        font-size: 0.9rem;
    }

    .summary .lines[b-g2xxwyov9v] {
        padding: 0 6px;
    }

    /* Compact bottom payment bar */
    .payment-bar[b-g2xxwyov9v],
    .summary .actions[b-g2xxwyov9v] {
        gap: 4px;
        padding: 6px;
    }

    .payment-bar .btn[b-g2xxwyov9v],
    .summary .actions .btn[b-g2xxwyov9v] {
        padding: 8px 10px;
        font-size: 0.85rem;
    }

    /* Compact ticket bar */
    .ticket-bar[b-g2xxwyov9v] {
        padding: 4px 8px;
        gap: 6px;
    }

    /* Compact category tabs */
    .tabs[b-g2xxwyov9v] {
        gap: 4px;
        padding: 4px 8px;
    }

    .tabs .tab[b-g2xxwyov9v] {
        padding: 4px 10px;
        font-size: 0.8rem;
    }

    /* Tighter kitchen button group when space is limited */
    .kitchen-btn-group[b-g2xxwyov9v] {
        margin: 4px;
    }

    .kitchen-btn-group .btn-kitchen[b-g2xxwyov9v] {
        padding: 8px 6px;
        font-size: 0.8rem;
    }

    /* Hide "· Nuevos: X.XX €" to keep button single-line */
    .btn-kitchen-total[b-g2xxwyov9v] {
        display: none;
    }

    .kitchen-btn-group .btn-preview[b-g2xxwyov9v],
    .kitchen-btn-group .btn-course-batch[b-g2xxwyov9v] {
        width: 36px;
        min-width: 36px;
    }
}

/* ===== Compact for screens ≤ 800px — topbar, ticket, timer, payment ===== */
@media (max-width: 800px) {
    /* Sistema button: prevent icon wrapping above text */
    .sistema-dropdown .btn[b-g2xxwyov9v] {
        white-space: nowrap;
        padding: 4px 6px !important;
        font-size: 0.75rem !important;
    }

    /* Topbar: tighter gaps */
    .topbar[b-g2xxwyov9v] {
        gap: 6px;
        padding: 6px 8px;
    }

    /* Ticket number: ensure background covers all digits */
    .ticket-number[b-g2xxwyov9v] {
        font-size: 1.1rem;
        padding: 3px 8px;
        min-width: fit-content;
        white-space: nowrap;
    }

    /* Timer badge: compact so it doesn't wrap */
    .time-in-table[b-g2xxwyov9v] {
        font-size: 0.75rem;
        padding: 4px 8px;
        gap: 4px;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .time-in-table[b-g2xxwyov9v]::before {
        font-size: 0.85rem;
    }

    .time-in-table .time-value[b-g2xxwyov9v] {
        font-size: 0.8rem;
    }

    .time-in-table .time-status[b-g2xxwyov9v] {
        font-size: 0.7rem;
    }

    /* Payment buttons: ensure equal sizing and no missing backgrounds */
    .payment-bar[b-g2xxwyov9v] {
        gap: 4px;
        padding: 6px 8px;
    }

    .pay[b-g2xxwyov9v] {
        padding: 10px 4px;
        font-size: 0.8rem;
        min-height: 44px;
        border-radius: 10px;
    }

    .pay .shortcut-hint[b-g2xxwyov9v] {
        display: none;
    }
}

/* ===== Very narrow screens — shrink tiles so they don't dominate ===== */
@media (max-width: 600px) {
    .tile-stripe[b-g2xxwyov9v] {
        height: 3px;
        margin-bottom: 2px;
    }

    .tile[b-g2xxwyov9v] {
        min-height: 60px;
        padding: 8px;
        gap: 4px;
    }

    /* Keep the product name dominant on phone too (established POS visual
       direction). 0.85rem ≈ 13.6px is undersized for arm's-length service;
       0.95rem still clamps to 2 lines via the existing -webkit-line-clamp. */
    .tile-name[b-g2xxwyov9v] {
        font-size: 0.95rem;
    }

    .tile .price[b-g2xxwyov9v] {
        font-size: 0.8rem;
    }

    .grid[b-g2xxwyov9v] {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
        gap: 4px !important;
    }

    /* --- Tap-target & overflow restorations ---
       These selectors are also redefined in the earlier @media (max-width:
       1100px)/(800px) blocks, which (equal specificity, later in source than
       the first ≤600 block) otherwise win at phone width and shrink primary
       interactions below the 44px the base rules deliberately set. This
       block is the last phone block in source order, so it reinstates them. */

    /* Basket qty +/- , more, trash — the most frequent in-service taps.
       The ≤1100 block forces these to 34×34; restore the base 44px. */
    .line-actions .qty button[b-g2xxwyov9v],
    .line-actions .more[b-g2xxwyov9v],
    .line-actions .trash[b-g2xxwyov9v] {
        min-width: 44px;
        min-height: 44px;
        width: auto;
        height: auto;
    }

    /* Primary commit action of the screen — never below 48px. */
    .kitchen-btn-group .btn-kitchen[b-g2xxwyov9v],
    .btn-kitchen[b-g2xxwyov9v] {
        min-height: 48px;
    }

    /* Long product/modifier names must truncate, not push the basket row
       past the panel (base rule is white-space:nowrap;overflow:visible). */
    .line .name .name-text[b-g2xxwyov9v] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Menu-del-Día qty steppers (32px base) and ticket action buttons
       (explicitly 32px in the first ≤600 block) → 44px. */
    .mdd-qty-btn[b-g2xxwyov9v] {
        min-width: 44px;
        min-height: 44px;
    }
    .ticket-action-btn[b-g2xxwyov9v] {
        width: 44px;
        height: 44px;
    }
}

/* Counter orders bar */
.counter-orders-bar[b-g2xxwyov9v] {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 8px 16px;
}
.counter-orders-header[b-g2xxwyov9v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 13px;
}
.counter-orders-header .close-btn[b-g2xxwyov9v] {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: #94a3b8;
    padding: 2px 6px;
}
.counter-orders-chips[b-g2xxwyov9v] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.counter-chip[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 80px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
}
.counter-chip:hover[b-g2xxwyov9v] { border-color: var(--brand); }
.counter-chip.active[b-g2xxwyov9v] {
    border-color: var(--brand);
    background: #fef2f2;
    font-weight: 700;
}
.counter-chip.paid[b-g2xxwyov9v] {
    border-color: #10b981;
    background: #ecfdf5;
}
/* Ready for pickup — pulsing green halo so the operator spots the chip
   at a glance when "Laura" is done. Starbucks / coffee-shop convention:
   the order is ready to hand off. Uses a before-pseudo pulse ring to
   avoid interfering with the chip's own border. */
.counter-chip.ready[b-g2xxwyov9v] {
    border-color: #16a34a;
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    animation: counterChipReadyPulse-b-g2xxwyov9v 1.6s ease-in-out infinite;
}
.counter-chip .chip-ready-dot[b-g2xxwyov9v] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.25);
    flex-shrink: 0;
}
@keyframes counterChipReadyPulse-b-g2xxwyov9v {
    0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.35); }
    50%      { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
}
.counter-chip .chip-label[b-g2xxwyov9v] { font-weight: 700; font-size: 14px; }
.counter-chip .chip-display-no[b-g2xxwyov9v] { color: #94a3b8; font-size: 11px; font-weight: 500; }
.counter-chip .chip-total[b-g2xxwyov9v] { color: #64748b; font-size: 12px; }
.counter-chip .chip-badge[b-g2xxwyov9v] {
    font-size: 10px;
    font-weight: 800;
    color: #10b981;
    text-transform: uppercase;
}
.counter-chip .chip-badge.ready-badge[b-g2xxwyov9v] {
    color: #15803d;
    font-weight: 900;
}
/* Fulfillment pill so staff never mistake a kiosk eat-in order for takeaway.
   Dine-in is amber (stands out = "do NOT bag this"); takeaway is calm blue. */
.counter-chip .chip-fulfillment[b-g2xxwyov9v] {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 1px 7px;
    border-radius: 999px;
    white-space: nowrap;
}
.counter-chip .chip-fulfillment.dine-in[b-g2xxwyov9v] { background: #fef3c7; color: #92400e; }
.counter-chip .chip-fulfillment.takeaway[b-g2xxwyov9v] { background: #e0f2fe; color: #075985; }
.counter-chip .chip-items[b-g2xxwyov9v] {
    background: #e2e8f0;
    border-radius: 999px;
    font-size: 11px;
    padding: 0 6px;
    font-weight: 700;
}
.counter-label-active[b-g2xxwyov9v] {
    background: var(--brand) !important;
    color: #fff !important;
    opacity: 1 !important;
    font-weight: 700;
}

/* Trial warning notice */
.pos-trial-notice[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6px 12px;
    background: rgba(245, 158, 11, 0.08);
    border-bottom: 1px solid rgba(245, 158, 11, 0.12);
    font-size: 0.75rem;
    color: #fbbf24;
    min-height: 30px;
}

.pos-trial-notice.urgent[b-g2xxwyov9v] {
    background: rgba(239, 68, 68, 0.08);
    border-bottom-color: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}

.pos-trial-dismiss[b-g2xxwyov9v] {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 0.75rem;
    opacity: 0.6;
    padding: 2px 6px;
    border-radius: 4px;
    transition: opacity 0.15s;
}

.pos-trial-dismiss:hover[b-g2xxwyov9v] {
    opacity: 1;
}

/* ──────────────────────────────────────────────────────────────────────
   Phone modal sizing. Several POS modals are `overflow:hidden` with no
   max-height and no scrollable body, so on a phone — especially with the
   in-app note keyboard up, or in landscape — the footer/action buttons get
   clipped with no way to scroll to them. Cap each at the dynamic viewport
   and make the long region scroll. Last in source order; no later
   un-mediated rule redefines these properties. */
@media (max-width: 600px) {
    /* Note / new-ticket modal: header + body + (optional keyboard) +
       actions. Flex column so the body scrolls and the action buttons
       stay reachable even with the keyboard open. */
    .label-modal[b-g2xxwyov9v] {
        display: flex;
        flex-direction: column;
        max-height: 96dvh;
    }
    .label-modal-header[b-g2xxwyov9v],
    .label-modal-actions[b-g2xxwyov9v],
    .note-keyboard[b-g2xxwyov9v] {
        flex-shrink: 0;
    }
    .label-modal-body[b-g2xxwyov9v] {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
    }

    /* Table-picker / move-table: header + scroll grid + footer. Let the
       grid flex to fill instead of a rigid 45vh so header+grid+footer
       always fit within the capped card. */
    .table-picker-modal[b-g2xxwyov9v],
    .move-table-modal[b-g2xxwyov9v] {
        display: flex;
        flex-direction: column;
        max-height: 96dvh;
    }
    .picker-grid-container[b-g2xxwyov9v],
    .move-tables-grid-container[b-g2xxwyov9v] {
        flex: 1 1 auto;
        max-height: none;
        min-height: 0;
    }

    /* mdd / menu-management already scroll (max-height:85vh + overflow);
       cap to the dynamic viewport so the mobile URL bar can't eat the
       footer, and tighten the mdd body padding for 390px. */
    .mdd-modal[b-g2xxwyov9v],
    .menu-mgmt-modal[b-g2xxwyov9v] {
        max-height: 92dvh;
    }
    .mdd-modal[b-g2xxwyov9v] {
        padding: 16px;
    }
}

/* Staff-discount PIN modal footer. The inherited .pin-actions is a horizontal
   row built for two buttons; this modal has three (Aplicar / Cancelar / Quitar)
   plus a long destructive label, which overflowed the narrow pin-modal and
   clipped "Cancelar". Stack them: full-width primary, full-width cancel, and a
   de-emphasized "Quitar" link underneath. Scoped — never touch global
   .pin-actions (shared by the manager-PIN and manual-discount modals). */
.sd-pin-actions[b-g2xxwyov9v] {
    flex-direction: column;
    gap: 8px;
}

.sd-pin-actions .modal-cta.pin-authorize[b-g2xxwyov9v],
.sd-pin-actions .pin-cancel[b-g2xxwyov9v] {
    width: 100%;
}

.sd-pin-remove[b-g2xxwyov9v] {
    width: 100%;
    background: transparent;
    border: none;
    color: #fca5a5;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 9px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease;
}

.sd-pin-remove:hover:not(:disabled)[b-g2xxwyov9v] {
    background: rgba(239, 68, 68, 0.12);
}

.sd-pin-remove:disabled[b-g2xxwyov9v] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Quitar promoted to the primary action when a discount is already applied. */
.sd-pin-remove--primary[b-g2xxwyov9v] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    padding: 13px;
    font-size: 0.9rem;
}
.sd-pin-remove--primary:hover:not(:disabled)[b-g2xxwyov9v] {
    background: rgba(239, 68, 68, 0.2);
}

/* Pre-apply preview: order total + per-category rate chips. */
.sd-preview[b-g2xxwyov9v] {
    text-align: center;
    margin-bottom: 14px;
}
.sd-preview-total[b-g2xxwyov9v] {
    color: #cbd5e1;
    font-size: 0.95rem;
}
.sd-preview-total b[b-g2xxwyov9v] {
    color: #f8fafc;
    font-weight: 800;
}
.sd-preview-chips[b-g2xxwyov9v] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 10px;
}
.sd-chip[b-g2xxwyov9v] {
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #c7d2fe;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.78rem;
}
.sd-chip b[b-g2xxwyov9v] {
    color: #e0e7ff;
    font-weight: 800;
}
.sd-chip--muted[b-g2xxwyov9v] {
    background: rgba(148, 163, 184, 0.1);
    border-color: rgba(148, 163, 184, 0.25);
    color: #94a3b8;
}
.sd-chip--muted b[b-g2xxwyov9v] {
    color: #cbd5e1;
}
.sd-preview-norates[b-g2xxwyov9v] {
    margin-top: 10px;
    font-size: 0.78rem;
    color: #94a3b8;
}

/* Applied state: a confirmation banner instead of the PIN pad. */
.sd-applied[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 8px 10px;
    text-align: center;
}
.sd-applied-check[b-g2xxwyov9v] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}
.sd-applied-text[b-g2xxwyov9v] {
    color: #e2e8f0;
    font-size: 0.95rem;
}
.sd-applied-text b[b-g2xxwyov9v] {
    color: #f8fafc;
}
.sd-applied-amt[b-g2xxwyov9v] {
    color: #4ade80;
    font-weight: 800;
    font-size: 1.5rem;
}
.sd-applied-sub[b-g2xxwyov9v] {
    color: #94a3b8;
    font-size: 0.8rem;
}

/* Indigo PIN dots — override the inherited amber so the modal matches the
   indigo accent. Extra .pin-modal qualifier beats the global dark rule
   (:root[data-theme="dark"] .pin-dot.filled) on specificity. */
.pin-modal .sd-pin-dots .pin-dot.filled[b-g2xxwyov9v] {
    background: #6366f1;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15), 0 2px 8px rgba(99, 102, 241, 0.35);
}


/* ---- Mobile POS polish (phone signups land here from web signup) ---- */
/* Comandas discovery: phone-only, hidden on desktop/tablet. */
.pos-comandas-hint[b-g2xxwyov9v] { display: none; }
@media (max-width: 600px) {
    /* The all-disabled payment bar floated mid-screen above an empty ticket
       and read as broken; hide it on phones until the ticket has lines. */
    .payment-bar.payment-bar-empty[b-g2xxwyov9v] { display: none; }
    /* Shrink the blue/purple empty-carta hero so it stops dominating the
       first phone screen and leaves room for the Comandas hint. */
    .empty-onboarding-card[b-g2xxwyov9v] { max-width: calc(100vw - 24px); }
    .empty-onboarding-card .empty-onboarding-icon[b-g2xxwyov9v] { font-size: 2.4rem; }
    /* Show the Comandas discovery link on phones. */
    .pos-comandas-hint[b-g2xxwyov9v] {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 14px;
        padding: 12px 14px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.22);
        color: #fff;
        text-decoration: none;
        font-size: 0.86rem;
        line-height: 1.4;
    }
    .pos-comandas-hint strong[b-g2xxwyov9v] { font-weight: 700; }
}

/* ===================== Cierre y arqueo de caja =====================
   The close is a FULL-SCREEN, three-column screen — count | keypad | cuadre — so a cashier
   never scrolls on a landscape terminal. Sized against the screens that actually close cajas
   (pos_terminal_screens, 2026-10-15): the smallest landscape viewports are 1024×665 and
   1024×688, the commonest 1436×752. Below 900px wide (portrait tablets, phones) it stacks
   and scrolls — there is no fitting three panes on a phone. Apertura and the result stay a
   small centred card (.arq-card without .arq-full). */
.modal-card.arq-card[b-g2xxwyov9v] {
    width: min(620px, 95vw);
    max-width: 95vw;
    max-height: 92vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 22px;
    text-align: left;
    background: #0b1220;
    border: 1px solid #1e293b;
    color: #e2e8f0;
    box-sizing: border-box;
}
.modal-card.arq-card.arq-full[b-g2xxwyov9v] {
    width: calc(100vw - 16px);
    max-width: none;
    height: calc(100vh - 16px);
    height: calc(100dvh - 16px);
    height: calc(100dvh - 16px - var(--pwa-banner-h, 0px));
    max-height: none;
    padding: 12px 14px;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.arq-close[b-g2xxwyov9v] { position: relative; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; }
.arq-head[b-g2xxwyov9v] { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; }
.arq-title[b-g2xxwyov9v] { font-weight: 800; font-size: 1.15rem; color: #e2e8f0; white-space: nowrap; }
.arq-meta[b-g2xxwyov9v] { color: #94a3b8; font-size: .82rem; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: center; }
.arq-meta b[b-g2xxwyov9v] { color: #cbd5e1; }
.arq-head-actions[b-g2xxwyov9v] { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.arq-gap[b-g2xxwyov9v] { color: #fcd34d; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arq-hbtn[b-g2xxwyov9v] { min-height: 38px; padding: 0 12px; border: 1px solid #334155; border-radius: 10px; background: #0f172a; color: #cbd5e1; font-weight: 700; font-size: .85rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.arq-hbtn:hover[b-g2xxwyov9v] { border-color: #475569; }
.arq-badge[b-g2xxwyov9v] { padding: 1px 7px; border-radius: 999px; background: #1e293b; color: #93c5fd; font-size: .75rem; }
.arq-x[b-g2xxwyov9v] { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; border: 1px solid #334155; background: transparent; color: #94a3b8; font-size: 1.05rem; cursor: pointer; }

/* the summary chips live in CierreResumenChips.razor.css */
.arq-banner[b-g2xxwyov9v] { padding: 7px 12px; border-radius: 10px; font-size: .82rem; line-height: 1.35; }
.arq-banner-warn[b-g2xxwyov9v] { background: #2a1c06; border: 1px solid #b45309; color: #fcd34d; }
.arq-banner-err[b-g2xxwyov9v] { background: #2a0f12; border: 1px solid #b91c1c; color: #fca5a5; }

.arq-cols[b-g2xxwyov9v] { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(200px, .6fr) minmax(0, 1.25fr); grid-template-rows: minmax(0, 1fr) auto; gap: 8px 12px; }
.arq-cols > .arq-col:not(.arq-side)[b-g2xxwyov9v] { grid-row: 1 / span 2; }
.arq-cols > .arq-side[b-g2xxwyov9v] { grid-column: 3; grid-row: 1; }
.arq-col[b-g2xxwyov9v] { min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

/* count column */
.arq-sec[b-g2xxwyov9v] { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: .92rem; color: #e2e8f0; flex: 0 0 auto; }
.arq-link[b-g2xxwyov9v] { margin-left: auto; background: transparent; border: 1px solid #334155; color: #93c5fd; border-radius: 8px; padding: 4px 10px; font-size: .78rem; cursor: pointer; white-space: nowrap; }
.arq-denoms[b-g2xxwyov9v] { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.arq-denom-col[b-g2xxwyov9v] { min-height: 0; display: grid; grid-template-rows: auto repeat(8, minmax(28px, 1fr)); gap: 4px; }
.arq-denom-head[b-g2xxwyov9v] { color: #64748b; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; display: flex; justify-content: space-between; gap: 6px; }
.arq-denom[b-g2xxwyov9v] { display: flex; align-items: center; gap: 6px; min-width: 0; max-height: 48px; text-align: left; cursor: pointer; border: 2px solid #1e293b; background: transparent; border-radius: 9px; padding: 0 8px; color: inherit; }
.arq-denom.on[b-g2xxwyov9v] { border-color: #10b981; background: #0c2a20; box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
.arq-denom-lbl[b-g2xxwyov9v] { flex: 0 0 46px; text-align: right; color: #94a3b8; font-weight: 700; font-size: .82rem; }
.arq-denom-cnt[b-g2xxwyov9v] { flex: 1 1 auto; text-align: right; font-size: 1.1rem; font-weight: 800; color: #475569; }
.arq-denom-sub[b-g2xxwyov9v] { flex: 0 0 58px; text-align: right; font-size: .74rem; color: #475569; font-variant-numeric: tabular-nums; }
.arq-denom-cnt.has[b-g2xxwyov9v], .arq-denom-sub.has[b-g2xxwyov9v] { color: #e2e8f0; }
.arq-locked[b-g2xxwyov9v] { pointer-events: none; opacity: .55; }
.arq-formula[b-g2xxwyov9v] { color: #94a3b8; font-size: .76rem; line-height: 1.35; flex: 0 0 auto; }
.arq-formula b[b-g2xxwyov9v] { color: #e2e8f0; }
.arq-total[b-g2xxwyov9v] { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: #0f172a; border: 1px solid #1e293b; }
.arq-total > span[b-g2xxwyov9v] { color: #94a3b8; font-size: .85rem; }
.arq-total > b[b-g2xxwyov9v] { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.arq-bytotal[b-g2xxwyov9v] { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.arq-bytotal .arq-field[b-g2xxwyov9v] { min-height: 64px; font-size: 1.6rem; }

/* keypad column */
.arq-pad[b-g2xxwyov9v] { background: #0b1424; border: 1px solid #1e293b; border-radius: 12px; padding: 10px; }
.arq-pad-head[b-g2xxwyov9v] { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .82rem; color: #64748b; min-height: 22px; }
.arq-pad-tgt[b-g2xxwyov9v] { color: #cbd5e1; font-weight: 700; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arq-keys[b-g2xxwyov9v] { flex: 1 1 auto; min-height: 0; max-height: 270px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, minmax(38px, 1fr)); gap: 7px; }
.arq-key[b-g2xxwyov9v] { min-height: 40px; font-size: 1.35rem; font-weight: 700; color: #e2e8f0; background: #1e293b; border: 1px solid #334155; border-radius: 10px; cursor: pointer; }
.arq-key:active[b-g2xxwyov9v] { background: #334155; }
.arq-key-c[b-g2xxwyov9v] { color: #fca5a5; }
.arq-next[b-g2xxwyov9v] { flex: 0 0 auto; min-height: 48px; font-size: 1rem; font-weight: 700; color: #e2e8f0; background: #1e293b; border: 1px solid #334155; border-radius: 10px; cursor: pointer; }
.arq-help[b-g2xxwyov9v] { flex: 0 0 auto; color: #475569; font-size: .7rem; text-align: center; }

/* cuadre column */
.arq-side[b-g2xxwyov9v] { overflow-y: auto; scrollbar-width: thin; }
.arq-hint[b-g2xxwyov9v] { color: #64748b; font-size: .74rem; line-height: 1.35; }
.arq-table[b-g2xxwyov9v] { display: grid; grid-template-columns: minmax(84px, 1.2fr) auto minmax(88px, auto) minmax(64px, auto); gap: 6px 10px; align-items: center; font-size: .9rem; }
.arq-th[b-g2xxwyov9v] { color: #64748b; font-weight: 700; font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; }
.arq-r[b-g2xxwyov9v] { text-align: right; font-variant-numeric: tabular-nums; }
.arq-mname[b-g2xxwyov9v] { color: #e2e8f0; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arq-mname-sub[b-g2xxwyov9v] { display: block; color: #64748b; font-size: .7rem; font-weight: 500; }
.arq-field[b-g2xxwyov9v] { min-height: 36px; width: 100%; text-align: right; padding: 0 9px; border-radius: 9px; border: 2px solid #334155; background: #0f172a; color: #e2e8f0; font-size: .98rem; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums; box-sizing: border-box; }
.arq-field.empty[b-g2xxwyov9v] { color: #64748b; font-weight: 600; }
.arq-field.on[b-g2xxwyov9v] { border-color: #10b981; background: #0c2a20; box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
.arq-field[disabled][b-g2xxwyov9v] { cursor: default; }
.arq-diff[b-g2xxwyov9v] { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.arq-diff.ok[b-g2xxwyov9v] { color: #4ade80; }
.arq-diff.bad[b-g2xxwyov9v] { color: #f87171; }
.arq-diff.pend[b-g2xxwyov9v] { color: #94a3b8; font-weight: 600; font-size: .72rem; }
.arq-part[b-g2xxwyov9v] { grid-column: 1 / 3; display: flex; align-items: center; gap: 6px; padding-left: 14px; min-width: 0; }
.arq-part-name[b-g2xxwyov9v] { flex: 1 1 auto; min-width: 0; min-height: 32px; padding: 0 8px; border-radius: 8px; border: 1px solid #334155; background: #0f172a; color: #cbd5e1; font-size: .85rem; box-sizing: border-box; }
.arq-part-del[b-g2xxwyov9v] { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; border: 1px solid #334155; background: transparent; color: #94a3b8; cursor: pointer; }
.arq-addpart[b-g2xxwyov9v] { grid-column: 1 / -1; justify-self: start; margin-left: 14px; background: transparent; border: 0; color: #60a5fa; font-size: .78rem; font-weight: 700; cursor: pointer; padding: 2px 0; }
.arq-totrow[b-g2xxwyov9v] { grid-column: 1 / -1; border-top: 1px solid #1e293b; padding-top: 6px; display: flex; justify-content: space-between; align-items: center; font-weight: 800; }
.arq-status[b-g2xxwyov9v] { flex: 0 0 auto; padding: 9px 12px; border-radius: 11px; font-weight: 800; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.arq-status.ok[b-g2xxwyov9v] { background: #06281f; border: 1px solid #15803d; color: #4ade80; }
.arq-status.bad[b-g2xxwyov9v] { background: #2a0f12; border: 1px solid #b91c1c; color: #f87171; }
.arq-status.pend[b-g2xxwyov9v] { background: #0f172a; border: 1px solid #334155; color: #94a3b8; }
.arq-withdraw[b-g2xxwyov9v] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-items: center; }
.arq-chips[b-g2xxwyov9v] { display: flex; gap: 6px; flex-wrap: wrap; }
.arq-chip[b-g2xxwyov9v] { min-height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid #334155; background: #0f172a; color: #cbd5e1; font-size: .8rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.arq-note[b-g2xxwyov9v] { width: 100%; box-sizing: border-box; min-height: 44px; max-height: 96px; resize: vertical; padding: 8px 10px; border-radius: 10px; border: 1px solid #334155; background: #0f172a; color: #e2e8f0; font: inherit; font-size: .9rem; }
.arq-note.need[b-g2xxwyov9v] { border-color: #b45309; box-shadow: 0 0 0 3px rgba(180,83,9,.2); }
.arq-pin[b-g2xxwyov9v] { width: 100%; box-sizing: border-box; min-height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid #334155; background: #0f172a; color: #e2e8f0; letter-spacing: .35em; }
.arq-actions[b-g2xxwyov9v] { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.arq-closebar[b-g2xxwyov9v] { display: flex; flex-direction: column; gap: 6px; }
.arq-cols > .arq-closebar-wide[b-g2xxwyov9v] { grid-column: 3; grid-row: 2; }
.arq-closebar-narrow[b-g2xxwyov9v] { display: none; }
.arq-btn[b-g2xxwyov9v] { min-height: 52px; border: 0; border-radius: 12px; color: #fff; font-weight: 800; font-size: 1.05rem; cursor: pointer; padding: 0 14px; }
.arq-btn-ghost[b-g2xxwyov9v] { min-height: 52px; padding: 0 18px; border: 1px solid #334155; border-radius: 12px; background: transparent; color: #cbd5e1; font-weight: 600; cursor: pointer; }
.arq-fine[b-g2xxwyov9v] { color: #475569; font-size: .7rem; line-height: 1.3; }

/* movements, as a panel over the screen (it used to push the count down) */
.arq-movs-pop[b-g2xxwyov9v] { position: absolute; top: 48px; right: 0; width: min(560px, 100%); max-height: calc(100% - 150px); overflow-y: auto; background: #0b1424; border: 1px solid #334155; border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.55); padding: 12px; z-index: 5; }

/* short landscape screens (1024×665): tighter type, the keypad and the count shrink first */
@media (max-height: 720px) and (min-width: 901px) {
    .arq-title[b-g2xxwyov9v] { font-size: 1.02rem; }
    .arq-hbtn[b-g2xxwyov9v], .arq-x[b-g2xxwyov9v] { min-height: 34px; height: 34px; }
    .arq-key[b-g2xxwyov9v] { font-size: 1.2rem; }
    .arq-next[b-g2xxwyov9v] { min-height: 42px; }
    .arq-btn[b-g2xxwyov9v], .arq-btn-ghost[b-g2xxwyov9v] { min-height: 46px; }
    .arq-field[b-g2xxwyov9v] { min-height: 32px; }
    .arq-table[b-g2xxwyov9v] { gap: 4px 10px; }
    .arq-fine[b-g2xxwyov9v] { display: none; }
    .arq-status[b-g2xxwyov9v] { padding: 6px 10px; font-size: .9rem; }
    .arq-note[b-g2xxwyov9v] { min-height: 38px; }
    .arq-side .arq-hint[b-g2xxwyov9v] { font-size: .7rem; }
}

/* portrait tablets: count + keypad side by side, the cuadre underneath; the screen scrolls */
@media (max-width: 900px) {
    /* The columns scroll; the header stays on top and the close bar under them — no sticky
       positioning (WebKit and Blink disagree about sticky grid items). */
    .arq-cols[b-g2xxwyov9v] { overflow-y: auto; grid-template-columns: minmax(0, 1fr) minmax(200px, 250px); grid-template-rows: none; align-content: start; }
    /* Rows as tall as their content, and the screen scrolls. The columns' min-height: 0 (what lets the landscape screen
       fit without scrolling) made every implicit row collapse inside this fixed-height box, so on a phone the count,
       the keypad and the cuadre drew over each other (the user's iPhone, 22 Oct). */
    .arq-cols[b-g2xxwyov9v] { grid-auto-rows: max-content; }
    .arq-cols > .arq-col:not(.arq-side)[b-g2xxwyov9v] { grid-row: auto; }
    .arq-cols > .arq-side[b-g2xxwyov9v] { grid-column: 1 / -1; grid-row: auto; overflow: visible; }
    .arq-cols > .arq-closebar-wide[b-g2xxwyov9v] { display: none; }
    .arq-closebar-narrow[b-g2xxwyov9v] { display: flex; flex: 0 0 auto; padding-top: 8px; border-top: 1px solid #1e293b; }
    .arq-denom-col[b-g2xxwyov9v] { grid-template-rows: auto repeat(8, 40px); }
    .arq-keys[b-g2xxwyov9v] { grid-template-rows: repeat(4, 50px); }
}

/* phones: one column; the keypad stays (a native keyboard would cover the count) */
@media (max-width: 600px) {
    .modal-card.arq-card.arq-full[b-g2xxwyov9v] { width: 100vw; height: 100vh; height: 100dvh; height: calc(100dvh - var(--pwa-banner-h, 0px)); border-radius: 0; padding: 10px; }
    .arq-cols[b-g2xxwyov9v] { grid-template-columns: minmax(0, 1fr); }
    .arq-head-actions[b-g2xxwyov9v] { margin-left: 0; }
    .arq-denom-lbl[b-g2xxwyov9v] { flex-basis: 40px; }
    .arq-denom-sub[b-g2xxwyov9v] { flex-basis: 50px; }
    .arq-table[b-g2xxwyov9v] { grid-template-columns: minmax(0, 1fr) auto minmax(84px, auto) minmax(70px, auto); font-size: .85rem; }
}

/* «Vincular cliente» (the CRM link): neutral surfaces, as the guest card; each guest is a TillGuestPickRow, styled by
   its own sheet. (0,3,0) with the scope: beats .modal-card's width, padding and centring. */
.modal-card.cust-link-card[b-g2xxwyov9v] { width: 460px; max-width: 92vw; padding: 22px; text-align: left; }
.cust-link-title[b-g2xxwyov9v] { font-weight: 700; font-size: 1.1rem; }
.cust-link-hint[b-g2xxwyov9v] { margin-top: 4px; font-size: .82rem; line-height: 1.45; opacity: .75; }
.cust-link-new[b-g2xxwyov9v] { margin-top: 10px; text-align: center; }
.cust-link-search[b-g2xxwyov9v] { display: flex; gap: 8px; margin: 14px 0 12px; }
.cust-link-search .form-input[b-g2xxwyov9v] { flex: 1; min-width: 0; }
.cust-link-btn[b-g2xxwyov9v] {
    padding: 9px 16px;
    border: none;
    border-radius: 10px;
    background: #2563eb;
    color: #fff;
    font-weight: 600;
    font-size: .88rem;
    white-space: nowrap;
    cursor: pointer;
}
.cust-link-btn:disabled[b-g2xxwyov9v] { opacity: .5; cursor: default; }
.cust-link-create[b-g2xxwyov9v] { display: block; width: 100%; margin-top: 10px; padding: 11px 16px; }
.cust-link-note[b-g2xxwyov9v] { padding: 14px 8px; text-align: center; font-size: .88rem; opacity: .7; }
.cust-link-results[b-g2xxwyov9v] { display: grid; gap: 8px; max-height: 300px; overflow-y: auto; padding: 2px; }
.cust-link-msg[b-g2xxwyov9v] { margin-top: 10px; padding: 9px 12px; border-radius: 10px; font-size: .85rem; font-weight: 600; }
.cust-link-msg.is-ok[b-g2xxwyov9v] { background: #e7f6ee; color: #11734b; }
.cust-link-msg.is-error[b-g2xxwyov9v] { background: #fdecea; color: #b42318; }
.cust-link-close[b-g2xxwyov9v] {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 10px 16px;
    border: 1px solid rgba(127, 127, 127, .35);
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font-weight: 600;
    font-size: .88rem;
    cursor: pointer;
}
/* /Pages/Pricing.razor.rz.scp.css */
[b-3ii1yr2186] .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

[b-3ii1yr2186] .section-title {
    font-size: 2.25rem;
    font-weight: 800;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
    color: #f1f5f9;
}

[b-3ii1yr2186] .section-sub {
    color: #94a3b8;
    font-size: 1rem;
    margin: 0 0 32px;
}

/* ===== HERO ===== */

[b-3ii1yr2186] .pricing-hero {
    padding: 80px 0 56px;
    text-align: center;
    background: radial-gradient(ellipse at center top, rgba(239, 68, 68, 0.12) 0%, transparent 60%),
                radial-gradient(ellipse at 30% 80%, rgba(168, 85, 247, 0.08) 0%, transparent 50%);
}

[b-3ii1yr2186] .hero-eyebrow {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

[b-3ii1yr2186] .pricing-hero h1 {
    font-size: clamp(2.4rem, 6vw, 4rem);
    font-weight: 900;
    margin: 0 0 16px;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, #f1f5f9 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

[b-3ii1yr2186] .hero-sub {
    color: #94a3b8;
    font-size: 1.15rem;
    max-width: 580px;
    margin: 0 auto 32px;
    line-height: 1.5;
}

[b-3ii1yr2186] .billing-toggle {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
}

[b-3ii1yr2186] .bt-btn {
    padding: 8px 22px;
    background: transparent;
    border: 0;
    color: #cbd5e1;
    font-size: 0.92rem;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

[b-3ii1yr2186] .bt-btn.active {
    background: linear-gradient(135deg, #c62828 0%, #ef4444 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

[b-3ii1yr2186] .bt-badge {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    margin-left: 6px;
}

/* ===== PLANS ===== */

[b-3ii1yr2186] .plans {
    padding: 24px 0 64px;
}

[b-3ii1yr2186] .plan-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

[b-3ii1yr2186] .plan-card {
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

[b-3ii1yr2186] .plan-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

[b-3ii1yr2186] .plan-highlight {
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.08) 0%, rgba(255, 255, 255, 0.02) 50%);
    border-color: rgba(239, 68, 68, 0.4);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.2), 0 12px 40px rgba(239, 68, 68, 0.15);
}

[b-3ii1yr2186] .plan-highlight:hover {
    border-color: rgba(239, 68, 68, 0.6);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.4), 0 18px 48px rgba(239, 68, 68, 0.25);
}

[b-3ii1yr2186] .plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #c62828 0%, #ef4444 100%);
    color: #fff;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

[b-3ii1yr2186] .plan-name {
    font-size: 1.35rem;
    font-weight: 800;
    color: #f1f5f9;
}

[b-3ii1yr2186] .plan-tag {
    color: #94a3b8;
    font-size: 0.88rem;
    line-height: 1.4;
    margin: 4px 0 0;
    min-height: 2.5em;
}

[b-3ii1yr2186] .plan-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 18px;
}

[b-3ii1yr2186] .plan-currency {
    color: #cbd5e1;
    font-size: 1.4rem;
    font-weight: 600;
}

[b-3ii1yr2186] .plan-amount {
    color: #f1f5f9;
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
}

[b-3ii1yr2186] .plan-period {
    color: #94a3b8;
    font-size: 0.95rem;
    font-weight: 500;
}

[b-3ii1yr2186] .plan-billed {
    color: #64748b;
    font-size: 0.78rem;
    margin-top: 4px;
}

[b-3ii1yr2186] .plan-cta {
    display: block;
    text-align: center;
    padding: 12px 16px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.1s, box-shadow 0.15s;
}

[b-3ii1yr2186] .plan-cta.primary {
    background: linear-gradient(135deg, #c62828 0%, #ef4444 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}

[b-3ii1yr2186] .plan-cta.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(239, 68, 68, 0.5);
}

[b-3ii1yr2186] .plan-cta.secondary {
    background: rgba(255, 255, 255, 0.06);
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[b-3ii1yr2186] .plan-cta.secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

[b-3ii1yr2186] .plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

[b-3ii1yr2186] .plan-features li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: #cbd5e1;
    font-size: 0.92rem;
    line-height: 1.45;
}

[b-3ii1yr2186] .plan-features .check {
    color: #34d399;
    font-weight: 800;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

[b-3ii1yr2186] .plan-features .check.star {
    color: #fbbf24;
}

[b-3ii1yr2186] .plan-features .feature-highlight {
    color: #f1f5f9;
    font-weight: 600;
}

/* ===== BUFFET CALLOUT ===== */

[b-3ii1yr2186] .buffet-callout {
    padding: 24px 0 48px;
}

[b-3ii1yr2186] .bc-card {
    display: flex;
    gap: 32px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.06) 0%, rgba(239, 68, 68, 0.05) 100%);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 24px;
    padding: 40px;
    align-items: flex-start;
}

[b-3ii1yr2186] .bc-emoji {
    font-size: 4rem;
    line-height: 1;
    flex-shrink: 0;
}

[b-3ii1yr2186] .bc-eyebrow {
    color: #fbbf24;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

[b-3ii1yr2186] .bc-body h2 {
    font-size: 1.85rem;
    font-weight: 800;
    margin: 0 0 12px;
    color: #f1f5f9;
    letter-spacing: -0.02em;
}

[b-3ii1yr2186] .bc-body p {
    color: #cbd5e1;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 18px;
}

[b-3ii1yr2186] .bc-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 24px;
}

[b-3ii1yr2186] .bc-bullets li {
    color: #cbd5e1;
    font-size: 0.92rem;
}

[b-3ii1yr2186] .bc-link {
    color: #fbbf24;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
}

[b-3ii1yr2186] .bc-link:hover {
    color: #fde047;
}

/* ===== COMPARISON TABLE ===== */

[b-3ii1yr2186] .compare {
    padding: 64px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

[b-3ii1yr2186] .compare-wrapper {
    overflow-x: auto;
    margin: 0 -24px;
    padding: 0 24px;
}

[b-3ii1yr2186] .compare-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    overflow: hidden;
    min-width: 720px;
}

[b-3ii1yr2186] .compare-table thead th {
    background: rgba(255, 255, 255, 0.03);
    color: #f1f5f9;
    font-weight: 700;
    text-align: center;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.92rem;
}

[b-3ii1yr2186] .compare-table thead .th-highlight {
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.18) 0%, rgba(239, 68, 68, 0.08) 100%);
    color: #fca5a5;
}

[b-3ii1yr2186] .compare-table .row-group td {
    background: rgba(255, 255, 255, 0.04);
    color: #cbd5e1;
    font-weight: 700;
    padding: 14px 20px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[b-3ii1yr2186] .compare-table tbody td {
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: #cbd5e1;
    font-size: 0.92rem;
    text-align: center;
}

[b-3ii1yr2186] .compare-table .cell-feature {
    text-align: left;
    color: #f1f5f9;
}

[b-3ii1yr2186] .compare-table tbody .th-highlight {
    background: rgba(239, 68, 68, 0.04);
}

[b-3ii1yr2186] .compare-table .tick {
    color: #34d399;
    font-weight: 800;
    font-size: 1.05rem;
}

[b-3ii1yr2186] .compare-table .dash {
    color: #475569;
}

[b-3ii1yr2186] .compare-table .tier-text {
    color: #cbd5e1;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ===== FAQ ===== */

[b-3ii1yr2186] .faq {
    padding: 64px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

[b-3ii1yr2186] .faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

[b-3ii1yr2186] .faq-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 18px 22px;
}

[b-3ii1yr2186] .faq-item summary {
    cursor: pointer;
    color: #f1f5f9;
    font-weight: 600;
    font-size: 0.95rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

[b-3ii1yr2186] .faq-item summary::-webkit-details-marker { display: none; }

[b-3ii1yr2186] .faq-item summary::after {
    content: '+';
    font-size: 1.3rem;
    color: #94a3b8;
    transition: transform 0.2s;
}

[b-3ii1yr2186] .faq-item[open] summary::after {
    transform: rotate(45deg);
}

[b-3ii1yr2186] .faq-answer {
    color: #94a3b8;
    font-size: 0.92rem;
    line-height: 1.55;
    margin-top: 12px;
}

/* ===== CTA STRIP ===== */

[b-3ii1yr2186] .cta-strip {
    padding: 80px 0;
    text-align: center;
    background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.1) 0%, transparent 70%);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

[b-3ii1yr2186] .cta-strip h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0 0 12px;
    letter-spacing: -0.02em;
    color: #f1f5f9;
}

[b-3ii1yr2186] .cta-strip p {
    color: #94a3b8;
    font-size: 1.1rem;
    margin: 0 0 32px;
}

[b-3ii1yr2186] .cta-row {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

[b-3ii1yr2186] .btn-primary,
[b-3ii1yr2186] .btn-secondary {
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: transform 0.1s, box-shadow 0.15s;
}

[b-3ii1yr2186] .btn-primary {
    background: linear-gradient(135deg, #c62828 0%, #ef4444 100%);
    color: #fff;
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35);
}

[b-3ii1yr2186] .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(239, 68, 68, 0.5);
}

[b-3ii1yr2186] .btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[b-3ii1yr2186] .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1080px) {
    [b-3ii1yr2186] .plan-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    [b-3ii1yr2186] .bc-card {
        flex-direction: column;
        gap: 20px;
    }
    [b-3ii1yr2186] .bc-emoji {
        font-size: 3rem;
    }
    [b-3ii1yr2186] .faq-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    [b-3ii1yr2186] .plan-grid {
        grid-template-columns: 1fr;
    }
    [b-3ii1yr2186] .bc-bullets {
        grid-template-columns: 1fr;
    }
    [b-3ii1yr2186] .pricing-hero {
        padding: 56px 0 40px;
    }
    [b-3ii1yr2186] .pricing-hero h1 {
        font-size: 2.2rem;
    }
    [b-3ii1yr2186] .section-title {
        font-size: 1.8rem;
    }
}
/* /Pages/Products.razor.rz.scp.css */
[b-wogah2zcxi] .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ===== HERO ===== */

[b-wogah2zcxi] .prod-hero {
    padding: 96px 0 48px;
    text-align: center;
    background: radial-gradient(ellipse at top, rgba(239, 68, 68, 0.08) 0%, transparent 60%),
                radial-gradient(ellipse at 70% 90%, rgba(168, 85, 247, 0.08) 0%, transparent 50%);
}

[b-wogah2zcxi] .hero-eyebrow {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

[b-wogah2zcxi] .prod-hero h1 {
    font-size: clamp(2.4rem, 6vw, 4.5rem);
    font-weight: 900;
    margin: 0 0 16px;
    letter-spacing: -0.03em;
    line-height: 1.05;
    background: linear-gradient(135deg, #f1f5f9 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

[b-wogah2zcxi] .hero-sub {
    color: #94a3b8;
    font-size: 1.15rem;
    max-width: 640px;
    margin: 0 auto 32px;
    line-height: 1.55;
}

[b-wogah2zcxi] .quick-jump {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

[b-wogah2zcxi] .quick-jump a {
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}

[b-wogah2zcxi] .quick-jump a:hover {
    border-color: rgba(255, 255, 255, 0.2);
    color: #f1f5f9;
}

[b-wogah2zcxi] .quick-jump-new {
    border-color: rgba(245, 158, 11, 0.4) !important;
    color: #fde047 !important;
}

[b-wogah2zcxi] .new-pill {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    font-size: 0.62rem;
    padding: 1px 6px;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

/* ===== FEATURE SECTION ===== */

[b-wogah2zcxi] .feat-section {
    padding: 72px 0;
}

[b-wogah2zcxi] .feat-section.feat-alt {
    background: rgba(255, 255, 255, 0.015);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

[b-wogah2zcxi] .feat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

[b-wogah2zcxi] .feat-flip .feat-text { order: 2; }
[b-wogah2zcxi] .feat-flip .feat-mock { order: 1; }

[b-wogah2zcxi] .feat-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 18px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}

[b-wogah2zcxi] .feat-icon.big {
    width: 72px;
    height: 72px;
    font-size: 2rem;
    border-radius: 18px;
    flex-shrink: 0;
}

[b-wogah2zcxi] .feat-text h2 {
    font-size: clamp(1.85rem, 3.5vw, 2.6rem);
    font-weight: 800;
    margin: 0 0 14px;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #f1f5f9;
}

[b-wogah2zcxi] .feat-lead {
    color: #cbd5e1;
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0 0 24px;
}

[b-wogah2zcxi] .feat-bullets {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

[b-wogah2zcxi] .feat-bullets > div {
    color: #cbd5e1;
    font-size: 0.95rem;
    line-height: 1.5;
    padding-left: 24px;
    position: relative;
}

[b-wogah2zcxi] .feat-bullets > div::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #34d399;
    font-weight: 800;
}

[b-wogah2zcxi] .feat-bullets strong {
    color: #f1f5f9;
}

[b-wogah2zcxi] .feat-mock {
    display: flex;
    justify-content: center;
}

/* ===== POS MOCK ===== */

[b-wogah2zcxi] .pos-mock {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 460px;
    background: #0a0c12;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

[b-wogah2zcxi] .pos-tile {
    aspect-ratio: 1;
    border-radius: 10px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.78rem;
    color: #f1f5f9;
}

[b-wogah2zcxi] .pos-tile.free {
    background: #1e293b;
    color: #94a3b8;
    align-items: center;
    justify-content: center;
}

[b-wogah2zcxi] .pos-tile.occupied {
    background: linear-gradient(135deg, #064e3b, #047857);
}

[b-wogah2zcxi] .pos-tile.occupied.warn {
    background: linear-gradient(135deg, #7c2d12, #ea580c);
}

[b-wogah2zcxi] .pos-tile.reserved {
    background: linear-gradient(135deg, #1e3a8a, #1d4ed8);
    align-items: center;
    justify-content: center;
}

[b-wogah2zcxi] .pos-label { font-weight: 800; }
[b-wogah2zcxi] .pos-time { color: rgba(255, 255, 255, 0.7); font-size: 0.72rem; }
[b-wogah2zcxi] .pos-total { font-weight: 800; font-size: 0.85rem; }
[b-wogah2zcxi] .pos-tag { color: rgba(255, 255, 255, 0.7); font-size: 0.72rem; margin-top: 2px; }

/* ===== KDS MOCK ===== */

[b-wogah2zcxi] .kds-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 520px;
    background: #0a0c12;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

[b-wogah2zcxi] .kds-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[b-wogah2zcxi] .kds-h {
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    color: #94a3b8;
    letter-spacing: 0.08em;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[b-wogah2zcxi] .kds-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 2px solid #34d399;
    border-radius: 6px;
    padding: 8px 10px;
}

[b-wogah2zcxi] .kds-card.prep { border-left-color: #fbbf24; }
[b-wogah2zcxi] .kds-card.ready { border-left-color: #34d399; opacity: 0.7; }

[b-wogah2zcxi] .kds-table {
    color: #f1f5f9;
    font-weight: 700;
    font-size: 0.78rem;
    margin-bottom: 4px;
}

[b-wogah2zcxi] .kds-line {
    color: #cbd5e1;
    font-size: 0.74rem;
    padding: 1px 0;
}

/* ===== QR MOCK ===== */

[b-wogah2zcxi] .qr-frame {
    width: 280px;
    background: #1f2937;
    border-radius: 32px;
    padding: 14px 12px;
    border: 6px solid #111827;
    box-shadow: 0 32px 60px rgba(0, 0, 0, 0.6);
    transform: rotate(2deg);
}

[b-wogah2zcxi] .qr-mock-inner {
    background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 22px;
    padding: 18px 16px;
    color: #1f2937;
}

[b-wogah2zcxi] .qrm-h { font-size: 1.05rem; font-weight: 800; margin-bottom: 14px; }
[b-wogah2zcxi] .qrm-cat { font-size: 0.78rem; font-weight: 700; color: #b45309; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; }
[b-wogah2zcxi] .qrm-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(180, 83, 9, 0.2);
    font-size: 0.85rem;
}
[b-wogah2zcxi] .qrm-name { font-weight: 600; }
[b-wogah2zcxi] .qrm-price { font-weight: 800; }
[b-wogah2zcxi] .qrm-cart {
    display: flex;
    justify-content: space-between;
    background: #1f2937;
    color: #fff;
    padding: 10px 14px;
    border-radius: 12px;
    margin-top: 14px;
    font-size: 0.85rem;
    font-weight: 700;
}
[b-wogah2zcxi] .qrm-total { color: #fbbf24; }

/* ===== BUFFET HIGHLIGHT ===== */

[b-wogah2zcxi] .feat-buffet {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.04) 0%, rgba(239, 68, 68, 0.05) 100%);
    border-top: 1px solid rgba(245, 158, 11, 0.2);
    border-bottom: 1px solid rgba(245, 158, 11, 0.2);
}

[b-wogah2zcxi] .feat-buffet-head {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 40px;
    max-width: 760px;
}

[b-wogah2zcxi] .feat-eyebrow.buffet-eyebrow {
    display: inline-block;
    color: #fde047;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 4px 12px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 999px;
    margin-bottom: 12px;
}

[b-wogah2zcxi] .feat-buffet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

[b-wogah2zcxi] .bf-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 24px;
    transition: border-color 0.15s, transform 0.15s;
}

[b-wogah2zcxi] .bf-card:hover {
    border-color: rgba(245, 158, 11, 0.4);
    transform: translateY(-2px);
}

[b-wogah2zcxi] .bf-icon {
    font-size: 1.6rem;
    margin-bottom: 14px;
    display: inline-flex;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(239, 68, 68, 0.18));
    align-items: center;
    justify-content: center;
}

[b-wogah2zcxi] .bf-card h3 {
    font-size: 1.1rem;
    color: #f1f5f9;
    margin: 0 0 8px;
    font-weight: 700;
}

[b-wogah2zcxi] .bf-card p {
    color: #cbd5e1;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

[b-wogah2zcxi] .feat-buffet-cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ===== RESERVAS ===== */

[b-wogah2zcxi] .res-card {
    background: #0a0c12;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 20px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

[b-wogah2zcxi] .res-h {
    color: #a78bfa;
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    margin-bottom: 14px;
}

[b-wogah2zcxi] .res-row {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.88rem;
}

[b-wogah2zcxi] .res-row:last-child { border-bottom: 0; }

[b-wogah2zcxi] .res-time { color: #a78bfa; font-weight: 700; font-family: 'Courier New', monospace; }

[b-wogah2zcxi] .res-state.ok { color: #34d399; font-weight: 600; font-size: 0.78rem; }
[b-wogah2zcxi] .res-state.pend { color: #fbbf24; font-weight: 600; font-size: 0.78rem; }

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

[b-wogah2zcxi] .inv-card {
    background: #0a0c12;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 20px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

[b-wogah2zcxi] .inv-row {
    display: grid;
    grid-template-columns: 110px 1fr 110px;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
}

[b-wogah2zcxi] .inv-name { color: #f1f5f9; font-size: 0.88rem; font-weight: 600; }

[b-wogah2zcxi] .inv-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    overflow: hidden;
}
[b-wogah2zcxi] .inv-bar > div { height: 100%; }

[b-wogah2zcxi] .inv-q { color: #cbd5e1; font-size: 0.78rem; text-align: right; }
[b-wogah2zcxi] .inv-row.low .inv-q span { display: block; color: #ef4444; font-weight: 700; }
[b-wogah2zcxi] .inv-row.warn .inv-q { color: #fbbf24; }

/* ===== REPORTES ===== */

[b-wogah2zcxi] .rep-card {
    background: #0a0c12;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 24px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

[b-wogah2zcxi] .rep-h {
    color: #38bdf8;
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

[b-wogah2zcxi] .rep-big {
    color: #f1f5f9;
    font-size: 2.4rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
}

[b-wogah2zcxi] .rep-delta {
    color: #34d399;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 6px 0 18px;
}

[b-wogah2zcxi] .rep-bars {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    align-items: end;
    height: 120px;
}

[b-wogah2zcxi] .rep-bars > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

[b-wogah2zcxi] .rb {
    width: 100%;
    background: linear-gradient(180deg, #38bdf8, #0ea5e9);
    border-radius: 4px;
}

[b-wogah2zcxi] .rb.hot { background: linear-gradient(180deg, #f59e0b, #ef4444); }

[b-wogah2zcxi] .rep-bars span { color: #94a3b8; font-size: 0.72rem; font-weight: 700; }

/* ===== APP MOCK ===== */

[b-wogah2zcxi] .phone {
    width: 240px;
    background: #1f2937;
    border-radius: 36px;
    padding: 14px 10px;
    border: 5px solid #111827;
    box-shadow: 0 32px 60px rgba(0, 0, 0, 0.6);
    transform: rotate(-2deg);
}

[b-wogah2zcxi] .phone-screen {
    background: linear-gradient(180deg, #0f172a, #1e1b4b);
    border-radius: 26px;
    padding: 20px 14px;
    color: #f1f5f9;
}

[b-wogah2zcxi] .ph-h { font-weight: 800; font-size: 1.05rem; margin-bottom: 14px; }

[b-wogah2zcxi] .ph-cart { background: rgba(255, 255, 255, 0.04); border-radius: 12px; padding: 12px; margin-bottom: 12px; }

[b-wogah2zcxi] .ph-l {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 0.85rem;
    color: #cbd5e1;
}

[b-wogah2zcxi] .ph-btn {
    width: 100%;
    background: linear-gradient(135deg, #ec4899, #be185d);
    color: #fff;
    border: 0;
    padding: 12px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.92rem;
}

/* ===== CTA STRIP ===== */

[b-wogah2zcxi] .cta-strip {
    padding: 80px 0;
    text-align: center;
    background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.1) 0%, transparent 70%);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

[b-wogah2zcxi] .cta-strip h2 {
    font-size: clamp(1.85rem, 3vw, 2.5rem);
    font-weight: 800;
    margin: 0 0 12px;
    letter-spacing: -0.02em;
    color: #f1f5f9;
}

[b-wogah2zcxi] .cta-strip p {
    color: #94a3b8;
    font-size: 1.1rem;
    margin: 0 0 32px;
}

[b-wogah2zcxi] .cta-row {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

[b-wogah2zcxi] .btn-primary,
[b-wogah2zcxi] .btn-secondary {
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: transform 0.1s, box-shadow 0.15s;
}

[b-wogah2zcxi] .btn-primary {
    background: linear-gradient(135deg, #c62828 0%, #ef4444 100%);
    color: #fff;
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35);
}

[b-wogah2zcxi] .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(239, 68, 68, 0.5);
}

[b-wogah2zcxi] .btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[b-wogah2zcxi] .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1080px) {
    [b-wogah2zcxi] .feat-buffet-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 880px) {
    [b-wogah2zcxi] .feat-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    [b-wogah2zcxi] .feat-flip .feat-text { order: unset; }
    [b-wogah2zcxi] .feat-flip .feat-mock { order: unset; }
    [b-wogah2zcxi] .feat-section { padding: 56px 0; }
    [b-wogah2zcxi] .feat-buffet-head { flex-direction: column; gap: 16px; }
}

@media (max-width: 640px) {
    [b-wogah2zcxi] .feat-buffet-grid {
        grid-template-columns: 1fr;
    }
    [b-wogah2zcxi] .pos-mock { grid-template-columns: repeat(3, 1fr); }
    [b-wogah2zcxi] .kds-board { grid-template-columns: 1fr; max-width: 360px; }
}
/* /Pages/Public/InvoiceRequest.razor.rz.scp.css */
/* Mobile-first responsive design */
.invoice-page[b-pyuz39gpsf] {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Loading state */
.loading[b-pyuz39gpsf] {
    text-align: center;
    color: white;
}

.spinner[b-pyuz39gpsf] {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-pyuz39gpsf 0.8s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin-b-pyuz39gpsf {
    to { transform: rotate(360deg); }
}

/* Cards */
.invoice-card[b-pyuz39gpsf],
.error-card[b-pyuz39gpsf],
.success-card[b-pyuz39gpsf] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    width: 100%;
    max-width: 440px;
    overflow: hidden;
}

/* Error card */
.error-card[b-pyuz39gpsf] {
    padding: 40px 24px;
    text-align: center;
}

.error-icon[b-pyuz39gpsf] {
    width: 64px;
    height: 64px;
    background: #fee2e2;
    color: #dc2626;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: bold;
    margin: 0 auto 16px;
}

.error-card h2[b-pyuz39gpsf] {
    margin: 0 0 8px;
    color: #1e293b;
}

.error-card p[b-pyuz39gpsf] {
    margin: 0;
    color: #64748b;
}

/* Success card */
.success-card[b-pyuz39gpsf] {
    padding: 40px 24px;
    text-align: center;
}

.success-icon[b-pyuz39gpsf] {
    width: 80px;
    height: 80px;
    background: #dcfce7;
    color: #16a34a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    margin: 0 auto 20px;
}

.success-card h2[b-pyuz39gpsf] {
    margin: 0 0 8px;
    color: #1e293b;
}

.success-card p[b-pyuz39gpsf] {
    margin: 0 0 24px;
    color: #64748b;
}

/* Invoice card header */
.card-header[b-pyuz39gpsf] {
    background: #1e293b;
    color: white;
    padding: 24px;
    text-align: center;
}

.card-header h1[b-pyuz39gpsf] {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
}

.invoice-badge[b-pyuz39gpsf] {
    display: inline-block;
    background: rgba(255,255,255,0.15);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
}

/* Invoice summary */
.invoice-summary[b-pyuz39gpsf] {
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
}

.summary-row[b-pyuz39gpsf] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
}

.summary-row .label[b-pyuz39gpsf] {
    color: #64748b;
}

.summary-row .value[b-pyuz39gpsf] {
    font-weight: 500;
    color: #1e293b;
}

.summary-row.total .value[b-pyuz39gpsf] {
    font-size: 24px;
    font-weight: 700;
    color: #059669;
}

/* Already requested info */
.already-requested[b-pyuz39gpsf] {
    display: flex;
    gap: 12px;
    padding: 16px 24px;
    background: #eff6ff;
    border-bottom: 1px solid #e2e8f0;
}

.info-icon[b-pyuz39gpsf] {
    width: 24px;
    height: 24px;
    background: #3b82f6;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.already-requested strong[b-pyuz39gpsf] {
    color: #1e40af;
    display: block;
    margin-bottom: 4px;
}

.already-requested p[b-pyuz39gpsf] {
    margin: 0;
    color: #64748b;
    font-size: 14px;
}

/* Form */
form[b-pyuz39gpsf] {
    padding: 24px;
}

form h2[b-pyuz39gpsf] {
    margin: 0 0 20px;
    font-size: 18px;
    color: #1e293b;
}

.form-group[b-pyuz39gpsf] {
    margin-bottom: 16px;
}

.form-group label[b-pyuz39gpsf] {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.form-group input[b-pyuz39gpsf] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.form-group input:focus[b-pyuz39gpsf] {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-group input[b-pyuz39gpsf]::placeholder {
    color: #9ca3af;
}

.form-error[b-pyuz39gpsf] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
}

/* Buttons */
.btn[b-pyuz39gpsf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    border: none;
    text-decoration: none;
}

.btn-primary[b-pyuz39gpsf] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-pyuz39gpsf] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-primary:disabled[b-pyuz39gpsf] {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-full[b-pyuz39gpsf] {
    width: 100%;
}

.btn-spinner[b-pyuz39gpsf] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-pyuz39gpsf 0.8s linear infinite;
}

/* Footer note */
.footer-note[b-pyuz39gpsf] {
    padding: 16px 24px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.footer-note p[b-pyuz39gpsf] {
    margin: 0;
    font-size: 13px;
    color: #64748b;
    text-align: center;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .invoice-page[b-pyuz39gpsf] {
        padding: 12px;
    }

    .card-header[b-pyuz39gpsf] {
        padding: 20px 16px;
    }

    .invoice-summary[b-pyuz39gpsf],
    form[b-pyuz39gpsf] {
        padding: 16px;
    }

    .summary-row.total .value[b-pyuz39gpsf] {
        font-size: 20px;
    }
}

/* Safe area for notched phones */
@supports (padding-top: env(safe-area-inset-top)) {
    .invoice-page[b-pyuz39gpsf] {
        padding-top: calc(16px + env(safe-area-inset-top));
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
}
/* /Pages/Public/RateVisit.razor.rz.scp.css */
/* The guest's rating page (/v/{code}). Paints its own background: CustomerLayout is a dark shell, and this page
   follows the phone's light/dark setting instead, as the club page does. The venue's colour (--rate-brand) leads:
   the stars, the chips, the button.

   ⚠ site.css styles bare input/select/textarea (white, dark text, min-width 220px, a red staff focus ring) at
   (0,1,1). Every field here is styled through its class, which the scope attribute lifts to (0,2,0) or more, and
   sets its own min-width and focus. */
.rate-page[b-pumpe3hcuw] {
    --rate-brand: #0891b2;
    --rate-star: #f59e0b;
    --rate-bg: #f5f6f8;
    --rate-card: #ffffff;
    --rate-text: #0f172a;
    --rate-muted: #64748b;
    --rate-border: #e5e7eb;
    --rate-error: #dc2626;

    min-height: 100vh;
    background: var(--rate-bg);
    background: radial-gradient(120% 55% at 50% -12%, color-mix(in srgb, var(--rate-brand) 18%, transparent), transparent 62%), var(--rate-bg);
    color: var(--rate-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    padding: 20px 16px 48px;
    box-sizing: border-box;
}

@media (prefers-color-scheme: dark) {
    .rate-page[b-pumpe3hcuw] {
        --rate-bg: #0b1220;
        --rate-card: #151e2e;
        --rate-text: #f1f5f9;
        --rate-muted: #94a3b8;
        --rate-border: #273449;
        --rate-error: #f87171;
    }
}

.rate-center[b-pumpe3hcuw] {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
}

.rate-spinner[b-pumpe3hcuw] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--rate-border);
    border-top-color: var(--rate-brand);
    border-radius: 50%;
    animation: rate-spin-b-pumpe3hcuw 1s linear infinite;
}

@keyframes rate-spin-b-pumpe3hcuw { to { transform: rotate(360deg); } }

/* Header: the venue, and the language */
.rate-header[b-pumpe3hcuw] {
    max-width: 460px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.rate-logo[b-pumpe3hcuw] {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
}

.rate-venue[b-pumpe3hcuw] {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    font-size: 1.05rem;
    overflow-wrap: break-word;
}

.rate-lang[b-pumpe3hcuw] {
    flex-shrink: 0;
    width: auto;
    min-width: 0;
    max-width: 44%;
    font: inherit;
    font-size: 0.9rem;
    padding: 8px 10px;
    border: 1px solid var(--rate-border);
    border-radius: 10px;
    background: var(--rate-card);
    color: var(--rate-text);
}

.rate-lang:focus[b-pumpe3hcuw] {
    outline: none;
    border-color: var(--rate-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rate-brand) 25%, transparent);
}

/* The cards */
.rate-card[b-pumpe3hcuw] {
    max-width: 460px;
    margin: 0 auto 14px;
    padding: 22px 18px;
    border-radius: 20px;
    background: var(--rate-card);
    border: 1px solid var(--rate-border);
    box-shadow: 0 12px 32px -20px rgba(15, 23, 42, 0.35);
    box-sizing: border-box;
}

.rate-center-card[b-pumpe3hcuw] { text-align: center; }

.rate-title[b-pumpe3hcuw] {
    margin: 0 0 6px;
    font-size: 1.6rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-align: center;
}

.rate-muted[b-pumpe3hcuw] {
    margin: 0;
    color: var(--rate-muted);
    font-size: 0.95rem;
    line-height: 1.45;
}

.rate-card > .rate-muted[b-pumpe3hcuw] { text-align: center; }

.rate-visit[b-pumpe3hcuw] {
    margin: 6px 0 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--rate-muted);
}

/* The stars: big, thumb-sized, the whole row centred */
.rate-stars[b-pumpe3hcuw] {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 22px 0 4px;
}

.rate-star[b-pumpe3hcuw] {
    width: 52px;
    height: 52px;
    padding: 0;
    border: none;
    border-radius: 14px;
    background: transparent;
    color: var(--rate-border);
    font-size: 2.6rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.12s ease, color 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}

.rate-star.on[b-pumpe3hcuw] { color: var(--rate-star); }
.rate-star:active[b-pumpe3hcuw] { transform: scale(0.9); }

.rate-star:focus-visible[b-pumpe3hcuw] {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rate-brand) 35%, transparent);
}

.rate-word[b-pumpe3hcuw] {
    min-height: 1.4em;
    margin: 0 0 8px;
    text-align: center;
    font-weight: 700;
    color: var(--rate-text);
}

/* Quick tags */
.rate-tags[b-pumpe3hcuw] {
    margin: 14px 0 0;
    padding: 0;
    border: none;
    min-width: 0;
}

.rate-tags legend[b-pumpe3hcuw] {
    padding: 0;
    margin: 0 0 8px;
    font-weight: 600;
    font-size: 0.95rem;
}

.rate-chips[b-pumpe3hcuw] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rate-chip[b-pumpe3hcuw] {
    font: inherit;
    font-size: 0.9rem;
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--rate-border);
    background: var(--rate-bg);
    color: var(--rate-text);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.rate-chip.on[b-pumpe3hcuw] {
    border-color: var(--rate-brand);
    background: color-mix(in srgb, var(--rate-brand) 14%, var(--rate-card));
    color: var(--rate-text);
    font-weight: 600;
}

.rate-chip:focus-visible[b-pumpe3hcuw] {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rate-brand) 30%, transparent);
}

/* Comment and contact */
.rate-label[b-pumpe3hcuw] {
    display: block;
    margin: 18px 0 8px;
    font-weight: 600;
    font-size: 0.95rem;
}

.rate-input[b-pumpe3hcuw] {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font: inherit;
    font-size: 1rem;      /* 16px: no zoom-on-focus on iOS */
    padding: 12px 14px;
    border: 1px solid var(--rate-border);
    border-radius: 12px;
    background: var(--rate-bg);
    color: var(--rate-text);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.rate-textarea[b-pumpe3hcuw] { resize: vertical; min-height: 84px; }

.rate-input[b-pumpe3hcuw]::placeholder { color: var(--rate-muted); opacity: 1; }

.rate-input:focus[b-pumpe3hcuw] {
    outline: none;
    border-color: var(--rate-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rate-brand) 25%, transparent);
}

.rate-check[b-pumpe3hcuw] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 0;
    font-size: 0.95rem;
    cursor: pointer;
}

.rate-check input[b-pumpe3hcuw] {
    width: 20px;
    height: 20px;
    min-width: 0;
    margin: 0;
    accent-color: var(--rate-brand);
    flex-shrink: 0;
}

/* site.css draws the staff's red ring round any focused input; this page's own, for the keyboard only. */
.rate-check input:focus[b-pumpe3hcuw] { outline: none; }
.rate-check input:focus-visible[b-pumpe3hcuw] { outline: 2px solid var(--rate-brand); outline-offset: 2px; }

.rate-contact[b-pumpe3hcuw] {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.rate-hint[b-pumpe3hcuw] {
    margin: 0;
    font-size: 0.82rem;
    color: var(--rate-muted);
}

.rate-error[b-pumpe3hcuw] {
    margin: 14px 0 0;
    color: var(--rate-error);
    font-size: 0.9rem;
}

/* The button */
.rate-btn[b-pumpe3hcuw] {
    display: block;
    width: 100%;
    margin-top: 18px;
    box-sizing: border-box;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    min-height: 52px;
    padding: 14px 20px;
    border: none;
    border-radius: 14px;
    background: var(--rate-brand);
    color: #fff;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 10px 20px -12px var(--rate-brand);
    transition: transform 0.1s, opacity 0.15s;
}

.rate-btn:active[b-pumpe3hcuw] { transform: scale(0.98); }
.rate-btn:disabled[b-pumpe3hcuw] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

.rate-btn-secondary[b-pumpe3hcuw] {
    background: transparent;
    color: var(--rate-text);
    border: 1.5px solid var(--rate-border);
    box-shadow: none;
}

/* After sending */
.rate-thanks[b-pumpe3hcuw] { text-align: center; }
.rate-thanks h1[b-pumpe3hcuw] { margin: 10px 0 6px; font-size: 1.5rem; }
.rate-thanks p[b-pumpe3hcuw] { margin: 0 0 6px; }

.rate-thanks-mark[b-pumpe3hcuw],
.rate-state-icon[b-pumpe3hcuw] {
    width: 56px;
    height: 56px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    background: var(--rate-brand);
}

.rate-state-icon[b-pumpe3hcuw] {
    background: color-mix(in srgb, var(--rate-brand) 16%, var(--rate-card));
    color: var(--rate-brand);
}

.rate-state-title[b-pumpe3hcuw] { margin: 12px 0 6px; font-size: 1.3rem; }

.rate-google h2[b-pumpe3hcuw] { margin: 0 0 6px; font-size: 1.1rem; }

.rate-privacy[b-pumpe3hcuw] {
    max-width: 460px;
    margin: 6px auto 0;
    padding: 0 6px;
    text-align: center;
    font-size: 0.78rem;
    color: var(--rate-muted);
}

@media (prefers-reduced-motion: reduce) {
    .rate-star[b-pumpe3hcuw], .rate-chip[b-pumpe3hcuw], .rate-btn[b-pumpe3hcuw], .rate-input[b-pumpe3hcuw] { transition: none; }
    .rate-spinner[b-pumpe3hcuw] { animation-duration: 2.5s; }
}
/* /Pages/QrBuffet.razor.rz.scp.css */
/* Every rule hangs from .qrbuf, the page's one root (see QrBuffet.razor): written "::deep .screen …" they needed a
   scoped ancestor the screens never had. */

/* Shields against the staff app's global CSS (site.css): its POS quantity grid (.qty, 116 px) squeezed dish names to
   a word a line; its generic input rule (220 px minimum) pushed the header off the screen. */
.qrbuf[b-866ycawge1]  .qty {
    display: inline-block;
    grid-template-columns: none;
    gap: 0;
    min-width: 24px;
}

.qrbuf[b-866ycawge1]  input,
.qrbuf[b-866ycawge1]  select,
.qrbuf[b-866ycawge1]  textarea {
    min-width: 0;
}

.qrbuf[b-866ycawge1]  .screen {
    min-height: 100vh;
    background:
        radial-gradient(ellipse 1200px 600px at 50% 0%, rgba(245, 158, 11, 0.10) 0%, transparent 70%),
        radial-gradient(ellipse 800px 400px at 50% 100%, rgba(236, 72, 153, 0.08) 0%, transparent 70%),
        linear-gradient(135deg, #0a0c12 0%, #1e1b4b 100%);
    color: #f1f5f9;
    padding: 24px 20px;
    box-sizing: border-box;
    /* Tells the browser to render native widgets (select dropdown
       options, scrollbars, focus rings) with dark-mode chrome. Without
       this, the lang <select>'s options render as black text on a
       white panel inside an otherwise-dark UI. */
    color-scheme: dark;
}

.qrbuf[b-866ycawge1]  .screen.center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 22px;
    padding-top: 56px;
    padding-bottom: 40px;
}

.qrbuf[b-866ycawge1]  .screen.welcome {
    max-width: 520px;
    margin: 0 auto;
}

/* Soft glow sphere behind the title — gives the page a high-end feel
   on first paint without distracting from the content. */
.qrbuf[b-866ycawge1]  .screen.welcome::before {
    content: '';
    position: fixed;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.qrbuf[b-866ycawge1]  .screen.welcome > * {
    position: relative;
    z-index: 1;
}

.qrbuf[b-866ycawge1]  .muted {
    color: #94a3b8;
}

.qrbuf[b-866ycawge1]  .hint {
    color: #94a3b8;
    font-size: 0.82rem;
    margin-top: 10px;
    text-align: left;
    padding-left: 2px;
}

.qrbuf[b-866ycawge1]  .guest-row .hint {
    color: #fbbf24;
    margin-top: 10px;
    font-weight: 500;
}

.qrbuf[b-866ycawge1]  .spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #f59e0b;
    border-radius: 50%;
    animation: spin-b-866ycawge1 1s linear infinite;
}

@keyframes spin-b-866ycawge1 {
    to { transform: rotate(360deg); }
}

/* Welcome heading — solid bright yellow with a strong drop shadow.
   We previously layered a gradient-text effect (color:transparent +
   background-clip:text) but the @supports gate matched on browsers
   where the effect rendered MUDDY/dark anyway (operator report
   2026-05-12 with screenshot). Dropping the effect entirely is the
   only way to guarantee the heading reads on every device. The
   solid colour is still vivid against the dark theme; the
   text-shadow gives it depth without the gradient gamble. */
.qrbuf[b-866ycawge1]  .welcome h1 {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    margin: 4px 0 6px;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--qr-accent, #fde047) !important;
    -webkit-text-fill-color: var(--qr-accent, #fde047) !important;
    background: none !important;
    text-shadow: 0 2px 12px rgba(245, 158, 11, 0.35);
}

/* When a hero image is configured the page sets the --qr-hero-bg
   variable to "linear-gradient(overlay, overlay), url(...)" — both the
   dark veil and the image come in together. When unset the background
   falls back to the page default (no overlay). */
.qrbuf[b-866ycawge1]  .screen.welcome {
    background: var(--qr-hero-bg, transparent);
    background-size: cover;
    background-position: center;
}

/* Brand logo on the welcome screen — sits above the title. Restaurant
   sets it in Admin → Buffet → Apariencia. Falls back to nothing if not
   configured. Sized so it doesn't compete with the welcome headline. */
.qrbuf[b-866ycawge1]  .qrbuf-brand-logo {
    max-width: 140px;
    max-height: 80px;
    object-fit: contain;
    margin: 4px auto 8px;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

/* Promo banner — single coloured pill above the featured strip. Background
   + text color come from the admin config; if not set, defaults to the
   restaurant's brand accent. Click navigates to the optional URL. */
.qrbuf[b-866ycawge1]  .qbf-promo-banner {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    flex-wrap: wrap;
    margin: 12px 8px;
    padding: 12px 16px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    text-align: center;
    text-decoration: none;
    line-height: 1.35;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.qrbuf[b-866ycawge1]  .qbf-promo-text { flex: 1; min-width: 0; }
.qrbuf[b-866ycawge1]  .qbf-promo-countdown {
    background: rgba(0, 0, 0, 0.22);
    color: inherit;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    white-space: nowrap;
}
.qrbuf[b-866ycawge1]  a.qbf-promo-banner:hover { opacity: 0.92; }

/* Featured carousel — horizontal scroll strip with card-style tiles.
   On mobile the cards stay ~140px so 2 fit on screen with the third
   peeking; on desktop they grow. Snap-scrolling so swipe lands cleanly. */
.qrbuf[b-866ycawge1]  .qbf-featured-strip {
    margin: 8px 0 12px;
    padding: 0 8px;
}
.qrbuf[b-866ycawge1]  .qbf-featured-title {
    color: #f1f5f9;
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 8px;
    letter-spacing: 0.03em;
}
.qrbuf[b-866ycawge1]  .qbf-featured-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.qrbuf[b-866ycawge1]  .qbf-featured-track::-webkit-scrollbar { display: none; }
.qrbuf[b-866ycawge1]  .qbf-featured-card {
    flex: 0 0 140px;
    scroll-snap-align: start;
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    display: flex; flex-direction: column;
    padding: 0;
    transition: transform 0.12s ease, border-color 0.12s ease;
    color: inherit;
}
.qrbuf[b-866ycawge1]  .qbf-featured-card:hover {
    transform: translateY(-2px);
    border-color: var(--qr-accent, #fde047);
}
.qrbuf[b-866ycawge1]  .qbf-featured-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: rgba(15, 23, 42, 0.5);
    display: block;
}
.qrbuf[b-866ycawge1]  .qbf-featured-img.empty {
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem;
    color: #475569;
}
.qrbuf[b-866ycawge1]  .qbf-featured-name {
    padding: 8px 10px 4px;
    font-weight: 600;
    color: #f1f5f9;
    font-size: 0.88rem;
    line-height: 1.25;
    /* Clamp to 2 lines max so the carousel stays a consistent height. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Customer feedback widget on the Expired view. 1-tap stars; the comment
   + buttons collapse until the customer signals intent. Light footprint;
   designed for the "I just paid, ask quickly" moment. */
.qrbuf[b-866ycawge1]  .qbf-feedback {
    margin-top: 26px;
    padding: 18px 20px;
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    max-width: 360px;
    width: 100%;
}
.qrbuf[b-866ycawge1]  .qbf-feedback-prompt {
    margin: 0 0 10px;
    text-align: center;
    color: #cbd5e1;
    font-weight: 600;
}
.qrbuf[b-866ycawge1]  .qbf-stars {
    display: flex; justify-content: center; gap: 6px;
    margin-bottom: 12px;
}
.qrbuf[b-866ycawge1]  .qbf-star {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 2.2rem;
    color: rgba(148, 163, 184, 0.4);
    padding: 4px;
    line-height: 1;
    transition: transform 0.08s ease, color 0.12s ease;
}
.qrbuf[b-866ycawge1]  .qbf-star:hover { transform: scale(1.08); }
.qrbuf[b-866ycawge1]  .qbf-star.filled { color: var(--qr-accent, #fde047); }
.qrbuf[b-866ycawge1]  .qbf-feedback-comment {
    width: 100%;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: #f1f5f9;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.95rem;
    resize: vertical;
    margin-bottom: 10px;
    box-sizing: border-box;
}
.qrbuf[b-866ycawge1]  .qbf-feedback-actions {
    display: flex; gap: 10px; justify-content: flex-end;
}
.qrbuf[b-866ycawge1]  .qbf-feedback-skip {
    background: transparent;
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #94a3b8;
    padding: 8px 16px;
    border-radius: 10px;
    cursor: pointer;
}
.qrbuf[b-866ycawge1]  .qbf-feedback-submit {
    background: var(--qr-accent, #fde047);
    color: #1a1400;
    border: none;
    padding: 8px 18px;
    border-radius: 10px;
    font-weight: 800;
    cursor: pointer;
}
.qrbuf[b-866ycawge1]  .qbf-feedback-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.qrbuf[b-866ycawge1]  .qbf-feedback-thanks {
    margin-top: 20px;
    color: #4ade80;
    font-weight: 600;
}

.qrbuf[b-866ycawge1]  .qbf-featured-pill {
    margin: 4px 10px 10px;
    background: var(--qr-accent, #fde047);
    color: #1a1400;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    align-self: flex-start;
    letter-spacing: 0.04em;
}

.qrbuf[b-866ycawge1]  .welcome .muted {
    font-size: 0.95rem;
    color: #cbd5e1;
    max-width: 360px;
    margin-bottom: 8px;
}

.qrbuf[b-866ycawge1]  .guest-row {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 380px;
    margin: 6px 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    padding: 16px 18px 18px;
    backdrop-filter: blur(8px);
}

.qrbuf[b-866ycawge1]  .guest-row-label {
    font-size: 0.88rem;
    color: #cbd5e1;
    margin-bottom: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: left;
}

.qrbuf[b-866ycawge1]  .guest-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: 100%;
}

.qrbuf[b-866ycawge1]  .kids-grid {
    grid-template-columns: repeat(6, 1fr);
}

/* ===== Allergy notes (welcome screen + menu badge) ===== */

.qrbuf[b-866ycawge1]  .allergy-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 380px;
    margin: 6px 0 0;
}

.qrbuf[b-866ycawge1]  .allergy-toggle {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    padding: 9px 14px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.qrbuf[b-866ycawge1]  .allergy-toggle:hover,
.qrbuf[b-866ycawge1]  .allergy-toggle.open {
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.08);
}

.qrbuf[b-866ycawge1]  .allergy-textarea {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #f1f5f9;
    padding: 10px 12px;
    font-size: 1rem;   /* 16 px: iOS zooms into a smaller box */
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 60px;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.qrbuf[b-866ycawge1]  .allergy-textarea:focus {
    outline: none;
    border-color: rgba(245, 158, 11, 0.6);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.qrbuf[b-866ycawge1]  .allergy-row .hint {
    color: #94a3b8;
    font-size: 0.78rem;
    margin: 0;
    text-align: left;
    padding-left: 2px;
}

/* Persistent allergy reminder on the menu view — sticky chip below
   the header so the customer sees their note is on file with the
   kitchen. Amber border to suggest "important info, not a warning". */
.qrbuf[b-866ycawge1]  .allergy-badge {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(239, 68, 68, 0.1) 100%);
    border: 1px solid rgba(245, 158, 11, 0.5);
    color: #fcd34d;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 0.86rem;
    line-height: 1.35;
    margin: 0 0 12px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}

.qrbuf[b-866ycawge1]  .allergy-badge strong {
    color: #fde047;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.78rem;
}

.qrbuf[b-866ycawge1]  .waste-notice {
    /* Soft amber alert — sets expectation about the waste fee
       without scaring the customer. Sushi-bar industry norm. */
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #fcd34d;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.82rem;
    line-height: 1.4;
    max-width: 380px;
    margin: 4px 0;
    text-align: center;
}

.qrbuf[b-866ycawge1]  .group-banner {
    background: linear-gradient(135deg, #ec4899 0%, #f59e0b 100%);
    color: #fff;
    padding: 14px 22px;
    border-radius: 16px;
    font-weight: 700;
    font-size: 0.98rem;
    margin: 12px 0 4px;
    box-shadow: 0 10px 28px rgba(236, 72, 153, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    max-width: 380px;
    text-align: center;
    animation: gb-shimmer-b-866ycawge1 3s ease-in-out infinite;
}

@keyframes gb-shimmer-b-866ycawge1 {
    0%, 100% { box-shadow: 0 10px 28px rgba(236, 72, 153, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
    50% { box-shadow: 0 14px 36px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
}

/* Fade-up entrance for the welcome screen elements */
.qrbuf[b-866ycawge1]  .screen.welcome > * {
    animation: welcome-in-b-866ycawge1 0.55s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
.qrbuf[b-866ycawge1]  .screen.welcome > *:nth-child(1) { animation-delay: 0.05s; }
.qrbuf[b-866ycawge1]  .screen.welcome > *:nth-child(2) { animation-delay: 0.12s; }
.qrbuf[b-866ycawge1]  .screen.welcome > *:nth-child(3) { animation-delay: 0.18s; }
.qrbuf[b-866ycawge1]  .screen.welcome > *:nth-child(4) { animation-delay: 0.24s; }
.qrbuf[b-866ycawge1]  .screen.welcome > *:nth-child(5) { animation-delay: 0.30s; }
.qrbuf[b-866ycawge1]  .screen.welcome > *:nth-child(6) { animation-delay: 0.36s; }
.qrbuf[b-866ycawge1]  .screen.welcome > *:nth-child(7) { animation-delay: 0.42s; }

@keyframes welcome-in-b-866ycawge1 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.qrbuf[b-866ycawge1]  .guest-btn {
    padding: 16px 0;
    background: rgba(15, 23, 42, 0.6);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: #f1f5f9;
    font-size: 1.25rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.qrbuf[b-866ycawge1]  .guest-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    opacity: 0;
    transition: opacity 0.2s;
    z-index: -1;
}

.qrbuf[b-866ycawge1]  .guest-btn:hover:not(:disabled) {
    border-color: rgba(245, 158, 11, 0.5);
    transform: translateY(-1px);
}

.qrbuf[b-866ycawge1]  .guest-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.qrbuf[b-866ycawge1]  .guest-btn.selected {
    border-color: transparent;
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    color: #fff;
    box-shadow: 0 8px 22px rgba(245, 158, 11, 0.4), 0 0 0 4px rgba(245, 158, 11, 0.15);
    transform: translateY(-1px);
}

.qrbuf[b-866ycawge1]  .btn {
    padding: 16px 36px;
    border: none;
    border-radius: 14px;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s, opacity 0.15s;
    margin-top: 8px;
    min-width: 240px;
}

.qrbuf[b-866ycawge1]  .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.qrbuf[b-866ycawge1]  .btn-primary {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    color: #fff;
    box-shadow: 0 10px 28px rgba(239, 68, 68, 0.4), 0 0 0 0 rgba(245, 158, 11, 0.5);
    position: relative;
}

/* Idle pulse — only when the button is actually actionable. Draws the
   eye on the welcome screen so the operator/customer's first instinct
   is to tap "Empezar". Stops on hover and when disabled so the cue
   doesn't fight active interaction or fire on a not-yet-ready state. */
.qrbuf[b-866ycawge1]  .btn-primary:not(:disabled) {
    animation: btn-primary-pulse-b-866ycawge1 2.4s ease-in-out infinite;
}
.qrbuf[b-866ycawge1]  .btn-primary:hover:not(:disabled),
.qrbuf[b-866ycawge1]  .btn-primary:active:not(:disabled) {
    animation: none;
}
@keyframes btn-primary-pulse-b-866ycawge1 {
    0%, 100% {
        box-shadow: 0 10px 28px rgba(239, 68, 68, 0.4), 0 0 0 0 rgba(245, 158, 11, 0.5);
    }
    50% {
        box-shadow: 0 14px 32px rgba(239, 68, 68, 0.55), 0 0 0 6px rgba(245, 158, 11, 0.15);
    }
}

.qrbuf[b-866ycawge1]  .btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 50%);
    pointer-events: none;
}

.qrbuf[b-866ycawge1]  .btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(239, 68, 68, 0.55), 0 0 0 4px rgba(245, 158, 11, 0.2);
}

.qrbuf[b-866ycawge1]  .btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

.qrbuf[b-866ycawge1]  .btn-secondary {
    background: #334155;
    color: #cbd5e1;
}

.qrbuf[b-866ycawge1]  .last-call-banner {
    background: linear-gradient(90deg, #b91c1c 0%, #dc2626 35%, #f59e0b 50%, #dc2626 65%, #b91c1c 100%);
    background-size: 200% 100%;
    color: #fff;
    text-align: center;
    padding: 16px 14px;
    font-weight: 900;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: -20px -20px 18px;
    box-shadow: 0 8px 28px rgba(220, 38, 38, 0.6), 0 0 0 0 rgba(239, 68, 68, 0);
    animation: lc-pulse-b-866ycawge1 3s linear infinite, lc-glow-b-866ycawge1 1.6s ease-in-out infinite;
    position: relative;
    z-index: 5;
}

.qrbuf[b-866ycawge1]  .last-call-banner::before {
    content: '⚠️';
    margin-right: 8px;
    font-size: 1.1rem;
    animation: lc-shake-b-866ycawge1 1.4s ease-in-out infinite;
    display: inline-block;
}

@keyframes lc-pulse-b-866ycawge1 {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@keyframes lc-glow-b-866ycawge1 {
    0%, 100% { box-shadow: 0 8px 28px rgba(220, 38, 38, 0.6), 0 0 0 0 rgba(239, 68, 68, 0); }
    50%      { box-shadow: 0 12px 36px rgba(220, 38, 38, 0.75), 0 0 0 6px rgba(239, 68, 68, 0.15); }
}

@keyframes lc-shake-b-866ycawge1 {
    0%, 100% { transform: rotate(0); }
    25%      { transform: rotate(-8deg); }
    75%      { transform: rotate(8deg); }
}

.qrbuf[b-866ycawge1]  .lang-bar.top {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    padding: 6px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    backdrop-filter: blur(12px);
}

.qrbuf[b-866ycawge1]  .lang-pill {
    padding: 8px 16px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s;
}

.qrbuf[b-866ycawge1]  .lang-pill:hover:not(.active) {
    color: #f1f5f9;
    background: rgba(255, 255, 255, 0.04);
}

.qrbuf[b-866ycawge1]  .lang-pill.active {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.qrbuf[b-866ycawge1]  .lang-select {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    color: #f1f5f9;
    padding: 6px 8px;
    font-size: 1rem;   /* 16 px: iOS zooms into a smaller box */
}

.qrbuf[b-866ycawge1]  .lang-select:focus {
    outline: none;
    border-color: #f59e0b;
}

.qrbuf[b-866ycawge1]  .header-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* The venue and its round on the left, the waiter, the language and the time on the right — wrapping on a narrow phone
   rather than pushing the time off the screen (design audit, 2026-10-19). */
.qrbuf[b-866ycawge1]  .menu-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.qrbuf[b-866ycawge1]  .menu-header > div:first-child {
    flex: 1 1 140px;
    min-width: 0;
}

.qrbuf[b-866ycawge1]  .lang-select {
    max-width: 96px;
}

.qrbuf[b-866ycawge1]  .menu-header h2 {
    margin: 6px 0 0;
    font-size: 1.4rem;
}

.qrbuf[b-866ycawge1]  .round-pill {
    display: inline-block;
    padding: 4px 12px;
    background: linear-gradient(90deg, #f59e0b, #ef4444);
    color: #fff;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.qrbuf[b-866ycawge1]  .time-left {
    text-align: right;
}

.qrbuf[b-866ycawge1]  .time-left .label {
    display: block;
    font-size: 0.7rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.qrbuf[b-866ycawge1]  .time-left strong {
    font-size: 1.2rem;
    color: #fbbf24;
    font-variant-numeric: tabular-nums;
}

.qrbuf[b-866ycawge1]  .cats {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.qrbuf[b-866ycawge1]  .cats::-webkit-scrollbar { display: none; }

.qrbuf[b-866ycawge1]  .cat-tab {
    flex-shrink: 0;
    padding: 9px 16px;
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    color: #cbd5e1;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
    -webkit-tap-highlight-color: transparent;
}

.qrbuf[b-866ycawge1]  .cat-tab:hover:not(.active) {
    border-color: rgba(245, 158, 11, 0.4);
    color: #f1f5f9;
}

.qrbuf[b-866ycawge1]  .cat-tab.active {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.4);
    transform: translateY(-1px);
}

.qrbuf[b-866ycawge1]  .cat-tab.drinks-cat {
    border-color: rgba(56, 189, 248, 0.4);
}

.qrbuf[b-866ycawge1]  .cat-tab.drinks-cat.active {
    background: linear-gradient(135deg, #38bdf8 0%, #6366f1 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 18px rgba(56, 189, 248, 0.4);
}

.qrbuf[b-866ycawge1]  .drinks-notice {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #7dd3fc;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.88rem;
    margin-bottom: 12px;
}

.qrbuf[b-866ycawge1]  .items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 96px;
}

.qrbuf[b-866ycawge1]  .item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s, background 0.18s;
    backdrop-filter: blur(8px);
    position: relative;
}

.qrbuf[b-866ycawge1]  .item:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

.qrbuf[b-866ycawge1]  .item.in-round {
    border-color: rgba(245, 158, 11, 0.55);
    background: linear-gradient(135deg, rgba(28, 22, 16, 0.95) 0%, rgba(45, 28, 16, 0.95) 100%);
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25), 0 8px 24px rgba(245, 158, 11, 0.18);
}

.qrbuf[b-866ycawge1]  .item.premium {
    border-color: #a855f7;
    background: linear-gradient(135deg, #1e293b 0%, #2a1d3a 100%);
}

.qrbuf[b-866ycawge1]  .item.premium.in-round {
    border-color: #f59e0b;
    background: linear-gradient(135deg, #1c1610 0%, #2a1d3a 100%);
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.4);
}

/* Stock-remaining pill — red gradient, pulsing, sits next to the
   premium star. Only shown when ≤ 5 left today (counter-pressure
   to nudge customers to order before it runs out). */
.qrbuf[b-866ycawge1]  .stock-pill {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 2px 8px;
    background: linear-gradient(90deg, #b91c1c, #dc2626);
    color: #fff;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.4);
    animation: stock-pulse-b-866ycawge1 1.6s ease-in-out infinite;
}

@keyframes stock-pulse-b-866ycawge1 {
    0%, 100% { transform: scale(1); box-shadow: 0 2px 6px rgba(220, 38, 38, 0.4); }
    50%      { transform: scale(1.05); box-shadow: 0 4px 12px rgba(220, 38, 38, 0.6); }
}

.qrbuf[b-866ycawge1]  .premium-pill {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 8px;
    background: linear-gradient(90deg, #a855f7, #ec4899);
    color: #fff;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    vertical-align: middle;
}

.qrbuf[b-866ycawge1]  .qty.with-cap {
    color: #a855f7;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.qrbuf[b-866ycawge1]  .item img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.qrbuf[b-866ycawge1]  .item.in-round img {
    transform: scale(1.04);
}

.qrbuf[b-866ycawge1]  .item-body {
    flex: 1;
    min-width: 0;
}

.qrbuf[b-866ycawge1]  .item-title {
    font-weight: 600;
    color: #f1f5f9;
}

.qrbuf[b-866ycawge1]  .item-desc {
    font-size: 0.82rem;
    color: #94a3b8;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Precautionary cross-contamination warning — amber, prominent enough
   to read at a glance but not an error/blocker (the dish is allowed). */
.qrbuf[b-866ycawge1]  .item-trace-warning {
    font-size: 0.8rem;
    font-weight: 600;
    color: #fbbf24;
    margin-top: 4px;
}

.qrbuf[b-866ycawge1]  .item-price {
    font-size: 0.85rem;
    color: #cbd5e1;
    margin-top: 4px;
}

.qrbuf[b-866ycawge1]  .item-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.qrbuf[b-866ycawge1]  .step {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.8);
    color: #f1f5f9;
    font-size: 1.4rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s, background 0.18s;
    -webkit-tap-highlight-color: transparent;
}

.qrbuf[b-866ycawge1]  .step:active:not(:disabled) {
    transform: scale(0.92);
}

.qrbuf[b-866ycawge1]  .step:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.qrbuf[b-866ycawge1]  .step.plus {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4);
}

.qrbuf[b-866ycawge1]  .step.plus:hover:not(:disabled) {
    box-shadow: 0 8px 22px rgba(245, 158, 11, 0.55);
    transform: translateY(-1px);
}

.qrbuf[b-866ycawge1]  .step.plus:active:not(:disabled) {
    transform: scale(0.92);
}

.qrbuf[b-866ycawge1]  .qty {
    min-width: 24px;
    text-align: center;
    font-weight: 800;
    color: #fbbf24;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.qrbuf[b-866ycawge1]  .round-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(10, 12, 18, 0.85) 0%, rgba(10, 12, 18, 0.98) 100%);
    border-top: 1px solid rgba(245, 158, 11, 0.15);
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    backdrop-filter: blur(20px);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4);
}

.qrbuf[b-866ycawge1]  .round-bar::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(245, 158, 11, 0.5) 50%, transparent 100%);
    pointer-events: none;
}

.qrbuf[b-866ycawge1]  .round-count {
    color: #cbd5e1;
    font-size: 0.95rem;
    font-weight: 600;
}

.qrbuf[b-866ycawge1]  .round-count strong {
    color: #fbbf24;
    font-size: 1.25rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.qrbuf[b-866ycawge1]  .round-bar .btn-primary {
    margin-top: 0;
    min-width: 0;
    padding: 14px 22px;
    font-size: 1rem;
}

.qrbuf[b-866ycawge1]  .cap-hit {
    color: #ef4444;
    font-size: 0.82rem;
}

.qrbuf[b-866ycawge1]  .hint-inline {
    color: #94a3b8;
    font-size: 0.78rem;
    margin-left: 4px;
}

.qrbuf[b-866ycawge1]  .screen.cooldown::before {
    content: '';
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.12) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
    animation: cd-glow-b-866ycawge1 4s ease-in-out infinite;
}

.qrbuf[b-866ycawge1]  .screen.cooldown > * { position: relative; z-index: 1; }

@keyframes cd-glow-b-866ycawge1 {
    0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.05); }
}

.qrbuf[b-866ycawge1]  .cooldown h2 {
    font-size: clamp(1.4rem, 3.6vw, 1.8rem);
    margin: 0;
    font-weight: 900;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #fde047 0%, #f59e0b 50%, #ef4444 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 12px rgba(245, 158, 11, 0.25));
}

.qrbuf[b-866ycawge1]  .cooldown-text {
    font-size: 1.05rem;
    color: #cbd5e1;
}

.qrbuf[b-866ycawge1]  .cooldown-text strong {
    color: #fbbf24;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.qrbuf[b-866ycawge1]  .cooldown-text .ready {
    color: #34d399;
    font-size: 1.3rem;
    font-weight: 800;
    display: inline-block;
    animation: ready-pulse-b-866ycawge1 1.6s ease-in-out infinite;
    text-shadow: 0 0 24px rgba(52, 211, 153, 0.5);
}

@keyframes ready-pulse-b-866ycawge1 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

.qrbuf[b-866ycawge1]  .rounds-summary {
    color: #94a3b8;
    font-size: 0.9rem;
}

.qrbuf[b-866ycawge1]  .rounds-summary strong {
    color: #fbbf24;
}

.qrbuf[b-866ycawge1]  .expired h2 {
    font-size: clamp(1.5rem, 4vw, 2rem);
    margin: 0;
    font-weight: 900;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #fde047 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 10px rgba(245, 158, 11, 0.2));
}

.qrbuf[b-866ycawge1]  .awaiting-icon {
    font-size: 4rem;
    animation: awaiting-bob-b-866ycawge1 2.4s ease-in-out infinite;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
}

.qrbuf[b-866ycawge1]  .awaiting-icon::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(251, 191, 36, 0.3);
    animation: awaiting-ring-b-866ycawge1 2.4s ease-out infinite;
}

/* Stage-specific tint on the awaiting icon — same animation, but the
   ring + radial glow shift colour to signal progress. Green for ready
   = the actionable state (waiter on the way). */
.qrbuf[b-866ycawge1]  .awaiting-icon.stage-ready::before {
    border-color: rgba(52, 211, 153, 0.5);
}
.qrbuf[b-866ycawge1]  .awaiting-icon.stage-ready::after {
    background: radial-gradient(circle, rgba(52, 211, 153, 0.3) 0%, transparent 70%);
}
.qrbuf[b-866ycawge1]  .awaiting-icon.stage-delivered::before {
    border-color: rgba(56, 189, 248, 0.5);
}
.qrbuf[b-866ycawge1]  .awaiting-icon.stage-delivered::after {
    background: radial-gradient(circle, rgba(56, 189, 248, 0.3) 0%, transparent 70%);
}

.qrbuf[b-866ycawge1]  .awaiting-icon::after {
    content: '';
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.25) 0%, transparent 70%);
    z-index: -1;
}

@keyframes awaiting-bob-b-866ycawge1 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes awaiting-ring-b-866ycawge1 {
    0% { transform: scale(0.85); opacity: 0; border-color: rgba(251, 191, 36, 0.6); }
    50% { opacity: 1; }
    100% { transform: scale(1.18); opacity: 0; border-color: rgba(245, 158, 11, 0.1); }
}

.qrbuf[b-866ycawge1]  .awaiting h2 {
    margin: 0;
    font-size: clamp(1.4rem, 3.6vw, 1.8rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #fde047 0%, #fbbf24 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.qrbuf[b-866ycawge1]  .awaiting .muted {
    max-width: 320px;
}

/* Call-waiter button — small bell in the menu header next to the
   language picker. Inline variant for cooldown/awaiting views uses
   the .btn .btn-secondary base + .call-waiter-inline class for a
   slightly muted look so it doesn't compete with the primary CTA. */
.qrbuf[b-866ycawge1]  .call-waiter-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.1s, box-shadow 0.18s;
    -webkit-tap-highlight-color: transparent;
}

.qrbuf[b-866ycawge1]  .call-waiter-btn:hover:not(:disabled) {
    background: rgba(245, 158, 11, 0.22);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.qrbuf[b-866ycawge1]  .call-waiter-btn:active:not(:disabled) {
    transform: scale(0.92);
}

.qrbuf[b-866ycawge1]  .call-waiter-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}

/* Cooldown state — the bell becomes a countdown chip. Neutral slate so
   it doesn't read as "primary" any more (the call already went out;
   the customer is just waiting). The number inside replaces the bell. */
.qrbuf[b-866ycawge1]  .call-waiter-btn.cooldown {
    background: rgba(148, 163, 184, 0.15);
    border-color: rgba(148, 163, 184, 0.35);
    color: #cbd5e1;
    opacity: 1;
    cursor: not-allowed;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.qrbuf[b-866ycawge1]  .call-waiter-btn.cooldown .cd-num {
    line-height: 1;
}
.qrbuf[b-866ycawge1]  .call-waiter-inline.cooldown {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.3);
    color: #cbd5e1;
    opacity: 1;
    cursor: not-allowed;
}

.qrbuf[b-866ycawge1]  .call-waiter-inline {
    margin-top: 12px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fbbf24;
}

.qrbuf[b-866ycawge1]  .call-waiter-inline:hover:not(:disabled) {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.6);
}

/* Toast variant — the success-green pairs with the call-waiter
   confirmation; the error-red is the default. */
.qrbuf[b-866ycawge1]  .error-toast.toast-success {
    background: linear-gradient(135deg, #047857 0%, #10b981 100%);
    box-shadow: 0 8px 22px rgba(16, 185, 129, 0.4);
}

/* Hub-state badge in the menu header — a subtle "reconnecting…" hint
   so the customer knows realtime updates may lag. Spins gently. */
.qrbuf[b-866ycawge1]  .hub-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #fbbf24;
    font-size: 0.95rem;
    font-weight: 700;
    animation: hub-spin-b-866ycawge1 1.6s linear infinite;
    cursor: help;
}

@keyframes hub-spin-b-866ycawge1 {
    to { transform: rotate(360deg); }
}

/* Error toast — shown above the round-bar in the menu view, or under
   the welcome CTA. Replaces silent Console.Error.WriteLine failures. */
.qrbuf[b-866ycawge1]  .error-toast {
    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
    color: #fff;
    padding: 12px 16px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.92rem;
    margin-top: 8px;
    text-align: center;
    box-shadow: 0 8px 22px rgba(220, 38, 38, 0.4);
    animation: toast-in-b-866ycawge1 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 380px;
}

.qrbuf[b-866ycawge1]  .error-toast.floating {
    position: fixed;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    margin: 0;
    width: calc(100% - 32px);
    max-width: 420px;
}

@keyframes toast-in-b-866ycawge1 {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.qrbuf[b-866ycawge1]  .error-toast.floating {
    animation: toast-in-float-b-866ycawge1 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes toast-in-float-b-866ycawge1 {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Keyboard focus rings (orange to match the warm palette) */
.qrbuf[b-866ycawge1]  .btn:focus-visible,
.qrbuf[b-866ycawge1]  .step:focus-visible,
.qrbuf[b-866ycawge1]  .cat-tab:focus-visible,
.qrbuf[b-866ycawge1]  .lang-pill:focus-visible,
.qrbuf[b-866ycawge1]  .guest-btn:focus-visible,
.qrbuf[b-866ycawge1]  .lang-select:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 3px;
}

/* Respect users who prefer reduced motion — keep state changes
   visible but kill the looping/decorative animations. Setting
   `forwards` and explicit terminal opacity prevents the
   awaiting-ring / cd-glow keyframes from freezing mid-cycle and
   leaving the ring stuck visible. */
@media (prefers-reduced-motion: reduce) {
    .qrbuf[b-866ycawge1]  *,
    .qrbuf[b-866ycawge1]  *::before,
    .qrbuf[b-866ycawge1]  *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        animation-fill-mode: forwards !important;
        transition-duration: 0.01ms !important;
    }
    .qrbuf[b-866ycawge1]  .awaiting-icon::before { opacity: 0 !important; }
    .qrbuf[b-866ycawge1]  .screen.cooldown::before { opacity: 0.6 !important; transform: translateX(-50%) scale(1) !important; }
}

/* Staff-driven guest-count waiting state. Big amber clock icon + a
   centered message. /status polls every 4s in this state so the
   transition is near-instant once the waiter opens the session. */
.qrbuf[b-866ycawge1]  .staff-pending-icon {
    font-size: 5rem;
    line-height: 1;
    margin: 18px 0 8px;
    animation: staff-pending-pulse-b-866ycawge1 2.4s ease-in-out infinite;
    filter: drop-shadow(0 4px 18px rgba(245, 158, 11, 0.35));
}

@keyframes staff-pending-pulse-b-866ycawge1 {
    0%, 100% { transform: scale(1); opacity: 0.95; }
    50%      { transform: scale(1.08); opacity: 1; }
}

/* Allergen chip grid — 4 cols on mobile, taps toggle selection. Selected
   chips glow amber and add a checkmark; unselected stay neutral. The
   grid sits between the toggle button and the free-text textarea on
   the welcome screen. */
.qrbuf[b-866ycawge1]  .allergen-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin: 4px 0 10px;
}

.qrbuf[b-866ycawge1]  .allergen-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 10px;
    color: #cbd5e1;
    cursor: pointer;
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.qrbuf[b-866ycawge1]  .allergen-chip .allergen-icon {
    font-size: 1.3rem;
    line-height: 1;
}

.qrbuf[b-866ycawge1]  .allergen-chip .allergen-name {
    font-size: 0.68rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.1;
}

.qrbuf[b-866ycawge1]  .allergen-chip:hover {
    border-color: rgba(245, 158, 11, 0.45);
    color: #f1f5f9;
}

.qrbuf[b-866ycawge1]  .allergen-chip.on {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.6);
    color: #fecaca;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.3);
}

.qrbuf[b-866ycawge1]  .allergen-chip.on .allergen-name {
    font-weight: 800;
}
/* /Pages/QrOrder.razor.rz.scp.css */
/* QR Order Page - Mobile-First Design with CSS Variables for Branding */

.qr-order-page[b-yi207ij61k] {
    /* The default look ("classic"). A theme preset overrides these; a colour the owner chose
       arrives inline (QrGuestStyle.CssVars) and overrides both. */
    --accent: #1c1a17;
    --on-accent: #ffffff;
    --secondary: var(--accent);
    --on-secondary: var(--on-accent);
    --header-bg: var(--surface);
    --header-text: var(--text);

    /* The phone's own typeface for reading (SF on an iPhone, Roboto on Android); Fraunces for
       the venue's name and the carta's headings. */
    --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --cart-bar-height: 0px;
    --header-offset: 62px;

    --page-bg: #faf9f6;
    --surface: #ffffff;
    --surface-2: #f4f2ee;
    --surface-3: #ebe8e2;
    --text: #1c1a17;
    --text-muted: #6f6a62;
    --text-subtle: #9b958c;
    --border: #ebe7e0;
    --border-strong: #ddd8cf;
    --shadow: rgba(28, 26, 23, 0.06);
    --shadow-strong: rgba(28, 26, 23, 0.14);
    --input-bg: #f4f2ee;
    --input-text: var(--text);
    --input-placeholder: #9b958c;
    --chip-bg: #f4f2ee;
    --chip-text: var(--text-muted);

    --dark-bg: #121110;
    --dark-surface: #1a1917;
    --dark-surface-2: #24221f;
    --dark-surface-3: #2e2b27;
    --dark-border: #2f2c28;
    --dark-border-strong: #3c3833;
    --dark-text: #f2efe9;
    --dark-text-muted: #b5aea3;
    --dark-text-subtle: #8c867c;

    /* What a colour means, from one palette (they came from Material, Bootstrap and Tailwind; design audit,
       2026-10-19). Each reads at 4.5:1 on the paper and on a surface. */
    --ok: #2f7d4f;
    --warn: #a15c07;
    --danger: #b42318;
    --ok-bg: color-mix(in srgb, var(--ok) 12%, var(--surface));
    --warn-bg: color-mix(in srgb, var(--warn) 12%, var(--surface));
    --danger-bg: color-mix(in srgb, var(--danger) 10%, var(--surface));

    min-height: 100vh;
    background: var(--page-bg);
    font-family: var(--font-body);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

/* Shields against the staff app's global CSS (site.css), which reaches every guest element of the same kind: its
   generic input rule (220 px minimum, a red focus ring) broke the bill's tip row; its heading reset made every heading
   that sets no weight body text (design audit, 2026-10-19). */
.qr-order-page input[b-yi207ij61k],
.qr-order-page select[b-yi207ij61k],
.qr-order-page textarea[b-yi207ij61k] {
    min-width: 0;
}

.qr-order-page input:focus[b-yi207ij61k],
.qr-order-page select:focus[b-yi207ij61k],
.qr-order-page textarea:focus[b-yi207ij61k] {
    outline: none;
    border-color: var(--accent);
}

.qr-order-page :focus-visible[b-yi207ij61k] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.qr-order-page h1[b-yi207ij61k],
.qr-order-page h2[b-yi207ij61k],
.qr-order-page h3[b-yi207ij61k],
.qr-order-page h4[b-yi207ij61k] {
    font-weight: 600;
}

/* A short notice above the dock, gone after a few seconds (they were native alert() dialogs). */
.qr-toast[b-yi207ij61k] {
    position: fixed;
    left: 50%;
    bottom: calc(var(--cart-bar-height) + 14px + env(safe-area-inset-bottom));
    z-index: 260;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: max-content;
    max-width: calc(100% - 2rem);
    padding: 0.75rem 1rem;
    border-radius: 14px;
    background: var(--text);
    color: var(--page-bg);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.35;
    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.45);
    transform: translateX(-50%);
    animation: toast-in-b-yi207ij61k 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
    --ico: 18px;
}

@keyframes toast-in-b-yi207ij61k {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .qr-toast[b-yi207ij61k] {
        animation: none;
    }
}

/* Classic: ink on warm paper. It is what 288 of the 291 QR venues show (2026-10-17): they never
   chose a theme. It used to be Material blue (#2196F3) on grey. */
.qr-order-page.theme-classic[b-yi207ij61k] {
    --accent: #1c1a17;
    --page-bg: #faf9f6;
    --surface: #ffffff;
    --surface-2: #f4f2ee;
    --surface-3: #ebe8e2;
    --text: #1c1a17;
    --text-muted: #6f6a62;
    --text-subtle: #9b958c;
    --border: #ebe7e0;
    --border-strong: #ddd8cf;
    --shadow: rgba(28, 26, 23, 0.06);
    --shadow-strong: rgba(28, 26, 23, 0.14);
    --input-bg: #f4f2ee;
    --chip-bg: #f4f2ee;

    --dark-bg: #121110;
    --dark-surface: #1a1917;
    --dark-surface-2: #24221f;
    --dark-surface-3: #2e2b27;
    --dark-border: #2f2c28;
    --dark-border-strong: #3c3833;
    --dark-text: #f2efe9;
    --dark-text-muted: #b5aea3;
    --dark-text-subtle: #8c867c;
}

/* Ink buttons would vanish on the dark page: they turn cream, and their text turns ink.
   An owner's own accent arrives inline with its own text colour and still wins. */
.qr-order-page.theme-classic.dark[b-yi207ij61k] {
    --accent: #ede8df;
    --on-accent: #1c1a17;
}

.qr-order-page.theme-sand[b-yi207ij61k] {
    --accent: #b8860b;
    --on-accent: #1c1a17; /* white read at 2.3-3.9:1 on this accent; ink at 4.4-7.7:1 */
    --page-bg: linear-gradient(180deg, #f7f1e7 0%, #f3efe8 100%);
    --surface: #fff9f2;
    --surface-2: #f5eadd;
    --surface-3: #eee0d2;
    --text: #2b2118;
    --text-muted: #7c6653;
    --text-subtle: #9b8574;
    --border: #ead9c8;
    --border-strong: #ddc8b5;
    --shadow: rgba(56, 31, 12, 0.08);
    --shadow-strong: rgba(56, 31, 12, 0.18);
    --input-bg: #f7ecdf;
    --chip-bg: #f3e6d8;

    --dark-bg: #17120e;
    --dark-surface: #221a14;
    --dark-surface-2: #2d231b;
    --dark-surface-3: #3a2f24;
    --dark-border: #3a2f24;
    --dark-border-strong: #4a3a2c;
    --dark-text: #f5eee6;
    --dark-text-muted: #c5b4a3;
    --dark-text-subtle: #9f8d7c;
}

.qr-order-page.theme-coast[b-yi207ij61k] {
    --accent: #26a69a;
    --on-accent: #1c1a17; /* white read at 2.3-3.9:1 on this accent; ink at 4.4-7.7:1 */
    --page-bg: linear-gradient(180deg, #edf7f6 0%, #f5fbfa 100%);
    --surface: #ffffff;
    --surface-2: #e8f3f2;
    --surface-3: #dae8e7;
    --text: #1c2a2a;
    --text-muted: #586d6d;
    --text-subtle: #7d9191;
    --border: #d4e4e4;
    --border-strong: #c0d6d6;
    --shadow: rgba(10, 30, 30, 0.08);
    --shadow-strong: rgba(10, 30, 30, 0.18);
    --input-bg: #eaf4f3;
    --chip-bg: #e5f0ef;

    --dark-bg: #0f1717;
    --dark-surface: #152120;
    --dark-surface-2: #1f2c2b;
    --dark-surface-3: #273635;
    --dark-border: #2b3a39;
    --dark-border-strong: #344746;
    --dark-text: #eef6f5;
    --dark-text-muted: #b6c7c5;
    --dark-text-subtle: #8ea09f;
}

.qr-order-page.theme-slate[b-yi207ij61k] {
    --accent: #5c7a99;
    --page-bg: linear-gradient(180deg, #f0f3f8 0%, #edf1f6 100%);
    --surface: #ffffff;
    --surface-2: #eef2f6;
    --surface-3: #e1e7ef;
    --text: #1a2433;
    --text-muted: #5b6a7d;
    --text-subtle: #7b889b;
    --border: #d7dee7;
    --border-strong: #c8d1dc;
    --shadow: rgba(15, 23, 42, 0.08);
    --shadow-strong: rgba(15, 23, 42, 0.18);
    --input-bg: #eef2f6;
    --chip-bg: #e9eff5;

    --dark-bg: #10141c;
    --dark-surface: #171d27;
    --dark-surface-2: #202838;
    --dark-surface-3: #283244;
    --dark-border: #2c3648;
    --dark-border-strong: #354054;
    --dark-text: #f3f6fb;
    --dark-text-muted: #b7c1cf;
    --dark-text-subtle: #8c97a8;
}

.qr-order-page.theme-sage[b-yi207ij61k] {
    --accent: #5c8c5c;
    --on-accent: #1c1a17; /* white read at 2.3-3.9:1 on this accent; ink at 4.4-7.7:1 */
    --page-bg: linear-gradient(180deg, #eef6ef 0%, #f5faf6 100%);
    --surface: #ffffff;
    --surface-2: #e8f1ea;
    --surface-3: #dbe6de;
    --text: #1f2b22;
    --text-muted: #5b6f61;
    --text-subtle: #7a8d80;
    --border: #d3e1d6;
    --border-strong: #c4d4c8;
    --shadow: rgba(19, 41, 26, 0.08);
    --shadow-strong: rgba(19, 41, 26, 0.18);
    --input-bg: #eef5ef;
    --chip-bg: #e6f0e8;

    --dark-bg: #121815;
    --dark-surface: #1a221d;
    --dark-surface-2: #232d26;
    --dark-surface-3: #2b372e;
    --dark-border: #2f3b31;
    --dark-border-strong: #3a483d;
    --dark-text: #eef5f0;
    --dark-text-muted: #b5c2ba;
    --dark-text-subtle: #8f9f94;
}

.qr-order-page.theme-ember[b-yi207ij61k] {
    --accent: #d97706;
    --on-accent: #1c1a17; /* white read at 2.3-3.9:1 on this accent; ink at 4.4-7.7:1 */
    --page-bg: linear-gradient(180deg, #ffe4d0 0%, #fff1e6 100%);
    --surface: #fffaf6;
    --surface-2: #ffe7d1;
    --surface-3: #ffd7bc;
    --text: #2d2017;
    --text-muted: #7b5a44;
    --text-subtle: #9a7761;
    --border: #ffd0b0;
    --border-strong: #f2bfa0;
    --shadow: rgba(84, 36, 12, 0.1);
    --shadow-strong: rgba(84, 36, 12, 0.2);
    --input-bg: #ffefe1;
    --chip-bg: #ffe4cf;

    --dark-bg: #1b120c;
    --dark-surface: #24160e;
    --dark-surface-2: #2f1d12;
    --dark-surface-3: #3a2416;
    --dark-border: #3a2416;
    --dark-border-strong: #4a2d1b;
    --dark-text: #fff4ea;
    --dark-text-muted: #d3b6a2;
    --dark-text-subtle: #b08b74;
}

.qr-order-page.theme-graphite[b-yi207ij61k] {
    --accent: #6b7c8a;
    --page-bg: linear-gradient(180deg, #f1f3f6 0%, #eef1f4 100%);
    --surface: #ffffff;
    --surface-2: #edf0f4;
    --surface-3: #e0e5eb;
    --text: #1d2228;
    --text-muted: #5c6672;
    --text-subtle: #7d8792;
    --border: #d5dbe2;
    --border-strong: #c6ced7;
    --shadow: rgba(22, 28, 35, 0.08);
    --shadow-strong: rgba(22, 28, 35, 0.18);
    --input-bg: #eef1f4;
    --chip-bg: #e7ecf1;

    --dark-bg: #11151a;
    --dark-surface: #1a2027;
    --dark-surface-2: #232a33;
    --dark-surface-3: #2c3541;
    --dark-border: #2f3844;
    --dark-border-strong: #394554;
    --dark-text: #f3f6f9;
    --dark-text-muted: #b7c1cb;
    --dark-text-subtle: #8c97a5;
}

/* Subtle Themes */
.qr-order-page.theme-lavender[b-yi207ij61k] {
    --accent: #8b7dc8;
    --on-accent: #1c1a17; /* white read at 2.3-3.9:1 on this accent; ink at 4.4-7.7:1 */
    --page-bg: linear-gradient(180deg, #f5f3fa 0%, #f9f7fc 100%);
    --surface: #ffffff;
    --surface-2: #f0edf7;
    --surface-3: #e6e1f0;
    --text: #2a2635;
    --text-muted: #6b6480;
    --text-subtle: #8d86a0;
    --border: #ddd8eb;
    --border-strong: #cfc8e0;
    --shadow: rgba(59, 48, 84, 0.08);
    --shadow-strong: rgba(59, 48, 84, 0.16);
    --input-bg: #f3f0f9;
    --chip-bg: #eeebf5;

    --dark-bg: #14121a;
    --dark-surface: #1d1a25;
    --dark-surface-2: #262331;
    --dark-surface-3: #2f2b3d;
    --dark-border: #332f42;
    --dark-border-strong: #3e394f;
    --dark-text: #f5f3fa;
    --dark-text-muted: #c2bbd0;
    --dark-text-subtle: #9690a8;
}

.qr-order-page.theme-rose[b-yi207ij61k] {
    --accent: #c77d8e;
    --on-accent: #1c1a17; /* white read at 2.3-3.9:1 on this accent; ink at 4.4-7.7:1 */
    --page-bg: linear-gradient(180deg, #faf5f6 0%, #fcf8f9 100%);
    --surface: #ffffff;
    --surface-2: #f7eff1;
    --surface-3: #f0e5e8;
    --text: #322629;
    --text-muted: #7d6369;
    --text-subtle: #9d8489;
    --border: #eddde0;
    --border-strong: #e3cfd4;
    --shadow: rgba(70, 40, 48, 0.08);
    --shadow-strong: rgba(70, 40, 48, 0.16);
    --input-bg: #f9f3f5;
    --chip-bg: #f4ecef;

    --dark-bg: #181416;
    --dark-surface: #221c1e;
    --dark-surface-2: #2c2528;
    --dark-surface-3: #362d31;
    --dark-border: #3a3034;
    --dark-border-strong: #463b40;
    --dark-text: #faf5f6;
    --dark-text-muted: #d0bfc3;
    --dark-text-subtle: #a8949a;
}

.qr-order-page.theme-mist[b-yi207ij61k] {
    --accent: #7a9eb8;
    --on-accent: #1c1a17; /* white read at 2.3-3.9:1 on this accent; ink at 4.4-7.7:1 */
    --page-bg: linear-gradient(180deg, #f4f7f9 0%, #f8fafb 100%);
    --surface: #ffffff;
    --surface-2: #eef3f6;
    --surface-3: #e4ebef;
    --text: #232a30;
    --text-muted: #5e6d78;
    --text-subtle: #818f9a;
    --border: #dae3e9;
    --border-strong: #ccd8e0;
    --shadow: rgba(35, 50, 60, 0.08);
    --shadow-strong: rgba(35, 50, 60, 0.16);
    --input-bg: #f2f6f8;
    --chip-bg: #ecf2f5;

    --dark-bg: #12161a;
    --dark-surface: #1a2027;
    --dark-surface-2: #232b33;
    --dark-surface-3: #2b3540;
    --dark-border: #2f3a46;
    --dark-border-strong: #394654;
    --dark-text: #f4f7f9;
    --dark-text-muted: #b8c5cf;
    --dark-text-subtle: #8d9ca8;
}

.qr-order-page.theme-cream[b-yi207ij61k] {
    --accent: #c9a86c;
    --on-accent: #1c1a17; /* white read at 2.3-3.9:1 on this accent; ink at 4.4-7.7:1 */
    --page-bg: linear-gradient(180deg, #faf8f4 0%, #fcfbf8 100%);
    --surface: #fffefa;
    --surface-2: #f7f4ed;
    --surface-3: #f0ebe2;
    --text: #2e2b25;
    --text-muted: #6e6659;
    --text-subtle: #918779;
    --border: #e9e4da;
    --border-strong: #ddd6c9;
    --shadow: rgba(46, 43, 37, 0.08);
    --shadow-strong: rgba(46, 43, 37, 0.16);
    --input-bg: #f9f7f2;
    --chip-bg: #f4f1e9;

    --dark-bg: #161512;
    --dark-surface: #1f1d19;
    --dark-surface-2: #292621;
    --dark-surface-3: #33302a;
    --dark-border: #38352e;
    --dark-border-strong: #443f37;
    --dark-text: #faf8f4;
    --dark-text-muted: #cec6b8;
    --dark-text-subtle: #a69e8f;
}

/* Loading & Error Screens */
.loading-screen[b-yi207ij61k],
.error-screen[b-yi207ij61k],
.success-screen[b-yi207ij61k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    text-align: center;
}

.spinner[b-yi207ij61k] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin-b-yi207ij61k 1s linear infinite;
}

@keyframes spin-b-yi207ij61k {
    to { transform: rotate(360deg); }
}

/* Calm, in the carta's voice: an icon in a soft disc, the headline in its serif, what to do in plain words. */
.error-screen[b-yi207ij61k] {
    gap: 0.75rem;
    background: var(--page-bg);
}

.error-icon[b-yi207ij61k] {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 0.25rem;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-muted);
    --ico: 30px;
    --ico-stroke: 1.75;
}

.error-screen h2[b-yi207ij61k] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--text);
}

.error-screen p[b-yi207ij61k] {
    max-width: 22rem;
    margin: 0;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.5;
}

.btn-retry[b-yi207ij61k] {
    margin-top: 0.75rem;
    min-height: 48px;
    padding: 0 2rem;
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    border-radius: 999px;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

/* Success — the moment the order lands (design audit, 2026-10-19): a check that draws itself in a ring, a short
   burst in the venue's own colours, the headline in the carta's serif and the facts in one quiet line. It was a ✓
   glyph in a bouncing disc over grey falling squares, a 16 px headline under a 24 px order number, and two buttons
   of different heights. */
.success-screen[b-yi207ij61k] {
    background: var(--page-bg);
}

.success-mark[b-yi207ij61k] {
    position: relative;
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    margin-bottom: 1.5rem;
}

.success-check[b-yi207ij61k] {
    width: 96px;
    height: 96px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.success-ring[b-yi207ij61k] {
    fill: var(--accent);
}

.success-tick[b-yi207ij61k] {
    stroke: var(--on-accent);
    stroke-width: 3.5;
}

.success-burst[b-yi207ij61k] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.success-burst i[b-yi207ij61k] {
    --d: -62px;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0;
}

.success-burst i:nth-child(even)[b-yi207ij61k] {
    --d: -76px;
}

.success-burst i:nth-child(3n + 2)[b-yi207ij61k] {
    width: 6px;
    height: 6px;
    background: color-mix(in srgb, var(--accent) 45%, #ffffff);
}

.success-burst i:nth-child(3n)[b-yi207ij61k] {
    border-radius: 2px;
    background: #e3a849;
}

.success-title[b-yi207ij61k] {
    margin: 0 0 0.375rem;
    font-family: var(--font-display);
    font-size: 1.875rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--text);
}

.success-screen .instructions[b-yi207ij61k] {
    max-width: 22rem;
    margin: 0 0 1.25rem;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.order-number[b-yi207ij61k] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.success-screen .total[b-yi207ij61k] {
    margin: 0.25rem 0 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.instructions[b-yi207ij61k] {
    color: var(--text-muted);
    margin: 1rem 0;
}

/* The wait, as a calm pill: it was a pulsing orange gradient with a stopwatch emoji. */
.wait-time-badge[b-yi207ij61k] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0 0.25rem;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    --ico: 18px;
}

.loyalty-earned-banner[b-yi207ij61k] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.875rem 0 0;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    background: color-mix(in srgb, #e3a849 16%, var(--surface));
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 600;
    --ico: 18px;
    --ico-fill: #e3a849;
}

.success-actions[b-yi207ij61k] {
    display: flex;
    gap: 0.75rem;
    width: 100%;
    max-width: 24rem;
    margin-top: 1.75rem;
}

.btn-track-order[b-yi207ij61k],
.btn-new-order[b-yi207ij61k] {
    flex: 1;
    height: 52px;
    margin: 0;
    padding: 0 1rem;
    border-radius: 999px;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.15s ease;
}

.btn-track-order[b-yi207ij61k] {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border-strong);
}

.btn-new-order[b-yi207ij61k] {
    background: var(--accent);
    color: var(--on-accent);
    border: 1px solid var(--accent);
}

.btn-track-order:active[b-yi207ij61k],
.btn-new-order:active[b-yi207ij61k] {
    transform: scale(0.97);
}

@media (prefers-reduced-motion: no-preference) {
    .success-ring[b-yi207ij61k] {
        transform-box: view-box;
        transform-origin: 26px 26px;
        animation: success-ring-in-b-yi207ij61k 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    .success-tick[b-yi207ij61k] {
        stroke-dasharray: 36;
        stroke-dashoffset: 36;
        animation: success-tick-draw-b-yi207ij61k 0.42s 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    }

    .success-burst i[b-yi207ij61k] {
        animation: success-burst-b-yi207ij61k 0.9s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    }

    .success-screen > :not(.success-mark)[b-yi207ij61k] {
        animation: success-rise-b-yi207ij61k 0.36s cubic-bezier(0.2, 0.8, 0.2, 1) both;
        animation-delay: 0.32s;
    }

    .success-screen > :nth-child(3)[b-yi207ij61k] { animation-delay: 0.38s; }
    .success-screen > :nth-child(4)[b-yi207ij61k] { animation-delay: 0.44s; }
    .success-screen > :nth-child(5)[b-yi207ij61k] { animation-delay: 0.5s; }
    .success-screen > :nth-child(n + 6)[b-yi207ij61k] { animation-delay: 0.56s; }
}

@keyframes success-ring-in-b-yi207ij61k {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes success-tick-draw-b-yi207ij61k {
    to { stroke-dashoffset: 0; }
}

@keyframes success-burst-b-yi207ij61k {
    0% { opacity: 1; transform: rotate(calc(var(--i) * 30deg)) translateY(0) scale(1); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: rotate(calc(var(--i) * 30deg)) translateY(var(--d)) scale(0.5); }
}

@keyframes success-rise-b-yi207ij61k {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* Loyalty earn preview in cart */
.loyalty-earn-preview[b-yi207ij61k] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
    padding: 2px 10px;
    margin-bottom: 8px;
    --ico: 15px;
    --ico-fill: #e3a849;
}

/* Ordering closed, in the cart's footer: the theme's warning colours (an inline yellow slab glared in dark mode). */
.ordering-closed-note[b-yi207ij61k] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 10px;
    padding: 0.625rem 0.875rem;
    border-radius: 12px;
    background: var(--warn-bg);
    color: var(--warn);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
    --ico: 18px;
}

/* Header */
.qr-header[b-yi207ij61k] {
    position: sticky;
    top: 0;
    z-index: 100;
    box-sizing: border-box;
    height: var(--header-offset);
    background: var(--header-bg);
    padding: 0 0.75rem 0 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: nowrap;
}

.restaurant-info[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0; /* Allow shrinking */
    flex: 1;
}

.restaurant-info .logo[b-yi207ij61k] {
    height: 40px;
    width: auto;
    max-width: 96px;
    object-fit: contain;
    border-radius: 8px;
    flex-shrink: 0;
}

/* Most logos are drawn for a white ticket or a light page: on the dark page they sit on a light frame,
   or a black logo disappears (El Ajolote's, 2026-10-18). */
.qr-order-page.dark .restaurant-info .logo[b-yi207ij61k] {
    background: #f2efe9;
    padding: 3px;
}

.restaurant-text[b-yi207ij61k] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
}

.restaurant-info h1[b-yi207ij61k] {
    max-width: 100%;
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--header-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* While the cover (.qr-hero) is in view the header is its top edge — the page's paper, no line, no name (the cover
   shows it large); once the cover has scrolled under it, the header as before (html.qr-hero-passed, qr-menu.js). */
/* Transparent, not the page's colour: a theme whose page is a gradient drew the whole gradient inside the header's
   62 px, a lighter band over the cover (wokamama, el ajolote). */
.qr-header.over-hero[b-yi207ij61k] {
    background: transparent;
    border-bottom-color: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.qr-header.over-hero .restaurant-info[b-yi207ij61k] {
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

html.qr-hero-passed .qr-header.over-hero[b-yi207ij61k] {
    background: var(--header-bg);
    border-bottom-color: var(--border);
}

html.qr-hero-passed .qr-header.over-hero .restaurant-info[b-yi207ij61k] {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* The carta's cover. */
.qr-hero[b-yi207ij61k] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    max-width: 760px;
    margin: 0 auto;
    padding: 0.5rem 1.25rem 1.375rem;
    text-align: center;
}

.qr-hero-logo[b-yi207ij61k] {
    width: 68px;
    height: 68px;
    padding: 6px;
    object-fit: contain;
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 8px 22px -10px rgba(28, 26, 23, 0.35);
}

.qr-order-page.dark .qr-hero-logo[b-yi207ij61k] {
    background: #f2efe9;
}

.qr-hero-name[b-yi207ij61k] {
    margin: 0.125rem 0 0;
    font-family: var(--font-display);
    font-size: 2.125rem;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--text);
    overflow-wrap: anywhere;
}

.qr-hero-table[b-yi207ij61k] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 34px;
    margin-top: 0.125rem;
    padding: 0 0.75rem 0 0.95rem;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.qr-hero-welcome[b-yi207ij61k] {
    max-width: 32rem;
    margin: 0.25rem 0 0;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.0625rem;
    line-height: 1.45;
    color: var(--text-muted);
}

/* With the venue's own photo: a cover image under a soft scrim, the words in white. */
.qr-hero.has-image[b-yi207ij61k] {
    max-width: none;
    min-height: 228px;
    justify-content: flex-end;
    padding: 2.5rem 1.25rem 1.5rem;
    background:
        linear-gradient(to top, rgba(18, 17, 16, 0.74), rgba(18, 17, 16, 0.2) 62%, rgba(18, 17, 16, 0.06)),
        var(--hero-image) center / cover no-repeat;
}

.qr-hero.has-image .qr-hero-name[b-yi207ij61k] {
    color: #ffffff;
}

.qr-hero.has-image .qr-hero-welcome[b-yi207ij61k] {
    color: rgba(255, 255, 255, 0.86);
}

.qr-hero.has-image .qr-hero-table[b-yi207ij61k] {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.38);
    color: #ffffff;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

@media (prefers-reduced-motion: no-preference) {
    .qr-hero > *[b-yi207ij61k] {
        animation: hero-rise-b-yi207ij61k 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }

    .qr-hero > :nth-child(2)[b-yi207ij61k] { animation-delay: 0.05s; }
    .qr-hero > :nth-child(3)[b-yi207ij61k] { animation-delay: 0.1s; }
    .qr-hero > :nth-child(4)[b-yi207ij61k] { animation-delay: 0.15s; }
}

@keyframes hero-rise-b-yi207ij61k {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* "MESA 3 · SALÓN ⌄" under the name — opens the table and language sheet. */
.table-chip[b-yi207ij61k] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    margin: 0;
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

.table-chip-label[b-yi207ij61k] {
    flex-shrink: 0;
}

.table-chip-zone[b-yi207ij61k] {
    font-weight: 500;
    color: var(--text-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-right[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

/* Line icons in the text colour. They replace the emoji (☀️ 🧾 📍 🔍 🔔 🌐) the page drew its
   buttons with, which every phone renders as a different cartoon. */
.ico[b-yi207ij61k] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ico-sm[b-yi207ij61k] {
    width: 16px;
    height: 16px;
}

.ico-xs[b-yi207ij61k] {
    width: 12px;
    height: 12px;
    stroke-width: 2.2;
}

/* Not ".icon-btn": site.css has two global rules by that name (hover fades to 0.7). */
.qr-icon-btn[b-yi207ij61k] {
    position: relative;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: transparent;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.qr-icon-btn:hover[b-yi207ij61k] {
    background: var(--surface-2);
}

.qr-icon-btn .ico[b-yi207ij61k] {
    width: 19px;
    height: 19px;
}

.language-selector select[b-yi207ij61k] {
    height: 38px;
    padding: 0 0.6rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font: inherit;
    font-size: 1rem;   /* 16 px: iOS zooms into a smaller box */
    background: transparent;
    color: var(--text);
    cursor: pointer;
    max-width: 120px;
}

/* Mobile language button - hidden on desktop */
.lang-btn-mobile[b-yi207ij61k] {
    display: none;
}

.filters-sticky[b-yi207ij61k] {
    position: sticky;
    top: calc(var(--header-offset) + env(safe-area-inset-top));
    z-index: 90;
    background: var(--header-bg);
    border-bottom: 1px solid var(--border);
}

/* Promotional Banner */
.promo-banner[b-yi207ij61k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.promo-banner.clickable[b-yi207ij61k] {
    cursor: pointer;
}

.promo-banner.clickable:hover[b-yi207ij61k] {
    filter: brightness(1.1);
    transform: scale(1.005);
}

.promo-banner.clickable:active[b-yi207ij61k] {
    transform: scale(0.98);
    filter: brightness(0.95);
}

.promo-banner.clickable:focus-visible[b-yi207ij61k] {
    outline: 2px solid currentColor;
    outline-offset: -4px;
}

/* No colour of the owner's: the page's own quiet band, an accent dot before the words (it was white on orange, 2.8:1). */
.promo-banner.promo-default[b-yi207ij61k] {
    background: var(--surface-2);
    color: var(--text);
    border-bottom: 1px solid var(--border);
}

.promo-banner.promo-default .promo-text[b-yi207ij61k]::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 0.5rem 0.1rem 0;
    border-radius: 50%;
    background: var(--accent);
    vertical-align: middle;
}

/* Banner Styles */
.promo-banner.promo-inline[b-yi207ij61k] {
    /* Default inline style - scrolls with content */
}

.promo-banner.promo-sticky[b-yi207ij61k] {
    position: sticky;
    top: calc(var(--header-offset) + env(safe-area-inset-top));
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.promo-banner.promo-toast[b-yi207ij61k] {
    position: fixed;
    bottom: calc(80px + var(--cart-bar-height) + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100% - 32px);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    z-index: 200;
    animation: toastSlideIn-b-yi207ij61k 0.4s ease;
}

.promo-banner.promo-toast.toast-hidden[b-yi207ij61k] {
    animation: toastSlideOut-b-yi207ij61k 0.4s ease forwards;
}

@keyframes toastSlideIn-b-yi207ij61k {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes toastSlideOut-b-yi207ij61k {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
}

.promo-content[b-yi207ij61k] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.promo-text[b-yi207ij61k] {
    word-break: break-word;
}

/* The time left as a small pill: "49:54" in tabular figures beside a timer, a bolt in the last hour. */
.promo-countdown[b-yi207ij61k] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.15rem;
    padding: 0.125rem 0.5rem 0.125rem 0.375rem;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 12%, transparent);
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    --ico: 14px;
    --ico-stroke: 2;
}

.promo-actions[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.promo-arrow[b-yi207ij61k] {
    display: inline-flex;
    opacity: 0.8;
    --ico: 18px;
}

.promo-add-btn[b-yi207ij61k] {
    padding: 6px 14px;
    background: color-mix(in srgb, currentColor 14%, transparent);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.2s;
}

.promo-banner:hover .promo-add-btn[b-yi207ij61k] {
    background: color-mix(in srgb, currentColor 22%, transparent);
}

.promo-dismiss[b-yi207ij61k] {
    background: transparent;
    border: none;
    color: inherit;
    --ico: 18px;
    /* Increased padding for 44x44px minimum touch target (WCAG 2.5.5) */
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    cursor: pointer;
    transition: opacity 0.2s, background 0.2s;
    border-radius: 50%;
    margin: -6px -6px -6px 0;
}

.promo-dismiss:hover[b-yi207ij61k],
.promo-dismiss:focus[b-yi207ij61k] {
    opacity: 1;
    background: color-mix(in srgb, currentColor 12%, transparent);
}

.promo-dismiss:focus[b-yi207ij61k] {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Enhanced Item Banner (for menu item promotions) */
.promo-item-banner[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
}

.promo-item-image[b-yi207ij61k] {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.promo-item-info[b-yi207ij61k] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.promo-item-banner .promo-text[b-yi207ij61k] {
    font-size: 0.85rem;
    opacity: 0.9;
}

.promo-item-details[b-yi207ij61k] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.promo-item-name[b-yi207ij61k] {
    font-size: 1rem;
    font-weight: 700;
}

.promo-item-price[b-yi207ij61k] {
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0.9;
}

.promo-item-banner .promo-countdown[b-yi207ij61k] {
    font-size: 0.75rem;
}

/* Countdown urgency: a few beats when the last hour starts, then calm (it pulsed for the whole hour). */
@media (prefers-reduced-motion: no-preference) {
    .countdown-urgent[b-yi207ij61k] {
        animation: pulse-b-yi207ij61k 1s ease-in-out 4;
    }
}

@keyframes pulse-b-yi207ij61k {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}


/* Welcome Banner — the owner's words, set quietly under the header. */
.welcome-banner[b-yi207ij61k] {
    max-width: 760px;
    margin: 0 auto;
    padding: 1rem 1.25rem 0.25rem;
    color: var(--text-muted);
    text-align: center;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1rem;
    line-height: 1.45;
}

/* Zone surcharge (terraza) disclosure: a quiet line on the page, under the owner's welcome when there is one (they sat
   on two different backgrounds). */
.zone-surcharge-note[b-yi207ij61k] {
    max-width: 760px;
    margin: 0 auto;
    padding: 0.375rem 1.25rem 0.625rem;
    color: var(--text-muted);
    text-align: center;
    font-size: 0.8125rem;
    line-height: 1.35;
}

/* Category Navigation — a search icon, then the categories */
.category-nav-wrapper[b-yi207ij61k] {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 0.75rem;
}

/* Fades the chips into the row's own edge while there are more to scroll to (a mask on the row, so the
   layout switch after it stays crisp). */
.category-nav-wrapper.scroll-right .category-nav[b-yi207ij61k] {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}

/* Scrolled: the chips fade out under the search button too, instead of being cut into a stray arc (design audit,
   2026-10-19). */
.category-nav-wrapper.scroll-left .category-nav[b-yi207ij61k] {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px);
    mask-image: linear-gradient(to right, transparent 0, #000 20px);
}

.category-nav-wrapper.scroll-left.scroll-right .category-nav[b-yi207ij61k] {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 32px), transparent);
}

.category-nav.is-empty[b-yi207ij61k] {
    display: none;
}

/* List | Photos: a pill of two buttons after a hairline, so it reads as a view switch, not a category.
   (Not ".layout-switch" / ".menu-items": PaymentScreen and OnlineOrder style those in GLOBAL inline <style>.) */
.qr-layout-switch[b-yi207ij61k] {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    gap: 2px;
    margin: 0 0.75rem 0 0.375rem;
    padding: 3px;
    border-radius: 999px;
    background: var(--surface-2);
}

.qr-layout-switch[b-yi207ij61k]::before {
    content: '';
    position: absolute;
    inset-inline-start: -0.375rem;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--border);
}

.layout-opt[b-yi207ij61k] {
    width: 32px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.layout-opt .ico[b-yi207ij61k] {
    width: 18px;
    height: 18px;
}

.layout-opt.active[b-yi207ij61k] {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 1px 3px var(--shadow-strong);
}

.search-expand-btn[b-yi207ij61k] {
    width: 36px;
    height: 36px;
    margin-inline-end: 0.25rem;
}

/* The allergen filter's icon form, beside the search (no dietary tags to share a row with). */
.allergen-toggle.allergen-icon[b-yi207ij61k] {
    width: 36px;
    height: 36px;
    padding: 0;
    gap: 0;
    justify-content: center;
    margin-inline-end: 0.25rem;
    border-color: var(--border);
    background: transparent;
}

.allergen-toggle.allergen-icon.active[b-yi207ij61k] {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
}

.allergen-toggle.allergen-icon .active-count[b-yi207ij61k] {
    position: absolute;
    top: -5px;
    inset-inline-end: -5px;
    font-size: 0.6875rem;
    box-shadow: 0 0 0 2px var(--surface);
}

/* No scroll-snap: snapping the first chip to the edge scrolled the row by its padding on load,
   which switched on the left fade and drew it over "Todos". */
.category-nav[b-yi207ij61k] {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 0.375rem;
    padding: 0.625rem 1rem 0.625rem 0.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.category-nav[b-yi207ij61k]::-webkit-scrollbar {
    display: none;
}

.category-tab[b-yi207ij61k] {
    flex-shrink: 0;
    height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 0.875rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.category-tab.active[b-yi207ij61k] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

/* Search Bar — opened from the icon */
.search-bar[b-yi207ij61k] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0 0;
    padding-inline: 1rem 0.75rem;
}

.search-bar .search-icon[b-yi207ij61k] {
    position: absolute;
    inset-inline-start: 1.75rem;
    width: 18px;
    height: 18px;
    color: var(--text-subtle);
    pointer-events: none;
}

.search-bar input[b-yi207ij61k] {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding-block: 0;
    padding-inline: 2.4rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font: inherit;
    font-size: 1rem;   /* 16 px: iOS zooms into a smaller box */
    background: var(--input-bg);
    color: var(--input-text);
}

.search-bar input:focus[b-yi207ij61k] {
    outline: none;
    border-color: var(--text-subtle);
    background: var(--surface);
}

.search-bar input[b-yi207ij61k]::placeholder {
    color: var(--input-placeholder);
}

.search-close[b-yi207ij61k] {
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.search-close:hover[b-yi207ij61k] {
    background: var(--surface-2);
}

/* Allergens and the owner's dietary tags: one quiet, scrollable row under the categories. */
.secondary-filters[b-yi207ij61k] {
    display: flex;
    gap: 0.375rem;
    padding: 0 1rem 0.625rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.secondary-filters[b-yi207ij61k]::-webkit-scrollbar {
    display: none;
}

/* A real chip (a dashed outline read as a placeholder); open or filtering, it fills like a chosen category. */
.allergen-toggle[b-yi207ij61k] {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 34px;
    padding: 0 0.875rem 0 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.allergen-toggle[b-yi207ij61k]::after {
    content: "";
    position: absolute;
    inset: -5px 0;
}

.allergen-toggle.active[b-yi207ij61k] {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
}

.allergen-toggle.active .active-count[b-yi207ij61k] {
    background: var(--on-accent);
    color: var(--accent);
}

.allergen-toggle .active-count[b-yi207ij61k] {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
}

/* The allergen filter sheet: two columns of toggles, the button at its foot. */
.allergen-sheet[b-yi207ij61k] {
    max-height: 88vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.allergen-sheet-head[b-yi207ij61k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.allergen-sheet-head h3[b-yi207ij61k] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--text);
}

.allergen-filter .allergen-chips[b-yi207ij61k] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0.25rem 0 1rem;
}

.allergen-filter .allergen-chip[b-yi207ij61k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0 0.875rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    --ico: 16px;
    --ico-stroke: 2.4;
}

.allergen-filter .allergen-chip.active[b-yi207ij61k] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

/* The carta: rows on the page, a heading per category */
.items-container[b-yi207ij61k] {
    max-width: 760px;
    margin: 0 auto;
    padding: 0.25rem 1rem calc(110px + var(--cart-bar-height) + env(safe-area-inset-bottom));
}

.menu-section-title[b-yi207ij61k],
.featured-title[b-yi207ij61k] {
    margin: 1.75rem 0 0.25rem;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text);
}

.items-container > .menu-section:first-child > .menu-section-title[b-yi207ij61k],
.featured-title[b-yi207ij61k] {
    margin-top: 1.25rem;
}

.featured-title[b-yi207ij61k] {
    font-size: 1.1rem;
}

/* One dish. Text on the left; the photo, when there is one, on the right (row-reverse: it comes
   first in the markup). A dish with no photo is just its text — no grey box. */
.item-card[b-yi207ij61k] {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.item-card:active[b-yi207ij61k] {
    opacity: 0.7;
}

.item-card.out-of-stock[b-yi207ij61k] {
    opacity: 0.5;
    cursor: not-allowed;
}

.item-image[b-yi207ij61k] {
    display: block;
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    border-radius: 12px;
    object-fit: cover;
    background: var(--surface-2);
}

.item-info[b-yi207ij61k] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.item-card[data-photo="yes"] .item-info[b-yi207ij61k] {
    min-height: 96px;
}

.item-info h3[b-yi207ij61k] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--text);
}

.item-info .description[b-yi207ij61k] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Precautionary cross-contamination warning — amber, readable at a
   glance; the dish is still orderable (policy = warn, not hide). */
.item-info .trace-warning[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--warn);
    margin: 0;
    --ico: 14px;
    --ico-stroke: 2;
}

.price-row[b-yi207ij61k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.625rem;
    margin-top: auto;
    padding-top: 0.25rem;
    min-height: 36px;
}

/* The price in the text colour: a menu states it, it does not shout it in blue. */
.price[b-yi207ij61k] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* A dish without a photo (146 of 168 venues have none): the price right under the name, the "+" centred on the row's
   right. The price took a line of its own beside the "+" — 98 px a dish, seven a screen (design audit, 2026-10-19). */
.as-rows .item-card[data-photo="no"][b-yi207ij61k] {
    padding: 0.875rem 0;
}

/* Inline-end, not right: an Arabic menu puts the "+" on the row's left (it stayed on the right, over the name's start). */
.as-rows .item-card[data-photo="no"] .item-info[b-yi207ij61k] {
    gap: 0.2rem;
    padding-inline-end: 3.25rem;
}

.as-rows .item-card[data-photo="no"]:has(.quick-stepper) .item-info[b-yi207ij61k] {
    padding-inline-end: 7.75rem;
}

.as-rows .item-card[data-photo="no"] .price-row[b-yi207ij61k] {
    justify-content: flex-start;
    margin-top: 0.125rem;
    padding-top: 0;
    min-height: 0;
}

.as-rows .item-card[data-photo="no"] .price-row > .quick-add-btn[b-yi207ij61k],
.as-rows .item-card[data-photo="no"] .price-row > .quick-stepper[b-yi207ij61k] {
    position: absolute;
    inset-inline-end: 0;
    top: 50%;
    transform: translateY(-50%);
}

.as-rows .item-card[data-photo="no"] .price[b-yi207ij61k] {
    font-weight: 500;
}

.stock-badge[b-yi207ij61k] {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--surface-2);
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
}

/* The 14 EU allergens a dish contains, on its row. */
.item-info .allergen-line[b-yi207ij61k] {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--text-muted);
}

/* No allergen data is not "none": said in a caution colour, while the guest filters and on the dish. */
.item-info .allergen-line.unknown[b-yi207ij61k],
.allergen-unknown[b-yi207ij61k] {
    color: var(--warn);
    font-weight: 600;
}

.allergen-unknown[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0.6rem 0 0.2rem;
    font-size: 0.875rem;
    --ico: 16px;
}

/* On the dish's sheet: a calm line, not an alarm (it was bold orange over a three-line legal note). */
.item-modal .allergen-unknown[b-yi207ij61k] {
    color: var(--text-muted);
    font-weight: 500;
}

.item-modal .allergen-notice[b-yi207ij61k] {
    margin-top: 0.25rem;
    font-size: 0.75rem;
}

.item-modal .base-price[b-yi207ij61k] {
    margin: 0.125rem 0 1rem;
}

.allergen-notice[b-yi207ij61k] {
    margin: 0.4rem 0 0.75rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.search-summary[b-yi207ij61k] {
    margin: 1rem 0 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
}

.menu-end-notice[b-yi207ij61k] {
    margin: 1.75rem 0 0;
    text-align: center;
}

/* ---- Photo layout: a section whose dishes mostly have photos is a two-column grid of cards ---- */
.qr-menu-items.as-cards[b-yi207ij61k] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 0.875rem;
    padding: 0.75rem 0 0.5rem;
}

.as-cards .item-card[b-yi207ij61k] {
    flex-direction: column;
    align-items: stretch;   /* the row's flex-start would shrink a short card's text, and its "+", to the price */
    gap: 0.5rem;
    padding: 0;
    border-bottom: 0;
}

.as-cards .item-image[b-yi207ij61k] {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
}

.as-cards .item-card[data-photo="yes"] .item-info[b-yi207ij61k] {
    min-height: 0;
}

.as-cards .item-info h3[b-yi207ij61k] {
    font-size: 0.95rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.as-cards .item-info .description[b-yi207ij61k] {
    font-size: 0.8rem;
}

/* In a card the "+" sits at the end of the price line, under the photo. */
.as-cards .item-card[data-photo="yes"] .quick-add-btn[b-yi207ij61k],
.as-cards .item-card[data-photo="yes"] .quick-stepper[b-yi207ij61k] {
    position: static;
    box-shadow: none;
    border-color: var(--border-strong);
}

/* A dish without a photo in a photo section: a quiet text card, never an empty photo box. */
.as-cards .item-card[data-photo="no"][b-yi207ij61k] {
    padding: 0.875rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
}

/* ---- «Recomendados»: the owner's Destacados, a row of large cards ---- */
.featured-scroller[b-yi207ij61k] {
    display: flex;
    gap: 0.75rem;
    margin: 0.75rem -1rem 0.25rem;
    padding: 0 1rem 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 1rem;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.featured-scroller[b-yi207ij61k]::-webkit-scrollbar {
    display: none;
}

.featured-card[b-yi207ij61k] {
    flex: 0 0 42%;
    max-width: 210px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.featured-media[b-yi207ij61k] {
    position: relative;
    margin-bottom: 0.2rem;
}

.featured-image[b-yi207ij61k] {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 14px;
    background: var(--surface-2);
}

.featured-media .quick-add-btn[b-yi207ij61k] {
    position: absolute;
    inset-inline-end: 6px;
    bottom: 6px;
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

/* Without a photo: a quiet text card, the "+" at its foot. */
.featured-card.no-photo[b-yi207ij61k] {
    min-height: 7rem;
    padding: 0.875rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
}

.featured-card.no-photo .featured-media[b-yi207ij61k] {
    order: 3;
    display: flex;
    justify-content: flex-end;
    margin: auto 0 0;
}

.featured-card.no-photo .featured-media .quick-add-btn[b-yi207ij61k] {
    position: static;
    border-color: var(--border-strong);
    box-shadow: none;
}

.featured-name[b-yi207ij61k] {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.featured-card.no-photo .featured-name[b-yi207ij61k] {
    font-family: var(--font-display);
    font-size: 1.05rem;
}

.featured-price[b-yi207ij61k] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Two dishes: side by side, the row filled. */
.featured-scroller.count-2 .featured-card[b-yi207ij61k] {
    flex: 1 1 0;
    max-width: none;
}

/* One dish: a card across the row — its photo wide, the name over it in the carta's serif. */
.featured-scroller.count-1 .featured-card[b-yi207ij61k] {
    position: relative;
    flex: 1 1 auto;
    max-width: none;
}

.featured-scroller.count-1 .featured-card:not(.no-photo) .featured-image[b-yi207ij61k] {
    aspect-ratio: 16 / 9;
}

.featured-scroller.count-1 .featured-card:not(.no-photo) .featured-media[b-yi207ij61k]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: linear-gradient(to top, rgba(18, 17, 16, 0.62), rgba(18, 17, 16, 0) 58%);
    pointer-events: none;
}

.featured-scroller.count-1 .featured-card:not(.no-photo) .featured-name[b-yi207ij61k],
.featured-scroller.count-1 .featured-card:not(.no-photo) .featured-price[b-yi207ij61k] {
    position: absolute;
    inset-inline: 1rem 4.5rem;
    color: #ffffff;
    z-index: 1;
}

.featured-scroller.count-1 .featured-card:not(.no-photo) .featured-name[b-yi207ij61k] {
    bottom: 2.4rem;
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.15;
}

.featured-scroller.count-1 .featured-card:not(.no-photo) .featured-price[b-yi207ij61k] {
    bottom: 1rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
}

.featured-scroller.count-1 .featured-card:not(.no-photo) .featured-media .quick-add-btn[b-yi207ij61k],
.featured-scroller.count-1 .featured-card:not(.no-photo) .featured-media .quick-stepper[b-yi207ij61k] {
    inset-inline-end: 12px;
    bottom: 12px;
    z-index: 2;
}

.featured-scroller.count-1 .featured-card.no-photo[b-yi207ij61k] {
    min-height: 0;
}

@media (min-width: 721px) {
    .qr-menu-items.as-cards[b-yi207ij61k] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .featured-card[b-yi207ij61k] {
        flex-basis: 200px;
    }
}

/* The dock (design audit, 2026-10-19): the waiter, the bill and the cart in one frosted bar at the thumb. The waiter's
   bell floated over the dishes' "+", «Ver cuenta» sat in the header, and on a computer the cart was a second floating
   button. With a dish in the cart the waiter and the bill keep only their icons and the cart takes the room. */
.qr-dock[b-yi207ij61k] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem max(0.75rem, calc((100% - 760px) / 2)) calc(0.625rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
    border-top: 1px solid var(--border);
    animation: dock-in-b-yi207ij61k 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dock-btn[b-yi207ij61k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 0.875rem;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}

.dock-btn .dock-label[b-yi207ij61k] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.dock-btn:active:not(:disabled)[b-yi207ij61k] {
    transform: scale(0.96);
}

.dock-btn:disabled[b-yi207ij61k] {
    cursor: default;
}

.bill-btn:disabled[b-yi207ij61k] {
    opacity: 0.55;
}

/* Called: the bell turns into a check in the accent, and stays so until the waiter can be called again. */
.call-waiter-fab.called[b-yi207ij61k] {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.qr-dock.has-cart .dock-btn[b-yi207ij61k] {
    flex: none;
    width: 48px;
    padding: 0;
}

.qr-dock.has-cart .dock-btn .dock-label[b-yi207ij61k] {
    display: none;
}

.cart-bar[b-yi207ij61k] {
    flex: 1;
    min-width: 0;
}

.cart-bar-btn[b-yi207ij61k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    height: 48px;
    padding-block: 0;
    padding-inline: 0.75rem 0.375rem;
    border: none;
    border-radius: 999px;
    background: var(--secondary);
    color: var(--on-secondary);
    font: inherit;
    cursor: pointer;
    box-shadow: 0 8px 22px -10px rgba(28, 26, 23, 0.45);
    transition: transform 0.12s ease;
}

.cart-bar-btn:active[b-yi207ij61k] {
    transform: scale(0.98);
}

.cart-bar-summary[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

/* The count as a bubble («2 artículos 13,40 €» ran under «Ver carrito» at 390 px); its word is read aloud only. */
.cart-bar-count[b-yi207ij61k] {
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    box-sizing: border-box;
    border-radius: 999px;
    background: color-mix(in srgb, var(--on-secondary) 18%, transparent);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    white-space: nowrap;
}

/* Read aloud, not shown. */
.vh[b-yi207ij61k] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.cart-bar-total[b-yi207ij61k] {
    font-size: 1.0625rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cart-bar-cta[b-yi207ij61k] {
    display: inline-flex;
    align-items: center;
    flex: none;
    height: 36px;
    padding: 0 0.95rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--on-secondary) 16%, transparent);
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
}

/* The count and total bump on every add (they are re-keyed). */
.cart-bar-count[b-yi207ij61k],
.cart-bar-total[b-yi207ij61k] {
    display: inline-block;
    animation: cart-bump-b-yi207ij61k 0.32s ease-out;
    transform-origin: left center;
}

@keyframes dock-in-b-yi207ij61k {
    from { transform: translateY(100%); }
    to { transform: none; }
}

@keyframes cart-bump-b-yi207ij61k {
    0% { transform: scale(1); }
    40% { transform: scale(1.07); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .qr-dock[b-yi207ij61k],
    .cart-bar-count[b-yi207ij61k],
    .cart-bar-total[b-yi207ij61k] {
        animation: none;
    }
}

/* Modal Overlay */
/* Sheets: a soft, slightly blurred scrim that fades in, and a sheet that rises on a gentle curve (it popped over an
   opaque black). */
.modal-overlay[b-yi207ij61k] {
    position: fixed;
    inset: 0;
    background: rgba(18, 17, 16, 0.48);
    -webkit-backdrop-filter: blur(3px) saturate(1.1);
    backdrop-filter: blur(3px) saturate(1.1);
    z-index: 200;
    display: flex;
    align-items: flex-end;
    animation: overlay-in-b-yi207ij61k 0.2s ease-out;
}

.modal-content[b-yi207ij61k] {
    background: var(--surface);
    width: 100%;
    max-height: 90vh;
    border-radius: 24px 24px 0 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 -16px 40px -16px rgba(28, 26, 23, 0.32);
    animation: slideUp-b-yi207ij61k 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes slideUp-b-yi207ij61k {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes overlay-in-b-yi207ij61k {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .modal-overlay[b-yi207ij61k],
    .modal-content[b-yi207ij61k] {
        animation: none;
    }
}

/* Over a photo: a frosted dark disc. On a sheet without a photo it is the sheets' quiet outlined close (a grey blob on
   white before). */
.modal-close[b-yi207ij61k] {
    position: absolute;
    top: 0.875rem;
    inset-inline-end: 0.875rem;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: rgba(28, 26, 23, 0.4);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
    color: #ffffff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    --ico: 20px;
    --ico-stroke: 2;
}

.modal-close[b-yi207ij61k]::after {
    content: "";
    position: absolute;
    inset: -4px;
}

.item-modal.no-photo .modal-close[b-yi207ij61k],
.mddia-modal:not(:has(.modal-image)) .modal-close[b-yi207ij61k] {
    background: var(--surface);
    color: var(--text-muted);
    border: 1px solid var(--border);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.sheet-overlay[b-yi207ij61k] {
    align-items: flex-end;
}

.sheet-content[b-yi207ij61k] {
    background: var(--surface);
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    border-radius: 20px 20px 0 0;
    padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 28px var(--shadow-strong);
}

.sheet-handle[b-yi207ij61k] {
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: var(--border-strong);
    margin: 0 auto 12px;
}

/* The header sheet: who and where, the language, the look, the table question. */
.header-sheet[b-yi207ij61k] {
    max-height: 88vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.header-sheet-title[b-yi207ij61k] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.header-sheet-title h3[b-yi207ij61k] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text);
}

.header-sheet-title p[b-yi207ij61k] {
    margin: 0.2rem 0 0;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.sheet-label[b-yi207ij61k] {
    margin: 1rem 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.lang-list[b-yi207ij61k] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.375rem;
}

.lang-row[b-yi207ij61k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 46px;
    padding: 0 0.875rem;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    --ico: 16px;
    --ico-stroke: 2.4;
}

.lang-row.active[b-yi207ij61k] {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    font-weight: 600;
}

/* Automático · Claro · Oscuro, as one segmented control. */
.appearance-seg[b-yi207ij61k] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
    background: var(--surface-2);
}

.seg-opt[b-yi207ij61k] {
    min-height: 40px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.seg-opt.active[b-yi207ij61k] {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 1px 3px rgba(28, 26, 23, 0.12);
}

.wrong-table-link[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0;
    margin-top: 0.25rem;
    background: transparent;
    border: none;
    color: var(--text);
    font: inherit;
    font-size: 0.9375rem;
    cursor: pointer;
    text-align: left;
    --ico: 18px;
}

/* «¿No es tu mesa?», answered in the sheet (it was a native alert over a closed sheet). */
.wrong-table-info[b-yi207ij61k] {
    margin: 0 0 0.25rem;
    padding: 0.75rem 0.875rem;
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.45;
}

.wrong-table-link:hover[b-yi207ij61k] {
    color: var(--accent);
}

.sheet-close[b-yi207ij61k] {
    width: 100%;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 12px;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
    cursor: pointer;
}

/* Dish sheet: the body scrolls between a close that stays in reach and a footer with «Añadir» (design audit,
   2026-10-19: with options and notes the guest scrolled to find the button, and the close scrolled away). */
.item-modal[b-yi207ij61k] {
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: 92vh;
    overflow: hidden;
}

.item-modal-scroll[b-yi207ij61k] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal-image[b-yi207ij61k] {
    width: 100%;
    height: 240px;
    background-size: cover;
    background-position: center;
}

.modal-body[b-yi207ij61k] {
    padding: 1.5rem;
}

.item-modal.no-photo .modal-body h2[b-yi207ij61k],
.mddia-modal:not(:has(.modal-image)) .modal-body h2[b-yi207ij61k] {
    padding-right: 3rem;
}

.modal-body h2[b-yi207ij61k] {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 0.5rem 0;
    color: var(--text);
}

.modal-body .description[b-yi207ij61k] {
    color: var(--text-muted);
    margin: 0 0 1rem 0;
}

/* In ink, as on the rows: an accent price turned pastel on the rose and cream themes. */
.base-price[b-yi207ij61k] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    margin: 0 0 1.5rem 0;
}

/* Option Groups */
.option-group[b-yi207ij61k] {
    margin-bottom: 1.5rem;
}

/* A group's name reads as a heading (site.css's reset made it body text, so «SIN INGREDIENTES» read like an option). */
.option-group h4[b-yi207ij61k] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.375rem;
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    color: var(--text);
}

.option-group h4 .group-name[b-yi207ij61k] {
    flex: 1 1 auto;
    min-width: 0;
}

.group-rule[b-yi207ij61k] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex: none;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    --ico: 13px;
    --ico-stroke: 2.4;
}

.group-rule.required[b-yi207ij61k] {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    color: var(--text);
}

.group-rule.met[b-yi207ij61k] {
    background: var(--ok-bg);
    color: var(--ok);
}

.options-list[b-yi207ij61k] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.option[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 52px;
    padding: 0.75rem 0.875rem;
    background: var(--surface-2);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    border: 1px solid transparent;
}

.option.selected[b-yi207ij61k] {
    background: color-mix(in srgb, var(--accent) 15%, var(--surface));
    border-color: var(--accent);
}

.option input[b-yi207ij61k] {
    accent-color: var(--accent);
}

.option .delta[b-yi207ij61k] {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

/* Note Section */
.note-section[b-yi207ij61k] {
    margin-bottom: 1.5rem;
}

.note-section label[b-yi207ij61k] {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text);
}

.note-section textarea[b-yi207ij61k] {
    width: 100%;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 1rem;
    resize: none;
    height: 80px;
    font-family: inherit;
    background: var(--surface);
    color: var(--input-text);
}

.note-section textarea:focus[b-yi207ij61k] {
    outline: none;
    border-color: var(--accent);
}

/* The dish sheet's footer: the quantity and «Añadir · price», always in reach. */
.quantity-row[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -12px 28px -20px rgba(28, 26, 23, 0.35);
}

.quantity-control[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    background: var(--surface-2);
    border-radius: 999px;
    padding: 4px;
}

.quantity-control button[b-yi207ij61k] {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: var(--surface);
    color: var(--text);
    border: none;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(28, 26, 23, 0.08);
    cursor: pointer;
    transition: transform 0.12s ease;
}

.quantity-control button:active:not(:disabled)[b-yi207ij61k] {
    transform: scale(0.92);
}

.quantity-control button:disabled[b-yi207ij61k] {
    opacity: 0.4;
    box-shadow: none;
    cursor: not-allowed;
}

.quantity-control span[b-yi207ij61k] {
    min-width: 32px;
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.btn-add[b-yi207ij61k] {
    flex: 1;
    min-height: 52px;
    padding: 0 1.25rem;
    background: var(--secondary);
    color: var(--on-secondary);
    border: none;
    border-radius: 999px;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: transform 0.12s ease, opacity 0.15s ease;
}

.btn-add:active:not(:disabled)[b-yi207ij61k] {
    transform: scale(0.98);
}

/* Disabled keeps its colours, faded: a flat #ccc read as broken, and in dark mode as enabled. */
.btn-add:disabled[b-yi207ij61k] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Cart Drawer */
.cart-drawer[b-yi207ij61k] {
    background: var(--surface);
    width: 100%;
    max-height: 90vh;
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp-b-yi207ij61k 0.3s ease-out;
}

.cart-header[b-yi207ij61k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.cart-header h2[b-yi207ij61k] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
}

.cart-heading[b-yi207ij61k] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.cart-table[b-yi207ij61k] {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.cart-close[b-yi207ij61k] {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    --ico: 20px;
    --ico-stroke: 2;
}

.cart-close:hover[b-yi207ij61k] {
    background: var(--surface-2);
    color: var(--text);
}

.cart-body[b-yi207ij61k] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.cart-items[b-yi207ij61k] {
    padding: 1rem 1.5rem;
}

/* A cart line: the dish (its photo when it has one), what was chosen with it, its total and its own stepper. */
.cart-item[b-yi207ij61k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
    gap: 0.75rem;
}

.cart-thumb[b-yi207ij61k] {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--surface-2);
}

.cart-item-info[b-yi207ij61k] {
    display: flex;
    gap: 0.35rem;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}

.cart-item .details[b-yi207ij61k] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.cart-item .name[b-yi207ij61k] {
    font-weight: 500;
    text-align: left;
}

.cart-item .mods[b-yi207ij61k] {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.cart-item .note[b-yi207ij61k] {
    font-size: 0.8rem;
    color: var(--text-subtle);
}

.cart-item-actions[b-yi207ij61k] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.375rem;
}

.cart-stepper[b-yi207ij61k] {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 2px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    --ico: 16px;
    --ico-stroke: 2;
}

.cart-stepper .stepper-btn:last-child[b-yi207ij61k] {
    background: var(--surface-2);
    color: var(--text);
}

.line-total[b-yi207ij61k] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.btn-remove[b-yi207ij61k] {
    position: relative;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
    --ico: 16px;
    --ico-stroke: 2;
}

/* A 44 px target around the 34 px disc. */
.btn-remove[b-yi207ij61k]::after {
    content: "";
    position: absolute;
    inset: -5px;
}

.btn-remove:hover[b-yi207ij61k] {
    color: var(--danger);
    border-color: currentColor;
}

/* Cart Footer (scrollable section) */
.cart-footer[b-yi207ij61k] {
    padding: 1rem 1.5rem;
    background: var(--surface-2);
}

/* Sticky Footer with Total + Submit */
.cart-sticky-footer[b-yi207ij61k] {
    flex-shrink: 0;
    padding: 1rem 1.5rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
}

.sticky-total-row[b-yi207ij61k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.sticky-total[b-yi207ij61k] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
}

/* Cart validation error message */
.cart-error[b-yi207ij61k] {
    background: var(--danger-bg);
    color: var(--danger);
    padding: 0.625rem 0.875rem;
    border-radius: 12px;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
}

.cart-total-row[b-yi207ij61k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.cart-total-row .total[b-yi207ij61k] {
    font-weight: 700;
    color: var(--text);
}

.customer-name[b-yi207ij61k] {
    margin-bottom: 1rem;
}

.customer-name input[b-yi207ij61k] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--surface);
    color: var(--input-text);
}

.customer-name input:focus[b-yi207ij61k] {
    outline: none;
    border-color: var(--accent);
}

.btn-submit[b-yi207ij61k] {
    width: 100%;
    min-height: 54px;
    padding: 0 1.25rem;
    background: var(--secondary);
    color: var(--on-secondary);
    border: none;
    border-radius: 999px;
    font: inherit;
    font-size: 1.0625rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: transform 0.12s ease, opacity 0.15s ease;
}

.btn-submit:active:not(:disabled)[b-yi207ij61k] {
    transform: scale(0.98);
}

/* Disabled keeps its colours, faded: a flat #ccc read as broken, and in dark mode as enabled. */
.btn-submit:disabled[b-yi207ij61k] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Tip Selection */
.tip-section[b-yi207ij61k] {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.tip-section h4[b-yi207ij61k] {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    color: var(--text);
}

/* One row of tips, each with what it comes to. */
.tip-buttons[b-yi207ij61k] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.375rem;
}

.tip-btn[b-yi207ij61k] {
    min-height: 52px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    padding: 0.375rem 0.25rem;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: var(--surface);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--text);
    text-align: center;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tip-btn .tip-amount[b-yi207ij61k] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.tip-btn.active .tip-amount[b-yi207ij61k] {
    color: inherit;
    opacity: 0.8;
}

.tip-btn:hover[b-yi207ij61k] {
    border-color: var(--accent);
    color: var(--accent);
}

.tip-btn.active[b-yi207ij61k] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.custom-tip-input[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.custom-tip-input input[b-yi207ij61k] {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    text-align: right;
    background: var(--surface);
    color: var(--input-text);
}

.custom-tip-input input:focus[b-yi207ij61k] {
    outline: none;
    border-color: var(--accent);
}

.custom-tip-input span[b-yi207ij61k] {
    font-weight: 600;
    color: var(--text-muted);
}

.tip-amount[b-yi207ij61k] {
    margin-top: 0.75rem;
    text-align: center;
    color: var(--secondary);
    font-size: 0.9rem;
}

.tip-amount strong[b-yi207ij61k] {
    font-size: 1rem;
}

/* Cart breakdown (only shown when there are adjustments) */
.cart-breakdown[b-yi207ij61k] {
    background: var(--surface);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

/* Cart totals rows */
.cart-subtotal-row[b-yi207ij61k],
.cart-tip-row[b-yi207ij61k],
.cart-discount-row[b-yi207ij61k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.cart-breakdown .cart-subtotal-row:last-child[b-yi207ij61k],
.cart-breakdown .cart-tip-row:last-child[b-yi207ij61k],
.cart-breakdown .cart-discount-row:last-child[b-yi207ij61k] {
    margin-bottom: 0;
}

.cart-discount-row .discount[b-yi207ij61k] {
    color: var(--secondary);
    font-weight: 600;
}

.cart-total-row[b-yi207ij61k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    padding-top: 0.75rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.cart-total-row .total[b-yi207ij61k] {
    color: var(--accent);
    font-size: 1.25rem;
    white-space: nowrap;
}

/* Customer Info - Name/Email inputs */
.customer-info[b-yi207ij61k] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1rem 0;
}

.customer-info input[b-yi207ij61k] {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 1rem;
    background: var(--surface);
    color: var(--input-text);
    transition: border-color 0.2s;
}

.customer-info input:focus[b-yi207ij61k] {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}

.customer-info input[b-yi207ij61k]::placeholder {
    color: var(--input-placeholder);
}

.save-info-checkbox[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    cursor: pointer;
}

.save-info-checkbox input[type="checkbox"][b-yi207ij61k] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* Promo Section */
.promo-section[b-yi207ij61k] {
    margin: 1rem 0;
}

.promo-input[b-yi207ij61k] {
    display: flex;
    gap: 0.5rem;
}

.promo-input input[b-yi207ij61k] {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;   /* 16 px: iOS zooms into a smaller box */
    background: var(--surface);
    color: var(--input-text);
}

.promo-input input:focus[b-yi207ij61k] {
    outline: none;
    border-color: var(--accent);
}

.btn-promo[b-yi207ij61k] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.btn-promo:disabled[b-yi207ij61k] {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-promo-clear[b-yi207ij61k] {
    display: grid;
    place-items: center;
    width: 44px;
    padding: 0;
    background: var(--surface-3);
    color: var(--text-muted);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    --ico: 18px;
    --ico-stroke: 2;
}

.promo-error[b-yi207ij61k] {
    color: var(--danger);
    font-size: 0.8125rem;
    margin-top: 0.5rem;
}

.promo-success[b-yi207ij61k] {
    color: var(--ok);
    font-size: 0.875rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

/* Upsell Modal */
.upsell-modal[b-yi207ij61k] {
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    /* Clip to the 80vh box so the scrollable items area (flex:1) absorbs the
       overflow and the action footer stays pinned inside the viewport.
       Without this the product grid pushed the buttons below the fold. */
    overflow: hidden;
}

.upsell-header[b-yi207ij61k] {
    padding: 1.5rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
}

.upsell-header h2[b-yi207ij61k] {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    color: var(--text);
    font-family: var(--font-display);
}

.upsell-header p[b-yi207ij61k] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.upsell-items[b-yi207ij61k] {
    flex: 1;
    /* min-height:0 lets this flex child shrink below its content height so it
       actually scrolls (default min-height:auto would otherwise grow the modal
       and push the footer out). */
    min-height: 0;
    overflow-y: auto;
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

/* A tile per suggestion: the photo when there is one, else the name in the carta's serif (it was an empty grey box);
   once tapped it stays, with a check (it vanished and the grid jumped). A second tap takes it back out. */
.upsell-item[b-yi207ij61k] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    min-height: 132px;
    padding: 0.75rem;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 16px;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}

.upsell-item:active[b-yi207ij61k] {
    transform: scale(0.98);
}

.upsell-item.added[b-yi207ij61k] {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.upsell-image[b-yi207ij61k] {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-color: var(--surface-2);
}

.upsell-info[b-yi207ij61k] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-right: 2.5rem;
}

.upsell-name[b-yi207ij61k] {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text);
}

.upsell-item.no-photo .upsell-name[b-yi207ij61k] {
    font-family: var(--font-display);
    font-size: 1.0625rem;
}

.upsell-price[b-yi207ij61k] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.upsell-add[b-yi207ij61k] {
    position: absolute;
    inset-inline-end: 0.625rem;
    bottom: 0.625rem;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
    transition: background 0.15s ease, color 0.15s ease;
    --ico: 18px;
    --ico-stroke: 2;
}

.upsell-item.added .upsell-add[b-yi207ij61k] {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
}

.upsell-actions[b-yi207ij61k] {
    /* Pinned footer: never shrink so "No, gracias" / "Continuar" stay visible. */
    flex-shrink: 0;
    padding: 0.875rem 1.25rem calc(0.875rem + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    border-top: 1px solid var(--border);
}

.btn-skip[b-yi207ij61k] {
    min-height: 48px;
    padding: 0 1rem;
    background: transparent;
    color: var(--text-muted);
    border: none;
    border-radius: 999px;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-continue[b-yi207ij61k] {
    min-height: 52px;
    padding: 0 1rem;
    background: var(--secondary);
    color: var(--on-secondary);
    border: none;
    border-radius: 999px;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

/* Order History Button (a .qr-icon-btn) with its count on the corner */
.history-count[b-yi207ij61k] {
    position: absolute;
    top: -4px;
    inset-inline-end: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
}

/* Customer Email */
.customer-email[b-yi207ij61k] {
    margin-bottom: 1rem;
}

.customer-email input[b-yi207ij61k] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--surface);
    color: var(--input-text);
}

.customer-email input:focus[b-yi207ij61k] {
    outline: none;
    border-color: var(--accent);
}

/* Promo Code Section */
.promo-section[b-yi207ij61k] {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.promo-input-row[b-yi207ij61k] {
    display: flex;
    gap: 0.5rem;
}

.promo-input-row input[b-yi207ij61k] {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    text-transform: uppercase;
    background: var(--surface);
    color: var(--input-text);
}

.promo-input-row input:focus[b-yi207ij61k] {
    outline: none;
    border-color: var(--accent);
}

.promo-input-row input:disabled[b-yi207ij61k] {
    background: var(--surface-2);
}

.btn-promo[b-yi207ij61k] {
    padding: 0.75rem 1rem;
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.btn-promo:disabled[b-yi207ij61k] {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-promo.clear[b-yi207ij61k] {
    background: var(--danger);
}

.promo-message[b-yi207ij61k] {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.promo-message.success[b-yi207ij61k] {
    color: #4caf50;
}

.promo-message.error[b-yi207ij61k] {
    color: #f44336;
}

/* Cart Discount Row */
.cart-discount-row[b-yi207ij61k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: #4caf50;
    margin-bottom: 0.5rem;
}

.cart-discount-row .discount-label[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Order History Modal */
.history-modal[b-yi207ij61k] {
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.history-header[b-yi207ij61k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.history-header h2[b-yi207ij61k] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--text);
}

.btn-clear-history[b-yi207ij61k] {
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
}

.btn-clear-history:hover[b-yi207ij61k] {
    border-color: var(--danger);
    color: var(--danger);
}

.history-list[b-yi207ij61k] {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.25rem 1.25rem 0.75rem;
}

.history-empty[b-yi207ij61k] {
    text-align: center;
    color: var(--text-subtle);
    padding: 2rem;
}

.history-order[b-yi207ij61k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--surface-2);
    border-radius: 12px;
    margin-bottom: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.history-order:hover[b-yi207ij61k] {
    background: var(--surface-3);
}

.history-order-info h4[b-yi207ij61k] {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    color: var(--text);
}

.history-order-info p[b-yi207ij61k] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.history-order-meta[b-yi207ij61k] {
    text-align: right;
}

.history-order-meta .total[b-yi207ij61k] {
    font-weight: 600;
    color: var(--text);
    font-size: 1rem;
}

.history-order-meta .date[b-yi207ij61k] {
    font-size: 0.75rem;
    color: var(--text-subtle);
}

.history-footer[b-yi207ij61k] {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
}

.btn-close-history[b-yi207ij61k] {
    width: 100%;
    padding: 0.75rem;
    background: var(--surface-2);
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    color: var(--text-muted);
    cursor: pointer;
}

/* Dark Mode Styles */
.qr-order-page.dark[b-yi207ij61k] {
    --page-bg: var(--dark-bg);
    --surface: var(--dark-surface);
    --surface-2: var(--dark-surface-2);
    --surface-3: var(--dark-surface-3);
    --text: var(--dark-text);
    --text-muted: var(--dark-text-muted);
    --text-subtle: var(--dark-text-subtle);
    --border: var(--dark-border);
    --border-strong: var(--dark-border-strong);
    --input-bg: var(--dark-surface-2);
    --input-text: var(--dark-text);
    --input-placeholder: var(--dark-text-subtle);
    --chip-bg: var(--dark-surface-2);
    --chip-text: var(--dark-text-muted);
    --shadow: rgba(0,0,0,0.45);
    --shadow-strong: rgba(0,0,0,0.6);
    --ok: #6fcf97;
    --warn: #f0b46a;
    --danger: #f97066;
    /* Native controls (radios, checkboxes, scrollbars) drawn dark too: an unchecked radio was a white disc that read
       as checked. */
    color-scheme: dark;
    background: var(--page-bg);
    color: var(--text);
}

.qr-order-page.dark .qr-header[b-yi207ij61k] {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border);
}

/* Over the cover the header is the cover's own top edge in the dark too (the rule above drew an empty bar with a line
   over the venue's name). */
.qr-order-page.dark .qr-header.over-hero[b-yi207ij61k] {
    background: transparent !important;
    border-bottom-color: transparent;
}

html.qr-hero-passed .qr-order-page.dark .qr-header.over-hero[b-yi207ij61k] {
    background: var(--surface) !important;
    border-bottom-color: var(--border);
}

.qr-order-page.dark .restaurant-info h1[b-yi207ij61k] {
    color: var(--text) !important;
}

.qr-order-page.dark .sheet-content[b-yi207ij61k] {
    background: var(--surface);
}

.qr-order-page.dark .sheet-row[b-yi207ij61k] {
    border-bottom: 1px solid var(--border);
}

.qr-order-page.dark .sheet-row select[b-yi207ij61k] {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}

.qr-order-page.dark .item-info h3[b-yi207ij61k] {
    color: var(--text);
}

.qr-order-page.dark .item-info .description[b-yi207ij61k] {
    color: var(--text-muted);
}

.qr-order-page.dark .modal-content[b-yi207ij61k],
.qr-order-page.dark .cart-drawer[b-yi207ij61k] {
    background: var(--surface);
}

.qr-order-page.dark .modal-body h2[b-yi207ij61k] {
    color: var(--text);
}

.qr-order-page.dark .modal-body .description[b-yi207ij61k] {
    color: var(--text-muted);
}

.qr-order-page.dark .option[b-yi207ij61k] {
    background: var(--surface-2);
    border-color: transparent;
}

.qr-order-page.dark .option.selected[b-yi207ij61k] {
    background: color-mix(in srgb, var(--accent) 20%, var(--surface));
    border-color: var(--accent);
}

.qr-order-page.dark .note-section textarea[b-yi207ij61k],
.qr-order-page.dark .customer-name input[b-yi207ij61k],
.qr-order-page.dark .customer-email input[b-yi207ij61k],
.qr-order-page.dark .promo-input-row input[b-yi207ij61k],
.qr-order-page.dark .language-selector select[b-yi207ij61k] {
    background: var(--input-bg);
    border-color: var(--border-strong);
    color: var(--input-text);
}

.qr-order-page.dark .cart-header[b-yi207ij61k] {
    border-color: var(--border);
}

.qr-order-page.dark .cart-header h2[b-yi207ij61k] {
    color: var(--text);
}

.qr-order-page.dark .cart-item[b-yi207ij61k] {
    border-color: var(--border);
}

.qr-order-page.dark .cart-item .name[b-yi207ij61k] {
    color: var(--text);
}

.qr-order-page.dark .cart-item .mods[b-yi207ij61k],
.qr-order-page.dark .cart-item .note[b-yi207ij61k] {
    color: var(--text-subtle);
}

.qr-order-page.dark .line-total[b-yi207ij61k] {
    color: var(--text);
}

.qr-order-page.dark .cart-close[b-yi207ij61k] {
    color: var(--text-muted);
    border-color: var(--border);
}

.qr-order-page.dark .cart-close:hover[b-yi207ij61k] {
    background: var(--surface-2);
    color: var(--text);
}

.qr-order-page.dark .cart-breakdown[b-yi207ij61k] {
    background: var(--surface-2);
}

.qr-order-page.dark .cart-footer[b-yi207ij61k] {
    background: var(--page-bg);
    border-color: var(--border);
}

.qr-order-page.dark .cart-sticky-footer[b-yi207ij61k] {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
}

.qr-order-page.dark .sticky-total[b-yi207ij61k] {
    color: var(--text);
}

.qr-order-page.dark .cart-subtotal-row[b-yi207ij61k],
.qr-order-page.dark .cart-tip-row[b-yi207ij61k] {
    color: var(--text-muted);
}

.qr-order-page.dark .cart-discount-row[b-yi207ij61k] {
    color: var(--secondary);
}

.qr-order-page.dark .cart-total-row[b-yi207ij61k] {
    color: var(--text);
    background: transparent;
    border-color: var(--border-strong);
}

.qr-order-page.dark .cart-total-row .total[b-yi207ij61k] {
    color: var(--text);
    background: transparent;
    border: none;
    box-shadow: none;
}

.qr-order-page.dark .tip-section[b-yi207ij61k] {
    border-color: var(--border);
}

.qr-order-page.dark .tip-section h4[b-yi207ij61k] {
    color: var(--text);
}

.qr-order-page.dark .tip-btn[b-yi207ij61k] {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--text-muted);
}

.qr-order-page.dark .tip-btn:hover[b-yi207ij61k] {
    border-color: var(--accent);
    color: var(--accent);
}

.qr-order-page.dark .tip-btn.active[b-yi207ij61k] {
    background: var(--accent);
    color: var(--on-accent);
}

.qr-order-page.dark .allergen-filter[b-yi207ij61k] {
    background: var(--surface);
    border-color: var(--border);
}

.qr-order-page.dark .allergen-chip[b-yi207ij61k] {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--text-muted);
}

.qr-order-page.dark .allergen-chip.active[b-yi207ij61k] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.qr-order-page.dark .loading-screen[b-yi207ij61k],
.qr-order-page.dark .error-screen[b-yi207ij61k],
.qr-order-page.dark .success-screen[b-yi207ij61k] {
    background: var(--page-bg);
}

.qr-order-page.dark .history-modal[b-yi207ij61k],
.qr-order-page.dark .upsell-modal[b-yi207ij61k] {
    background: var(--surface);
}

.qr-order-page.dark .history-header[b-yi207ij61k],
.qr-order-page.dark .upsell-header[b-yi207ij61k] {
    border-color: var(--border);
}

.qr-order-page.dark .history-header h2[b-yi207ij61k],
.qr-order-page.dark .upsell-header h2[b-yi207ij61k] {
    color: var(--text);
}

.qr-order-page.dark .history-order[b-yi207ij61k] {
    background: var(--surface-2);
}

.qr-order-page.dark .history-order:hover[b-yi207ij61k] {
    background: var(--surface-3);
}

.qr-order-page.dark .history-order-info h4[b-yi207ij61k] {
    color: var(--text);
}

.qr-order-page.dark .history-order-meta .total[b-yi207ij61k] {
    color: var(--text);
}

.qr-order-page.dark .upsell-name[b-yi207ij61k] {
    color: var(--text);
}

.qr-order-page.dark .customer-info input[b-yi207ij61k] {
    background: var(--input-bg);
    border-color: var(--border-strong);
    color: var(--input-text);
}

.qr-order-page.dark .customer-info input[b-yi207ij61k]::placeholder {
    color: var(--input-placeholder);
}

.qr-order-page.dark .customer-info input:focus[b-yi207ij61k] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.qr-order-page.dark .save-info-checkbox[b-yi207ij61k] {
    color: var(--text-muted);
}

.qr-order-page.dark .promo-input input[b-yi207ij61k] {
    background: var(--input-bg);
    border-color: var(--border-strong);
    color: var(--input-text);
}

.qr-order-page.dark .promo-input input[b-yi207ij61k]::placeholder {
    color: var(--input-placeholder);
}

.qr-order-page.dark .btn-promo-clear[b-yi207ij61k] {
    background: var(--surface-3);
    color: var(--text-muted);
}

.qr-order-page.dark .custom-tip-input input[b-yi207ij61k] {
    background: var(--input-bg);
    border-color: var(--border-strong);
    color: var(--input-text);
}

.qr-order-page.dark .custom-tip-input span[b-yi207ij61k] {
    color: var(--text-muted);
}

.qr-order-page.dark .quantity-row[b-yi207ij61k] {
    border-color: var(--border);
}

.qr-order-page.dark .quantity-control[b-yi207ij61k] {
    background: var(--surface-2);
}

.qr-order-page.dark .quantity-control button[b-yi207ij61k] {
    background: var(--surface-3);
    color: var(--text);
}

.qr-order-page.dark .quantity-control button:disabled[b-yi207ij61k] {
    background: var(--surface-2);
    color: var(--text-subtle);
}

.qr-order-page.dark .quantity-control span[b-yi207ij61k] {
    color: var(--text);
}

/* ========== NEW FEATURES ========== */

/* Skeleton Loading — the shape of the list that is coming */
.skeleton-loading[b-yi207ij61k] {
    padding: 0;
    background: var(--page-bg);
}

.skeleton-header[b-yi207ij61k] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-content: center;
    column-gap: 12px;
    row-gap: 7px;
    box-sizing: border-box;
    height: var(--header-offset);
    padding: 0 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.skeleton-header i[b-yi207ij61k] {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-yi207ij61k 1.5s infinite;
}

.skeleton-header .sk-name[b-yi207ij61k] { grid-column: 1; width: 46%; height: 18px; }
.skeleton-header .sk-meta[b-yi207ij61k] { grid-column: 1; width: 26%; height: 10px; }
.skeleton-header .sk-action[b-yi207ij61k] { grid-column: 2; grid-row: 1 / span 2; width: 104px; height: 38px; border-radius: 999px; }

.skeleton-categories[b-yi207ij61k] {
    display: flex;
    gap: 0.375rem;
    padding: 0.625rem 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.skeleton-pill:first-child[b-yi207ij61k] {
    width: 36px;
}

.skeleton-pill[b-yi207ij61k] {
    flex: none;
    width: 84px;
    height: 36px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-yi207ij61k 1.5s infinite;
}

.skeleton-grid[b-yi207ij61k] {
    max-width: 760px;
    margin: 0 auto;
    padding: 1.25rem 1rem;
}

/* A row: the dish's name, its price, and the ring of its "+". */
.skeleton-card[b-yi207ij61k] {
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
    background: radial-gradient(circle at calc(100% - 18px) 50%, transparent 16.5px, var(--border) 17px, var(--border) 18px, transparent 18.5px) no-repeat;
}

.skeleton-image[b-yi207ij61k] {
    display: none;
}

.skeleton-text[b-yi207ij61k] {
    width: 55%;
    height: 14px;
    margin: 0 0 0.6rem;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-yi207ij61k 1.5s infinite;
}

.skeleton-text.short[b-yi207ij61k] {
    width: 22%;
    height: 12px;
    margin: 0;
}

@keyframes skeleton-shimmer-b-yi207ij61k {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-pill[b-yi207ij61k],
    .skeleton-text[b-yi207ij61k],
    .skeleton-header i[b-yi207ij61k] {
        animation: none;
    }
}

/* Quick Add — a quiet "+" on a text row, a white disc on a photo */
.quick-add-btn[b-yi207ij61k] {
    position: relative;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.quick-add-btn .ico[b-yi207ij61k],
.stepper-btn .ico[b-yi207ij61k] {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

/* A 44 px target around the 36 px disc (and the stepper's 32 px buttons). */
.quick-add-btn[b-yi207ij61k]::after,
.stepper-btn[b-yi207ij61k]::after {
    content: "";
    position: absolute;
    inset: -5px;
}

.quick-add-btn:hover[b-yi207ij61k] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.quick-add-btn:active[b-yi207ij61k] {
    transform: scale(0.92);
}

.quick-stepper[b-yi207ij61k] {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 2px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
}

.stepper-btn[b-yi207ij61k] {
    position: relative;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stepper-btn:last-child[b-yi207ij61k] {
    background: var(--accent);
    color: var(--on-accent);
}

.stepper-qty[b-yi207ij61k] {
    min-width: 22px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* On a photo, the "+" (or the stepper) sits on the photo's lower corner. */
.item-card[data-photo="yes"] .quick-add-btn[b-yi207ij61k],
.item-card[data-photo="yes"] .quick-stepper[b-yi207ij61k] {
    position: absolute;
    top: calc(1rem + 96px - 42px);
    inset-inline-end: 6px;
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.item-card[data-photo="yes"] .quick-stepper[b-yi207ij61k] {
    inset-inline-end: 0;
}

/* The review request: a quiet card in the page's own colours (it was gold-bordered cream, emoji stars and an olive
   gradient button). No Google logo: nothing on the page may suggest a partnership. */
.google-review-prompt[b-yi207ij61k] {
    width: 100%;
    max-width: 24rem;
    margin-top: 1.5rem;
    padding: 1.25rem 1.25rem 1.125rem;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    text-align: center;
}

.google-review-prompt .review-stars[b-yi207ij61k] {
    display: inline-flex;
    gap: 2px;
    margin-bottom: 0.5rem;
    color: #e3a849;
    --ico: 18px;
    --ico-fill: #e3a849;
}

.google-review-prompt .review-message[b-yi207ij61k] {
    margin: 0 0 0.875rem;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--text);
    overflow-wrap: break-word;
}

.google-review-prompt .btn-review[b-yi207ij61k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    max-width: 100%;
    min-height: 44px;
    padding: 0.6rem 1.25rem;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border-strong);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
}

.google-review-prompt .btn-review:focus-visible[b-yi207ij61k] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Confirmation Modal Overlay - higher z-index to ensure visibility */
.confirm-overlay[b-yi207ij61k] {
    z-index: 250;
}

/* Confirmation dialogs: a centred card, an icon in a soft disc, a heading that reads as one (site.css's reset made it
   body weight), two pill buttons. */
.confirm-modal[b-yi207ij61k] {
    max-width: 340px;
    width: calc(100% - 2rem);
    padding: 1.5rem 1.25rem 1.25rem;
    text-align: center;
    border-radius: 22px;
    margin: auto;
    animation: confirm-in-b-yi207ij61k 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.confirm-icon[b-yi207ij61k] {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 0.75rem;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text);
    --ico: 24px;
}

.confirm-modal h3[b-yi207ij61k] {
    margin: 0 0 0.5rem 0;
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text);
}

.confirm-modal p[b-yi207ij61k] {
    margin: 0 0 1.25rem 0;
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.45;
}

/* The call-waiter question after a refused call (too many in a row, a stale code, no connection): it reads as an error,
   as the cart's does, not as more of the question. */
.confirm-modal .call-waiter-error[b-yi207ij61k] {
    margin: 0 0 0.75rem 0;
    padding: 0.625rem 0.875rem;
    border-radius: 12px;
    background: var(--danger-bg);
    color: var(--danger);
    font-size: 0.875rem;
    font-weight: 500;
}

.confirm-buttons[b-yi207ij61k] {
    display: flex;
    gap: 0.625rem;
    justify-content: center;
}

.btn-confirm-no[b-yi207ij61k],
.btn-confirm-yes[b-yi207ij61k] {
    flex: 1;
    min-height: 48px;
    padding: 0 1rem;
    border: none;
    border-radius: 999px;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.12s ease;
}

.btn-confirm-no[b-yi207ij61k] {
    background: var(--surface-2);
    color: var(--text);
}

.btn-confirm-yes[b-yi207ij61k] {
    background: var(--accent);
    color: var(--on-accent);
}

.btn-confirm-no:active[b-yi207ij61k],
.btn-confirm-yes:active[b-yi207ij61k] {
    transform: scale(0.97);
}

.btn-confirm-yes:disabled[b-yi207ij61k] {
    opacity: 0.4;
}

@keyframes confirm-in-b-yi207ij61k {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .confirm-modal[b-yi207ij61k] {
        animation: none;
    }
}

.qr-order-page.dark .btn-confirm-no[b-yi207ij61k] {
    background: var(--surface-2);
    color: var(--text-muted);
}

/* Fix promo button dark mode */
.qr-order-page.dark .btn-promo[b-yi207ij61k] {
    background: var(--accent);
    color: var(--on-accent);
}


/* Call waiter button - icon only by default, expands when called */

/* Right-to-left menus (Arabic): the page root carries dir="rtl", so every row already runs from the right and only
   the icons that point a way are mirrored. These rules used to reverse rows by hand for a dir nothing set; with dir
   set they would have turned them back to left-to-right. */
.qr-order-page[dir="rtl"] .promo-arrow[b-yi207ij61k]  svg,
.qr-order-page[dir="rtl"] .history-arrow[b-yi207ij61k]  svg,
.qr-order-page[dir="rtl"] .mddia-cta[b-yi207ij61k]  svg {
    transform: scaleX(-1);
}

.qr-order-page[dir="rtl"] .google-review-prompt[b-yi207ij61k] {
    text-align: center;
}

@media (max-width: 720px) {
    .language-selector[b-yi207ij61k] {
        display: none;
    }

    .lang-btn-mobile[b-yi207ij61k] {
        display: inline-flex;
    }

    /* Mobile banner styles */
    .promo-banner[b-yi207ij61k] {
        padding: 10px 12px;
        gap: 8px;
        font-size: 0.9rem;
    }

    .promo-banner.promo-item-banner[b-yi207ij61k] {
        padding: 8px 10px;
        gap: 10px;
    }

    .promo-item-image[b-yi207ij61k] {
        width: 48px;
        height: 48px;
        border-radius: 6px;
    }

    .promo-item-info[b-yi207ij61k] {
        gap: 2px;
    }

    .promo-text[b-yi207ij61k] {
        font-size: 0.85rem;
        line-height: 1.3;
        /* Limit to 2 lines on mobile with word wrap */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .promo-item-name[b-yi207ij61k] {
        font-size: 0.9rem;
    }

    .promo-item-price[b-yi207ij61k] {
        font-size: 0.85rem;
    }

    .promo-countdown[b-yi207ij61k] {
        font-size: 0.8rem;
    }

    .promo-add-btn[b-yi207ij61k] {
        font-size: 0.75rem;
        padding: 4px 10px;
    }

    .promo-banner.promo-toast[b-yi207ij61k] {
        left: 12px;
        right: 12px;
        transform: none;
        max-width: none;
    }

}

/* Tablet+ adjustments */
@media (min-width: 768px) {
    .modal-content[b-yi207ij61k],
    .cart-drawer[b-yi207ij61k] {
        max-width: 500px;
        margin: 0 auto;
        border-radius: 20px;
        margin-bottom: 2rem;
    }

    .modal-overlay[b-yi207ij61k] {
        align-items: center;
        justify-content: center;
    }

    .skeleton-grid[b-yi207ij61k] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========== Payment Section ========== */
/* No line of its own: the promo section above already ends in one (two lines stacked). */
.payment-section[b-yi207ij61k] {
    margin-top: 1rem;
    padding-top: 0.25rem;
}

.payment-section h4[b-yi207ij61k] {
    margin: 0 0 0.75rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
}

.payment-options[b-yi207ij61k] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.payment-option[b-yi207ij61k] {
    flex: 1;
    min-width: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.875rem 0.5rem;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.payment-option:hover[b-yi207ij61k] {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.payment-option.selected[b-yi207ij61k] {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    box-shadow: 0 0 0 1px var(--accent);
}

.payment-icon[b-yi207ij61k] {
    display: inline-flex;
    --ico: 26px;
    --ico-stroke: 1.5;
}

.payment-label[b-yi207ij61k] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
    text-align: center;
}

.payment-required-notice[b-yi207ij61k] {
    margin: 0.75rem 0 0 0;
    padding: 0.5rem;
    background: #fff3cd;
    border-radius: 8px;
    color: #856404;
    font-size: 0.85rem;
    text-align: center;
}

/* Dark mode payment */
.qr-order-page.dark .payment-section[b-yi207ij61k] {
    border-top-color: var(--border);
}

.qr-order-page.dark .payment-section h4[b-yi207ij61k] {
    color: var(--text-muted);
}

.qr-order-page.dark .payment-option[b-yi207ij61k] {
    background: var(--surface-2);
    border-color: var(--border-strong);
}

.qr-order-page.dark .payment-option:hover[b-yi207ij61k] {
    border-color: var(--accent);
    background: var(--surface-3);
}

.qr-order-page.dark .payment-option.selected[b-yi207ij61k] {
    background: color-mix(in srgb, var(--accent) 20%, #1a1a1a);
}

.qr-order-page.dark .payment-label[b-yi207ij61k] {
    color: #eee;
}

.qr-order-page.dark .payment-required-notice[b-yi207ij61k] {
    background: #332b00;
    color: #ffc107;
}

/* ========== Stripe Payment Modal ========== */
.payment-modal[b-yi207ij61k] {
    max-width: 400px;
    padding: 1.5rem;
    border-radius: 16px;
    margin: auto;
}

.payment-header[b-yi207ij61k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.payment-header h2[b-yi207ij61k] {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text);
}

.payment-amount[b-yi207ij61k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--surface-2);
    border-radius: 12px;
    margin-bottom: 1rem;
}

.amount-label[b-yi207ij61k] {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.amount-value[b-yi207ij61k] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
}

.stripe-element[b-yi207ij61k] {
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    min-height: 100px;
    margin-bottom: 1rem;
}

.stripe-loading[b-yi207ij61k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 80px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.spinner-small[b-yi207ij61k] {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin-b-yi207ij61k 0.8s linear infinite;
}

@keyframes spin-b-yi207ij61k {
    to { transform: rotate(360deg); }
}

.payment-error[b-yi207ij61k] {
    padding: 0.75rem;
    background: #fee2e2;
    color: #dc2626;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.payment-actions[b-yi207ij61k] {
    display: flex;
    gap: 0.75rem;
}

.btn-cancel[b-yi207ij61k] {
    flex: 1;
    padding: 0.875rem;
    background: var(--surface-2);
    color: var(--text-muted);
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}

.btn-pay[b-yi207ij61k] {
    flex: 2;
    padding: 0.875rem;
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.btn-pay:disabled[b-yi207ij61k],
.btn-cancel:disabled[b-yi207ij61k] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Who takes the card, quietly, under the buttons. */
.payment-secure[b-yi207ij61k] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0.875rem 0 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    --ico: 14px;
}

/* Dark mode payment modal */
.qr-order-page.dark .payment-modal[b-yi207ij61k] {
    background: #1e1e1e;
}

.qr-order-page.dark .payment-header h2[b-yi207ij61k] {
    color: #fff;
}

.qr-order-page.dark .payment-amount[b-yi207ij61k] {
    background: #2a2a2a;
}

.qr-order-page.dark .amount-label[b-yi207ij61k] {
    color: #aaa;
}

.qr-order-page.dark .stripe-element[b-yi207ij61k] {
    background: #2a2a2a;
    border-color: #444;
}

.qr-order-page.dark .payment-error[b-yi207ij61k] {
    background: #4a1515;
    color: #f87171;
}

.qr-order-page.dark .btn-cancel[b-yi207ij61k] {
    background: var(--surface-2);
    color: var(--text-muted);
}

/* ========== View Bill Button & Modal ========== */

/* Bill Modal — a bottom sheet like the cart: its heading and its pay button stay put while the rest scrolls (it was a
   floating 360 px card with square bottom corners, «Pagar ahora» cut off on a 360 px phone; design audit,
   2026-10-19). */
.bill-modal[b-yi207ij61k] {
    max-width: 520px;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.bill-header[b-yi207ij61k] {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 -1.25rem 0.25rem;
    padding: 1.125rem 1.25rem 0.75rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.bill-heading[b-yi207ij61k] {
    min-width: 0;
}

.bill-header h2[b-yi207ij61k] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text);
}

.bill-order-ref[b-yi207ij61k] {
    margin: 0.2rem 0 0;
}

.bill-order-no[b-yi207ij61k] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.bill-empty[b-yi207ij61k] {
    text-align: center;
    padding: 2rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
}

.bill-empty .empty-icon[b-yi207ij61k] {
    display: block;
    width: 44px;
    height: 44px;
    margin: 0 auto 1rem;
    color: var(--text-subtle);
    stroke-width: 1.4;
}

.bill-empty h3[b-yi207ij61k] {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
}

.bill-empty p[b-yi207ij61k] {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

/* Bill Items */
.bill-items[b-yi207ij61k] {
    margin-bottom: 1rem;
}

.bill-item[b-yi207ij61k] {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}

.bill-item:last-child[b-yi207ij61k] {
    border-bottom: none;
}

.item-row[b-yi207ij61k] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.item-qty[b-yi207ij61k] {
    font-weight: 600;
    color: var(--text-muted);
    min-width: 30px;
    font-variant-numeric: tabular-nums;
}

.item-name[b-yi207ij61k] {
    flex: 1;
}

.item-price[b-yi207ij61k] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.item-modifier[b-yi207ij61k] {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-left: 2rem;
    margin-top: 0.25rem;
}

/* Bill Totals: what is left to pay in ink and largest; what was paid in the meaning colour, with a bar (it was all in
   Material orange, 2.4:1). */
.bill-totals[b-yi207ij61k] {
    background: var(--surface-2);
    border-radius: 16px;
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
}

.bill-progress[b-yi207ij61k] {
    height: 6px;
    margin: 0.25rem 0 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ok) 16%, var(--surface));
    overflow: hidden;
}

.bill-progress span[b-yi207ij61k] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ok);
}

.total-row[b-yi207ij61k] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.375rem 0;
    gap: 0.5rem;
    font-variant-numeric: tabular-nums;
}

.total-row > span:last-child[b-yi207ij61k] {
    white-space: nowrap;
    flex-shrink: 0;
}

.total-row:first-child[b-yi207ij61k] {
    font-weight: 600;
    font-size: 1.0625rem;
}

.total-row.paid[b-yi207ij61k] {
    color: var(--ok);
    font-weight: 500;
}

.total-row.pending[b-yi207ij61k] {
    color: var(--text);
    font-weight: 700;
    font-size: 1.125rem;
}

.total-amount[b-yi207ij61k] {
    font-size: 1.125rem;
}

.pending-amount[b-yi207ij61k] {
    font-weight: 700;
}

/* Payment History */
.bill-payments[b-yi207ij61k] {
    margin-bottom: 1rem;
}

.bill-payments h4[b-yi207ij61k] {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.payment-row[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
}

.payment-row:last-child[b-yi207ij61k] {
    border-bottom: none;
}

.pay-icon[b-yi207ij61k] {
    display: inline-flex;
    color: var(--text-muted);
    --ico: 18px;
}

.pay-method[b-yi207ij61k] {
    flex: 1;
}

.pay-amount[b-yi207ij61k] {
    font-weight: 600;
}

.pay-time[b-yi207ij61k] {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Split the bill */
.bill-split[b-yi207ij61k] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.split-label[b-yi207ij61k] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
.split-modes[b-yi207ij61k] {
    display: flex;
    gap: 0.4rem;
}
.split-mode[b-yi207ij61k] {
    flex: 1;
    min-height: 44px;
    padding: 0.5rem 0.4rem;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
/* Chosen: filled, as the cart's chosen tip is (a 12 % tint read as a pressed grey box). */
.split-mode.active[b-yi207ij61k] {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
}
.split-equal-row[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.7rem;
    flex-wrap: wrap;
}
.split-step[b-yi207ij61k] {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}
.split-step:disabled[b-yi207ij61k] { opacity: .4; cursor: default; }
.split-ways[b-yi207ij61k] { font-weight: 600; min-width: 5.5rem; text-align: center; }
.split-per[b-yi207ij61k] {
    margin-left: auto;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.split-custom-row[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.7rem;
    flex-wrap: wrap;
}
.split-custom-input[b-yi207ij61k] {
    width: 7rem;
    min-width: 0;
    min-height: 44px;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.split-hint[b-yi207ij61k] { font-size: 0.85rem; color: var(--text-muted); }

/* Pay Actions: the sheet's footer, always in reach. */
.bill-pay-actions[b-yi207ij61k] {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 1rem -1.25rem 0;
    padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -12px 28px -20px rgba(28, 26, 23, 0.35);
}

/* Primary Pay CTA */
.btn-pay-cta[b-yi207ij61k] {
    width: 100%;
    min-height: 54px;
    padding: 0 1.25rem;
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    border-radius: 999px;
    font: inherit;
    font-size: 1.0625rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: transform 0.12s ease, opacity 0.15s ease;
}

.btn-pay-cta:active:not(:disabled)[b-yi207ij61k] {
    transform: scale(0.98);
}

.btn-pay-cta:disabled[b-yi207ij61k] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* PayPal: a quiet second choice in the page's ink (a brand-blue outline and a squared «P» emoji). */
.btn-paypal-alt[b-yi207ij61k] {
    width: 100%;
    min-height: 48px;
    margin-top: 0.5rem;
    padding: 0 1rem;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    --ico: 18px;
}

.btn-paypal-alt:disabled[b-yi207ij61k] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Pay at counter info */
.bill-pay-info[b-yi207ij61k] {
    text-align: center;
    padding: 1rem;
    background: var(--surface-2);
    border-radius: 12px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Fully Paid Badge */
.bill-paid-badge[b-yi207ij61k] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.5rem 0 calc(1.25rem + env(safe-area-inset-bottom));
    padding: 1rem;
    background: var(--ok-bg);
    color: var(--ok);
    border-radius: 14px;
    font-weight: 600;
    --ico: 22px;
    --ico-stroke: 2.2;
}

/* Close Button (the empty bill) */
.btn-close-bill[b-yi207ij61k] {
    width: 100%;
    min-height: 48px;
    padding: 0 1rem;
    background: var(--surface-2);
    border: none;
    border-radius: 999px;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text);
}

.bill-empty-notice[b-yi207ij61k] {
    margin: 0.5rem 0 calc(1.25rem + env(safe-area-inset-bottom));
    color: var(--text-muted);
    text-align: center;
}

/* ========== Menú del Día Styles ========== */

/* Banner on main page */
.menu-del-dia-banner[b-yi207ij61k] {
    max-width: 728px;
    margin: 1rem max(1rem, calc((100% - 728px) / 2)) 1rem;
    background: linear-gradient(135deg, var(--accent) 0%, var(--secondary) 100%);
    border-radius: 16px;
    padding: 1rem;
    cursor: pointer;
    box-shadow: 0 6px 20px var(--shadow-strong);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.menu-del-dia-banner:hover[b-yi207ij61k] {
    transform: translateY(-2px);
}

/* Picture or icon, then the name and what it includes, then the price: the name keeps one line («Menú del / Día»
   wrapped against the price column; design audit, 2026-10-19). */
.mddia-content[b-yi207ij61k] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.875rem;
}

.mddia-icon[b-yi207ij61k] {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--on-accent) 16%, transparent);
    color: var(--on-accent);
    --ico: 28px;
    --ico-stroke: 1.5;
}

.mddia-image[b-yi207ij61k] {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.mddia-info[b-yi207ij61k] {
    flex: 1;
    min-width: 0;
}

.mddia-title[b-yi207ij61k] {
    margin: 0 0 0.25rem;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--on-accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mddia-desc[b-yi207ij61k] {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: color-mix(in srgb, var(--on-accent) 85%, transparent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mddia-includes[b-yi207ij61k] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.mddia-tag[b-yi207ij61k] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: color-mix(in srgb, var(--on-accent) 18%, transparent);
    color: var(--on-accent);
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    --ico: 14px;
    --ico-stroke: 1.9;
}

.mddia-price[b-yi207ij61k] {
    text-align: right;
    flex-shrink: 0;
}

.mddia-price-value[b-yi207ij61k] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--on-accent);
    font-variant-numeric: tabular-nums;
}

.mddia-cta[b-yi207ij61k] {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: color-mix(in srgb, var(--on-accent) 85%, transparent);
    white-space: nowrap;
    --ico: 14px;
    --ico-stroke: 2;
}

/* A narrow phone: the price under the tags, so the name keeps its room. */
@media (max-width: 380px) {
    .mddia-content[b-yi207ij61k] {
        grid-template-columns: auto 1fr;
    }

    .mddia-price[b-yi207ij61k] {
        grid-column: 2;
        display: flex;
        align-items: baseline;
        gap: 0.75rem;
        text-align: left;
    }

    .mddia-price-value[b-yi207ij61k] {
        display: inline;
        font-size: 1.25rem;
    }
}

/* Menú del Día Modal */
/* Its close is placed against the sheet (it sat against the viewport, over «Ver cuenta»). */
.mddia-modal[b-yi207ij61k] {
    position: relative;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

.mddia-includes-detail[b-yi207ij61k] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.mddia-includes-detail .mddia-tag[b-yi207ij61k] {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
}

.mddia-base-price[b-yi207ij61k] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--accent);
    margin: 0.5rem 0 1.5rem;
}

.mddia-course[b-yi207ij61k] {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.mddia-course:last-child[b-yi207ij61k] {
    border-bottom: none;
}

.course-title[b-yi207ij61k] {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.course-items[b-yi207ij61k] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.course-item[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--surface-2);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.course-item:hover[b-yi207ij61k] {
    background: var(--surface-3);
}

.course-item.selected[b-yi207ij61k] {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border: 2px solid var(--accent);
}

.course-item input[type="radio"][b-yi207ij61k] {
    accent-color: var(--accent);
    width: 18px;
    height: 18px;
}

.course-item .item-name[b-yi207ij61k] {
    flex: 1;
    font-weight: 500;
}

.course-item .item-supplement[b-yi207ij61k] {
    font-size: 0.9rem;
    color: var(--secondary);
    font-weight: 600;
}

.mddia-quantity[b-yi207ij61k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: var(--surface-2);
    border-radius: 12px;
    margin: 1rem 0;
}

.qty-label[b-yi207ij61k] {
    font-weight: 500;
}

.qty-controls[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.qty-btn[b-yi207ij61k] {
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qty-btn:active[b-yi207ij61k] {
    transform: scale(0.92);
}

.qty-btn:hover[b-yi207ij61k] {
    opacity: 0.9;
}

.qty-value[b-yi207ij61k] {
    font-size: 1.25rem;
    font-weight: 600;
    min-width: 2rem;
    text-align: center;
}

.mddia-add[b-yi207ij61k] {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
}

/* Scheduled Price Display */
.price-row .price-original[b-yi207ij61k] {
    text-decoration: line-through;
    color: var(--text-muted);
    font-size: 0.85em;
    margin-right: 0.5rem;
}

.price-row .price.discounted[b-yi207ij61k] {
    color: var(--secondary);
    font-weight: 700;
}

.price-rule-badge[b-yi207ij61k] {
    display: inline-block;
    background: var(--secondary);
    color: var(--on-secondary);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 0.5rem;
}

/* Dark mode adjustments for Menú del Día */
.qr-order-page.dark .mddia-includes-detail .mddia-tag[b-yi207ij61k] {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
}

.qr-order-page.dark .course-item[b-yi207ij61k] {
    background: var(--surface-2);
}

.qr-order-page.dark .course-item:hover[b-yi207ij61k] {
    background: var(--surface-3);
}

.qr-order-page.dark .course-item.selected[b-yi207ij61k] {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
}

.qr-order-page.dark .mddia-quantity[b-yi207ij61k] {
    background: var(--surface-2);
}

/* Empty menu / search state */
.menu-empty-state[b-yi207ij61k] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--text-subtle);
}
.menu-empty-icon[b-yi207ij61k] { font-size: 2rem; opacity: 0.7; }
.menu-empty-title[b-yi207ij61k] { font-size: 1rem; font-weight: 600; margin: 0; }
.menu-empty-clear[b-yi207ij61k] {
    min-height: 44px;
    padding: 0.5rem 1.2rem;
    border: 1px solid var(--accent);
    border-radius: 10px;
    background: transparent;
    color: var(--accent);
    font-weight: 600;
    cursor: pointer;
}

/* Allergen chips (item detail) */
.allergen-chips[b-yi207ij61k] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.6rem 0 0.2rem;
}
.allergen-chip[b-yi207ij61k] {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    line-height: 1.3;
}
.allergen-chip.contains[b-yi207ij61k] {
    background: color-mix(in srgb, #d97706 15%, transparent);
    color: #b45309;
    border: 1px solid color-mix(in srgb, #d97706 35%, transparent);
}
.allergen-chip.traces[b-yi207ij61k] {
    background: transparent;
    color: var(--text-subtle);
    border: 1px dashed var(--border);
}

/* Split minimum-amount hint */
.split-min-hint[b-yi207ij61k] {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: var(--warn);
    background: var(--warn-bg);
    border-radius: 12px;
    padding: 8px 12px;
}

/* Tip on bill */
.bill-tip[b-yi207ij61k] { margin-top: 0.9rem; }
.bill-tip-options[b-yi207ij61k] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.tip-opt[b-yi207ij61k] {
    min-height: 44px;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
}
.tip-opt.active[b-yi207ij61k] {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
}
/* Its own 88 px: site.css's generic input rule made it 220 px and pushed it onto a row of its own. */
.tip-custom-input[b-yi207ij61k] {
    width: 5.5rem;
    min-width: 0;
    min-height: 44px;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font-size: 1rem;   /* 16 px: iOS zooms into a smaller box */
}
.bill-tip-summary[b-yi207ij61k] {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Order history reorder */
/* «Mis pedidos»: a list of cells — the order and its time, what it held and cost, an arrow to its status, and «Repetir»
   (rows wrapped into columns with a bare «→» and a 🔁 before; design audit, 2026-10-19). */
.history-item[b-yi207ij61k] { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 0; border-bottom: 1px solid var(--border); }
.history-item:last-child[b-yi207ij61k] { border-bottom: none; }
.history-item-main[b-yi207ij61k] { display: flex; align-items: center; gap: 0.75rem; flex: 1; cursor: pointer; min-width: 0; }
.history-item-info[b-yi207ij61k] { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.history-item-info .order-no[b-yi207ij61k] { font-weight: 600; color: var(--text); }
.history-item-info .order-date[b-yi207ij61k] { font-size: 0.8125rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.history-item-details[b-yi207ij61k] { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.history-item-details .item-count[b-yi207ij61k] { font-size: 0.8125rem; color: var(--text-muted); }
.history-item-details .order-total[b-yi207ij61k] { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.history-arrow[b-yi207ij61k] { display: inline-flex; color: var(--text-subtle); --ico: 18px; }
.history-reorder[b-yi207ij61k] {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 40px;
    padding: 0 0.875rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    font-size: 0.8125rem;
    white-space: nowrap;
    cursor: pointer;
    --ico: 16px;
}
.history-reorder:disabled[b-yi207ij61k] { opacity: 0.6; cursor: default; }

/* Dietary tags + tag filter */
.item-tags[b-yi207ij61k] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.125rem 0.625rem;
    margin: 0;
}
.item-tags.detail[b-yi207ij61k] { margin: 0.5rem 0; }

/* A promotion running now that targets this dish ("2x1", "-10 %", the owner's badge). The look of the
   happy-hour price badge; the owner's casing is kept. Taken off at the bill — the price is unchanged. */
.item-promo-tags[b-yi207ij61k] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0;
    min-width: 0;
}
.item-promo-tag[b-yi207ij61k] {
    display: inline-block;
    background: var(--secondary);
    color: var(--on-secondary);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The owner's own tags ("vegano", "picante"): small capitals, not badges. */
.item-tag[b-yi207ij61k] {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-subtle);
    line-height: 1.4;
}
.tag-filter-chip[b-yi207ij61k] {
    flex-shrink: 0;
    height: 32px;
    padding: 0 0.75rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: capitalize;
    white-space: nowrap;
    cursor: pointer;
}
.tag-filter-chip.active[b-yi207ij61k] {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
}

/* Loyalty widget (cart) */
.loyalty-widget[b-yi207ij61k] {
    margin-top: 0.8rem;
    padding: 0.8rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.loyalty-title[b-yi207ij61k] { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.92rem; margin-bottom: 0.5rem; --ico: 18px; --ico-fill: #e3a849; color: var(--text); }
.loyalty-balance[b-yi207ij61k] { font-size: 0.95rem; font-weight: 600; color: var(--accent); }
.loyalty-join-row[b-yi207ij61k] { display: flex; gap: 0.5rem; }
.loyalty-phone-input[b-yi207ij61k] {
    flex: 1;
    min-height: 44px;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface, #fff);
    color: var(--text);
    font-size: 1rem;   /* 16 px: iOS zooms into a smaller box */
}
.loyalty-join-btn[b-yi207ij61k] {
    flex: none;
    min-height: 44px;
    padding: 0.5rem 1.1rem;
    border: none;
    border-radius: 10px;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
    cursor: pointer;
}
.loyalty-join-btn:disabled[b-yi207ij61k] { opacity: 0.6; cursor: default; }
.loyalty-error[b-yi207ij61k] { margin-top: 0.4rem; font-size: 0.82rem; color: var(--warn); }

/* Loyalty reward picker */
.loyalty-rewards[b-yi207ij61k] { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.4rem; }
.loyalty-rewards-label[b-yi207ij61k] { font-size: 0.82rem; font-weight: 600; color: var(--text-subtle); }
.loyalty-reward[b-yi207ij61k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface, #fff);
    color: var(--text);
    cursor: pointer;
    text-align: left;
}
.loyalty-reward.active[b-yi207ij61k] {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.loyalty-reward .reward-name[b-yi207ij61k] { font-weight: 600; font-size: 0.9rem; }
.loyalty-reward .reward-cost[b-yi207ij61k] { font-size: 0.8rem; color: var(--text-subtle); white-space: nowrap; }
.loyalty-reward.not-applicable[b-yi207ij61k] { opacity: 0.5; cursor: not-allowed; }
.loyalty-reward.not-applicable .reward-cost[b-yi207ij61k] { font-style: italic; }

/* Loyalty redeem verify */
.loyalty-verify-btn[b-yi207ij61k] {
    min-height: 44px;
    padding: 0.5rem 1rem;
    border: 1px solid var(--accent);
    border-radius: 10px;
    background: transparent;
    color: var(--accent);
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.3rem;
}
.loyalty-verify-btn:disabled[b-yi207ij61k] { opacity: 0.6; cursor: default; }
.loyalty-code-sent[b-yi207ij61k] { font-size: 0.85rem; color: var(--text-subtle); margin: 0.4rem 0 0.3rem; }
.loyalty-verified[b-yi207ij61k] { display: flex; align-items: center; gap: 0.3rem; font-size: 0.9rem; font-weight: 600; color: var(--ok); margin-top: 0.3rem; --ico: 16px; --ico-stroke: 2.2; }

/* Ordering closed: said at the top of the carta, not first at the submit button. */
.ordering-closed-band[b-yi207ij61k] {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    margin: 0.75rem 1rem 0;
    padding: 0.75rem 0.875rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--text);
    font-size: 0.875rem;
    line-height: 1.45;
}

.ordering-closed-band .ico[b-yi207ij61k] {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: #b7791f;
}

.closed-band-text p[b-yi207ij61k] {
    margin: 0;
}

.closed-band-text .closed-band-bill[b-yi207ij61k] {
    margin-top: 0.25rem;
    color: var(--text-muted);
}

/* The cart heading: how this order meets the table's bill. */
.cart-bill-so-far[b-yi207ij61k] {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* The bill sheet's and the card form's close sit in their headings, as the cart's does. They borrowed the dish
   photo's floating button, which is placed against the full-screen overlay: it landed on the header's pill. */
.bill-header .modal-close[b-yi207ij61k],
.payment-header .modal-close[b-yi207ij61k] {
    position: static;
    flex: none;
    width: 40px;
    height: 40px;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.bill-header .modal-close:hover[b-yi207ij61k],
.payment-header .modal-close:hover[b-yi207ij61k] {
    background: var(--surface-2);
    color: var(--text);
}

/* A tip over the cap: said, instead of quietly becoming the cap. */
.tip-cap-hint[b-yi207ij61k] {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Pay-first QR at a cash-taking venue: where to pay in cash. Quiet, under the payment options. */
.payment-cash-hint[b-yi207ij61k] {
    margin: 0.6rem 0 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-muted);
}

/* «Recomendados»: once the dish is in the cart, its stepper takes the "+"'s place on the photo. */
.featured-media .quick-stepper[b-yi207ij61k] {
    position: absolute;
    inset-inline-end: 6px;
    bottom: 6px;
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.featured-card.no-photo .featured-media .quick-stepper[b-yi207ij61k] {
    position: static;
    border-color: var(--border-strong);
    box-shadow: none;
}
/* /Pages/QrOrderStatus.razor.rz.scp.css */
/* Order Status Page - Mobile-First Design. Same look as the QR menu (QrOrder.razor.css). */

.order-status-page[b-29c1h8ggci] {
    /* A theme preset overrides these; a colour the owner chose arrives inline (QrGuestStyle). */
    --accent: #1c1a17;
    --on-accent: #ffffff;
    --secondary: var(--accent);
    --on-secondary: var(--on-accent);
    --header-bg: var(--surface);
    --header-text: var(--text);

    --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;

    --page-bg: #faf9f6;
    --surface: #ffffff;
    --surface-2: #f4f2ee;
    --surface-3: #ebe8e2;
    --text: #1c1a17;
    --text-muted: #6f6a62;
    --text-subtle: #9b958c;
    --border: #ebe7e0;
    --shadow: rgba(28, 26, 23, 0.06);
    --shadow-strong: rgba(28, 26, 23, 0.14);

    /* What a colour means, one palette with the menu's (the pills were Material orange and green). */
    --ok: #2f7d4f;
    --warn: #a15c07;
    --ok-bg: color-mix(in srgb, var(--ok) 12%, var(--surface));
    --warn-bg: color-mix(in srgb, var(--warn) 12%, var(--surface));

    min-height: 100vh;
    background: var(--page-bg);
    font-family: var(--font-body);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

.order-status-page.theme-classic[b-29c1h8ggci] {
    --accent: #1c1a17;
    --page-bg: #faf9f6;
    --surface: #ffffff;
    --surface-2: #f4f2ee;
    --surface-3: #ebe8e2;
    --text: #1c1a17;
    --text-muted: #6f6a62;
    --text-subtle: #9b958c;
    --border: #ebe7e0;
    --shadow: rgba(28, 26, 23, 0.06);
    --shadow-strong: rgba(28, 26, 23, 0.14);
}

/* Line icons in the text colour, as on the menu. */
.ico[b-29c1h8ggci] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.order-status-page.theme-sand[b-29c1h8ggci] {
    --accent: #b8860b;
    --on-accent: #1c1a17; /* white read at 2.3-3.9:1 on this accent; ink at 4.4-7.7:1 */
    --page-bg: linear-gradient(180deg, #f7f1e7 0%, #f3efe8 100%);
    --surface: #fff9f2;
    --surface-2: #f5eadd;
    --surface-3: #eee0d2;
    --text: #2b2118;
    --text-muted: #7c6653;
    --text-subtle: #9b8574;
    --border: #ead9c8;
    --shadow: rgba(56, 31, 12, 0.08);
    --shadow-strong: rgba(56, 31, 12, 0.18);
}

.order-status-page.theme-coast[b-29c1h8ggci] {
    --accent: #26a69a;
    --on-accent: #1c1a17; /* white read at 2.3-3.9:1 on this accent; ink at 4.4-7.7:1 */
    --page-bg: linear-gradient(180deg, #edf7f6 0%, #f5fbfa 100%);
    --surface: #ffffff;
    --surface-2: #e8f3f2;
    --surface-3: #dae8e7;
    --text: #1c2a2a;
    --text-muted: #586d6d;
    --text-subtle: #7d9191;
    --border: #d4e4e4;
    --shadow: rgba(10, 30, 30, 0.08);
    --shadow-strong: rgba(10, 30, 30, 0.18);
}

.order-status-page.theme-slate[b-29c1h8ggci] {
    --accent: #5c7a99;
    --page-bg: linear-gradient(180deg, #f0f3f8 0%, #edf1f6 100%);
    --surface: #ffffff;
    --surface-2: #eef2f6;
    --surface-3: #e1e7ef;
    --text: #1a2433;
    --text-muted: #5b6a7d;
    --text-subtle: #7b889b;
    --border: #d7dee7;
    --shadow: rgba(15, 23, 42, 0.08);
    --shadow-strong: rgba(15, 23, 42, 0.18);
}

.order-status-page.theme-sage[b-29c1h8ggci] {
    --accent: #5c8c5c;
    --on-accent: #1c1a17; /* white read at 2.3-3.9:1 on this accent; ink at 4.4-7.7:1 */
    --page-bg: linear-gradient(180deg, #eef6ef 0%, #f5faf6 100%);
    --surface: #ffffff;
    --surface-2: #e8f1ea;
    --surface-3: #dbe6de;
    --text: #1f2b22;
    --text-muted: #5b6f61;
    --text-subtle: #7a8d80;
    --border: #d3e1d6;
    --shadow: rgba(19, 41, 26, 0.08);
    --shadow-strong: rgba(19, 41, 26, 0.18);
}

.order-status-page.theme-ember[b-29c1h8ggci] {
    --accent: #d97706;
    --on-accent: #1c1a17; /* white read at 2.3-3.9:1 on this accent; ink at 4.4-7.7:1 */
    --page-bg: linear-gradient(180deg, #fff1e6 0%, #fff6ef 100%);
    --surface: #fffaf6;
    --surface-2: #ffe7d1;
    --surface-3: #ffd7bc;
    --text: #2d2017;
    --text-muted: #7b5a44;
    --text-subtle: #9a7761;
    --border: #ffd0b0;
    --shadow: rgba(84, 36, 12, 0.1);
    --shadow-strong: rgba(84, 36, 12, 0.2);
}

.order-status-page.theme-graphite[b-29c1h8ggci] {
    --accent: #6b7c8a;
    --page-bg: linear-gradient(180deg, #f1f3f6 0%, #eef1f4 100%);
    --surface: #ffffff;
    --surface-2: #edf0f4;
    --surface-3: #e0e5eb;
    --text: #1d2228;
    --text-muted: #5c6672;
    --text-subtle: #7d8792;
    --border: #d5dbe2;
    --shadow: rgba(22, 28, 35, 0.08);
    --shadow-strong: rgba(22, 28, 35, 0.18);
}

/* Subtle Themes */
.order-status-page.theme-lavender[b-29c1h8ggci] {
    --accent: #8b7dc8;
    --on-accent: #1c1a17; /* white read at 2.3-3.9:1 on this accent; ink at 4.4-7.7:1 */
    --page-bg: linear-gradient(180deg, #f5f3fa 0%, #f9f7fc 100%);
    --surface: #ffffff;
    --surface-2: #f0edf7;
    --surface-3: #e6e1f0;
    --text: #2a2635;
    --text-muted: #6b6480;
    --text-subtle: #8d86a0;
    --border: #ddd8eb;
    --shadow: rgba(59, 48, 84, 0.08);
    --shadow-strong: rgba(59, 48, 84, 0.16);
}

.order-status-page.theme-rose[b-29c1h8ggci] {
    --accent: #c77d8e;
    --on-accent: #1c1a17; /* white read at 2.3-3.9:1 on this accent; ink at 4.4-7.7:1 */
    --page-bg: linear-gradient(180deg, #faf5f6 0%, #fcf8f9 100%);
    --surface: #ffffff;
    --surface-2: #f7eff1;
    --surface-3: #f0e5e8;
    --text: #322629;
    --text-muted: #7d6369;
    --text-subtle: #9d8489;
    --border: #eddde0;
    --shadow: rgba(70, 40, 48, 0.08);
    --shadow-strong: rgba(70, 40, 48, 0.16);
}

.order-status-page.theme-mist[b-29c1h8ggci] {
    --accent: #7a9eb8;
    --on-accent: #1c1a17; /* white read at 2.3-3.9:1 on this accent; ink at 4.4-7.7:1 */
    --page-bg: linear-gradient(180deg, #f4f7f9 0%, #f8fafb 100%);
    --surface: #ffffff;
    --surface-2: #eef3f6;
    --surface-3: #e4ebef;
    --text: #232a30;
    --text-muted: #5e6d78;
    --text-subtle: #818f9a;
    --border: #dae3e9;
    --shadow: rgba(35, 50, 60, 0.08);
    --shadow-strong: rgba(35, 50, 60, 0.16);
}

.order-status-page.theme-cream[b-29c1h8ggci] {
    --accent: #c9a86c;
    --on-accent: #1c1a17; /* white read at 2.3-3.9:1 on this accent; ink at 4.4-7.7:1 */
    --page-bg: linear-gradient(180deg, #faf8f4 0%, #fcfbf8 100%);
    --surface: #fffefa;
    --surface-2: #f7f4ed;
    --surface-3: #f0ebe2;
    --text: #2e2b25;
    --text-muted: #6e6659;
    --text-subtle: #918779;
    --border: #e9e4da;
    --shadow: rgba(46, 43, 37, 0.08);
    --shadow-strong: rgba(46, 43, 37, 0.16);
}

/* Dark Mode */
.order-status-page.dark[b-29c1h8ggci] {
    --page-bg: #121110;
    --surface: #1a1917;
    --surface-2: #24221f;
    --surface-3: #2e2b27;
    --text: #f2efe9;
    --text-muted: #b5aea3;
    --text-subtle: #8c867c;
    --border: #2f2c28;
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-strong: rgba(0, 0, 0, 0.5);
    --header-bg: #1a1917;
    --header-text: #f2efe9;
    --ok: #6fcf97;
    --warn: #f0b46a;
    color-scheme: dark;
}

/* Ink would vanish on the dark page: cream, with ink text (an owner's colour arrives inline and wins). */
.order-status-page.theme-classic.dark[b-29c1h8ggci] {
    --accent: #ede8df;
    --on-accent: #1c1a17;
}

/* The staff app's heading reset (site.css) made headings without a weight body text. */
.order-status-page h1[b-29c1h8ggci],
.order-status-page h2[b-29c1h8ggci],
.order-status-page h3[b-29c1h8ggci] {
    font-weight: 600;
}


.loading-screen[b-29c1h8ggci],
.error-screen[b-29c1h8ggci] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    text-align: center;
}

.spinner[b-29c1h8ggci] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin-b-29c1h8ggci 1s linear infinite;
}

@keyframes spin-b-29c1h8ggci {
    to { transform: rotate(360deg); }
}

.btn-primary[b-29c1h8ggci],
.btn-secondary[b-29c1h8ggci] {
    min-height: 52px;
    padding: 0 1.25rem;
    border-radius: 999px;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.12s ease;
}

.btn-primary[b-29c1h8ggci] {
    background: var(--accent);
    color: var(--on-accent);
    border: 1px solid var(--accent);
}

.btn-secondary[b-29c1h8ggci] {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-primary:active[b-29c1h8ggci],
.btn-secondary:active[b-29c1h8ggci] {
    transform: scale(0.97);
}

/* Header */
.status-header[b-29c1h8ggci] {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--header-bg);
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.status-header-main[b-29c1h8ggci] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.status-header-meta[b-29c1h8ggci] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.restaurant-name[b-29c1h8ggci] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--header-text);
    font-family: var(--font-display);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-logo[b-29c1h8ggci] {
    height: 40px;
    width: auto;
    max-width: 100px;
    object-fit: contain;
}

.header-actions[b-29c1h8ggci] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.theme-toggle[b-29c1h8ggci] {
    width: 38px;
    height: 38px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.theme-toggle:hover[b-29c1h8ggci] {
    background: var(--surface-2);
}

/* The table and the order: a quiet line under the venue (two pills that wrapped the header to two rows). */
.order-badge[b-29c1h8ggci] {
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.table-badge[b-29c1h8ggci] {
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

/* Main Content */
.status-content[b-29c1h8ggci] {
    padding: 1.5rem;
    max-width: 500px;
    margin: 0 auto;
}

/* Main Status Card */
/* The state reads from the icon and the words; no traffic-light stripe across the card. */
.main-status[b-29c1h8ggci] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: center;
    margin-bottom: 1.25rem;
}

/* One entrance, then calm: it pulsed for as long as the page was open. */
.status-icon[b-29c1h8ggci] {
    display: inline-flex;
    margin-bottom: 0.75rem;
    color: var(--text);
}

@media (prefers-reduced-motion: no-preference) {
    .status-icon[b-29c1h8ggci] {
        animation: status-in-b-29c1h8ggci 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
}

@keyframes status-in-b-29c1h8ggci {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: none; }
}

.status-icon .ico[b-29c1h8ggci] {
    width: 56px;
    height: 56px;
    stroke-width: 1.3;
}

/* Cancelled by the venue: said calmly, no alarm red. */
.status-cancelled .status-icon[b-29c1h8ggci] {
    color: var(--text-muted);
}

.main-status h1[b-29c1h8ggci] {
    font-size: 1.5rem;
    margin: 0 0 0.5rem 0;
    color: var(--text);
    font-family: var(--font-display);
}

.status-message[b-29c1h8ggci] {
    color: var(--text-muted);
    margin: 0 0 1rem 0;
}

/* While the kitchen still works on some: «1 de 3 listos». */
.status-progress[b-29c1h8ggci] {
    margin: -0.5rem 0 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ok);
}

.estimated-time[b-29c1h8ggci] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--surface-2);
    padding: 0.75rem 1.25rem;
    border-radius: 999px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.time-icon[b-29c1h8ggci] {
    width: 26px;
    height: 26px;
}

.last-updated[b-29c1h8ggci] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
}

/* Progress Steps */
.progress-steps[b-29c1h8ggci] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--surface);
    border-radius: 12px;
    border: 1px solid var(--border);
}

.step[b-29c1h8ggci] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.4;
    transition: opacity 0.3s;
}

.step.active[b-29c1h8ggci],
.step.complete[b-29c1h8ggci] {
    opacity: 1;
}

/* The step in progress breathes a few times, then rests (it bounced for as long as the page was open). */
@media (prefers-reduced-motion: no-preference) {
    .step.active .step-icon[b-29c1h8ggci] {
        animation: step-ring-b-29c1h8ggci 1.6s ease-out 3;
    }
}

@keyframes step-ring-b-29c1h8ggci {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent); }
    100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 0%, transparent); }
}

.step-icon[b-29c1h8ggci] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    color: var(--text-muted);
    border-radius: 50%;
}

.step-icon .ico[b-29c1h8ggci] {
    width: 21px;
    height: 21px;
}

.step.complete .step-icon[b-29c1h8ggci] {
    background: var(--secondary);
    color: var(--on-secondary);
}

.step.active .step-icon[b-29c1h8ggci] {
    background: var(--accent);
    color: var(--on-accent);
}

.step-label[b-29c1h8ggci] {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
}

/* Four equal columns joined by lines from centre to centre, so the gaps are even (fixed 30 px connectors between
   labels of different widths made them uneven; design audit, 2026-10-19). A step reached fills its line. */
.progress-steps[b-29c1h8ggci] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
}

.step-line[b-29c1h8ggci] {
    display: none;
}

.step[b-29c1h8ggci] {
    position: relative;
}

.step:not(:first-of-type)[b-29c1h8ggci]::before {
    content: "";
    position: absolute;
    top: 21px;
    right: calc(50% + 26px);
    width: calc(100% - 52px);
    height: 2px;
    border-radius: 2px;
    background: var(--border);
}

.step.complete:not(:first-of-type)[b-29c1h8ggci]::before,
.step.active:not(:first-of-type)[b-29c1h8ggci]::before {
    background: var(--secondary);
}

/* Order Items */
.order-items[b-29c1h8ggci] {
    background: var(--surface);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
}

.order-items h3[b-29c1h8ggci] {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: var(--text);
}

.order-item[b-29c1h8ggci] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}

.order-item:last-child[b-29c1h8ggci] {
    border-bottom: none;
}

.item-info[b-29c1h8ggci] {
    display: flex;
    gap: 0.5rem;
}

.item-qty[b-29c1h8ggci] {
    color: var(--text-muted);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.item-name[b-29c1h8ggci] {
    color: var(--text);
}

.item-status[b-29c1h8ggci] {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-weight: 500;
}

.item-status.pending[b-29c1h8ggci],
.item-status.sent[b-29c1h8ggci] {
    background: var(--surface-2);
    color: var(--text-muted);
}

.item-status.preparing[b-29c1h8ggci] {
    background: var(--warn-bg);
    color: var(--warn);
}

.item-status.ready[b-29c1h8ggci] {
    background: var(--ok-bg);
    color: var(--ok);
}

.item-status.delivered[b-29c1h8ggci] {
    background: var(--surface-2);
    color: var(--text-muted);
}

/* Order Total: the foot of the items card (a card of its own sat at a phone's fold, under the sticky buttons). The last
   dish's own line is the rule above it: a border here drew two. */
.order-total[b-29c1h8ggci] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 0 0.125rem;
    font-size: 1.125rem;
}

.total-amount[b-29c1h8ggci] {
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* Social Links */
.social-links[b-29c1h8ggci] {
    background: var(--surface);
    padding: 1rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    text-align: center;
}

.social-links-title[b-29c1h8ggci] {
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
}

.social-links-row[b-29c1h8ggci] {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* The networks' own marks in the page's ink, in quiet outlined circles (they were camera / bust / note emoji in brand
   discs). */
.social-link[b-29c1h8ggci] {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    transition: background 0.15s ease, transform 0.12s ease;
}

.social-link:hover[b-29c1h8ggci] {
    background: var(--surface-2);
}

.social-link:active[b-29c1h8ggci] {
    transform: scale(0.94);
}

.social-mark[b-29c1h8ggci] {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.social-mark .fill[b-29c1h8ggci] {
    fill: currentColor;
    stroke: none;
}

/* Actions - Sticky at bottom. Not ".actions": guest pages carry data-theme="dark" (theme.js
   defaults every non-admin path to dark), and site.css paints `:root[data-theme="dark"] .actions`
   with the POS's dark card — a navy slab across the bottom of a light page. */
.status-actions[b-29c1h8ggci] {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--surface);
    padding: 1rem;
    margin: 1.5rem -1.5rem 0;
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 12px var(--shadow);
    z-index: 10;
}

.status-actions button[b-29c1h8ggci] {
    width: 100%;
}

/* Two choices side by side: the bill, and more food. */
@media (min-width: 340px) {
    .status-actions[b-29c1h8ggci] {
        flex-direction: row;
    }

    .status-actions button[b-29c1h8ggci] {
        flex: 1;
    }
}

/* «Live»: a green dot by the time of the last update. */
.live-dot[b-29c1h8ggci] {
    width: 7px;
    height: 7px;
    background: var(--ok);
    border-radius: 50%;
}

@media (prefers-reduced-motion: no-preference) {
    .live-dot[b-29c1h8ggci] {
        animation: live-pulse-b-29c1h8ggci 2.4s ease-in-out infinite;
    }
}

@keyframes live-pulse-b-29c1h8ggci {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 40%, transparent); }
    50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 0%, transparent); }
}

/* Tablet+ */
@media (min-width: 768px) {
    .status-content[b-29c1h8ggci] {
        padding: 2rem;
    }

    .progress-steps[b-29c1h8ggci] {
        padding: 1.5rem 2rem;
    }

    .step-line[b-29c1h8ggci] {
        width: 50px;
    }
}
/* /Pages/ReservationBook.razor.rz.scp.css */
/* ==================== Variables ==================== */
.reservation-book-page[b-i37dyljti1] {
    --brand-primary: #6366f1;
    --brand-primary-hover: #4f46e5;
    --bg: #f8fafc;
    --bg-card: #ffffff;
    --text: #1e293b;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --success: #10b981;
    --error: #ef4444;
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);

    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    padding: 0 0 2rem;
    transition: background 0.3s, color 0.3s;
}

.reservation-book-page.dark[b-i37dyljti1] {
    --bg: #0f172a;
    --bg-card: #1e293b;
    --text: #f1f5f9;
    --text-muted: #94a3b8;
    --border: #334155;
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3);
}

/* ==================== Loading & Error ==================== */
.loading-screen[b-i37dyljti1],
.error-screen[b-i37dyljti1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    text-align: center;
}

.spinner[b-i37dyljti1] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: spin-b-i37dyljti1 1s linear infinite;
}

.spinner-small[b-i37dyljti1] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-i37dyljti1 0.8s linear infinite;
    display: inline-block;
    margin-right: 8px;
}

@keyframes spin-b-i37dyljti1 {
    to { transform: rotate(360deg); }
}

.error-icon[b-i37dyljti1] {
    width: 64px;
    height: 64px;
    background: var(--error);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.btn-retry[b-i37dyljti1] {
    margin-top: 1rem;
    padding: 12px 24px;
    background: var(--brand-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
}

/* ==================== Header ==================== */
.reservation-header[b-i37dyljti1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.restaurant-branding[b-i37dyljti1] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.restaurant-branding .logo[b-i37dyljti1] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
}

.restaurant-branding h1[b-i37dyljti1] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.header-actions[b-i37dyljti1] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-toggle[b-i37dyljti1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
    font-size: 1.125rem;
    cursor: pointer;
    line-height: 1;
}

.language-selector select[b-i37dyljti1] {
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.875rem;
    cursor: pointer;
}

/* ==================== Step Indicator ==================== */
.step-indicator[b-i37dyljti1] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1.25rem;
    gap: 0;
}

.step[b-i37dyljti1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: 0.5;
    transition: opacity 0.3s;
}

.step.active[b-i37dyljti1] {
    opacity: 1;
}

.step-number[b-i37dyljti1] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--border);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    transition: background 0.3s, color 0.3s;
}

.step.active .step-number[b-i37dyljti1] {
    background: var(--brand-primary);
    color: white;
}

.step.completed .step-number[b-i37dyljti1] {
    background: var(--success);
    color: white;
}

.step-label[b-i37dyljti1] {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

.step.active .step-label[b-i37dyljti1] {
    color: var(--brand-primary);
}

.step-line[b-i37dyljti1] {
    width: 40px;
    height: 2px;
    background: var(--border);
    margin: 0 8px;
    margin-bottom: 20px;
    transition: background 0.3s;
}

.step-line.completed[b-i37dyljti1] {
    background: var(--success);
}

/* ==================== Booking Form ==================== */
.booking-form[b-i37dyljti1] {
    margin: 0 1.25rem;
}

.form-section[b-i37dyljti1] {
    padding: 1.5rem;
    background: var(--bg-card);
    border-radius: 16px;
    box-shadow: var(--shadow);
}

.form-section h2[b-i37dyljti1] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1.5rem;
    text-align: center;
}

.step-header[b-i37dyljti1] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1.5rem;
}

.step-header h2[b-i37dyljti1] {
    margin: 0;
    flex: 1;
    text-align: center;
    padding-right: 40px;
}

.btn-back[b-i37dyljti1] {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-group[b-i37dyljti1] {
    margin-bottom: 1.25rem;
}

.form-group label[b-i37dyljti1] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text);
}

.form-group label .required[b-i37dyljti1] {
    color: var(--error);
}

.form-group input[b-i37dyljti1],
.form-group textarea[b-i37dyljti1] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 1rem;
    background: var(--bg);
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus[b-i37dyljti1],
.form-group textarea:focus[b-i37dyljti1] {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.input-hint[b-i37dyljti1] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ==================== Welcome Back Message ==================== */
.welcome-back-message[b-i37dyljti1] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
    border: 1px solid rgba(16, 185, 129, 0.3);
    animation: welcomeFadeIn-b-i37dyljti1 0.4s ease-out;
}

.welcome-back-message.platinum[b-i37dyljti1] {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.1));
    border-color: rgba(168, 85, 247, 0.4);
}

.welcome-back-message.gold[b-i37dyljti1] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(234, 179, 8, 0.1));
    border-color: rgba(245, 158, 11, 0.4);
}

.welcome-back-message.silver[b-i37dyljti1] {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.2), rgba(100, 116, 139, 0.1));
    border-color: rgba(148, 163, 184, 0.4);
}

.welcome-back-message .vip-badge[b-i37dyljti1] {
    font-size: 1.25rem;
    animation: welcomeBounce-b-i37dyljti1 0.6s ease-out 0.2s;
}

.welcome-back-message .welcome-text[b-i37dyljti1] {
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.4;
}

@keyframes welcomeFadeIn-b-i37dyljti1 {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes welcomeBounce-b-i37dyljti1 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.blacklist-warning[b-i37dyljti1] {
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    font-size: 0.85rem;
}

/* ==================== Party Size Selector ==================== */
.party-size-selector[b-i37dyljti1] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.party-btn[b-i37dyljti1] {
    width: 44px;
    height: 44px;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.party-btn:hover[b-i37dyljti1] {
    border-color: var(--brand-primary);
}

.party-btn.selected[b-i37dyljti1] {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: white;
}

.large-party-input[b-i37dyljti1] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.large-party-input input[b-i37dyljti1] {
    width: 80px;
    text-align: center;
}

/* ==================== Date Pills ==================== */
.date-pills-container[b-i37dyljti1] {
    overflow-x: auto;
    margin: 0 -1.5rem;
    padding: 0 1.5rem;
    -webkit-overflow-scrolling: touch;
}

.date-pills[b-i37dyljti1] {
    display: flex;
    gap: 8px;
    padding-bottom: 8px;
}

.date-pill[b-i37dyljti1] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
    cursor: pointer;
    transition: all 0.2s;
    min-width: 70px;
}

.date-pill:hover:not(:disabled)[b-i37dyljti1] {
    border-color: var(--brand-primary);
}

.date-pill.selected[b-i37dyljti1] {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: white;
}

.date-pill.closed[b-i37dyljti1] {
    opacity: 0.5;
    cursor: not-allowed;
}

.date-day[b-i37dyljti1] {
    font-size: 0.7rem;
    text-transform: uppercase;
    opacity: 0.7;
}

.date-num[b-i37dyljti1] {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

.date-month[b-i37dyljti1] {
    font-size: 0.7rem;
    text-transform: uppercase;
    opacity: 0.7;
}

.date-closed[b-i37dyljti1] {
    font-size: 0.6rem;
    color: var(--error);
    margin-top: 4px;
}

.date-pill.selected .date-closed[b-i37dyljti1] {
    color: rgba(255,255,255,0.8);
}

/* ==================== Time Slots ==================== */
.selected-date-display[b-i37dyljti1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: var(--bg);
    border-radius: 10px;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.date-icon[b-i37dyljti1] {
    font-size: 1.25rem;
}

.hours-info[b-i37dyljti1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--brand-primary);
}

.hours-icon[b-i37dyljti1] {
    font-size: 1rem;
}

.loading-slots[b-i37dyljti1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 2rem;
    color: var(--text-muted);
}

.no-slots[b-i37dyljti1] {
    text-align: center;
    padding: 2rem;
}

.no-slots-icon[b-i37dyljti1] {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}

.time-slots[b-i37dyljti1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    margin-bottom: 1.5rem;
}

.time-slot[b-i37dyljti1] {
    padding: 14px 8px;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.time-slot:hover:not(:disabled)[b-i37dyljti1] {
    border-color: var(--brand-primary);
}

.time-slot.selected[b-i37dyljti1] {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: white;
}

.time-slot.unavailable[b-i37dyljti1] {
    opacity: 0.5;
    cursor: not-allowed;
    text-decoration: line-through;
}

.slot-status[b-i37dyljti1] {
    font-size: 0.6rem;
    text-transform: uppercase;
    opacity: 0.7;
}

.slot-status.few[b-i37dyljti1] {
    color: #f59e0b;
}

.time-slot.selected .slot-status.few[b-i37dyljti1] {
    color: rgba(255,255,255,0.8);
}

/* ==================== Capacity Indicator ==================== */
.capacity-indicator[b-i37dyljti1] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1.25rem;
    padding: 10px 14px;
    background: var(--bg);
    border-radius: 10px;
}

.capacity-bar[b-i37dyljti1] {
    flex: 1;
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.capacity-fill[b-i37dyljti1] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.capacity-fill.high[b-i37dyljti1] {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.capacity-fill.medium[b-i37dyljti1] {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.capacity-fill.low[b-i37dyljti1] {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

.capacity-text[b-i37dyljti1] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

.capacity-text span[b-i37dyljti1] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ==================== Booking Preview ==================== */
.booking-preview[b-i37dyljti1] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem;
    background: var(--bg);
    border-radius: 10px;
    margin-bottom: 1.5rem;
}

.preview-item[b-i37dyljti1] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
}

.preview-icon[b-i37dyljti1] {
    font-size: 1rem;
}

/* ==================== Phone Input ==================== */
.phone-input-wrapper[b-i37dyljti1] {
    display: flex;
    align-items: stretch;
}

.phone-input-wrapper input[b-i37dyljti1] {
    border-radius: 0 10px 10px 0;
    flex: 1;
}

/* ==================== Country Code Picker ==================== */
.country-code-picker[b-i37dyljti1] {
    position: relative;
}

.country-code-btn[b-i37dyljti1] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-right: none;
    border-radius: 10px 0 0 10px;
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
    min-width: 95px;
    transition: all 0.2s;
}

.country-code-btn:hover[b-i37dyljti1] {
    background: var(--bg-hover);
}

.country-code-btn:focus[b-i37dyljti1] {
    outline: 2px solid var(--brand-primary);
    outline-offset: -1px;
}

.selected-country[b-i37dyljti1] {
    flex: 1;
    text-align: left;
}

.dropdown-arrow[b-i37dyljti1] {
    font-size: 0.65rem;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.country-backdrop[b-i37dyljti1] {
    position: fixed;
    inset: 0;
    z-index: 999;
}

.country-dropdown[b-i37dyljti1] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    min-width: 280px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    z-index: 1000;
    margin-top: 4px;
    overflow: hidden;
}

.country-search[b-i37dyljti1] {
    padding: 10px;
    border-bottom: 1px solid var(--border);
}

.country-search input[b-i37dyljti1] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.9rem;
}

.country-search input:focus[b-i37dyljti1] {
    outline: none;
    border-color: var(--brand-primary);
}

.country-search input[b-i37dyljti1]::placeholder {
    color: var(--text-muted);
}

.country-list[b-i37dyljti1] {
    max-height: 300px;
    overflow-y: auto;
}

.country-option[b-i37dyljti1] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.country-option:hover[b-i37dyljti1] {
    background: var(--bg-hover);
}

.country-option.selected[b-i37dyljti1] {
    background: rgba(99, 102, 241, 0.15);
}

.country-flag[b-i37dyljti1] {
    font-size: 1.2rem;
    line-height: 1;
}

.country-name[b-i37dyljti1] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.country-code[b-i37dyljti1] {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Custom scrollbar for country list */
.country-list[b-i37dyljti1]::-webkit-scrollbar {
    width: 6px;
}

.country-list[b-i37dyljti1]::-webkit-scrollbar-track {
    background: transparent;
}

.country-list[b-i37dyljti1]::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.country-list[b-i37dyljti1]::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ==================== Zone Selector ==================== */
.zone-selector[b-i37dyljti1] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.zone-btn[b-i37dyljti1] {
    padding: 10px 16px;
    border: 2px solid var(--border);
    border-radius: 20px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.zone-btn:hover[b-i37dyljti1] {
    border-color: var(--brand-primary);
}

.zone-btn.selected[b-i37dyljti1] {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: white;
}

/* ==================== Occasion Selector ==================== */
.occasion-selector[b-i37dyljti1] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.occasion-btn[b-i37dyljti1] {
    padding: 10px 14px;
    border: 2px solid var(--border);
    border-radius: 20px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.occasion-btn:hover[b-i37dyljti1] {
    border-color: var(--brand-primary);
    background: rgba(99, 102, 241, 0.05);
}

.occasion-btn.selected[b-i37dyljti1] {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: white;
}

/* ==================== Special Requests ==================== */
.expand-btn[b-i37dyljti1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 12px 0;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
}

.expand-btn .chevron[b-i37dyljti1] {
    font-size: 1.25rem;
    transition: transform 0.2s;
}

.expand-btn .chevron.expanded[b-i37dyljti1] {
    transform: rotate(90deg);
}

.form-group textarea[b-i37dyljti1] {
    resize: none;
    margin-top: 8px;
}

/* ==================== Buttons ==================== */
.btn-next[b-i37dyljti1],
.btn-book[b-i37dyljti1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px;
    margin-top: 1rem;
    background: var(--brand-primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.btn-next:hover:not(:disabled)[b-i37dyljti1],
.btn-book:hover:not(:disabled)[b-i37dyljti1] {
    background: var(--brand-primary-hover);
}

.btn-next:active:not(:disabled)[b-i37dyljti1],
.btn-book:active:not(:disabled)[b-i37dyljti1] {
    transform: scale(0.98);
}

.btn-next:disabled[b-i37dyljti1],
.btn-book:disabled[b-i37dyljti1] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-i37dyljti1] {
    display: inline-block;
    padding: 12px 24px;
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 1rem;
}

.submit-error[b-i37dyljti1] {
    margin-top: 12px;
    padding: 12px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--error);
    border-radius: 8px;
    color: var(--error);
    font-size: 0.9rem;
    text-align: center;
}

/* ==================== Success Screen ==================== */
.success-screen[b-i37dyljti1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.success-icon[b-i37dyljti1] {
    width: 80px;
    height: 80px;
    background: var(--success);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

.success-screen h2[b-i37dyljti1] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 1rem;
}

.booking-summary[b-i37dyljti1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 1.25rem;
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: var(--shadow);
    margin-bottom: 1rem;
}

.summary-row[b-i37dyljti1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
}

.summary-icon[b-i37dyljti1] {
    font-size: 1.25rem;
}

.confirmation-message[b-i37dyljti1] {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    max-width: 280px;
}

.btn-track[b-i37dyljti1] {
    padding: 16px 48px;
    background: var(--brand-primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.btn-track:hover[b-i37dyljti1] {
    background: var(--brand-primary-hover);
}

.btn-track:active[b-i37dyljti1] {
    transform: scale(0.98);
}

/* Confirmation actions container */
.confirmation-actions[b-i37dyljti1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 280px;
}

.btn-calendar[b-i37dyljti1] {
    padding: 14px 24px;
    background: transparent;
    color: var(--brand-primary);
    border: 2px solid var(--brand-primary);
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-calendar:hover[b-i37dyljti1] {
    background: var(--brand-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.btn-calendar:active[b-i37dyljti1] {
    transform: scale(0.98);
}

/* ==================== Confetti ==================== */
.confetti-container[b-i37dyljti1] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.confetti[b-i37dyljti1] {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--brand-primary);
    top: -10px;
    left: 50%;
    transform: translateX(var(--x));
    animation: confetti-fall-b-i37dyljti1 3s ease-out var(--delay) forwards;
    border-radius: 2px;
}

.confetti:nth-child(2n)[b-i37dyljti1] {
    background: var(--success);
    width: 8px;
    height: 12px;
}

.confetti:nth-child(3n)[b-i37dyljti1] {
    background: #f59e0b;
    width: 12px;
    height: 8px;
}

.confetti:nth-child(5n)[b-i37dyljti1] {
    background: #ec4899;
}

@keyframes confetti-fall-b-i37dyljti1 {
    0% {
        opacity: 1;
        transform: translateX(var(--x)) translateY(0) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateX(calc(var(--x) + 30px)) translateY(100vh) rotate(720deg);
    }
}

/* ==================== Animations ==================== */
.bounce-in[b-i37dyljti1] {
    animation: bounce-in-b-i37dyljti1 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes bounce-in-b-i37dyljti1 {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    60% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.fade-in[b-i37dyljti1] {
    animation: fade-in-b-i37dyljti1 0.5s ease-out forwards;
    animation-delay: 0.3s;
    opacity: 0;
}

@keyframes fade-in-b-i37dyljti1 {
    to {
        opacity: 1;
    }
}

/* ==================== RTL Support (Arabic) ==================== */
[dir="rtl"] .country-code-btn[b-i37dyljti1] {
    border-right: 1px solid var(--border);
    border-left: none;
    border-radius: 0 10px 10px 0;
}

[dir="rtl"] .country-dropdown[b-i37dyljti1] {
    left: auto;
    right: 0;
}

[dir="rtl"] .phone-input-wrapper input[b-i37dyljti1] {
    border-radius: 10px 0 0 10px;
}

/* ==================== Responsive ==================== */
@media (max-width: 400px) {
    .party-btn[b-i37dyljti1] {
        width: 40px;
        height: 40px;
    }

    .time-slots[b-i37dyljti1] {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    }

    .booking-preview[b-i37dyljti1] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .step-line[b-i37dyljti1] {
        width: 24px;
    }
}

/* ==================== Payment Step ==================== */
.deposit-info[b-i37dyljti1] {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-hover) 100%);
    padding: 1.5rem;
    border-radius: 12px;
    text-align: center;
    color: white;
    margin-bottom: 1.5rem;
}

.deposit-info h3[b-i37dyljti1] {
    font-size: 1rem;
    margin: 0 0 0.5rem;
    font-weight: 600;
    opacity: 0.9;
}

.deposit-amount[b-i37dyljti1] {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0.5rem 0;
}

.deposit-description[b-i37dyljti1] {
    font-size: 0.875rem;
    margin: 0.5rem 0 0;
    opacity: 0.85;
}

.payment-element-container[b-i37dyljti1] {
    margin: 1.5rem 0;
    padding: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.payment-error[b-i37dyljti1] {
    background: #fee;
    color: var(--error);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin: 1rem 0;
    font-size: 0.875rem;
    border-left: 4px solid var(--error);
}

.btn-book[b-i37dyljti1] {
    width: 100%;
    padding: 16px;
    background: var(--brand-primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 1rem;
}

.btn-book:hover:not(:disabled)[b-i37dyljti1] {
    background: var(--brand-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.btn-book:disabled[b-i37dyljti1] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-book:active:not(:disabled)[b-i37dyljti1] {
    transform: translateY(0);
}

/* ========================================
   TOUCHSCREEN-FRIENDLY IMPROVEMENTS
   ======================================== */

/* Larger touch targets for party size buttons */
.party-btn[b-i37dyljti1] {
    min-width: 48px;
    min-height: 48px;
}

/* Better touch targets for time slots */
.time-slot[b-i37dyljti1] {
    min-height: 44px;
    padding: 12px 16px;
}

/* Larger booking button for touch */
.btn-book[b-i37dyljti1] {
    min-height: 52px;
    padding: 16px 24px;
}

/* Form inputs touch-friendly */
.form-field input[b-i37dyljti1],
.form-field textarea[b-i37dyljti1],
.form-field select[b-i37dyljti1] {
    min-height: 48px;
    font-size: 16px; /* Prevents iOS zoom */
}

/* Tap feedback */
.party-btn:active[b-i37dyljti1],
.time-slot:active[b-i37dyljti1],
.zone-btn:active[b-i37dyljti1] {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

/* Prevent text selection on interactive elements */
.party-btn[b-i37dyljti1],
.time-slot[b-i37dyljti1],
.zone-btn[b-i37dyljti1],
.step-indicator[b-i37dyljti1],
.booking-preview[b-i37dyljti1] {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Smooth scrolling */
.reservation-book-page[b-i37dyljti1] {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

/* ========================================
   MICRO-INTERACTIONS & POLISH
   ======================================== */

/* Selected time slot glow */
.time-slot.selected[b-i37dyljti1] {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}

/* Party size button pulse on selection */
.party-btn.selected[b-i37dyljti1] {
    animation: selectPop-b-i37dyljti1 0.3s ease-out;
}

@keyframes selectPop-b-i37dyljti1 {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Form field focus animation */
.form-field input:focus[b-i37dyljti1],
.form-field textarea:focus[b-i37dyljti1] {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
    transition: box-shadow 0.2s ease;
}

/* Step indicator progress animation */
.step-indicator.completed .step-circle[b-i37dyljti1] {
    animation: stepComplete-b-i37dyljti1 0.4s ease-out;
}

@keyframes stepComplete-b-i37dyljti1 {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Booking preview card hover */
.booking-preview:hover[b-i37dyljti1] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

/* Zone button selection effect */
.zone-btn.selected[b-i37dyljti1] {
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

/* Success animation for confirmation */
@keyframes successBounce-b-i37dyljti1 {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-10px); }
    50% { transform: translateY(-5px); }
    75% { transform: translateY(-2px); }
}

.confirmation-icon[b-i37dyljti1] {
    animation: successBounce-b-i37dyljti1 0.6s ease-out;
}

/* Calendar day hover effect */
.calendar-day:hover:not(.disabled):not(.selected)[b-i37dyljti1] {
    background: rgba(99, 102, 241, 0.1);
    transform: scale(1.05);
    transition: all 0.15s ease;
}

.calendar-day.selected[b-i37dyljti1] {
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* Mobile optimizations */
@media (max-width: 480px) {
    .form-field input[b-i37dyljti1],
    .form-field textarea[b-i37dyljti1] {
        font-size: 16px; /* Prevent zoom on iOS */
    }

    .btn-book[b-i37dyljti1] {
        position: sticky;
        bottom: 16px;
        width: calc(100% - 32px);
        margin: 1rem 16px;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    }
}

/* RGPD privacy-consent checkbox (gates the submit / payment step) */
.privacy-consent[b-i37dyljti1] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0.25rem 0 1rem;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text);
    cursor: pointer;
}

.privacy-consent input[type="checkbox"][b-i37dyljti1] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin-top: 1px;
    accent-color: var(--brand-primary);
    cursor: pointer;
}

.privacy-consent a[b-i37dyljti1] {
    color: var(--brand-primary);
    text-decoration: underline;
}
/* /Pages/ReservationStatus.razor.rz.scp.css */
/* ==================== Variables ==================== */
.reservation-status-page[b-9r09c9b738] {
    --brand-primary: #6366f1;
    --brand-primary-hover: #4f46e5;
    --bg: #f8fafc;
    --bg-card: #ffffff;
    --text: #1e293b;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --success: #10b981;
    --error: #ef4444;
    --warning: #f59e0b;
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);

    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: background 0.3s, color 0.3s;
}

.reservation-status-page.dark[b-9r09c9b738] {
    --bg: #0f172a;
    --bg-card: #1e293b;
    --text: #f1f5f9;
    --text-muted: #94a3b8;
    --border: #334155;
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3);
}

/* ==================== Loading & Error ==================== */
.loading-screen[b-9r09c9b738],
.error-screen[b-9r09c9b738],
.status-screen[b-9r09c9b738] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    text-align: center;
}

.spinner[b-9r09c9b738] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: spin-b-9r09c9b738 1s linear infinite;
}

.spinner-small[b-9r09c9b738] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-9r09c9b738 0.8s linear infinite;
    display: inline-block;
    margin-right: 8px;
}

@keyframes spin-b-9r09c9b738 {
    to { transform: rotate(360deg); }
}

.error-icon[b-9r09c9b738],
.status-icon[b-9r09c9b738] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.error-screen .error-icon[b-9r09c9b738] {
    background: var(--error);
    color: white;
}

.status-screen.cancelled .status-icon[b-9r09c9b738] {
    background: var(--error);
    color: white;
}

.status-screen.no-show .status-icon[b-9r09c9b738] {
    background: var(--warning);
    color: white;
}

.status-screen.completed .status-icon[b-9r09c9b738] {
    background: var(--success);
    color: white;
}

.status-screen h2[b-9r09c9b738] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.status-screen p[b-9r09c9b738] {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.btn-primary[b-9r09c9b738] {
    padding: 14px 32px;
    background: var(--brand-primary);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-secondary[b-9r09c9b738] {
    padding: 14px 32px;
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}

/* ==================== Confirmed Screen ==================== */
.confirmed-screen[b-9r09c9b738] {
    min-height: 100vh;
    padding-bottom: 2rem;
}

.status-header[b-9r09c9b738] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}

.restaurant-name[b-9r09c9b738] {
    font-size: 1.125rem;
    font-weight: 600;
}

.theme-toggle[b-9r09c9b738] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    font-size: 1.125rem;
    cursor: pointer;
    line-height: 1;
}

/* ==================== Confirmation Badge ==================== */
.confirmation-badge[b-9r09c9b738] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 1rem;
    background: linear-gradient(135deg, var(--success), #059669);
    color: white;
}

.badge-icon[b-9r09c9b738] {
    width: 24px;
    height: 24px;
    background: white;
    color: var(--success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: bold;
}

.badge-text[b-9r09c9b738] {
    font-weight: 600;
    font-size: 1rem;
}

/* ==================== Confirmation Code Card ==================== */
.confirmation-code-card[b-9r09c9b738] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1rem 1.25rem 0;
    padding: 1rem;
    background: var(--bg-card);
    border-radius: 12px;
    border: 2px dashed var(--border);
}

.code-label[b-9r09c9b738] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.code-value[b-9r09c9b738] {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 2px;
    color: var(--brand-primary);
}

/* ==================== Restaurant Info Card ==================== */
.restaurant-info-card[b-9r09c9b738] {
    margin: 1.25rem;
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.info-row[b-9r09c9b738] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
}

.info-row:last-child[b-9r09c9b738] {
    border-bottom: none;
}

.info-row:hover[b-9r09c9b738] {
    background: rgba(99, 102, 241, 0.05);
}

.info-row .info-icon[b-9r09c9b738] {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.info-row .info-content[b-9r09c9b738] {
    flex: 1;
    min-width: 0;
}

.info-row .info-label[b-9r09c9b738] {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.info-row .info-value[b-9r09c9b738] {
    display: block;
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.3;
}

.info-row .arrow[b-9r09c9b738] {
    color: var(--text-muted);
    font-size: 1rem;
}

/* ==================== Quick Actions ==================== */
.quick-actions[b-9r09c9b738] {
    display: flex;
    gap: 12px;
    padding: 0 1.25rem;
    margin-bottom: 1rem;
}

.quick-actions .btn-calendar[b-9r09c9b738],
.quick-actions .btn-share[b-9r09c9b738] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.quick-actions .btn-calendar:hover[b-9r09c9b738],
.quick-actions .btn-share:hover[b-9r09c9b738] {
    border-color: var(--brand-primary);
    background: rgba(99, 102, 241, 0.05);
}

.quick-actions .cal-icon[b-9r09c9b738],
.quick-actions .share-icon[b-9r09c9b738] {
    font-size: 1rem;
}

/* ==================== Booking Card ==================== */
.booking-card[b-9r09c9b738] {
    margin: 1.25rem;
    background: var(--bg-card);
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.booking-header[b-9r09c9b738] {
    padding: 1.25rem;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-hover));
    color: white;
    text-align: center;
}

.date-day[b-9r09c9b738] {
    display: block;
    font-size: 0.875rem;
    text-transform: uppercase;
    opacity: 0.9;
    margin-bottom: 4px;
}

.date-full[b-9r09c9b738] {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
}

.booking-details[b-9r09c9b738] {
    padding: 1.25rem;
}

.detail-row[b-9r09c9b738] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.detail-row:last-child[b-9r09c9b738] {
    border-bottom: none;
}

.detail-icon[b-9r09c9b738] {
    font-size: 1.25rem;
    width: 32px;
    text-align: center;
    flex-shrink: 0;
}

.detail-content[b-9r09c9b738] {
    flex: 1;
}

.detail-label[b-9r09c9b738] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.detail-value[b-9r09c9b738] {
    display: block;
    font-size: 1rem;
    font-weight: 500;
}

.special-requests .detail-value[b-9r09c9b738] {
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* ==================== Calendar Actions ==================== */
.calendar-actions[b-9r09c9b738] {
    display: flex;
    justify-content: center;
    padding: 0 1.25rem;
    margin-bottom: 1rem;
}

.btn-calendar[b-9r09c9b738] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s;
}

.btn-calendar:hover[b-9r09c9b738] {
    border-color: var(--brand-primary);
}

.cal-icon[b-9r09c9b738] {
    font-size: 1rem;
}

/* ==================== Status Info ==================== */
.status-info[b-9r09c9b738] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    margin: 0 1.25rem 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
}

.status-info.pending[b-9r09c9b738] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.status-info.reminded[b-9r09c9b738] {
    background: rgba(99, 102, 241, 0.1);
    color: var(--brand-primary);
}

.status-icon-small[b-9r09c9b738] {
    font-size: 1rem;
}

/* ==================== Cancel Button ==================== */
.btn-cancel[b-9r09c9b738] {
    display: block;
    width: calc(100% - 2.5rem);
    margin: 1.5rem auto 0;
    padding: 14px;
    background: transparent;
    color: var(--error);
    border: 1px solid var(--error);
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-cancel:hover[b-9r09c9b738] {
    background: rgba(239, 68, 68, 0.1);
}

/* ==================== Modal ==================== */
.modal-overlay[b-9r09c9b738] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-content[b-9r09c9b738] {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 1.5rem;
    max-width: 320px;
    width: 100%;
    text-align: center;
}

.modal-content h3[b-9r09c9b738] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.modal-content p[b-9r09c9b738] {
    color: var(--text-muted);
    margin: 0 0 1.5rem;
    font-size: 0.9rem;
}

.modal-actions[b-9r09c9b738] {
    display: flex;
    gap: 12px;
}

.modal-actions button[b-9r09c9b738] {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}

.btn-danger[b-9r09c9b738] {
    background: var(--error);
    color: white;
    border: none;
}

.btn-danger:disabled[b-9r09c9b738] {
    opacity: 0.6;
}

/* ==================== Arrival Confirmation ==================== */
.arrival-confirmed[b-9r09c9b738] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    margin: 0 1.25rem 1rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.08));
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    animation: confirmFadeIn-b-9r09c9b738 0.4s ease-out;
}

.arrival-confirmed .confirmed-icon[b-9r09c9b738] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #10b981;
    color: white;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: bold;
}

.arrival-confirmed .confirmed-text[b-9r09c9b738] {
    font-size: 0.9rem;
    color: var(--text);
    font-weight: 500;
}

.btn-on-my-way[b-9r09c9b738] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: calc(100% - 2.5rem);
    margin: 0 1.25rem 1rem;
    padding: 16px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.btn-on-my-way:hover:not(:disabled)[b-9r09c9b738] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.35);
}

.btn-on-my-way:disabled[b-9r09c9b738] {
    opacity: 0.8;
    cursor: not-allowed;
}

.btn-on-my-way.confirming[b-9r09c9b738] {
    background: linear-gradient(135deg, #10b981, #059669);
}

.btn-on-my-way .spinner-small[b-9r09c9b738] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-9r09c9b738 0.8s linear infinite;
}

@keyframes confirmFadeIn-b-9r09c9b738 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==================== Action Buttons ==================== */
.action-buttons[b-9r09c9b738] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: calc(100% - 2.5rem);
    margin: 1.5rem auto 0;
}

.btn-edit[b-9r09c9b738] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    background: var(--brand-primary);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-edit:hover[b-9r09c9b738] {
    background: var(--brand-primary-hover);
}

.action-buttons .btn-cancel[b-9r09c9b738] {
    width: 100%;
    margin: 0;
}

/* ==================== Edit Modal ==================== */
.edit-modal[b-9r09c9b738] {
    max-width: 360px;
    width: calc(100% - 2rem);
    text-align: left;
    max-height: 90vh;
    overflow-y: auto;
}

.edit-modal h3[b-9r09c9b738] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.edit-field[b-9r09c9b738] {
    margin-bottom: 1.25rem;
}

.edit-field label[b-9r09c9b738] {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.edit-field input[type="date"][b-9r09c9b738] {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 1rem;
    background: var(--bg);
    color: var(--text);
    box-sizing: border-box;
}

.slots-loading[b-9r09c9b738] {
    display: flex;
    justify-content: center;
    padding: 1rem;
}

.time-slot-grid[b-9r09c9b738] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
    padding: 4px;
}

.time-slot-btn[b-9r09c9b738] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.time-slot-btn:hover[b-9r09c9b738] {
    border-color: var(--brand-primary);
}

.time-slot-btn.selected[b-9r09c9b738] {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: white;
}

.no-slots[b-9r09c9b738] {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.party-size-selector[b-9r09c9b738] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.size-btn[b-9r09c9b738] {
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg);
    color: var(--text);
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s;
}

.size-btn:hover[b-9r09c9b738] {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.size-value[b-9r09c9b738] {
    font-size: 1.5rem;
    font-weight: 600;
    min-width: 50px;
    text-align: center;
}

.size-hint[b-9r09c9b738] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 4px;
}

.edit-error[b-9r09c9b738] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--error);
    color: var(--error);
    padding: 10px;
    border-radius: 8px;
    font-size: 0.85rem;
    text-align: center;
    margin-bottom: 1rem;
}

.edit-modal .modal-actions[b-9r09c9b738] {
    margin-top: 1.5rem;
}

.btn-primary[b-9r09c9b738] {
    background: var(--brand-primary);
    color: white;
    border: none;
}

.btn-primary:hover[b-9r09c9b738] {
    background: var(--brand-primary-hover);
}

.btn-primary:disabled[b-9r09c9b738] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-9r09c9b738] {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-secondary:hover[b-9r09c9b738] {
    background: var(--bg);
}

/* ==================== Responsive ==================== */
@media (max-width: 400px) {
    .booking-header[b-9r09c9b738] {
        padding: 1rem;
    }

    .date-full[b-9r09c9b738] {
        font-size: 1.125rem;
    }

    .modal-actions[b-9r09c9b738] {
        flex-direction: column;
    }
}
/* /Pages/Shared/Components/AiMenuImportPanel.razor.rz.scp.css */
/* Mobile-first AI menu import. Self-contained dark panel; safe inside the
   admin page OR an inline full-screen modal. Everything is width-bounded so it
   never overflows a phone viewport. */
.aimi[b-wi0v608spu] {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 14px 28px;
    box-sizing: border-box;
    color: var(--adm-fg-f1f5f9);
    -webkit-text-size-adjust: 100%;
}
.aimi *[b-wi0v608spu] { box-sizing: border-box; }

.aimi-head[b-wi0v608spu] { position: relative; margin-bottom: 1rem; }
.aimi-close[b-wi0v608spu] {
    position: absolute;
    top: -2px;
    right: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--adm-bdon-ffffff-30363d);
    background: var(--adm-bg-161b22);
    color: var(--adm-fgon-ffffff-cbd5e1);
    font-size: 1.1rem;
    cursor: pointer;
}
.aimi-close:active[b-wi0v608spu] { background: var(--adm-bg-ffffff-a0_06); }
.aimi-head h1[b-wi0v608spu] { margin: 0 44px 0.4rem 0; font-size: 1.35rem; font-weight: 800; line-height: 1.2; }
.aimi-lede[b-wi0v608spu] { margin: 0; color: var(--adm-fg-94a3b8); font-size: 0.92rem; line-height: 1.5; overflow-wrap: anywhere; }

.aimi-card[b-wi0v608spu] {
    background: var(--adm-bg-161b22);
    border: 1px solid var(--adm-bdon-ffffff-30363d);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
}
.aimi-card-title[b-wi0v608spu] { font-size: 0.98rem; font-weight: 800; margin-bottom: 4px; }
.aimi-center[b-wi0v608spu] { text-align: center; padding: 2.25rem 1rem; }

/* styled file picker (hides the ugly default input) */
.aimi-file-btn[b-wi0v608spu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    margin-top: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 2px dashed var(--adm-bdon-eeedfc-4b3f8f);
    background: var(--adm-bg-7c5cff-a0_08);
    color: var(--adm-fgon-eeedfc-c4b5fd);
    font-weight: 700;
    font-size: 0.98rem;
    cursor: pointer;
    text-align: center;
}
.aimi-file-btn:active[b-wi0v608spu] { background: var(--adm-bg-7c5cff-a0_16); }
.aimi-file-chosen[b-wi0v608spu] {
    margin-top: 10px;
    color: var(--adm-fg-cbd5e1);
    font-size: 0.88rem;
    overflow-wrap: anywhere;
}

.aimi-or[b-wi0v608spu] {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--adm-fg-64748b);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 14px 0;
}
.aimi-or[b-wi0v608spu]::before, .aimi-or[b-wi0v608spu]::after { content: ""; flex: 1; height: 1px; background: var(--adm-bg-30363d); }
.aimi-or span[b-wi0v608spu] { padding: 0 12px; }

.aimi-textarea[b-wi0v608spu] {
    width: 100%;
    min-height: 180px;
    resize: vertical;
    padding: 12px 14px;
    background: var(--adm-bg-0d1117);
    border: 1px solid var(--adm-bdon-f8fafc-30363d);
    border-radius: 10px;
    color: var(--adm-fgon-f8fafc-f1f5f9);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88rem;
    line-height: 1.5;
    outline: none;
}
.aimi-textarea:focus[b-wi0v608spu] { border-color: var(--adm-bdon-f8fafc-a78bfa); box-shadow: 0 0 0 3px var(--adm-sh-a78bfa-a0_2); }

.aimi-row[b-wi0v608spu] { display: flex; align-items: center; justify-content: space-between; margin-top: 0.8rem; gap: 12px; }
.aimi-hint[b-wi0v608spu] { color: var(--adm-fg-64748b); font-size: 0.8rem; }

.aimi-btn[b-wi0v608spu] {
    border: none;
    border-radius: 11px;
    padding: 12px 18px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    min-height: 46px;
    white-space: nowrap;
}
.aimi-btn.block[b-wi0v608spu] { display: block; width: 100%; margin-top: 12px; }
.aimi-btn.sm[b-wi0v608spu] { padding: 8px 12px; min-height: 38px; font-size: 0.85rem; }
.aimi-btn.primary[b-wi0v608spu] {
    background: linear-gradient(135deg, var(--adm-bggrad-7c5cff) 0%, var(--adm-bggrad-6366f1) 100%);
    color: var(--adm-fgon-e3dcfe-ffffff);
    box-shadow: 0 4px 14px -3px var(--adm-sh-6366f1-a0_4);
}
.aimi-btn.primary:disabled[b-wi0v608spu] { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.aimi-btn.ghost[b-wi0v608spu] { background: transparent; border: 1px solid var(--adm-bd-30363d); color: var(--adm-fg-cbd5e1); }
.aimi-btn.ghost:active[b-wi0v608spu] { background: var(--adm-bg-ffffff-a0_05); }

.aimi-error[b-wi0v608spu] {
    margin-top: 1rem;
    padding: 12px 14px;
    background: var(--adm-bg-ef4444-a0_12);
    border: 1px solid var(--adm-bd-ef4444-a0_35);
    border-radius: 10px;
    color: var(--adm-fgon-f7e4e6-fca5a5);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.aimi-spinner[b-wi0v608spu] {
    width: 36px; height: 36px;
    border: 3px solid var(--adm-bd-30363d);
    border-top-color: var(--adm-bd-a78bfa);
    border-radius: 50%;
    margin: 0 auto 1rem;
    animation: aimi-spin-b-wi0v608spu 0.8s linear infinite;
}
@keyframes aimi-spin-b-wi0v608spu { to { transform: rotate(360deg); } }

.aimi-review-head[b-wi0v608spu] {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 0.85rem; color: var(--adm-fg-cbd5e1); font-size: 0.9rem; line-height: 1.4;
}
.aimi-flag-count[b-wi0v608spu] {
    display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px;
    background: var(--adm-bg-f59e0b-a0_15); border: 1px solid var(--adm-bd-f59e0b-a0_4); color: var(--adm-fgon-f8ecd8-fcd34d);
    font-size: 0.78rem; font-weight: 700; white-space: nowrap;
}
.aimi-note[b-wi0v608spu] {
    margin-bottom: 14px; padding: 11px 13px;
    background: var(--adm-bg-f59e0b-a0_08); border: 1px solid var(--adm-bd-f59e0b-a0_3);
    border-radius: 10px; color: var(--adm-fgon-f8f3e9-fcd34d); font-size: 0.84rem; line-height: 1.5;
}
.aimi-note strong[b-wi0v608spu] { color: var(--adm-fg-fde68a); }

.aimi-cat[b-wi0v608spu] { background: var(--adm-bg-161b22); border: 1px solid var(--adm-bdon-ffffff-30363d); border-radius: 12px; padding: 13px; margin-bottom: 12px; }
.aimi-cat-head[b-wi0v608spu] { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.aimi-cat-name[b-wi0v608spu] {
    flex: 1; min-width: 0; background: transparent; border: none; border-bottom: 1px dashed var(--adm-bd-30363d);
    color: var(--adm-fg-ffffff); font-size: 1.02rem; font-weight: 800; padding: 4px 2px; outline: none;
}
.aimi-cat-name:focus[b-wi0v608spu] { border-bottom-color: var(--adm-bd-a78bfa); }

.aimi-cat-map[b-wi0v608spu] { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.aimi-map-label[b-wi0v608spu] { color: var(--adm-fg-94a3b8); font-size: 0.8rem; }
.aimi-select[b-wi0v608spu] {
    flex: 1; min-width: 140px; max-width: 100%;
    background: var(--adm-bg-0d1117); border: 1px solid var(--adm-bdon-f8fafc-30363d); border-radius: 8px;
    color: var(--adm-fgon-f8fafc-f1f5f9); padding: 8px 10px; font-size: 0.86rem; outline: none;
}
.aimi-select:focus[b-wi0v608spu] { border-color: var(--adm-bdon-f8fafc-a78bfa); }
.aimi-badge[b-wi0v608spu] { padding: 2px 9px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.aimi-badge.new[b-wi0v608spu] { background: var(--adm-bg-a78bfa-a0_15); border: 1px solid var(--adm-bd-a78bfa-a0_4); color: var(--adm-fgon-ece9fc-c4b5fd); }
.aimi-badge.exist[b-wi0v608spu] { background: var(--adm-bg-22c55e-a0_12); border: 1px solid var(--adm-bd-22c55e-a0_4); color: var(--adm-fgon-def4e9-86efac); }

.aimi-item-block[b-wi0v608spu] { padding: 9px 0; border-bottom: 1px solid var(--adm-bd-30363d-a0_5); }
.aimi-item-block:last-child[b-wi0v608spu] { border-bottom: none; }
.aimi-item-block.lowconf[b-wi0v608spu] { background: var(--adm-bg-f59e0b-a0_06); border-left: 3px solid var(--adm-bd-f59e0b-a0_6); border-radius: 6px; padding-left: 8px; margin-left: -8px; }
.aimi-lowconf-note[b-wi0v608spu] { color: var(--adm-fg-fcd34d); font-size: 0.76rem; margin: 4px 0 2px; }

.aimi-item[b-wi0v608spu] { display: flex; align-items: center; gap: 7px; }
.aimi-item-name[b-wi0v608spu] {
    flex: 1; min-width: 0; background: var(--adm-bg-0d1117); border: 1px solid var(--adm-bdon-f8fafc-30363d); border-radius: 8px;
    color: var(--adm-fgon-f8fafc-f1f5f9); padding: 9px 10px; font-size: 0.9rem; outline: none;
}
.aimi-item-name:focus[b-wi0v608spu] { border-color: var(--adm-bdon-f8fafc-a78bfa); }
.aimi-item-price[b-wi0v608spu] {
    width: 78px; flex-shrink: 0; background: var(--adm-bg-0d1117); border: 1px solid var(--adm-bdon-f8fafc-30363d); border-radius: 8px;
    color: var(--adm-fgon-f8fafc-f1f5f9); padding: 9px 8px; font-size: 0.9rem; text-align: right; outline: none;
}
.aimi-item-price:focus[b-wi0v608spu] { border-color: var(--adm-bdon-f8fafc-a78bfa); }
.aimi-eur[b-wi0v608spu] { color: var(--adm-fg-94a3b8); font-size: 0.9rem; flex-shrink: 0; }
.aimi-del[b-wi0v608spu] {
    background: transparent; border: none; color: var(--adm-fg-64748b); font-size: 0.95rem; cursor: pointer;
    padding: 6px 6px; border-radius: 6px; flex-shrink: 0; min-width: 32px;
}
.aimi-del:active[b-wi0v608spu] { background: var(--adm-bg-ef4444-a0_12); color: var(--adm-fgon-f7e4e6-fca5a5); }

.aimi-item-desc[b-wi0v608spu] {
    width: 100%; margin-top: 6px; background: var(--adm-bg-0d1117); border: 1px solid var(--adm-bdon-f8fafc-30363d); border-radius: 8px;
    color: var(--adm-fgon-f8fafc-cbd5e1); padding: 7px 10px; font-size: 0.83rem; outline: none;
}
.aimi-item-desc:focus[b-wi0v608spu] { border-color: var(--adm-bdon-f8fafc-a78bfa); }

.aimi-chips[b-wi0v608spu] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; align-items: center; }
.aimi-chip[b-wi0v608spu] { border: 1px solid var(--adm-bdon-f8fafc-30363d); background: var(--adm-bg-0d1117); color: var(--adm-fgon-f8fafc-cbd5e1); border-radius: 999px; padding: 4px 10px; font-size: 0.76rem; font-weight: 600; cursor: pointer; }
.aimi-chip.alg[b-wi0v608spu] { background: var(--adm-bg-ef4444-a0_1); border-color: var(--adm-bd-ef4444-a0_35); color: var(--adm-fgon-f7e8ea-fca5a5); }
.aimi-chip.diet[b-wi0v608spu] { background: var(--adm-bg-22c55e-a0_1); border-color: var(--adm-bd-22c55e-a0_35); color: var(--adm-fgon-e3f5ec-86efac); }
.aimi-chip.add[b-wi0v608spu] { background: transparent; border-style: dashed; color: var(--adm-fg-a78bfa); }

.aimi-allergen-grid[b-wi0v608spu] {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px;
    margin-top: 8px; padding: 8px; background: var(--adm-bg-0d1117); border: 1px solid var(--adm-bdon-f8fafc-30363d); border-radius: 10px;
}
.aimi-alg-toggle[b-wi0v608spu] { border: 1px solid var(--adm-bdon-ffffff-30363d); background: var(--adm-bg-161b22); color: var(--adm-fgon-ffffff-94a3b8); border-radius: 8px; padding: 8px; font-size: 0.78rem; text-align: left; cursor: pointer; min-height: 40px; }
.aimi-alg-toggle.on[b-wi0v608spu] { background: var(--adm-bg-ef4444-a0_15); border-color: var(--adm-bd-ef4444-a0_5); color: var(--adm-fgon-f7dfe0-fca5a5); font-weight: 700; }

.aimi-actions[b-wi0v608spu] { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 1rem; }
.aimi-actions .aimi-btn[b-wi0v608spu] { flex: 1; }

.aimi-done-icon[b-wi0v608spu] {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--adm-bg-22c55e-a0_15); border: 2px solid var(--adm-bd-22c55e-a0_5); color: var(--adm-fgon-d8f2e4-4ade80);
    font-size: 1.8rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem;
}
.aimi h2[b-wi0v608spu] { margin: 0 0 0.5rem; font-size: 1.25rem; font-weight: 800; }

/* PIN step-up */
.aimi-pin-backdrop[b-wi0v608spu] { position: fixed; inset: 0; background: var(--adm-scrim-000000-a0_65); display: flex; align-items: center; justify-content: center; z-index: 4100; padding: 16px; }
.aimi-pin-card[b-wi0v608spu] { background: var(--adm-bg-161b22); border: 1px solid var(--adm-bdon-ffffff-30363d); border-radius: 14px; padding: 1.4rem; max-width: 380px; width: 100%; color: var(--adm-fgon-ffffff-f1f5f9); box-sizing: border-box; }
.aimi-pin-card h3[b-wi0v608spu] { margin: 0 0 0.5rem; font-size: 1.12rem; font-weight: 800; }
.aimi-pin-card p[b-wi0v608spu] { margin: 0 0 1rem; color: var(--adm-fgon-ffffff-94a3b8); font-size: 0.86rem; line-height: 1.5; }
.aimi-pin-input[b-wi0v608spu] { width: 100%; box-sizing: border-box; background: var(--adm-bg-0d1117); border: 1px solid var(--adm-bdon-f8fafc-30363d); border-radius: 10px; color: var(--adm-fgon-f8fafc-f1f5f9); padding: 12px 14px; font-size: 1.3rem; letter-spacing: 0.3em; text-align: center; outline: none; }
.aimi-pin-input:focus[b-wi0v608spu] { border-color: var(--adm-bdon-f8fafc-a78bfa); box-shadow: 0 0 0 3px var(--adm-sh-a78bfa-a0_2); }
/* /Pages/Shared/Components/AllergenPicker.razor.rz.scp.css */
.allergen-picker[b-hcd1j3vxa4] {
    margin-bottom: 12px;
}

.picker-label[b-hcd1j3vxa4] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--adm-fg-94a3b8);
    margin-bottom: 8px;
}

.allergen-grid[b-hcd1j3vxa4] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.allergen-badge[b-hcd1j3vxa4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    min-height: 44px;
    border: 2px solid var(--adm-bdon-ffffff-334155);
    border-radius: 8px;
    background: var(--adm-bg-1e293b);
    color: var(--adm-fgon-ffffff-94a3b8);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.7rem;
    -webkit-tap-highlight-color: transparent;
}

.allergen-badge:hover[b-hcd1j3vxa4], .allergen-badge:active[b-hcd1j3vxa4] {
    border-color: var(--adm-bdon-eaf0f6-475569);
    background: var(--adm-bghov-ffffff-263548);
}

.allergen-badge.active[b-hcd1j3vxa4] {
    border-color: var(--adm-bdon-fde5d8-f59e0b);
    background: var(--adm-bg-451a03);
    color: var(--adm-fgon-fde5d8-fbbf24);
}

.allergen-badge.readonly[b-hcd1j3vxa4],
.allergen-badge:disabled[b-hcd1j3vxa4] {
    opacity: 0.6;
    cursor: not-allowed;
}

.badge-icon[b-hcd1j3vxa4] {
    font-size: 1.2rem;
    line-height: 1;
}

.badge-code[b-hcd1j3vxa4] {
    font-weight: 700;
    letter-spacing: 0.5px;
}

.allergen-summary[b-hcd1j3vxa4] {
    margin-top: 8px;
    font-size: 0.78rem;
    color: var(--adm-fg-f59e0b);
    line-height: 1.4;
}

.allergen-badge:focus-visible[b-hcd1j3vxa4] {
    outline: 2px solid var(--adm-bdon-ffffff-3b82f6);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .allergen-grid[b-hcd1j3vxa4] {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 480px) {
    .allergen-grid[b-hcd1j3vxa4] {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* /Pages/Shared/Components/BasketSummary.razor.rz.scp.css */
/* ========================================
   BASKET SCROLLBAR - Thicker for easy grabbing
   ======================================== */
.lines[b-719aae8r8e] {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: auto; /* Firefox - use standard width instead of thin */
    scrollbar-color: #9ca3af #f1f5f9; /* thumb track */
}

.lines[b-719aae8r8e]::-webkit-scrollbar {
    width: 16px;
}

.lines[b-719aae8r8e]::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 6px;
}

.lines[b-719aae8r8e]::-webkit-scrollbar-thumb {
    background: #9ca3af;
    border-radius: 6px;
    border: 2px solid #f1f5f9; /* Creates padding effect */
}

.lines[b-719aae8r8e]::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* Dark theme scrollbar */
html[data-theme="dark"] .lines[b-719aae8r8e] {
    scrollbar-color: #4b5563 #1f2937;
}

html[data-theme="dark"] .lines[b-719aae8r8e]::-webkit-scrollbar-track {
    background: #1f2937;
}

html[data-theme="dark"] .lines[b-719aae8r8e]::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-color: #1f2937;
}

html[data-theme="dark"] .lines[b-719aae8r8e]::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* ========================================
   LINE ACTIONS - Touch-friendly layout
   ======================================== */

/* Action group (options + delete) */
.line-actions .action-group[b-719aae8r8e] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.line-actions .action-group button[b-719aae8r8e] {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 18px;
    transition: all 0.15s ease;
}

.line-actions .action-group button:hover[b-719aae8r8e] {
    background: #f1f5f9;
    border-color: #d1d5db;
}

.line-actions .action-group .trash[b-719aae8r8e] {
    color: #6b7280;
}

.line-actions .action-group .trash:hover[b-719aae8r8e] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

/* Quantity group - visually unified */
.line-actions .qty-group[b-719aae8r8e] {
    display: flex;
    align-items: center;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 2px;
    gap: 0;
}

.line-actions .qty-group button[b-719aae8r8e] {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 20px;
    font-weight: 700;
    color: #374151;
    border-radius: 10px;
    transition: all 0.1s ease;
}

.line-actions .qty-group button:hover[b-719aae8r8e] {
    background: #e2e8f0;
}

.line-actions .qty-group button:active[b-719aae8r8e] {
    background: #cbd5e1;
    transform: scale(0.95);
}

.line-actions .qty-group button:disabled[b-719aae8r8e] {
    opacity: 0.4;
    cursor: not-allowed;
}

.line-actions .qty-group .count[b-719aae8r8e] {
    min-width: 36px;
    text-align: center;
    font-weight: 900;
    font-size: 1.1rem;
    color: #111827;
    padding: 0 4px;
}

/* Legacy support for old .qty class */
.line-actions .qty button[b-719aae8r8e],
.line-actions .qty .trash[b-719aae8r8e] {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    text-align: center;
    flex-shrink: 0;
}

.line-actions .more[b-719aae8r8e] {
    min-width: 44px;
    min-height: 44px;
    text-align: center;
    flex-shrink: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
}

.line-actions .qty .count[b-719aae8r8e] {
    min-width: 30px;
    text-align: center;
    font-weight: 800;
}

/* ========================================
   NOTE BUTTON - Clear affordance
   ======================================== */
.line-actions .note-btn[b-719aae8r8e] {
    position: relative;
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 18px;
    transition: all 0.15s ease;
}

.line-actions .note-btn:hover[b-719aae8r8e] {
    background: #fef3c7;
    border-color: #fcd34d;
}

/* Note button with existing note - highlighted */
.line-actions .note-btn.has-note[b-719aae8r8e] {
    background: #fef3c7;
    border-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

.line-actions .note-btn.has-note:hover[b-719aae8r8e] {
    background: #fde68a;
    border-color: #d97706;
}

/* Note indicator dot */
.line-actions .note-btn .note-btn-indicator[b-719aae8r8e] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: #dc2626;
    border-radius: 50%;
    border: 2px solid #fff;
    animation: note-pulse-b-719aae8r8e 2s ease-in-out infinite;
}

@keyframes note-pulse-b-719aae8r8e {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

/* Trash button - standalone with more spacing */
.line-actions .trash[b-719aae8r8e] {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 18px;
    transition: all 0.15s ease;
    color: #6b7280;
    margin-left: 8px;
}

.line-actions .trash:hover[b-719aae8r8e] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

.line-actions .trash:disabled[b-719aae8r8e] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Dark theme - Note button */
html[data-theme="dark"] .line-actions .note-btn[b-719aae8r8e] {
    background: #374151;
    border-color: #4b5563;
}

html[data-theme="dark"] .line-actions .note-btn:hover[b-719aae8r8e] {
    background: #78350f;
    border-color: #f59e0b;
}

html[data-theme="dark"] .line-actions .note-btn.has-note[b-719aae8r8e] {
    background: #78350f;
    border-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3);
}

html[data-theme="dark"] .line-actions .note-btn.has-note:hover[b-719aae8r8e] {
    background: #92400e;
    border-color: #fbbf24;
}

html[data-theme="dark"] .line-actions .note-btn .note-btn-indicator[b-719aae8r8e] {
    border-color: #374151;
}

html[data-theme="dark"] .line-actions .trash[b-719aae8r8e] {
    background: #374151;
    border-color: #4b5563;
    color: #9ca3af;
}

html[data-theme="dark"] .line-actions .trash:hover[b-719aae8r8e] {
    background: #7f1d1d;
    border-color: #991b1b;
    color: #fecaca;
}

.basket-item[b-719aae8r8e] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 8px;
    border-radius: 6px;
    margin-bottom: 4px;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}

/* Alternating backgrounds for better separation */
.basket-item:nth-child(odd)[b-719aae8r8e] {
    background: rgba(0,0,0,.02);
}

/* New items - white/clean look */
.basket-item.status-new[b-719aae8r8e] {
    background: #fff;
    border-color: #e5e7eb;
    border-left: 3px solid #e5e7eb;
}

/* Sent items - subtle gray to show "done" */
.basket-item.status-sent[b-719aae8r8e] {
    background: #f8fafc;
    border-color: #e5e7eb;
    border-left: 3px solid #22c55e;
}

/* Preparing items */
.basket-item.status-preparing[b-719aae8r8e] {
    background: #eff6ff;
    border-color: #dbeafe;
    border-left: 3px solid #3b82f6;
}

.basket-item .line-head[b-719aae8r8e] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.basket-item .line-head .info[b-719aae8r8e] {
    flex: 1 1 auto;
    min-width: 80px;
    overflow: hidden;
}

/* Item name container */
.basket-item .line-head .info .name[b-719aae8r8e] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}

/* Item name text - truncate with ellipsis. The line's lead: never under 16 px (the user, 2026-10-12:
   on a 794 px-tall laptop the compact rule below made names 13.6 px — smaller than the price beside
   them and two thirds of the product tiles' 20.6 px). */
.basket-item .line-head .info .name .name-text[b-719aae8r8e] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    font-size: 1.06rem;
}

/* Status dot */
.basket-item .line-head .info .name .status-dot[b-719aae8r8e] {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* Time badge - don't shrink */
.basket-item .line-head .info .name .time-badge[b-719aae8r8e] {
    flex-shrink: 0;
    font-size: 0.7rem;
    padding: 2px 6px;
    background: #e5e7eb;
    border-radius: 4px;
    color: #6b7280;
    white-space: nowrap;
}

/* Batch badge for duplicate items - shows order sequence */
.basket-item .line-head .info .name .batch-badge[b-719aae8r8e] {
    flex-shrink: 0;
    font-size: 0.65rem;
    padding: 1px 5px;
    background: #ddd6fe;
    border-radius: 4px;
    color: #6d28d9;
    font-weight: 600;
    white-space: nowrap;
}

html[data-theme="dark"] .basket-item .line-head .info .name .batch-badge[b-719aae8r8e] {
    background: #4c1d95;
    color: #c4b5fd;
}

/* Low stock badge for items running low */
.basket-item .line-head .info .name .low-stock-badge[b-719aae8r8e] {
    flex-shrink: 0;
    font-size: 0.6rem;
    padding: 2px 6px;
    background: linear-gradient(135deg, #ea580c, #c2410c);
    border-radius: 6px;
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

html[data-theme="dark"] .basket-item .line-head .info .name .low-stock-badge[b-719aae8r8e] {
    background: linear-gradient(135deg, #ea580c, #9a3412);
    box-shadow: 0 1px 3px rgba(234, 88, 12, 0.4);
}

/* Course pill - positioned between info and price */
.basket-item .line-head .course-pill[b-719aae8r8e] {
    flex: 0 0 auto;
    max-width: 48px;
    min-width: 32px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px dashed #d1d5db;
    background: #f8fafc;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    text-align: center;
}

.basket-item .line-head .course-pill:hover[b-719aae8r8e] {
    background: #e5e7eb;
    border-color: #9ca3af;
}

.basket-item .line-head .course-pill.course-empty[b-719aae8r8e] {
    color: #9ca3af;
    border-color: #e5e7eb;
}

.basket-item .line-head .course-pill.course-app[b-719aae8r8e] {
    background: #e0f2fe;
    border-color: #7dd3fc;
    color: #0369a1;
}

.basket-item .line-head .course-pill.course-main[b-719aae8r8e] {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

.basket-item .line-head .course-pill.course-des[b-719aae8r8e] {
    background: #ffedd5;
    border-color: #fdba74;
    color: #c2410c;
}

.basket-item .line-actions[b-719aae8r8e] {
    display: flex;
    align-items: center;
    gap: 12px; /* Spacing between note, trash, and qty group */
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-end;
    padding: 4px 0;
}

/* Legacy .qty support */
.basket-item .line-actions .qty[b-719aae8r8e] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    min-width: fit-content;
}

.basket-item .line-total[b-719aae8r8e] {
    font-weight: 900;
    font-size: 1.05rem;
    min-width: 80px;
    text-align: right;
    padding: 0 4px;
    margin-left: auto;
    flex: 0 0 auto;
    white-space: nowrap;
    color: #111827;
}

.basket-item .line-actions .more[b-719aae8r8e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #f8fafc;
    color: #111827;
    font-size: 20px;
    flex-shrink: 0;
    margin-right: 8px;
}

.basket-item.item-added[b-719aae8r8e] {
    animation: item-added-b-719aae8r8e 0.5s ease-out 1;
}

@keyframes item-added-b-719aae8r8e {
    0% { background: #ffeb3b40; }
    100% { background: #fff; }
}

/* Subtle highlight animation for newly added items */
.basket-item.pulse-in[b-719aae8r8e] {
    animation: highlight-fade-b-719aae8r8e 0.8s ease-out 1;
}

@keyframes highlight-fade-b-719aae8r8e {
    0% {
        background: rgba(34, 197, 94, 0.3);
        box-shadow: inset 0 0 0 2px rgba(34, 197, 94, 0.5);
    }
    100% {
        background: transparent;
        box-shadow: none;
    }
}

/* Dark theme variant */
html[data-theme="dark"] .basket-item.pulse-in[b-719aae8r8e] {
    animation: highlight-fade-dark-b-719aae8r8e 0.8s ease-out 1;
}

@keyframes highlight-fade-dark-b-719aae8r8e {
    0% {
        background: rgba(34, 197, 94, 0.35);
        box-shadow: inset 0 0 0 2px rgba(34, 197, 94, 0.6);
    }
    100% {
        background: transparent;
        box-shadow: none;
    }
}

/* Item note display - Kitchen notes are critical */
.item-note[b-719aae8r8e] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 4px;
    padding: 6px 10px;
    background: rgba(245, 158, 11, 0.15);
    border-radius: 6px;
    font-size: 0.85rem;
}

/* Kitchen note - softer but still visible styling */
.item-note.kitchen-note[b-719aae8r8e] {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-left: 3px solid #f59e0b;
    padding: 6px 10px;
    margin: 4px 0;
    border-radius: 6px;
}

.item-note .note-label[b-719aae8r8e] {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 0.7rem;
    color: #b45309;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.item-note .note-icon[b-719aae8r8e] {
    flex-shrink: 0;
}

.item-note .note-text[b-719aae8r8e] {
    color: #78350f;
    font-weight: 500;
    line-height: 1.3;
    /* 1-line truncation with ellipsis */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

/* Expand note text on hover */
.item-note:hover .note-text[b-719aae8r8e] {
    white-space: normal;
    max-width: none;
}

/* Light theme */
:root[data-theme="light"] .item-note[b-719aae8r8e],
html[data-theme="light"] .item-note[b-719aae8r8e] {
    background: #fef3c7;
}

:root[data-theme="light"] .item-note .note-text[b-719aae8r8e],
html[data-theme="light"] .item-note .note-text[b-719aae8r8e] {
    color: #92400e;
}

/* Dark theme */
html[data-theme="dark"] .item-note[b-719aae8r8e] {
    background: rgba(245, 158, 11, 0.2);
}

html[data-theme="dark"] .item-note.kitchen-note[b-719aae8r8e] {
    background: #422006;
    border-color: #92400e;
    border-left-color: #f59e0b;
}

html[data-theme="dark"] .item-note .note-label[b-719aae8r8e] {
    color: #fbbf24;
}

html[data-theme="dark"] .item-note .note-text[b-719aae8r8e] {
    color: #fde68a;
}

.item-mods[b-719aae8r8e] {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.mod-pill[b-719aae8r8e] {
    padding: 2px 6px;
    border-radius: 8px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    font-size: 12px;
    font-weight: 700;
}

/* Phase 13: Selected modifiers from modifier groups */
.mod-pill.mod-selected[b-719aae8r8e] {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mod-pill.mod-selected small[b-719aae8r8e] {
    font-size: 10px;
    color: #16a34a;
    font-weight: 600;
}

.selected-mods[b-719aae8r8e] {
    margin-top: 2px;
}

.time-badge[b-719aae8r8e] {
    margin-left: 8px;
    font-size: 11px;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 2px 8px;
    border: 1px solid #e5e7eb;
}

.section-header[b-719aae8r8e] {
    background: linear-gradient(180deg, #f8f9fa, #f1f3f5);
    padding: 12px 14px;
    cursor: pointer;
    border-radius: 10px;
    margin: 12px 0 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 4px rgba(0,0,0,.04);
    transition: all 0.15s ease;
}

.section-header:hover[b-719aae8r8e] {
    background: linear-gradient(180deg, #f1f3f5, #e9ecef);
    border-color: #d1d5db;
}

.section-header:first-child[b-719aae8r8e] {
    margin-top: 0;
}

.section-title[b-719aae8r8e] {
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.section-count[b-719aae8r8e] {
    color: #6b7280;
    font-weight: 600;
    font-size: 0.85rem;
}

.section-total[b-719aae8r8e] {
    margin-left: auto;
    font-weight: 900;
    font-size: 1rem;
    color: #111827;
}

/* Section-specific styling */
.section-header.section-new[b-719aae8r8e] {
    border-left: 3px solid #f59e0b;
    background: linear-gradient(180deg, #fffbeb, #fef3c7);
}

.section-header.section-sent[b-719aae8r8e] {
    border-left: 3px solid #22c55e;
    background: linear-gradient(180deg, #f0fdf4, #dcfce7);
}

.section-header.section-preparing[b-719aae8r8e] {
    border-left: 3px solid #3b82f6;
    background: linear-gradient(180deg, #eff6ff, #dbeafe);
}

.section-items[b-719aae8r8e] {
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.section-items.collapsed[b-719aae8r8e] {
    max-height: 0;
    padding: 0;
    margin: 0;
}

/* ========================================
   DARK THEME
   ======================================== */
html[data-theme="dark"] .line-actions .action-group button[b-719aae8r8e] {
    background: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}

html[data-theme="dark"] .line-actions .action-group button:hover[b-719aae8r8e] {
    background: #4b5563;
    border-color: #6b7280;
}

html[data-theme="dark"] .line-actions .action-group .trash:hover[b-719aae8r8e] {
    background: #7f1d1d;
    border-color: #991b1b;
    color: #fecaca;
}

html[data-theme="dark"] .line-actions .qty-group[b-719aae8r8e] {
    background: #1f2937;
    border-color: #374151;
}

html[data-theme="dark"] .line-actions .qty-group button[b-719aae8r8e] {
    color: #e5e7eb;
}

html[data-theme="dark"] .line-actions .qty-group button:hover[b-719aae8r8e] {
    background: #374151;
}

html[data-theme="dark"] .line-actions .qty-group button:active[b-719aae8r8e] {
    background: #4b5563;
}

html[data-theme="dark"] .line-actions .qty-group .count[b-719aae8r8e] {
    color: #f3f4f6;
}

/* ========================================
   SOFT DELETE WITH UNDO
   ======================================== */
.basket-item.pending-delete[b-719aae8r8e] {
    background: #fef2f2 !important;
    border-left-color: #ef4444 !important;
    opacity: 0.85;
}

.basket-item.pending-delete .name-text[b-719aae8r8e] {
    text-decoration: line-through;
    color: #9ca3af;
}

.basket-item.pending-delete .line-total[b-719aae8r8e] {
    text-decoration: line-through;
    color: #9ca3af;
}

.undo-delete[b-719aae8r8e] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: 2px solid #22c55e;
    border-radius: 10px;
    background: #f0fdf4;
    color: #166534;
    font-weight: 800;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s ease;
    animation: undo-pulse-b-719aae8r8e 0.5s ease;
}

.undo-delete:hover[b-719aae8r8e] {
    background: #dcfce7;
    border-color: #16a34a;
}

@keyframes undo-pulse-b-719aae8r8e {
    0% { transform: scale(0.9); opacity: 0; }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

.delete-countdown[b-719aae8r8e] {
    flex: 1;
    height: 4px;
    background: #fee2e2;
    border-radius: 2px;
    overflow: hidden;
    margin-left: 12px;
}

.delete-countdown .countdown-bar[b-719aae8r8e] {
    height: 100%;
    background: linear-gradient(90deg, #ef4444, #dc2626);
    width: 100%;
    animation: countdown-shrink-b-719aae8r8e 0.5s linear forwards;
}

@keyframes countdown-shrink-b-719aae8r8e {
    from { width: 100%; }
    to { width: 0%; }
}

/* Item being deleted - quick exit animation */
.basket-item.deleting[b-719aae8r8e] {
    animation: slideOutDelete-b-719aae8r8e 0.25s ease-out forwards;
    pointer-events: none;
}

@keyframes slideOutDelete-b-719aae8r8e {
    0% { opacity: 1; transform: translateX(0); max-height: 200px; }
    70% { opacity: 0; transform: translateX(30px); }
    100% { opacity: 0; transform: translateX(30px); max-height: 0; margin: 0; padding: 0; }
}

/* Dark theme soft delete */
html[data-theme="dark"] .basket-item.pending-delete[b-719aae8r8e] {
    background: #450a0a !important;
}

html[data-theme="dark"] .basket-item.pending-delete .name-text[b-719aae8r8e],
html[data-theme="dark"] .basket-item.pending-delete .line-total[b-719aae8r8e] {
    color: #6b7280;
}

html[data-theme="dark"] .undo-delete[b-719aae8r8e] {
    background: #14532d;
    border-color: #22c55e;
    color: #86efac;
}

html[data-theme="dark"] .undo-delete:hover[b-719aae8r8e] {
    background: #166534;
}

html[data-theme="dark"] .delete-countdown[b-719aae8r8e] {
    background: #7f1d1d;
}

/* ========================================
   DARK THEME - SECTION HEADERS
   ======================================== */
html[data-theme="dark"] .section-header[b-719aae8r8e] {
    background: linear-gradient(180deg, #374151, #1f2937);
    border-color: #4b5563;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

html[data-theme="dark"] .section-header:hover[b-719aae8r8e] {
    background: linear-gradient(180deg, #4b5563, #374151);
    border-color: #6b7280;
}

html[data-theme="dark"] .section-title[b-719aae8r8e] {
    color: #f3f4f6;
}

html[data-theme="dark"] .section-count[b-719aae8r8e] {
    color: #9ca3af;
}

html[data-theme="dark"] .section-total[b-719aae8r8e] {
    color: #f3f4f6;
}

/* Section-specific dark theme */
html[data-theme="dark"] .section-header.section-new[b-719aae8r8e] {
    background: linear-gradient(180deg, #451a03, #78350f);
    border-left-color: #f59e0b;
}

html[data-theme="dark"] .section-header.section-sent[b-719aae8r8e] {
    background: linear-gradient(180deg, #14532d, #166534);
    border-left-color: #22c55e;
}

html[data-theme="dark"] .section-header.section-preparing[b-719aae8r8e] {
    background: linear-gradient(180deg, #1e3a5f, #1e40af);
    border-left-color: #3b82f6;
}

/* ========================================
   DARK THEME - BASKET ITEMS
   ======================================== */
html[data-theme="dark"] .basket-item[b-719aae8r8e] {
    background: #1f2937;
}

html[data-theme="dark"] .basket-item:nth-child(odd)[b-719aae8r8e] {
    background: #111827;
}

html[data-theme="dark"] .basket-item.status-new[b-719aae8r8e] {
    background: #1f2937;
    border-color: #374151;
    border-left: 3px solid #4b5563;
}

html[data-theme="dark"] .basket-item.status-sent[b-719aae8r8e] {
    background: #111827;
    border-color: #374151;
    border-left: 3px solid #22c55e;
}

html[data-theme="dark"] .basket-item.status-preparing[b-719aae8r8e] {
    background: #1e3a5f;
    border-color: #2d4a7c;
    border-left: 3px solid #3b82f6;
}

/* Item name text - must be white/light */
html[data-theme="dark"] .basket-item .name-text[b-719aae8r8e],
html[data-theme="dark"] .basket-item .info[b-719aae8r8e] {
    color: #f3f4f6;
}

/* Line total */
html[data-theme="dark"] .basket-item .line-total[b-719aae8r8e] {
    color: #f3f4f6;
}

/* More button */
html[data-theme="dark"] .basket-item .line-actions .more[b-719aae8r8e] {
    background: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
}

html[data-theme="dark"] .basket-item .line-actions .more:hover[b-719aae8r8e] {
    background: #4b5563;
}

/* Course pills in dark mode */
html[data-theme="dark"] .basket-item .line-head .course-pill[b-719aae8r8e] {
    background: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}

html[data-theme="dark"] .basket-item .line-head .course-pill:hover[b-719aae8r8e] {
    background: #4b5563;
    border-color: #6b7280;
}

html[data-theme="dark"] .basket-item .line-head .course-pill.course-empty[b-719aae8r8e] {
    color: #9ca3af;
    border-color: #4b5563;
}

html[data-theme="dark"] .basket-item .line-head .course-pill.course-app[b-719aae8r8e] {
    background: #1e3a5f;
    border-color: #3b82f6;
    color: #7dd3fc;
}

html[data-theme="dark"] .basket-item .line-head .course-pill.course-main[b-719aae8r8e] {
    background: #14532d;
    border-color: #22c55e;
    color: #86efac;
}

html[data-theme="dark"] .basket-item .line-head .course-pill.course-des[b-719aae8r8e] {
    background: #7c2d12;
    border-color: #f97316;
    color: #fed7aa;
}

/* Mod pills */
html[data-theme="dark"] .mod-pill[b-719aae8r8e] {
    background: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}

/* Time badge */
html[data-theme="dark"] .time-badge[b-719aae8r8e] {
    background: #374151;
    border-color: #4b5563;
    color: #9ca3af;
}

/* ========================================
   EXPANDABLE MODIFIERS SECTION
   ======================================== */
.modifiers-section[b-719aae8r8e] {
    margin-top: 6px;
    border-radius: 8px;
    overflow: hidden;
}

.modifiers-toggle[b-719aae8r8e] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f8fafc;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    transition: all 0.15s ease;
}

.modifiers-toggle:hover[b-719aae8r8e] {
    background: #f1f5f9;
    border-color: #d1d5db;
}

.modifiers-section.expanded .modifiers-toggle[b-719aae8r8e] {
    border-radius: 8px 8px 0 0;
    border-bottom-color: transparent;
}

.modifiers-toggle .mod-icon[b-719aae8r8e] {
    font-size: 1rem;
}

.modifiers-toggle .mod-count[b-719aae8r8e] {
    color: #1e40af;
    font-weight: 700;
}

.modifiers-toggle .mod-total[b-719aae8r8e] {
    margin-left: auto;
    color: #16a34a;
    font-weight: 800;
}

.modifiers-toggle .mod-arrow[b-719aae8r8e] {
    color: #9ca3af;
    font-size: 0.75rem;
    margin-left: 4px;
}

.modifiers-list[b-719aae8r8e] {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 8px 12px;
}

.modifier-item[b-719aae8r8e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px dashed #e5e7eb;
    font-size: 0.85rem;
}

.modifier-item:last-child[b-719aae8r8e] {
    border-bottom: none;
    padding-bottom: 0;
}

.modifier-item:first-child[b-719aae8r8e] {
    padding-top: 0;
}

.modifier-name[b-719aae8r8e] {
    color: #374151;
    font-weight: 500;
}

.modifier-price[b-719aae8r8e] {
    color: #16a34a;
    font-weight: 700;
    font-size: 0.8rem;
}

/* Dark theme - Expandable modifiers */
html[data-theme="dark"] .modifiers-toggle[b-719aae8r8e] {
    background: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}

html[data-theme="dark"] .modifiers-toggle:hover[b-719aae8r8e] {
    background: #4b5563;
    border-color: #6b7280;
}

html[data-theme="dark"] .modifiers-toggle .mod-count[b-719aae8r8e] {
    color: #60a5fa;
}

html[data-theme="dark"] .modifiers-toggle .mod-total[b-719aae8r8e] {
    color: #4ade80;
}

html[data-theme="dark"] .modifiers-toggle .mod-arrow[b-719aae8r8e] {
    color: #6b7280;
}

html[data-theme="dark"] .modifiers-list[b-719aae8r8e] {
    background: #1f2937;
    border-color: #4b5563;
}

html[data-theme="dark"] .modifier-item[b-719aae8r8e] {
    border-color: #374151;
}

html[data-theme="dark"] .modifier-name[b-719aae8r8e] {
    color: #e5e7eb;
}

html[data-theme="dark"] .modifier-price[b-719aae8r8e] {
    color: #4ade80;
}

/* ========================================
   ALWAYS-VISIBLE SELECTED MODIFIERS
   ======================================== */
.selected-modifiers-list[b-719aae8r8e] {
    margin-top: 4px;
    padding-left: 8px;
    border-left: 2px solid #d1d5db;
    margin-left: 4px;
}

.selected-modifier-row[b-719aae8r8e] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
    font-size: 0.8rem;
    color: #6b7280;
}

.selected-modifier-bullet[b-719aae8r8e] {
    color: #9ca3af;
    font-size: 0.75rem;
}

.selected-modifier-name[b-719aae8r8e] {
    color: #4b5563;
    font-weight: 500;
    font-style: italic;
}

.selected-modifier-price[b-719aae8r8e] {
    margin-left: auto;
    color: #16a34a;
    font-weight: 600;
    font-size: 0.75rem;
}

/* Dark theme - Always-visible modifiers */
html[data-theme="dark"] .selected-modifiers-list[b-719aae8r8e] {
    border-left-color: #4b5563;
}

html[data-theme="dark"] .selected-modifier-row[b-719aae8r8e] {
    color: #9ca3af;
}

html[data-theme="dark"] .selected-modifier-bullet[b-719aae8r8e] {
    color: #6b7280;
}

html[data-theme="dark"] .selected-modifier-name[b-719aae8r8e] {
    color: #d1d5db;
}

html[data-theme="dark"] .selected-modifier-price[b-719aae8r8e] {
    color: #4ade80;
}

/* ========================================
   MENU DEL DÍA INDICATOR & HINT
   ======================================== */
.menu-dia-badge[b-719aae8r8e] {
    flex-shrink: 0;
    font-size: 0.85rem;
    margin-left: 4px;
}

.menu-dia-hint[b-719aae8r8e] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin: 4px 0 4px 20px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    font-size: 0.8rem;
}

.menu-dia-structure[b-719aae8r8e] {
    font-weight: 700;
    color: #1e40af;
    letter-spacing: 0.02em;
}

.menu-dia-cta[b-719aae8r8e] {
    color: #3b82f6;
    font-weight: 500;
    font-style: italic;
}

/* Dark theme - Menu del Día */
html[data-theme="dark"] .menu-dia-hint[b-719aae8r8e] {
    background: linear-gradient(135deg, #1e3a5f, #1e40af);
    border-color: #3b82f6;
}

html[data-theme="dark"] .menu-dia-structure[b-719aae8r8e] {
    color: #93c5fd;
}

html[data-theme="dark"] .menu-dia-cta[b-719aae8r8e] {
    color: #60a5fa;
}

/* ========================================
   LINE EXTRAS (Modifiers section below item name)
   ======================================== */
.line-extras[b-719aae8r8e] {
    padding: 4px 0 4px 20px;
    margin-top: -4px;
}

.edit-modifiers-btn[b-719aae8r8e] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 4px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #f9fafb;
    color: #4b5563;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.edit-modifiers-btn:hover[b-719aae8r8e] {
    background: #e5e7eb;
    border-color: #9ca3af;
    color: #1f2937;
}

/* Dark theme - Edit modifiers button */
html[data-theme="dark"] .edit-modifiers-btn[b-719aae8r8e] {
    background: #374151;
    border-color: #4b5563;
    color: #d1d5db;
}

html[data-theme="dark"] .edit-modifiers-btn:hover[b-719aae8r8e] {
    background: #4b5563;
    border-color: #6b7280;
    color: #f9fafb;
}

/* ========================================
   EMPTY BASKET STATE
   ======================================== */
.empty-basket-state[b-719aae8r8e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    animation: fadeIn-b-719aae8r8e 0.3s ease;
}

@keyframes fadeIn-b-719aae8r8e {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.empty-basket-icon[b-719aae8r8e] {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.6;
}

.empty-basket-title[b-719aae8r8e] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink, #1f2937);
    margin-bottom: 8px;
}

.empty-basket-hint[b-719aae8r8e] {
    font-size: 0.9rem;
    color: var(--muted, #6b7280);
    margin-bottom: 16px;
}

/* First-run primary action. The rich onboarding card lives in the products
   panel, which is off-screen on a phone, so on first run this is the only
   "create your menu" action the operator can actually see — it must read as
   the primary CTA, not a quiet link. Matches the app's purple primary
   gradient (btn-kitchen / setup-step-action). */
.empty-basket-cta[b-719aae8r8e] {
    margin-top: 4px;
    padding: 12px 24px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #7c5cff 0%, #9333ea 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 48px; /* gloved tap target */
    box-shadow: 0 6px 16px -5px rgba(124, 92, 255, 0.6);
    transition: filter 0.15s ease, transform 0.06s ease;
}

.empty-basket-cta:hover[b-719aae8r8e] { filter: brightness(1.08); }
.empty-basket-cta:active[b-719aae8r8e] { transform: translateY(1px); }

.empty-basket-shortcut[b-719aae8r8e] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--muted, #6b7280);
}

.empty-basket-shortcut .kbd[b-719aae8r8e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Dark theme */
html[data-theme="dark"] .empty-basket-title[b-719aae8r8e] {
    color: #f3f4f6;
}

html[data-theme="dark"] .empty-basket-hint[b-719aae8r8e] {
    color: #9ca3af;
}

html[data-theme="dark"] .empty-basket-shortcut[b-719aae8r8e] {
    color: #9ca3af;
}

html[data-theme="dark"] .empty-basket-shortcut .kbd[b-719aae8r8e] {
    background: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}

/* ========================================
   DISCOUNT INDICATORS
   ======================================== */
.discount-badge[b-719aae8r8e] {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    background: linear-gradient(135deg, #059669, #10b981);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 6px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow: 0 1px 2px rgba(5, 150, 105, 0.3);
}

/* Discounted line total - stack prices vertically */
.line-total.discounted[b-719aae8r8e] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    line-height: 1.1;
}

.line-total.discounted .original-price[b-719aae8r8e] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #9ca3af;
    text-decoration: line-through;
}

.line-total.discounted > span:last-child[b-719aae8r8e] {
    color: #059669;
    font-weight: 900;
}

/* Dark theme - Discount indicators */
html[data-theme="dark"] .discount-badge[b-719aae8r8e] {
    background: linear-gradient(135deg, #065f46, #047857);
    box-shadow: 0 1px 2px rgba(16, 185, 129, 0.3);
}

html[data-theme="dark"] .line-total.discounted .original-price[b-719aae8r8e] {
    color: #6b7280;
}

html[data-theme="dark"] .line-total.discounted > span:last-child[b-719aae8r8e] {
    color: #10b981;
}

/* ========================================
   RESPONSIVE - Smaller screens (1024x768 and below)
   ======================================== */
@media (max-width: 1100px), (max-height: 800px) {
    .basket-item[b-719aae8r8e] {
        padding: 8px 6px;
        gap: 6px;
    }

    .basket-item .line-head[b-719aae8r8e] {
        gap: 6px;
    }

    .basket-item .line-head .info .name .name-text[b-719aae8r8e] {
        font-size: 1rem;
    }

    .basket-item .line-head .course-pill[b-719aae8r8e] {
        padding: 3px 6px;
        font-size: 0.7rem;
    }

    .basket-item .line-total[b-719aae8r8e] {
        font-size: 1rem;
        min-width: 65px;
    }

    .basket-item .line-actions[b-719aae8r8e] {
        gap: 6px;
    }


    .qty-group[b-719aae8r8e] {
        gap: 2px;
    }

    .qty-group .count[b-719aae8r8e] {
        min-width: 22px;
        font-size: 0.85rem;
    }

    .section-header[b-719aae8r8e] {
        padding: 8px 10px;
        font-size: 0.8rem;
    }

    .discount-badge[b-719aae8r8e] {
        padding: 1px 4px;
        font-size: 0.6rem;
    }

    .line-total.discounted .original-price[b-719aae8r8e] {
        font-size: 0.65rem;
    }
}

/* Phone: the empty-basket state sits in the bottom summary panel, which is
   capped at ~40vh on a phone (see Pos.razor.css). The desktop 48px vertical
   padding + 3rem icon makes the block taller than that panel, so the hint
   line ends up scrolled under the fixed "ENVIAR A COCINA" bar and reads as
   clipped on first run. Compact it so the whole message fits above the bar
   without scrolling, and drop the "/" keyboard-search hint — there is no
   "/" key on a touch phone, so it's noise that only costs vertical space. */
@media (max-width: 600px) {
    .empty-basket-state[b-719aae8r8e] {
        padding: 18px 16px 22px;
    }

    .empty-basket-icon[b-719aae8r8e] {
        font-size: 2rem;
        margin-bottom: 8px;
    }

    .empty-basket-title[b-719aae8r8e] {
        font-size: 1rem;
        margin-bottom: 4px;
    }

    .empty-basket-hint[b-719aae8r8e] {
        font-size: 0.8rem;
        margin-bottom: 0;
    }

    .empty-basket-shortcut[b-719aae8r8e] {
        display: none;
    }
}

/* ========================================
   ONE ROW PER LINE (2026-10-12)
   The user: every line always showed note, delete, − 1 + and «Editar opciones» — 97 px a line,
   168 px with a size, three items on a laptop's screen. A line is now one row — quantity, name,
   course, price — with what it carries (options, changes, the kitchen note) in small type under
   the name. Its buttons open under the row you tap, one line at a time, at full touch size.
   ======================================== */
.basket-item[b-719aae8r8e] {
    gap: 6px;
    padding: 7px 8px 7px 8px;
}

.basket-item .line-head[b-719aae8r8e] {
    cursor: pointer;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    border-radius: 6px;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.basket-item .line-head:focus-visible[b-719aae8r8e] { box-shadow: 0 0 0 2px #60a5fa; }

.basket-item .line-qty[b-719aae8r8e] {
    flex: 0 0 auto;
    min-width: 28px;
    font-weight: 800;
    font-size: 1rem;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

.basket-item .line-head .info .line-sub[b-719aae8r8e] {
    margin-top: 2px;
    font-size: 0.82rem;
    line-height: 1.3;
    color: #6b7280;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.basket-item .line-sub-part + .line-sub-part[b-719aae8r8e]::before { content: " · "; color: #9ca3af; }
.basket-item .line-options[b-719aae8r8e] { font-style: italic; }
.basket-item .line-head .info .line-note[b-719aae8r8e] {
    margin-top: 2px;
    font-size: 0.82rem;
    line-height: 1.3;
    color: #b45309;
    font-weight: 700;
    white-space: normal;
    overflow-wrap: anywhere;   /* never clamped: the whole note shows, however long */
}

.basket-item .line-head .course-pill[b-719aae8r8e] {
    max-width: 96px;     /* «Curso», «1º»… never the row (see the course-* classes) */
    width: auto;
    margin-left: 0;
    min-width: 44px;
    min-height: 44px;
    padding: 4px 8px;
}

.basket-item.is-open[b-719aae8r8e] {
    border-color: #60a5fa;
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.35);
}

.basket-item .line-actions[b-719aae8r8e] {
    gap: 10px;
    padding: 2px 0 0;
    flex-wrap: wrap;      /* a narrow basket (40 % layout, phone) wraps the row instead of cutting «Opciones» */
    row-gap: 8px;
}
.basket-item .line-actions .edit-modifiers-btn[b-719aae8r8e] {
    margin: 0 auto 0 0;
    min-height: 44px;
    white-space: nowrap;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 0.85rem;
}

html[data-theme="dark"] .basket-item .line-qty[b-719aae8r8e] { color: #9ca3af; }
html[data-theme="dark"] .basket-item .line-head .info .line-sub[b-719aae8r8e] { color: #9ca3af; }
html[data-theme="dark"] .basket-item .line-sub-part + .line-sub-part[b-719aae8r8e]::before { color: #6b7280; }
html[data-theme="dark"] .basket-item .line-head .info .line-note[b-719aae8r8e] { color: #fbbf24; }
html[data-theme="dark"] .basket-item.is-open[b-719aae8r8e] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.45);
}

/* ========================================
   SECTION BARS (2026-10-12)
   NUEVOS / ENVIADOS were 52 px bars of saturated brown and green — the loudest thing in the
   basket (the user). Now a slim bar: the colour on a dot and the left edge only.
   ======================================== */
.section-header[b-719aae8r8e],
html[data-theme="dark"] .section-header[b-719aae8r8e] {
    padding: 5px 10px;
    min-height: 34px;
    margin: 10px 0 6px;
    gap: 8px;
    border-radius: 8px;
    box-shadow: none;
    font-size: 0.8rem;
}
.section-header:first-child[b-719aae8r8e] { margin-top: 0; }
.section-dot[b-719aae8r8e] { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: #94a3b8; }
.section-new .section-dot[b-719aae8r8e] { background: #f59e0b; }
.section-preparing .section-dot[b-719aae8r8e] { background: #3b82f6; }
.section-sent .section-dot[b-719aae8r8e] { background: #22c55e; }
.section-ready .section-dot[b-719aae8r8e] { background: #10b981; }
.section-delivered .section-dot[b-719aae8r8e] { background: #94a3b8; }
.section-header .section-title[b-719aae8r8e] { font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; }
.section-header .section-count[b-719aae8r8e] { font-size: 0.76rem; font-weight: 600; }
.section-header .section-total[b-719aae8r8e] { font-size: 0.92rem; font-weight: 800; }
.section-header .collapse-icon[b-719aae8r8e] { font-size: 0.7rem; opacity: 0.6; }

html[data-theme="dark"] .section-header[b-719aae8r8e],
html[data-theme="dark"] .section-header.section-new[b-719aae8r8e],
html[data-theme="dark"] .section-header.section-sent[b-719aae8r8e],
html[data-theme="dark"] .section-header.section-preparing[b-719aae8r8e] {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-left: 3px solid #64748b;
}
html[data-theme="dark"] .section-header:hover[b-719aae8r8e] { background: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .section-header.section-new[b-719aae8r8e] { border-left-color: #f59e0b; }
html[data-theme="dark"] .section-header.section-preparing[b-719aae8r8e] { border-left-color: #3b82f6; }
html[data-theme="dark"] .section-header.section-sent[b-719aae8r8e] { border-left-color: #22c55e; }
html[data-theme="dark"] .section-header.section-ready[b-719aae8r8e] { border-left-color: #10b981; }

/* «Curso» among the open line's buttons (no course set yet) */
.basket-item .line-actions .course-action[b-719aae8r8e] {
    min-height: 44px;
    min-width: 64px;
    border-radius: 10px;
    padding: 0 12px;
    font-size: 0.82rem;
    font-weight: 700;
    border: 1px dashed #d1d5db;
    background: #f8fafc;
    cursor: pointer;
}
html[data-theme="dark"] .basket-item .line-actions .course-action[b-719aae8r8e] {
    background: #374151;
    border-color: #4b5563;
    color: #cbd5e1;
}

/* /Pages/Shared/Components/BuffetActiveBanner.razor.rz.scp.css */
.ba-banner[b-7185l3ylyq] {
    /* Sized to sit alongside the function tabs (Eats/Espera/Reservas)
       inside TableSlidePanel's edge-tabs--functions row. Tighter
       padding than the original standalone banner so it visually
       balances with the tab pills. */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin: 0;
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.25);
    transition: transform 0.1s, box-shadow 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.ba-banner:hover[b-7185l3ylyq] {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(239, 68, 68, 0.35);
    color: #fff;
}

.ba-icon[b-7185l3ylyq] {
    font-size: 1rem;
    line-height: 1;
}

.ba-text strong[b-7185l3ylyq] {
    font-weight: 800;
}

.ba-warn[b-7185l3ylyq] {
    margin-left: 4px;
    color: #fef9c3;
    font-weight: 700;
}

.ba-cta[b-7185l3ylyq] {
    background: rgba(255, 255, 255, 0.2);
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ===== Overlay (click "Ver" to expand the table list) ===== */
.ba-overlay-bg[b-7185l3ylyq] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 900;
    padding: 60px 16px 16px;
    color-scheme: dark;
    animation: ba-bg-in-b-7185l3ylyq 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes ba-bg-in-b-7185l3ylyq {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ba-overlay[b-7185l3ylyq] {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 16px;
    color: #f1f5f9;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    animation: ba-overlay-in-b-7185l3ylyq 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes ba-overlay-in-b-7185l3ylyq {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ba-overlay-head[b-7185l3ylyq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ba-overlay-head h3[b-7185l3ylyq] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    background: linear-gradient(135deg, #fde047 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.ba-overlay-close[b-7185l3ylyq] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.ba-overlay-close:hover[b-7185l3ylyq] {
    background: rgba(255, 255, 255, 0.12);
    color: #f1f5f9;
}

.ba-overlay-list[b-7185l3ylyq] {
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.ba-row[b-7185l3ylyq] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "main  arrow"
        "meta  arrow";
    align-items: center;
    gap: 6px 12px;
    padding: 12px 14px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    color: #f1f5f9;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
    font-family: inherit;
}

.ba-row:hover[b-7185l3ylyq] {
    border-color: rgba(245, 158, 11, 0.5);
    background: rgba(30, 41, 59, 0.8);
    transform: translateX(2px);
}

.ba-row.awaiting[b-7185l3ylyq] {
    border-color: rgba(251, 191, 36, 0.5);
    background: linear-gradient(135deg, rgba(120, 53, 15, 0.4) 0%, rgba(15, 23, 42, 0.6) 100%);
}

.ba-row.last-call[b-7185l3ylyq] {
    border-color: rgba(239, 68, 68, 0.55);
    background: linear-gradient(135deg, rgba(127, 29, 29, 0.4) 0%, rgba(15, 23, 42, 0.6) 100%);
    animation: ba-row-pulse-b-7185l3ylyq 1.6s ease-in-out infinite;
}

@keyframes ba-row-pulse-b-7185l3ylyq {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.0); }
    50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18); }
}

.ba-row.cooldown[b-7185l3ylyq] {
    border-color: rgba(56, 189, 248, 0.4);
}

.ba-row-main[b-7185l3ylyq] {
    grid-area: main;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.ba-row-table[b-7185l3ylyq] {
    font-size: 1.05rem;
    font-weight: 800;
}

.ba-row-status[b-7185l3ylyq] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: #94a3b8;
}

.ba-row.awaiting .ba-row-status[b-7185l3ylyq] { color: #fbbf24; }
.ba-row.last-call .ba-row-status[b-7185l3ylyq] { color: #fca5a5; }
.ba-row.cooldown .ba-row-status[b-7185l3ylyq] { color: #7dd3fc; }
.ba-row.active .ba-row-status[b-7185l3ylyq] { color: #6ee7b7; }

.ba-row-meta[b-7185l3ylyq] {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    font-size: 0.78rem;
    align-items: center;
}

.ba-row-pill[b-7185l3ylyq] {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    font-weight: 600;
}

.ba-row-pill.round[b-7185l3ylyq] {
    background: linear-gradient(90deg, #f59e0b, #ef4444);
    color: #fff;
    font-weight: 700;
}

.ba-row-time[b-7185l3ylyq] {
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    margin-left: 2px;
}

.ba-row-time.warn[b-7185l3ylyq] {
    color: #fca5a5;
    font-weight: 700;
}

.ba-row-arrow[b-7185l3ylyq] {
    grid-area: arrow;
    color: #f59e0b;
    font-size: 1.1rem;
    font-weight: 700;
    align-self: center;
}

.ba-overlay-footer[b-7185l3ylyq] {
    padding: 10px 16px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: flex-end;
}

.ba-overlay-link[b-7185l3ylyq] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.ba-overlay-link:hover[b-7185l3ylyq] {
    border-color: rgba(245, 158, 11, 0.5);
    color: #f59e0b;
}

/* Paused-state banner — same shape as .ba-banner but red-tinted so POS
   staff see at a glance that new rounds are blocked. Click triggers
   the immediate Resume. Pulses gently to draw attention without being
   alarming. */
.ba-banner-paused[b-7185l3ylyq] {
    background: linear-gradient(90deg, rgba(220, 38, 38, 0.18), rgba(220, 38, 38, 0.08));
    border-color: rgba(220, 38, 38, 0.55) !important;
    color: #fee2e2;
    animation: ba-pause-pulse-b-7185l3ylyq 2.2s ease-in-out infinite;
}
.ba-banner-paused .ba-warn[b-7185l3ylyq] { color: #fca5a5; }
.ba-banner-paused:hover[b-7185l3ylyq] { background: linear-gradient(90deg, rgba(220, 38, 38, 0.28), rgba(220, 38, 38, 0.12)); }
.ba-banner-paused .ba-cta[b-7185l3ylyq] {
    background: #fff;
    color: #b91c1c;
    border-color: #fff;
    font-weight: 700;
}
@keyframes ba-pause-pulse-b-7185l3ylyq {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); }
    50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

/* Pause action row in the overlay footer — 4 duration presets for when
   cocina says "please stop new rounds for 10 min". Compact pills that
   sit above the existing kiosk link. */
.ba-pause-row[b-7185l3ylyq] {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-right: auto;
}
.ba-pause-label[b-7185l3ylyq] {
    font-size: 0.78rem;
    color: #94a3b8;
    margin-right: 4px;
}
.ba-pause-btn[b-7185l3ylyq] {
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(220, 38, 38, 0.4);
    color: #fee2e2;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.ba-pause-btn:hover[b-7185l3ylyq] { background: rgba(220, 38, 38, 0.22); }
.ba-pause-btn:disabled[b-7185l3ylyq] { opacity: 0.55; cursor: not-allowed; }
.ba-overlay-footer[b-7185l3ylyq] { flex-wrap: wrap; gap: 12px; }
/* /Pages/Shared/Components/BuffetCountdown.razor.rz.scp.css */
.bc-wrap[b-pv61j15ihb] {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 24px auto;
}

.bc-ring[b-pv61j15ihb] {
    width: 100%;
    height: 100%;
}

.bc-track[b-pv61j15ihb] {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 12;
}

.bc-progress[b-pv61j15ihb] {
    fill: none;
    stroke: url(#bcGrad);
    stroke: #f59e0b;
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.95s linear;
    filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.6));
}

.bc-label[b-pv61j15ihb] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}

.bc-time[b-pv61j15ihb] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

.bc-sub[b-pv61j15ihb] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 4px;
    max-width: 140px;
}

.bc-ready[b-pv61j15ihb] {
    font-size: 1.6rem;
    font-weight: 700;
    color: #34d399;
    animation: bc-pulse-b-pv61j15ihb 1.4s ease-in-out infinite;
}

@keyframes bc-pulse-b-pv61j15ihb {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
/* /Pages/Shared/Components/BuffetOrderHeader.razor.rz.scp.css */
.buf-order-header[b-j5hxq5xplo] {
    margin: 8px 12px 12px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #1c1610 0%, #422006 100%);
    border: 1px solid #f59e0b;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

.buf-order-header.awaiting[b-j5hxq5xplo] {
    border-color: #fbbf24;
    background: linear-gradient(135deg, #422006 0%, #78350f 100%);
    animation: buf-oh-pulse-b-j5hxq5xplo 2s ease-in-out infinite;
}

.buf-order-header.lastcall[b-j5hxq5xplo] {
    border-color: #ef4444;
    background: linear-gradient(135deg, #1c1610 0%, #7f1d1d 100%);
    animation: buf-oh-pulse-b-j5hxq5xplo 1.2s ease-in-out infinite;
}

.buf-order-header.closed[b-j5hxq5xplo],
.buf-order-header.expired[b-j5hxq5xplo] {
    opacity: 0.6;
    border-color: #475569;
    background: #1e293b;
}

@keyframes buf-oh-pulse-b-j5hxq5xplo {
    0%, 100% { box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15); }
    50% { box-shadow: 0 4px 18px rgba(245, 158, 11, 0.40); }
}

.buf-row[b-j5hxq5xplo] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.buf-row.main[b-j5hxq5xplo] {
    font-size: 0.82rem;
}

.buf-row.meta[b-j5hxq5xplo] {
    font-size: 0.78rem;
    color: #cbd5e1;
}

.buf-pill[b-j5hxq5xplo] {
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.4);
    color: #f1f5f9;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.buf-pill.round[b-j5hxq5xplo] {
    background: linear-gradient(90deg, #f59e0b, #ef4444);
    color: #fff;
}

.buf-pill.items[b-j5hxq5xplo],
.buf-pill.guests[b-j5hxq5xplo] {
    background: rgba(255, 255, 255, 0.08);
    font-weight: 600;
}

.buf-pill.status.active[b-j5hxq5xplo] {
    background: #064e3b;
    color: #d1fae5;
}

.buf-pill.status.cooldown[b-j5hxq5xplo] {
    background: #082f49;
    color: #bae6fd;
}

.buf-pill.status.awaiting[b-j5hxq5xplo] {
    background: #78350f;
    color: #fef9c3;
}

.buf-pill.status.lastcall[b-j5hxq5xplo] {
    background: #7f1d1d;
    color: #fecaca;
}

.buf-pill.status.closed[b-j5hxq5xplo],
.buf-pill.status.expired[b-j5hxq5xplo] {
    background: #1f2937;
    color: #94a3b8;
}

.buf-meta.awaiting[b-j5hxq5xplo] {
    color: #fbbf24;
    font-weight: 700;
}

/* Allergy banner inside the BuffetOrderHeader — high-visibility so
   waiters and runners never miss it when checking the order panel. */
.buf-allergy[b-j5hxq5xplo] {
    margin-top: 6px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(239, 68, 68, 0.12));
    border: 1px solid rgba(245, 158, 11, 0.55);
    border-radius: 8px;
    color: #fcd34d;
    font-size: 0.85rem;
    line-height: 1.35;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.18);
}

.buf-allergy strong[b-j5hxq5xplo] {
    color: #fde047;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin-right: 4px;
}

.buf-actions[b-j5hxq5xplo] {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.buf-btn[b-j5hxq5xplo] {
    padding: 6px 12px;
    border-radius: 8px;
    border: none;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.15s, opacity 0.15s;
}

.buf-btn:disabled[b-j5hxq5xplo] {
    opacity: 0.6;
    cursor: not-allowed;
}

.buf-btn.confirm[b-j5hxq5xplo] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    flex: 1;
}

.buf-btn.confirm:hover:not(:disabled)[b-j5hxq5xplo] {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(16, 185, 129, 0.35);
}

.buf-btn.skip[b-j5hxq5xplo] {
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
}

.buf-btn.skip:hover:not(:disabled)[b-j5hxq5xplo] {
    background: rgba(255, 255, 255, 0.14);
    color: #f1f5f9;
}

.buf-btn.secondary[b-j5hxq5xplo] {
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.buf-btn.secondary:hover:not(:disabled)[b-j5hxq5xplo] {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.5);
    transform: translateY(-1px);
}

/* ===== Modal (guests + waste editors) ===== */
/* Prefixed `bohp-` (BuffetOrderHeader Panel) so the styles never collide
   with BuffetKiosk's `bk-modal-*` rules — Blazor scoped CSS isn't
   bulletproof when ::deep selectors leak. */
.bohp-modal-bg[b-j5hxq5xplo] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
    color-scheme: dark;
}

.bohp-modal[b-j5hxq5xplo] {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 16px;
    padding: 24px;
    color: #f1f5f9;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    animation: bohp-modal-in-b-j5hxq5xplo 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.bohp-modal.bohp-wide[b-j5hxq5xplo] {
    max-width: 520px;
}

@keyframes bohp-modal-in-b-j5hxq5xplo {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.bohp-modal h3[b-j5hxq5xplo] {
    margin: 0 0 4px;
    font-size: 1.2rem;
    background: linear-gradient(135deg, #fde047 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.bohp-modal .muted[b-j5hxq5xplo] {
    color: #94a3b8;
    font-size: 0.85rem;
    margin: 0 0 16px;
}

.bohp-field[b-j5hxq5xplo] {
    margin-bottom: 14px;
}

.bohp-field label[b-j5hxq5xplo] {
    display: block;
    font-size: 0.85rem;
    color: #cbd5e1;
    font-weight: 600;
    margin-bottom: 6px;
}

.bohp-field.stacked[b-j5hxq5xplo] {
    display: flex;
    flex-direction: column;
}

.bohp-field.stacked > span[b-j5hxq5xplo] {
    font-size: 0.85rem;
    color: #cbd5e1;
    font-weight: 600;
    margin-bottom: 6px;
}

.bohp-field input[type="text"][b-j5hxq5xplo],
.bohp-field input[type="number"][b-j5hxq5xplo],
.bohp-field textarea[b-j5hxq5xplo] {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #f1f5f9;
    padding: 9px 11px;
    font-size: 0.95rem;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}

.bohp-field input:focus[b-j5hxq5xplo],
.bohp-field textarea:focus[b-j5hxq5xplo] {
    outline: none;
    border-color: rgba(245, 158, 11, 0.6);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.bohp-grid[b-j5hxq5xplo] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.bohp-pick[b-j5hxq5xplo] {
    padding: 12px 0;
    background: rgba(15, 23, 42, 0.8);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #f1f5f9;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}

.bohp-pick:hover:not(:disabled)[b-j5hxq5xplo] {
    border-color: rgba(245, 158, 11, 0.5);
    transform: translateY(-1px);
}

.bohp-pick:disabled[b-j5hxq5xplo] {
    opacity: 0.3;
    cursor: not-allowed;
}

.bohp-pick.selected[b-j5hxq5xplo] {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.35);
}

.bohp-error[b-j5hxq5xplo] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    margin: 12px 0;
}

.bohp-hint[b-j5hxq5xplo] {
    display: block;
    font-size: 0.78rem;
    color: #94a3b8;
    margin-top: 4px;
}

.bohp-footer[b-j5hxq5xplo] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 18px;
}

.bohp-footer .buf-btn[b-j5hxq5xplo] {
    padding: 9px 18px;
    font-size: 0.9rem;
}
/* /Pages/Shared/Components/CierreResumenChips.razor.rz.scp.css */
/* The till close's summary chips (moved out of Pos.razor.css with the component). One line that
   scrolls sideways if it must — never a second line pushing the count down. */
.arq-kpis[b-cm052yzars] { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; flex: 0 0 auto; }
.arq-kpi[b-cm052yzars] { flex: 0 0 auto; display: flex; align-items: baseline; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #0f172a; border: 1px solid #1e293b; font-size: .8rem; color: #94a3b8; white-space: nowrap; }
.arq-kpi b[b-cm052yzars] { color: #e2e8f0; font-variant-numeric: tabular-nums; }
.arq-kpi-since[b-cm052yzars] { color: #64748b; }
/* /Pages/Shared/Components/DealsRow.razor.rz.scp.css */
/* One row: the label, then the deals, scrolling sideways. The till is dark-only. */
.deals-row[b-4tgqw7h94i] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 8px 10px;
    padding: 6px;
    min-width: 0;
    flex-shrink: 0;
    border-radius: 14px;
    background: rgba(16, 185, 129, 0.07);
    border: 1px solid rgba(16, 185, 129, 0.22);
}
.deals-row.is-collapsed[b-4tgqw7h94i] { align-self: flex-start; }

.deals-label[b-4tgqw7h94i] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 0 10px 0 10px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #6ee7b7;
    font: inherit;
    font-weight: 800;
    font-size: 0.86rem;
    letter-spacing: .01em;
    cursor: pointer;
    white-space: nowrap;
}
.deals-label:hover[b-4tgqw7h94i] { background: rgba(16, 185, 129, 0.12); }
.deals-label:focus-visible[b-4tgqw7h94i] { outline: 2px solid #34d399; outline-offset: 1px; }

.deals-ico[b-4tgqw7h94i], .deals-chev[b-4tgqw7h94i] {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}
.deals-chev[b-4tgqw7h94i] { width: 15px; height: 15px; opacity: .75; }

.deals-count[b-4tgqw7h94i] {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: rgba(16, 185, 129, 0.2);
    color: #a7f3d0;
    font-size: 0.72rem;
    font-weight: 800;
}

.deals-scroll[b-4tgqw7h94i] {
    display: flex;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.deals-scroll[b-4tgqw7h94i]::-webkit-scrollbar { display: none; }

.deals-pill[b-4tgqw7h94i] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    max-width: 340px;
    padding: 0 14px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.06);
    color: #f1f5f9;
    font: inherit;
    cursor: pointer;
    text-align: left;
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.deals-pill:hover[b-4tgqw7h94i] { background: rgba(255, 255, 255, 0.10); border-color: rgba(52, 211, 153, 0.45); }
.deals-pill:active[b-4tgqw7h94i] { transform: scale(0.98); }
.deals-pill:focus-visible[b-4tgqw7h94i] { outline: 2px solid #34d399; outline-offset: 1px; }

.deals-name[b-4tgqw7h94i] { font-weight: 800; font-size: 0.9rem; white-space: nowrap; }
.deals-detail[b-4tgqw7h94i] {
    font-size: 0.76rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.deals-price[b-4tgqw7h94i] { font-weight: 800; font-size: 0.9rem; color: #6ee7b7; white-space: nowrap; margin-left: auto; }
/* /Pages/Shared/Components/DeliveryDispatchPanel.razor.rz.scp.css */
/* Mesero Drivers dispatch board — premium, theme-aware styling.
   Scoped to the component; dark overrides hang off html[data-theme="dark"]
   (the app's theme switch). All colours come from --dd-* custom properties so
   light/dark is a single token swap. Replaces the old inline styles. */

.dd-root[b-p9ly5fxso3] {
    --dd-card: #ffffff;
    --dd-bg: #f9fafb;
    --dd-border: #e5e7eb;
    --dd-text: #1f2937;
    --dd-muted: #6b7280;
    --dd-input-bg: #ffffff;
    --dd-input-border: #d1d5db;
    --dd-primary: #1f6feb;
    --dd-success: var(--adm-bg-1f8b3a);
    --dd-danger: var(--adm-bg-b42318);
    --dd-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);

    display: flex;
    gap: 18px;
    align-items: flex-start;
    flex-wrap: wrap;
    color: var(--dd-text);
}

html[data-theme="dark"] .dd-root[b-p9ly5fxso3] {
    --dd-card: var(--adm-bg-1e293b);
    --dd-bg: var(--adm-bg-0f172a);
    --dd-border: var(--adm-bd-334155);
    --dd-text: var(--adm-fg-e2e8f0);
    --dd-muted: var(--adm-fg-94a3b8);
    --dd-input-bg: var(--adm-bg-0f172a);
    --dd-input-border: var(--adm-bd-334155);
    --dd-primary: var(--adm-bd-3b82f6);
    --dd-shadow: 0 1px 2px var(--adm-sh-000000-a0_45);
}

.dd-col-left[b-p9ly5fxso3] { flex: 1 1 320px; min-width: 280px; }
.dd-col-right[b-p9ly5fxso3] { flex: 2 1 440px; min-width: 320px; }

/* error banner */
.dd-error[b-p9ly5fxso3] {
    background: #fdecea; border: 1px solid #f5c2c0; color: #a12a23;
    padding: 10px 12px; border-radius: 8px; margin-bottom: 12px; font-size: 14px;
}
html[data-theme="dark"] .dd-error[b-p9ly5fxso3] { background: #3b1413; border-color: #7f1d1d; color: #fca5a5; }

/* publish bar */
.dd-publish[b-p9ly5fxso3] {
    display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
    margin-bottom: 16px; padding: 14px; background: var(--dd-bg);
    border: 1px solid var(--dd-border); border-radius: 12px;
}
.dd-field[b-p9ly5fxso3] { display: flex; flex-direction: column; gap: 4px; }
.dd-label[b-p9ly5fxso3] { font-size: 12px; font-weight: 600; color: var(--dd-muted); }
.dd-input[b-p9ly5fxso3] {
    padding: 9px 10px; font-size: 14px; color: var(--dd-text);
    background: var(--dd-input-bg); border: 1px solid var(--dd-input-border);
    border-radius: 8px; min-height: 40px; box-sizing: border-box;
}
.dd-input[b-p9ly5fxso3]::placeholder { color: var(--dd-muted); }
.dd-input:focus[b-p9ly5fxso3] { outline: none; border-color: var(--dd-primary); box-shadow: 0 0 0 3px var(--adm-sh-3b82f6-a0_18); }
.dd-input--order[b-p9ly5fxso3] { width: 130px; }
.dd-input--win[b-p9ly5fxso3] { width: 96px; }

/* buttons */
.dd-btn[b-p9ly5fxso3] {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 14px; min-height: 40px; font-size: 14px; font-weight: 600;
    border: 1px solid transparent; border-radius: 8px; cursor: pointer;
    transition: filter .12s ease, box-shadow .12s ease;
}
.dd-btn:disabled[b-p9ly5fxso3] { opacity: .55; cursor: not-allowed; }
.dd-btn:not(:disabled):hover[b-p9ly5fxso3] { filter: brightness(.95); }
.dd-btn--primary[b-p9ly5fxso3] { background: var(--dd-primary); color: #fff; }
.dd-btn--success[b-p9ly5fxso3] { background: var(--dd-success); color: #fff; }
.dd-btn--danger[b-p9ly5fxso3] { background: var(--dd-danger); color: #fff; }
.dd-btn--ghost[b-p9ly5fxso3] { background: var(--dd-card); color: var(--dd-text); border-color: var(--dd-input-border); }
.dd-btn--sm[b-p9ly5fxso3] { padding: 6px 12px; min-height: 34px; font-size: 13px; }

/* headings / text */
.dd-h[b-p9ly5fxso3] { font-size: 14px; font-weight: 700; margin: 16px 0 8px; color: var(--dd-text); }
.dd-muted[b-p9ly5fxso3] { color: var(--dd-muted); font-size: 14px; }
.dd-hint[b-p9ly5fxso3] { font-size: 11px; color: var(--dd-muted); margin: 6px 0 0; }

/* job list */
.dd-joblist[b-p9ly5fxso3] { display: flex; flex-direction: column; gap: 8px; }
.dd-jobcard[b-p9ly5fxso3] {
    text-align: left; width: 100%; padding: 12px 14px; cursor: pointer;
    background: var(--dd-card); border: 1px solid var(--dd-border);
    border-radius: 10px; box-shadow: var(--dd-shadow);
    transition: border-color .12s, box-shadow .12s; color: var(--dd-text);
}
.dd-jobcard:hover[b-p9ly5fxso3] { border-color: var(--dd-primary); }
.dd-jobcard.is-sel[b-p9ly5fxso3] { border-color: var(--dd-primary); box-shadow: 0 0 0 2px var(--adm-sh-3b82f6-a0_3); }
.dd-jobcard-top[b-p9ly5fxso3] { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dd-jobcard-title[b-p9ly5fxso3] { font-weight: 700; }
.dd-jobcard-sub[b-p9ly5fxso3] { font-size: 12px; color: var(--dd-muted); margin-top: 3px; }

/* detail card */
.dd-detail[b-p9ly5fxso3] {
    background: var(--dd-card); border: 1px solid var(--dd-border);
    border-radius: 14px; padding: 18px; box-shadow: var(--dd-shadow);
}
.dd-detail-head[b-p9ly5fxso3] { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.dd-detail-title[b-p9ly5fxso3] { margin: 0; font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.dd-fee[b-p9ly5fxso3] { font-size: 13px; color: var(--dd-muted); }
.dd-zones[b-p9ly5fxso3] { font-size: 12px; color: var(--dd-muted); margin-bottom: 8px; }
.dd-phone[b-p9ly5fxso3] { font-size: 13px; margin: 6px 0 10px; padding: 8px 10px; background: var(--dd-bg); border-radius: 8px; }

/* state badge */
.dd-badge[b-p9ly5fxso3] {
    font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
}
.dd-badge--draft[b-p9ly5fxso3] { background:#e5e7eb; color:#374151; }
.dd-badge--posted[b-p9ly5fxso3] { background:#dbeafe; color:#1e40af; }
.dd-badge--negotiating[b-p9ly5fxso3] { background:#fef3c7; color:#92400e; }
.dd-badge--hired[b-p9ly5fxso3] { background:#dcfce7; color:#166534; }
.dd-badge--enroutepickup[b-p9ly5fxso3] { background:#cffafe; color:#155e75; }
.dd-badge--pickedup[b-p9ly5fxso3] { background:#e0e7ff; color:#3730a3; }
.dd-badge--delivered[b-p9ly5fxso3] { background:#cffafe; color:#155e75; }
.dd-badge--settled[b-p9ly5fxso3] { background:#16a34a; color:#fff; }
.dd-badge--expired[b-p9ly5fxso3] { background:#f3f4f6; color:#6b7280; }
.dd-badge--canceled[b-p9ly5fxso3] { background:#fee2e2; color:#991b1b; }
.dd-badge--selfdelivery[b-p9ly5fxso3] { background:#ede9fe; color:#5b21b6; }
html[data-theme="dark"] .dd-badge--draft[b-p9ly5fxso3] { background:#334155; color:#cbd5e1; }
html[data-theme="dark"] .dd-badge--expired[b-p9ly5fxso3] { background:#1f2937; color:#94a3b8; }

/* bids table */
.dd-table[b-p9ly5fxso3] { width: 100%; border-collapse: collapse; font-size: 13px; }
.dd-table th[b-p9ly5fxso3] { text-align: left; color: var(--dd-muted); font-weight: 600; padding: 6px; border-bottom: 1px solid var(--dd-border); }
.dd-table td[b-p9ly5fxso3] { padding: 9px 6px; border-bottom: 1px solid var(--dd-border); vertical-align: middle; color: var(--dd-text); }
.dd-table tr:last-child td[b-p9ly5fxso3] { border-bottom: none; }
.dd-price[b-p9ly5fxso3] { font-weight: 700; }
.dd-bid-note[b-p9ly5fxso3] { color: var(--dd-muted); }
.dd-bidstate[b-p9ly5fxso3] { font-size: 12px; color: var(--dd-muted); }

/* message thread */
.dd-msgrow[b-p9ly5fxso3] { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.dd-select[b-p9ly5fxso3] {
    padding: 9px 10px; min-height: 40px; font-size: 14px; color: var(--dd-text);
    background: var(--dd-input-bg); border: 1px solid var(--dd-input-border);
    border-radius: 8px; min-width: 160px;
}
.dd-input--msg[b-p9ly5fxso3] { flex: 1 1 160px; min-width: 140px; }
.dd-input--amt[b-p9ly5fxso3] { width: 120px; }
.dd-thread[b-p9ly5fxso3] { margin-top: 10px; max-height: 150px; overflow: auto; border: 1px solid var(--dd-border); border-radius: 8px; padding: 10px; background: var(--dd-bg); }
.dd-msg[b-p9ly5fxso3] { font-size: 12px; margin-bottom: 5px; color: var(--dd-text); }

/* action row */
.dd-actions[b-p9ly5fxso3] { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; border-top: 1px solid var(--dd-border); padding-top: 14px; }

/* invoice grid */
.dd-invoice[b-p9ly5fxso3] { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }

/* terminal-state note */
.dd-closed[b-p9ly5fxso3] { margin-top: 14px; padding: 10px 12px; background: var(--dd-bg); border: 1px dashed var(--dd-border); border-radius: 8px; font-size: 13px; color: var(--dd-muted); }

@media (max-width: 560px) {
    .dd-input--order[b-p9ly5fxso3], .dd-input--win[b-p9ly5fxso3], .dd-input--amt[b-p9ly5fxso3] { width: 100%; }
    .dd-field[b-p9ly5fxso3] { flex: 1 1 100%; }
    .dd-select[b-p9ly5fxso3] { min-width: 0; flex: 1 1 100%; }
}
/* /Pages/Shared/Components/DispatchAlertBanner.razor.rz.scp.css */
/* Mesero Drivers dispatch alert — a premium, always-visible top bar in MainLayout's banner
   stack (in-flow, like GlobalAnnouncementBanner, so it pushes content rather than overlapping).
   Deep amber = "attention" (Eats scooter theme); the whole bar is one tap target. White text on
   a deep-amber gradient clears WCAG AA (≥4.5:1, matching the app's #b45309 warning tone). Inset
   top highlight + layered shadow for depth, a count badge that pulses a few times on appear then
   settles, a "Gestionar →" CTA chip that lifts on hover, and a smooth slide-in entrance. All
   motion respects prefers-reduced-motion. */

.dispatch-alert[b-hrfi4klbxp] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    border: 0;
    cursor: pointer;
    box-sizing: border-box;
    /* Clear the fixed hamburger toggle (44px at left:12, z-index 60) so it never covers the
       badge; the amber bg still spans full width beneath it. */
    padding: 9px clamp(12px, 3vw, 20px);
    padding-left: 64px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    text-align: left;
    background: linear-gradient(180deg, #b45309 0%, #92400e 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 10px rgba(120, 53, 15, .35);
    -webkit-tap-highlight-color: transparent;
    animation: da-enter-b-hrfi4klbxp .32s cubic-bezier(.22, 1, .36, 1);
}

.dispatch-alert:hover[b-hrfi4klbxp] { background: linear-gradient(180deg, #c2620a 0%, #a14a0c 100%); }
.dispatch-alert:active[b-hrfi4klbxp] { transform: translateY(.5px); }
.dispatch-alert:focus-visible[b-hrfi4klbxp] { outline: 2px solid #fff; outline-offset: -3px; }

/* deepen a touch more on the dark theme so it sits coherently on a dark page */
html[data-theme="dark"] .dispatch-alert[b-hrfi4klbxp] { background: linear-gradient(180deg, #a14a08 0%, #7c3a0a 100%); }

/* count badge — scooter + tally in a soft disc that pulses a few times on appear, then settles */
.da-badge[b-hrfi4klbxp] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 11px 3px 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .22);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
    animation: da-breathe-b-hrfi4klbxp 2.6s ease-in-out 4;
}

.da-emoji[b-hrfi4klbxp] { font-size: 15px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.da-count[b-hrfi4klbxp] { font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }

.da-text[b-hrfi4klbxp] {
    /* Don't grow — left-pack badge+text+CTA so the "Gestionar" chip never reaches the right edge,
       where the docked Mesas (TableSlidePanel) panel overlays the bar. */
    flex: 0 1 auto;
    min-width: 0;
    font-weight: 600;
    letter-spacing: .1px;
    text-shadow: 0 1px 1px rgba(60, 26, 5, .35);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* CTA chip — clearly tappable, lifts on hover, arrow nudges right */
.da-cta[b-hrfi4klbxp] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border-radius: 999px;
    background: #fff;
    color: #b45309;
    font-weight: 800;
    font-size: 13px;
    box-shadow: 0 1px 2px rgba(120, 53, 15, .25);
    transition: transform .12s ease, box-shadow .12s ease;
}

.dispatch-alert:hover .da-cta[b-hrfi4klbxp] { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(120, 53, 15, .3); }
.da-arrow[b-hrfi4klbxp] { transition: transform .18s ease; }
.dispatch-alert:hover .da-arrow[b-hrfi4klbxp] { transform: translateX(3px); }

@keyframes da-enter-b-hrfi4klbxp {
    from { opacity: 0; transform: translateY(-100%); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes da-breathe-b-hrfi4klbxp {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 0 0 0 rgba(255, 255, 255, 0); }
    50%      { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32), 0 0 0 4px rgba(255, 255, 255, .16); }
}

@media (max-width: 600px) {
    .dispatch-alert[b-hrfi4klbxp] { gap: 9px; padding: 8px 12px; font-size: 13px; }
    .da-cta[b-hrfi4klbxp] { padding: 4px 10px; font-size: 12px; }
}

/* ultra-narrow phones: drop the CTA chip so the badge + message always have room */
@media (max-width: 380px) {
    .da-cta[b-hrfi4klbxp] { display: none; }
}

/* Respect reduced-motion — keep the bar, drop the entrance / pulse / hover nudges. */
@media (prefers-reduced-motion: reduce) {
    .dispatch-alert[b-hrfi4klbxp], .da-badge[b-hrfi4klbxp] { animation: none; }
    .da-cta[b-hrfi4klbxp], .da-arrow[b-hrfi4klbxp] { transition: none; }
}
/* /Pages/Shared/Components/FirstSaleGuide.razor.rz.scp.css */
/* Scoped to FirstSaleGuide via Blazor CSS isolation — class names can't
   leak to other components, so no global-collision risk. Pure CSS file
   (single @ for media queries).

   Compact dismissible bottom TOAST (replaces the old full-width in-flow card
   that ate the product column). position:fixed resolves to the viewport since
   the component is mounted in the POS left-section, not the transformed
   .tablesbar. */

.fsg-toast[b-4faaapbdnt] {
    position: fixed;
    z-index: 1200;            /* above POS content, below blocking modals */
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    width: min(580px, calc(100vw - 24px));
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px 12px 16px;
    background: linear-gradient(135deg, #7c5cff 0%, #6366f1 100%);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 14px;
    color: #fff;
    box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .55);
    animation: fsg-rise-b-4faaapbdnt .28s ease;
}

@keyframes fsg-rise-b-4faaapbdnt {
    from { opacity: 0; transform: translate(-50%, 16px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

.fsg-emoji[b-4faaapbdnt] { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }

.fsg-text[b-4faaapbdnt] { flex: 1; min-width: 0; }
.fsg-title[b-4faaapbdnt] { font-size: .95rem; font-weight: 800; letter-spacing: -.01em; }

.fsg-steps[b-4faaapbdnt] {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px 14px;
}
.fsg-steps li[b-4faaapbdnt] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
    white-space: nowrap;
}
.fsg-num[b-4faaapbdnt] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    font-size: .72rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.fsg-cta[b-4faaapbdnt] {
    flex-shrink: 0;
    min-height: 40px;
    padding: 8px 16px;
    border: none;
    border-radius: 10px;
    background: #fff;
    color: #4f46e5;
    font-weight: 800;
    font-size: .9rem;
    cursor: pointer;
}
.fsg-cta:hover[b-4faaapbdnt] { filter: brightness(.96); }

.fsg-close[b-4faaapbdnt] {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, .85);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
}
.fsg-close:hover[b-4faaapbdnt] { background: rgba(255, 255, 255, .16); color: #fff; }

/* Phones: full-width bottom sheet, content stacks, 44px tap targets. */
@media (max-width: 640px) {
    .fsg-toast[b-4faaapbdnt] {
        left: 8px;
        right: 8px;
        bottom: 8px;
        width: auto;
        transform: none;
        flex-wrap: wrap;
        padding: 12px 12px 14px;
        animation: fsg-rise-m-b-4faaapbdnt .28s ease;
    }
    @keyframes fsg-rise-m-b-4faaapbdnt {
        from { opacity: 0; transform: translateY(16px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .fsg-emoji[b-4faaapbdnt] { align-self: flex-start; }
    .fsg-text[b-4faaapbdnt] { flex: 1 1 calc(100% - 46px); }
    .fsg-cta[b-4faaapbdnt] { flex: 1 1 auto; min-height: 44px; order: 3; }
    .fsg-close[b-4faaapbdnt] { position: absolute; top: 6px; right: 6px; }
}

/* The public demo: above its bottom bar and any install bar, whose room index.html reserves as --pwa-banner-h. */
.fsg-toast.fsg-above-demo-bar[b-4faaapbdnt] {
    bottom: calc(var(--pwa-banner-h, 68px) + 8px);
}
@media (max-width: 640px) {
    .fsg-toast.fsg-above-demo-bar[b-4faaapbdnt] {
        bottom: calc(var(--pwa-banner-h, 68px) + 4px);
    }
}
/* /Pages/Shared/Components/FirstWeekRecap.razor.rz.scp.css */
.fwr-card[b-ilssm1tsna] {
    position: relative;
    margin: 0 0 1rem;
    padding: 18px 22px;
    background: linear-gradient(135deg, rgba(42, 209, 138, 0.12) 0%, rgba(99, 102, 241, 0.10) 100%);
    border: 1px solid rgba(42, 209, 138, 0.32);
    border-radius: 16px;
    color: #f1f5f9;
}

.fwr-close[b-ilssm1tsna] {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
}
.fwr-close:hover[b-ilssm1tsna] { background: rgba(255, 255, 255, 0.06); color: #f1f5f9; }

.fwr-title[b-ilssm1tsna] {
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 14px;
    padding-right: 28px;
}

.fwr-stats[b-ilssm1tsna] {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
}
.fwr-stat[b-ilssm1tsna] { display: flex; flex-direction: column; gap: 2px; }
.fwr-value[b-ilssm1tsna] {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
    line-height: 1;
}
.fwr-label[b-ilssm1tsna] {
    font-size: 0.78rem;
    color: #94a3b8;
    font-weight: 600;
}

.fwr-foot[b-ilssm1tsna] {
    margin-top: 14px;
    font-size: 0.84rem;
    color: #94a3b8;
    line-height: 1.45;
}
/* /Pages/Shared/Components/FiscalSetupBanner.razor.rz.scp.css */
/* Compact amber warning bar — distinct from the blue/purple "welcome" gradient
   (this is a warning, not a celebration). Scoped to this component. POS is dark-only. */
.fsb[b-lyjwzvpifz] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 16px 12px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(245, 158, 11, .12);
    border: 1px solid rgba(245, 158, 11, .35);
}

.fsb-icon[b-lyjwzvpifz] { font-size: 1.25rem; flex-shrink: 0; }

.fsb-text[b-lyjwzvpifz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.fsb-text strong[b-lyjwzvpifz] { color: #fff; font-size: .95rem; }
.fsb-text span[b-lyjwzvpifz] { color: rgba(255, 255, 255, .78); font-size: .82rem; line-height: 1.35; }

.fsb-cta[b-lyjwzvpifz] {
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: 999px;
    background: #f59e0b;
    color: #1a1205;
    font-weight: 700;
    font-size: .85rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease;
}
.fsb-cta:hover[b-lyjwzvpifz] { background: #fbbf24; }

.fsb-close[b-lyjwzvpifz] {
    flex-shrink: 0;
    background: none;
    border: none;
    color: rgba(255, 255, 255, .6);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    transition: color .15s ease;
}
.fsb-close:hover[b-lyjwzvpifz] { color: #fff; }

@media (max-width: 600px) {
    .fsb-text span[b-lyjwzvpifz] { display: none; } /* keep just the title + CTA on a phone */
}
/* /Pages/Shared/Components/GlobalAnnouncementBanner.razor.rz.scp.css */
.global-ann[b-ccklgcy2kk] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
}

.global-ann-msg[b-ccklgcy2kk] { flex: 1 1 auto; }

.global-ann-x[b-ccklgcy2kk] {
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.global-ann-x:hover[b-ccklgcy2kk] { background: rgba(255, 255, 255, 0.32); }

.global-ann-info[b-ccklgcy2kk] { background: #2563eb; }
.global-ann-warning[b-ccklgcy2kk] { background: #b45309; }
.global-ann-critical[b-ccklgcy2kk] { background: #b91c1c; }
/* /Pages/Shared/Components/GuestArrivalToasts.razor.rz.scp.css */
/* The arrival alert: top centre, clear of the waiter calls and the delivery orders on the right. Its own colours, so it
   reads the same on both till themes; the allergy carries the red the guest card and the kitchen use. */
.arrival-toasts[b-7ygry9st64] {
    position: fixed;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(440px, calc(100vw - 32px));
    pointer-events: none;
}

.arrival-toast[b-7ygry9st64] {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px 11px 14px;
    border-radius: 14px;
    background: #0f172a;
    color: #e2e8f0;
    border: 1px solid #334155;
    box-shadow: 0 10px 30px rgba(2, 6, 23, .35);
    animation: arrival-in-b-7ygry9st64 .22s ease-out;
}

.arrival-toast--allergy[b-7ygry9st64] { border-color: #b42318; box-shadow: 0 10px 30px rgba(180, 35, 24, .28); }

.arrival-icon[b-7ygry9st64] { font-size: 1.35rem; line-height: 1.2; }
.arrival-info[b-7ygry9st64] { flex: 1; min-width: 0; display: grid; gap: 4px; }
.arrival-title[b-7ygry9st64] { font-size: .95rem; }
.arrival-title b[b-7ygry9st64] { font-weight: 750; }
.arrival-sub[b-7ygry9st64] { font-size: .8rem; color: #94a3b8; }
.arrival-allergy[b-7ygry9st64] { background: #fdecea; color: #b42318; border-radius: 8px; padding: 5px 9px; font-size: .85rem; }
.arrival-allergy b[b-7ygry9st64] { letter-spacing: .05em; margin-right: 6px; }
.arrival-birthday[b-7ygry9st64] { font-size: .82rem; color: #86b6f2; }

.arrival-dismiss[b-7ygry9st64] {
    background: none; border: 0; color: #94a3b8; font-size: 1.35rem; line-height: 1;
    min-width: 32px; min-height: 32px; border-radius: 8px; cursor: pointer;
}
.arrival-dismiss:hover[b-7ygry9st64] { background: rgba(148, 163, 184, .15); color: #e2e8f0; }
.arrival-dismiss:focus-visible[b-7ygry9st64] { outline: 2px solid #6366f1; outline-offset: 2px; }

@keyframes arrival-in-b-7ygry9st64 {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .arrival-toast[b-7ygry9st64] { animation: none; }
}
/* /Pages/Shared/Components/ImpersonationBanner.razor.rz.scp.css */
/* High-contrast amber/orange so the banner reads as a warning state,
   distinct from the offline (red bottom-banner) and printer (red fixed-top
   banner at z-index 10001). Uses position:fixed + top:0 so it stays at the
   viewport top across scroll containers (POS scrolls inside an inner
   container, so position:sticky inside MainLayout's <div class="page">
   would not stick correctly). z-index sits above PrinterOfflineBanner
   (10001) and PrinterConfigBanner (10000) — impersonation context is
   the higher-priority warning since it gates everything the operator
   does in this tab. */
.imp-banner[b-lyjxuxlf2p] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10005;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: linear-gradient(90deg, var(--adm-bggrad-b45309), var(--adm-bggrad-d97706));
    color: var(--adm-fgon-fdebdd-fffbeb);
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 2px 8px var(--adm-sh-000000-a0_25);
    border-bottom: 2px solid var(--adm-bdon-fdebdd-92400e);
}

/* In-flow spacer rendered alongside the banner so page content isn't
   hidden under the fixed banner. Height matches .imp-banner padding +
   font-size + border (8+8 padding + ~20 line-height + 2 border = ~38).
   Rounded to 40 for breathing room. */
.imp-banner-spacer[b-lyjxuxlf2p] {
    height: 40px;
    flex-shrink: 0;
}

.imp-icon[b-lyjxuxlf2p] {
    font-size: 1.25rem;
    line-height: 1;
}

.imp-text[b-lyjxuxlf2p] {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    min-width: 0;
}

.imp-meta[b-lyjxuxlf2p] {
    font-weight: 400;
    opacity: 0.9;
    font-size: 0.8125rem;
}

.imp-exit[b-lyjxuxlf2p] {
    flex: 0 0 auto;
    background: var(--adm-bg-000000-a0_25);
    color: var(--adm-fgon-fafbfd-fffbeb);
    border: 1px solid var(--adm-bd-ffffff-a0_3);
    border-radius: 6px;
    padding: 4px 12px;
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.imp-exit:hover[b-lyjxuxlf2p] {
    background: var(--adm-bg-000000-a0_45);
    border-color: var(--adm-bd-ffffff-a0_5);
}
/* /Pages/Shared/Components/InventoryAlertToast.razor.rz.scp.css */
.toast-container[b-s70jrrqixw] {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 380px;
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.3s ease;
    pointer-events: none;
}

.toast-container.visible[b-s70jrrqixw] {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.toast[b-s70jrrqixw] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border-left: 4px solid #64748b;
    animation: slideIn-b-s70jrrqixw 0.3s ease;
}

@keyframes slideIn-b-s70jrrqixw {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Urgency Colors */
.toast.critical[b-s70jrrqixw] {
    border-left-color: #dc2626;
    background: linear-gradient(to right, #fef2f2 0%, white 30%);
}

.toast.warning[b-s70jrrqixw] {
    border-left-color: #f59e0b;
    background: linear-gradient(to right, #fffbeb 0%, white 30%);
}

.toast.info[b-s70jrrqixw] {
    border-left-color: #3b82f6;
    background: linear-gradient(to right, #eff6ff 0%, white 30%);
}

.toast.success[b-s70jrrqixw] {
    border-left-color: #10b981;
    background: linear-gradient(to right, #ecfdf5 0%, white 30%);
}

.toast-icon[b-s70jrrqixw] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f1f5f9;
}

.toast.critical .toast-icon[b-s70jrrqixw] {
    background: #fee2e2;
    color: #dc2626;
}

.toast.warning .toast-icon[b-s70jrrqixw] {
    background: #fef3c7;
    color: #d97706;
}

.toast.info .toast-icon[b-s70jrrqixw] {
    background: #dbeafe;
    color: #2563eb;
}

.toast.success .toast-icon[b-s70jrrqixw] {
    background: #d1fae5;
    color: #059669;
}

.toast-content[b-s70jrrqixw] {
    flex: 1;
    min-width: 0;
}

.toast-title[b-s70jrrqixw] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 2px;
}

.toast-message[b-s70jrrqixw] {
    display: block;
    font-size: 0.8125rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toast-close[b-s70jrrqixw] {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 4px;
    margin: -4px -4px -4px 0;
}

.toast-close:hover[b-s70jrrqixw] {
    background: #f1f5f9;
    color: #64748b;
}

/* Mobile */
@media (max-width: 480px) {
    .toast-container[b-s70jrrqixw] {
        left: 10px;
        right: 10px;
        max-width: none;
    }
}
/* /Pages/Shared/Components/LoginWeather.razor.rz.scp.css */
/* The slot under the venue's name, inside the login card. It is ALWAYS rendered and always this tall, with or
   without a line in it, so the line arriving (or a refresh emptying it) never moves the keypad.

   It sits in the name's own bottom margin (Login.razor: h2 { margin: 0 0 18px }): -18px pulls it up into that
   margin and its 18px give it back, so at the usual heights the card is exactly as tall as it was before this slot
   existed (measured against master at 11 sizes x 2 themes). The corners of the screen were tried first and collide
   with the card on an iPad in either orientation: the card fills nearly the whole height there. */
.login-weather[b-uroqtductz] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    margin: -18px 0 0;
}

/* The line is a button: it opens the panel. */
.login-weather__line[b-uroqtductz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0 8px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #4b5563;
    font: inherit;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    animation: login-weather-in-b-uroqtductz .3s ease-out;
}

.login-weather__line:hover[b-uroqtductz] {
    background: rgba(0, 0, 0, .05);
}

.login-weather__line:focus-visible[b-uroqtductz],
.login-weather__close:focus-visible[b-uroqtductz] {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
}

/* MET's icons draw white clouds: a hairline outline keeps them visible on the light card. */
.login-weather img[b-uroqtductz] {
    filter: drop-shadow(0 0 .6px rgba(0, 0, 0, .45));
}

.login-weather__icon[b-uroqtductz] {
    flex: none;
    width: 18px;
    height: 18px;
}

.login-weather__temp[b-uroqtductz] {
    flex: none;
    color: #1f2328;
    font-size: .95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.login-weather__dot[b-uroqtductz] {
    flex: none;
    opacity: .5;
}

.login-weather__outlook[b-uroqtductz] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .82rem;
    font-weight: 600;
}

.login-weather__stale[b-uroqtductz] {
    flex: none;
    color: #b45309;
    font-size: .7rem;
    font-weight: 700;
}

.login-weather__more[b-uroqtductz] {
    display: block;
    flex: none;
    width: 13px;
    height: 13px;
    opacity: .5;
}

/* The panel: over the card's content, under the line, until it is closed. The backdrop (fixed, so it covers the
   card body: Login.razor's .login-card__body is its containing block) closes it on a tap anywhere else. */
.login-weather__backdrop[b-uroqtductz] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.login-weather__panel[b-uroqtductz] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 41;
    padding: 12px 14px 10px;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    background: #fff;
    color: #1f2328;
    text-align: left;
    white-space: normal;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .35);
    animation: login-weather-pop-b-uroqtductz .16s ease-out;
}

.login-weather__head[b-uroqtductz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.login-weather__place[b-uroqtductz] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 800;
}

.login-weather__close[b-uroqtductz] {
    flex: none;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .05);
    color: inherit;
    font-size: .95rem;
    line-height: 32px;
    cursor: pointer;
}

.login-weather__now[b-uroqtductz] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 4px;
}

.login-weather__now-icon[b-uroqtductz] {
    flex: none;
    width: 44px;
    height: 44px;
}

.login-weather__now-temp[b-uroqtductz] {
    flex: none;
    font-size: 1.7rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.login-weather__now-text[b-uroqtductz] {
    color: #4b5563;
    font-size: .9rem;
    font-weight: 600;
}

.login-weather__facts[b-uroqtductz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    margin: 0 0 8px;
    color: #4b5563;
    font-size: .82rem;
}

.login-weather__tomorrow[b-uroqtductz] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.login-weather__tomorrow img[b-uroqtductz] {
    width: 18px;
    height: 18px;
}

.login-weather__hours[b-uroqtductz] {
    display: grid;
    grid-auto-flow: column;
    /* 12 cells of 31px + 1px gaps = 383px: they fit the card's panel (~402px inside) without scrolling, measured
       2026-10-18 at 1024x768 (34px cells cut the twelfth hour). A narrower card scrolls the row sideways. */
    grid-auto-columns: minmax(31px, 1fr);
    gap: 1px;
    margin: 0;
    padding: 8px 0;
    border-top: 1px solid rgba(0, 0, 0, .07);
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    list-style: none;
    overflow-x: auto;
}

.login-weather__hours li[b-uroqtductz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
}

.login-weather__hours img[b-uroqtductz] {
    width: 24px;
    height: 24px;
}

.login-weather__hour[b-uroqtductz] {
    color: #6b7280;
    font-size: .64rem;
    white-space: nowrap;
}

.login-weather__hour-temp[b-uroqtductz] {
    font-size: .8rem;
    font-weight: 700;
}

.login-weather__mm[b-uroqtductz] {
    min-height: .8em;
    color: #2563eb;
    font-size: .6rem;
    white-space: nowrap;
}

.login-weather__mm-note[b-uroqtductz] {
    margin: 4px 0 0;
    color: #2563eb;
    font-size: .62rem;
}

:root[data-theme="dark"] .login-weather__mm-note[b-uroqtductz] {
    color: #79c0ff;
}

.login-weather__credits[b-uroqtductz] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    margin: 8px 0 0;
    color: #8b949e;
    font-size: .64rem;
}

.login-weather__credits-stale[b-uroqtductz] {
    color: #b45309;
    font-weight: 700;
}

/* Dark theme (Login.razor's card is rgba(22,27,34,.78) there). */
:root[data-theme="dark"] .login-weather__line[b-uroqtductz] {
    color: #c9d1d9;
}

:root[data-theme="dark"] .login-weather__line:hover[b-uroqtductz] {
    background: rgba(255, 255, 255, .07);
}

:root[data-theme="dark"] .login-weather__temp[b-uroqtductz] {
    color: #f0f6fc;
}

:root[data-theme="dark"] .login-weather__stale[b-uroqtductz],
:root[data-theme="dark"] .login-weather__credits-stale[b-uroqtductz] {
    color: #f0b429;
}

:root[data-theme="dark"] .login-weather img[b-uroqtductz] {
    filter: none;
}

:root[data-theme="dark"] .login-weather__panel[b-uroqtductz] {
    border-color: rgba(255, 255, 255, .10);
    background: #161b22;
    color: #e6edf3;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7);
}

:root[data-theme="dark"] .login-weather__close[b-uroqtductz] {
    background: rgba(255, 255, 255, .08);
}

:root[data-theme="dark"] .login-weather__now-text[b-uroqtductz],
:root[data-theme="dark"] .login-weather__facts[b-uroqtductz] {
    color: #c9d1d9;
}

:root[data-theme="dark"] .login-weather__hours[b-uroqtductz] {
    border-color: rgba(255, 255, 255, .08);
}

:root[data-theme="dark"] .login-weather__hour[b-uroqtductz] {
    color: #8b949e;
}

:root[data-theme="dark"] .login-weather__mm[b-uroqtductz] {
    color: #79c0ff;
}

@keyframes login-weather-in-b-uroqtductz {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes login-weather-pop-b-uroqtductz {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .login-weather__line[b-uroqtductz],
    .login-weather__panel[b-uroqtductz] {
        animation: none;
    }
}

/* Tall screens (an iPad upright, desktops): the card has room, so the line gets a little more of it. The slot adds
   18px to the card there (6 + 24 + 6 against the name's 18), the same with or without a line, so nothing moves. */
@media (min-height: 960px) and (min-width: 481px) {
    .login-weather[b-uroqtductz] {
        height: 24px;
        margin: -12px 0 6px;
    }

    .login-weather__icon[b-uroqtductz] {
        width: 24px;
        height: 24px;
    }

    .login-weather__temp[b-uroqtductz] {
        font-size: 1.05rem;
    }

    .login-weather__outlook[b-uroqtductz] {
        font-size: .88rem;
    }
}

/* A phone held upright: its name margin is 10px (Login.razor), so the slot adds 10px there. */
@media (max-width: 480px) and (orientation: portrait) {
    .login-weather[b-uroqtductz] {
        margin: -10px 0 2px;
    }
}

/* A short phone held upright (most iPhones in Safari: under 740px once the browser's bars are taken off): the phone
   layout is tuned to fit without scrolling, so the line shrinks to the icon and the temperature in a 16px slot that
   adds 6px to the card; a tap still opens the panel with the rest (the user, 2026-10-23: the line was missing on
   phones). */
@media (max-width: 480px) and (orientation: portrait) and (max-height: 739px) {
    .login-weather[b-uroqtductz] {
        height: 16px;
        margin: -10px 0 0;
    }

    .login-weather__icon[b-uroqtductz] {
        width: 16px;
        height: 16px;
    }

    .login-weather__temp[b-uroqtductz] {
        font-size: .88rem;
    }

    .login-weather__dot[b-uroqtductz],
    .login-weather__outlook[b-uroqtductz],
    .login-weather__stale[b-uroqtductz],
    .login-weather__more[b-uroqtductz] {
        display: none;
    }
}

/* Where Login.razor squeezes the card to fit the keypad on a wider screen, the slot takes no room and the line is not
   shown: short screens (max-height: 700px: 1366x768 laptops in a browser, 1024x600 tablets, a phone on its side). The
   name's margin drops to 4px there, so the slot would ADD to a card that already overflows (measured 2026-10-17: at
   1024x600 BORRAR and ENTRAR are half below the fold on master; 10px more hid their labels, and at 1366x657 it pushed
   «¿Olvidaste tu PIN?» out of view). */
@media (max-height: 700px) and (min-width: 481px), (max-height: 700px) and (orientation: landscape) {
    .login-weather[b-uroqtductz] {
        display: none;
    }
}
/* /Pages/Shared/Components/OfflineBanner.razor.rz.scp.css */
.offline-banner[b-mf92dswxmd] {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    animation: slideUp-b-mf92dswxmd 0.3s ease-out;
}

@keyframes slideUp-b-mf92dswxmd {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.offline-banner.offline[b-mf92dswxmd] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
}

.offline-banner.pending[b-mf92dswxmd] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
}

.offline-content[b-mf92dswxmd] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.offline-icon[b-mf92dswxmd] {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
}

.pending-icon[b-mf92dswxmd] {
    animation: spin-b-mf92dswxmd 2s linear infinite;
}

@keyframes spin-b-mf92dswxmd {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.offline-text[b-mf92dswxmd] {
    white-space: nowrap;
}

.sync-status[b-mf92dswxmd] {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.2);
}

.sync-status.syncing[b-mf92dswxmd] {
    animation: pulse-b-mf92dswxmd 1.5s ease-in-out infinite;
}

@keyframes pulse-b-mf92dswxmd {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

.sync-status.error[b-mf92dswxmd] {
    background: rgba(239, 68, 68, 0.3);
}

.sync-btn[b-mf92dswxmd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sync-btn:hover[b-mf92dswxmd] {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.sync-btn:active[b-mf92dswxmd] {
    transform: scale(0.95);
}

/* An order the server keeps refusing: still kept and retried, but staff need to look. */
.offline-banner.needs-review[b-mf92dswxmd] {
    background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
    color: #fff;
}

.review-btn[b-mf92dswxmd] {
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font: inherit;
    font-weight: 600;
    padding: 6px 12px;
    white-space: nowrap;
    cursor: pointer;
}

.review-btn:hover[b-mf92dswxmd] {
    background: rgba(255, 255, 255, 0.28);
}

.review-btn:focus-visible[b-mf92dswxmd],
.offline-review button:focus-visible[b-mf92dswxmd] {
    outline: 2px solid #1d4ed8;
    outline-offset: 2px;
}

.offline-review-backdrop[b-mf92dswxmd] {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.45);
}

.offline-review[b-mf92dswxmd] {
    width: min(520px, 100%);
    max-height: calc(100vh - 32px);
    overflow: auto;
    padding: 20px;
    border-radius: 14px;
    background: #fff;
    color: #1f2937;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.offline-review h2[b-mf92dswxmd] {
    margin: 0 0 6px;
    font-size: 18px;
}

.offline-review-intro[b-mf92dswxmd] {
    margin: 0 0 14px;
    font-size: 14px;
    color: #4b5563;
}

.offline-review-list[b-mf92dswxmd] {
    display: grid;
    gap: 10px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.offline-review-order[b-mf92dswxmd] {
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.offline-review-order.stuck[b-mf92dswxmd] {
    border-color: #f59e0b;
    background: #fffbeb;
}

.offline-review-head[b-mf92dswxmd] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.offline-review-when[b-mf92dswxmd] {
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.offline-review-items[b-mf92dswxmd] {
    margin-top: 4px;
    font-size: 14px;
}

.offline-review-reason[b-mf92dswxmd] {
    margin-top: 6px;
    font-size: 13px;
    color: #92400e;
}

.offline-review-row-actions[b-mf92dswxmd] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

.offline-review-row-actions button[b-mf92dswxmd] {
    padding: 7px 12px;
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.offline-review-upload[b-mf92dswxmd],
.offline-review-remove-confirm[b-mf92dswxmd] {
    border: none;
    background: #d97706;
    color: #fff;
    font-weight: 600;
}

.offline-review-remove-confirm[b-mf92dswxmd] {
    background: #b91c1c;
}

.offline-review-remove[b-mf92dswxmd],
.offline-review-cancel[b-mf92dswxmd] {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #1f2937;
}

.offline-review-row-actions button:disabled[b-mf92dswxmd] {
    opacity: 0.5;
    cursor: default;
}

.offline-review-confirm[b-mf92dswxmd] {
    display: grid;
    gap: 6px;
    margin-top: 10px;
    padding: 10px;
    border-radius: 8px;
    background: #fef2f2;
}

.offline-review-confirm p[b-mf92dswxmd] {
    margin: 0;
    font-size: 14px;
}

.offline-review-pin-label[b-mf92dswxmd] {
    font-size: 13px;
    color: #4b5563;
}

.offline-review-pin[b-mf92dswxmd] {
    width: 10ch;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font: inherit;
    letter-spacing: 0.2em;
}

.offline-review-error[b-mf92dswxmd] {
    font-size: 13px;
    color: #b91c1c;
}

.offline-review-actions[b-mf92dswxmd] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.offline-review-actions button[b-mf92dswxmd] {
    padding: 8px 14px;
    border-radius: 8px;
    font: inherit;
    cursor: pointer;
}

.offline-review-retry[b-mf92dswxmd] {
    border: none;
    background: #d97706;
    color: #fff;
    font-weight: 600;
}

.offline-review-retry:disabled[b-mf92dswxmd] {
    opacity: 0.5;
    cursor: default;
}

.offline-review-close[b-mf92dswxmd] {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #1f2937;
}

/* Hide on small screens to avoid overlap with other UI */
@media (max-width: 480px) {
    .offline-banner[b-mf92dswxmd] {
        bottom: 80px; /* Above mobile nav */
        left: 16px;
        right: 16px;
        transform: none;
    }
}
/* /Pages/Shared/Components/PendingPrintsPopup.razor.rz.scp.css */
/* ========================================
   PENDING PRINTS POPUP
   Shows failed prints queue for retry
   ======================================== */

/* ========================================
   BACKDROP
   ======================================== */
.popup-backdrop[b-akbq2flk4g] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

/* ========================================
   POPUP CONTAINER
   ======================================== */
.pending-prints-popup[b-akbq2flk4g] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 420px;
    max-height: 80vh;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    z-index: 1001;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: popup-in-b-akbq2flk4g 0.15s ease-out;
}

@keyframes popup-in-b-akbq2flk4g {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* ========================================
   HEADER
   ======================================== */
.popup-header[b-akbq2flk4g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: rgba(239, 68, 68, 0.1);
    border-bottom: 1px solid rgba(239, 68, 68, 0.2);
    flex-shrink: 0;
}

.header-title[b-akbq2flk4g] {
    font-size: 15px;
    font-weight: 700;
    color: #fca5a5;
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-title[b-akbq2flk4g]::before {
    content: "📋";
}

.close-btn[b-akbq2flk4g] {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
    transition: all 0.15s;
}

.close-btn:hover[b-akbq2flk4g] {
    color: #f1f5f9;
    background: rgba(255, 255, 255, 0.1);
}

/* ========================================
   BODY
   ======================================== */
.popup-body[b-akbq2flk4g] {
    padding: 12px;
    overflow-y: auto;
    flex: 1;
    min-height: 100px;
}

/* Empty state */
.empty-state[b-akbq2flk4g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 16px;
    color: #64748b;
    font-size: 14px;
}

.empty-icon[b-akbq2flk4g] {
    font-size: 32px;
}

/* ========================================
   PENDING LIST
   ======================================== */
.pending-list[b-akbq2flk4g] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pending-item[b-akbq2flk4g] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #334155;
    border-radius: 10px;
    transition: all 0.15s;
}

.pending-item.retrying[b-akbq2flk4g] {
    opacity: 0.7;
    border-color: #3b82f6;
}

.pending-item.exhausted[b-akbq2flk4g] {
    opacity: 0.6;
    border-color: #6b7280;
    background: rgba(107, 114, 128, 0.1);
}

.retry-count.max-reached[b-akbq2flk4g] {
    color: #ef4444;
    font-weight: 600;
}

.exhausted-warning[b-akbq2flk4g] {
    margin-top: 6px;
    font-size: 12px;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
}

.item-info[b-akbq2flk4g] {
    flex: 1;
    min-width: 0;
}

.item-main[b-akbq2flk4g] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.item-table[b-akbq2flk4g] {
    font-weight: 600;
    color: #f1f5f9;
    font-size: 14px;
}

.item-type[b-akbq2flk4g] {
    font-size: 12px;
    color: #94a3b8;
    background: rgba(100, 116, 139, 0.2);
    padding: 2px 8px;
    border-radius: 4px;
}

.item-meta[b-akbq2flk4g] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #64748b;
}

.retry-count[b-akbq2flk4g] {
    color: #f59e0b;
}

.item-error[b-akbq2flk4g] {
    margin-top: 6px;
    font-size: 12px;
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========================================
   ITEM ACTIONS
   ======================================== */
.item-actions[b-akbq2flk4g] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.btn-retry[b-akbq2flk4g],
.btn-dismiss[b-akbq2flk4g] {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.15s;
}

.btn-retry[b-akbq2flk4g] {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

.btn-retry:hover:not(:disabled)[b-akbq2flk4g] {
    background: rgba(59, 130, 246, 0.3);
}

.btn-retry:disabled[b-akbq2flk4g] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-dismiss[b-akbq2flk4g] {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

.btn-dismiss:hover:not(:disabled)[b-akbq2flk4g] {
    background: rgba(239, 68, 68, 0.25);
}

.btn-dismiss:disabled[b-akbq2flk4g] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========================================
   POPUP ACTIONS
   ======================================== */
.popup-actions[b-akbq2flk4g] {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid #334155;
    flex-shrink: 0;
}

.popup-actions button[b-akbq2flk4g] {
    flex: 1;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
}

.btn-retry-all[b-akbq2flk4g] {
    background: #3b82f6;
    color: white;
}

.btn-retry-all:hover:not(:disabled)[b-akbq2flk4g] {
    background: #2563eb;
}

.btn-retry-all:disabled[b-akbq2flk4g] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-clear[b-akbq2flk4g] {
    background: transparent;
    color: #94a3b8;
    border: 1px solid #475569 !important;
}

.btn-clear:hover[b-akbq2flk4g] {
    background: rgba(255, 255, 255, 0.05);
    color: #f1f5f9;
}

/* Spinner */
.spinner[b-akbq2flk4g] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-akbq2flk4g 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes spin-b-akbq2flk4g {
    to { transform: rotate(360deg); }
}

/* ========================================
   LIGHT THEME
   ======================================== */
:root[data-theme="light"] .pending-prints-popup[b-akbq2flk4g],
html[data-theme="light"] .pending-prints-popup[b-akbq2flk4g] {
    background: #ffffff;
    border-color: #e5e7eb;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

:root[data-theme="light"] .popup-header[b-akbq2flk4g],
html[data-theme="light"] .popup-header[b-akbq2flk4g] {
    background: #fef2f2;
    border-bottom-color: #fecaca;
}

:root[data-theme="light"] .header-title[b-akbq2flk4g],
html[data-theme="light"] .header-title[b-akbq2flk4g] {
    color: #dc2626;
}

:root[data-theme="light"] .close-btn[b-akbq2flk4g],
html[data-theme="light"] .close-btn[b-akbq2flk4g] {
    color: #6b7280;
}

:root[data-theme="light"] .close-btn:hover[b-akbq2flk4g],
html[data-theme="light"] .close-btn:hover[b-akbq2flk4g] {
    color: #1f2937;
    background: rgba(0, 0, 0, 0.05);
}

:root[data-theme="light"] .empty-state[b-akbq2flk4g],
html[data-theme="light"] .empty-state[b-akbq2flk4g] {
    color: #9ca3af;
}

:root[data-theme="light"] .pending-item[b-akbq2flk4g],
html[data-theme="light"] .pending-item[b-akbq2flk4g] {
    background: #f8fafc;
    border-color: #e5e7eb;
}

:root[data-theme="light"] .pending-item.retrying[b-akbq2flk4g],
html[data-theme="light"] .pending-item.retrying[b-akbq2flk4g] {
    border-color: #3b82f6;
}

:root[data-theme="light"] .pending-item.exhausted[b-akbq2flk4g],
html[data-theme="light"] .pending-item.exhausted[b-akbq2flk4g] {
    opacity: 0.7;
    border-color: #9ca3af;
    background: #f3f4f6;
}

:root[data-theme="light"] .exhausted-warning[b-akbq2flk4g],
html[data-theme="light"] .exhausted-warning[b-akbq2flk4g] {
    color: #b45309;
    background: #fef3c7;
}

:root[data-theme="light"] .item-table[b-akbq2flk4g],
html[data-theme="light"] .item-table[b-akbq2flk4g] {
    color: #1f2937;
}

:root[data-theme="light"] .item-type[b-akbq2flk4g],
html[data-theme="light"] .item-type[b-akbq2flk4g] {
    color: #6b7280;
    background: #f3f4f6;
}

:root[data-theme="light"] .item-meta[b-akbq2flk4g],
html[data-theme="light"] .item-meta[b-akbq2flk4g] {
    color: #9ca3af;
}

:root[data-theme="light"] .item-error[b-akbq2flk4g],
html[data-theme="light"] .item-error[b-akbq2flk4g] {
    color: #dc2626;
    background: #fef2f2;
}

:root[data-theme="light"] .btn-retry[b-akbq2flk4g],
html[data-theme="light"] .btn-retry[b-akbq2flk4g] {
    background: #eff6ff;
    color: #2563eb;
}

:root[data-theme="light"] .btn-retry:hover:not(:disabled)[b-akbq2flk4g],
html[data-theme="light"] .btn-retry:hover:not(:disabled)[b-akbq2flk4g] {
    background: #dbeafe;
}

:root[data-theme="light"] .btn-dismiss[b-akbq2flk4g],
html[data-theme="light"] .btn-dismiss[b-akbq2flk4g] {
    background: #fef2f2;
    color: #dc2626;
}

:root[data-theme="light"] .btn-dismiss:hover:not(:disabled)[b-akbq2flk4g],
html[data-theme="light"] .btn-dismiss:hover:not(:disabled)[b-akbq2flk4g] {
    background: #fee2e2;
}

:root[data-theme="light"] .popup-actions[b-akbq2flk4g],
html[data-theme="light"] .popup-actions[b-akbq2flk4g] {
    background: #f8fafc;
    border-top-color: #e5e7eb;
}

:root[data-theme="light"] .btn-clear[b-akbq2flk4g],
html[data-theme="light"] .btn-clear[b-akbq2flk4g] {
    color: #6b7280;
    border-color: #d1d5db !important;
}

:root[data-theme="light"] .btn-clear:hover[b-akbq2flk4g],
html[data-theme="light"] .btn-clear:hover[b-akbq2flk4g] {
    background: #f3f4f6;
    color: #1f2937;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 480px) {
    .pending-prints-popup[b-akbq2flk4g] {
        width: 95%;
        max-height: 85vh;
    }

    .pending-item[b-akbq2flk4g] {
        padding: 10px;
    }

    .item-main[b-akbq2flk4g] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .popup-actions[b-akbq2flk4g] {
        flex-direction: column;
    }
}
/* /Pages/Shared/Components/PrinterConfigBanner.razor.rz.scp.css */
/* ========================================
   PRINTER CONFIGURATION BANNER
   Shows when printer not configured or has errors
   ======================================== */

.printer-banner[b-6nj7e2jkoo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    gap: 16px;
    font-size: 14px;
    animation: banner-slide-in-b-6nj7e2jkoo 0.3s ease-out;
}

@keyframes banner-slide-in-b-6nj7e2jkoo {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Warning state - not configured */
.banner-warning[b-6nj7e2jkoo] {
    background: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%);
    border-bottom: 1px solid #f59e0b;
    color: #92400e;
}

/* Error state - connection failures */
.banner-error[b-6nj7e2jkoo] {
    background: linear-gradient(90deg, #fee2e2 0%, #fecaca 100%);
    border-bottom: 1px solid #ef4444;
    color: #991b1b;
}

/* Content area */
.banner-content[b-6nj7e2jkoo] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.banner-icon[b-6nj7e2jkoo] {
    font-size: 16px;
    flex-shrink: 0;
}

.banner-text[b-6nj7e2jkoo] {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Actions area */
.banner-actions[b-6nj7e2jkoo] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.btn-configure[b-6nj7e2jkoo] {
    padding: 6px 14px;
    background: #f59e0b;
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.banner-error .btn-configure[b-6nj7e2jkoo] {
    background: #ef4444;
}

.btn-configure:hover[b-6nj7e2jkoo] {
    background: #d97706;
    transform: translateY(-1px);
}

.banner-error .btn-configure:hover[b-6nj7e2jkoo] {
    background: #dc2626;
}

.btn-dismiss[b-6nj7e2jkoo] {
    padding: 6px 14px;
    background: transparent;
    color: inherit;
    border: 1px solid currentColor;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn-dismiss:hover[b-6nj7e2jkoo] {
    opacity: 1;
    background: rgba(0,0,0,0.05);
}

/* ========================================
   DARK THEME
   ======================================== */

:root[data-theme="dark"] .banner-warning[b-6nj7e2jkoo],
html[data-theme="dark"] .banner-warning[b-6nj7e2jkoo] {
    background: linear-gradient(90deg, #451a03 0%, #78350f 100%);
    border-bottom-color: #b45309;
    color: #fcd34d;
}

:root[data-theme="dark"] .banner-error[b-6nj7e2jkoo],
html[data-theme="dark"] .banner-error[b-6nj7e2jkoo] {
    background: linear-gradient(90deg, #450a0a 0%, #7f1d1d 100%);
    border-bottom-color: #b91c1c;
    color: #fca5a5;
}

:root[data-theme="dark"] .btn-configure[b-6nj7e2jkoo],
html[data-theme="dark"] .btn-configure[b-6nj7e2jkoo] {
    background: #d97706;
}

:root[data-theme="dark"] .btn-configure:hover[b-6nj7e2jkoo],
html[data-theme="dark"] .btn-configure:hover[b-6nj7e2jkoo] {
    background: #b45309;
}

:root[data-theme="dark"] .banner-error .btn-configure[b-6nj7e2jkoo],
html[data-theme="dark"] .banner-error .btn-configure[b-6nj7e2jkoo] {
    background: #dc2626;
}

:root[data-theme="dark"] .banner-error .btn-configure:hover[b-6nj7e2jkoo],
html[data-theme="dark"] .banner-error .btn-configure:hover[b-6nj7e2jkoo] {
    background: #b91c1c;
}

:root[data-theme="dark"] .btn-dismiss[b-6nj7e2jkoo],
html[data-theme="dark"] .btn-dismiss[b-6nj7e2jkoo] {
    border-color: rgba(255,255,255,0.3);
}

:root[data-theme="dark"] .btn-dismiss:hover[b-6nj7e2jkoo],
html[data-theme="dark"] .btn-dismiss:hover[b-6nj7e2jkoo] {
    background: rgba(255,255,255,0.1);
}

/* ========================================
   RESPONSIVE - Stack on small screens
   ======================================== */

@media (max-width: 500px) {
    .printer-banner[b-6nj7e2jkoo] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 16px;
    }

    .banner-content[b-6nj7e2jkoo] {
        justify-content: center;
        text-align: center;
    }

    .banner-text[b-6nj7e2jkoo] {
        white-space: normal;
    }

    .banner-actions[b-6nj7e2jkoo] {
        justify-content: center;
    }
}
/* /Pages/Shared/Components/PrintErrorModal.razor.rz.scp.css */
/* ========================================
   PRINT ERROR MODAL
   Smart error handling when prints fail
   ======================================== */

/* ========================================
   BACKDROP
   ======================================== */
.modal-backdrop[b-vnct245uv8] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    animation: fade-in-b-vnct245uv8 0.15s ease-out;
}

@keyframes fade-in-b-vnct245uv8 {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ========================================
   MODAL CONTAINER
   ======================================== */
.print-error-modal[b-vnct245uv8] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
    z-index: 1001;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modal-in-b-vnct245uv8 0.2s ease-out;
}

@keyframes modal-in-b-vnct245uv8 {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* ========================================
   HEADER
   ======================================== */
.modal-header[b-vnct245uv8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: rgba(239, 68, 68, 0.1);
    border-bottom: 1px solid rgba(239, 68, 68, 0.2);
    flex-shrink: 0;
}

.header-title[b-vnct245uv8] {
    font-size: 16px;
    font-weight: 700;
    color: #fca5a5;
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-title[b-vnct245uv8]::before {
    content: "⚠️";
}

.close-btn[b-vnct245uv8] {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.15s;
    line-height: 1;
}

.close-btn:hover[b-vnct245uv8] {
    color: #f1f5f9;
    background: rgba(255, 255, 255, 0.1);
}

/* ========================================
   BODY
   ======================================== */
.modal-body[b-vnct245uv8] {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

/* Reassurance box - always shown first */
.reassurance[b-vnct245uv8] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 10px;
    color: #86efac;
    font-weight: 500;
    font-size: 14px;
}

.check-icon[b-vnct245uv8] {
    font-size: 18px;
    flex-shrink: 0;
}

.divider[b-vnct245uv8] {
    border: none;
    border-top: 1px solid #334155;
    margin: 16px 0;
}

/* Printer info line */
.printer-info[b-vnct245uv8] {
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 12px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

/* ========================================
   ERROR DETAILS BOX
   ======================================== */
.error-details[b-vnct245uv8] {
    padding: 16px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-radius: 10px;
}

.error-details.error-config[b-vnct245uv8] {
    background: rgba(234, 179, 8, 0.1);
    border-color: rgba(234, 179, 8, 0.2);
}

.error-details.error-config .error-title[b-vnct245uv8] {
    color: #fcd34d;
}

.error-details.error-agent[b-vnct245uv8] {
    background: rgba(234, 179, 8, 0.1);
    border-color: rgba(234, 179, 8, 0.2);
}

.error-details.error-agent .error-title[b-vnct245uv8] {
    color: #fcd34d;
}

/* Agent install hint box */
.agent-install-hint[b-vnct245uv8] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    padding: 12px;
    background: rgba(251, 191, 36, 0.15);
    border-radius: 8px;
}

.agent-hint-icon[b-vnct245uv8] {
    font-size: 20px;
    flex-shrink: 0;
}

.agent-hint-text[b-vnct245uv8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: #fde68a;
}

.agent-hint-text strong[b-vnct245uv8] {
    color: #fef3c7;
}

.agent-hint-note[b-vnct245uv8] {
    font-size: 12px;
    opacity: 0.75;
}

.error-title[b-vnct245uv8] {
    font-weight: 600;
    color: #fca5a5;
    margin: 0 0 8px 0;
    font-size: 14px;
}

.error-hint[b-vnct245uv8] {
    color: #94a3b8;
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
}

/* Checklist */
.checklist[b-vnct245uv8] {
    margin: 12px 0 0 0;
    padding: 0;
    list-style: none;
    color: #e2e8f0;
    font-size: 14px;
}

.checklist li[b-vnct245uv8] {
    margin-bottom: 10px;
    padding-left: 28px;
    position: relative;
    line-height: 1.4;
}

.checklist li[b-vnct245uv8]::before {
    content: "☐";
    position: absolute;
    left: 0;
    color: #64748b;
    font-size: 16px;
}

/* ========================================
   SUPPORT CODE
   ======================================== */
.support-code[b-vnct245uv8] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 14px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    font-size: 13px;
    color: #93c5fd;
    flex-wrap: wrap;
}

.support-code .code[b-vnct245uv8] {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    letter-spacing: 0.5px;
}

.copy-btn[b-vnct245uv8] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
    opacity: 0.7;
    transition: opacity 0.15s;
    border-radius: 4px;
}

.copy-btn:hover[b-vnct245uv8] {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

/* ========================================
   ACTIONS
   ======================================== */
.modal-actions[b-vnct245uv8] {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid #334155;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.modal-actions button[b-vnct245uv8] {
    flex: 1;
    min-width: 120px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.btn-primary[b-vnct245uv8] {
    background: #3b82f6;
    color: white;
    border: none;
}

.btn-primary:hover:not(:disabled)[b-vnct245uv8] {
    background: #2563eb;
    transform: translateY(-1px);
}

.btn-primary:disabled[b-vnct245uv8] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary[b-vnct245uv8] {
    background: transparent;
    color: #94a3b8;
    border: 1px solid #475569;
}

.btn-secondary:hover[b-vnct245uv8] {
    background: rgba(255, 255, 255, 0.05);
    color: #f1f5f9;
    border-color: #64748b;
}

.btn-tertiary[b-vnct245uv8] {
    background: transparent;
    color: #64748b;
    border: 1px solid #334155;
}

.btn-tertiary:hover[b-vnct245uv8] {
    color: #94a3b8;
    border-color: #475569;
    background: rgba(255, 255, 255, 0.02);
}

/* Spinner */
.spinner[b-vnct245uv8] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-vnct245uv8 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes spin-b-vnct245uv8 {
    to { transform: rotate(360deg); }
}

/* ========================================
   LIGHT THEME
   ======================================== */
:root[data-theme="light"] .print-error-modal[b-vnct245uv8],
html[data-theme="light"] .print-error-modal[b-vnct245uv8] {
    background: #ffffff;
    border-color: #e5e7eb;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
}

:root[data-theme="light"] .modal-header[b-vnct245uv8],
html[data-theme="light"] .modal-header[b-vnct245uv8] {
    background: #fef2f2;
    border-bottom-color: #fecaca;
}

:root[data-theme="light"] .header-title[b-vnct245uv8],
html[data-theme="light"] .header-title[b-vnct245uv8] {
    color: #dc2626;
}

:root[data-theme="light"] .close-btn[b-vnct245uv8],
html[data-theme="light"] .close-btn[b-vnct245uv8] {
    color: #6b7280;
}

:root[data-theme="light"] .close-btn:hover[b-vnct245uv8],
html[data-theme="light"] .close-btn:hover[b-vnct245uv8] {
    color: #1f2937;
    background: rgba(0, 0, 0, 0.05);
}

:root[data-theme="light"] .reassurance[b-vnct245uv8],
html[data-theme="light"] .reassurance[b-vnct245uv8] {
    background: #f0fdf4;
    border-color: #86efac;
    color: #166534;
}

:root[data-theme="light"] .divider[b-vnct245uv8],
html[data-theme="light"] .divider[b-vnct245uv8] {
    border-top-color: #e5e7eb;
}

:root[data-theme="light"] .printer-info[b-vnct245uv8],
html[data-theme="light"] .printer-info[b-vnct245uv8] {
    color: #6b7280;
}

:root[data-theme="light"] .error-details[b-vnct245uv8],
html[data-theme="light"] .error-details[b-vnct245uv8] {
    background: #fef2f2;
    border-color: #fecaca;
}

:root[data-theme="light"] .error-details.error-config[b-vnct245uv8],
html[data-theme="light"] .error-details.error-config[b-vnct245uv8] {
    background: #fefce8;
    border-color: #fde047;
}

:root[data-theme="light"] .error-details.error-config .error-title[b-vnct245uv8],
html[data-theme="light"] .error-details.error-config .error-title[b-vnct245uv8] {
    color: #a16207;
}

:root[data-theme="light"] .error-details.error-agent[b-vnct245uv8],
html[data-theme="light"] .error-details.error-agent[b-vnct245uv8] {
    background: #fefce8;
    border-color: #fde047;
}

:root[data-theme="light"] .error-details.error-agent .error-title[b-vnct245uv8],
html[data-theme="light"] .error-details.error-agent .error-title[b-vnct245uv8] {
    color: #a16207;
}

:root[data-theme="light"] .agent-install-hint[b-vnct245uv8],
html[data-theme="light"] .agent-install-hint[b-vnct245uv8] {
    background: #fef9c3;
}

:root[data-theme="light"] .agent-hint-text[b-vnct245uv8],
html[data-theme="light"] .agent-hint-text[b-vnct245uv8] {
    color: #78350f;
}

:root[data-theme="light"] .agent-hint-text strong[b-vnct245uv8],
html[data-theme="light"] .agent-hint-text strong[b-vnct245uv8] {
    color: #92400e;
}

:root[data-theme="light"] .error-title[b-vnct245uv8],
html[data-theme="light"] .error-title[b-vnct245uv8] {
    color: #dc2626;
}

:root[data-theme="light"] .error-hint[b-vnct245uv8],
html[data-theme="light"] .error-hint[b-vnct245uv8] {
    color: #6b7280;
}

:root[data-theme="light"] .checklist[b-vnct245uv8],
html[data-theme="light"] .checklist[b-vnct245uv8] {
    color: #374151;
}

:root[data-theme="light"] .checklist li[b-vnct245uv8]::before,
html[data-theme="light"] .checklist li[b-vnct245uv8]::before {
    color: #9ca3af;
}

:root[data-theme="light"] .support-code[b-vnct245uv8],
html[data-theme="light"] .support-code[b-vnct245uv8] {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

:root[data-theme="light"] .support-code .code[b-vnct245uv8],
html[data-theme="light"] .support-code .code[b-vnct245uv8] {
    background: rgba(0, 0, 0, 0.05);
    color: #1e40af;
}

:root[data-theme="light"] .modal-actions[b-vnct245uv8],
html[data-theme="light"] .modal-actions[b-vnct245uv8] {
    background: #f8fafc;
    border-top-color: #e5e7eb;
}

:root[data-theme="light"] .btn-secondary[b-vnct245uv8],
html[data-theme="light"] .btn-secondary[b-vnct245uv8] {
    color: #6b7280;
    border-color: #d1d5db;
}

:root[data-theme="light"] .btn-secondary:hover[b-vnct245uv8],
html[data-theme="light"] .btn-secondary:hover[b-vnct245uv8] {
    background: #f3f4f6;
    color: #1f2937;
}

:root[data-theme="light"] .btn-tertiary[b-vnct245uv8],
html[data-theme="light"] .btn-tertiary[b-vnct245uv8] {
    color: #9ca3af;
    border-color: #e5e7eb;
}

:root[data-theme="light"] .btn-tertiary:hover[b-vnct245uv8],
html[data-theme="light"] .btn-tertiary:hover[b-vnct245uv8] {
    color: #6b7280;
    border-color: #d1d5db;
    background: #f9fafb;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 500px) {
    .print-error-modal[b-vnct245uv8] {
        width: 95%;
        max-height: 95vh;
        border-radius: 12px;
    }

    .modal-header[b-vnct245uv8] {
        padding: 14px 16px;
    }

    .modal-body[b-vnct245uv8] {
        padding: 16px;
    }

    .modal-actions[b-vnct245uv8] {
        padding: 14px 16px;
        flex-direction: column;
    }

    .modal-actions button[b-vnct245uv8] {
        min-width: 100%;
    }

    .support-code[b-vnct245uv8] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .support-code .code[b-vnct245uv8] {
        width: 100%;
        text-align: center;
    }
}
/* /Pages/Shared/Components/PrinterSetupModal.razor.rz.scp.css */
.printer-modal-backdrop[b-mebnxyw7tg] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn-b-mebnxyw7tg 0.2s ease;
}

@keyframes fadeIn-b-mebnxyw7tg {
    from { opacity: 0; }
    to { opacity: 1; }
}

.printer-modal[b-mebnxyw7tg] {
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    animation: slideUp-b-mebnxyw7tg 0.3s ease;
}

@keyframes slideUp-b-mebnxyw7tg {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header */
.modal-header[b-mebnxyw7tg] {
    padding: 24px;
    text-align: center;
    position: relative;
}

.modal-header h2[b-mebnxyw7tg] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
}

.modal-header .close-btn[b-mebnxyw7tg] {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.modal-header .close-btn:hover[b-mebnxyw7tg] {
    background: rgba(255, 255, 255, 0.3);
}

.header-icon[b-mebnxyw7tg] {
    font-size: 3rem;
    margin-bottom: 12px;
}

.icon-success[b-mebnxyw7tg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: white;
    border-radius: 50%;
    color: #22c55e;
    font-size: 2rem;
    font-weight: bold;
}

.icon-spinner[b-mebnxyw7tg] {
    display: inline-block;
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-mebnxyw7tg 1s linear infinite;
}

@keyframes spin-b-mebnxyw7tg {
    to { transform: rotate(360deg); }
}

/* Header colors */
.header-success[b-mebnxyw7tg] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.header-warning[b-mebnxyw7tg] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.header-error[b-mebnxyw7tg] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.header-disabled[b-mebnxyw7tg] {
    background: linear-gradient(135deg, #6b7280, #4b5563);
}

.header-waiting[b-mebnxyw7tg] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

/* Body */
.modal-body[b-mebnxyw7tg] {
    padding: 24px;
    max-height: 50vh;
    overflow-y: auto;
}

.success-message[b-mebnxyw7tg],
.info-message[b-mebnxyw7tg],
.warning-message[b-mebnxyw7tg],
.error-message[b-mebnxyw7tg],
.checking-message[b-mebnxyw7tg] {
    text-align: center;
    margin-bottom: 16px;
}

.success-message p[b-mebnxyw7tg],
.info-message p[b-mebnxyw7tg],
.checking-message p[b-mebnxyw7tg] {
    color: #374151;
    font-size: 1.1rem;
    margin: 8px 0;
}

.warning-message p[b-mebnxyw7tg],
.error-message p[b-mebnxyw7tg] {
    color: #374151;
    font-size: 1rem;
    margin: 8px 0;
}

.printer-name[b-mebnxyw7tg] {
    background: #f3f4f6;
    padding: 12px 16px;
    border-radius: 8px;
    font-family: monospace;
    font-size: 1rem !important;
    color: #1f2937 !important;
}

.hint[b-mebnxyw7tg] {
    color: #6b7280 !important;
    font-size: 0.95rem !important;
}

.error-detail[b-mebnxyw7tg] {
    background: #fef2f2;
    color: #dc2626 !important;
    padding: 12px;
    border-radius: 8px;
    font-size: 0.9rem !important;
}

/* Steps */
.steps[b-mebnxyw7tg] {
    margin-top: 20px;
}

.step[b-mebnxyw7tg] {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 12px;
    margin-bottom: 12px;
}

.step-number[b-mebnxyw7tg] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: #3b82f6;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
}

.step-content[b-mebnxyw7tg] {
    flex: 1;
}

.step-content strong[b-mebnxyw7tg] {
    display: block;
    color: #1f2937;
    margin-bottom: 4px;
}

.step-content p[b-mebnxyw7tg] {
    margin: 0;
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.4;
}

.download-btn[b-mebnxyw7tg] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 20px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.download-btn:hover[b-mebnxyw7tg] {
    background: #2563eb;
    color: white;
}

.start-agent-btn[b-mebnxyw7tg] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(22, 163, 74, 0.3);
}

.start-agent-btn:hover[b-mebnxyw7tg] {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(22, 163, 74, 0.4);
}

.step-success[b-mebnxyw7tg] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

/* Waiting State */
.waiting-state[b-mebnxyw7tg] {
    text-align: center;
    padding: 20px 0;
}

.waiting-animation[b-mebnxyw7tg] {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
}

.pulse-ring[b-mebnxyw7tg] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid #3b82f6;
    border-radius: 50%;
    animation: pulse-ring-b-mebnxyw7tg 1.5s ease-out infinite;
}

.pulse-dot[b-mebnxyw7tg] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
}

@keyframes pulse-ring-b-mebnxyw7tg {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.waiting-title[b-mebnxyw7tg] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 8px 0;
}

.waiting-hint[b-mebnxyw7tg] {
    color: #6b7280;
    font-size: 1rem;
    margin: 0 0 4px 0;
}

.waiting-filename[b-mebnxyw7tg] {
    font-family: monospace;
    background: #f3f4f6;
    padding: 8px 16px;
    border-radius: 8px;
    display: inline-block;
    color: #1f2937;
    font-weight: 600;
    margin: 8px 0;
}

.waiting-subhint[b-mebnxyw7tg] {
    color: #9ca3af;
    font-size: 0.9rem;
    margin: 8px 0 16px 0;
}

.waiting-progress[b-mebnxyw7tg] {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.progress-dot[b-mebnxyw7tg] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e5e7eb;
    transition: background 0.3s;
}

.progress-dot.active[b-mebnxyw7tg] {
    background: #3b82f6;
}

.waiting-tip[b-mebnxyw7tg] {
    margin-top: 20px;
    padding: 12px;
    background: #fef3c7;
    border-radius: 8px;
    color: #92400e;
    font-size: 0.9rem;
}

/* Troubleshoot */
.troubleshoot[b-mebnxyw7tg] {
    background: #fefce8;
    border: 1px solid #fde047;
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
}

.troubleshoot p[b-mebnxyw7tg] {
    margin: 0 0 12px 0;
    color: #854d0e;
}

.troubleshoot ul[b-mebnxyw7tg] {
    margin: 0;
    padding-left: 20px;
}

.troubleshoot li[b-mebnxyw7tg] {
    color: #713f12;
    font-size: 0.9rem;
    margin-bottom: 6px;
    line-height: 1.4;
}

/* Footer */
.modal-footer[b-mebnxyw7tg] {
    padding: 16px 24px 24px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    border-top: 1px solid #e5e7eb;
}

.btn-primary[b-mebnxyw7tg],
.btn-secondary[b-mebnxyw7tg] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.btn-primary[b-mebnxyw7tg] {
    background: #3b82f6;
    color: white;
}

.btn-primary:hover:not(:disabled)[b-mebnxyw7tg] {
    background: #2563eb;
}

.btn-primary:disabled[b-mebnxyw7tg] {
    background: #93c5fd;
    cursor: not-allowed;
}

.btn-secondary[b-mebnxyw7tg] {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

.btn-secondary:hover[b-mebnxyw7tg] {
    background: #e5e7eb;
}

.btn-spinner[b-mebnxyw7tg] {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-mebnxyw7tg 1s linear infinite;
}

/* Responsive */
@media (max-width: 480px) {
    .printer-modal[b-mebnxyw7tg] {
        width: 95%;
        max-height: 95vh;
    }

    .modal-header[b-mebnxyw7tg] {
        padding: 20px;
    }

    .modal-header h2[b-mebnxyw7tg] {
        font-size: 1.25rem;
    }

    .modal-body[b-mebnxyw7tg] {
        padding: 16px;
    }

    .step[b-mebnxyw7tg] {
        padding: 12px;
    }

    .modal-footer[b-mebnxyw7tg] {
        flex-direction: column;
    }

    .btn-primary[b-mebnxyw7tg],
    .btn-secondary[b-mebnxyw7tg] {
        width: 100%;
        justify-content: center;
    }
}
/* /Pages/Shared/Components/PrinterStatusChip.razor.rz.scp.css */
/* ========================================
   PRINTER STATUS CHIP
   A compact, always-visible printer status indicator
   ======================================== */

/* Container */
.printer-chip-container[b-kxa60dusiq] {
    position: relative;
    display: inline-block;
}

/* ========================================
   CHIP BUTTON (Collapsed State)
   ======================================== */
.printer-chip[b-kxa60dusiq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #e2e8f0;
}

.printer-chip:hover[b-kxa60dusiq] {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.15);
}

/* Status-based chip backgrounds */
.printer-chip.chip-ok[b-kxa60dusiq] {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.2);
}

.printer-chip.chip-ok:hover[b-kxa60dusiq] {
    background: rgba(34, 197, 94, 0.15);
}

.printer-chip.chip-error[b-kxa60dusiq] {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
}

.printer-chip.chip-error:hover[b-kxa60dusiq] {
    background: rgba(239, 68, 68, 0.2);
}

.printer-chip.chip-warning[b-kxa60dusiq] {
    background: rgba(234, 179, 8, 0.15);
    border-color: rgba(234, 179, 8, 0.3);
}

.printer-chip.chip-warning:hover[b-kxa60dusiq] {
    background: rgba(234, 179, 8, 0.2);
}

/* Printer icon */
.printer-icon[b-kxa60dusiq] {
    width: 16px;
    height: 16px;
    color: #e2e8f0;
    flex-shrink: 0;
}

/* Light-topbar contrast. The chip above is styled for a dark surface
   (near-white icon on translucent white). The POS topbar is
   `background: var(--card)` — light in the default/light theme — so the
   neutral chip washes out to near-zero contrast, and the topbar is the
   only place to spot printer trouble on a phone. Apply dark-on-light
   whenever the dark theme is NOT active (covers both an explicit
   data-theme="light" and the no-attribute default). The status-tinted
   variants keep their own (green/red/amber) backgrounds — these
   selectors are lower specificity than .printer-chip.chip-* — while the
   icon/text goes slate so it reads on the tinted fills too. */
html:not([data-theme="dark"]) .printer-chip[b-kxa60dusiq] {
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.15);
    color: #334155;
}
html:not([data-theme="dark"]) .printer-chip:hover[b-kxa60dusiq] {
    background: rgba(15, 23, 42, 0.09);
    border-color: rgba(15, 23, 42, 0.22);
}
html:not([data-theme="dark"]) .printer-icon[b-kxa60dusiq] {
    color: #334155;
}

/* ========================================
   STATUS DOTS
   ======================================== */
.status-dot[b-kxa60dusiq] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot.large[b-kxa60dusiq] {
    width: 10px;
    height: 10px;
}

.dot-grey[b-kxa60dusiq] {
    background: #6b7280;
}

.dot-green[b-kxa60dusiq] {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

.dot-yellow[b-kxa60dusiq] {
    background: #eab308;
    box-shadow: 0 0 6px rgba(234, 179, 8, 0.5);
}

.dot-red[b-kxa60dusiq] {
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
}

/* Pulse animation for errors */
.dot-red:not(.pulse)[b-kxa60dusiq] {
    animation: pulse-dot-b-kxa60dusiq 1.5s ease-in-out infinite;
}

@keyframes pulse-dot-b-kxa60dusiq {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.15);
    }
}

/* Pulse animation for checking state */
.pulse[b-kxa60dusiq] {
    animation: pulse-checking-b-kxa60dusiq 1s ease-in-out infinite;
}

@keyframes pulse-checking-b-kxa60dusiq {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* ========================================
   SPINNERS
   ======================================== */
.checking-spinner[b-kxa60dusiq],
.spinner[b-kxa60dusiq] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255,255,255,0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-kxa60dusiq 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes spin-b-kxa60dusiq {
    to { transform: rotate(360deg); }
}

/* ========================================
   POPUP
   ======================================== */
.popup-backdrop[b-kxa60dusiq] {
    position: fixed;
    inset: 0;
    z-index: 998;
}

.printer-popup[b-kxa60dusiq] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 300px;
    max-width: calc(100vw - 24px);
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
    z-index: 999;
    overflow: hidden;
    animation: popup-in-b-kxa60dusiq 0.15s ease-out;
}

@keyframes popup-in-b-kxa60dusiq {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header */
.popup-header[b-kxa60dusiq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid #334155;
    font-weight: 600;
    font-size: 14px;
    color: #f1f5f9;
}

.close-btn[b-kxa60dusiq] {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 16px;
    padding: 4px 6px;
    border-radius: 4px;
    line-height: 1;
    transition: all 0.15s;
}

.close-btn:hover[b-kxa60dusiq] {
    color: #f1f5f9;
    background: rgba(255,255,255,0.1);
}

/* Body */
.popup-body[b-kxa60dusiq] {
    padding: 16px;
}

.status-row[b-kxa60dusiq] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.status-text[b-kxa60dusiq] {
    font-weight: 600;
    color: #f1f5f9;
    font-size: 15px;
}

/* Printer details */
.printer-details[b-kxa60dusiq] {
    margin-bottom: 12px;
}

.detail-row[b-kxa60dusiq] {
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 4px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

.detail-row.terminal[b-kxa60dusiq] {
    color: #64748b;
    font-family: inherit;
}

/* Info box (for not configured / disabled states) */
.info-box[b-kxa60dusiq] {
    margin: 12px 0;
    padding: 10px 12px;
    background: rgba(100, 116, 139, 0.15);
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 8px;
    font-size: 13px;
    color: #94a3b8;
}

/* Error box */
.error-box[b-kxa60dusiq] {
    margin: 12px 0;
    padding: 10px 12px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 8px;
    font-size: 13px;
    color: #fca5a5;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.error-icon[b-kxa60dusiq] {
    flex-shrink: 0;
    font-size: 14px;
}

/* Agent install box */
.agent-box[b-kxa60dusiq] {
    margin: 12px 0;
    padding: 10px 12px;
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.25);
    border-radius: 8px;
    font-size: 13px;
    color: #fde047;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.agent-icon[b-kxa60dusiq] {
    flex-shrink: 0;
    font-size: 16px;
}

.agent-text[b-kxa60dusiq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.agent-text strong[b-kxa60dusiq] {
    font-weight: 600;
}

.agent-text span[b-kxa60dusiq] {
    font-size: 12px;
    opacity: 0.85;
}

:root[data-theme="light"] .agent-box[b-kxa60dusiq],
html[data-theme="light"] .agent-box[b-kxa60dusiq] {
    background: #fefce8;
    border-color: #fde047;
    color: #a16207;
}

/* Link agent button - appears when agent detected but wrong slug */
.btn-link-agent[b-kxa60dusiq] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    margin-top: 8px;
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    color: #60a5fa;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-link-agent:hover:not(:disabled)[b-kxa60dusiq] {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.5);
}

.btn-link-agent:disabled[b-kxa60dusiq] {
    opacity: 0.6;
    cursor: not-allowed;
}

:root[data-theme="light"] .btn-link-agent[b-kxa60dusiq],
html[data-theme="light"] .btn-link-agent[b-kxa60dusiq] {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #2563eb;
}

:root[data-theme="light"] .btn-link-agent:hover:not(:disabled)[b-kxa60dusiq],
html[data-theme="light"] .btn-link-agent:hover:not(:disabled)[b-kxa60dusiq] {
    background: #dbeafe;
}

/* Agent version display */
.agent-version[b-kxa60dusiq] {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.outdated-badge[b-kxa60dusiq] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 2px 6px;
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border-radius: 4px;
    letter-spacing: 0.3px;
}

:root[data-theme="light"] .outdated-badge[b-kxa60dusiq],
html[data-theme="light"] .outdated-badge[b-kxa60dusiq] {
    background: #fef2f2;
    color: #dc2626;
}

/* Warning box (for outdated agent, not running) */
.warning-box[b-kxa60dusiq] {
    margin: 12px 0;
    padding: 10px 12px;
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.25);
    border-radius: 8px;
    font-size: 13px;
    color: #fde047;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.warning-icon[b-kxa60dusiq] {
    flex-shrink: 0;
    font-size: 16px;
}

.warning-text[b-kxa60dusiq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.warning-text strong[b-kxa60dusiq] {
    font-weight: 600;
}

.warning-text span[b-kxa60dusiq] {
    font-size: 12px;
    opacity: 0.85;
}

:root[data-theme="light"] .warning-box[b-kxa60dusiq],
html[data-theme="light"] .warning-box[b-kxa60dusiq] {
    background: #fefce8;
    border-color: #fde047;
    color: #a16207;
}

/* Last print time */
.last-print[b-kxa60dusiq] {
    font-size: 12px;
    color: #64748b;
    margin-top: 8px;
}

/* ========================================
   ACTIONS
   ======================================== */
.popup-actions[b-kxa60dusiq] {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(0,0,0,0.15);
    border-top: 1px solid #334155;
}

.popup-actions button[b-kxa60dusiq] {
    flex: 1;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-test[b-kxa60dusiq] {
    background: #3b82f6;
    color: white;
    border: none;
}

.btn-test:hover:not(:disabled)[b-kxa60dusiq] {
    background: #2563eb;
}

.btn-test:disabled[b-kxa60dusiq] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-config[b-kxa60dusiq] {
    background: transparent;
    color: #94a3b8;
    border: 1px solid #475569;
}

.btn-config:hover[b-kxa60dusiq] {
    background: rgba(255,255,255,0.05);
    color: #f1f5f9;
    border-color: #64748b;
}

.btn-config.primary[b-kxa60dusiq] {
    background: #3b82f6;
    color: white;
    border: none;
}

.btn-config.primary:hover[b-kxa60dusiq] {
    background: #2563eb;
}

/* ========================================
   LIGHT THEME OVERRIDES
   ======================================== */
:root[data-theme="light"] .printer-chip[b-kxa60dusiq],
html[data-theme="light"] .printer-chip[b-kxa60dusiq] {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.1);
    color: #374151;
}

:root[data-theme="light"] .printer-chip:hover[b-kxa60dusiq],
html[data-theme="light"] .printer-chip:hover[b-kxa60dusiq] {
    background: rgba(0,0,0,0.08);
}

:root[data-theme="light"] .printer-chip.chip-ok[b-kxa60dusiq],
html[data-theme="light"] .printer-chip.chip-ok[b-kxa60dusiq] {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.25);
}

:root[data-theme="light"] .printer-chip.chip-error[b-kxa60dusiq],
html[data-theme="light"] .printer-chip.chip-error[b-kxa60dusiq] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.25);
}

:root[data-theme="light"] .printer-chip.chip-warning[b-kxa60dusiq],
html[data-theme="light"] .printer-chip.chip-warning[b-kxa60dusiq] {
    background: rgba(234, 179, 8, 0.1);
    border-color: rgba(234, 179, 8, 0.25);
}

:root[data-theme="light"] .printer-icon[b-kxa60dusiq],
html[data-theme="light"] .printer-icon[b-kxa60dusiq] {
    color: #374151;
}

:root[data-theme="light"] .checking-spinner[b-kxa60dusiq],
html[data-theme="light"] .checking-spinner[b-kxa60dusiq] {
    border-color: rgba(0,0,0,0.15);
    border-top-color: #374151;
}

:root[data-theme="light"] .printer-popup[b-kxa60dusiq],
html[data-theme="light"] .printer-popup[b-kxa60dusiq] {
    background: #ffffff;
    border-color: #e5e7eb;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

:root[data-theme="light"] .popup-header[b-kxa60dusiq],
html[data-theme="light"] .popup-header[b-kxa60dusiq] {
    background: #f8fafc;
    border-color: #e5e7eb;
    color: #1f2937;
}

:root[data-theme="light"] .close-btn[b-kxa60dusiq],
html[data-theme="light"] .close-btn[b-kxa60dusiq] {
    color: #6b7280;
}

:root[data-theme="light"] .close-btn:hover[b-kxa60dusiq],
html[data-theme="light"] .close-btn:hover[b-kxa60dusiq] {
    color: #1f2937;
    background: rgba(0,0,0,0.05);
}

:root[data-theme="light"] .status-text[b-kxa60dusiq],
html[data-theme="light"] .status-text[b-kxa60dusiq] {
    color: #1f2937;
}

:root[data-theme="light"] .detail-row[b-kxa60dusiq],
html[data-theme="light"] .detail-row[b-kxa60dusiq] {
    color: #6b7280;
}

:root[data-theme="light"] .detail-row.terminal[b-kxa60dusiq],
html[data-theme="light"] .detail-row.terminal[b-kxa60dusiq] {
    color: #9ca3af;
}

:root[data-theme="light"] .info-box[b-kxa60dusiq],
html[data-theme="light"] .info-box[b-kxa60dusiq] {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #6b7280;
}

:root[data-theme="light"] .error-box[b-kxa60dusiq],
html[data-theme="light"] .error-box[b-kxa60dusiq] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

:root[data-theme="light"] .last-print[b-kxa60dusiq],
html[data-theme="light"] .last-print[b-kxa60dusiq] {
    color: #9ca3af;
}

:root[data-theme="light"] .popup-actions[b-kxa60dusiq],
html[data-theme="light"] .popup-actions[b-kxa60dusiq] {
    background: #f8fafc;
    border-color: #e5e7eb;
}

:root[data-theme="light"] .btn-config[b-kxa60dusiq],
html[data-theme="light"] .btn-config[b-kxa60dusiq] {
    color: #6b7280;
    border-color: #d1d5db;
}

:root[data-theme="light"] .btn-config:hover[b-kxa60dusiq],
html[data-theme="light"] .btn-config:hover[b-kxa60dusiq] {
    background: #f3f4f6;
    color: #1f2937;
}

:root[data-theme="light"] .spinner[b-kxa60dusiq],
html[data-theme="light"] .spinner[b-kxa60dusiq] {
    border-color: rgba(255,255,255,0.3);
    border-top-color: #fff;
}

/* ========================================
   PENDING BADGE
   ======================================== */
.pending-badge[b-kxa60dusiq] {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #ef4444;
    color: white;
    font-size: 11px;
    font-weight: 700;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    animation: badge-pulse-b-kxa60dusiq 2s ease-in-out infinite;
}

@keyframes badge-pulse-b-kxa60dusiq {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ========================================
   PENDING BUTTON (in popup)
   ======================================== */
.btn-pending[b-kxa60dusiq] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 14px;
    margin-top: 12px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    color: #fca5a5;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-pending:hover[b-kxa60dusiq] {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
}

.btn-pending .arrow[b-kxa60dusiq] {
    margin-left: auto;
    opacity: 0.6;
}

/* Light theme pending */
:root[data-theme="light"] .pending-badge[b-kxa60dusiq],
html[data-theme="light"] .pending-badge[b-kxa60dusiq] {
    background: #dc2626;
}

:root[data-theme="light"] .btn-pending[b-kxa60dusiq],
html[data-theme="light"] .btn-pending[b-kxa60dusiq] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

:root[data-theme="light"] .btn-pending:hover[b-kxa60dusiq],
html[data-theme="light"] .btn-pending:hover[b-kxa60dusiq] {
    background: #fee2e2;
}

/* Phone: the absolute popup (top: 100%+8px) was clipped by the POS topbar's
   .left-section{overflow:hidden} and read as "tucked under the basket". Make it
   a fixed bottom sheet (same pattern as the ⚙️ Sistema sheet) so it escapes the
   clip and sits above everything; the existing .popup-backdrop (fixed) dims the
   rest and closes on tap. */
@media (max-width: 600px) {
    .printer-popup[b-kxa60dusiq] {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        max-height: 80vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 16px 16px 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        z-index: 1000;
    }
}
/* /Pages/Shared/Components/PrintQueueToast.razor.rz.scp.css */
.print-queue-toast[b-dea1yf8j3m] {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    z-index: 10001;
    animation: slideUp-b-dea1yf8j3m 0.3s ease;
}

@keyframes slideUp-b-dea1yf8j3m {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.toast-icon[b-dea1yf8j3m] {
    font-size: 1.2rem;
}

.toast-message[b-dea1yf8j3m] {
    white-space: nowrap;
}

.toast-spinner[b-dea1yf8j3m] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-dea1yf8j3m 1s linear infinite;
}

@keyframes spin-b-dea1yf8j3m {
    to { transform: rotate(360deg); }
}

/* Toast types */
.toast-info[b-dea1yf8j3m] {
    background: #3b82f6;
    color: white;
}

.toast-success[b-dea1yf8j3m] {
    background: #22c55e;
    color: white;
}

.toast-warning[b-dea1yf8j3m] {
    background: #f59e0b;
    color: white;
}

.toast-error[b-dea1yf8j3m] {
    background: #ef4444;
    color: white;
}

/* Responsive */
@media (max-width: 480px) {
    .print-queue-toast[b-dea1yf8j3m] {
        left: 10px;
        right: 10px;
        transform: none;
        bottom: 10px;
    }
}
/* /Pages/Shared/Components/PublicFooter.razor.rz.scp.css */
.pf-footer[b-yn6kp0wq5l] {
    background: #0a0c12;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: #94a3b8;
    margin-top: auto;
}

.pf-inner[b-yn6kp0wq5l] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 56px 24px 32px;
}

.pf-grid[b-yn6kp0wq5l] {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.pf-brand[b-yn6kp0wq5l] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #f1f5f9;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.15rem;
    margin-bottom: 12px;
}

.pf-logo[b-yn6kp0wq5l] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #c62828 0%, #ef4444 100%);
    color: #fff;
    border-radius: 8px;
    font-weight: 900;
    font-size: 1rem;
}

.pf-brand-accent[b-yn6kp0wq5l] {
    color: #94a3b8;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.pf-tag[b-yn6kp0wq5l] {
    color: #94a3b8;
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0 0 18px;
    max-width: 280px;
}

.pf-social[b-yn6kp0wq5l] {
    display: flex;
    gap: 10px;
}

.pf-social a[b-yn6kp0wq5l] {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s, transform 0.1s;
}

.pf-social a:hover[b-yn6kp0wq5l] {
    color: #ef4444;
    border-color: #ef4444;
    transform: translateY(-1px);
}

.pf-col h4[b-yn6kp0wq5l] {
    color: #f1f5f9;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 14px;
}

.pf-col a[b-yn6kp0wq5l] {
    display: block;
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.92rem;
    padding: 5px 0;
    transition: color 0.15s;
}

.pf-col a:hover[b-yn6kp0wq5l] {
    color: #f1f5f9;
}

.pf-bottom[b-yn6kp0wq5l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: #64748b;
    font-size: 0.82rem;
}

@media (max-width: 880px) {
    .pf-grid[b-yn6kp0wq5l] {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .pf-brand-col[b-yn6kp0wq5l] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .pf-grid[b-yn6kp0wq5l] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Shared/Components/PublicHeader.razor.rz.scp.css */
.ph-header[b-uahptqgq2p] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(15, 17, 23, 0.6);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid transparent;
    transition: background 0.25s, border-color 0.25s;
}

.ph-header.ph-scrolled[b-uahptqgq2p] {
    background: rgba(15, 17, 23, 0.92);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.ph-inner[b-uahptqgq2p] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 32px;
}

.ph-brand[b-uahptqgq2p] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #f1f5f9;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.18rem;
    letter-spacing: -0.01em;
    flex-shrink: 0;
}

.ph-logo[b-uahptqgq2p] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #c62828 0%, #ef4444 100%);
    color: #fff;
    border-radius: 8px;
    font-weight: 900;
    font-size: 1.05rem;
    box-shadow: 0 2px 8px rgba(198, 40, 40, 0.4);
}

.ph-brand-accent[b-uahptqgq2p] {
    color: #94a3b8;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-left: 2px;
}

.ph-nav[b-uahptqgq2p] {
    display: flex;
    gap: 28px;
    align-items: center;
}

.ph-nav a[b-uahptqgq2p] {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    transition: color 0.15s;
    position: relative;
    padding: 4px 0;
}

.ph-nav a:hover[b-uahptqgq2p] {
    color: #f1f5f9;
}

.ph-nav a.active[b-uahptqgq2p] {
    color: #f1f5f9;
}

.ph-nav a.active[b-uahptqgq2p]::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #c62828, #ef4444);
    border-radius: 2px;
}

.ph-actions[b-uahptqgq2p] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.ph-link-secondary[b-uahptqgq2p] {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    padding: 8px 12px;
    transition: color 0.15s;
}

.ph-link-secondary:hover[b-uahptqgq2p] {
    color: #f1f5f9;
}

.ph-cta[b-uahptqgq2p] {
    background: linear-gradient(135deg, #c62828 0%, #ef4444 100%);
    color: #fff !important;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 700;
    transition: transform 0.1s, box-shadow 0.15s;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3);
}

.ph-cta:hover[b-uahptqgq2p] {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(239, 68, 68, 0.45);
}

.ph-menu-btn[b-uahptqgq2p] {
    display: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    margin-left: auto;
}

.ph-menu-icon[b-uahptqgq2p] {
    font-size: 1.2rem;
    line-height: 1;
}

.ph-mobile[b-uahptqgq2p] {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 16px 24px 24px;
    background: rgba(15, 17, 23, 0.98);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px);
}

.ph-mobile a[b-uahptqgq2p] {
    color: #f1f5f9;
    text-decoration: none;
    padding: 12px 8px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
}

.ph-mobile a:hover[b-uahptqgq2p] {
    background: rgba(255, 255, 255, 0.04);
}

.ph-mobile hr[b-uahptqgq2p] {
    border: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 8px 0;
}

.ph-mobile-secondary[b-uahptqgq2p] {
    color: #cbd5e1 !important;
}

.ph-mobile-cta[b-uahptqgq2p] {
    background: linear-gradient(135deg, #c62828 0%, #ef4444 100%);
    color: #fff !important;
    text-align: center;
    font-weight: 700 !important;
    margin-top: 4px;
}

@media (max-width: 880px) {
    .ph-nav[b-uahptqgq2p], .ph-actions[b-uahptqgq2p] {
        display: none;
    }
    .ph-menu-btn[b-uahptqgq2p] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .ph-mobile[b-uahptqgq2p] {
        display: flex;
    }
}
/* /Pages/Shared/Components/QuantityBox.razor.rz.scp.css */
/* A box holding text it cannot read, and its hint. Scoped (no style element beside the input: see QuantityBox.razor). */
/* Doubled class: a page's own border rule (the catalogue's modifier window in admin-pages.css) outranked it. */
input.quantity-invalid.quantity-invalid[b-zr6uoflk5g] {
    border-color: var(--adm-fg-ef4444, #ef4444) !important;
}

.quantity-hint[b-zr6uoflk5g] {
    display: block;
    margin-top: 4px;
    font-size: .8rem;
    color: var(--adm-fg-ef4444, #ef4444);
}
/* /Pages/Shared/Components/QuickStockPanel.razor.rz.scp.css */
/* QuickStockPanel - Slide-out side panel for rapid stock management */

.stock-panel-backdrop[b-o44ngblltz] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 900;
    animation: fadeIn-b-o44ngblltz .2s ease-out;
}

.stock-panel[b-o44ngblltz] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 94vw;
    background: var(--bg, #f9fafb);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.2);
    z-index: 901;
    display: flex;
    flex-direction: column;
    animation: slideIn-b-o44ngblltz .25s ease-out;
}

@keyframes fadeIn-b-o44ngblltz {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn-b-o44ngblltz {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* Header */
.sp-header[b-o44ngblltz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--card, #fff);
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.sp-title[b-o44ngblltz] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--ink, #1f2937);
}

.sp-icon[b-o44ngblltz] {
    font-size: 24px;
}

.sp-close[b-o44ngblltz] {
    width: 40px;
    height: 40px;
    border: none;
    background: var(--bg, #f3f4f6);
    border-radius: 8px;
    font-size: 24px;
    color: var(--muted, #6b7280);
    cursor: pointer;
    transition: all .15s;
}

.sp-close:hover[b-o44ngblltz] {
    background: var(--border, #e5e7eb);
    color: var(--ink, #1f2937);
}

/* Search */
.sp-search[b-o44ngblltz] {
    position: relative;
    padding: 12px 16px;
    background: var(--card, #fff);
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.sp-search input[b-o44ngblltz] {
    width: 100%;
    padding: 12px 40px 12px 16px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    font-size: 15px;
    background: var(--bg, #f9fafb);
    color: var(--ink, #1f2937);
    transition: all .15s;
}

.sp-search input:focus[b-o44ngblltz] {
    outline: none;
    border-color: var(--brand, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.sp-search-clear[b-o44ngblltz] {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    background: var(--border, #e5e7eb);
    border-radius: 50%;
    font-size: 16px;
    color: var(--muted, #6b7280);
    cursor: pointer;
}

/* Category Tabs */
.sp-categories[b-o44ngblltz] {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: var(--card, #fff);
    border-bottom: 1px solid var(--border, #e5e7eb);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sp-categories[b-o44ngblltz]::-webkit-scrollbar {
    display: none;
}

.sp-cat[b-o44ngblltz] {
    flex-shrink: 0;
    padding: 8px 16px;
    border: 1px solid var(--border, #e5e7eb);
    background: var(--bg, #f9fafb);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted, #6b7280);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}

.sp-cat:hover[b-o44ngblltz] {
    border-color: var(--brand, #3b82f6);
    color: var(--brand, #3b82f6);
}

.sp-cat.active[b-o44ngblltz] {
    background: var(--brand, #3b82f6);
    border-color: var(--brand, #3b82f6);
    color: #fff;
}

/* Items Grid */
.sp-items[b-o44ngblltz] {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sp-loading[b-o44ngblltz],
.sp-empty[b-o44ngblltz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--muted, #6b7280);
    gap: 12px;
}

.sp-spinner[b-o44ngblltz] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border, #e5e7eb);
    border-top-color: var(--brand, #3b82f6);
    border-radius: 50%;
    animation: spin-b-o44ngblltz 1s linear infinite;
}

@keyframes spin-b-o44ngblltz {
    to { transform: rotate(360deg); }
}

.sp-empty-icon[b-o44ngblltz] {
    font-size: 48px;
    opacity: 0.5;
}

.sp-empty.sp-error[b-o44ngblltz] {
    color: #991b1b;
}

.sp-empty.sp-error .sp-empty-icon[b-o44ngblltz] {
    opacity: 1;
}

.sp-retry-btn[b-o44ngblltz] {
    margin-top: 12px;
    padding: 8px 16px;
    border: 1px solid var(--border, #e5e7eb);
    background: var(--card, #fff);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink, #1f2937);
    cursor: pointer;
    transition: all .15s;
}

.sp-retry-btn:hover[b-o44ngblltz] {
    background: var(--bg, #f9fafb);
    border-color: var(--brand, #3b82f6);
    color: var(--brand, #3b82f6);
}

:root[data-theme="dark"] .sp-empty.sp-error[b-o44ngblltz] {
    color: #fca5a5;
}

:root[data-theme="dark"] .sp-retry-btn[b-o44ngblltz] {
    background: #21262d;
    border-color: #30363d;
    color: #e6edf3;
}

:root[data-theme="dark"] .sp-retry-btn:hover[b-o44ngblltz] {
    background: #30363d;
    border-color: #58a6ff;
    color: #58a6ff;
}

/* Item Card - Stacked Layout */
.sp-item[b-o44ngblltz] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    background: var(--card, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    transition: all .15s;
}

.sp-item:hover[b-o44ngblltz] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.sp-item.low-stock[b-o44ngblltz] {
    border-color: #fbbf24;
    background: #fffbeb;
}

.sp-item.sold-out[b-o44ngblltz] {
    border-color: #ef4444;
    background: #fef2f2;
    opacity: 0.85;
}

.sp-item-info[b-o44ngblltz] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.sp-item-img[b-o44ngblltz] {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.sp-item-placeholder[b-o44ngblltz] {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sp-item-details[b-o44ngblltz] {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 1px;
    min-width: 0;
}

.sp-item-name[b-o44ngblltz] {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink, #1f2937);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-item-meta[b-o44ngblltz] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.sp-item-category[b-o44ngblltz] {
    font-size: 11px;
    color: var(--muted, #6b7280);
}

/* "Puedes hacer N" badge — derived from ingredient recipe stock */
.sp-can-make[b-o44ngblltz] {
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(34, 197, 94, .12);
    color: #16a34a;
    white-space: nowrap;
}

.sp-can-make.low[b-o44ngblltz] {
    background: rgba(245, 158, 11, .15);
    color: #d97706;
}

.sp-can-make.none[b-o44ngblltz] {
    background: rgba(239, 68, 68, .15);
    color: #dc2626;
}

:root[data-theme="dark"] .sp-can-make[b-o44ngblltz] {
    background: rgba(34, 197, 94, .18);
    color: #4ade80;
}
:root[data-theme="dark"] .sp-can-make.low[b-o44ngblltz] {
    background: rgba(245, 158, 11, .2);
    color: #fbbf24;
}
:root[data-theme="dark"] .sp-can-make.none[b-o44ngblltz] {
    background: rgba(239, 68, 68, .2);
    color: #f87171;
}

/* 86 reason badge */
.sp-reason[b-o44ngblltz] {
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(107, 114, 128, .15);
    color: #6b7280;
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-reason.auto[b-o44ngblltz] {
    background: rgba(139, 92, 246, .14);
    color: #7c3aed;
}

:root[data-theme="dark"] .sp-reason[b-o44ngblltz] {
    background: rgba(148, 163, 184, .2);
    color: #cbd5e1;
}
:root[data-theme="dark"] .sp-reason.auto[b-o44ngblltz] {
    background: rgba(167, 139, 250, .2);
    color: #c4b5fd;
}

/* 86 reason quick-chip row */
.sp-reason-chips[b-o44ngblltz] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.sp-reason-chip[b-o44ngblltz] {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--line, #e5e7eb);
    background: transparent;
    color: var(--muted, #6b7280);
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

.sp-reason-chip:hover[b-o44ngblltz] { border-color: #8b5cf6; color: #7c3aed; }
.sp-reason-chip.active[b-o44ngblltz] { background: #8b5cf6; border-color: #8b5cf6; color: #fff; }

:root[data-theme="dark"] .sp-reason-chip[b-o44ngblltz] { border-color: #374151; color: #9ca3af; }
:root[data-theme="dark"] .sp-reason-chip.active[b-o44ngblltz] { background: #8b5cf6; border-color: #8b5cf6; color: #fff; }

/* "edit reason" pencil button (only shown for sold-out items) */
.sp-reason-btn[b-o44ngblltz] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--line, #e5e7eb);
    background: transparent;
    color: var(--muted, #6b7280);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    flex: 0 0 auto;
}
.sp-reason-btn:hover[b-o44ngblltz] { border-color: #8b5cf6; color: #7c3aed; }
.sp-reason-btn.active[b-o44ngblltz] { background: #8b5cf6; border-color: #8b5cf6; color: #fff; }

:root[data-theme="dark"] .sp-reason-btn[b-o44ngblltz] { border-color: #374151; color: #9ca3af; }

/* Item Controls */
.sp-item-controls[b-o44ngblltz] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}

.sp-stock-display[b-o44ngblltz] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sp-adjust-btn[b-o44ngblltz] {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border, #e5e7eb);
    background: var(--bg, #f9fafb);
    border-radius: 8px;
    font-size: 18px;
    font-weight: 500;
    color: var(--ink, #1f2937);
    cursor: pointer;
    transition: all .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-adjust-btn:hover:not(:disabled)[b-o44ngblltz] {
    background: var(--brand, #3b82f6);
    border-color: var(--brand, #3b82f6);
    color: #fff;
}

.sp-adjust-btn:disabled[b-o44ngblltz] {
    opacity: 0.4;
    cursor: not-allowed;
}

.sp-adjust-btn.minus:hover:not(:disabled)[b-o44ngblltz] {
    background: #ef4444;
    border-color: #ef4444;
}

.sp-adjust-btn.plus:hover:not(:disabled)[b-o44ngblltz] {
    background: #22c55e;
    border-color: #22c55e;
}

/* Active states for touch feedback */
.sp-adjust-btn:active:not(:disabled)[b-o44ngblltz] {
    transform: scale(0.92);
}

.sp-adjust-btn.minus:active:not(:disabled)[b-o44ngblltz] {
    background: #dc2626;
    border-color: #dc2626;
}

.sp-adjust-btn.plus:active:not(:disabled)[b-o44ngblltz] {
    background: #16a34a;
    border-color: #16a34a;
}

.sp-stock-input[b-o44ngblltz] {
    width: 56px;
    height: 36px;
    padding: 0 4px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    color: var(--ink, #1f2937);
    background: var(--card, #fff);
}

.sp-stock-input:focus[b-o44ngblltz] {
    outline: none;
    border-color: var(--brand, #3b82f6);
}

/* Remove spinner buttons from number input */
.sp-stock-input[b-o44ngblltz]::-webkit-outer-spin-button,
.sp-stock-input[b-o44ngblltz]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.sp-stock-input[type=number][b-o44ngblltz] {
    -moz-appearance: textfield;
}

.sp-86-btn[b-o44ngblltz] {
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border, #e5e7eb);
    background: var(--bg, #f9fafb);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted, #6b7280);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}

.sp-86-btn:hover[b-o44ngblltz] {
    border-color: #ef4444;
    color: #ef4444;
}

.sp-86-btn.active[b-o44ngblltz] {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

.sp-86-btn:active[b-o44ngblltz] {
    transform: scale(0.95);
}

/* Voice Help (compact) */
.sp-voice-help[b-o44ngblltz] {
    padding: 8px 16px;
    background: var(--card, #fff);
    border-top: 1px solid var(--border, #e5e7eb);
}

.sp-help-hint[b-o44ngblltz] {
    font-size: 11px;
    color: var(--muted, #6b7280);
    line-height: 1.4;
}

.sp-help-hint code[b-o44ngblltz] {
    background: var(--bg, #f3f4f6);
    padding: 1px 4px;
    border-radius: 3px;
    font-family: monospace;
    font-size: 10px;
    color: var(--ink, #374151);
}

.sp-voice-result[b-o44ngblltz] {
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
}

.sp-voice-result.success[b-o44ngblltz] {
    background: #dcfce7;
    color: #166534;
}

.sp-voice-result.error[b-o44ngblltz] {
    background: #fef2f2;
    color: #991b1b;
}

/* Footer */
.sp-footer[b-o44ngblltz] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--card, #fff);
    border-top: 1px solid var(--border, #e5e7eb);
}

.sp-lang-btn[b-o44ngblltz] {
    width: 44px;
    height: 44px;
    border: 1px solid var(--border, #e5e7eb);
    background: var(--bg, #f9fafb);
    border-radius: 10px;
    font-size: 22px;
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
}

.sp-lang-btn:hover[b-o44ngblltz] {
    background: var(--border, #e5e7eb);
}

.sp-voice-btn[b-o44ngblltz],
.sp-refresh-btn[b-o44ngblltz] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid var(--border, #e5e7eb);
    background: var(--bg, #f9fafb);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink, #1f2937);
    cursor: pointer;
    transition: all .15s;
}

.sp-voice-btn:hover[b-o44ngblltz],
.sp-refresh-btn:hover:not(:disabled)[b-o44ngblltz] {
    background: var(--brand, #3b82f6);
    border-color: var(--brand, #3b82f6);
    color: #fff;
}

.sp-refresh-btn:disabled[b-o44ngblltz] {
    opacity: 0.5;
    cursor: not-allowed;
}

.sp-voice-btn.listening[b-o44ngblltz] {
    background: #22c55e;
    border-color: #22c55e;
    color: #fff;
    animation: pulse-b-o44ngblltz 1s infinite;
}

@keyframes pulse-b-o44ngblltz {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.sp-mic-icon[b-o44ngblltz] {
    font-size: 20px;
}

.sp-voice-btn.disabled[b-o44ngblltz] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* No stock tracking indicator */
.sp-no-track[b-o44ngblltz] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 0 12px;
    height: 36px;
    font-size: 18px;
    color: var(--muted, #9ca3af);
    cursor: help;
}

/* Dark Theme */
:root[data-theme="dark"] .stock-panel-backdrop[b-o44ngblltz] {
    background: rgba(0, 0, 0, 0.7);
}

:root[data-theme="dark"] .stock-panel[b-o44ngblltz] {
    background: #0d1117;
}

:root[data-theme="dark"] .sp-header[b-o44ngblltz],
:root[data-theme="dark"] .sp-search[b-o44ngblltz],
:root[data-theme="dark"] .sp-categories[b-o44ngblltz],
:root[data-theme="dark"] .sp-footer[b-o44ngblltz] {
    background: #161b22;
    border-color: #30363d;
}

:root[data-theme="dark"] .sp-title[b-o44ngblltz] {
    color: #e6edf3;
}

:root[data-theme="dark"] .sp-close[b-o44ngblltz] {
    background: #21262d;
    color: #8b949e;
}

:root[data-theme="dark"] .sp-close:hover[b-o44ngblltz] {
    background: #30363d;
    color: #e6edf3;
}

:root[data-theme="dark"] .sp-search input[b-o44ngblltz] {
    background: #0d1117;
    border-color: #30363d;
    color: #e6edf3;
}

:root[data-theme="dark"] .sp-search input:focus[b-o44ngblltz] {
    border-color: #58a6ff;
}

:root[data-theme="dark"] .sp-search-clear[b-o44ngblltz] {
    background: #30363d;
    color: #8b949e;
}

:root[data-theme="dark"] .sp-cat[b-o44ngblltz] {
    background: #21262d;
    border-color: #30363d;
    color: #8b949e;
}

:root[data-theme="dark"] .sp-cat:hover[b-o44ngblltz] {
    border-color: #58a6ff;
    color: #58a6ff;
}

:root[data-theme="dark"] .sp-cat.active[b-o44ngblltz] {
    background: #238636;
    border-color: #238636;
}

:root[data-theme="dark"] .sp-item[b-o44ngblltz] {
    background: #161b22;
    border-color: #30363d;
}

:root[data-theme="dark"] .sp-item.low-stock[b-o44ngblltz] {
    background: #3d2f0b;
    border-color: #d29922;
}

:root[data-theme="dark"] .sp-item.sold-out[b-o44ngblltz] {
    background: #3d1f1f;
    border-color: #f85149;
}

:root[data-theme="dark"] .sp-item-name[b-o44ngblltz] {
    color: #e6edf3;
}

:root[data-theme="dark"] .sp-item-category[b-o44ngblltz] {
    color: #8b949e;
}

:root[data-theme="dark"] .sp-adjust-btn[b-o44ngblltz] {
    background: #21262d;
    border-color: #30363d;
    color: #e6edf3;
}

:root[data-theme="dark"] .sp-stock-input[b-o44ngblltz] {
    background: #0d1117;
    border-color: #30363d;
    color: #e6edf3;
}

:root[data-theme="dark"] .sp-86-btn[b-o44ngblltz] {
    background: #21262d;
    border-color: #30363d;
    color: #8b949e;
}

:root[data-theme="dark"] .sp-voice-help[b-o44ngblltz] {
    background: #161b22;
    border-color: #30363d;
}

:root[data-theme="dark"] .sp-help-hint[b-o44ngblltz] {
    color: #8b949e;
}

:root[data-theme="dark"] .sp-help-hint code[b-o44ngblltz] {
    background: #21262d;
    color: #e6edf3;
}

:root[data-theme="dark"] .sp-voice-result.success[b-o44ngblltz] {
    background: #052e16;
    color: #86efac;
}

:root[data-theme="dark"] .sp-voice-result.error[b-o44ngblltz] {
    background: #450a0a;
    color: #fca5a5;
}

:root[data-theme="dark"] .sp-lang-btn[b-o44ngblltz] {
    background: #21262d;
    border-color: #30363d;
}

:root[data-theme="dark"] .sp-lang-btn:hover[b-o44ngblltz] {
    background: #30363d;
}

:root[data-theme="dark"] .sp-voice-btn[b-o44ngblltz],
:root[data-theme="dark"] .sp-refresh-btn[b-o44ngblltz] {
    background: #21262d;
    border-color: #30363d;
    color: #e6edf3;
}

:root[data-theme="dark"] .sp-voice-btn:hover[b-o44ngblltz],
:root[data-theme="dark"] .sp-refresh-btn:hover:not(:disabled)[b-o44ngblltz] {
    background: #238636;
    border-color: #238636;
}

/* Dark mode for no-track */
:root[data-theme="dark"] .sp-no-track[b-o44ngblltz] {
    color: #6b7280;
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .stock-panel[b-o44ngblltz] {
        width: 100%;
        max-width: 100%;
    }
}
/* /Pages/Shared/Components/SeatCoursePanel.razor.rz.scp.css */
.seat-course-panel[b-fo3actkxw4] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    background: #1e293b;
    border-radius: 8px;
    border: 1px solid #334155;
}

.panel-section[b-fo3actkxw4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.section-header[b-fo3actkxw4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-title[b-fo3actkxw4] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.clear-btn[b-fo3actkxw4] {
    background: none;
    border: none;
    color: #3b82f6;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 10px 14px;
    min-height: 44px;
    min-width: 44px;
    border-radius: 6px;
}

.clear-btn:hover[b-fo3actkxw4], .clear-btn:active[b-fo3actkxw4] { text-decoration: underline; }

/* Seat Grid */
.seat-grid[b-fo3actkxw4] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.seat-btn[b-fo3actkxw4] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #475569;
    background: #0f172a;
    color: #94a3b8;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.seat-btn:hover[b-fo3actkxw4], .seat-btn:active[b-fo3actkxw4] {
    border-color: #3b82f6;
    color: #e2e8f0;
}

.seat-btn.active[b-fo3actkxw4] {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}

/* Course List */
.course-list[b-fo3actkxw4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.course-row[b-fo3actkxw4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #0f172a;
    border-radius: 6px;
}

.course-info[b-fo3actkxw4] {
    flex: 1;
    min-width: 0;
}

.course-name[b-fo3actkxw4] {
    font-size: 0.85rem;
    color: #e2e8f0;
    font-weight: 500;
}

.course-count[b-fo3actkxw4] {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-left: 6px;
}

.course-badge[b-fo3actkxw4] {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 8px;
    font-weight: 500;
    white-space: nowrap;
}

.course-badge.waiting[b-fo3actkxw4] { background: #1e293b; color: #94a3b8; }
.course-badge.fired[b-fo3actkxw4] { background: #451a03; color: #fcd34d; }
.course-badge.delivered[b-fo3actkxw4] { background: #14532d; color: #86efac; }

.course-status[b-fo3actkxw4] {
    flex-shrink: 0;
}

.course-actions[b-fo3actkxw4] {
    display: flex;
    gap: 4px;
}

.action-btn[b-fo3actkxw4] {
    padding: 10px 14px;
    min-height: 44px;
    border: none;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.action-btn.fire[b-fo3actkxw4] {
    background: #22c55e;
    color: #052e16;
}

.action-btn.fire:hover[b-fo3actkxw4], .action-btn.fire:active[b-fo3actkxw4] { background: #16a34a; }

.action-btn.hold[b-fo3actkxw4] {
    background: #475569;
    color: #e2e8f0;
}

.action-btn.hold:hover[b-fo3actkxw4], .action-btn.hold:active[b-fo3actkxw4] { background: #64748b; }

.action-btn.rush[b-fo3actkxw4] {
    background: #ef4444;
    color: white;
}

.action-btn.rush:hover[b-fo3actkxw4], .action-btn.rush:active[b-fo3actkxw4] { background: #dc2626; }

@media (max-width: 480px) {
    .course-row[b-fo3actkxw4] {
        flex-wrap: wrap;
    }

    .course-actions[b-fo3actkxw4] {
        width: 100%;
        flex-wrap: wrap;
    }
}
/* /Pages/Shared/Components/TableSlidePanel.razor.rz.scp.css */
.tables-panel[b-chtns19t9j] {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

    .tables-panel.open[b-chtns19t9j] {
        pointer-events: auto;
    }

.tp-backdrop[b-chtns19t9j] {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    transition: opacity .18s;
}

.tables-panel.open .tp-backdrop[b-chtns19t9j] {
    opacity: 1;
}

.tp-card[b-chtns19t9j] {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 480px;
    max-width: 94vw;
    background: #fff;
    box-shadow: -16px 0 40px rgba(0,0,0,.28);
    transform: translateX(100%);
    transition: transform .2s ease;
    display: flex;
    flex-direction: column;
}

.tables-panel.open .tp-card[b-chtns19t9j] {
    transform: translateX(0);
}

.tp-top[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-bottom: 1px solid #eee;
}

.tp-title[b-chtns19t9j] {
    font-weight: 900;
    font-size: 1.05rem;
}

.tp-search[b-chtns19t9j] {
    margin-left: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 10px;
    min-width: 180px;
}

.tp-close[b-chtns19t9j] {
    border: 0;
    background: #111827;
    color: #fff;
    border-radius: 10px;
    padding: 6px 10px;
    font-weight: 900;
}

.tp-tabs[b-chtns19t9j] {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #f1f1f1;
    overflow: auto;
}

.tp-tab[b-chtns19t9j] {
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 800;
}

    .tp-tab.active[b-chtns19t9j] {
        background: #c62828;
        color: #fff;
        border-color: #c62828;
    }

.tp-body[b-chtns19t9j] {
    flex: 1;
    overflow: auto;
    padding: 12px;
}

.tp-empty[b-chtns19t9j] {
    color: #6b7280;
    font-weight: 700;
    padding: 20px;
    text-align: center;
}

.tp-grid[b-chtns19t9j] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

@media (min-width:560px) {
    .tp-grid[b-chtns19t9j] {
        grid-template-columns: 1fr 1fr;
    }
}

.tp-tile[b-chtns19t9j] {
    text-align: left;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px;
    background: #fff;
    cursor: pointer;
}

    .tp-tile.free:hover[b-chtns19t9j] {
        border-color: #86efac;
        box-shadow: 0 6px 14px rgba(22,163,74,.15);
    }

    .tp-tile.busy:hover[b-chtns19t9j] {
        border-color: #fecaca;
        box-shadow: 0 6px 14px rgba(239,68,68,.15);
    }

    .tp-tile:focus-visible[b-chtns19t9j] {
        outline: 2px solid #3b82f6;
        outline-offset: 2px;
    }

    .tp-tile:active[b-chtns19t9j] {
        transform: scale(0.97);
        transition: transform 0.1s;
    }

.tp-line[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dot[b-chtns19t9j] {
    width: 10px;
    height: 10px;
    min-width: 10px;
    min-height: 10px;
    border-radius: 999px;
    display: inline-block;
    flex-shrink: 0;
}

.dot-free[b-chtns19t9j] {
    background: #22c55e;
}

.dot-open[b-chtns19t9j] {
    background: #ef4444;
}

.dot-res[b-chtns19t9j] {
    background: #f59e0b;
}

.dot-paid[b-chtns19t9j] {
    background: #94a3b8;
}

.tp-total[b-chtns19t9j] {
    margin-left: auto;
    font-weight: 900;
    background: #111827;
    color: #fff;
    border-radius: 8px;
    padding: 2px 8px;
}

.tp-sub[b-chtns19t9j] {
    color: #6b7280;
    font-weight: 700;
    margin-top: 2px;
}


/* Docked column area (only when docked) */
.tables-docked[b-chtns19t9j] {
    position: fixed; /* <-- key */
    right: 0;
    top: 0;
    bottom: 0;
    width: 480px;
    max-width: 94vw;
    background: #fff;
    border-left: 1px solid #eee;
    box-shadow: -10px 0 18px rgba(0,0,0,.06);
    z-index: 60;
}

/* Ensure overlay sits above everything and never pushes layout */
.tables-panel[b-chtns19t9j] {
    position: fixed;
    inset: 0;
    z-index: 70;
    pointer-events: none;
}

    .tables-panel.open[b-chtns19t9j] {
        pointer-events: auto;
    }
/* you already have .tp-backdrop and .tp-card */


/* ===== RIGHT PANEL: divider always visible ===== */
.page.with-tables .tablesbar[b-chtns19t9j] {
    border-left: 1px solid #e5e7eb !important; /* force divider */
}

/* ===== Handle polish & alignment ===== */
:root[b-chtns19t9j] {
    --hot-edge: 48px; /* Increased from 40px for better touch targets */
}
/* visible slice while hidden */

/* Keep the overlay behavior you already have; just fix the handle pieces */
.page.with-tables.tables-auto .tablesbar[b-chtns19t9j] {
    /* your width/transform rules can stay; we only re-place the decorations */
    z-index: 120 !important;
}

    /* Vertical pill: align text to the LEFT edge of the pill */
    .page.with-tables.tables-auto .tablesbar[b-chtns19t9j]::before {
        content: "Mesas";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%) rotate(180deg); /* bottom→top reading */
        writing-mode: vertical-rl;
        width: var(--hot-edge);
        padding: 8px 22px 8px 8px; /* left padding gives the “left aligned” look */
        text-align: left; /* <-- fixes the right-justified look */
        font-weight: 900;
        color: #fff;
        background: var(--brand, #c62828);
        border-radius: 10px 0 0 10px;
        box-shadow: -12px 0 30px rgba(0,0,0,.18), inset 1px 0 0 rgba(255,255,255,.35);
        pointer-events: none;
    }

    /* Chevron: sit inside the pill near its right edge and vertically centered */
    .page.with-tables.tables-auto .tablesbar[b-chtns19t9j]::after {
        content: "‹";
        position: absolute;
        right: 8px; /* inside the pill */
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        font-weight: 900;
        color: #FACC15;
        text-shadow: 0 1px 2px rgba(0,0,0,.35);
        animation: edge-wiggle-b-chtns19t9j 1.4s ease-in-out 2;
        pointer-events: none;
    }

    /* Auto-hide both pseudo-decorations once the panel slides into
       view (hover state in tables-auto mode). The pill + chevron are
       wayfinding affordances for the COLLAPSED state — they tell you
       "there's a panel hiding here". When the panel is fully open
       they overlap the panel content (you can see them poking through
       the rounded corner) and add visual noise. Fade them out on
       hover/focus-within and let them slide back in when the panel
       retracts. */
    .page.with-tables.tables-auto .tablesbar:hover[b-chtns19t9j]::before,
    .page.with-tables.tables-auto .tablesbar:hover[b-chtns19t9j]::after,
    .page.with-tables.tables-auto .tablesbar:focus-within[b-chtns19t9j]::before,
    .page.with-tables.tables-auto .tablesbar:focus-within[b-chtns19t9j]::after {
        opacity: 0;
        transition: opacity .18s ease;
        pointer-events: none;
    }
    .page.with-tables.tables-auto .tablesbar[b-chtns19t9j]::before,
    .page.with-tables.tables-auto .tablesbar[b-chtns19t9j]::after {
        transition: opacity .18s ease;
    }

/* ✖ dismiss button: attach to the pill, centered vertically */
.page.with-tables.tables-auto .edge-dismiss[b-chtns19t9j] {
    position: absolute;
    left: calc(-1 * var(--hot-edge) + 8px); /* inside the pill */
    top: 50%;
    transform: translateY(-50%); /* <-- no longer stuck at top */
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.85);
    background: rgba(0,0,0,.35);
    color: #fff;
    font-weight: 900;
    line-height: 20px;
    display: grid;
    place-items: center;
    backdrop-filter: blur(2px);
    z-index: 200;
}

/* When the panel is open, fade the handle away so the divider is clean */
.page.with-tables.tables-auto .tablesbar:hover[b-chtns19t9j]::before,
.page.with-tables.tables-auto .tablesbar:hover[b-chtns19t9j]::after {
    opacity: 0;
}

/* When hint is off: remove pill, chevron, and dismiss, and keep a thin edge */
.page.with-tables.tables-auto.edge-hint-off[b-chtns19t9j] {
    --hot-edge: 8px;
}

    .page.with-tables.tables-auto.edge-hint-off .tablesbar[b-chtns19t9j]::before,
    .page.with-tables.tables-auto.edge-hint-off .tablesbar[b-chtns19t9j]::after,
    .page.with-tables.tables-auto.edge-hint-off .edge-dismiss[b-chtns19t9j] {
        display: none !important;
    }

@keyframes edge-wiggle-b-chtns19t9j {
    0%,100% {
        transform: translateY(-50%) translateX(0);
    }

    40% {
        transform: translateY(-50%) translateX(-4px);
    }

    70% {
        transform: translateY(-50%) translateX(0);
    }
}

/* ===== TOUCH-SPECIFIC IMPROVEMENTS ===== */

/* Touch feedback when panel opens */
.page.with-tables.tables-auto .tablesbar.touch-opened[b-chtns19t9j] {
    animation: touch-open-pulse-b-chtns19t9j 0.2s ease-out;
}

@keyframes touch-open-pulse-b-chtns19t9j {
    0% {
        box-shadow: -12px 0 30px rgba(0,0,0,.18);
    }
    50% {
        box-shadow: -12px 0 50px rgba(198, 40, 40, 0.3);
    }
    100% {
        box-shadow: -12px 0 30px rgba(0,0,0,.18);
    }
}

/* Active state for touch - visual feedback on tap */
.page.with-tables.tables-auto .tablesbar:active[b-chtns19t9j]::before {
    background: var(--brand-dark, #a91e1e);
    transform: translateY(-50%) rotate(180deg) scale(0.98);
}

/* Touch devices: prevent zoom, improve scrolling */
.page.with-tables.tables-auto .tablesbar[b-chtns19t9j] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Larger tap target on touch devices */
@media (hover: none) and (pointer: coarse) {
    :root[b-chtns19t9j] {
        --hot-edge: 56px; /* Even larger for pure touch devices */
    }

    /* Make the Mesas label more prominent on touch */
    .page.with-tables.tables-auto .tablesbar[b-chtns19t9j]::before {
        font-size: 1.1rem;
        padding: 12px 0;
    }

    /* Add a subtle "tap here" hint animation on touch devices */
    .page.with-tables.tables-auto .tablesbar:not(.is-open)[b-chtns19t9j]::before {
        animation: touch-hint-b-chtns19t9j 2s ease-in-out infinite;
    }

    @keyframes touch-hint-b-chtns19t9j {
        0%, 100% {
            box-shadow: -12px 0 30px rgba(0,0,0,.18);
        }
        50% {
            box-shadow: -12px 0 40px rgba(198, 40, 40, 0.25);
        }
    }
}

/* Swipe hint indicator */
.page.with-tables.tables-auto .tablesbar.is-open[b-chtns19t9j]::after {
    content: "→"; /* Swipe right to close hint */
    left: auto;
    right: calc(var(--tablesbar-w, 360px) - 30px);
    opacity: 0.3;
    font-size: 14px;
    animation: swipe-hint-b-chtns19t9j 2s ease-in-out 1;
}

@keyframes swipe-hint-b-chtns19t9j {
    0%, 100% {
        opacity: 0.3;
        transform: translateY(-50%) translateX(0);
    }
    50% {
        opacity: 0.6;
        transform: translateY(-50%) translateX(10px);
    }
}

/* Waiter call indicator - pulsing bell icon */
.waiter-call-badge[b-chtns19t9j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    margin-left: 4px;
    animation: waiter-call-pulse-b-chtns19t9j 1s ease-in-out infinite;
    filter: drop-shadow(0 0 3px rgba(255, 165, 0, 0.8));
}

/* Buffet (AYCE) badge — sits next to the table label so staff can
   see at a glance which tables are running buffet without opening
   any modal. Different colour for awaiting-delivery (action needed). */
.buffet-badge[b-chtns19t9j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    margin-left: 4px;
    padding: 2px 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(239, 68, 68, 0.2));
    border: 1px solid rgba(245, 158, 11, 0.5);
    line-height: 1;
    filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.4));
}

.buffet-badge--awaiting[b-chtns19t9j] {
    /* Awaiting delivery — most actionable state, pulse for attention */
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.35), rgba(245, 158, 11, 0.3));
    border-color: rgba(251, 191, 36, 0.7);
    animation: buffet-badge-pulse-b-chtns19t9j 1.6s ease-in-out infinite;
}

@keyframes buffet-badge-pulse-b-chtns19t9j {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.5)); }
    50%      { transform: scale(1.08); filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.8)); }
}

/* Tiny 🍣 indicator on the collapsed-handle when the panel is
   auto-hidden so staff don't lose buffet awareness while focused
   on the order. Positioned as its own circular badge below the
   busy-count badge — putting the emoji INSIDE .collapsed-badge
   would spill outside its 24px round geometry. */
.collapsed-buffet-indicator[b-chtns19t9j] {
    display: none;
}

@keyframes waiter-call-pulse-b-chtns19t9j {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    25% {
        transform: scale(1.15) rotate(-10deg);
    }
    50% {
        transform: scale(1.05) rotate(0deg);
        opacity: 0.85;
    }
    75% {
        transform: scale(1.15) rotate(10deg);
    }
}

/* ========== PREMIUM HEADER STYLING ========== */

/* Functions row - Eats, Espera, Reservas */
[b-chtns19t9j] .edge-tabs--functions {
    display: flex;
    gap: 6px;
    padding: 8px 10px;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    /* Wrap to a second row when many tabs are enabled (Eats + Delivery +
       Waitlist + Reservations + Para Llevar …). Previously this was
       nowrap + overflow-x:auto with a HIDDEN scrollbar, which pushed the
       last pill ("Para Llevar" + its count badge) off the right edge of
       the panel with no visible affordance to scroll to it. Wrapping
       keeps every tab — and its badge — fully on screen. */
    flex-wrap: wrap;
    row-gap: 6px;
    justify-content: flex-start;
}

/* Premium tab base styling */
[b-chtns19t9j] .edge-tabs--functions .edge-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Was 8px 14px / 0.85rem — too cramped for a host stand to scan from
       arm's length. Bumped to give ~46px tap height + 15px label so
       "Eats / Espera / Reservas / Para Llevar" stops truncating. */
    padding: 11px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
}

[b-chtns19t9j] .edge-tabs--functions .edge-tab:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

[b-chtns19t9j] .edge-tabs--functions .edge-tab .tab-label {
    font-weight: 700;
}

/* Eats tab - Orange theme (dark mode) */
[b-chtns19t9j] .edge-tab--eats {
    border-color: rgba(249, 115, 22, 0.3);
    background: rgba(249, 115, 22, 0.1);
}

[b-chtns19t9j] .edge-tab--eats .tab-label {
    color: #fb923c;
}

[b-chtns19t9j] .edge-tab--eats.active {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border-color: #ea580c;
    color: white;
    box-shadow: 0 2px 12px rgba(249, 115, 22, 0.4);
}

[b-chtns19t9j] .edge-tab--eats.active .tab-label {
    color: white;
}

[b-chtns19t9j] .edge-tab--eats.has-pending:not(.active) {
    animation: eats-glow-dark-b-chtns19t9j 2s ease-in-out infinite;
}

@keyframes eats-glow-dark-b-chtns19t9j {
    0%, 100% { box-shadow: 0 0 8px rgba(249, 115, 22, 0.3); }
    50% { box-shadow: 0 0 16px rgba(249, 115, 22, 0.5); }
}

[b-chtns19t9j] .eats-badge {
    background: #ef4444;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 4px;
    animation: badge-pulse-b-chtns19t9j 2s ease-in-out infinite;
}

@keyframes badge-pulse-b-chtns19t9j {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Delivery tab - Green theme (Glovo/Just Eat) */
[b-chtns19t9j] .edge-tab--delivery {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.1);
}

[b-chtns19t9j] .edge-tab--delivery .tab-label {
    color: #4ade80;
}

[b-chtns19t9j] .edge-tab--delivery.active {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-color: #16a34a;
    color: white;
    box-shadow: 0 2px 12px rgba(34, 197, 94, 0.4);
}

[b-chtns19t9j] .edge-tab--delivery.active .tab-label {
    color: white;
}

[b-chtns19t9j] .edge-tab--delivery.has-pending:not(.active) {
    animation: delivery-glow-dark-b-chtns19t9j 2s ease-in-out infinite;
}

@keyframes delivery-glow-dark-b-chtns19t9j {
    0%, 100% { box-shadow: 0 0 8px rgba(34, 197, 94, 0.3); }
    50% { box-shadow: 0 0 16px rgba(34, 197, 94, 0.5); }
}

[b-chtns19t9j] .delivery-badge {
    background: #ef4444;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 4px;
    animation: badge-pulse-b-chtns19t9j 2s ease-in-out infinite;
}

/* Delivery Orders Panel */
[b-chtns19t9j] .delivery-orders-panel {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

[b-chtns19t9j] .delivery-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 12px;
    color: #64748b;
}

[b-chtns19t9j] .delivery-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

[b-chtns19t9j] .delivery-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[b-chtns19t9j] .delivery-section-icon {
    font-size: 1rem;
}

[b-chtns19t9j] .delivery-section-count {
    margin-left: auto;
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8rem;
}

[b-chtns19t9j] .delivery-order-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px;
    transition: all 0.2s;
}

[b-chtns19t9j] .delivery-order-card:hover {
    border-color: rgba(34, 197, 94, 0.5);
}

[b-chtns19t9j] .delivery-order-card.clickable {
    cursor: pointer;
}

[b-chtns19t9j] .delivery-order-card.clickable:hover {
    background: rgba(34, 197, 94, 0.1);
}

[b-chtns19t9j] .delivery-order--pending {
    border-left: 3px solid #f59e0b;
}

[b-chtns19t9j] .delivery-order--active {
    border-left: 3px solid #22c55e;
}

[b-chtns19t9j] .delivery-order-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

[b-chtns19t9j] .delivery-order-number {
    font-weight: 700;
    font-size: 1rem;
    color: white;
}

[b-chtns19t9j] .delivery-platform-badge {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

[b-chtns19t9j] .delivery-platform-badge.glovo {
    background: rgba(0, 172, 126, 0.2);
    color: #00ac7e;
}

[b-chtns19t9j] .delivery-platform-badge.justeat {
    background: rgba(255, 128, 0, 0.2);
    color: #ff8000;
}

[b-chtns19t9j] .delivery-order-type {
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}

[b-chtns19t9j] .delivery-order-type.type-delivery {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

[b-chtns19t9j] .delivery-order-type.type-takeaway {
    background: rgba(168, 85, 247, 0.2);
    color: #a855f7;
}

[b-chtns19t9j] .delivery-order-customer {
    font-weight: 600;
    color: white;
    margin-bottom: 4px;
}

[b-chtns19t9j] .delivery-order-phone {
    font-size: 0.8rem;
    color: #3b82f6;
    margin-bottom: 4px;
}

[b-chtns19t9j] .delivery-order-items {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 6px;
}

[b-chtns19t9j] .delivery-order-item {
    padding: 2px 0;
}

[b-chtns19t9j] .delivery-order-item--more {
    color: #64748b;
    font-style: italic;
}

[b-chtns19t9j] .delivery-order-instructions {
    font-size: 0.8rem;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    padding: 6px 8px;
    border-radius: 6px;
    margin-bottom: 8px;
}

[b-chtns19t9j] .delivery-order-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

[b-chtns19t9j] .delivery-order-total {
    font-weight: 700;
    font-size: 1.1rem;
    color: #22c55e;
}

[b-chtns19t9j] .delivery-order-actions {
    display: flex;
    gap: 8px;
}

[b-chtns19t9j] .delivery-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

[b-chtns19t9j] .delivery-btn--accept {
    background: #22c55e;
    color: white;
}

[b-chtns19t9j] .delivery-btn--accept:hover {
    background: #16a34a;
}

[b-chtns19t9j] .delivery-btn--reject {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

[b-chtns19t9j] .delivery-btn--reject:hover {
    background: #ef4444;
    color: white;
}

[b-chtns19t9j] .delivery-btn--ready {
    background: #3b82f6;
    color: white;
}

[b-chtns19t9j] .delivery-btn--ready:hover {
    background: #2563eb;
}

[b-chtns19t9j] .delivery-btn--refresh {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

[b-chtns19t9j] .delivery-btn--refresh:hover {
    background: rgba(255, 255, 255, 0.2);
}

[b-chtns19t9j] .delivery-ready-badge {
    background: #22c55e;
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
}

[b-chtns19t9j] .delivery-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 12px;
    text-align: center;
}

[b-chtns19t9j] .delivery-empty-icon {
    font-size: 3rem;
    opacity: 0.5;
}

[b-chtns19t9j] .delivery-empty-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #94a3b8;
}

[b-chtns19t9j] .delivery-empty-subtitle {
    font-size: 0.85rem;
    color: #64748b;
}

/* Order age indicator */
[b-chtns19t9j] .delivery-order-age {
    margin-left: auto;
    font-size: 0.75rem;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Delivery Modal Styles */
[b-chtns19t9j] .delivery-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
}

[b-chtns19t9j] .delivery-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    width: 90%;
    max-width: 400px;
    z-index: 1001;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

[b-chtns19t9j] .delivery-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 600;
    font-size: 1rem;
    color: white;
}

[b-chtns19t9j] .delivery-modal-close {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

[b-chtns19t9j] .delivery-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

[b-chtns19t9j] .delivery-modal-body {
    padding: 20px;
}

[b-chtns19t9j] .delivery-modal-body p {
    margin: 0 0 16px 0;
    color: #94a3b8;
    font-size: 0.9rem;
}

[b-chtns19t9j] .prep-time-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

[b-chtns19t9j] .prep-time-btn {
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

[b-chtns19t9j] .prep-time-btn:hover {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.4);
}

[b-chtns19t9j] .prep-time-btn.selected {
    background: #22c55e;
    border-color: #22c55e;
    color: white;
}

[b-chtns19t9j] .reject-reason-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[b-chtns19t9j] .reject-reason-btn {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
}

[b-chtns19t9j] .reject-reason-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
}

[b-chtns19t9j] .reject-reason-btn.selected {
    background: rgba(239, 68, 68, 0.3);
    border-color: #ef4444;
    color: white;
}

[b-chtns19t9j] .delivery-modal-footer {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    justify-content: flex-end;
}

[b-chtns19t9j] .delivery-btn--cancel {
    background: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}

[b-chtns19t9j] .delivery-btn--cancel:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

[b-chtns19t9j] .delivery-btn--reject-confirm {
    background: #ef4444;
    color: white;
}

[b-chtns19t9j] .delivery-btn--reject-confirm:hover {
    background: #dc2626;
}

[b-chtns19t9j] .delivery-btn--reject-confirm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Small spinner for buttons */
[b-chtns19t9j] .spinner-small {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin-b-chtns19t9j 0.8s linear infinite;
}

@keyframes spin-b-chtns19t9j {
    to { transform: rotate(360deg); }
}

/* Disabled button state */
[b-chtns19t9j] .delivery-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Waitlist/Espera tab - Purple theme (dark mode) */
[b-chtns19t9j] .edge-tab--waitlist {
    border-color: rgba(139, 92, 246, 0.3);
    background: rgba(139, 92, 246, 0.1);
}

[b-chtns19t9j] .edge-tab--waitlist .tab-label {
    color: #a78bfa;
}

[b-chtns19t9j] .edge-tab--waitlist.active {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    border-color: #7c3aed;
    color: white;
    box-shadow: 0 2px 12px rgba(139, 92, 246, 0.4);
}

[b-chtns19t9j] .edge-tab--waitlist.active .tab-label {
    color: white;
}

[b-chtns19t9j] .edge-tab--waitlist.has-pending:not(.active) {
    animation: waitlist-glow-dark-b-chtns19t9j 2s ease-in-out infinite;
}

@keyframes waitlist-glow-dark-b-chtns19t9j {
    0%, 100% { box-shadow: 0 0 8px rgba(139, 92, 246, 0.3); }
    50% { box-shadow: 0 0 16px rgba(139, 92, 246, 0.5); }
}

/* Reservations tab - Blue theme (dark mode) */
[b-chtns19t9j] .edge-tab--reservations {
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.1);
}

[b-chtns19t9j] .edge-tab--reservations .tab-label {
    color: #60a5fa;
}

[b-chtns19t9j] .edge-tab--reservations.active {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: #2563eb;
    color: white;
    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.4);
}

[b-chtns19t9j] .edge-tab--reservations.active .tab-label {
    color: white;
}

[b-chtns19t9j] .edge-tab--reservations.has-pending:not(.active) {
    animation: reservations-glow-dark-b-chtns19t9j 2s ease-in-out infinite;
}

@keyframes reservations-glow-dark-b-chtns19t9j {
    0%, 100% { box-shadow: 0 0 8px rgba(59, 130, 246, 0.3); }
    50% { box-shadow: 0 0 16px rgba(59, 130, 246, 0.5); }
}

/* Zone tabs row - Premium styling (dark mode) */
[b-chtns19t9j] .edge-tabs--zones {
    display: flex;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(15, 23, 42, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    overflow-x: auto;
    scrollbar-width: none;
}

[b-chtns19t9j] .edge-tabs--zones::-webkit-scrollbar {
    display: none;
}

[b-chtns19t9j] .edge-tabs--zones .edge-tab {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    min-height: 40px;
}

[b-chtns19t9j] .edge-tabs--zones .edge-tab:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

[b-chtns19t9j] .edge-tabs--zones .edge-tab.active {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border-color: #0284c7;
    color: white;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.35);
}

[b-chtns19t9j] .edge-tabs--zones .edge-tab .tab-count {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 3px;
}

[b-chtns19t9j] .edge-tabs--zones .edge-tab.active .tab-count {
    color: rgba(255, 255, 255, 0.85);
}

/* Zone tab with waiter calls - attention-grabbing style */
[b-chtns19t9j] .edge-tab.has-waiter-call {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    border-color: #e65100;
    color: white;
    animation: zone-waiter-alert-b-chtns19t9j 1.5s ease-in-out infinite;
}

[b-chtns19t9j] .edge-tab.has-waiter-call.active {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    border-color: #e65100;
}

/* Prevent zone tab text from wrapping */
[b-chtns19t9j] .edge-tab .tab-label {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

@keyframes zone-waiter-alert-b-chtns19t9j {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(255, 152, 0, 0);
    }
}

/* Zone waiter call badge - shown on zone tabs */
[b-chtns19t9j] .zone-waiter-badge {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    margin-left: 3px;
    font-size: 0.75rem;
    font-weight: 700;
    animation: waiter-call-pulse-b-chtns19t9j 1s ease-in-out infinite;
}

/* ==================== Waitlist Styles ==================== */
[b-chtns19t9j] .edge-tab--waitlist {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    border-color: #7c3aed;
}

[b-chtns19t9j] .edge-tab--waitlist:not(.active) {
    background: transparent;
    color: #8b5cf6;
    border-color: #8b5cf6;
}

[b-chtns19t9j] .waitlist-badge {
    background: #ef4444;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 4px;
    animation: badge-pulse-b-chtns19t9j 2s ease-in-out infinite;
}

@keyframes badge-pulse-b-chtns19t9j {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

[b-chtns19t9j] .waitlist-panel {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

[b-chtns19t9j] .waitlist-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 12px;
    color: #64748b;
}

[b-chtns19t9j] .waitlist-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[b-chtns19t9j] .waitlist-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

[b-chtns19t9j] .waitlist-card:hover {
    border-color: #8b5cf6;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
}

[b-chtns19t9j] .waitlist-card--called {
    border-color: #10b981;
    background: linear-gradient(to right, #ecfdf5, white);
    animation: called-glow-b-chtns19t9j 2s ease-in-out infinite;
}

@keyframes called-glow-b-chtns19t9j {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
}

[b-chtns19t9j] .waitlist-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

[b-chtns19t9j] .waitlist-position {
    font-size: 1.25rem;
    font-weight: 800;
    color: #8b5cf6;
}

[b-chtns19t9j] .waitlist-card--called .waitlist-position {
    color: #10b981;
}

[b-chtns19t9j] .waitlist-party {
    font-size: 0.9rem;
    color: #64748b;
}

[b-chtns19t9j] .waitlist-wait {
    margin-left: auto;
    font-size: 0.8rem;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 12px;
}

[b-chtns19t9j] .waitlist-name {
    font-weight: 600;
    font-size: 1rem;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* VIP Badges */
[b-chtns19t9j] .vip-badge {
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

[b-chtns19t9j] .vip-badge--platinum {
    background: linear-gradient(135deg, #a855f7 0%, #3b82f6 100%);
    color: white;
    font-weight: 600;
}

[b-chtns19t9j] .vip-badge--gold {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    color: white;
    font-weight: 600;
}

[b-chtns19t9j] .vip-badge--silver {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    color: white;
    font-weight: 500;
}

[b-chtns19t9j] .blacklist-badge {
    font-size: 0.8rem;
    color: #dc2626;
}

[b-chtns19t9j] .noshow-badge {
    font-size: 0.7rem;
    color: #f97316;
    background: #fff7ed;
    padding: 2px 5px;
    border-radius: 8px;
}

[b-chtns19t9j] .waitlist-card--blacklisted {
    border-left: 3px solid #dc2626;
    background: #fef2f2;
}

[b-chtns19t9j] .waitlist-phone {
    font-size: 0.8rem;
    color: #3b82f6;
    margin-top: 4px;
}

[b-chtns19t9j] .waitlist-zone {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 4px;
}

[b-chtns19t9j] .waitlist-notes {
    font-size: 0.8rem;
    color: #f59e0b;
    background: #fef3c7;
    padding: 4px 8px;
    border-radius: 6px;
    margin-top: 6px;
    font-style: italic;
}

[b-chtns19t9j] .waitlist-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

[b-chtns19t9j] .waitlist-btn {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

[b-chtns19t9j] .waitlist-btn--call {
    background: #8b5cf6;
    color: white;
}

[b-chtns19t9j] .waitlist-btn--call:hover {
    background: #7c3aed;
}

[b-chtns19t9j] .waitlist-btn--seat {
    background: #10b981;
    color: white;
}

[b-chtns19t9j] .waitlist-btn--seat:hover {
    background: #059669;
}

[b-chtns19t9j] .waitlist-btn--noshow {
    background: #f1f5f9;
    color: #64748b;
    flex: 0;
    padding: 8px 12px;
}

[b-chtns19t9j] .waitlist-btn--noshow:hover {
    background: #ef4444;
    color: white;
}

[b-chtns19t9j] .waitlist-btn--add {
    background: #8b5cf6;
    color: white;
    width: 100%;
}

[b-chtns19t9j] .waitlist-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

[b-chtns19t9j] .waitlist-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

[b-chtns19t9j] .waitlist-empty-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

[b-chtns19t9j] .waitlist-empty-subtitle {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 1.5rem;
}

/* ========== Reservation Tab & Panel ========== */

[b-chtns19t9j] .edge-tab--reservations.active {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border-color: #3b82f6;
}

[b-chtns19t9j] .edge-tab--reservations:not(.active) {
    background: transparent;
    color: #3b82f6;
    border-color: #3b82f6;
}

[b-chtns19t9j] .reservation-badge {
    background: #3b82f6;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 4px;
}

[b-chtns19t9j] .reservation-panel {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

[b-chtns19t9j] .reservation-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 12px;
    color: #64748b;
}

[b-chtns19t9j] .reservation-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[b-chtns19t9j] .reservation-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

[b-chtns19t9j] .reservation-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

[b-chtns19t9j] .reservation-card--confirmed {
    border-left: 4px solid #10b981;
}

[b-chtns19t9j] .reservation-card--reminded {
    border-left: 4px solid #3b82f6;
}

[b-chtns19t9j] .reservation-card--pending {
    border-left: 4px solid #f59e0b;
}

[b-chtns19t9j] .reservation-card--arrived {
    border-left: 4px solid #8b5cf6;
    background: linear-gradient(to right, #f5f3ff, white);
}

[b-chtns19t9j] .reservation-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

[b-chtns19t9j] .reservation-time {
    font-size: 1.25rem;
    font-weight: 800;
    color: #3b82f6;
}

[b-chtns19t9j] .reservation-party {
    font-size: 0.9rem;
    color: #64748b;
}

[b-chtns19t9j] .reservation-status-pill {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    text-transform: uppercase;
}

[b-chtns19t9j] .reservation-status-pill.confirmed {
    background: #dcfce7;
    color: #16a34a;
}

[b-chtns19t9j] .reservation-status-pill.reminded {
    background: #dbeafe;
    color: #2563eb;
}

[b-chtns19t9j] .reservation-status-pill.pending {
    background: #fef3c7;
    color: #d97706;
}

[b-chtns19t9j] .reservation-status-pill.arrived {
    background: #ede9fe;
    color: #7c3aed;
}

[b-chtns19t9j] .reservation-name {
    font-weight: 600;
    font-size: 1rem;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

[b-chtns19t9j] .reservation-card--blacklisted {
    border-left: 3px solid #dc2626;
    background: #fef2f2;
}

[b-chtns19t9j] .reservation-phone {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 4px;
}

[b-chtns19t9j] .reservation-notes {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 4px;
    font-style: italic;
}

/* Wave 2c — POS-side allergen + tag chips on reservation cards.
   Same palette as the admin detail modal (amber for allergens, indigo
   for free-form tags) so a waiter glancing at either surface gets the
   same visual code. Sized smaller than admin since the POS card is
   denser. */
[b-chtns19t9j] .reservation-allergens,
[b-chtns19t9j] .reservation-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 4px;
}

[b-chtns19t9j] .reservation-allergen-pill {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.18);
    color: #fcd34d;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.4;
}

[b-chtns19t9j] .reservation-tag-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(99, 102, 241, 0.22);
    color: #c7d2fe;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
}

[b-chtns19t9j] .reservation-table {
    font-size: 0.8rem;
    color: #06b6d4;
    margin-top: 4px;
    font-weight: 500;
}

[b-chtns19t9j] .reservation-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

[b-chtns19t9j] .reservation-btn {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

[b-chtns19t9j] .reservation-btn--arrive {
    background: #10b981;
    color: white;
}

[b-chtns19t9j] .reservation-btn--arrive:hover {
    background: #059669;
}

[b-chtns19t9j] .reservation-btn--noshow {
    background: #f1f5f9;
    color: #64748b;
    flex: 0;
    padding: 8px 12px;
}

[b-chtns19t9j] .reservation-btn--noshow:hover {
    background: #ef4444;
    color: white;
}

[b-chtns19t9j] .reservation-btn--edit {
    background: #f1f5f9;
    color: #3b82f6;
    flex: 0;
    padding: 8px 12px;
}

[b-chtns19t9j] .reservation-btn--edit:hover {
    background: #3b82f6;
    color: white;
}

[b-chtns19t9j] .reservation-btn--cancel {
    background: #f1f5f9;
    color: #ef4444;
    flex: 0;
    padding: 8px 12px;
}

[b-chtns19t9j] .reservation-btn--cancel:hover {
    background: #ef4444;
    color: white;
}

[b-chtns19t9j] .reservation-status--arrived {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
}

[b-chtns19t9j] .reservation-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

[b-chtns19t9j] .reservation-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

[b-chtns19t9j] .reservation-empty-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

[b-chtns19t9j] .reservation-empty-subtitle {
    font-size: 0.9rem;
    color: #64748b;
}

/* Reservation Actions Header */
[b-chtns19t9j] .reservation-actions-header {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[b-chtns19t9j] .reservation-header-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 8px;
    color: #a5b4fc;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

[b-chtns19t9j] .reservation-header-btn:hover {
    background: rgba(99, 102, 241, 0.2);
    color: #c7d2fe;
}

[b-chtns19t9j] .reservation-header-btn--add {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
}

[b-chtns19t9j] .reservation-header-btn--add:hover {
    background: rgba(16, 185, 129, 0.25);
    color: #a7f3d0;
}

/* Reservation Filter Chips */
[b-chtns19t9j] .reservation-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.15);
}

[b-chtns19t9j] .res-filter-chip {
    flex-shrink: 0;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    color: #94a3b8;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

[b-chtns19t9j] .res-filter-chip:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
}

[b-chtns19t9j] .res-filter-chip.active {
    background: rgba(99, 102, 241, 0.25);
    border-color: rgba(99, 102, 241, 0.5);
    color: #a5b4fc;
}

[b-chtns19t9j] .res-filter-chip--arrived.active {
    background: rgba(16, 185, 129, 0.25);
    border-color: rgba(16, 185, 129, 0.5);
    color: #6ee7b7;
}

[b-chtns19t9j] .res-filter-chip--late.active {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fca5a5;
}

/* Filtered Empty State */
[b-chtns19t9j] .reservation-empty--filtered {
    padding: 2rem;
}

[b-chtns19t9j] .reservation-empty--filtered .res-filter-chip {
    margin-top: 1rem;
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.4);
    color: #a5b4fc;
}

/* Reservation Add Button in Empty State */
[b-chtns19t9j] .reservation-btn--add {
    margin-top: 1rem;
    padding: 10px 20px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

[b-chtns19t9j] .reservation-btn--add:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* ==================== Add Reservation Modal ==================== */
.add-res-backdrop[b-chtns19t9j] {
    z-index: 1010;
}

.add-reservation-modal[b-chtns19t9j] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1e293b;
    border-radius: 16px;
    width: 90%;
    max-width: 420px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10001;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

/* Only the form scrolls. The header, the save error, the missing-fields hint and the buttons stay
   on screen: the whole dialog used to scroll, and at 683 px tall Crear reserva sat below the fold
   (the user, 2026-10-12). Same for Modificar reserva. */
.add-reservation-modal > .modal-body[b-chtns19t9j] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.add-reservation-modal > :not(.modal-body)[b-chtns19t9j] {
    flex-shrink: 0;
}

.add-reservation-modal > .error-message[b-chtns19t9j] {
    margin: 0 20px 10px;
}

.add-reservation-modal.premium-layout > .error-message[b-chtns19t9j] {
    margin: 0 18px 8px;
}

/* The reservation dialogs' scrolling areas get the slate thumb of the till's other dark scrollbars,
   not the browser's light bar down a dark dialog. */
.add-reservation-modal > .modal-body[b-chtns19t9j],
.reservation-calendar-modal .modal-body[b-chtns19t9j] {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.26) transparent;
}

.add-reservation-modal > .modal-body[b-chtns19t9j]::-webkit-scrollbar,
.reservation-calendar-modal .modal-body[b-chtns19t9j]::-webkit-scrollbar {
    width: 8px;
}

.add-reservation-modal > .modal-body[b-chtns19t9j]::-webkit-scrollbar-track,
.reservation-calendar-modal .modal-body[b-chtns19t9j]::-webkit-scrollbar-track {
    background: transparent;
}

.add-reservation-modal > .modal-body[b-chtns19t9j]::-webkit-scrollbar-thumb,
.reservation-calendar-modal .modal-body[b-chtns19t9j]::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.26);
    border-radius: 8px;
}

/* ── Phone reservation polish ──────────────────────────────────────────
   Drop the custom on-screen QWERTY keyboard for the name field — the native
   keyboard already works (the input focuses normally and even hides the custom
   one on focus), so the custom keyboard is just clutter on a phone. Use the
   full viewport width. And drop the one-time table-search "NUEVO" badge +
   tooltip, which clip at the panel edge on phones and read as a mystery label
   (the 🔍 search is self-evident; the hint still shows on desktop). */
@media (max-width: 600px) {
    .add-reservation-modal .keyboard-toggle-btn[b-chtns19t9j],
    .add-reservation-modal .touch-keyboard[b-chtns19t9j] { display: none; }
    .add-reservation-modal .name-text-input[b-chtns19t9j] { flex: 1; }
    .add-reservation-modal[b-chtns19t9j] { width: calc(100vw - 16px); max-width: calc(100vw - 16px); }

    .new-feature-badge[b-chtns19t9j],
    .feature-tooltip[b-chtns19t9j] { display: none !important; }
}

/* Phase Sprint A — two-column reservation layout for desktop POS.
   Below 900px viewport falls back to the single-column 420px shape
   (mobile + narrow tablet portrait); above 900px the modal widens to
   880px with cliente/reserva side-by-side, eliminating the scroll. */
@media (min-width: 900px) {
    .add-reservation-modal.premium-layout[b-chtns19t9j] {
        max-width: 880px;
    }
}
.add-reservation-modal.premium-layout .resv-columns[b-chtns19t9j] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 900px) {
    .add-reservation-modal.premium-layout .resv-columns[b-chtns19t9j] {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
}
.add-reservation-modal.premium-layout .resv-col[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0; /* let inner inputs shrink in narrow columns */
}
.add-reservation-modal.premium-layout .resv-section-title[b-chtns19t9j] {
    font-size: 0.78rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    margin-bottom: 4px;
}
.add-reservation-modal.premium-layout .resv-notes-row[b-chtns19t9j] {
    margin-top: 4px;
    grid-column: 1 / -1;
}

/* Phone keypad popover — was inline-permanent under the phone field
   (~220px tall, dominated the modal). Now anchored absolute under the
   phone-display-field, only rendered when _showPhoneKeypad is true. */
.add-reservation-modal .phone-input-touch[b-chtns19t9j] {
    position: relative;
}
.add-reservation-modal .phone-keypad-popover[b-chtns19t9j] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 50;
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.add-reservation-modal .phone-keypad-done[b-chtns19t9j] {
    background: #16a34a;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}
.add-reservation-modal .phone-keypad-done:hover[b-chtns19t9j] {
    background: #15803d;
}

/* Sprint B — quick chips for date + time. Pill row above/below the
   relevant input. Active state matches the indigo accent of the
   modal's other selected states; disabled chips are visibly muted
   so a past time today reads as "not bookable" without a tooltip. */
.add-reservation-modal .resv-quick-chips[b-chtns19t9j] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 4px;
}
.add-reservation-modal .resv-time-chips[b-chtns19t9j] {
    margin-top: 8px;
}
.add-reservation-modal .quick-chip[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: #e2e8f0;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
    -webkit-tap-highlight-color: transparent;
}
.add-reservation-modal .quick-chip:hover:not(:disabled)[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(148, 163, 184, 0.45);
}
.add-reservation-modal .quick-chip:active:not(:disabled)[b-chtns19t9j] {
    transform: scale(.96);
}
.add-reservation-modal .quick-chip.active[b-chtns19t9j] {
    background: #4338ca;
    border-color: #4338ca;
    color: #fff;
}
.add-reservation-modal .quick-chip.disabled[b-chtns19t9j],
.add-reservation-modal .quick-chip:disabled[b-chtns19t9j] {
    opacity: .35;
    cursor: not-allowed;
    text-decoration: line-through;
}
/* Accent chip for "+30m" — slight emerald tint so the operator's eye
   lands on it as a different kind of action (relative-to-now, not
   absolute time slot). */
.add-reservation-modal .quick-chip--accent[b-chtns19t9j] {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
}
.add-reservation-modal .quick-chip--accent:hover:not(:disabled)[b-chtns19t9j] {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.5);
}

/* Sprint B — walk-in shortcut button styling. Sits between Cancelar
   and Crear reserva in the footer; differentiated from the primary
   "Crear reserva" CTA via a violet tint matching the .resv-projected
   purple from Phase 7 Sprint 2 (consistent "calendar/reservation"
   color language across the floor + this modal). */
.add-reservation-modal .btn-submit--alt[b-chtns19t9j] {
    background: #6d28d9;
    border-color: #6d28d9;
}
.add-reservation-modal .btn-submit--alt:hover:not(:disabled)[b-chtns19t9j] {
    background: #5b21b6;
    border-color: #5b21b6;
}
.add-reservation-modal .btn-submit--alt:disabled[b-chtns19t9j] {
    opacity: .5;
    cursor: not-allowed;
}

/* Sprint C — conflict warning banner. Yellow-amber tint (matches the
   Phase 7 Sprint 2 .resv-amber on the floor) — clearly attention-
   getting without reading as a hard error. The operator can override
   and submit anyway because two parties on a long table back-to-back
   is sometimes deliberate. */
.add-reservation-modal .conflict-warning[b-chtns19t9j] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: rgba(217, 119, 6, 0.12);
    border: 1px solid rgba(217, 119, 6, 0.35);
    border-radius: 10px;
    padding: 10px 14px;
    margin-top: 12px;
    color: #fde68a;
}
.add-reservation-modal .conflict-icon[b-chtns19t9j] {
    font-size: 1.2rem;
    line-height: 1.2;
    flex-shrink: 0;
    color: #fbbf24;
}
.add-reservation-modal .conflict-title[b-chtns19t9j] {
    font-weight: 800;
    font-size: 0.9rem;
    color: #fef3c7;
}
.add-reservation-modal .conflict-detail[b-chtns19t9j] {
    font-size: 0.82rem;
    color: #fde68a;
    margin-top: 2px;
}

/* Sprint C — missing-fields hint above the footer. Slate-400, small,
   no border. Renders only when the form is invalid so it's silent
   when the operator has filled everything. */
.add-reservation-modal .missing-fields-hint[b-chtns19t9j] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #94a3b8;
    text-align: right;
    padding: 4px 18px 0;
}

/* ============== Sprint Y — premium polish (height + disabled state) ============== */
/* Compresses vertical rhythm so the full Cliente + Reserva + footer
   fit in 90vh on a 1366×768 POS screen with no scroll. Scoped to
   .premium-layout so the legacy edit modal keeps its existing
   spacing untouched. */
.add-reservation-modal.premium-layout .modal-header[b-chtns19t9j] {
    padding: 12px 18px;
}
.add-reservation-modal.premium-layout .modal-body[b-chtns19t9j] {
    padding: 14px 18px 8px;
}
.add-reservation-modal.premium-layout .modal-footer[b-chtns19t9j] {
    padding: 12px 18px;
}
.add-reservation-modal.premium-layout .form-group[b-chtns19t9j] {
    margin-bottom: 10px;
}
.add-reservation-modal.premium-layout .form-group label[b-chtns19t9j] {
    margin-bottom: 4px;
}
.add-reservation-modal.premium-layout .form-group textarea[b-chtns19t9j] {
    padding: 8px 10px;
    min-height: 56px; /* roughly rows=2 but tighter; expands as user types */
}
.add-reservation-modal.premium-layout .resv-section-title[b-chtns19t9j] {
    padding-bottom: 4px;
    margin-bottom: 2px;
}
.add-reservation-modal.premium-layout .resv-quick-chips[b-chtns19t9j] {
    margin-bottom: 2px;
}
.add-reservation-modal.premium-layout .resv-time-chips[b-chtns19t9j] {
    margin-top: 4px;
}

/* Disabled action buttons: pre-fix they kept their full green/violet
   gradient at 50% opacity, which still reads as "primary, clickable".
   New treatment swaps to a neutral surface so the operator sees
   "this is not a primary action right now" at a glance — matches
   how design-tool defaults handle disabled CTAs. */
.add-reservation-modal.premium-layout .btn-submit:disabled[b-chtns19t9j],
.add-reservation-modal.premium-layout .btn-submit--alt:disabled[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    cursor: not-allowed;
    transform: none !important;
}
.add-reservation-modal.premium-layout .btn-submit:disabled:hover[b-chtns19t9j],
.add-reservation-modal.premium-layout .btn-submit--alt:disabled:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.06) !important;
    transform: none !important;
}

/* Make the missing-fields hint visually tied to the disabled buttons
   below it — borderless slate text immediately above the footer reads
   as "this is why those buttons are off". Bumped contrast so the
   hint actually catches the operator's eye. */
.add-reservation-modal.premium-layout .missing-fields-hint[b-chtns19t9j] {
    color: #fbbf24;
    font-weight: 700;
    padding: 0 18px 6px;
    text-align: right;
}

/* ============== Sprint Z — final polish ============== */

/* (Z1) Submit button: when the form becomes valid, restore the green
   affordance the disabled state suppressed. Without this the operator
   has no positive cue that the form is now ready to submit.
   :not(:disabled) keys cleanly off the disabled attr already wired up
   on the button — no extra Razor flag needed. */
.add-reservation-modal.premium-layout .btn-submit:not(:disabled)[b-chtns19t9j] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: 1px solid rgba(16, 185, 129, 0.5);
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.25), 0 6px 18px rgba(16, 185, 129, 0.25);
}
.add-reservation-modal.premium-layout .btn-submit:not(:disabled):hover[b-chtns19t9j] {
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.45), 0 8px 22px rgba(16, 185, 129, 0.35);
    transform: translateY(-1px);
}
.add-reservation-modal.premium-layout .btn-submit--alt:not(:disabled)[b-chtns19t9j] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    border: 1px solid rgba(139, 92, 246, 0.5);
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.25), 0 6px 18px rgba(139, 92, 246, 0.25);
}

/* (Z2) Slim country-code chip. The +34 button used to share width with
   the phone input ~50/50; trim padding + tighter radius so the focus
   stays on the digits the operator is actually typing. */
.add-reservation-modal.premium-layout .country-code-btn[b-chtns19t9j] {
    padding: 8px 8px 8px 10px;
    gap: 3px;
    font-size: 0.85rem;
    border-radius: 6px;
}
.add-reservation-modal.premium-layout .country-code-btn .selected-country[b-chtns19t9j] {
    font-size: 0.85rem;
}

/* (Z3) Chip-only Personas. Without the +/- pair the chip strip is the
   whole control — give it more breathing room and slightly larger taps
   for staff. Keeps the existing .selected style untouched. */
.add-reservation-modal.premium-layout .party-size-compact--chips-only[b-chtns19t9j] {
    gap: 8px;
    flex-wrap: wrap;
}
.add-reservation-modal.premium-layout .party-size-compact--chips-only .size-quick-btn[b-chtns19t9j] {
    width: 44px;
    height: 44px;
    font-size: 1rem;
    margin: 0;
}

/* (Z4) Collapsible Notes. The toggle is a low-emphasis affordance —
   most reservations skip it. The expanded textarea reuses the
   .name-input-touch wrapper for layout consistency with Nombre, but
   with a textarea instead of a single-line input. */
.add-reservation-modal.premium-layout .notes-toggle[b-chtns19t9j] {
    width: 100%;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(148, 163, 184, 0.3);
    border-radius: 8px;
    color: #94a3b8;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
}
.add-reservation-modal.premium-layout .notes-toggle:hover[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.4);
    color: #c7d2fe;
}
.add-reservation-modal.premium-layout .notes-text-input[b-chtns19t9j] {
    min-height: 56px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.4;
}

/* ============== Phase X — Time-aware grouped table picker ============== */
.add-reservation-modal .phase-x-picker[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.add-reservation-modal .picker-group[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.15);
    background: rgba(15, 23, 42, 0.4);
}
.add-reservation-modal .picker-group-title[b-chtns19t9j] {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #cbd5e1;
}
.add-reservation-modal .picker-group--available[b-chtns19t9j] {
    border-color: rgba(34, 197, 94, 0.25);
    background: rgba(34, 197, 94, 0.06);
}
.add-reservation-modal .picker-group--available .picker-group-title[b-chtns19t9j] { color: #86efac; }
.add-reservation-modal .picker-group--conflict[b-chtns19t9j] {
    border-color: rgba(217, 119, 6, 0.3);
    background: rgba(217, 119, 6, 0.08);
}
.add-reservation-modal .picker-group--conflict .picker-group-title[b-chtns19t9j] { color: #fde68a; }
.add-reservation-modal .picker-group--small[b-chtns19t9j] {
    border-style: dashed;
    border-color: rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.2);
}
.add-reservation-modal .picker-group--small > summary[b-chtns19t9j] {
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.add-reservation-modal .picker-group--small > summary[b-chtns19t9j]::after {
    content: "▾";
    margin-left: 6px;
    font-size: 0.72rem;
    transition: transform .15s ease;
    display: inline-block;
}
.add-reservation-modal .picker-group--small[open] > summary[b-chtns19t9j]::after {
    transform: rotate(180deg);
}
.add-reservation-modal .picker-group-grid[b-chtns19t9j] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    margin-top: 4px;
}

/* Table chip variants. Reuse base .table-pick-btn from the legacy CSS;
   add .ok/.warn/.dim/.recommended modifiers for the Phase X groupings. */
.add-reservation-modal .table-pick-btn.ok[b-chtns19t9j] {
    border-color: rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.08);
}
.add-reservation-modal .table-pick-btn.ok:hover[b-chtns19t9j] {
    background: rgba(34, 197, 94, 0.18);
    border-color: rgba(34, 197, 94, 0.6);
}
.add-reservation-modal .table-pick-btn.warn[b-chtns19t9j] {
    border-color: rgba(217, 119, 6, 0.45);
    background: rgba(217, 119, 6, 0.1);
    color: #fef3c7;
}
.add-reservation-modal .table-pick-btn.warn:hover[b-chtns19t9j] {
    background: rgba(217, 119, 6, 0.22);
}
.add-reservation-modal .table-pick-btn.warn .table-conflict-time[b-chtns19t9j] {
    font-size: 0.65rem;
    font-weight: 600;
    color: #fde68a;
    margin-top: 2px;
}
.add-reservation-modal .table-pick-btn.dim[b-chtns19t9j] {
    opacity: 0.55;
    border-style: dashed;
}
.add-reservation-modal .table-pick-btn.recommended[b-chtns19t9j] {
    position: relative;
    border-color: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.35);
    transform: translateY(-1px);
}
.add-reservation-modal .table-pick-btn.recommended .recommended-tag[b-chtns19t9j] {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #16a34a;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(22, 163, 74, 0.4);
}
.add-reservation-modal .table-pick-btn.selected[b-chtns19t9j] {
    box-shadow: 0 0 0 2px #6366f1;
    border-color: #6366f1;
}

/* Empty-zone fallback. */
.add-reservation-modal .picker-empty[b-chtns19t9j] {
    text-align: center;
    color: #94a3b8;
    font-size: 0.85rem;
    padding: 18px 12px;
    font-style: italic;
}

/* Phone input group */
.add-reservation-modal .phone-input-group[b-chtns19t9j] {
    display: flex;
    gap: 8px;
}

.add-reservation-modal .country-code-wrapper[b-chtns19t9j] {
    position: relative;
    flex-shrink: 0;
}

.add-reservation-modal .country-dropdown-backdrop[b-chtns19t9j] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.add-reservation-modal .selected-country[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 12px;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    color: #f1f5f9;
    font-size: 0.9rem;
    cursor: pointer;
    min-width: 95px;
}

.add-reservation-modal .selected-country:hover[b-chtns19t9j] {
    border-color: #6366f1;
}

.add-reservation-modal .dropdown-arrow[b-chtns19t9j] {
    font-size: 0.6rem;
    color: #94a3b8;
    margin-left: auto;
}

.add-reservation-modal .country-dropdown[b-chtns19t9j] {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    z-index: 100;
    margin-top: 4px;
    overflow: hidden;
}

.add-reservation-modal .country-search-input[b-chtns19t9j] {
    width: 100%;
    padding: 10px 12px;
    background: #1e293b;
    border: none;
    border-bottom: 1px solid #334155;
    color: #f1f5f9;
    font-size: 0.9rem;
    box-sizing: border-box;
}

.add-reservation-modal .country-search-input:focus[b-chtns19t9j] {
    outline: none;
    background: #263548;
}

.add-reservation-modal .country-search-input[b-chtns19t9j]::placeholder {
    color: #64748b;
}

.add-reservation-modal .country-list[b-chtns19t9j] {
    max-height: 180px;
    overflow-y: auto;
}

.add-reservation-modal .country-option[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    color: #f1f5f9;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}

.add-reservation-modal .country-option:hover[b-chtns19t9j],
.add-reservation-modal .country-option.selected[b-chtns19t9j] {
    background: #1e293b;
}

.add-reservation-modal .country-flag[b-chtns19t9j] {
    font-size: 1.1rem;
}

.add-reservation-modal .country-name[b-chtns19t9j] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.add-reservation-modal .country-dial[b-chtns19t9j] {
    color: #64748b;
    font-size: 0.8rem;
}

.add-reservation-modal .phone-number[b-chtns19t9j] {
    flex: 1;
    padding: 12px;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    color: #f1f5f9;
    font-size: 0.95rem;
}

.add-reservation-modal .phone-number:focus[b-chtns19t9j] {
    outline: none;
    border-color: #6366f1;
}

/* Customer lookup result */
.add-reservation-modal .customer-lookup-result[b-chtns19t9j] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 8px;
}

.add-reservation-modal .lookup-icon[b-chtns19t9j] {
    font-size: 1rem;
}

.add-reservation-modal .lookup-name[b-chtns19t9j] {
    font-weight: 600;
    color: #f1f5f9;
}

.add-reservation-modal .lookup-vip[b-chtns19t9j] {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.add-reservation-modal .lookup-vip.vip-platinum[b-chtns19t9j] {
    background: linear-gradient(135deg, #e5e4e2, #a9a9a9);
    color: #1a1a2e;
}

.add-reservation-modal .lookup-vip.vip-gold[b-chtns19t9j] {
    background: linear-gradient(135deg, #ffd700, #b8860b);
    color: #1a1a2e;
}

.add-reservation-modal .lookup-vip.vip-silver[b-chtns19t9j] {
    background: linear-gradient(135deg, #c0c0c0, #808080);
    color: #1a1a2e;
}

.add-reservation-modal .lookup-visits[b-chtns19t9j] {
    font-size: 0.8rem;
    color: #94a3b8;
}

.add-reservation-modal .lookup-warning[b-chtns19t9j] {
    color: #ef4444;
    font-weight: 600;
}

.add-reservation-modal .lookup-noshow[b-chtns19t9j] {
    font-size: 0.8rem;
    color: #f59e0b;
}

/* Time slot grid */
.add-reservation-modal .time-slot-grid[b-chtns19t9j] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    max-height: 150px;
    overflow-y: auto;
    padding: 4px;
}

.add-reservation-modal .time-slot-grid.compact[b-chtns19t9j] {
    max-height: 120px;
}

.add-reservation-modal .time-slot[b-chtns19t9j] {
    padding: 8px 4px;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 6px;
    color: #94a3b8;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}

.add-reservation-modal .time-slot:hover[b-chtns19t9j] {
    border-color: #6366f1;
    color: #f1f5f9;
}

.add-reservation-modal .time-slot.selected[b-chtns19t9j] {
    background: #6366f1;
    border-color: #6366f1;
    color: white;
}

/* Custom party size input */
.add-reservation-modal .custom-party-size[b-chtns19t9j] {
    width: 50px;
    padding: 8px;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    color: #f1f5f9;
    font-size: 0.9rem;
    text-align: center;
}

.add-reservation-modal .custom-party-size:focus[b-chtns19t9j] {
    outline: none;
    border-color: #6366f1;
}

.add-reservation-modal .custom-party-size[b-chtns19t9j]::placeholder {
    color: #64748b;
    font-size: 0.8rem;
}

.add-reservation-modal .modal-header[b-chtns19t9j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.add-reservation-modal .modal-header h3[b-chtns19t9j] {
    margin: 0;
    font-size: 1.125rem;
    color: white;
}

.add-reservation-modal .modal-close[b-chtns19t9j] {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 4px;
}

.add-reservation-modal .modal-close:hover[b-chtns19t9j] {
    color: white;
}

.add-reservation-modal .modal-body[b-chtns19t9j] {
    padding: 20px;
}

.add-reservation-modal .form-group[b-chtns19t9j] {
    margin-bottom: 16px;
}

.add-reservation-modal .form-row[b-chtns19t9j] {
    display: flex;
    gap: 12px;
}

.add-reservation-modal .form-group--half[b-chtns19t9j] {
    flex: 1;
}

.add-reservation-modal .form-group label[b-chtns19t9j] {
    display: block;
    font-size: 0.85rem;
    color: #94a3b8;
    margin-bottom: 6px;
}

.add-reservation-modal .form-group input[b-chtns19t9j],
.add-reservation-modal .form-group textarea[b-chtns19t9j] {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: white;
    font-size: 0.95rem;
}

.add-reservation-modal .form-group input:focus[b-chtns19t9j],
.add-reservation-modal .form-group textarea:focus[b-chtns19t9j] {
    outline: none;
    border-color: #6366f1;
}

.add-reservation-modal .form-hint[b-chtns19t9j],
.add-waitlist-modal .form-hint[b-chtns19t9j] {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 4px;
}

.add-reservation-modal .party-size-selector[b-chtns19t9j] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.add-reservation-modal .size-btn[b-chtns19t9j] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #94a3b8;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
}

.add-reservation-modal .size-btn:hover[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.2);
    color: white;
}

.add-reservation-modal .size-btn.selected[b-chtns19t9j] {
    background: #6366f1;
    border-color: #6366f1;
    color: white;
}

/* Compact party size selector */
.add-reservation-modal .party-size-compact[b-chtns19t9j] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.add-reservation-modal .size-adjust-btn[b-chtns19t9j] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.4);
    border-radius: 50%;
    color: #a5b4fc;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s;
}

.add-reservation-modal .size-adjust-btn:hover:not(:disabled)[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.4);
    color: white;
    transform: scale(1.1);
}

.add-reservation-modal .size-adjust-btn:disabled[b-chtns19t9j] {
    opacity: 0.3;
    cursor: not-allowed;
}

.add-reservation-modal .size-display[b-chtns19t9j] {
    font-size: 1.8rem;
    font-weight: 700;
    color: white;
    min-width: 50px;
    text-align: center;
}

.add-reservation-modal .size-quick-btns[b-chtns19t9j] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    margin-top: 8px;
}

.add-reservation-modal .size-quick-btn[b-chtns19t9j] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #94a3b8;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s;
}

.add-reservation-modal .size-quick-btn:hover[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.2);
    color: white;
}

.add-reservation-modal .size-quick-btn.selected[b-chtns19t9j] {
    background: #6366f1;
    border-color: #6366f1;
    color: white;
}

/* Customer found badge */
.add-reservation-modal .customer-found-badge[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 8px;
    color: #86efac;
    font-size: 0.85rem;
    margin-top: 6px;
}

.add-reservation-modal .vip-mini[b-chtns19t9j] {
    font-size: 0.9rem;
}

.add-reservation-modal .noshow-mini[b-chtns19t9j] {
    color: #fca5a5;
    font-size: 0.85rem;
}

/* Touch-friendly phone input with keypad */
.add-reservation-modal .phone-input-touch[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.add-reservation-modal .phone-display-field[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    min-height: 48px;
}

.add-reservation-modal .phone-value[b-chtns19t9j] {
    flex: 1;
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 1px;
    font-family: 'SF Mono', 'Menlo', monospace;
}

.add-reservation-modal .phone-value-input[b-chtns19t9j] {
    flex: 1;
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 1px;
    font-family: 'SF Mono', 'Menlo', monospace;
    background: transparent;
    border: none;
    outline: none;
    width: 100%;
}

.add-reservation-modal .phone-value-input[b-chtns19t9j]::placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
}

.add-reservation-modal .phone-value-input:focus[b-chtns19t9j] {
    outline: none;
}

/* Country code picker */
.add-reservation-modal .country-code-picker[b-chtns19t9j] {
    position: relative;
}

.add-reservation-modal .country-code-btn[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.4);
    border-radius: 8px;
    color: #a5b4fc;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.add-reservation-modal .country-code-btn:hover[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.3);
}

.add-reservation-modal .country-code-btn .dropdown-arrow[b-chtns19t9j] {
    font-size: 0.65rem;
    opacity: 0.7;
}

.add-reservation-modal .country-backdrop[b-chtns19t9j] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.add-reservation-modal .country-dropdown[b-chtns19t9j] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 280px;
    max-height: 300px;
    background: #1e1e2e;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    z-index: 100;
    overflow: hidden;
}

.add-reservation-modal .country-search[b-chtns19t9j] {
    padding: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.add-reservation-modal .country-search input[b-chtns19t9j] {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
}

.add-reservation-modal .country-search input:focus[b-chtns19t9j] {
    outline: none;
    border-color: #6366f1;
}

.add-reservation-modal .country-search input[b-chtns19t9j]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.add-reservation-modal .country-list[b-chtns19t9j] {
    max-height: 230px;
    overflow-y: auto;
    padding: 4px;
}

.add-reservation-modal .country-option[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #e5e5e5;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.add-reservation-modal .country-option:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.08);
}

.add-reservation-modal .country-option.selected[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}

.add-reservation-modal .country-flag[b-chtns19t9j] {
    font-size: 1.2rem;
}

.add-reservation-modal .country-name[b-chtns19t9j] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.add-reservation-modal .country-code[b-chtns19t9j] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

.add-reservation-modal .keypad-spacer[b-chtns19t9j] {
    /* Empty spacer for keypad grid */
}

.add-reservation-modal .phone-keypad[b-chtns19t9j] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 4px;
}

.add-reservation-modal .keypad-btn[b-chtns19t9j] {
    padding: 16px 8px;
    font-size: 1.4rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.add-reservation-modal .keypad-btn:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.15);
}

.add-reservation-modal .keypad-btn:active[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(0.96);
}

.add-reservation-modal .keypad-btn--delete[b-chtns19t9j] {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.add-reservation-modal .keypad-btn--delete:hover[b-chtns19t9j] {
    background: rgba(239, 68, 68, 0.3);
}

/* Touch-friendly name input with on-screen keyboard */
.add-reservation-modal .name-input-touch[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.add-reservation-modal .name-input-wrapper[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.add-reservation-modal .name-text-input[b-chtns19t9j] {
    flex: 1;
    padding: 14px 16px;
    font-size: 1.1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #fff;
}

.add-reservation-modal .name-text-input:focus[b-chtns19t9j] {
    outline: none;
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
}

.add-reservation-modal .name-text-input[b-chtns19t9j]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.add-reservation-modal .keyboard-toggle-btn[b-chtns19t9j] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.15s;
}

.add-reservation-modal .keyboard-toggle-btn:hover[b-chtns19t9j],
.add-reservation-modal .keyboard-toggle-btn.active[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.3);
    border-color: #6366f1;
}

.add-reservation-modal .name-display-field[b-chtns19t9j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.add-reservation-modal .name-display-field.focused[b-chtns19t9j] {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
}

.add-reservation-modal .name-value[b-chtns19t9j] {
    font-size: 1.1rem;
    font-weight: 500;
    color: #fff;
    flex: 1;
    min-height: 24px;
}

.add-reservation-modal .name-value.placeholder[b-chtns19t9j] {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
}

.add-reservation-modal .keyboard-toggle[b-chtns19t9j] {
    font-size: 1.25rem;
    opacity: 0.6;
}

.add-reservation-modal .touch-keyboard[b-chtns19t9j] {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.add-reservation-modal .keyboard-row[b-chtns19t9j] {
    display: flex;
    justify-content: center;
    gap: 4px;
}

.add-reservation-modal .keyboard-row--bottom[b-chtns19t9j] {
    gap: 8px;
    margin-top: 4px;
}

.add-reservation-modal .key-btn[b-chtns19t9j] {
    min-width: 32px;
    height: 44px;
    padding: 8px 10px;
    font-size: 1.1rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    transition: all 0.1s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.add-reservation-modal .key-btn:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.2);
}

.add-reservation-modal .key-btn:active[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0.95);
}

.add-reservation-modal .key-btn--shift[b-chtns19t9j] {
    font-size: 1.3rem;
    min-width: 44px;
}

.add-reservation-modal .key-btn--shift.active[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.4);
    border-color: #6366f1;
}

.add-reservation-modal .key-btn--delete[b-chtns19t9j] {
    min-width: 44px;
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.add-reservation-modal .key-btn--space[b-chtns19t9j] {
    flex: 1;
    max-width: 200px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.add-reservation-modal .key-btn--done[b-chtns19t9j] {
    min-width: 60px;
    background: rgba(34, 197, 94, 0.3);
    border-color: rgba(34, 197, 94, 0.4);
    color: #86efac;
    font-weight: 600;
}

/* Touch-friendly time input with picker */
.add-reservation-modal .time-input-touch[b-chtns19t9j] {
    position: relative;
}

.add-reservation-modal .time-display-field[b-chtns19t9j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.add-reservation-modal .time-display-field.focused[b-chtns19t9j] {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
}

.add-reservation-modal .time-value[b-chtns19t9j] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    font-family: 'SF Mono', 'Menlo', monospace;
}

.add-reservation-modal .time-toggle[b-chtns19t9j] {
    font-size: 1.25rem;
    opacity: 0.6;
}

.add-reservation-modal .time-picker-dropdown[b-chtns19t9j] {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% + 40px);
    max-width: 320px;
    background: #1e1e2e;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 12px;
    z-index: 100;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.add-reservation-modal .time-picker-section[b-chtns19t9j] {
    margin-bottom: 12px;
}

.add-reservation-modal .time-picker-section:last-of-type[b-chtns19t9j] {
    margin-bottom: 8px;
}

.add-reservation-modal .time-picker-label[b-chtns19t9j] {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
}

.add-reservation-modal .time-picker-grid[b-chtns19t9j] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.add-reservation-modal .time-picker-hours[b-chtns19t9j] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}

.add-reservation-modal .time-picker-minutes[b-chtns19t9j] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.add-reservation-modal .time-btn[b-chtns19t9j] {
    padding: 10px 8px;
    font-size: 1rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.add-reservation-modal .time-btn:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.15);
}

.add-reservation-modal .time-btn.selected[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.4);
    border-color: #6366f1;
    color: #fff;
}

.add-reservation-modal .time-picker-done[b-chtns19t9j] {
    width: 100%;
    padding: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    background: rgba(34, 197, 94, 0.3);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 8px;
    color: #86efac;
    cursor: pointer;
    transition: all 0.15s ease;
}

.add-reservation-modal .time-picker-done:hover[b-chtns19t9j] {
    background: rgba(34, 197, 94, 0.4);
}

/* Time picker action buttons row */
.add-reservation-modal .time-picker-actions[b-chtns19t9j] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.add-reservation-modal .time-picker-actions .time-picker-done[b-chtns19t9j] {
    flex: 1;
}

.add-reservation-modal .time-picker-custom[b-chtns19t9j] {
    padding: 12px 16px;
    font-size: 1rem;
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 8px;
    color: #a5b4fc;
    cursor: pointer;
    transition: all 0.15s ease;
}

.add-reservation-modal .time-picker-custom:hover[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.3);
    transform: scale(1.05);
}

/* Manual time input mode */
.add-reservation-modal .time-manual-input[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0;
}

.add-reservation-modal .manual-time-fields[b-chtns19t9j] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.add-reservation-modal .manual-hour-input[b-chtns19t9j],
.add-reservation-modal .manual-minute-input[b-chtns19t9j] {
    width: 80px;
    padding: 16px 12px;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: white;
    outline: none;
    transition: all 0.2s ease;
}

.add-reservation-modal .manual-hour-input:focus[b-chtns19t9j],
.add-reservation-modal .manual-minute-input:focus[b-chtns19t9j] {
    border-color: #c4b5fd;
    background: rgba(139, 92, 246, 0.2);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

.add-reservation-modal .time-separator[b-chtns19t9j] {
    font-size: 2rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
}

.add-reservation-modal .time-picker-apply[b-chtns19t9j] {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(99, 102, 241, 0.4));
    border: 1px solid rgba(139, 92, 246, 0.5);
    border-radius: 10px;
    color: #e0d4fc;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-reservation-modal .time-picker-apply:hover[b-chtns19t9j] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.5), rgba(99, 102, 241, 0.5));
    transform: translateY(-1px);
}

.add-reservation-modal .time-picker-back[b-chtns19t9j] {
    width: 100%;
    padding: 10px;
    font-size: 0.85rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.15s ease;
}

.add-reservation-modal .time-picker-back:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Hide number input spinners for cleaner look */
.add-reservation-modal .manual-hour-input[b-chtns19t9j]::-webkit-outer-spin-button,
.add-reservation-modal .manual-hour-input[b-chtns19t9j]::-webkit-inner-spin-button,
.add-reservation-modal .manual-minute-input[b-chtns19t9j]::-webkit-outer-spin-button,
.add-reservation-modal .manual-minute-input[b-chtns19t9j]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.add-reservation-modal .manual-hour-input[type=number][b-chtns19t9j],
.add-reservation-modal .manual-minute-input[type=number][b-chtns19t9j] {
    -moz-appearance: textfield;
}

/* Table pre-selection styles */
.add-reservation-modal .table-preselect-group[b-chtns19t9j] {
    position: relative;
}

.add-reservation-modal .table-preselect[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.add-reservation-modal .select-table-btn[b-chtns19t9j] {
    flex: 1;
    padding: 12px 16px;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-reservation-modal .select-table-btn:hover[b-chtns19t9j] {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.3);
    color: #c4b5fd;
}

.add-reservation-modal .selected-table-display[b-chtns19t9j] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-reservation-modal .selected-table-display:hover[b-chtns19t9j] {
    background: rgba(139, 92, 246, 0.2);
}

.add-reservation-modal .selected-table-display .table-badge[b-chtns19t9j] {
    font-size: 1rem;
    font-weight: 600;
    color: #e0d4fc;
}

.add-reservation-modal .selected-table-display .zone-badge[b-chtns19t9j] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin-left: auto;
}

.add-reservation-modal .clear-table-btn[b-chtns19t9j] {
    padding: 4px 8px;
    font-size: 0.8rem;
    background: rgba(239, 68, 68, 0.2);
    border: none;
    border-radius: 6px;
    color: #fca5a5;
    cursor: pointer;
    transition: all 0.15s ease;
}

.add-reservation-modal .clear-table-btn:hover[b-chtns19t9j] {
    background: rgba(239, 68, 68, 0.3);
}

.add-reservation-modal .table-picker-dropdown[b-chtns19t9j] {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 8px;
    padding: 12px;
    background: #1e1e2e;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 100;
}

.add-reservation-modal .table-picker-zones[b-chtns19t9j] {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.add-reservation-modal .table-picker-zones .zone-pill[b-chtns19t9j] {
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.15s ease;
}

.add-reservation-modal .table-picker-zones .zone-pill:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.12);
}

.add-reservation-modal .table-picker-zones .zone-pill.active[b-chtns19t9j] {
    background: rgba(139, 92, 246, 0.3);
    border-color: rgba(139, 92, 246, 0.5);
    color: #e0d4fc;
}

.add-reservation-modal .table-picker-grid[b-chtns19t9j] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
    padding: 4px;
}

.add-reservation-modal .table-pick-btn[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.add-reservation-modal .table-pick-btn:hover[b-chtns19t9j] {
    background: rgba(34, 197, 94, 0.25);
    transform: scale(1.02);
}

.add-reservation-modal .table-pick-btn.selected[b-chtns19t9j] {
    background: rgba(139, 92, 246, 0.3);
    border-color: rgba(139, 92, 246, 0.6);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3);
}

.add-reservation-modal .table-pick-btn.occupied[b-chtns19t9j] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
    opacity: 0.5;
    cursor: not-allowed;
}

.add-reservation-modal .table-pick-btn.small[b-chtns19t9j] {
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.2);
}

.add-reservation-modal .table-pick-btn .table-num[b-chtns19t9j] {
    font-size: 1rem;
    font-weight: 700;
    color: white;
}

.add-reservation-modal .table-pick-btn .table-seats[b-chtns19t9j] {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}

.add-reservation-modal .table-pick-btn.selected .table-num[b-chtns19t9j],
.add-reservation-modal .table-pick-btn.selected .table-seats[b-chtns19t9j] {
    color: #e0d4fc;
}

.add-reservation-modal .table-picker-actions[b-chtns19t9j] {
    margin-top: 12px;
}

.add-reservation-modal .table-picker-actions .table-picker-done[b-chtns19t9j] {
    width: 100%;
    padding: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    background: rgba(34, 197, 94, 0.3);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 8px;
    color: #86efac;
    cursor: pointer;
    transition: all 0.15s ease;
}

.add-reservation-modal .table-picker-actions .table-picker-done:hover[b-chtns19t9j] {
    background: rgba(34, 197, 94, 0.4);
}

.add-reservation-modal .error-message[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: #fca5a5;
    font-size: 0.85rem;
}

.add-reservation-modal .modal-footer[b-chtns19t9j] {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.add-reservation-modal .btn-cancel[b-chtns19t9j] {
    flex: 1;
    padding: 12px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #94a3b8;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
}

.add-reservation-modal .btn-cancel:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.05);
}

.add-reservation-modal .btn-submit[b-chtns19t9j] {
    flex: 1;
    padding: 12px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.add-reservation-modal .btn-submit:hover:not(:disabled)[b-chtns19t9j] {
    transform: translateY(-1px);
}

.add-reservation-modal .btn-submit:disabled[b-chtns19t9j] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==================== Edit Reservation Modal ==================== */
.edit-reservation-modal .edit-customer-info[b-chtns19t9j] {
    padding: 12px 16px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 10px;
    margin-bottom: 16px;
}

.edit-reservation-modal .customer-display[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.edit-reservation-modal .customer-name[b-chtns19t9j] {
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
}

.edit-reservation-modal .customer-phone[b-chtns19t9j] {
    font-size: 0.85rem;
    color: #94a3b8;
}

/* ==================== Cancel Reservation Confirmation ==================== */
.confirm-modal[b-chtns19t9j] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1e293b;
    border-radius: 16px;
    width: 90%;
    max-width: 360px;
    padding: 24px;
    z-index: 10001;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.confirm-modal .confirm-icon[b-chtns19t9j] {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.confirm-modal h3[b-chtns19t9j] {
    margin: 0 0 12px;
    font-size: 1.25rem;
    color: #f1f5f9;
}

.confirm-modal .confirm-details[b-chtns19t9j] {
    font-size: 0.9rem;
    color: #94a3b8;
    margin: 0 0 16px;
    line-height: 1.6;
}

.confirm-modal .deposit-warning[b-chtns19t9j] {
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: #fcd34d;
    padding: 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 16px;
    text-align: left;
}

.confirm-modal .confirm-actions[b-chtns19t9j] {
    display: flex;
    gap: 12px;
}

.confirm-modal .btn-cancel[b-chtns19t9j] {
    flex: 1;
    padding: 12px;
    background: transparent;
    border: 1px solid #334155;
    border-radius: 10px;
    color: #94a3b8;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
}

.confirm-modal .btn-cancel:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.05);
    color: #f1f5f9;
}

.confirm-modal .btn-danger[b-chtns19t9j] {
    flex: 1;
    padding: 12px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.confirm-modal .btn-danger:hover:not(:disabled)[b-chtns19t9j] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.confirm-modal .btn-danger:disabled[b-chtns19t9j] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==================== Add Waitlist Modal ==================== */
.modal-backdrop[b-chtns19t9j] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* A plain dim, no blur: Chrome without graphics acceleration redraws a full-screen backdrop-filter on the CPU at
       every repaint behind it, and «Nueva reserva» and the other panel dialogs crawled there (the user, 2026-10-16). */
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
}

.add-waitlist-modal[b-chtns19t9j] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1e293b;
    border-radius: 16px;
    width: 90%;
    max-width: 400px;
    /* Above .modal-backdrop (z-index:10000) — was 1001, so the backdrop
       painted over the card and swallowed clicks (same bug class as the
       POS modifier modal). 10001 matches the working reservation modals. */
    z-index: 10001;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.add-waitlist-modal .modal-header[b-chtns19t9j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #334155;
}

.add-waitlist-modal .modal-header h3[b-chtns19t9j] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #f1f5f9;
}

.add-waitlist-modal .modal-close[b-chtns19t9j] {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 4px;
}

.add-waitlist-modal .modal-close:hover[b-chtns19t9j] {
    color: #f1f5f9;
}

.add-waitlist-modal .modal-body[b-chtns19t9j] {
    padding: 20px;
}

.add-waitlist-modal .form-group[b-chtns19t9j] {
    margin-bottom: 16px;
}

.add-waitlist-modal .form-group label[b-chtns19t9j] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 8px;
}

.add-waitlist-modal .form-group input[b-chtns19t9j],
.add-waitlist-modal .form-group textarea[b-chtns19t9j] {
    width: 100%;
    padding: 12px;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    color: #f1f5f9;
    font-size: 0.95rem;
    box-sizing: border-box;
}

.add-waitlist-modal .form-group input:focus[b-chtns19t9j],
.add-waitlist-modal .form-group textarea:focus[b-chtns19t9j] {
    outline: none;
    border-color: #6366f1;
}

.add-waitlist-modal .party-size-selector[b-chtns19t9j] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.add-waitlist-modal .size-btn[b-chtns19t9j] {
    width: 40px;
    height: 40px;
    border: 1px solid #334155;
    border-radius: 8px;
    background: #0f172a;
    color: #94a3b8;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.add-waitlist-modal .size-btn:hover[b-chtns19t9j] {
    border-color: #6366f1;
    color: #f1f5f9;
}

.add-waitlist-modal .size-btn.selected[b-chtns19t9j] {
    background: #6366f1;
    border-color: #6366f1;
    color: white;
}

.add-waitlist-modal .notification-toggle[b-chtns19t9j] {
    padding: 12px;
    background: #0f172a;
    border-radius: 8px;
    border: 1px solid #334155;
}

.add-waitlist-modal .toggle-label[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: #f1f5f9;
    font-size: 0.9rem;
}

.add-waitlist-modal .toggle-label input[type="checkbox"][b-chtns19t9j] {
    width: 18px;
    height: 18px;
    accent-color: #22c55e;
    cursor: pointer;
}

.add-waitlist-modal .toggle-text[b-chtns19t9j] {
    flex: 1;
}

.add-waitlist-modal .error-message[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: #f87171;
    font-size: 0.9rem;
    margin-top: 8px;
}

.add-waitlist-modal .modal-footer[b-chtns19t9j] {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #334155;
}

.add-waitlist-modal .btn-cancel[b-chtns19t9j] {
    flex: 1;
    padding: 12px;
    background: #334155;
    border: none;
    border-radius: 8px;
    color: #f1f5f9;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

.add-waitlist-modal .btn-cancel:hover[b-chtns19t9j] {
    background: #475569;
}

.add-waitlist-modal .btn-submit[b-chtns19t9j] {
    flex: 1;
    padding: 12px;
    background: #8b5cf6;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

.add-waitlist-modal .btn-submit:hover:not(:disabled)[b-chtns19t9j] {
    background: #7c3aed;
}

.add-waitlist-modal .btn-submit:disabled[b-chtns19t9j] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Table Selection Modal */
.table-selection-modal[b-chtns19t9j] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1e293b;
    border-radius: 16px;
    width: 90%;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
    z-index: 10001; /* above .modal-backdrop:10000 (was 1001 — backdrop covered it) */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.table-selection-modal .modal-header[b-chtns19t9j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #334155;
}

.table-selection-modal .modal-header h3[b-chtns19t9j] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #f1f5f9;
}

.table-selection-modal .modal-close[b-chtns19t9j] {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 4px;
}

.table-selection-modal .modal-close:hover[b-chtns19t9j] {
    color: #f1f5f9;
}

.table-selection-modal .modal-body[b-chtns19t9j] {
    padding: 20px;
}

.table-selection-modal .party-info[b-chtns19t9j] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.table-selection-modal .party-size-badge[b-chtns19t9j] {
    background: #3b82f6;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
}

.table-selection-modal .zone-preference[b-chtns19t9j] {
    background: #475569;
    color: #f1f5f9;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.875rem;
}

.table-selection-modal .loading-tables[b-chtns19t9j] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: #94a3b8;
}

.table-selection-modal .spinner-small[b-chtns19t9j] {
    width: 20px;
    height: 20px;
    border: 2px solid #334155;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: spin-b-chtns19t9j 0.8s linear infinite;
}

.table-selection-modal .no-tables[b-chtns19t9j] {
    text-align: center;
    padding: 30px 20px;
    color: #94a3b8;
}

.table-selection-modal .no-tables .warning-icon[b-chtns19t9j] {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 12px;
}

.table-selection-modal .no-tables p[b-chtns19t9j] {
    margin: 0 0 8px 0;
}

.table-selection-modal .no-tables .hint[b-chtns19t9j] {
    font-size: 0.85rem;
    color: #64748b;
}

.table-selection-modal .table-options[b-chtns19t9j] {
    margin-bottom: 16px;
}

.table-selection-modal .section-label[b-chtns19t9j] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 12px;
}

.table-selection-modal .table-grid[b-chtns19t9j] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.table-selection-modal .table-option[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 14px;
    background: #0f172a;
    border: 2px solid #334155;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.table-selection-modal .table-option:hover[b-chtns19t9j] {
    border-color: #6366f1;
    background: #1a1f36;
}

.table-selection-modal .table-option.selected[b-chtns19t9j] {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.15);
}

.table-selection-modal .table-option.recommended[b-chtns19t9j] {
    position: relative;
}

.table-selection-modal .table-option .table-label[b-chtns19t9j] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 4px;
}

.table-selection-modal .table-option .table-details[b-chtns19t9j] {
    font-size: 0.8rem;
    color: #94a3b8;
}

.table-selection-modal .table-option .fit-badge[b-chtns19t9j] {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #22c55e;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
}

.table-selection-modal .no-table-option[b-chtns19t9j] {
    padding: 12px;
    background: #0f172a;
    border-radius: 8px;
    margin-top: 12px;
}

.table-selection-modal .no-table-option label[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #94a3b8;
    font-size: 0.9rem;
    cursor: pointer;
}

.table-selection-modal .no-table-option input[type="checkbox"][b-chtns19t9j] {
    width: 18px;
    height: 18px;
    accent-color: #6366f1;
}

.table-selection-modal .modal-footer[b-chtns19t9j] {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #334155;
}

.table-selection-modal .btn-cancel[b-chtns19t9j] {
    flex: 1;
    padding: 12px;
    background: #334155;
    border: none;
    border-radius: 8px;
    color: #f1f5f9;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.table-selection-modal .btn-cancel:hover[b-chtns19t9j] {
    background: #475569;
}

.table-selection-modal .btn-call[b-chtns19t9j] {
    flex: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: #22c55e;
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}

.table-selection-modal .btn-call:hover[b-chtns19t9j] {
    background: #16a34a;
}

.table-selection-modal .btn-call .selected-table[b-chtns19t9j] {
    font-size: 0.85rem;
    opacity: 0.9;
}

/* Blacklist Toggle Modal */
.blacklist-modal[b-chtns19t9j] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1e293b;
    border-radius: 16px;
    width: 90%;
    max-width: 400px;
    z-index: 10001; /* above .modal-backdrop:10000 (was 1001 — backdrop covered it) */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: modal-appear-b-chtns19t9j 0.2s ease-out;
}

.blacklist-modal .modal-header[b-chtns19t9j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-radius: 16px 16px 0 0;
}

.blacklist-modal .modal-header.unblock-header[b-chtns19t9j] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.blacklist-modal .modal-header.block-header[b-chtns19t9j] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.blacklist-modal .modal-header h3[b-chtns19t9j] {
    color: white;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.blacklist-modal .modal-close[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.2s;
}

.blacklist-modal .modal-close:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.3);
}

.blacklist-modal .modal-body[b-chtns19t9j] {
    padding: 20px;
    color: #e2e8f0;
}

.blacklist-modal .blacklist-customer-info[b-chtns19t9j] {
    text-align: center;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    margin-bottom: 16px;
}

.blacklist-modal .customer-name-large[b-chtns19t9j] {
    font-size: 1.3rem;
    font-weight: 700;
    color: white;
    margin-bottom: 4px;
}

.blacklist-modal .customer-phone[b-chtns19t9j] {
    font-size: 0.95rem;
    color: #94a3b8;
}

.blacklist-modal .noshow-info[b-chtns19t9j] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.blacklist-modal .noshow-count[b-chtns19t9j] {
    color: #f87171;
    font-weight: 600;
    font-size: 0.9rem;
}

.blacklist-modal .unblock-message[b-chtns19t9j],
.blacklist-modal .block-message[b-chtns19t9j] {
    text-align: center;
}

.blacklist-modal .unblock-message p[b-chtns19t9j],
.blacklist-modal .block-message p[b-chtns19t9j] {
    margin: 0 0 8px 0;
    color: #e2e8f0;
}

.blacklist-modal .block-warning[b-chtns19t9j] {
    color: #fca5a5 !important;
    font-size: 0.9rem;
}

.blacklist-modal .reason-input[b-chtns19t9j] {
    margin-top: 16px;
    text-align: left;
}

.blacklist-modal .reason-input label[b-chtns19t9j] {
    display: block;
    margin-bottom: 6px;
    font-size: 0.9rem;
    color: #94a3b8;
}

.blacklist-modal .reason-input input[b-chtns19t9j] {
    width: 100%;
    padding: 12px;
    border: 1px solid #475569;
    border-radius: 8px;
    background: #334155;
    color: white;
    font-size: 1rem;
    box-sizing: border-box;
}

.blacklist-modal .reason-input input[b-chtns19t9j]::placeholder {
    color: #64748b;
}

.blacklist-modal .reason-input input:focus[b-chtns19t9j] {
    outline: none;
    border-color: #3b82f6;
}

.blacklist-modal .blacklist-error[b-chtns19t9j] {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    padding: 10px 14px;
    border-radius: 8px;
    margin-top: 12px;
    font-size: 0.9rem;
    text-align: center;
}

.blacklist-modal .modal-footer[b-chtns19t9j] {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #334155;
}

.blacklist-modal .btn-cancel[b-chtns19t9j] {
    flex: 1;
    padding: 12px;
    border: 1px solid #475569;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.blacklist-modal .btn-cancel:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.05);
    color: white;
}

.blacklist-modal .btn-cancel:disabled[b-chtns19t9j] {
    opacity: 0.5;
    cursor: not-allowed;
}

.blacklist-modal .btn-unblock[b-chtns19t9j] {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.blacklist-modal .btn-unblock:hover[b-chtns19t9j] {
    filter: brightness(1.1);
}

.blacklist-modal .btn-unblock:disabled[b-chtns19t9j] {
    opacity: 0.6;
    cursor: not-allowed;
}

.blacklist-modal .btn-block[b-chtns19t9j] {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.blacklist-modal .btn-block:hover[b-chtns19t9j] {
    filter: brightness(1.1);
}

.blacklist-modal .btn-block:disabled[b-chtns19t9j] {
    opacity: 0.6;
    cursor: not-allowed;
}

.blacklist-modal .btn-spinner[b-chtns19t9j] {
    display: inline-block;
    animation: spin-b-chtns19t9j 1s linear infinite;
}

/* Clickable badges for blacklist/block actions */
.blacklist-badge--clickable[b-chtns19t9j],
.noshow-badge--clickable[b-chtns19t9j] {
    cursor: pointer;
    transition: transform 0.15s, filter 0.15s;
}

.blacklist-badge--clickable:hover[b-chtns19t9j],
.noshow-badge--clickable:hover[b-chtns19t9j] {
    transform: scale(1.15);
    filter: brightness(1.2);
}

.blacklist-badge--clickable:active[b-chtns19t9j],
.noshow-badge--clickable:active[b-chtns19t9j] {
    transform: scale(0.95);
}

/* Waitlist Success Modal */
.waitlist-success-modal[b-chtns19t9j] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1e293b;
    border-radius: 16px;
    width: 90%;
    max-width: 420px;
    z-index: 10001; /* above .modal-backdrop:10000 (was 1001 — backdrop covered it) */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: modal-appear-b-chtns19t9j 0.2s ease-out;
}

@keyframes modal-appear-b-chtns19t9j {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.waitlist-success-modal .success-header[b-chtns19t9j] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: 16px 16px 0 0;
}

.waitlist-success-modal .success-header h3[b-chtns19t9j] {
    color: white;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.waitlist-success-modal .modal-header[b-chtns19t9j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
}

.waitlist-success-modal .modal-close[b-chtns19t9j] {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}

.waitlist-success-modal .modal-close:hover[b-chtns19t9j] {
    background: rgba(255,255,255,0.3);
}

.waitlist-success-modal .modal-body[b-chtns19t9j] {
    padding: 24px 20px;
}

.waitlist-success-modal .success-info[b-chtns19t9j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #334155;
}

.waitlist-success-modal .customer-name[b-chtns19t9j] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f1f5f9;
}

.waitlist-success-modal .position-badge[b-chtns19t9j] {
    background: #6366f1;
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
}

.waitlist-success-modal .tracking-section[b-chtns19t9j] {
    text-align: center;
}

.waitlist-success-modal .tracking-label[b-chtns19t9j] {
    color: #94a3b8;
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.waitlist-success-modal .tracking-url-box[b-chtns19t9j] {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    overflow: hidden;
}

.waitlist-success-modal .tracking-url[b-chtns19t9j] {
    color: #60a5fa;
    font-size: 0.85rem;
    word-break: break-all;
}

.waitlist-success-modal .tracking-actions[b-chtns19t9j] {
    margin-bottom: 16px;
}

.waitlist-success-modal .btn-copy[b-chtns19t9j] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: #334155;
    border: none;
    border-radius: 8px;
    color: #f1f5f9;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.waitlist-success-modal .btn-copy:hover[b-chtns19t9j] {
    background: #475569;
}

.waitlist-success-modal .btn-copy.copied[b-chtns19t9j] {
    background: #22c55e;
    color: white;
}

.waitlist-success-modal .tracking-hint[b-chtns19t9j] {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

.waitlist-success-modal .modal-footer[b-chtns19t9j] {
    padding: 16px 20px;
    border-top: 1px solid #334155;
}

.waitlist-success-modal .btn-done[b-chtns19t9j] {
    width: 100%;
    padding: 12px;
    background: #6366f1;
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}

.waitlist-success-modal .btn-done:hover[b-chtns19t9j] {
    background: #4f46e5;
}

/* ==================== Reservation Calendar Modal ==================== */
.reservation-calendar-modal[b-chtns19t9j] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1e293b;
    border-radius: 16px;
    width: 95%;
    max-width: 520px;
    max-height: 90vh;
    z-index: 10001; /* above .modal-backdrop:10000 (was 1001 — backdrop covered it) */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.reservation-calendar-modal .modal-header[b-chtns19t9j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.reservation-calendar-modal .modal-header h3[b-chtns19t9j] {
    margin: 0;
    font-size: 1.125rem;
    color: white;
}

.reservation-calendar-modal .modal-close[b-chtns19t9j] {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 4px;
}

.reservation-calendar-modal .modal-close:hover[b-chtns19t9j] {
    color: white;
}

.reservation-calendar-modal .modal-body[b-chtns19t9j] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

/* Calendar View Tabs */
.reservation-calendar-modal .calendar-view-tabs[b-chtns19t9j] {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.reservation-calendar-modal .view-tab[b-chtns19t9j] {
    flex: 1;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #94a3b8;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.reservation-calendar-modal .view-tab:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.08);
}

.reservation-calendar-modal .view-tab.active[b-chtns19t9j] {
    background: #6366f1;
    border-color: #6366f1;
    color: white;
}

/* Upcoming View */
.reservation-calendar-modal .upcoming-header[b-chtns19t9j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.reservation-calendar-modal .upcoming-title[b-chtns19t9j] {
    font-size: 0.9rem;
    color: #94a3b8;
}

.reservation-calendar-modal .upcoming-list[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.reservation-calendar-modal .upcoming-date-section[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    overflow: hidden;
}

.reservation-calendar-modal .upcoming-date-header[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(99, 102, 241, 0.15);
    cursor: pointer;
    transition: background 0.2s;
}

.reservation-calendar-modal .upcoming-date-header:hover[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.25);
}

.reservation-calendar-modal .upcoming-date[b-chtns19t9j] {
    font-weight: 600;
    color: #f1f5f9;
    flex: 1;
}

.reservation-calendar-modal .upcoming-count[b-chtns19t9j] {
    font-size: 0.85rem;
    color: #94a3b8;
}

.reservation-calendar-modal .upcoming-arrow[b-chtns19t9j] {
    color: #6366f1;
}

.reservation-calendar-modal .upcoming-reservations[b-chtns19t9j] {
    padding: 8px 16px;
}

.reservation-calendar-modal .upcoming-res-item[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.reservation-calendar-modal .upcoming-res-item:last-child[b-chtns19t9j] {
    border-bottom: none;
}

.reservation-calendar-modal .upcoming-res-time[b-chtns19t9j] {
    font-weight: 600;
    color: #a5b4fc;
    min-width: 50px;
}

.reservation-calendar-modal .upcoming-res-name[b-chtns19t9j] {
    flex: 1;
    color: #f1f5f9;
}

.reservation-calendar-modal .upcoming-res-party[b-chtns19t9j] {
    color: #94a3b8;
    font-size: 0.85rem;
}

/* Calendar Navigation */
.reservation-calendar-modal .calendar-nav[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.reservation-calendar-modal .calendar-nav-btn[b-chtns19t9j] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #a5b4fc;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.reservation-calendar-modal .calendar-nav-btn:hover:not(:disabled)[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.2);
    color: white;
}

.reservation-calendar-modal .calendar-nav-btn:disabled[b-chtns19t9j] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.reservation-calendar-modal .calendar-nav-today[b-chtns19t9j] {
    width: auto;
    padding: 0 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.reservation-calendar-modal .calendar-nav-today.active[b-chtns19t9j] {
    background: #6366f1;
    border-color: #6366f1;
    color: white;
}

.reservation-calendar-modal .calendar-nav-refresh[b-chtns19t9j] {
    font-size: 0.85rem;
    position: relative;
}

/* Only the 🔄 turns while loading: the button carries the live dot (and a turning square looked odd). */
.reservation-calendar-modal .calendar-nav-refresh.spinning .refresh-glyph[b-chtns19t9j] {
    display: inline-block;
    animation: spin-b-chtns19t9j 1s linear infinite;
}

.reservation-calendar-modal .calendar-nav-refresh .auto-refresh-dot[b-chtns19t9j] {
    position: absolute;
    top: 5px;
    right: 5px;
}

.reservation-calendar-modal .calendar-nav-refresh:disabled[b-chtns19t9j] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Upcoming dates dropdown */
.reservation-calendar-modal .upcoming-dates-wrapper[b-chtns19t9j] {
    position: relative;
}

.reservation-calendar-modal .calendar-nav-upcoming[b-chtns19t9j] {
    font-size: 1rem;
}

.reservation-calendar-modal .calendar-nav-upcoming.active[b-chtns19t9j] {
    background: #6366f1;
    border-color: #6366f1;
    color: white;
}

.reservation-calendar-modal .upcoming-dates-backdrop[b-chtns19t9j] {
    position: fixed;
    inset: 0;
    z-index: 999;
}

.reservation-calendar-modal .upcoming-dates-dropdown[b-chtns19t9j] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 280px;
    max-height: 400px;
    background: #1e1e2e;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    overflow: hidden;
    animation: slideDown-b-chtns19t9j 0.15s ease-out;
}

@keyframes slideDown-b-chtns19t9j {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reservation-calendar-modal .upcoming-dates-header[b-chtns19t9j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 600;
    font-size: 0.9rem;
    color: #fff;
}

.reservation-calendar-modal .upcoming-dates-close[b-chtns19t9j] {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-size: 1rem;
    padding: 4px;
}

.reservation-calendar-modal .upcoming-dates-close:hover[b-chtns19t9j] {
    color: white;
}

.reservation-calendar-modal .upcoming-dates-loading[b-chtns19t9j],
.reservation-calendar-modal .upcoming-dates-empty[b-chtns19t9j] {
    padding: 24px 16px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

.reservation-calendar-modal .upcoming-dates-loading .loading-spinner[b-chtns19t9j] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: spin-b-chtns19t9j 0.8s linear infinite;
    margin-right: 8px;
}

.reservation-calendar-modal .upcoming-dates-list[b-chtns19t9j] {
    max-height: 340px;
    overflow-y: auto;
    padding: 8px;
}

.reservation-calendar-modal .upcoming-date-item[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.reservation-calendar-modal .upcoming-date-item:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.08);
}

.reservation-calendar-modal .upcoming-date-item.selected[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.4);
}

.reservation-calendar-modal .upcoming-date-item.today[b-chtns19t9j] {
    border-left: 3px solid #10b981;
}

.reservation-calendar-modal .upcoming-date-day[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 48px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.reservation-calendar-modal .upcoming-date-weekday[b-chtns19t9j] {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.5px;
}

.reservation-calendar-modal .upcoming-date-num[b-chtns19t9j] {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
}

.reservation-calendar-modal .upcoming-date-month[b-chtns19t9j] {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.reservation-calendar-modal .upcoming-date-info[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reservation-calendar-modal .upcoming-date-count[b-chtns19t9j] {
    font-size: 0.9rem;
    font-weight: 500;
}

.reservation-calendar-modal .upcoming-date-guests[b-chtns19t9j] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.reservation-calendar-modal .calendar-date-picker[b-chtns19t9j] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.reservation-calendar-modal .calendar-date-picker input[type="date"][b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: white;
    padding: 8px 12px;
    font-size: 0.9rem;
    cursor: pointer;
    color-scheme: dark;
}

.reservation-calendar-modal .calendar-date-picker input[type="date"]:focus[b-chtns19t9j] {
    outline: none;
    border-color: #6366f1;
}

.reservation-calendar-modal .calendar-date-picker input[type="date"]:disabled[b-chtns19t9j] {
    opacity: 0.5;
    cursor: not-allowed;
}

.reservation-calendar-modal .calendar-date-label[b-chtns19t9j] {
    color: #94a3b8;
    font-size: 0.8rem;
    text-transform: capitalize;
    margin-top: 4px;
}

/* Calendar Loading */
.reservation-calendar-modal .calendar-loading[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 12px;
    color: #94a3b8;
}

.reservation-calendar-modal .calendar-loading .spinner[b-chtns19t9j] {
    width: 32px;
    height: 32px;
    border: 3px solid #334155;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: spin-b-chtns19t9j 0.8s linear infinite;
}

/* Calendar Empty State */
.reservation-calendar-modal .calendar-empty[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    text-align: center;
}

.reservation-calendar-modal .calendar-empty-icon[b-chtns19t9j] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    opacity: 0.8;
}

.reservation-calendar-modal .calendar-empty-text[b-chtns19t9j] {
    font-size: 1rem;
    color: #94a3b8;
    margin-bottom: 1rem;
}

/* Calendar Summary */
.reservation-calendar-modal .calendar-summary[b-chtns19t9j] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.reservation-calendar-modal .summary-count[b-chtns19t9j],
.reservation-calendar-modal .summary-people[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Calendar List */
.reservation-calendar-modal .calendar-list[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Calendar Reservation Card */
.reservation-calendar-modal .calendar-res-card[b-chtns19t9j] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    transition: all 0.2s;
}

.reservation-calendar-modal .calendar-res-card:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.06);
}

/* Right column: status + actions + contact */
.reservation-calendar-modal .calendar-res-right[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.reservation-calendar-modal .calendar-res-contact[b-chtns19t9j] {
    display: flex;
    gap: 6px;
}

.reservation-calendar-modal .contact-icon[b-chtns19t9j] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.15s;
}

.reservation-calendar-modal .contact-icon:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(1.1);
}

.reservation-calendar-modal .calendar-res-actions[b-chtns19t9j] {
    display: flex;
    gap: 4px;
}

/* Status variants */
.reservation-calendar-modal .calendar-res--confirmed[b-chtns19t9j] {
    border-left: 3px solid #10b981;
}

.reservation-calendar-modal .calendar-res--reminded[b-chtns19t9j] {
    border-left: 3px solid #3b82f6;
}

.reservation-calendar-modal .calendar-res--pending[b-chtns19t9j] {
    border-left: 3px solid #f59e0b;
}

.reservation-calendar-modal .calendar-res--arrived[b-chtns19t9j] {
    border-left: 3px solid #8b5cf6;
    background: rgba(139, 92, 246, 0.1);
}

.reservation-calendar-modal .calendar-res--completed[b-chtns19t9j] {
    border-left: 3px solid #22c55e;
    opacity: 0.7;
}

.reservation-calendar-modal .calendar-res--noshow[b-chtns19t9j] {
    border-left: 3px solid #ef4444;
    opacity: 0.6;
}

.reservation-calendar-modal .calendar-res--cancelled[b-chtns19t9j] {
    border-left: 3px solid #64748b;
    opacity: 0.5;
}

/* Time column */
.reservation-calendar-modal .calendar-res-time[b-chtns19t9j] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #a5b4fc;
    min-width: 50px;
}

/* Info column */
.reservation-calendar-modal .calendar-res-info[b-chtns19t9j] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.reservation-calendar-modal .calendar-res-header[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.reservation-calendar-modal .calendar-res-name[b-chtns19t9j] {
    font-weight: 600;
    color: #f1f5f9;
    font-size: 0.95rem;
}

.reservation-calendar-modal .calendar-res-details[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.reservation-calendar-modal .party-size-compact[b-chtns19t9j] {
    font-size: 0.8rem;
    color: #94a3b8;
}

.reservation-calendar-modal .calendar-res-contact[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.reservation-calendar-modal .calendar-res-meta[b-chtns19t9j] {
    display: flex;
    gap: 8px;
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 2px;
}

.reservation-calendar-modal .calendar-res-notes[b-chtns19t9j] {
    font-size: 0.75rem;
    color: #fbbf24;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reservation-calendar-modal .calendar-customer-notes[b-chtns19t9j] {
    font-size: 0.75rem;
    color: #a78bfa;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reservation-calendar-modal .calendar-phone-link[b-chtns19t9j] {
    color: #60a5fa;
    text-decoration: none;
    transition: color 0.2s;
}

.reservation-calendar-modal .calendar-phone-link:hover[b-chtns19t9j] {
    color: #93c5fd;
    text-decoration: underline;
}

.reservation-calendar-modal .calendar-res--blacklisted[b-chtns19t9j] {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
}

.reservation-calendar-modal .calendar-res-name[b-chtns19t9j] {
    font-weight: 600;
    color: #f1f5f9;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* Phone number in calendar */
.reservation-calendar-modal .calendar-phone[b-chtns19t9j] {
    color: #86efac;
    font-size: 0.85rem;
}

/* Preferred zone in calendar */
.reservation-calendar-modal .calendar-zone[b-chtns19t9j] {
    color: #a5b4fc;
}

/* Dark theme badges for calendar modal */
.reservation-calendar-modal .vip-badge[b-chtns19t9j] {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.reservation-calendar-modal .vip-badge--platinum[b-chtns19t9j] {
    background: linear-gradient(135deg, #a855f7 0%, #3b82f6 100%);
    color: white;
    font-weight: 600;
}

.reservation-calendar-modal .vip-badge--gold[b-chtns19t9j] {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    color: white;
    font-weight: 600;
}

.reservation-calendar-modal .vip-badge--silver[b-chtns19t9j] {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    color: white;
    font-weight: 500;
}

.reservation-calendar-modal .blacklist-badge[b-chtns19t9j] {
    font-size: 0.8rem;
    color: #fca5a5;
}

.reservation-calendar-modal .noshow-badge[b-chtns19t9j] {
    font-size: 0.7rem;
    color: #fb923c;
    background: rgba(249, 115, 22, 0.15);
    padding: 2px 5px;
    border-radius: 8px;
}

/* Deposit badge */
.reservation-calendar-modal .deposit-badge[b-chtns19t9j] {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.reservation-calendar-modal .deposit-badge.deposit-paid[b-chtns19t9j] {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}

.reservation-calendar-modal .deposit-badge.deposit-pending[b-chtns19t9j] {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    animation: pendingPulse-b-chtns19t9j 2s ease-in-out infinite;
}

@keyframes pendingPulse-b-chtns19t9j {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Source badge */
.reservation-calendar-modal .source-badge[b-chtns19t9j] {
    font-size: 0.7rem;
    padding: 2px 4px;
    border-radius: 6px;
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
}

/* Status column */
.reservation-calendar-modal .calendar-res-status[b-chtns19t9j] {
    min-width: fit-content;
}

.reservation-calendar-modal .status-pill[b-chtns19t9j] {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.reservation-calendar-modal .status-pill.confirmed[b-chtns19t9j] {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}

.reservation-calendar-modal .status-pill.reminded[b-chtns19t9j] {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

.reservation-calendar-modal .status-pill.pending[b-chtns19t9j] {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
}

.reservation-calendar-modal .status-pill.arrived[b-chtns19t9j] {
    background: rgba(139, 92, 246, 0.2);
    color: #c4b5fd;
}

.reservation-calendar-modal .status-pill.completed[b-chtns19t9j] {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
}

.reservation-calendar-modal .status-pill.no_show[b-chtns19t9j] {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

.reservation-calendar-modal .status-pill.cancelled[b-chtns19t9j] {
    background: rgba(100, 116, 139, 0.2);
    color: #cbd5e1;
}

.reservation-calendar-modal .calendar-action-btn[b-chtns19t9j] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.reservation-calendar-modal .calendar-action--arrive[b-chtns19t9j] {
    color: #6ee7b7;
}

.reservation-calendar-modal .calendar-action--arrive:hover[b-chtns19t9j] {
    background: rgba(16, 185, 129, 0.3);
}

.reservation-calendar-modal .calendar-action--edit[b-chtns19t9j] {
    color: #93c5fd;
}

.reservation-calendar-modal .calendar-action--edit:hover[b-chtns19t9j] {
    background: rgba(59, 130, 246, 0.3);
}

.reservation-calendar-modal .calendar-action--noshow[b-chtns19t9j] {
    color: #fca5a5;
}

.reservation-calendar-modal .calendar-action--noshow:hover[b-chtns19t9j] {
    background: rgba(239, 68, 68, 0.3);
}

.reservation-calendar-modal .calendar-action--cancel[b-chtns19t9j] {
    color: #94a3b8;
}

.reservation-calendar-modal .calendar-action--cancel:hover[b-chtns19t9j] {
    background: rgba(100, 116, 139, 0.3);
}

.reservation-calendar-modal .calendar-action--reminder[b-chtns19t9j] {
    color: #fbbf24;
}

.reservation-calendar-modal .calendar-action--reminder:hover[b-chtns19t9j] {
    background: rgba(251, 191, 36, 0.3);
}

.reservation-calendar-modal .calendar-action--reminder.already-sent[b-chtns19t9j] {
    color: #86efac;
    opacity: 0.7;
}

/* Occasion badge for celebrations */
.reservation-calendar-modal .occasion-badge[b-chtns19t9j] {
    font-size: 1rem;
    padding: 2px 4px;
    border-radius: 6px;
    background: rgba(236, 72, 153, 0.2);
    animation: occasionPulse-b-chtns19t9j 2s ease-in-out infinite;
}

@keyframes occasionPulse-b-chtns19t9j {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* Arrival badge - customer is on their way */
.reservation-calendar-modal .arrival-badge[b-chtns19t9j] {
    font-size: 1rem;
    padding: 2px 4px;
    border-radius: 6px;
    background: rgba(59, 130, 246, 0.2);
    animation: arrivalPulse-b-chtns19t9j 1.5s ease-in-out infinite;
}

@keyframes arrivalPulse-b-chtns19t9j {
    0%, 100% {
        transform: scale(1);
        background: rgba(59, 130, 246, 0.2);
    }
    50% {
        transform: scale(1.15);
        background: rgba(59, 130, 246, 0.4);
    }
}

/* Calendar Error Message */
.reservation-calendar-modal .calendar-error[b-chtns19t9j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: #fca5a5;
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.reservation-calendar-modal .calendar-error-dismiss[b-chtns19t9j] {
    background: transparent;
    border: none;
    color: #fca5a5;
    cursor: pointer;
    padding: 2px 6px;
    font-size: 0.9rem;
}

.reservation-calendar-modal .calendar-error-dismiss:hover[b-chtns19t9j] {
    color: white;
}

.reservation-calendar-modal .calendar-error--clickable[b-chtns19t9j] {
    cursor: pointer;
}

.reservation-calendar-modal .calendar-error--clickable:hover[b-chtns19t9j] {
    background: rgba(239, 68, 68, 0.25);
}

/* Calendar Action Spinner */
.reservation-calendar-modal .calendar-action-spinner[b-chtns19t9j] {
    font-size: 1rem;
    animation: spin-b-chtns19t9j 1s linear infinite;
}

/* Disabled action buttons */
.reservation-calendar-modal .calendar-action-btn:disabled[b-chtns19t9j] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Calendar modal footer styling */
.reservation-calendar-modal .modal-footer[b-chtns19t9j] {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.reservation-calendar-modal .btn-cancel[b-chtns19t9j] {
    flex: 1;
    padding: 12px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #94a3b8;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.reservation-calendar-modal .btn-cancel:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.05);
    color: white;
}

.reservation-calendar-modal .btn-submit[b-chtns19t9j] {
    flex: 1.5;
    padding: 12px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap; /* "+ Nueva reserva para 12 / oct" broke over two lines */
    cursor: pointer;
    transition: all 0.2s;
}

.reservation-calendar-modal .btn-submit:hover[b-chtns19t9j] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

@keyframes spin-b-chtns19t9j {
    to {
        transform: rotate(360deg);
    }
}

/* ===== Toast Notification ===== */
.reservation-calendar-modal .calendar-toast[b-chtns19t9j] {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    z-index: 100;
    animation: toastSlideIn-b-chtns19t9j 0.3s ease-out, toastFadeOut-b-chtns19t9j 0.3s ease-in 2.7s;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.reservation-calendar-modal .calendar-toast--success[b-chtns19t9j] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.reservation-calendar-modal .calendar-toast--warning[b-chtns19t9j] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.reservation-calendar-modal .calendar-toast--error[b-chtns19t9j] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

@keyframes toastSlideIn-b-chtns19t9j {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes toastFadeOut-b-chtns19t9j {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* ===== Global Toast (outside modals) ===== */
.global-toast[b-chtns19t9j] {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 500;
    z-index: 10000;
    animation: globalToastIn-b-chtns19t9j 0.3s ease-out, globalToastOut-b-chtns19t9j 0.3s ease-in 3.7s;
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    max-width: 90vw;
}

.global-toast--success[b-chtns19t9j] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.global-toast--warning[b-chtns19t9j] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.global-toast--error[b-chtns19t9j] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

@keyframes globalToastIn-b-chtns19t9j {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes globalToastOut-b-chtns19t9j {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* ===== Confirmation Dialog ===== */
.reservation-calendar-modal .calendar-confirm-overlay[b-chtns19t9j] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    animation: fadeIn-b-chtns19t9j 0.2s ease-out;
}

.reservation-calendar-modal .calendar-confirm-dialog[b-chtns19t9j] {
    background: #1e293b;
    border-radius: 16px;
    padding: 24px;
    max-width: 360px;
    text-align: center;
    animation: dialogBounce-b-chtns19t9j 0.3s ease-out;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.reservation-calendar-modal .confirm-icon[b-chtns19t9j] {
    font-size: 3rem;
    margin-bottom: 12px;
}

.reservation-calendar-modal .confirm-title[b-chtns19t9j] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 12px;
}

.reservation-calendar-modal .confirm-message[b-chtns19t9j] {
    font-size: 0.9rem;
    color: #94a3b8;
    margin-bottom: 20px;
    line-height: 1.5;
}

.reservation-calendar-modal .confirm-message strong[b-chtns19t9j] {
    color: #e2e8f0;
}

.reservation-calendar-modal .confirm-buttons[b-chtns19t9j] {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.reservation-calendar-modal .confirm-btn[b-chtns19t9j] {
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.reservation-calendar-modal .confirm-btn--cancel[b-chtns19t9j] {
    background: #334155;
    color: #e2e8f0;
}

.reservation-calendar-modal .confirm-btn--cancel:hover[b-chtns19t9j] {
    background: #475569;
}

.reservation-calendar-modal .confirm-btn--confirm[b-chtns19t9j] {
    color: white;
}

.reservation-calendar-modal .confirm-btn--warning[b-chtns19t9j] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.reservation-calendar-modal .confirm-btn--warning:hover[b-chtns19t9j] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.reservation-calendar-modal .confirm-btn--danger[b-chtns19t9j] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.reservation-calendar-modal .confirm-btn--danger:hover[b-chtns19t9j] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

@keyframes fadeIn-b-chtns19t9j {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes dialogBounce-b-chtns19t9j {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== Time Block & Countdown ===== */
.reservation-calendar-modal .calendar-res-time-block[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
    gap: 4px;
}

.reservation-calendar-modal .calendar-time-until[b-chtns19t9j] {
    font-size: 0.7rem;
    color: #64748b;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(100, 116, 139, 0.2);
    white-space: nowrap;
}

.reservation-calendar-modal .time-until--soon[b-chtns19t9j] {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.2);
    animation: pulse-b-chtns19t9j 2s ease-in-out infinite;
}

.reservation-calendar-modal .time-until--late[b-chtns19t9j] {
    color: #f87171;
    background: rgba(248, 113, 113, 0.2);
    font-weight: 600;
}

.reservation-calendar-modal .late-indicator[b-chtns19t9j] {
    font-size: 0.6rem;
    animation: blink-b-chtns19t9j 1s ease-in-out infinite;
}

@keyframes pulse-b-chtns19t9j {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes blink-b-chtns19t9j {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ===== Late & Upcoming Card Styles ===== */
.reservation-calendar-modal .calendar-res--late[b-chtns19t9j] {
    border-left: 4px solid #ef4444 !important;
    animation: latePulse-b-chtns19t9j 2s ease-in-out infinite;
    position: relative;
}

.reservation-calendar-modal .calendar-res--late[b-chtns19t9j]::after {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    border-radius: 12px;
    border: 2px solid transparent;
    animation: lateGlow-b-chtns19t9j 2s ease-in-out infinite;
    pointer-events: none;
}

.reservation-calendar-modal .calendar-res--upcoming[b-chtns19t9j] {
    border-left: 4px solid #fbbf24 !important;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
}

@keyframes latePulse-b-chtns19t9j {
    0%, 100% {
        background: #1e293b;
    }
    50% {
        background: rgba(239, 68, 68, 0.15);
    }
}

@keyframes lateGlow-b-chtns19t9j {
    0%, 100% {
        border-color: transparent;
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
    50% {
        border-color: rgba(239, 68, 68, 0.3);
        box-shadow: 0 0 10px 2px rgba(239, 68, 68, 0.2);
    }
}

/* ===== Modal Entry Animation ===== */
.reservation-calendar-modal[b-chtns19t9j] {
    animation: modalSlideIn-b-chtns19t9j 0.3s ease-out forwards;
}

@keyframes modalSlideIn-b-chtns19t9j {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) translateY(0);
    }
}

/* ===== Card Hover Enhancement ===== */
.reservation-calendar-modal .calendar-res-card[b-chtns19t9j] {
    transition: all 0.2s ease, transform 0.15s ease;
}

.reservation-calendar-modal .calendar-res-card:hover[b-chtns19t9j] {
    transform: translateX(4px);
}

/* ===== Action Button Hover Effects ===== */
.reservation-calendar-modal .calendar-action-btn[b-chtns19t9j] {
    transition: all 0.15s ease;
}

.reservation-calendar-modal .calendar-action--arrive:hover:not(:disabled)[b-chtns19t9j] {
    transform: scale(1.15);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
}

.reservation-calendar-modal .calendar-action--edit:hover:not(:disabled)[b-chtns19t9j] {
    transform: scale(1.15);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.5);
}

.reservation-calendar-modal .calendar-action--noshow:hover:not(:disabled)[b-chtns19t9j] {
    transform: scale(1.15);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.5);
}

.reservation-calendar-modal .calendar-action--cancel:hover:not(:disabled)[b-chtns19t9j] {
    transform: scale(1.15);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
}

.reservation-calendar-modal .calendar-action--reminder:hover:not(:disabled)[b-chtns19t9j] {
    transform: scale(1.15);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
}

/* ===== Progress Bar ===== */
.reservation-calendar-modal .calendar-progress-section[b-chtns19t9j] {
    margin-bottom: 16px;
}

.reservation-calendar-modal .progress-bar-container[b-chtns19t9j] {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}

.reservation-calendar-modal .progress-bar-fill[b-chtns19t9j] {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #6ee7b7 100%);
    border-radius: 3px;
    transition: width 0.5s ease-out;
}

.reservation-calendar-modal .progress-label[b-chtns19t9j] {
    font-size: 0.75rem;
    color: #94a3b8;
    text-align: center;
}

.reservation-calendar-modal .progress-complete[b-chtns19t9j] {
    color: #6ee7b7;
    font-weight: 600;
    animation: celebratePulse-b-chtns19t9j 1.5s ease-in-out infinite;
}

@keyframes celebratePulse-b-chtns19t9j {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ===== Next Reservation Alert ===== */
.reservation-calendar-modal .next-reservation-alert[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 10px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    color: #a5b4fc;
}

.reservation-calendar-modal .next-reservation-alert.alert--imminent[b-chtns19t9j] {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.4);
    color: #fcd34d;
    animation: imminentPulse-b-chtns19t9j 2s ease-in-out infinite;
}

@keyframes imminentPulse-b-chtns19t9j {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.3); }
    50% { box-shadow: 0 0 0 4px rgba(251, 191, 36, 0); }
}

.reservation-calendar-modal .next-icon[b-chtns19t9j] {
    font-size: 1.1rem;
}

.reservation-calendar-modal .next-text strong[b-chtns19t9j] {
    color: #e2e8f0;
}

/* ===== Status Summary Pills ===== */
.reservation-calendar-modal .summary-pill[b-chtns19t9j] {
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.reservation-calendar-modal .summary-pill--pending[b-chtns19t9j] {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
}

.reservation-calendar-modal .summary-pill--arrived[b-chtns19t9j] {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}

.reservation-calendar-modal .summary-pill--noshow[b-chtns19t9j] {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

/* ===== Next Reservation Card Highlight ===== */
.reservation-calendar-modal .calendar-res--next[b-chtns19t9j] {
    position: relative;
    border: 2px solid #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.reservation-calendar-modal .calendar-res--next[b-chtns19t9j]::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.3), transparent, rgba(99, 102, 241, 0.3));
    animation: nextGlow-b-chtns19t9j 2s linear infinite;
    z-index: -1;
}

@keyframes nextGlow-b-chtns19t9j {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.reservation-calendar-modal .next-badge[b-chtns19t9j] {
    font-size: 0.6rem;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    padding: 2px 6px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    animation: badgePop-b-chtns19t9j 0.3s ease-out;
}

@keyframes badgePop-b-chtns19t9j {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* ===== Swipe Hint for Mobile ===== */
@media (max-width: 640px) {
    .reservation-calendar-modal .calendar-nav[b-chtns19t9j] {
        justify-content: center;
    }

    /* Reservation cards: stack time / info / actions vertically so the status
       pill + the 5 action icons don't overflow the ~360px content width. */
    .reservation-calendar-modal .calendar-res-card[b-chtns19t9j] {
        user-select: none;
        -webkit-user-select: none;
        flex-direction: column;
    }
    .reservation-calendar-modal .calendar-res-right[b-chtns19t9j] {
        align-items: flex-start;
        width: 100%;
        flex-shrink: 1;
    }
    .reservation-calendar-modal .calendar-res-actions[b-chtns19t9j] {
        flex-wrap: wrap;
        gap: 6px;
    }
    /* Summary pills + the quick-action pills (Llamar / WhatsApp / Ir…) wrap
       instead of overflowing or horizontally scrolling. */
    .reservation-calendar-modal .calendar-summary[b-chtns19t9j],
    .reservation-calendar-modal .quick-actions-bar[b-chtns19t9j] {
        flex-wrap: wrap;
        gap: 8px;
    }
    .reservation-calendar-modal .quick-action-btn[b-chtns19t9j] {
        padding: 6px 10px;
        font-size: 0.78rem;
    }
}

/* ===== Filter Chips ===== */
.reservation-calendar-modal .calendar-filters[b-chtns19t9j] {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.reservation-calendar-modal .filter-chip[b-chtns19t9j] {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s;
}

.reservation-calendar-modal .filter-chip:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

.reservation-calendar-modal .filter-chip.active[b-chtns19t9j] {
    background: #6366f1;
    border-color: #6366f1;
    color: white;
}

.reservation-calendar-modal .filter-chip--pending.active[b-chtns19t9j] {
    background: #f59e0b;
    border-color: #f59e0b;
}

.reservation-calendar-modal .filter-chip--late.active[b-chtns19t9j] {
    background: #ef4444;
    border-color: #ef4444;
}

/* ===== Improved Call Button ===== */
.reservation-calendar-modal .calendar-call-btn[b-chtns19t9j] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 12px;
    color: #4ade80;
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
}

.reservation-calendar-modal .calendar-call-btn:hover[b-chtns19t9j] {
    background: rgba(34, 197, 94, 0.25);
    color: #86efac;
    transform: scale(1.05);
}

/* ===== Confetti Animation ===== */
.reservation-calendar-modal .confetti-container[b-chtns19t9j] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 300;
}

.reservation-calendar-modal .confetti[b-chtns19t9j] {
    position: absolute;
    width: 10px;
    height: 10px;
    top: -10px;
    animation: confettiFall-b-chtns19t9j 3s ease-out forwards;
}

.reservation-calendar-modal .confetti-0[b-chtns19t9j] { background: #ef4444; border-radius: 50%; }
.reservation-calendar-modal .confetti-1[b-chtns19t9j] { background: #f59e0b; border-radius: 2px; }
.reservation-calendar-modal .confetti-2[b-chtns19t9j] { background: #10b981; border-radius: 50%; }
.reservation-calendar-modal .confetti-3[b-chtns19t9j] { background: #3b82f6; border-radius: 2px; }
.reservation-calendar-modal .confetti-4[b-chtns19t9j] { background: #8b5cf6; border-radius: 50%; }
.reservation-calendar-modal .confetti-5[b-chtns19t9j] { background: #ec4899; border-radius: 2px; }

@keyframes confettiFall-b-chtns19t9j {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(500px) rotate(720deg);
        opacity: 0;
    }
}

/* ===== Filter Empty State ===== */
.reservation-calendar-modal .calendar-filter-empty[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    text-align: center;
    animation: filterEmptyFadeIn-b-chtns19t9j 0.3s ease-out;
}

.reservation-calendar-modal .filter-empty-icon[b-chtns19t9j] {
    font-size: 3rem;
    margin-bottom: 1rem;
    animation: iconBounce-b-chtns19t9j 0.5s ease-out;
}

.reservation-calendar-modal .filter-empty-text[b-chtns19t9j] {
    font-size: 1.1rem;
    color: #94a3b8;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.reservation-calendar-modal .filter-clear-btn[b-chtns19t9j] {
    padding: 10px 20px;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 10px;
    color: #a5b4fc;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.reservation-calendar-modal .filter-clear-btn:hover[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.25);
    color: white;
    transform: translateY(-2px);
}

@keyframes filterEmptyFadeIn-b-chtns19t9j {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes iconBounce-b-chtns19t9j {
    0% { transform: scale(0.5); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* ===== WhatsApp Button ===== */
.reservation-calendar-modal .calendar-whatsapp-btn[b-chtns19t9j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    background: rgba(37, 211, 102, 0.15);
    border: 1px solid rgba(37, 211, 102, 0.3);
    border-radius: 12px;
    color: #25d366;
    font-size: 0.8rem;
    text-decoration: none;
    transition: all 0.2s;
}

.reservation-calendar-modal .calendar-whatsapp-btn:hover[b-chtns19t9j] {
    background: rgba(37, 211, 102, 0.25);
    color: #4aeb8b;
    transform: scale(1.05);
}

/* ===== Auto-refresh: a live dot on the refresh button ===== */
.reservation-calendar-modal .auto-refresh-dot[b-chtns19t9j] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    animation: dotPulse-b-chtns19t9j 2s ease-in-out infinite;
}

@keyframes dotPulse-b-chtns19t9j {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* ===== Copy & Email Buttons ===== */
.reservation-calendar-modal .calendar-copy-btn[b-chtns19t9j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    background: rgba(148, 163, 184, 0.15);
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 12px;
    color: #94a3b8;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.reservation-calendar-modal .calendar-copy-btn:hover[b-chtns19t9j] {
    background: rgba(148, 163, 184, 0.25);
    color: #cbd5e1;
    transform: scale(1.05);
}

.reservation-calendar-modal .calendar-copy-btn:active[b-chtns19t9j] {
    transform: scale(0.95);
}

.reservation-calendar-modal .calendar-email-btn[b-chtns19t9j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 12px;
    color: #60a5fa;
    font-size: 0.75rem;
    text-decoration: none;
    transition: all 0.2s;
}

.reservation-calendar-modal .calendar-email-btn:hover[b-chtns19t9j] {
    background: rgba(59, 130, 246, 0.25);
    color: #93c5fd;
    transform: scale(1.05);
}

/* ===== Enhanced NEXT Badge Animation ===== */
.reservation-calendar-modal .next-badge[b-chtns19t9j] {
    animation: nextBadgePulse-b-chtns19t9j 2s ease-in-out infinite, badgePop-b-chtns19t9j 0.3s ease-out;
}

@keyframes nextBadgePulse-b-chtns19t9j {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(99, 102, 241, 0);
    }
}

/* ===== Total Visits Badge ===== */
.reservation-calendar-modal .visits-badge[b-chtns19t9j] {
    font-size: 0.65rem;
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.15);
    padding: 2px 5px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* ===== Contact Buttons Row ===== */
.reservation-calendar-modal .calendar-res-meta[b-chtns19t9j] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* ===== Smooth Modal Scroll ===== */
.reservation-calendar-modal .modal-body[b-chtns19t9j] {
    scroll-behavior: smooth;
}

/* ===== Accessibility: Focus States ===== */
.reservation-calendar-modal .calendar-action-btn:focus-visible[b-chtns19t9j],
.reservation-calendar-modal .calendar-call-btn:focus-visible[b-chtns19t9j],
.reservation-calendar-modal .calendar-whatsapp-btn:focus-visible[b-chtns19t9j],
.reservation-calendar-modal .calendar-copy-btn:focus-visible[b-chtns19t9j],
.reservation-calendar-modal .calendar-email-btn:focus-visible[b-chtns19t9j],
.reservation-calendar-modal .filter-chip:focus-visible[b-chtns19t9j] {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

/* ===== Time Range Display ===== */
.reservation-calendar-modal .calendar-res-time-range[b-chtns19t9j] {
    font-size: 0.7rem;
    color: #64748b;
    font-weight: 400;
    margin-top: 2px;
}

/* ===== Undo Toast ===== */
.reservation-calendar-modal .calendar-toast--undo[b-chtns19t9j] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.95), rgba(245, 158, 11, 0.95));
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 10px;
}

.reservation-calendar-modal .calendar-toast--undo .undo-btn[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.reservation-calendar-modal .calendar-toast--undo .undo-btn:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

/* ===== Quick Stats ===== */
.reservation-calendar-modal .calendar-quick-stats[b-chtns19t9j] {
    display: flex;
    gap: 16px;
    padding: 8px 12px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 8px;
    margin-bottom: 8px;
}

.reservation-calendar-modal .stat-item[b-chtns19t9j] {
    font-size: 0.75rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 4px;
}

.reservation-calendar-modal .stat-item strong[b-chtns19t9j] {
    color: #e2e8f0;
    font-weight: 600;
}

/* ===== Mini Timeline ===== */
.reservation-calendar-modal .calendar-timeline[b-chtns19t9j] {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    background: rgba(30, 41, 59, 0.5);
    border-radius: 8px;
    margin-bottom: 8px;
    align-items: flex-end;
    height: 50px;
    overflow-x: auto;
}

.reservation-calendar-modal .timeline-slot[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 28px;
    flex: 1;
    height: 100%;
    justify-content: flex-end;
}

.reservation-calendar-modal .slot-bar[b-chtns19t9j] {
    width: 100%;
    min-height: 4px;
    background: linear-gradient(to top, rgba(99, 102, 241, 0.8), rgba(139, 92, 246, 0.8));
    border-radius: 3px 3px 0 0;
    transition: all 0.3s ease;
}

.reservation-calendar-modal .timeline-slot:hover .slot-bar[b-chtns19t9j] {
    background: linear-gradient(to top, rgba(99, 102, 241, 1), rgba(139, 92, 246, 1));
    transform: scaleY(1.1);
}

.reservation-calendar-modal .timeline-slot.current-hour .slot-bar[b-chtns19t9j] {
    background: linear-gradient(to top, rgba(34, 197, 94, 0.9), rgba(74, 222, 128, 0.9));
    animation: currentHourPulse-b-chtns19t9j 2s ease-in-out infinite;
}

.reservation-calendar-modal .slot-label[b-chtns19t9j] {
    font-size: 0.6rem;
    color: #64748b;
    margin-top: 3px;
}

.reservation-calendar-modal .timeline-slot.current-hour .slot-label[b-chtns19t9j] {
    color: #4ade80;
    font-weight: 600;
}

@keyframes currentHourPulse-b-chtns19t9j {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ===== Animated Card Entry ===== */
.reservation-calendar-modal .calendar-res-card[b-chtns19t9j] {
    animation: cardSlideIn-b-chtns19t9j 0.3s ease-out backwards;
}

.reservation-calendar-modal .calendar-res-card:nth-child(1)[b-chtns19t9j] { animation-delay: 0ms; }
.reservation-calendar-modal .calendar-res-card:nth-child(2)[b-chtns19t9j] { animation-delay: 30ms; }
.reservation-calendar-modal .calendar-res-card:nth-child(3)[b-chtns19t9j] { animation-delay: 60ms; }
.reservation-calendar-modal .calendar-res-card:nth-child(4)[b-chtns19t9j] { animation-delay: 90ms; }
.reservation-calendar-modal .calendar-res-card:nth-child(5)[b-chtns19t9j] { animation-delay: 120ms; }
.reservation-calendar-modal .calendar-res-card:nth-child(6)[b-chtns19t9j] { animation-delay: 150ms; }
.reservation-calendar-modal .calendar-res-card:nth-child(7)[b-chtns19t9j] { animation-delay: 180ms; }
.reservation-calendar-modal .calendar-res-card:nth-child(8)[b-chtns19t9j] { animation-delay: 210ms; }

@keyframes cardSlideIn-b-chtns19t9j {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===== VIP Badge Animation ===== */
.reservation-calendar-modal .vip-badge--platinum[b-chtns19t9j] {
    animation: vipShimmer-b-chtns19t9j 2s ease-in-out infinite;
}

.reservation-calendar-modal .vip-badge--gold[b-chtns19t9j] {
    animation: vipGlow-b-chtns19t9j 2s ease-in-out infinite;
}

@keyframes vipShimmer-b-chtns19t9j {
    0%, 100% {
        background: linear-gradient(90deg, rgba(139, 92, 246, 0.3), rgba(236, 72, 153, 0.3), rgba(139, 92, 246, 0.3));
        background-size: 200% 100%;
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes vipGlow-b-chtns19t9j {
    0%, 100% { box-shadow: 0 0 3px rgba(250, 204, 21, 0.5); }
    50% { box-shadow: 0 0 8px rgba(250, 204, 21, 0.8); }
}

/* ===== Party Size Visual ===== */
.reservation-calendar-modal .party-icons[b-chtns19t9j] {
    display: inline-flex;
    gap: 1px;
    font-size: 0.65rem;
    opacity: 0.8;
}

.reservation-calendar-modal .party-icons .overflow[b-chtns19t9j] {
    font-size: 0.6rem;
    color: #94a3b8;
}

/* ========================================
   TOUCHSCREEN-FRIENDLY IMPROVEMENTS
   ======================================== */

/* Larger touch targets for action buttons (minimum 44x44px) */
.reservation-calendar-modal .calendar-action-btn[b-chtns19t9j] {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    font-size: 1.1rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tap feedback animation */
.reservation-calendar-modal .calendar-action-btn:active[b-chtns19t9j],
.reservation-calendar-modal .filter-chip:active[b-chtns19t9j],
.reservation-calendar-modal .calendar-nav-btn:active[b-chtns19t9j],
.reservation-calendar-modal .calendar-call-btn:active[b-chtns19t9j],
.reservation-calendar-modal .calendar-whatsapp-btn:active[b-chtns19t9j],
.reservation-calendar-modal .calendar-email-btn:active[b-chtns19t9j],
.reservation-calendar-modal .calendar-copy-btn:active[b-chtns19t9j] {
    transform: scale(0.92);
    transition: transform 0.1s ease;
}

/* Larger contact buttons for touch */
.reservation-calendar-modal .calendar-call-btn[b-chtns19t9j],
.reservation-calendar-modal .calendar-whatsapp-btn[b-chtns19t9j],
.reservation-calendar-modal .calendar-email-btn[b-chtns19t9j],
.reservation-calendar-modal .calendar-copy-btn[b-chtns19t9j] {
    min-width: 40px;
    min-height: 40px;
    padding: 8px 12px;
    font-size: 1rem;
}

/* Better spacing between contact buttons */
.reservation-calendar-modal .calendar-res-meta[b-chtns19t9j] {
    gap: 8px;
}

/* Larger navigation buttons */
.reservation-calendar-modal .calendar-nav-btn[b-chtns19t9j] {
    min-width: 44px;
    min-height: 44px;
    font-size: 1.2rem;
}

/* Larger filter chips for touch */
.reservation-calendar-modal .filter-chip[b-chtns19t9j] {
    min-height: 40px;
    padding: 8px 16px;
    font-size: 0.85rem;
}

/* More touch-friendly reservation cards */
.reservation-calendar-modal .calendar-res-card[b-chtns19t9j] {
    padding: 14px 16px;
    margin-bottom: 10px;
    touch-action: pan-y;
}

/* Swipe indicator hint */
.reservation-calendar-modal .calendar-res-card[b-chtns19t9j]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 30px;
    background: transparent;
    border-radius: 0 4px 4px 0;
    transition: all 0.2s;
}

.reservation-calendar-modal .calendar-res-card:active[b-chtns19t9j]::before {
    background: rgba(99, 102, 241, 0.5);
}

/* Better tap state for cards */
.reservation-calendar-modal .calendar-res-card:active[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.08);
    transform: scale(0.99);
}

/* Larger close button */
.reservation-calendar-modal .modal-close[b-chtns19t9j] {
    min-width: 44px;
    min-height: 44px;
    font-size: 1.3rem;
}

/* Success ripple animation */
@keyframes successRipple-b-chtns19t9j {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(34, 197, 94, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

.reservation-calendar-modal .calendar-action--arrive:active[b-chtns19t9j] {
    animation: successRipple-b-chtns19t9j 0.4s ease-out;
}

/* Swipe action overlays (hidden by default, shown on swipe) */
.reservation-calendar-modal .swipe-action-left[b-chtns19t9j],
.reservation-calendar-modal .swipe-action-right[b-chtns19t9j] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.reservation-calendar-modal .swipe-action-left[b-chtns19t9j] {
    left: 0;
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.9) 0%, transparent 100%);
    border-radius: 12px 0 0 12px;
}

.reservation-calendar-modal .swipe-action-right[b-chtns19t9j] {
    right: 0;
    background: linear-gradient(-90deg, rgba(34, 197, 94, 0.9) 0%, transparent 100%);
    border-radius: 0 12px 12px 0;
}

/* Pull to refresh indicator */
.reservation-calendar-modal .pull-refresh-indicator[b-chtns19t9j] {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(99, 102, 241, 0.9);
    border-radius: 20px;
    font-size: 0.8rem;
    color: white;
    opacity: 0;
    transition: all 0.2s;
}

.reservation-calendar-modal .pull-refresh-indicator.visible[b-chtns19t9j] {
    top: 10px;
    opacity: 1;
}

/* Mobile-specific improvements */
@media (max-width: 768px) {
    .reservation-calendar-modal .calendar-res-actions[b-chtns19t9j] {
        flex-direction: row;
        gap: 8px;
    }

    .reservation-calendar-modal .calendar-action-btn[b-chtns19t9j] {
        flex: 1;
        min-height: 48px;
    }

    .reservation-calendar-modal .modal-footer[b-chtns19t9j] {
        flex-wrap: wrap;
        gap: 10px;
    }

    .reservation-calendar-modal .btn-cancel[b-chtns19t9j],
    .reservation-calendar-modal .btn-submit[b-chtns19t9j] {
        flex: 1;
        min-height: 48px;
        font-size: 0.95rem;
    }

    .reservation-calendar-modal .calendar-timeline[b-chtns19t9j] {
        height: 60px;
    }

    .reservation-calendar-modal .timeline-slot[b-chtns19t9j] {
        min-width: 36px;
    }
}

/* Prevent text selection on touch */
.reservation-calendar-modal .calendar-res-card[b-chtns19t9j],
.reservation-calendar-modal .calendar-action-btn[b-chtns19t9j],
.reservation-calendar-modal .filter-chip[b-chtns19t9j] {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Smooth scrolling for touch */
.reservation-calendar-modal .modal-body[b-chtns19t9j] {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Better visual feedback for processing state */
.reservation-calendar-modal .calendar-action-spinner[b-chtns19t9j] {
    font-size: 1.3rem;
    animation: spinnerPulse-b-chtns19t9j 1s ease-in-out infinite;
}

@keyframes spinnerPulse-b-chtns19t9j {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ========================================
   SKELETON LOADER FOR CALENDAR
   ======================================== */

.reservation-calendar-modal .calendar-skeleton[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0;
}

.reservation-calendar-modal .calendar-skeleton-card[b-chtns19t9j] {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(30, 41, 59, 0.6);
    border-radius: 12px;
    animation: skeletonShimmer-b-chtns19t9j 1.5s ease-in-out infinite;
}

.reservation-calendar-modal .calendar-skeleton-time[b-chtns19t9j] {
    width: 50px;
    height: 24px;
    background: rgba(71, 85, 105, 0.5);
    border-radius: 6px;
}

.reservation-calendar-modal .calendar-skeleton-content[b-chtns19t9j] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reservation-calendar-modal .calendar-skeleton-name[b-chtns19t9j] {
    width: 60%;
    height: 18px;
    background: rgba(71, 85, 105, 0.5);
    border-radius: 4px;
}

.reservation-calendar-modal .calendar-skeleton-meta[b-chtns19t9j] {
    width: 40%;
    height: 14px;
    background: rgba(71, 85, 105, 0.4);
    border-radius: 4px;
}

.reservation-calendar-modal .calendar-skeleton-actions[b-chtns19t9j] {
    display: flex;
    gap: 8px;
}

.reservation-calendar-modal .calendar-skeleton-btn[b-chtns19t9j] {
    width: 36px;
    height: 36px;
    background: rgba(71, 85, 105, 0.4);
    border-radius: 8px;
}

@keyframes skeletonShimmer-b-chtns19t9j {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Staggered skeleton animation */
.reservation-calendar-modal .calendar-skeleton-card:nth-child(1)[b-chtns19t9j] { animation-delay: 0ms; }
.reservation-calendar-modal .calendar-skeleton-card:nth-child(2)[b-chtns19t9j] { animation-delay: 100ms; }
.reservation-calendar-modal .calendar-skeleton-card:nth-child(3)[b-chtns19t9j] { animation-delay: 200ms; }
.reservation-calendar-modal .calendar-skeleton-card:nth-child(4)[b-chtns19t9j] { animation-delay: 300ms; }

/* ========================================
   ANIMATED EMPTY STATE
   ======================================== */

.reservation-calendar-modal .calendar-empty-icon[b-chtns19t9j] {
    animation: emptyBounce-b-chtns19t9j 2s ease-in-out infinite;
}

@keyframes emptyBounce-b-chtns19t9j {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.reservation-calendar-modal .calendar-empty-text[b-chtns19t9j] {
    animation: fadeInUp-b-chtns19t9j 0.5s ease-out;
}

/* Filter no-results state */
.reservation-calendar-modal .calendar-filter-empty[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
    text-align: center;
    animation: fadeIn-b-chtns19t9j 0.3s ease-out;
}

.reservation-calendar-modal .calendar-filter-empty-icon[b-chtns19t9j] {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    opacity: 0.7;
}

.reservation-calendar-modal .calendar-filter-empty-text[b-chtns19t9j] {
    color: #94a3b8;
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}

.reservation-calendar-modal .calendar-filter-reset[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.reservation-calendar-modal .calendar-filter-reset:hover[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.3);
}

.reservation-calendar-modal .calendar-filter-reset:active[b-chtns19t9j] {
    transform: scale(0.95);
}

/* ========================================
   PULL TO REFRESH INDICATOR
   ======================================== */

.reservation-calendar-modal .pull-refresh-indicator[b-chtns19t9j] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    color: #94a3b8;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.reservation-calendar-modal .pull-refresh-indicator.pulling[b-chtns19t9j] {
    color: #a5b4fc;
}

.reservation-calendar-modal .pull-refresh-indicator.ready[b-chtns19t9j] {
    color: #4ade80;
}

.reservation-calendar-modal .pull-refresh-icon[b-chtns19t9j] {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.reservation-calendar-modal .pull-refresh-indicator.ready .pull-refresh-icon[b-chtns19t9j] {
    transform: rotate(180deg);
}

.reservation-calendar-modal .pull-refresh-indicator.refreshing .pull-refresh-icon[b-chtns19t9j] {
    animation: spin-b-chtns19t9j 0.8s linear infinite;
}

/* ========================================
   QUICK ACTION SHORTCUTS BAR
   ======================================== */

.reservation-calendar-modal .quick-actions-bar[b-chtns19t9j] {
    display: flex;
    gap: 8px;
    padding: 8px 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.reservation-calendar-modal .quick-actions-bar[b-chtns19t9j]::-webkit-scrollbar {
    display: none;
}

.reservation-calendar-modal .quick-action-btn[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(71, 85, 105, 0.3);
    border-radius: 20px;
    color: #e2e8f0;
    font-size: 0.8rem;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
}

.reservation-calendar-modal .quick-action-btn:hover[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.4);
}

.reservation-calendar-modal .quick-action-btn:active[b-chtns19t9j] {
    transform: scale(0.95);
}

.reservation-calendar-modal .quick-action-btn.highlighted[b-chtns19t9j] {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

/* ========================================
   SWIPE NAVIGATION HINT
   ======================================== */

.reservation-calendar-modal .swipe-hint[b-chtns19t9j] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(30, 41, 59, 0.6);
    border-radius: 20px;
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 8px;
    animation: swipeHintFade-b-chtns19t9j 3s ease-in-out 2s forwards;
}

.reservation-calendar-modal .swipe-hint-arrows[b-chtns19t9j] {
    display: flex;
    gap: 4px;
    animation: swipeArrows-b-chtns19t9j 1.5s ease-in-out infinite;
}

@keyframes swipeArrows-b-chtns19t9j {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

@keyframes swipeHintFade-b-chtns19t9j {
    to { opacity: 0; pointer-events: none; }
}

@keyframes fadeIn-b-chtns19t9j {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp-b-chtns19t9j {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   HIGHLIGHT FLASH ANIMATION
   ======================================== */

.reservation-calendar-modal .calendar-res-card.highlight-flash[b-chtns19t9j] {
    animation: highlightFlash-b-chtns19t9j 1.5s ease-out;
}

@keyframes highlightFlash-b-chtns19t9j {
    0% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
        transform: scale(1.02);
    }
    30% {
        box-shadow: 0 0 20px 5px rgba(99, 102, 241, 0.4);
    }
    100% {
        box-shadow: none;
        transform: scale(1);
    }
}

/* ========================================
   ARRIVAL OPTIONS MODAL (Direct Seat vs Waitlist)
   ======================================== */

.arrival-modal[b-chtns19t9j] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    max-width: 95vw;
    max-height: 90vh;
    background: linear-gradient(145deg, #1e1e2e 0%, #252536 100%);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 16px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    z-index: 10001; /* above .modal-backdrop:10000 (was 1001 — backdrop covered it) */
    overflow: hidden;
}

.arrival-modal .modal-header[b-chtns19t9j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.arrival-modal .modal-header h3[b-chtns19t9j] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}

.arrival-modal .modal-close[b-chtns19t9j] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    color: #94a3b8;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.arrival-modal .modal-close:hover[b-chtns19t9j] {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

.arrival-modal .modal-body[b-chtns19t9j] {
    padding: 16px 20px;
    overflow-y: auto;
    max-height: calc(90vh - 70px);
}

.arrival-modal .arrival-customer-info[b-chtns19t9j] {
    text-align: center;
    padding: 12px 0;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.arrival-modal .customer-name-large[b-chtns19t9j] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.arrival-modal .reservation-details[b-chtns19t9j] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.85rem;
    color: #94a3b8;
}

.arrival-modal .reservation-details span[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.arrival-modal .arrival-options[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.arrival-modal .arrival-option[b-chtns19t9j] {
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: all 0.2s;
}

.arrival-modal .arrival-option:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

.arrival-modal .option-header[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.arrival-modal .option-icon[b-chtns19t9j] {
    font-size: 1.5rem;
}

.arrival-modal .option-info strong[b-chtns19t9j] {
    display: block;
    font-size: 1rem;
    color: #fff;
    margin-bottom: 2px;
}

.arrival-modal .option-info small[b-chtns19t9j] {
    font-size: 0.8rem;
    color: #64748b;
}

.arrival-modal .arrival-table-grid[b-chtns19t9j] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.arrival-modal .arrival-table-btn[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #e2e8f0;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}

.arrival-modal .arrival-table-btn:hover[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.3);
}

.arrival-modal .arrival-table-btn.selected[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.3);
    border-color: #6366f1;
}

.arrival-modal .arrival-table-btn.recommended[b-chtns19t9j]::after {
    content: "★";
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 0.7rem;
    color: #fbbf24;
}

.arrival-modal .arrival-table-btn .table-label[b-chtns19t9j] {
    font-size: 0.95rem;
    font-weight: 600;
}

.arrival-modal .arrival-table-btn .table-seats[b-chtns19t9j] {
    font-size: 0.7rem;
    color: #64748b;
}

.arrival-modal .arrival-table-btn .fit-indicator[b-chtns19t9j] {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 0.65rem;
    color: #4ade80;
}

/* Table combination styles */
.arrival-modal .combination-notice[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    color: #fcd34d;
}

.arrival-modal .combination-notice .notice-icon[b-chtns19t9j] {
    font-size: 1.1rem;
}

.arrival-modal .arrival-table-grid--combinations[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.arrival-modal .arrival-table-btn--combo[b-chtns19t9j] {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px;
    min-height: auto;
}

.arrival-modal .arrival-table-btn--combo .table-label[b-chtns19t9j] {
    font-size: 0.9rem;
}

.arrival-modal .arrival-table-btn--combo .table-seats[b-chtns19t9j] {
    color: #94a3b8;
}

.arrival-modal .arrival-table-btn--combo .table-zone[b-chtns19t9j] {
    font-size: 0.7rem;
    color: #64748b;
    margin-top: 2px;
}

.arrival-modal .btn-arrival[b-chtns19t9j] {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.arrival-modal .btn-arrival--seat[b-chtns19t9j] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(74, 222, 128, 0.3));
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #86efac;
}

.arrival-modal .btn-arrival--seat:hover:not(:disabled)[b-chtns19t9j] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.4), rgba(74, 222, 128, 0.4));
}

.arrival-modal .btn-arrival--seat:disabled[b-chtns19t9j] {
    opacity: 0.5;
    cursor: not-allowed;
}

.arrival-modal .btn-arrival--waitlist[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #a5b4fc;
}

.arrival-modal .btn-arrival--waitlist:hover:not(:disabled)[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.3);
}

.arrival-modal .arrival-divider[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #64748b;
    font-size: 0.85rem;
}

.arrival-modal .arrival-divider[b-chtns19t9j]::before,
.arrival-modal .arrival-divider[b-chtns19t9j]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.arrival-modal .loading-tables-inline[b-chtns19t9j],
.arrival-modal .no-tables-inline[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    color: #64748b;
    font-size: 0.85rem;
}

.arrival-modal .no-tables-inline[b-chtns19t9j] {
    color: #fbbf24;
}

/* =============================================
   PAX MODAL - Guest count selection
   ============================================= */

.pax-modal-backdrop[b-chtns19t9j] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6); /* no backdrop blur: see .modal-backdrop */
    z-index: 1000;
    animation: fadeIn-b-chtns19t9j 0.15s ease;
    touch-action: none; /* Prevent scroll-through on touch */
}

.pax-modal[b-chtns19t9j] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    width: 340px;
    max-width: 90vw;
    max-height: 90vh; /* Fit in viewport on small/landscape screens */
    overflow-y: auto; /* Scroll if content overflows */
    z-index: 1001;
    animation: scaleIn-b-chtns19t9j 0.2s ease;
    overscroll-behavior: contain; /* Prevent scroll chaining */
}

@keyframes scaleIn-b-chtns19t9j {
    from {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* Respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .pax-modal-backdrop[b-chtns19t9j],
    .pax-modal[b-chtns19t9j] {
        animation: none;
    }
    .pax-spinner[b-chtns19t9j] {
        animation: none;
        border-top-color: transparent;
    }
}

.pax-modal-header[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pax-table-icon[b-chtns19t9j] {
    font-size: 24px;
}

.pax-table-label[b-chtns19t9j] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    flex: 1;
}

.pax-modal-close[b-chtns19t9j] {
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #94a3b8;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
}

.pax-modal-close:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.pax-modal-close:active[b-chtns19t9j] {
    transform: scale(0.92);
    background: rgba(255, 255, 255, 0.2);
}

.pax-modal-body[b-chtns19t9j] {
    padding: 24px 20px;
}

.pax-question[b-chtns19t9j] {
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 20px;
}

.pax-selector[b-chtns19t9j] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 24px;
}

.pax-btn[b-chtns19t9j] {
    width: 56px;
    height: 56px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    color: #fff;
    font-size: 28px;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
}

.pax-btn:not(:disabled):hover[b-chtns19t9j] {
    background: rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
}

.pax-btn:not(:disabled):active[b-chtns19t9j] {
    transform: scale(0.92);
    background: rgba(59, 130, 246, 0.3);
}

.pax-btn:disabled[b-chtns19t9j] {
    opacity: 0.3;
    cursor: not-allowed;
}

.pax-value[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

.pax-number[b-chtns19t9j] {
    font-size: 48px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.pax-label[b-chtns19t9j] {
    font-size: 0.85rem;
    color: #94a3b8; /* Improved contrast for accessibility */
    margin-top: 4px;
}

.pax-quick-select[b-chtns19t9j] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pax-quick-btn[b-chtns19t9j] {
    min-width: 48px;
    height: 48px;
    padding: 0 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    color: #94a3b8;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
}

.pax-quick-btn:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.pax-quick-btn:active[b-chtns19t9j] {
    transform: scale(0.92);
}

.pax-quick-btn.selected[b-chtns19t9j] {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

/* Focus state for keyboard navigation */
.pax-modal:focus[b-chtns19t9j] {
    outline: none;
}

.pax-quick-btn:focus-visible[b-chtns19t9j],
.pax-btn:focus-visible[b-chtns19t9j],
.pax-confirm-btn:focus-visible[b-chtns19t9j],
.pax-cancel-btn:focus-visible[b-chtns19t9j] {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

.pax-modal-footer[b-chtns19t9j] {
    display: flex;
    gap: 12px;
    padding: 16px 20px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pax-cancel-btn[b-chtns19t9j] {
    flex: 1;
    padding: 14px 20px;
    min-height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    border-radius: 12px;
    color: #94a3b8;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
}

.pax-cancel-btn:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.pax-confirm-btn[b-chtns19t9j] {
    flex: 1.5;
    padding: 14px 20px;
    min-height: 48px;
    border: none;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 12px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.15s ease;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
}

.pax-confirm-btn:hover[b-chtns19t9j] {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

.pax-confirm-btn:active:not(:disabled)[b-chtns19t9j] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

/* Disabled state for confirm button (loading) */
.pax-confirm-btn:disabled[b-chtns19t9j] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Active/pressed states for touch feedback */
.pax-btn:active:not(:disabled)[b-chtns19t9j] {
    transform: scale(0.95);
    background: rgba(59, 130, 246, 0.3);
}

.pax-quick-btn:active[b-chtns19t9j] {
    transform: scale(0.92);
}

.pax-cancel-btn:active[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.1);
}

/* Loading spinner */
.pax-spinner[b-chtns19t9j] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pax-spin-b-chtns19t9j 0.8s linear infinite;
}

@keyframes pax-spin-b-chtns19t9j {
    to {
        transform: rotate(360deg);
    }
}

/* =============================================
   NOTE MODAL - Table note editing
   ============================================= */

.note-modal-backdrop[b-chtns19t9j] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6); /* no backdrop blur: see .modal-backdrop */
    z-index: 1000;
    animation: fadeIn-b-chtns19t9j 0.15s ease;
    touch-action: none;
}

.note-modal[b-chtns19t9j] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    width: 380px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 1001;
    animation: scaleIn-b-chtns19t9j 0.2s ease;
    overscroll-behavior: contain;
}

/* Respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .note-modal-backdrop[b-chtns19t9j],
    .note-modal[b-chtns19t9j] {
        animation: none;
    }
}

.note-modal-header[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.note-modal-icon[b-chtns19t9j] {
    font-size: 24px;
}

.note-modal-title[b-chtns19t9j] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.note-modal-close[b-chtns19t9j] {
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #94a3b8;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
}

.note-modal-close:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.note-modal-close:active[b-chtns19t9j] {
    transform: scale(0.92);
    background: rgba(255, 255, 255, 0.2);
}

.note-modal-body[b-chtns19t9j] {
    padding: 20px;
}

.note-modal-input[b-chtns19t9j] {
    width: 100%;
    min-height: 80px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: #f8fafc;
    font-size: 0.95rem;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

.note-modal-input[b-chtns19t9j]::placeholder {
    color: #64748b;
}

.note-modal-input:focus[b-chtns19t9j] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.note-modal-counter[b-chtns19t9j] {
    text-align: right;
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 6px;
}

.note-modal-error[b-chtns19t9j] {
    color: #f87171;
    font-size: 0.8rem;
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
}

.note-modal-footer[b-chtns19t9j] {
    display: flex;
    gap: 10px;
    padding: 16px 20px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.note-cancel-btn[b-chtns19t9j] {
    flex: 1;
    padding: 14px 16px;
    min-height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    border-radius: 12px;
    color: #94a3b8;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
}

.note-cancel-btn:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.note-cancel-btn:active[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.1);
}

.note-clear-btn[b-chtns19t9j] {
    flex: 1;
    padding: 14px 16px;
    min-height: 48px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.1);
    border-radius: 12px;
    color: #f87171;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
}

.note-clear-btn:hover:not(:disabled)[b-chtns19t9j] {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
}

.note-clear-btn:active:not(:disabled)[b-chtns19t9j] {
    transform: scale(0.97);
}

.note-clear-btn:disabled[b-chtns19t9j] {
    opacity: 0.3;
    cursor: not-allowed;
}

.note-save-btn[b-chtns19t9j] {
    flex: 1.5;
    padding: 14px 16px;
    min-height: 48px;
    border: none;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 12px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.15s ease;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
}

.note-save-btn:hover:not(:disabled)[b-chtns19t9j] {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.note-save-btn:active:not(:disabled)[b-chtns19t9j] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

.note-save-btn:disabled[b-chtns19t9j] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Focus states for keyboard nav */
.note-modal:focus[b-chtns19t9j] {
    outline: none;
}

.note-cancel-btn:focus-visible[b-chtns19t9j],
.note-clear-btn:focus-visible[b-chtns19t9j],
.note-save-btn:focus-visible[b-chtns19t9j],
.note-modal-close:focus-visible[b-chtns19t9j] {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

/* =============================================
   TABLE ACTIONS MENU - press and hold a table, or right-click it
   The note modal's look. Its backdrop is the panel's .modal-backdrop, so while it is open the panel rises above
   the till's bars and banners (site.css 4b) and tablesbar.js neither swipe-closes nor outside-tap-closes it.
   ============================================= */

.tg-menu[b-chtns19t9j] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    max-width: calc(100% - 24px);
    max-height: 90vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    color: #f8fafc;
    z-index: 10001;
    padding-bottom: 14px;
    animation: scaleIn-b-chtns19t9j 0.2s ease;
}

.tg-menu:focus[b-chtns19t9j] {
    outline: none;
}

.tg-menu-header[b-chtns19t9j] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tg-menu-title[b-chtns19t9j] {
    flex: 1;
    min-width: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tg-menu-total[b-chtns19t9j] {
    font-weight: 800;
    color: #a5b4fc;
}

/* «2 tickets»: the table holds more than one ticket to pay; the total beside it is theirs together. */
.tg-menu-tickets[b-chtns19t9j] {
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(165, 180, 252, 0.16);
    color: #c7d2fe;
    font-size: 0.78rem;
    font-weight: 700;
}

.tg-menu-sub[b-chtns19t9j] {
    order: 3;
    flex-basis: 100%;
    font-size: 0.8rem;
    color: #94a3b8;
}

.tg-menu-items[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 14px 10px;
}

.tg-menu-item[b-chtns19t9j] {
    min-height: 52px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: #f8fafc;
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
}

.tg-menu-item:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.12);
}

.tg-menu-item:active[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.35);
}

.tg-menu-cancel[b-chtns19t9j] {
    display: block;
    width: calc(100% - 28px);
    min-height: 48px;
    margin: 0 14px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: #94a3b8;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
}

.tg-menu-cancel:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.tg-menu-item:focus-visible[b-chtns19t9j],
.tg-menu-cancel:focus-visible[b-chtns19t9j] {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .tg-menu[b-chtns19t9j] {
        animation: none;
    }
}

/* The gestures' one-time hint, above the tables list */
.tg-hint[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 10px 4px;
    padding: 10px 12px;
    border: 1px solid rgba(79, 70, 229, 0.35);
    border-radius: 12px;
    background: rgba(79, 70, 229, 0.12);
    color: inherit;
    font-size: 0.85rem;
    line-height: 1.35;
}

.tg-hint-icon[b-chtns19t9j] {
    font-size: 1.2rem;
}

.tg-hint-text[b-chtns19t9j] {
    flex: 1;
    min-width: 0;
}

.tg-hint-ok[b-chtns19t9j] {
    flex-shrink: 0;
    min-height: 36px;
    padding: 6px 12px;
    border: none;
    border-radius: 10px;
    background: #4f46e5;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
}

/* ===== Compact layout for small/4:3 screens (1024x768 touch monitors) ===== */
@media (max-width: 1100px) {
    .tp-card[b-chtns19t9j],
    .tables-docked[b-chtns19t9j] {
        width: 240px;
    }

    .tp-top[b-chtns19t9j] {
        padding: 8px 10px;
        gap: 6px;
    }

    .tp-title[b-chtns19t9j] {
        font-size: 1rem;
    }

    /* Single column table grid at narrow widths */
    .tp-grid[b-chtns19t9j] {
        grid-template-columns: 1fr !important;
        gap: 6px;
        padding: 6px;
    }

    .tp-row[b-chtns19t9j] {
        padding: 8px 10px;
        min-height: 44px;
    }

    .tp-row .tp-name[b-chtns19t9j] {
        font-size: 0.9rem;
    }

    .tp-row .tp-total[b-chtns19t9j] {
        font-size: 0.85rem;
    }

    /* Compact zone tabs */
    .tp-zones[b-chtns19t9j] {
        gap: 4px;
        padding: 4px 8px;
    }

    .tp-zone-btn[b-chtns19t9j] {
        padding: 4px 8px;
        font-size: 0.8rem;
    }
}

/* Very narrow screens — squeeze docked panel further */
@media (max-width: 850px) {
    .tp-card[b-chtns19t9j],
    .tables-docked[b-chtns19t9j] {
        width: 200px;
    }

    .tp-top[b-chtns19t9j] {
        padding: 6px 8px;
    }

    .tp-title[b-chtns19t9j] {
        font-size: 0.9rem;
    }

    .tp-search[b-chtns19t9j] {
        min-width: 0;
        padding: 6px 8px;
        font-size: 0.85rem;
    }

    .tp-body[b-chtns19t9j] {
        padding: 8px;
    }
}

/* ========== Para Llevar (takeaway) tab ========== */
/* Tab pill styling — match the existing edge-tabs--functions visual
   language (Eats / Delivery / Waitlist / Reservas) so the row reads
   as a coherent set. The :deep ancestor lets us style the tab from
   inside the scoped CSS without losing the parent .edge-tabs--functions
   layout rules that live in the same file above. */
[b-chtns19t9j] .edge-tab--takeaway {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.25);
    color: #fbbf24;
}
[b-chtns19t9j] .edge-tab--takeaway.active {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.30);
}
[b-chtns19t9j] .edge-tab--takeaway.has-pending:not(.active) {
    animation: pulse-amber-b-chtns19t9j 2s ease-in-out infinite;
}
[b-chtns19t9j] .takeaway-badge {
    margin-left: 4px;
    padding: 1px 6px;
    background: #f59e0b;
    color: #1a1400;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
}
[b-chtns19t9j] .edge-tab--takeaway.active .takeaway-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}
@keyframes pulse-amber-b-chtns19t9j {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.30); }
    50% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0); }
}

/* Body — wrapper around the takeaway list + new-order CTA. Flex
   column so the header stays sticky-feeling at the top while the
   list scrolls beneath. */
.takeaway-mode[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
}

.takeaway-mode .mode-header[b-chtns19t9j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 4px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.takeaway-mode .mode-header-title[b-chtns19t9j] {
    font-weight: 700;
    color: #f1f5f9;
    font-size: 0.95rem;
}

.takeaway-new-btn[b-chtns19t9j] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 8px 14px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
    transition: filter .12s ease, transform .08s ease;
}
.takeaway-new-btn:hover[b-chtns19t9j] { filter: brightness(1.08); }
.takeaway-new-btn:active[b-chtns19t9j] { transform: translateY(1px); }

.takeaway-loading[b-chtns19t9j] {
    color: #94a3b8;
    text-align: center;
    padding: 24px 8px;
    font-size: 0.9rem;
}

.takeaway-empty[b-chtns19t9j] {
    text-align: center;
    padding: 28px 12px;
    color: #94a3b8;
}
.takeaway-empty-icon[b-chtns19t9j] {
    font-size: 2.4rem;
    margin-bottom: 8px;
    opacity: 0.85;
}
.takeaway-empty-title[b-chtns19t9j] {
    font-weight: 700;
    color: #cbd5e1;
    margin-bottom: 4px;
}
.takeaway-empty-desc[b-chtns19t9j] {
    font-size: 0.85rem;
    color: #94a3b8;
}
.takeaway-empty-desc strong[b-chtns19t9j] {
    color: #f59e0b;
    font-weight: 700;
}

.takeaway-list[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.takeaway-row[b-chtns19t9j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    color: inherit;
    /* The row is a <button> inside a block .tw-cancel-wrap, so it doesn't stretch to
       the container on its own — pin it to full width so the pill fills the panel. */
    width: 100%;
    box-sizing: border-box;
    transition: background .12s ease, border-color .12s ease;
}
.takeaway-row:hover[b-chtns19t9j] {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.25);
}
/* A "paid" takeaway order is a PREPAID (kiosk) ticket that still needs preparing —
   keep it fully visible with a green "ready to prepare" accent instead of dimming it
   to 55% (which made kiosk orders look done/inactive and hard to see). */
.takeaway-row.is-paid[b-chtns19t9j] {
    opacity: 1;
    box-shadow: inset 3px 0 0 #10b981;
}

.takeaway-row-main[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.takeaway-row-label[b-chtns19t9j] {
    font-weight: 700;
    color: #f1f5f9;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.takeaway-row-meta[b-chtns19t9j] {
    font-size: 0.78rem;
    color: #94a3b8;
    margin-top: 2px;
}
.takeaway-row-total[b-chtns19t9j] {
    font-weight: 800;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.10);
    padding: 4px 10px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Per-pill "Cancelar pedido" affordance on the Para Llevar list (overlays the
   row's right edge; the row keeps padding-right so the total clears it). */
.tw-cancel-wrap[b-chtns19t9j] {
    position: relative;
}
.tw-cancel-wrap .takeaway-row[b-chtns19t9j] {
    padding-right: 42px;
}
.tw-cancel-btn[b-chtns19t9j] {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: none;
    background: rgba(239, 68, 68, 0.16);
    color: #fca5a5;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity .12s ease, background .12s ease, color .12s ease;
}
.tw-cancel-btn:hover[b-chtns19t9j],
.tw-cancel-btn:focus-visible[b-chtns19t9j] {
    opacity: 1;
    background: rgba(239, 68, 68, 0.32);
    color: #fff;
}

/* ===== Live-connection warning =====================================
   Shown when the tables hub is down and the revive loop is retrying.
   The panel keeps rendering its last-known state, which for a POS that
   emptied out just before the socket died looks exactly like a quiet
   restaurant — so the amounts on screen must be visibly marked as
   possibly stale rather than silently trusted. */
.hub-offline-chip[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 10px;
    padding: 7px 12px;
    border-radius: 10px;
    background: #fff4e5;
    border: 1px solid #f0b37e;
    color: #8a4b08;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
}

.hub-offline-dot[b-chtns19t9j] {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e8833a;
    animation: hub-offline-pulse-b-chtns19t9j 1.6s ease-in-out infinite;
}

.hub-offline-text[b-chtns19t9j] {
    flex: 1 1 auto;
    min-width: 0;
}

@keyframes hub-offline-pulse-b-chtns19t9j {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
    .hub-offline-dot[b-chtns19t9j] {
        animation: none;
    }
}
/* /Pages/Shared/Components/TaxRateConfirmBanner.razor.rz.scp.css */
/*
   ⚠ Colours come from admin-theme tokens, NOT the literals used by FiscalSetupBanner.

   That banner lives on the POS, which is a permanently dark shell, so it hardcodes #fff text and
   #f59e0b amber. The admin Dashboard supports LIGHT mode, where white text lands on a white card
   and the message disappears entirely. Body text here simply INHERITS the dashboard's colour, so
   it is correct in both themes by construction and there is no second palette to keep in sync.
   Only the amber accent is named, and those tokens already carry light overrides
   (admin-theme.css: --adm-fgon-f7e6c7-fbbf24 is #fbbf24 dark / #995204 light).
*/

.trc[b-w4m2ph6q16] {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .8rem;
    margin-bottom: 1rem;
    border: 1px solid var(--adm-bg-f59e0b-a0_22, rgba(245, 158, 11, .22));
    border-left: 3px solid var(--adm-fgon-f7e6c7-fbbf24, #b45309);
    border-radius: 8px;
    background: var(--adm-bg-f59e0b-a0_22, rgba(245, 158, 11, .12));
}

.trc-icon[b-w4m2ph6q16] {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 1rem;
    color: var(--adm-fgon-f7e6c7-fbbf24, #b45309);
}

/* No colour: inherits the dashboard's text colour, so both themes are correct. */
.trc-text[b-w4m2ph6q16] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;          /* let the copy wrap instead of forcing the row wide */
}

.trc-text strong[b-w4m2ph6q16] { font-size: .95rem; }
.trc-text span[b-w4m2ph6q16] { font-size: .82rem; line-height: 1.35; opacity: .8; }

.trc-cta[b-w4m2ph6q16] {
    flex: 0 0 auto;
    margin-left: auto;
    padding: .38rem .7rem;
    border-radius: 6px;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--adm-fgon-f7e6c7-fbbf24, #b45309);
    color: var(--adm-fgon-f7e6c7-fbbf24, #b45309);
    transition: background .15s ease;
}

.trc-cta:hover[b-w4m2ph6q16],
.trc-cta:focus-visible[b-w4m2ph6q16] { background: var(--adm-bg-f59e0b-a0_22, rgba(245, 158, 11, .22)); }

.trc-close[b-w4m2ph6q16] {
    flex: 0 0 auto;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: .2rem .35rem;
    color: inherit;
    opacity: .55;
    transition: opacity .15s ease;
}

.trc-close:hover[b-w4m2ph6q16],
.trc-close:focus-visible[b-w4m2ph6q16] { opacity: 1; }

@media (max-width: 640px) {
    .trc[b-w4m2ph6q16] { flex-wrap: wrap; }
    .trc-cta[b-w4m2ph6q16] { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .trc-cta[b-w4m2ph6q16], .trc-close[b-w4m2ph6q16] { transition: none; }
}
/* /Pages/Shared/Components/TicketAllergyBand.razor.rz.scp.css */
/* The ticket's allergies over its lines: the guest card's allergy red (TillGuestCard), so they read the same on both till
   themes. The editor is the till's own label modal (site.css .modal-root / .label-modal). */
.ticket-allergy[b-clnx489fae] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 6px 0 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #fdecea;
    color: #b42318;
    font-size: .92rem;
}

.ticket-allergy b[b-clnx489fae] { letter-spacing: .05em; }
.ta-text[b-clnx489fae] { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }

.ta-edit[b-clnx489fae] {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid #b42318;
    background: transparent;
    color: #b42318;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}

.ta-add[b-clnx489fae] {
    margin: 4px 0 8px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px dashed rgba(127, 127, 127, .55);
    background: transparent;
    color: inherit;
    font-size: .8rem;
    opacity: .8;
    cursor: pointer;
}

.ta-chips[b-clnx489fae] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.ta-chip[b-clnx489fae] {
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(127, 127, 127, .4);
    background: transparent;
    color: inherit;
    font-size: .82rem;
    cursor: pointer;
}

.ta-error[b-clnx489fae] { margin-top: 8px; color: #b42318; font-size: .85rem; font-weight: 600; }

/* The editor's own modal, in the till's label-modal look (Pos.razor.css .modal-root / .modal-card / .label-modal-*). Those
   rules are scoped to Pos.razor: they never reached this component, and the editor rendered inline under the band (the live
   tester, 19 Oct, crm4.md). Above the till like its dialogs (z-index 9999), clear of the «Instalar» bar. */
.ta-modal[b-clnx489fae] {
    position: fixed;
    inset: 0 0 var(--pwa-banner-h, 0px) 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.ta-backdrop[b-clnx489fae] { position: absolute; inset: 0; z-index: 0; background: rgba(0, 0, 0, .45); }

.ta-dialog[b-clnx489fae] {
    position: relative;
    z-index: 1;
    width: 440px;
    max-width: 92vw;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    color: #111827;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    text-align: left;
    box-sizing: border-box;
}

.ta-dialog-head[b-clnx489fae] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    background: linear-gradient(135deg, #c62828 0%, #8e0000 100%);
    color: #fff;
    font-size: 1.15rem;
}

.ta-dialog-title[b-clnx489fae] { font-weight: 700; }
.ta-dialog-body[b-clnx489fae] { padding: 20px 22px; }

.ta-input[b-clnx489fae] {
    width: 100%;
    min-height: 80px;
    padding: 12px 14px;
    font: inherit;
    font-size: 1rem;
    color: inherit;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    box-sizing: border-box;
    resize: vertical;
}

.ta-input:focus[b-clnx489fae] { outline: none; border-color: #c62828; box-shadow: 0 0 0 4px rgba(198, 40, 40, .15); }
.ta-hint[b-clnx489fae] { margin-top: 10px; font-size: .8rem; color: #6b7280; }

.ta-dialog-actions[b-clnx489fae] {
    display: flex;
    gap: 12px;
    padding: 14px 22px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.ta-btn[b-clnx489fae] { flex: 1; padding: 12px 16px; font-size: .95rem; font-weight: 600; border-radius: 10px; cursor: pointer; }
.ta-btn:disabled[b-clnx489fae] { opacity: .6; cursor: default; }
.ta-btn--primary[b-clnx489fae] { background: linear-gradient(135deg, #c62828 0%, #8e0000 100%); color: #fff; border: none; }
.ta-btn--ghost[b-clnx489fae] { background: #fff; border: 2px solid #e5e7eb; color: #374151; }

/* The till's dark theme (as Pos.razor.css's label modal). A scoped theme rule starts with html[…] itself (ScopedCssRootSelectorGuardTests). */
html[data-theme="dark"] .ta-dialog[b-clnx489fae] { background: #1f2937; color: #f9fafb; }
html[data-theme="dark"] .ta-dialog-head[b-clnx489fae] { background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%); }
html[data-theme="dark"] .ta-input[b-clnx489fae] { background: #374151; border-color: #4b5563; color: #f9fafb; }
html[data-theme="dark"] .ta-hint[b-clnx489fae] { color: #9ca3af; }
html[data-theme="dark"] .ta-dialog-actions[b-clnx489fae] { background: #111827; border-color: #374151; }
html[data-theme="dark"] .ta-btn--ghost[b-clnx489fae] { background: #374151; border-color: #4b5563; color: #f9fafb; }
/* /Pages/Shared/Components/TillGuestCard.razor.rz.scp.css */
/* The till's guest card: neutral surfaces that sit on either till theme; the allergy box and the tier chip carry their
   own colours, so they read the same on both. */
.till-guest[b-fjtlig53hu] {
    margin: 6px 0 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(127, 127, 127, .28);
    background: rgba(127, 127, 127, .07);
    display: grid;
    gap: 8px;
}

.tg-head[b-fjtlig53hu] { display: flex; align-items: center; gap: 10px; }

.tg-avatar[b-fjtlig53hu] {
    width: 36px; height: 36px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    font-weight: 700; font-size: .85rem;
    background: rgba(127, 127, 127, .18);
}

.tg-who[b-fjtlig53hu] { display: grid; min-width: 0; flex: 1; }
.tg-name[b-fjtlig53hu] { font-weight: 700; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-sub[b-fjtlig53hu] { font-size: .8rem; opacity: .75; }

.tg-tier[b-fjtlig53hu] { padding: 2px 9px; border-radius: 999px; font-size: .75rem; font-weight: 700; background: #faf0d2; color: #8a5d00; }
.tg-tier--platinum[b-fjtlig53hu] { background: #e5edf8; color: #1d4e89; }
.tg-tier--silver[b-fjtlig53hu] { background: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 100%); color: #334155; box-shadow: inset 0 0 0 1px #94a3b8; }

.tg-allergy[b-fjtlig53hu] { background: #fdecea; color: #b42318; border-radius: 8px; padding: 7px 10px; font-size: .9rem; }
.tg-allergy b[b-fjtlig53hu] { letter-spacing: .05em; margin-right: 6px; }

.tg-row[b-fjtlig53hu] { font-size: .85rem; }
.tg-notes[b-fjtlig53hu] { font-style: italic; }
.tg-lbl[b-fjtlig53hu] { font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; opacity: .65; margin-right: 6px; font-weight: 600; font-style: normal; }

.tg-usual[b-fjtlig53hu], .tg-tags[b-fjtlig53hu] { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.tg-chip[b-fjtlig53hu] { padding: 2px 8px; border-radius: 999px; font-size: .76rem; border: 1px solid rgba(127, 127, 127, .3); }
.tg-chip--tag[b-fjtlig53hu] { opacity: .8; }
.tg-count[b-fjtlig53hu] { opacity: .6; font-variant-numeric: tabular-nums; }

/* A dish of the usual the waiter can add with a tap: a button that reads as a chip, big enough for a finger. */
.tg-chip--add[b-fjtlig53hu] {
    font: inherit; font-size: .8rem; color: inherit; background: rgba(127, 127, 127, .1);
    min-height: 32px; padding: 4px 11px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
    transition: background .12s ease, border-color .12s ease;
}
.tg-chip--add:hover[b-fjtlig53hu] { background: rgba(99, 102, 241, .14); border-color: rgba(99, 102, 241, .55); }
.tg-chip--add:active[b-fjtlig53hu] { transform: scale(.97); }
.tg-chip--add:focus-visible[b-fjtlig53hu] { outline: 2px solid #6366f1; outline-offset: 2px; }
.tg-plus[b-fjtlig53hu] { font-weight: 800; color: #6366f1; }
/* /Pages/Shared/Components/TillGuestPickRow.razor.rz.scp.css */
/* One guest in the till's «Vincular cliente» search, in the guest card's look (TillGuestCard.razor.css): neutral surfaces
   over the card; the allergy pill and the tier chip carry their own colours. */
.guest-pick[b-5rf1x7cuj9] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(127, 127, 127, .28);
    border-radius: 12px;
    background: rgba(127, 127, 127, .06);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.guest-pick:hover[b-5rf1x7cuj9],
.guest-pick:focus-visible[b-5rf1x7cuj9] {
    outline: none;
    border-color: #6366f1;
    background: rgba(99, 102, 241, .08);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}

.gp-avatar[b-5rf1x7cuj9] {
    width: 36px; height: 36px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    font-weight: 700; font-size: .85rem;
    background: rgba(127, 127, 127, .18);
}

.gp-main[b-5rf1x7cuj9] { display: grid; gap: 2px; min-width: 0; flex: 1; }
.gp-name[b-5rf1x7cuj9] { font-weight: 700; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-noname[b-5rf1x7cuj9] { font-weight: 600; font-style: italic; opacity: .7; }
.gp-phone[b-5rf1x7cuj9] { font-size: .8rem; opacity: .7; font-variant-numeric: tabular-nums; }
.gp-allergy[b-5rf1x7cuj9] {
    justify-self: start;
    margin-top: 2px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fdecea;
    color: #b42318;
    font-size: .75rem;
    font-weight: 700;
}

.gp-side[b-5rf1x7cuj9] { flex: none; display: grid; justify-items: end; gap: 4px; }
.gp-tier[b-5rf1x7cuj9] { padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; background: #faf0d2; color: #8a5d00; }
.gp-tier--platinum[b-5rf1x7cuj9] { background: #e5edf8; color: #1d4e89; }
.gp-tier--silver[b-5rf1x7cuj9] { background: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 100%); color: #334155; box-shadow: inset 0 0 0 1px #94a3b8; }
.gp-visits[b-5rf1x7cuj9] { font-size: .78rem; opacity: .7; white-space: nowrap; }
/* /Pages/Shared/Components/WebsiteReadyBanner.razor.rz.scp.css */
/* "Tu web gratis está lista". Like TaxRateConfirmBanner: body text inherits the dashboard's colour so
   both admin themes are right by construction; only the teal accent is named (Mi web's own teal). */

.wrb[b-1jm7xqa16w] {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .65rem .85rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(20, 184, 166, .3);
    border-left: 3px solid #0f766e;
    border-radius: 8px;
    background: rgba(20, 184, 166, .1);
}

.wrb-icon[b-1jm7xqa16w] { flex: 0 0 auto; font-size: 1.1rem; color: #0f766e; }

.wrb-text[b-1jm7xqa16w] { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.wrb-text strong[b-1jm7xqa16w] { font-size: .95rem; }
.wrb-text span[b-1jm7xqa16w] { font-size: .82rem; line-height: 1.35; opacity: .8; }

.wrb-cta[b-1jm7xqa16w] {
    flex: 0 0 auto;
    margin-left: auto;
    padding: .4rem .8rem;
    border-radius: 6px;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    background: #0f766e;
    color: #fff;
}

.wrb-cta:hover[b-1jm7xqa16w], .wrb-cta:focus-visible[b-1jm7xqa16w] { background: #115e59; color: #fff; }

.wrb-close[b-1jm7xqa16w] {
    flex: 0 0 auto;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: .2rem .35rem;
    color: inherit;
    opacity: .55;
}

.wrb-close:hover[b-1jm7xqa16w], .wrb-close:focus-visible[b-1jm7xqa16w] { opacity: 1; }

:root[data-theme="dark"] .wrb-icon[b-1jm7xqa16w] { color: #5eead4; }

@media (max-width: 640px) {
    .wrb[b-1jm7xqa16w] { flex-wrap: wrap; }
    .wrb-cta[b-1jm7xqa16w] { margin-left: 0; }
}
/* /Pages/Solutions.razor.rz.scp.css */
[b-rbhkcub3ro] .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

[b-rbhkcub3ro] .bullets {
    list-style: none;
    padding: 0;
    margin: 24px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[b-rbhkcub3ro] .bullets li {
    color: #cbd5e1;
    font-size: 0.98rem;
    line-height: 1.55;
    padding-left: 24px;
    position: relative;
}

[b-rbhkcub3ro] .bullets li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #34d399;
    font-weight: 800;
}

[b-rbhkcub3ro] .bullets strong {
    color: #f1f5f9;
}

/* ===== HERO ===== */

[b-rbhkcub3ro] .sol-hero {
    padding: 96px 0 56px;
    text-align: center;
    background: radial-gradient(ellipse at top, rgba(239, 68, 68, 0.10) 0%, transparent 60%),
                radial-gradient(ellipse at bottom right, rgba(168, 85, 247, 0.08) 0%, transparent 50%);
}

[b-rbhkcub3ro] .hero-eyebrow {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

[b-rbhkcub3ro] .sol-hero h1 {
    font-size: clamp(2.4rem, 6vw, 4.5rem);
    font-weight: 900;
    margin: 0 0 16px;
    letter-spacing: -0.03em;
    line-height: 1.05;
    background: linear-gradient(135deg, #f1f5f9 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

[b-rbhkcub3ro] .hero-sub {
    color: #94a3b8;
    font-size: 1.15rem;
    max-width: 600px;
    margin: 0 auto 32px;
    line-height: 1.55;
}

[b-rbhkcub3ro] .quick-jump {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

[b-rbhkcub3ro] .quick-jump a {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: border-color 0.15s, color 0.15s;
}

[b-rbhkcub3ro] .quick-jump a:hover {
    border-color: rgba(255, 255, 255, 0.2);
    color: #f1f5f9;
}

[b-rbhkcub3ro] .quick-jump-new {
    border-color: rgba(245, 158, 11, 0.4) !important;
    color: #fde047 !important;
}

[b-rbhkcub3ro] .new-pill {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    font-size: 0.65rem;
    padding: 1px 7px;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

/* ===== SOLUTION SECTIONS ===== */

[b-rbhkcub3ro] .sol-section {
    padding: 80px 0;
}

[b-rbhkcub3ro] .sol-section.sol-alt {
    background: rgba(255, 255, 255, 0.015);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

[b-rbhkcub3ro] .sol-buffet {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.04) 0%, rgba(239, 68, 68, 0.05) 100%);
    border-top: 1px solid rgba(245, 158, 11, 0.2);
    border-bottom: 1px solid rgba(245, 158, 11, 0.2);
}

[b-rbhkcub3ro] .sol-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

[b-rbhkcub3ro] .sol-flip .sol-text {
    order: 2;
}

[b-rbhkcub3ro] .sol-flip .sol-visual {
    order: 1;
}

[b-rbhkcub3ro] .sol-eyebrow {
    display: inline-block;
    color: #fca5a5;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 14px;
    padding: 4px 12px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 999px;
}

[b-rbhkcub3ro] .sol-eyebrow.buffet-eyebrow {
    color: #fde047;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.4);
}

[b-rbhkcub3ro] .sol-text h2 {
    font-size: clamp(1.85rem, 3.5vw, 2.6rem);
    font-weight: 800;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #f1f5f9;
}

[b-rbhkcub3ro] .sol-text > p {
    color: #cbd5e1;
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
}

[b-rbhkcub3ro] .sol-cta-row {
    display: flex;
    gap: 12px;
    margin-top: 28px;
    flex-wrap: wrap;
}

[b-rbhkcub3ro] .btn-primary,
[b-rbhkcub3ro] .btn-secondary {
    padding: 12px 22px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.1s, box-shadow 0.15s;
}

[b-rbhkcub3ro] .btn-primary {
    background: linear-gradient(135deg, #c62828 0%, #ef4444 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}

[b-rbhkcub3ro] .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(239, 68, 68, 0.5);
}

[b-rbhkcub3ro] .btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[b-rbhkcub3ro] .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

/* ===== VISUAL: BAR / TICKET ===== */

[b-rbhkcub3ro] .sol-visual {
    display: flex;
    justify-content: center;
}

[b-rbhkcub3ro] .visual-stack {
    transform: perspective(1000px) rotateX(4deg) rotateY(-4deg);
}

[b-rbhkcub3ro] .ticket {
    width: 280px;
    background: #fffaf0;
    color: #1f2937;
    padding: 24px 20px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(0,0,0,0.04) 4px, rgba(0,0,0,0.04) 5px);
}

[b-rbhkcub3ro] .ticket-h {
    text-align: center;
    font-weight: 700;
    border-bottom: 1px dashed #475569;
    padding-bottom: 10px;
    margin-bottom: 12px;
    letter-spacing: 0.06em;
}

[b-rbhkcub3ro] .ticket-l {
    padding: 4px 0;
}

[b-rbhkcub3ro] .ticket-t {
    border-top: 1px dashed #475569;
    padding-top: 10px;
    margin-top: 12px;
    font-weight: 700;
    text-align: right;
    font-size: 1rem;
}

/* ===== VISUAL: KITCHEN BOARD ===== */

[b-rbhkcub3ro] .kitchen-board {
    width: 100%;
    max-width: 360px;
    background: #0a0c12;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

[b-rbhkcub3ro] .kb-header {
    color: #34d399;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    margin-bottom: 12px;
    letter-spacing: 0.06em;
}

[b-rbhkcub3ro] .kb-ticket {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid #34d399;
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 10px;
    position: relative;
}

[b-rbhkcub3ro] .kb-ticket.urgent {
    border-left-color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
}

[b-rbhkcub3ro] .kb-table {
    color: #f1f5f9;
    font-weight: 700;
    margin-bottom: 8px;
}

[b-rbhkcub3ro] .kb-line {
    color: #cbd5e1;
    font-size: 0.9rem;
    padding: 2px 0;
}

[b-rbhkcub3ro] .kb-time {
    position: absolute;
    top: 12px;
    right: 14px;
    color: #94a3b8;
    font-size: 0.78rem;
    font-family: 'Courier New', monospace;
}

/* ===== VISUAL: BUFFET QR MOCK ===== */

[b-rbhkcub3ro] .visual-buffet {
    perspective: 1000px;
}

[b-rbhkcub3ro] .qr-mock {
    width: 100%;
    max-width: 340px;
    background: linear-gradient(180deg, #0f172a 0%, #1e1b4b 100%);
    border-radius: 28px;
    border: 8px solid #1f2937;
    padding: 16px 14px;
    box-shadow: 0 28px 56px rgba(0, 0, 0, 0.6);
    transform: rotate(-2deg);
}

[b-rbhkcub3ro] .qr-mock-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

[b-rbhkcub3ro] .round-pill {
    background: linear-gradient(90deg, #f59e0b, #ef4444);
    color: #fff;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

[b-rbhkcub3ro] .time-left {
    color: #fbbf24;
    font-size: 0.85rem;
    font-weight: 700;
}

[b-rbhkcub3ro] .qr-mock-title {
    color: #f1f5f9;
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 12px;
}

[b-rbhkcub3ro] .qr-mock-cats {
    display: flex;
    gap: 6px;
    overflow-x: hidden;
    margin-bottom: 14px;
}

[b-rbhkcub3ro] .qr-mock-cats .cat {
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 0.78rem;
    flex-shrink: 0;
}

[b-rbhkcub3ro] .qr-mock-cats .cat.active {
    background: #f59e0b;
    color: #0f172a;
    font-weight: 700;
}

[b-rbhkcub3ro] .qr-mock-cats .cat.drinks {
    border: 1px solid rgba(56, 189, 248, 0.5);
    color: #7dd3fc;
}

[b-rbhkcub3ro] .qr-mock-item {
    background: rgba(255, 255, 255, 0.04);
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 6px;
}

[b-rbhkcub3ro] .qr-mock-item .i-name {
    color: #f1f5f9;
    font-size: 0.9rem;
    font-weight: 600;
}

[b-rbhkcub3ro] .qr-mock-item .i-meta {
    color: #94a3b8;
    font-size: 0.75rem;
    margin-top: 2px;
}

[b-rbhkcub3ro] .premium-pill {
    background: linear-gradient(90deg, #a855f7, #ec4899);
    color: #fff;
    font-size: 0.6rem;
    padding: 1px 7px;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-left: 6px;
    vertical-align: middle;
}

[b-rbhkcub3ro] .qr-mock-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    font-size: 0.85rem;
}

[b-rbhkcub3ro] .qr-mock-bar strong {
    color: #f59e0b;
    font-size: 1.1rem;
}

[b-rbhkcub3ro] .qr-mock-cta {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
}

/* ===== VISUAL: CHAIN ===== */

[b-rbhkcub3ro] .chain-grid {
    width: 100%;
    max-width: 380px;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

[b-rbhkcub3ro] .chain-loc {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

[b-rbhkcub3ro] .chain-loc:last-child {
    border-bottom: 0;
}

[b-rbhkcub3ro] .chain-name {
    color: #f1f5f9;
    font-size: 0.95rem;
    font-weight: 600;
}

[b-rbhkcub3ro] .chain-amount {
    color: #34d399;
    font-size: 1.4rem;
    font-weight: 800;
    margin: 4px 0 8px;
    letter-spacing: -0.01em;
}

[b-rbhkcub3ro] .chain-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}

[b-rbhkcub3ro] .chain-bar > div {
    height: 100%;
    background: linear-gradient(90deg, #34d399, #10b981);
}

/* ===== CTA STRIP ===== */

[b-rbhkcub3ro] .cta-strip {
    padding: 80px 0;
    text-align: center;
    background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.1) 0%, transparent 70%);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

[b-rbhkcub3ro] .cta-strip h2 {
    font-size: clamp(1.85rem, 3vw, 2.5rem);
    font-weight: 800;
    margin: 0 0 12px;
    letter-spacing: -0.02em;
    color: #f1f5f9;
}

[b-rbhkcub3ro] .cta-strip p {
    color: #94a3b8;
    font-size: 1.1rem;
    margin: 0 0 32px;
}

[b-rbhkcub3ro] .cta-row {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 880px) {
    [b-rbhkcub3ro] .sol-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    [b-rbhkcub3ro] .sol-flip .sol-text { order: unset; }
    [b-rbhkcub3ro] .sol-flip .sol-visual { order: unset; }
    [b-rbhkcub3ro] .sol-section {
        padding: 56px 0;
    }
    [b-rbhkcub3ro] .sol-hero {
        padding: 64px 0 40px;
    }
}
/* /Pages/SupplierPortal.razor.rz.scp.css */
.portal-container[b-bzwpkvlv0g] {
    min-height: 100vh;
    background: var(--bg-secondary, #f8fafc);
}

.portal-header[b-bzwpkvlv0g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    background: white;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.header-brand h1[b-bzwpkvlv0g] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
    margin: 0;
}

.supplier-name[b-bzwpkvlv0g] {
    font-size: 0.875rem;
    color: var(--primary, #4f46e5);
    font-weight: 500;
}

.header-info[b-bzwpkvlv0g] {
    text-align: right;
}

.restaurant-name[b-bzwpkvlv0g] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary, #1a1a2e);
}

.restaurant-phone[b-bzwpkvlv0g] {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-secondary, #64748b);
}

/* Summary Cards */
.summary-cards[b-bzwpkvlv0g] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    padding: 1.5rem 2rem;
}

.summary-card[b-bzwpkvlv0g] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: white;
    padding: 1.25rem;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.card-icon[b-bzwpkvlv0g] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.card-icon.pending[b-bzwpkvlv0g] {
    background: #fef3c7;
    color: #d97706;
}

.card-icon.value[b-bzwpkvlv0g] {
    background: #dbeafe;
    color: #2563eb;
}

.card-value[b-bzwpkvlv0g] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #1a1a2e);
}

.card-label[b-bzwpkvlv0g] {
    font-size: 0.8125rem;
    color: var(--text-secondary, #64748b);
}

/* Orders Section */
.orders-section[b-bzwpkvlv0g] {
    padding: 0 2rem 2rem;
}

.orders-section h2[b-bzwpkvlv0g] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
    margin: 0 0 1rem 0;
}

.orders-list[b-bzwpkvlv0g] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.order-card[b-bzwpkvlv0g] {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.2s;
}

.order-card:hover[b-bzwpkvlv0g] {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.order-header[b-bzwpkvlv0g] {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    gap: 1rem;
}

.order-info[b-bzwpkvlv0g] {
    flex: 1;
}

.order-number[b-bzwpkvlv0g] {
    display: block;
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
}

.order-date[b-bzwpkvlv0g] {
    font-size: 0.8125rem;
    color: var(--text-secondary, #64748b);
}

.order-status[b-bzwpkvlv0g] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.status-badge[b-bzwpkvlv0g] {
    font-size: 0.75rem;
    padding: 0.25rem 0.625rem;
    border-radius: 12px;
    font-weight: 500;
}

.status-badge.sent[b-bzwpkvlv0g] {
    background: #dbeafe;
    color: #2563eb;
}

.status-badge.partialreceived[b-bzwpkvlv0g] {
    background: #ede9fe;
    color: #7c3aed;
}

.order-total[b-bzwpkvlv0g] {
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
}

.chevron[b-bzwpkvlv0g] {
    transition: transform 0.2s;
    color: var(--text-secondary, #94a3b8);
}

.order-card.expanded .chevron[b-bzwpkvlv0g] {
    transform: rotate(180deg);
}

/* Order Details */
.order-details[b-bzwpkvlv0g] {
    padding: 1.25rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
    cursor: default;
}

.detail-row[b-bzwpkvlv0g] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.detail-label[b-bzwpkvlv0g] {
    font-size: 0.875rem;
    color: var(--text-secondary, #64748b);
}

.detail-value.editable[b-bzwpkvlv0g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detail-value input[type="date"][b-bzwpkvlv0g] {
    padding: 0.5rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    font-size: 0.875rem;
}

.btn-save[b-bzwpkvlv0g] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #10b981;
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
}

/* Order Lines Table */
.order-lines[b-bzwpkvlv0g] {
    overflow-x: auto;
    margin: 1rem 0;
}

.order-lines table[b-bzwpkvlv0g] {
    width: 100%;
    border-collapse: collapse;
}

.order-lines th[b-bzwpkvlv0g] {
    text-align: left;
    padding: 0.625rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary, #64748b);
    background: var(--bg-secondary, #f8fafc);
}

.order-lines td[b-bzwpkvlv0g] {
    padding: 0.75rem;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--border-color, #f1f5f9);
}

/* Order Actions */
.order-actions[b-bzwpkvlv0g] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

.btn[b-bzwpkvlv0g] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn.primary[b-bzwpkvlv0g] {
    background: var(--primary, #4f46e5);
    border: none;
    color: white;
}

.btn.primary:hover[b-bzwpkvlv0g] {
    background: var(--primary-dark, #4338ca);
}

.btn.outline[b-bzwpkvlv0g] {
    background: white;
    border: 1px solid var(--border-color, #e0e0e0);
    color: var(--text-primary, #1a1a2e);
}

/* Order Notes */
.order-notes[b-bzwpkvlv0g] {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--bg-secondary, #f8fafc);
    border-radius: 8px;
}

.order-notes h4[b-bzwpkvlv0g] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    margin: 0 0 0.5rem 0;
}

.order-notes pre[b-bzwpkvlv0g] {
    font-size: 0.8125rem;
    color: var(--text-primary, #1a1a2e);
    white-space: pre-wrap;
    margin: 0;
    font-family: inherit;
}

/* No Orders */
.no-orders[b-bzwpkvlv0g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem;
    background: white;
    border-radius: 12px;
    text-align: center;
}

.no-orders svg[b-bzwpkvlv0g] {
    color: #10b981;
    margin-bottom: 1rem;
}

.no-orders p[b-bzwpkvlv0g] {
    color: var(--text-secondary, #64748b);
    margin: 0;
}

/* Loading & Error States */
.loading-state[b-bzwpkvlv0g], .error-state[b-bzwpkvlv0g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 2rem;
}

.error-state svg[b-bzwpkvlv0g] {
    color: #f59e0b;
    margin-bottom: 1rem;
}

.error-state h2[b-bzwpkvlv0g] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
    margin: 0 0 0.5rem 0;
}

.error-state p[b-bzwpkvlv0g] {
    color: var(--text-secondary, #64748b);
    max-width: 400px;
}

.spinner[b-bzwpkvlv0g] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color, #e2e8f0);
    border-top-color: var(--primary, #4f46e5);
    border-radius: 50%;
    animation: spin-b-bzwpkvlv0g 1s linear infinite;
}

@keyframes spin-b-bzwpkvlv0g {
    to { transform: rotate(360deg); }
}

/* Modal */
.modal-overlay[b-bzwpkvlv0g] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1rem;
}

.modal[b-bzwpkvlv0g] {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
}

.modal-header[b-bzwpkvlv0g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.modal-header h3[b-bzwpkvlv0g] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.close-btn[b-bzwpkvlv0g] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--bg-secondary, #f1f5f9);
    border-radius: 6px;
    font-size: 1.25rem;
    cursor: pointer;
}

.modal-body[b-bzwpkvlv0g] {
    padding: 1.25rem;
}

.modal-body textarea[b-bzwpkvlv0g] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    font-size: 0.9375rem;
    resize: vertical;
}

.form-group[b-bzwpkvlv0g] {
    margin-bottom: 1rem;
}

.form-group label[b-bzwpkvlv0g] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.form-input[b-bzwpkvlv0g] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    font-size: 0.9375rem;
}

.modal-footer[b-bzwpkvlv0g] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

/* Responsive */
@media (max-width: 768px) {
    .portal-header[b-bzwpkvlv0g] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .header-info[b-bzwpkvlv0g] {
        text-align: left;
    }

    .summary-cards[b-bzwpkvlv0g] {
        padding: 1rem;
    }

    .orders-section[b-bzwpkvlv0g] {
        padding: 0 1rem 1rem;
    }

    .order-header[b-bzwpkvlv0g] {
        flex-wrap: wrap;
    }

    .order-status[b-bzwpkvlv0g] {
        width: 100%;
        justify-content: space-between;
    }
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */
@media (prefers-color-scheme: dark) {
    .portal-container[b-bzwpkvlv0g] {
        background: #0f172a;
    }

    .portal-header[b-bzwpkvlv0g] {
        background: #1e293b;
        border-color: #334155;
    }

    .header-brand h1[b-bzwpkvlv0g] {
        color: #f1f5f9;
    }

    .supplier-name[b-bzwpkvlv0g] {
        color: #818cf8;
    }

    .restaurant-name[b-bzwpkvlv0g] {
        color: #f1f5f9;
    }

    .restaurant-phone[b-bzwpkvlv0g] {
        color: #94a3b8;
    }

    .summary-card[b-bzwpkvlv0g] {
        background: #1e293b;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }

    .card-icon.pending[b-bzwpkvlv0g] {
        background: #451a03;
        color: #fbbf24;
    }

    .card-icon.value[b-bzwpkvlv0g] {
        background: #1e3a5f;
        color: #60a5fa;
    }

    .card-value[b-bzwpkvlv0g] {
        color: #f1f5f9;
    }

    .card-label[b-bzwpkvlv0g] {
        color: #94a3b8;
    }

    .orders-section h2[b-bzwpkvlv0g] {
        color: #f1f5f9;
    }

    .order-card[b-bzwpkvlv0g] {
        background: #1e293b;
    }

    .order-card:hover[b-bzwpkvlv0g] {
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }

    .order-number[b-bzwpkvlv0g] {
        color: #f1f5f9;
    }

    .order-date[b-bzwpkvlv0g] {
        color: #94a3b8;
    }

    .order-total[b-bzwpkvlv0g] {
        color: #f1f5f9;
    }

    .chevron[b-bzwpkvlv0g] {
        color: #64748b;
    }

    .order-details[b-bzwpkvlv0g] {
        border-color: #334155;
    }

    .detail-label[b-bzwpkvlv0g] {
        color: #94a3b8;
    }

    .detail-value input[type="date"][b-bzwpkvlv0g] {
        background: #0f172a;
        border-color: #334155;
        color: #f1f5f9;
    }

    .order-lines th[b-bzwpkvlv0g] {
        background: #0f172a;
        color: #94a3b8;
    }

    .order-lines td[b-bzwpkvlv0g] {
        color: #e2e8f0;
        border-color: #334155;
    }

    .order-actions[b-bzwpkvlv0g] {
        border-color: #334155;
    }

    .btn.outline[b-bzwpkvlv0g] {
        background: #1e293b;
        border-color: #334155;
        color: #e2e8f0;
    }

    .order-notes[b-bzwpkvlv0g] {
        background: #0f172a;
    }

    .order-notes h4[b-bzwpkvlv0g] {
        color: #94a3b8;
    }

    .order-notes pre[b-bzwpkvlv0g] {
        color: #e2e8f0;
    }

    .no-orders[b-bzwpkvlv0g] {
        background: #1e293b;
    }

    .no-orders p[b-bzwpkvlv0g] {
        color: #94a3b8;
    }

    .loading-state[b-bzwpkvlv0g], .error-state[b-bzwpkvlv0g] {
        color: #94a3b8;
    }

    .error-state h2[b-bzwpkvlv0g] {
        color: #f1f5f9;
    }

    .spinner[b-bzwpkvlv0g] {
        border-color: #334155;
        border-top-color: #3b82f6;
    }

    .modal[b-bzwpkvlv0g] {
        background: #1e293b;
    }

    .modal-header[b-bzwpkvlv0g] {
        border-color: #334155;
    }

    .modal-header h3[b-bzwpkvlv0g] {
        color: #f1f5f9;
    }

    .close-btn[b-bzwpkvlv0g] {
        background: #334155;
        color: #94a3b8;
    }

    .modal-body textarea[b-bzwpkvlv0g] {
        background: #0f172a;
        border-color: #334155;
        color: #f1f5f9;
    }

    .form-group label[b-bzwpkvlv0g] {
        color: #e2e8f0;
    }

    .form-input[b-bzwpkvlv0g] {
        background: #0f172a;
        border-color: #334155;
        color: #f1f5f9;
    }

    .modal-footer[b-bzwpkvlv0g] {
        border-color: #334155;
    }
}
/* /Pages/WaitlistJoin.razor.rz.scp.css */
/* ==================== Variables ==================== */
.waitlist-join-page[b-5kmfibb4u3] {
    --brand-primary: #6366f1;
    --brand-primary-hover: #4f46e5;
    --bg: #f8fafc;
    --bg-card: #ffffff;
    --text: #1e293b;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --success: #10b981;
    --error: #ef4444;
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);

    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    padding: 0 0 2rem;
    transition: background 0.3s, color 0.3s;
}

.waitlist-join-page.dark[b-5kmfibb4u3] {
    --bg: #0f172a;
    --bg-card: #1e293b;
    --text: #f1f5f9;
    --text-muted: #94a3b8;
    --border: #334155;
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3);
}

/* ==================== Loading & Error ==================== */
.loading-screen[b-5kmfibb4u3],
.error-screen[b-5kmfibb4u3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    text-align: center;
}

.spinner[b-5kmfibb4u3] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: spin-b-5kmfibb4u3 1s linear infinite;
}

.spinner-small[b-5kmfibb4u3] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-5kmfibb4u3 0.8s linear infinite;
    display: inline-block;
    margin-right: 8px;
}

@keyframes spin-b-5kmfibb4u3 {
    to { transform: rotate(360deg); }
}

.error-icon[b-5kmfibb4u3] {
    width: 64px;
    height: 64px;
    background: var(--error);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.btn-retry[b-5kmfibb4u3] {
    margin-top: 1rem;
    padding: 12px 24px;
    background: var(--brand-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
}

/* ==================== Header ==================== */
.waitlist-header[b-5kmfibb4u3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.restaurant-branding[b-5kmfibb4u3] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.restaurant-branding .logo[b-5kmfibb4u3] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
}

.restaurant-branding h1[b-5kmfibb4u3] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.header-actions[b-5kmfibb4u3] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-toggle[b-5kmfibb4u3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
    font-size: 1.125rem;
    cursor: pointer;
    line-height: 1;
}

.language-selector select[b-5kmfibb4u3] {
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.875rem;
    cursor: pointer;
}

/* ==================== Welcome Message ==================== */
.welcome-message[b-5kmfibb4u3] {
    padding: 12px 1.25rem;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-hover));
    color: white;
    font-size: 0.9rem;
    text-align: center;
}

/* ==================== Queue Status Card ==================== */
.queue-status-card[b-5kmfibb4u3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin: 1.5rem 1.25rem;
    padding: 1.5rem;
    background: var(--bg-card);
    border-radius: 16px;
    box-shadow: var(--shadow);
}

.queue-stat[b-5kmfibb4u3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.queue-stat .stat-number[b-5kmfibb4u3] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--brand-primary);
    line-height: 1;
}

.queue-stat .stat-label[b-5kmfibb4u3] {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.queue-divider[b-5kmfibb4u3] {
    width: 1px;
    height: 48px;
    background: var(--border);
}

/* ==================== Join Form ==================== */
.join-form[b-5kmfibb4u3] {
    margin: 0 1.25rem;
    padding: 1.5rem;
    background: var(--bg-card);
    border-radius: 16px;
    box-shadow: var(--shadow);
}

.join-form h2[b-5kmfibb4u3] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1.5rem;
    text-align: center;
}

.form-group[b-5kmfibb4u3] {
    margin-bottom: 1.25rem;
}

.form-group label[b-5kmfibb4u3] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text);
}

.form-group label .required[b-5kmfibb4u3] {
    color: var(--error);
}

.form-group label .badge-notify[b-5kmfibb4u3] {
    display: inline-block;
    font-size: 0.7rem;
    background: var(--brand-primary);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    font-weight: 500;
}

.form-group input[b-5kmfibb4u3],
.form-group textarea[b-5kmfibb4u3] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 1rem;
    background: var(--bg);
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus[b-5kmfibb4u3],
.form-group textarea:focus[b-5kmfibb4u3] {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.input-hint[b-5kmfibb4u3] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Validation styles */
.input-invalid[b-5kmfibb4u3] {
    border-color: var(--error) !important;
}

.validation-hint[b-5kmfibb4u3] {
    display: block;
    font-size: 0.75rem;
    color: var(--error);
    margin-top: 4px;
}

/* Phone Input */
.phone-input-wrapper[b-5kmfibb4u3] {
    display: flex;
    align-items: stretch;
}

.phone-prefix[b-5kmfibb4u3] {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-right: none;
    border-radius: 10px 0 0 10px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.phone-input-wrapper input[b-5kmfibb4u3] {
    border-radius: 0 10px 10px 0;
    flex: 1;
}

/* ==================== Party Size Selector ==================== */
.party-size-selector[b-5kmfibb4u3] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.party-btn[b-5kmfibb4u3] {
    width: 44px;
    height: 44px;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.party-btn:hover[b-5kmfibb4u3] {
    border-color: var(--brand-primary);
}

.party-btn.selected[b-5kmfibb4u3] {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: white;
}

.large-party-input[b-5kmfibb4u3] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.large-party-input input[b-5kmfibb4u3] {
    width: 80px;
    text-align: center;
}

/* ==================== Zone Selector ==================== */
.zone-selector[b-5kmfibb4u3] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.zone-btn[b-5kmfibb4u3] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border: 2px solid var(--border);
    border-radius: 20px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.zone-btn:hover[b-5kmfibb4u3] {
    border-color: var(--brand-primary);
}

.zone-btn.selected[b-5kmfibb4u3] {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: white;
}

/* ==================== Special Requests ==================== */
.expand-btn[b-5kmfibb4u3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 12px 0;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
}

.expand-btn .chevron[b-5kmfibb4u3] {
    font-size: 1.25rem;
    transition: transform 0.2s;
}

.expand-btn .chevron.expanded[b-5kmfibb4u3] {
    transform: rotate(90deg);
}

.form-group textarea[b-5kmfibb4u3] {
    resize: none;
    margin-top: 8px;
}

/* ==================== Submit Button ==================== */
.btn-join[b-5kmfibb4u3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px;
    margin-top: 1.5rem;
    background: var(--brand-primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.btn-join:hover:not(:disabled)[b-5kmfibb4u3] {
    background: var(--brand-primary-hover);
}

.btn-join:active:not(:disabled)[b-5kmfibb4u3] {
    transform: scale(0.98);
}

.btn-join:disabled[b-5kmfibb4u3] {
    opacity: 0.6;
    cursor: not-allowed;
}

.submit-error[b-5kmfibb4u3] {
    margin-top: 12px;
    padding: 12px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--error);
    border-radius: 8px;
    color: var(--error);
    font-size: 0.9rem;
    text-align: center;
}

/* ==================== Success Screen ==================== */
.success-screen[b-5kmfibb4u3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.success-icon[b-5kmfibb4u3] {
    width: 80px;
    height: 80px;
    background: var(--success);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

.success-screen h2[b-5kmfibb4u3] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 1rem;
}

.position-display[b-5kmfibb4u3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1rem;
}

.position-number[b-5kmfibb4u3] {
    font-size: 4rem;
    font-weight: 800;
    color: var(--brand-primary);
    line-height: 1;
}

.position-label[b-5kmfibb4u3] {
    font-size: 1rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.wait-estimate[b-5kmfibb4u3] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--bg-card);
    border-radius: 24px;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow);
}

.wait-estimate .wait-icon[b-5kmfibb4u3] {
    font-size: 1.25rem;
}

.track-message[b-5kmfibb4u3] {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    max-width: 280px;
}

.btn-track[b-5kmfibb4u3] {
    padding: 16px 48px;
    background: var(--brand-primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.btn-track:hover[b-5kmfibb4u3] {
    background: var(--brand-primary-hover);
}

.btn-track:active[b-5kmfibb4u3] {
    transform: scale(0.98);
}

.btn-track .btn-icon[b-5kmfibb4u3] {
    margin-right: 8px;
    font-size: 1.2rem;
}

/* Pulsing attention animation for the track button.
   Glow only — no transform: scale — so the button's size/position (and thus
   its tap target) stays put while it animates; the scaling version made it a
   moving target that never settled. Runs a finite number of times so it draws
   the eye on arrival, then stops. */
.btn-track.pulse-attention[b-5kmfibb4u3] {
    animation: pulse-glow-b-5kmfibb4u3 2s ease-in-out 6;
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
}

@keyframes pulse-glow-b-5kmfibb4u3 {
    0% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
    }
    50% {
        box-shadow: 0 0 20px 10px rgba(99, 102, 241, 0.3);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-track.pulse-attention[b-5kmfibb4u3] {
        animation: none;
    }
}

/* ==================== Confetti ==================== */
.confetti-container[b-5kmfibb4u3] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.confetti[b-5kmfibb4u3] {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--brand-primary);
    top: -10px;
    left: 50%;
    transform: translateX(var(--x));
    animation: confetti-fall-b-5kmfibb4u3 3s ease-out var(--delay) forwards;
    border-radius: 2px;
}

.confetti:nth-child(2n)[b-5kmfibb4u3] {
    background: var(--success);
    width: 8px;
    height: 12px;
}

.confetti:nth-child(3n)[b-5kmfibb4u3] {
    background: #f59e0b;
    width: 12px;
    height: 8px;
}

.confetti:nth-child(5n)[b-5kmfibb4u3] {
    background: #ec4899;
}

@keyframes confetti-fall-b-5kmfibb4u3 {
    0% {
        opacity: 1;
        transform: translateX(var(--x)) translateY(0) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateX(calc(var(--x) + 30px)) translateY(100vh) rotate(720deg);
    }
}

/* ==================== Animations ==================== */
.bounce-in[b-5kmfibb4u3] {
    animation: bounce-in-b-5kmfibb4u3 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes bounce-in-b-5kmfibb4u3 {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    60% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.fade-in[b-5kmfibb4u3] {
    animation: fade-in-b-5kmfibb4u3 0.5s ease-out forwards;
    animation-delay: 0.3s;
    opacity: 0;
}

@keyframes fade-in-b-5kmfibb4u3 {
    to {
        opacity: 1;
    }
}

/* ==================== RTL Support (Arabic) ==================== */
[dir="rtl"] .waitlist-header[b-5kmfibb4u3] {
    flex-direction: row-reverse;
}

[dir="rtl"] .header-actions[b-5kmfibb4u3] {
    flex-direction: row-reverse;
}

[dir="rtl"] .form-group label[b-5kmfibb4u3] {
    text-align: right;
}

[dir="rtl"] .form-group input[b-5kmfibb4u3],
[dir="rtl"] .form-group textarea[b-5kmfibb4u3],
[dir="rtl"] .form-group select[b-5kmfibb4u3] {
    text-align: right;
}

[dir="rtl"] .required[b-5kmfibb4u3] {
    margin-left: 0;
    margin-right: 4px;
}

[dir="rtl"] .badge-notify[b-5kmfibb4u3] {
    margin-left: 0;
    margin-right: 8px;
}

[dir="rtl"] .phone-prefix[b-5kmfibb4u3] {
    border-right: 1px solid var(--border);
    border-left: none;
    border-radius: 0 10px 10px 0;
}

[dir="rtl"] .phone-input-wrapper input[b-5kmfibb4u3] {
    border-radius: 10px 0 0 10px;
}

[dir="rtl"] .validation-hint[b-5kmfibb4u3] {
    text-align: right;
}

[dir="rtl"] .btn-join[b-5kmfibb4u3],
[dir="rtl"] .btn-track[b-5kmfibb4u3] {
    flex-direction: row-reverse;
}

/* ==================== Responsive ==================== */
@media (max-width: 400px) {
    .queue-status-card[b-5kmfibb4u3] {
        gap: 1.25rem;
        padding: 1.25rem;
    }

    .queue-stat .stat-number[b-5kmfibb4u3] {
        font-size: 2rem;
    }

    .party-btn[b-5kmfibb4u3] {
        /* Mobile breakpoint used to shrink the party-size buttons to 40×40,
           dropping them below the 44px touch-target floor. Keep them at the
           base 44×44 — they still fit on a 390px viewport because the row
           wraps. */
        width: 44px;
        height: 44px;
    }

    .position-number[b-5kmfibb4u3] {
        font-size: 3rem;
    }
}
/* /Pages/WaitlistTrack.razor.rz.scp.css */
/* ==================== Variables ==================== */
.waitlist-track-page[b-rni0gy395d] {
    --brand-primary: #6366f1;
    --brand-primary-hover: #4f46e5;
    --bg: #f8fafc;
    --bg-card: #ffffff;
    --text: #1e293b;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --success: #10b981;
    --error: #ef4444;
    --warning: #f59e0b;
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);

    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: background 0.3s, color 0.3s;
    /* Guard against any horizontal overflow (the header used to push past the
       viewport on mobile, leaving a dark strip on the right). */
    overflow-x: hidden;
}

.waitlist-track-page.dark[b-rni0gy395d] {
    --bg: #0f172a;
    --bg-card: #1e293b;
    --text: #f1f5f9;
    --text-muted: #94a3b8;
    --border: #334155;
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3);
}

/* ==================== Loading & Error ==================== */
.loading-screen[b-rni0gy395d],
.error-screen[b-rni0gy395d],
.status-screen[b-rni0gy395d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    text-align: center;
}

.spinner[b-rni0gy395d] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: spin-b-rni0gy395d 1s linear infinite;
}

.spinner-small[b-rni0gy395d] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-rni0gy395d 0.8s linear infinite;
    display: inline-block;
    margin-right: 6px;
}

@keyframes spin-b-rni0gy395d {
    to { transform: rotate(360deg); }
}

.error-icon[b-rni0gy395d] {
    width: 64px;
    height: 64px;
    background: var(--error);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.status-icon[b-rni0gy395d] {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.status-screen h2[b-rni0gy395d] {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.status-screen p[b-rni0gy395d] {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

/* ==================== Waiting Screen ==================== */
.waiting-screen[b-rni0gy395d] {
    min-height: 100vh;
    padding-bottom: 2rem;
}

.track-header[b-rni0gy395d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    gap: 12px;
    /* Wrap on mobile so the row of controls drops below the name instead of
       overflowing the viewport. No effect on wide screens (everything fits). */
    flex-wrap: wrap;
}

.restaurant-logo[b-rni0gy395d] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.restaurant-info[b-rni0gy395d] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Take the slack and allow shrinking so a long name doesn't shove the
       header controls off-screen (min-width:0 lets the ellipsis kick in). */
    flex: 1 1 auto;
    min-width: 0;
}

.restaurant-name[b-rni0gy395d] {
    font-weight: 600;
    font-size: 1.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visit-badge[b-rni0gy395d] {
    font-size: 0.7rem;
    color: var(--text-muted);
    background: rgba(99, 102, 241, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
    width: fit-content;
}

.header-actions[b-rni0gy395d] {
    display: flex;
    gap: 8px;
    /* Let the controls wrap (and stay right-aligned) rather than overflow. */
    flex-wrap: wrap;
    justify-content: flex-end;
}

.favorite-toggle[b-rni0gy395d] {
    background: transparent;
    border: none;
    font-size: 1.125rem;
    cursor: pointer;
    padding: 6px;
    transition: transform 0.2s;
    line-height: 1;
}

.favorite-toggle:hover[b-rni0gy395d] {
    transform: scale(1.2);
}

.favorite-toggle.active[b-rni0gy395d] {
    animation: heart-beat-b-rni0gy395d 0.6s ease-out;
}

@keyframes heart-beat-b-rni0gy395d {
    0% { transform: scale(1); }
    25% { transform: scale(1.3); }
    50% { transform: scale(1); }
    75% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.theme-toggle[b-rni0gy395d],
.sound-toggle[b-rni0gy395d] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
    font-size: 1.125rem;
    cursor: pointer;
    line-height: 1;
    transition: background 0.2s;
}

.theme-toggle:hover[b-rni0gy395d],
.sound-toggle:hover[b-rni0gy395d] {
    background: var(--border);
}

/* Language Selector */
.lang-select[b-rni0gy395d] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 1rem;
    cursor: pointer;
    color: var(--text);
    appearance: none;
    -webkit-appearance: none;
}

.lang-select:focus[b-rni0gy395d] {
    outline: 2px solid var(--brand-primary);
    outline-offset: 1px;
}

/* Position Delta Indicator */
.position-delta[b-rni0gy395d] {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--success);
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    animation: delta-pop-b-rni0gy395d 0.5s ease-out;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

@keyframes delta-pop-b-rni0gy395d {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

.position-hero[b-rni0gy395d] {
    position: relative;
}

/* Seating Time */
.seating-time[b-rni0gy395d] {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Time Elapsed Highlight */
.info-row.highlight[b-rni0gy395d] {
    background: rgba(99, 102, 241, 0.1);
    margin: 0 -1.25rem;
    padding: 10px 1.25rem;
    border-bottom: none;
}

.time-elapsed[b-rni0gy395d] {
    color: var(--brand-primary);
    font-weight: 600;
}

/* Refresh Button */
.refresh-status[b-rni0gy395d] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-refresh[b-rni0gy395d] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-refresh:hover:not(:disabled)[b-rni0gy395d] {
    background: var(--border);
}

.btn-refresh:disabled[b-rni0gy395d] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-refresh.refreshing span[b-rni0gy395d] {
    display: inline-block;
    animation: spin-b-rni0gy395d 1s linear infinite;
}

/* Live Badge */
.live-badge[b-rni0gy395d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 0;
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
    font-size: 0.8rem;
    font-weight: 500;
}

.live-dot[b-rni0gy395d] {
    width: 8px;
    height: 8px;
    background: var(--success);
    border-radius: 50%;
    animation: pulse-dot-b-rni0gy395d 2s ease-in-out infinite;
}

@keyframes pulse-dot-b-rni0gy395d {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

/* Connection Status Indicator */
.connection-dot[b-rni0gy395d] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: background 0.3s;
}

.connection-dot.connected[b-rni0gy395d] {
    background: var(--success);
    animation: pulse-dot-b-rni0gy395d 2s ease-in-out infinite;
}

.connection-dot.reconnecting[b-rni0gy395d] {
    background: var(--warning);
    animation: pulse-dot-b-rni0gy395d 1s ease-in-out infinite;
}

.connection-dot.disconnected[b-rni0gy395d] {
    background: var(--error);
    animation: none;
}

.connection-dot.offline[b-rni0gy395d] {
    background: #6b7280;
    animation: none;
}

/* Position Hero */
.position-hero[b-rni0gy395d] {
    display: flex;
    justify-content: center;
    padding: 3rem 1.25rem 2rem;
}

.position-circle[b-rni0gy395d] {
    width: 180px;
    height: 180px;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-hover));
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 10px 40px -10px var(--brand-primary);
    animation: float-b-rni0gy395d 3s ease-in-out infinite;
}

.position-number[b-rni0gy395d] {
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1;
}

.position-suffix[b-rni0gy395d] {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-top: 4px;
}

@keyframes float-b-rni0gy395d {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Wait Estimate Card */
.wait-estimate-card[b-rni0gy395d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 1.25rem 1.5rem;
    padding: 1rem 1.5rem;
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.estimate-icon[b-rni0gy395d] {
    font-size: 1.5rem;
}

.estimate-text[b-rni0gy395d] {
    display: flex;
    flex-direction: column;
}

.estimate-label[b-rni0gy395d] {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.estimate-time[b-rni0gy395d] {
    font-size: 1.25rem;
    font-weight: 600;
}

/* Info Card */
.info-card[b-rni0gy395d] {
    margin: 0 1.25rem 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.info-row[b-rni0gy395d] {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.info-row:last-child[b-rni0gy395d] {
    border-bottom: none;
}

.info-label[b-rni0gy395d] {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.info-value[b-rni0gy395d] {
    font-weight: 500;
}

/* Share & Status Row */
.share-status-row[b-rni0gy395d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 1.25rem 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: var(--shadow);
    gap: 12px;
}

.btn-share[b-rni0gy395d] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-share:hover[b-rni0gy395d] {
    background: var(--border);
}

.btn-share.copied[b-rni0gy395d] {
    background: rgba(16, 185, 129, 0.15);
    border-color: var(--success);
    color: var(--success);
}

.last-updated[b-rni0gy395d] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Cancel Button */
.btn-cancel[b-rni0gy395d] {
    display: block;
    margin: 0 auto;
    padding: 12px 24px;
    background: transparent;
    color: var(--error);
    border: 1px solid var(--error);
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel:hover[b-rni0gy395d] {
    background: rgba(239, 68, 68, 0.1);
}

/* Connection Warning */
.connection-warning[b-rni0gy395d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
    font-size: 0.9rem;
    margin-top: 1rem;
}

.offline-banner[b-rni0gy395d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    background: rgba(100, 116, 139, 0.15);
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 1rem;
    border-radius: 8px;
    border: 1px dashed var(--border);
}

.connection-lost[b-rni0gy395d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
    font-size: 0.9rem;
    margin-top: 1rem;
    border-radius: 8px;
}

.retry-btn[b-rni0gy395d] {
    background: var(--error);
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.retry-btn:hover[b-rni0gy395d] {
    opacity: 0.9;
}

.retry-btn:disabled[b-rni0gy395d] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ==================== Action Error Toast ==================== */
.action-error-toast[b-rni0gy395d] {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: var(--error);
    color: white;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 500;
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
    animation: slideUp-b-rni0gy395d 0.3s ease-out;
    z-index: 1000;
    max-width: calc(100% - 40px);
}

@keyframes slideUp-b-rni0gy395d {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.error-dismiss[b-rni0gy395d] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.error-dismiss:hover[b-rni0gy395d] {
    background: rgba(255, 255, 255, 0.3);
}

/* ==================== Celebration Screen ==================== */
.celebration-screen[b-rni0gy395d] {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    overflow: hidden;
}

.celebration-content[b-rni0gy395d] {
    position: relative;
    z-index: 10;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.party-icon[b-rni0gy395d] {
    font-size: 5rem;
    margin-bottom: 1rem;
}

/* QR Order prompt on seated screen */
.qr-order-prompt[b-rni0gy395d] {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
}

.qr-hint[b-rni0gy395d] {
    margin-bottom: 1rem;
    opacity: 0.9;
}

.btn-qr-order[b-rni0gy395d] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    animation: gentle-pulse-b-rni0gy395d 2s ease-in-out infinite;
}

.btn-qr-order:hover[b-rni0gy395d] {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
}

@keyframes gentle-pulse-b-rni0gy395d {
    0%, 100% { box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3); }
    50% { box-shadow: 0 4px 25px rgba(99, 102, 241, 0.5); }
}

.bounce-shake[b-rni0gy395d] {
    animation: bounce-shake-b-rni0gy395d 0.8s ease-in-out infinite;
}

@keyframes bounce-shake-b-rni0gy395d {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-10px) rotate(-5deg); }
    50% { transform: translateY(0) rotate(0deg); }
    75% { transform: translateY(-10px) rotate(5deg); }
}

.celebration-title[b-rni0gy395d] {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 2rem;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.table-assignment[b-rni0gy395d] {
    margin-bottom: 1.5rem;
}

.table-card[b-rni0gy395d] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 3rem;
    background: white;
    color: #1e293b;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.table-label[b-rni0gy395d] {
    font-size: 0.9rem;
    color: #64748b;
}

.table-name[b-rni0gy395d] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #10b981;
}

.table-zone[b-rni0gy395d] {
    font-size: 1rem;
    color: #64748b;
    margin-top: 4px;
}

.arrival-prompt[b-rni0gy395d] {
    font-size: 1rem;
    opacity: 0.9;
    margin-bottom: 1.5rem;
}

.btn-arrived[b-rni0gy395d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 48px;
    background: white;
    color: #10b981;
    border: none;
    border-radius: 50px;
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s;
}

.btn-arrived:hover:not(:disabled)[b-rni0gy395d] {
    transform: scale(1.05);
}

.btn-arrived:disabled[b-rni0gy395d] {
    opacity: 0.7;
}

.pulse-btn[b-rni0gy395d] {
    animation: pulse-btn-b-rni0gy395d 2s ease-in-out infinite;
}

@keyframes pulse-btn-b-rni0gy395d {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.4); }
    50% { box-shadow: 0 0 0 20px rgba(255,255,255,0); }
}

/* Confetti Explosion */
.confetti-explosion[b-rni0gy395d] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    pointer-events: none;
}

.confetti-piece[b-rni0gy395d] {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #ffd700;
    animation: explode-b-rni0gy395d 2s ease-out infinite;
    animation-delay: calc(var(--i) * 0.05s);
}

.confetti-piece:nth-child(2n)[b-rni0gy395d] { background: #ff6b6b; width: 8px; height: 12px; }
.confetti-piece:nth-child(3n)[b-rni0gy395d] { background: #4ecdc4; width: 12px; height: 8px; }
.confetti-piece:nth-child(5n)[b-rni0gy395d] { background: #ffe66d; border-radius: 50%; }
.confetti-piece:nth-child(7n)[b-rni0gy395d] { background: #ff9ff3; }
.confetti-piece:nth-child(11n)[b-rni0gy395d] { background: #54a0ff; }

@keyframes explode-b-rni0gy395d {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(
            calc(cos(var(--i) * 6deg) * 200px),
            calc(sin(var(--i) * 6deg) * 200px - 100px)
        ) rotate(720deg) scale(0);
        opacity: 0;
    }
}

/* Pulse Rings */
.pulse-rings[b-rni0gy395d] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.ring[b-rni0gy395d] {
    position: absolute;
    border: 3px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    animation: ring-pulse-b-rni0gy395d 3s ease-out infinite;
}

.ring-1[b-rni0gy395d] { width: 100px; height: 100px; margin: -50px 0 0 -50px; }
.ring-2[b-rni0gy395d] { width: 200px; height: 200px; margin: -100px 0 0 -100px; animation-delay: 0.5s; }
.ring-3[b-rni0gy395d] { width: 300px; height: 300px; margin: -150px 0 0 -150px; animation-delay: 1s; }

@keyframes ring-pulse-b-rni0gy395d {
    0% {
        transform: scale(0.5);
        opacity: 0.8;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* ==================== Modal ==================== */
.modal-overlay[b-rni0gy395d] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    touch-action: none; /* Prevent background scroll on mobile */
    overscroll-behavior: contain;
}

.modal-content[b-rni0gy395d] {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 1.5rem;
    max-width: 320px;
    width: 100%;
    text-align: center;
}

.modal-content h3[b-rni0gy395d] {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
}

.modal-content p[b-rni0gy395d] {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.modal-actions[b-rni0gy395d] {
    display: flex;
    gap: 12px;
}

.modal-actions button[b-rni0gy395d] {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}

.btn-secondary[b-rni0gy395d] {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
}

.btn-primary[b-rni0gy395d] {
    background: var(--brand-primary);
    border: none;
    color: white;
}

.btn-danger[b-rni0gy395d] {
    background: var(--error);
    border: none;
    color: white;
}

/* ==================== Responsive ==================== */
@media (max-width: 400px) {
    .position-circle[b-rni0gy395d] {
        width: 150px;
        height: 150px;
    }

    .position-number[b-rni0gy395d] {
        font-size: 3.5rem;
    }

    .celebration-title[b-rni0gy395d] {
        font-size: 1.5rem;
    }

    .table-name[b-rni0gy395d] {
        font-size: 2rem;
    }
}

/* ==================== Haptic Celebrating State ==================== */
.waitlist-track-page.celebrating[b-rni0gy395d] {
    animation: screen-pulse-b-rni0gy395d 0.5s ease-out;
}

@keyframes screen-pulse-b-rni0gy395d {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.1); }
}

/* ==================== Notification Button ==================== */
.notify-btn[b-rni0gy395d] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 1rem;
    cursor: pointer;
    animation: notify-pulse-b-rni0gy395d 2s ease-in-out infinite;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

@keyframes notify-pulse-b-rni0gy395d {
    0%, 100% { transform: scale(1); box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4); }
    50% { transform: scale(1.05); box-shadow: 0 4px 16px rgba(245, 158, 11, 0.6); }
}

.notify-enabled[b-rni0gy395d] {
    font-size: 1rem;
    opacity: 0.6;
    padding: 8px;
}

/* ==================== Queue Visualization ==================== */
.queue-visualization[b-rni0gy395d] {
    padding: 1rem 1.25rem;
    margin-bottom: 0.5rem;
}

.queue-track[b-rni0gy395d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

.queue-person[b-rni0gy395d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: all 0.3s ease;
}

.queue-person.past[b-rni0gy395d] {
    opacity: 0.3;
}

.queue-person.you[b-rni0gy395d] {
    transform: scale(1.2);
}

.queue-dot[b-rni0gy395d] {
    width: 12px;
    height: 12px;
    background: var(--border);
    border-radius: 50%;
}

.queue-person.past .queue-dot[b-rni0gy395d] {
    background: var(--success);
}

.queue-you-marker[b-rni0gy395d] {
    font-size: 1.5rem;
    animation: you-bounce-b-rni0gy395d 1s ease-in-out infinite;
}

.queue-you-label[b-rni0gy395d] {
    font-size: 0.65rem;
    color: var(--brand-primary);
    font-weight: 600;
    text-transform: uppercase;
}

@keyframes you-bounce-b-rni0gy395d {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.queue-finish[b-rni0gy395d] {
    font-size: 1.5rem;
    margin-left: 8px;
    padding: 8px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 50%;
}

.queue-progress-bar[b-rni0gy395d] {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}

.queue-progress-fill[b-rni0gy395d] {
    height: 100%;
    background: linear-gradient(90deg, var(--success), var(--brand-primary));
    border-radius: 2px;
    transition: width 0.5s ease;
}

/* Ghost Trail - Shows previous positions */
.queue-ghost[b-rni0gy395d] {
    position: absolute;
    opacity: var(--ghost-opacity, 0.3);
    transform: translateX(calc(var(--ghost-index, 0) * -20px));
    animation: ghost-fade-b-rni0gy395d 2s ease-out forwards;
    animation-delay: calc(var(--ghost-index, 0) * 0.1s);
}

.ghost-marker[b-rni0gy395d] {
    font-size: 1rem;
    filter: grayscale(1);
}

@keyframes ghost-fade-b-rni0gy395d {
    0% { opacity: var(--ghost-opacity, 0.3); }
    100% { opacity: 0.1; }
}

.queue-track[b-rni0gy395d] {
    position: relative;
}

/* Progress Trail Dots */
.progress-trail[b-rni0gy395d] {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
    padding-left: 4px;
}

.trail-dot[b-rni0gy395d] {
    width: 6px;
    height: 6px;
    background: var(--success);
    border-radius: 50%;
    opacity: calc(0.8 - (var(--trail-index, 0) * 0.15));
    animation: trail-pulse-b-rni0gy395d 1.5s ease-in-out infinite;
    animation-delay: calc(var(--trail-index, 0) * 0.2s);
}

@keyframes trail-pulse-b-rni0gy395d {
    0%, 100% { transform: scale(1); opacity: calc(0.8 - (var(--trail-index, 0) * 0.15)); }
    50% { transform: scale(1.3); opacity: 1; }
}

.queue-progress-bar[b-rni0gy395d] {
    position: relative;
}

/* ==================== Live Countdown Timer ==================== */
.countdown-timer-card[b-rni0gy395d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0 1.25rem 1.5rem;
}

.countdown-ring[b-rni0gy395d] {
    position: relative;
    width: 140px;
    height: 140px;
}

.countdown-ring svg[b-rni0gy395d] {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.countdown-bg[b-rni0gy395d] {
    fill: none;
    stroke: var(--border);
    stroke-width: 8;
}

.countdown-progress[b-rni0gy395d] {
    fill: none;
    stroke: var(--brand-primary);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 283;
    transition: stroke-dashoffset 1s linear;
}

.countdown-text[b-rni0gy395d] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.countdown-minutes[b-rni0gy395d] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text);
}

.countdown-separator[b-rni0gy395d] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text);
    animation: blink-b-rni0gy395d 1s step-end infinite;
}

.countdown-seconds[b-rni0gy395d] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-muted);
    min-width: 2ch;
}

@keyframes blink-b-rni0gy395d {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.countdown-label[b-rni0gy395d] {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==================== Position Changed Animation ==================== */
.position-circle.position-changed[b-rni0gy395d] {
    animation: position-pop-b-rni0gy395d 0.6s ease-out;
}

@keyframes position-pop-b-rni0gy395d {
    0% { transform: scale(1); }
    30% { transform: scale(1.15); }
    60% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.position-circle.position-changed .position-number[b-rni0gy395d] {
    animation: number-flash-b-rni0gy395d 0.6s ease-out;
}

@keyframes number-flash-b-rni0gy395d {
    0% { color: white; }
    30% { color: #fef08a; text-shadow: 0 0 20px rgba(254, 240, 138, 0.8); }
    100% { color: white; }
}

/* ==================== Enhanced Celebration ==================== */
.waitlist-track-page.celebrating .celebration-screen[b-rni0gy395d] {
    animation: celebration-entrance-b-rni0gy395d 0.8s ease-out;
}

@keyframes celebration-entrance-b-rni0gy395d {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Firework burst effect */
.celebration-screen[b-rni0gy395d]::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: gold;
    border-radius: 50%;
    box-shadow:
        -80px -60px 0 gold,
        80px -60px 0 gold,
        -120px 20px 0 #ff6b6b,
        120px 20px 0 #ff6b6b,
        -60px 80px 0 #4ecdc4,
        60px 80px 0 #4ecdc4,
        0 -100px 0 #ffe66d;
    animation: firework-burst-b-rni0gy395d 2s ease-out infinite;
}

@keyframes firework-burst-b-rni0gy395d {
    0% {
        transform: translateX(-50%) scale(0);
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) scale(3);
        opacity: 0;
    }
}

/* Sparkle effect on table card */
.table-card[b-rni0gy395d] {
    position: relative;
    overflow: visible;
}

.table-card[b-rni0gy395d]::after {
    content: '✨';
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 1.5rem;
    animation: sparkle-b-rni0gy395d 0.6s ease-in-out infinite alternate;
}

@keyframes sparkle-b-rni0gy395d {
    0% { transform: scale(1) rotate(0deg); opacity: 1; }
    100% { transform: scale(1.2) rotate(20deg); opacity: 0.7; }
}

/* ==================== RTL Support for Arabic ==================== */
[dir="rtl"] .track-header[b-rni0gy395d],
[dir="rtl"] .modal-actions[b-rni0gy395d],
[dir="rtl"] .info-row[b-rni0gy395d],
[dir="rtl"] .connection-lost[b-rni0gy395d],
[dir="rtl"] .connection-warning[b-rni0gy395d],
[dir="rtl"] .action-error-toast[b-rni0gy395d],
[dir="rtl"] .offline-banner[b-rni0gy395d],
[dir="rtl"] .share-status-row[b-rni0gy395d],
[dir="rtl"] .btn-share[b-rni0gy395d],
[dir="rtl"] .last-updated[b-rni0gy395d],
[dir="rtl"] .refresh-status[b-rni0gy395d] {
    flex-direction: row-reverse;
}

[dir="rtl"] .position-delta[b-rni0gy395d] {
    right: auto;
    left: -10px;
}

[dir="rtl"] .header-actions[b-rni0gy395d] {
    flex-direction: row-reverse;
}

[dir="rtl"] .spinner-small[b-rni0gy395d] {
    margin-right: 0;
    margin-left: 6px;
}

[dir="rtl"] .live-badge[b-rni0gy395d],
[dir="rtl"] .btn-arrived[b-rni0gy395d],
[dir="rtl"] .btn-qr-order[b-rni0gy395d],
[dir="rtl"] .retry-btn[b-rni0gy395d] {
    flex-direction: row-reverse;
}

[dir="rtl"] .table-card[b-rni0gy395d]::after {
    right: auto;
    left: -10px;
}

/* ==================== Screen Awake Toggle ==================== */
.screen-awake-toggle[b-rni0gy395d] {
    background: transparent;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 8px;
    margin-left: 8px;
    opacity: 0.6;
    transition: opacity 0.2s, transform 0.2s;
}

.screen-awake-toggle:hover[b-rni0gy395d] {
    opacity: 1;
}

.screen-awake-toggle.active[b-rni0gy395d] {
    opacity: 1;
    animation: awake-glow-b-rni0gy395d 2s ease-in-out infinite;
}

@keyframes awake-glow-b-rni0gy395d {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ==================== Pull to Refresh ==================== */
.pull-indicator[b-rni0gy395d] {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 24px;
    background: var(--bg-card);
    border-radius: 0 0 16px 16px;
    box-shadow: var(--shadow);
    z-index: 100;
    transition: opacity 0.2s;
}

.pull-icon[b-rni0gy395d] {
    font-size: 1.5rem;
    transition: transform 0.2s;
}

.pull-icon.ready[b-rni0gy395d] {
    color: var(--success);
    animation: ready-spin-b-rni0gy395d 0.6s ease-out;
}

@keyframes ready-spin-b-rni0gy395d {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.pull-indicator span:last-child[b-rni0gy395d] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ==================== PWA Install Prompt ==================== */
.install-prompt[b-rni0gy395d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-hover));
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
}

.btn-install[b-rni0gy395d] {
    background: white;
    color: var(--brand-primary);
    border: none;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
}

.btn-install:hover[b-rni0gy395d] {
    transform: scale(1.05);
}

.btn-dismiss[b-rni0gy395d] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.btn-dismiss:hover[b-rni0gy395d] {
    background: rgba(255, 255, 255, 0.3);
}

/* ==================== Battery Saver Notice ==================== */
.battery-saver-notice[b-rni0gy395d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(245, 158, 11, 0.2);
}

/* ==================== RTL Support for Enhancements ==================== */
[dir="rtl"] .screen-awake-toggle[b-rni0gy395d] {
    margin-left: 0;
    margin-right: 8px;
}

[dir="rtl"] .install-prompt[b-rni0gy395d],
[dir="rtl"] .battery-saver-notice[b-rni0gy395d] {
    flex-direction: row-reverse;
}

[dir="rtl"] .pull-indicator[b-rni0gy395d] {
    /* Center alignment stays the same */
}

/* ==================== Reduced Motion Accessibility ==================== */
@media (prefers-reduced-motion: reduce) {
    /* Disable all animations */
    .spinner[b-rni0gy395d],
    .spinner-small[b-rni0gy395d],
    .countdown-separator[b-rni0gy395d],
    .live-dot[b-rni0gy395d],
    .confetti-piece[b-rni0gy395d],
    .ring[b-rni0gy395d],
    .party-icon[b-rni0gy395d],
    .pulse-btn[b-rni0gy395d],
    .btn-qr-order[b-rni0gy395d],
    .table-card[b-rni0gy395d]::after,
    .position-circle.position-changed[b-rni0gy395d],
    .position-circle.position-changed .position-number[b-rni0gy395d],
    .queue-you-marker[b-rni0gy395d] {
        animation: none !important;
    }

    /* Remove transitions that could cause motion */
    .waitlist-track-page[b-rni0gy395d],
    .countdown-progress[b-rni0gy395d],
    .queue-progress-fill[b-rni0gy395d] {
        transition: none !important;
    }

    /* Keep essential visual feedback without motion */
    .spinner[b-rni0gy395d],
    .spinner-small[b-rni0gy395d] {
        border-top-color: var(--brand-primary);
    }

    .live-dot[b-rni0gy395d] {
        background: var(--success);
        box-shadow: none;
    }

    /* Hide purely decorative animated elements */
    .confetti-explosion[b-rni0gy395d],
    .pulse-rings[b-rni0gy395d] {
        display: none !important;
    }

    /* Simplify celebration without removing content */
    .celebration-screen[b-rni0gy395d] {
        background: linear-gradient(135deg, var(--brand-primary) 0%, #8b5cf6 100%);
    }
}

/* ==================== Almost There Badge ==================== */
.position-circle.almost-there[b-rni0gy395d] {
    background: linear-gradient(135deg, #f59e0b 0%, #dc2626 100%);
    box-shadow: 0 10px 40px -10px #f59e0b;
    animation: float-b-rni0gy395d 3s ease-in-out infinite, almost-pulse-b-rni0gy395d 1.5s ease-in-out infinite;
}

@keyframes almost-pulse-b-rni0gy395d {
    0%, 100% { box-shadow: 0 10px 40px -10px #f59e0b; }
    50% { box-shadow: 0 15px 50px -5px #f59e0b, 0 0 30px rgba(245, 158, 11, 0.4); }
}

.almost-there-badge[b-rni0gy395d] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #f59e0b, #dc2626);
    color: white;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    animation: badge-bounce-b-rni0gy395d 1s ease-in-out infinite;
}

.almost-icon[b-rni0gy395d] {
    font-size: 1rem;
    animation: fire-flicker-b-rni0gy395d 0.5s ease-in-out infinite alternate;
}

@keyframes badge-bounce-b-rni0gy395d {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes fire-flicker-b-rni0gy395d {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

/* ==================== WhatsApp Share Button ==================== */
.btn-whatsapp[b-rni0gy395d] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #25D366;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-whatsapp:hover[b-rni0gy395d] {
    background: #128C7E;
    transform: scale(1.05);
}

.btn-whatsapp:active[b-rni0gy395d] {
    transform: scale(0.95);
}

/* ==================== Sound Preview Button ==================== */
.sound-preview[b-rni0gy395d] {
    background: transparent;
    border: none;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 6px 8px;
    opacity: 0.7;
    transition: all 0.2s;
    border-radius: 6px;
}

.sound-preview:hover[b-rni0gy395d] {
    opacity: 1;
    background: rgba(99, 102, 241, 0.1);
}

.sound-preview:active[b-rni0gy395d] {
    transform: scale(0.9);
}

/* ==================== RTL Support for New Elements ==================== */
[dir="rtl"] .almost-there-badge[b-rni0gy395d] {
    flex-direction: row-reverse;
}

[dir="rtl"] .btn-whatsapp[b-rni0gy395d] {
    /* Icon centered, no RTL change needed */
}

/* ========================================
   TOUCHSCREEN-FRIENDLY IMPROVEMENTS
   ======================================== */

/* Larger touch targets for header buttons */
.theme-toggle[b-rni0gy395d],
.sound-toggle[b-rni0gy395d],
.sound-preview[b-rni0gy395d] {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Larger action buttons */
.btn-share[b-rni0gy395d],
.btn-refresh[b-rni0gy395d],
.btn-whatsapp[b-rni0gy395d] {
    min-width: 44px;
    min-height: 44px;
}

.btn-arrived[b-rni0gy395d],
.btn-cancel[b-rni0gy395d],
.btn-qr-order[b-rni0gy395d] {
    min-height: 48px;
    padding: 14px 24px;
}

/* Tap feedback for all interactive elements */
.theme-toggle:active[b-rni0gy395d],
.sound-toggle:active[b-rni0gy395d],
.sound-preview:active[b-rni0gy395d],
.btn-share:active[b-rni0gy395d],
.btn-refresh:active[b-rni0gy395d],
.btn-whatsapp:active[b-rni0gy395d],
.lang-select:active[b-rni0gy395d] {
    transform: scale(0.92);
    transition: transform 0.1s ease;
}

/* Prevent text selection on touch */
.position-circle[b-rni0gy395d],
.countdown-timer-card[b-rni0gy395d],
.queue-info-card[b-rni0gy395d],
.share-status-row[b-rni0gy395d],
.btn-share[b-rni0gy395d],
.btn-arrived[b-rni0gy395d],
.btn-qr-order[b-rni0gy395d] {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Smooth scrolling for touch */
.waiting-screen[b-rni0gy395d] {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

/* Larger language selector for touch */
.lang-select[b-rni0gy395d] {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 1.1rem;
}

/* Better touch target for notify button */
.notify-btn[b-rni0gy395d] {
    min-width: 44px;
    min-height: 44px;
}

/* Screen awake toggle touch target */
.screen-awake-toggle[b-rni0gy395d] {
    min-width: 40px;
    min-height: 40px;
    padding: 8px;
}

/* ========================================
   MICRO-INTERACTIONS & POLISH
   ======================================== */

/* Celebration glow for position circle when almost there */
.position-circle.almost-there[b-rni0gy395d]::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: linear-gradient(45deg, #f59e0b, #dc2626, #f59e0b);
    background-size: 200% 200%;
    animation: gradient-rotate-b-rni0gy395d 3s linear infinite;
    z-index: -1;
    opacity: 0.5;
}

@keyframes gradient-rotate-b-rni0gy395d {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Subtle hover effect for info cards */
.queue-info-card:hover[b-rni0gy395d] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

/* Countdown timer pulse when time is low */
.countdown-timer-card.urgent[b-rni0gy395d] {
    animation: urgentPulse-b-rni0gy395d 1s ease-in-out infinite;
}

@keyframes urgentPulse-b-rni0gy395d {
    0%, 100% { box-shadow: 0 4px 20px rgba(239, 68, 68, 0.2); }
    50% { box-shadow: 0 4px 30px rgba(239, 68, 68, 0.4); }
}

/* Success checkmark animation */
@keyframes checkPop-b-rni0gy395d {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.btn-share.copied span:first-child[b-rni0gy395d] {
    animation: checkPop-b-rni0gy395d 0.3s ease-out;
}

/* Live dot enhanced pulsing */
.connection-dot.connected[b-rni0gy395d] {
    animation: livePulse-b-rni0gy395d 2s ease-in-out infinite;
}

@keyframes livePulse-b-rni0gy395d {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
        transform: scale(1.1);
    }
}

/* Disconnected state */
.connection-dot.disconnected[b-rni0gy395d] {
    background: #f59e0b;
    animation: disconnectedBlink-b-rni0gy395d 1s ease-in-out infinite;
}

@keyframes disconnectedBlink-b-rni0gy395d {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.connection-dot.offline[b-rni0gy395d] {
    background: #ef4444;
}

/* Button ripple effect */
.btn-arrived[b-rni0gy395d]::after,
.btn-qr-order[b-rni0gy395d]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at center, rgba(255,255,255,0.3) 0%, transparent 70%);
    opacity: 0;
    transform: scale(0);
    transition: all 0.4s ease;
}

.btn-arrived:active[b-rni0gy395d]::after,
.btn-qr-order:active[b-rni0gy395d]::after {
    opacity: 1;
    transform: scale(2);
    transition: all 0s;
}

/* Mobile-specific adjustments */
@media (max-width: 480px) {
    .share-status-row[b-rni0gy395d] {
        flex-direction: column;
        gap: 12px;
    }

    .share-buttons[b-rni0gy395d],
    .refresh-status[b-rni0gy395d] {
        width: 100%;
        justify-content: center;
    }

    .btn-share[b-rni0gy395d] {
        flex: 1;
    }
}