/* /Components/Layout/ErrorLayout.razor.rz.scp.css */
.error-shell[b-46rtlmmmi6] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--pt-app-bg);
    color: var(--pt-text-strong);
    font-family: var(--pt-font-body);
    font-size: var(--pt-text-body);
    line-height: var(--pt-leading-body);
}

/* Same band (--pt-topbar-height) as the shell's top bar, so the page does not jump when it replaces a real screen. */
.error-shell__header[b-46rtlmmmi6] {
    display: flex;
    align-items: center;
    height: var(--pt-topbar-height);
    padding: 0 var(--pt-space-8);
}

.error-shell__wordmark[b-46rtlmmmi6] {
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: var(--pt-tracking-title);
    color: var(--pt-text-strong);
}

.error-shell__main[b-46rtlmmmi6] {
    flex: 1 1 auto;
    display: flex;
    /* Column, so Error.razor's development-only exception dump stacks under the panel
       instead of landing beside it. */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Bottom padding matches the header so the panel sits optically centred, not mathematically. */
    padding: 0 var(--pt-space-6) var(--pt-topbar-height);
}

/* ErrorPanel centres itself with an auto margin for the in-shell pages. Here the flex parent
   already centres it, and the auto margin would push it off. */
.error-shell__main[b-46rtlmmmi6]  .error-panel { margin: 0; }

@media (max-width: 600px) {
    .error-shell__header[b-46rtlmmmi6] { padding: 0 var(--pt-space-4); }
    .error-shell__main[b-46rtlmmmi6] { padding: 0 var(--pt-space-4) var(--pt-space-8); }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-nsd3tyz0uq] {
    --pt-nav-width: 232px;
    display: flex;
    min-height: 100vh;
    background: var(--pt-app-bg);
    color: var(--pt-text-strong);
    font-family: var(--pt-font-body);
    font-size: var(--pt-text-body);
    line-height: var(--pt-leading-body);
}

.page__sidebar[b-nsd3tyz0uq] {
    flex: none;
    width: var(--pt-nav-width);
    min-width: var(--pt-nav-width);
    display: flex;
    flex-direction: column;
    height: 100dvh;
    position: sticky;
    z-index: 31;
    top: 0;
    background: var(--pt-forest-900);
    overflow-x: hidden;
    overflow-y: auto;
}

.page__main[b-nsd3tyz0uq] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--pt-app-bg);
}

main[b-nsd3tyz0uq] { background: var(--pt-app-bg); }

/* No max-width: the handoff runs the content pane edge to edge beside the rail (padding
   22/28/34), and capping it at 1180px centred left a wide monitor showing a narrow column with
   the panels squeezed inside it. A page that needs a reading measure caps its own text block. */
.page__content[b-nsd3tyz0uq] {
    --pt-content-pad: 28px;
    padding: 22px var(--pt-content-pad) 34px;
}

@media (max-width: 820px) {
    .page__content[b-nsd3tyz0uq] { --pt-content-pad: 18px; }
}

@media (max-width: 600px) {
    .page__content[b-nsd3tyz0uq] { --pt-content-pad: var(--pt-space-4); }
}

/* Everything below the desktop tier: the rail becomes an off-canvas drawer that any screen can
   dismiss. This started at 700px, with 701-820px keeping a permanent 64px icon rail whose labels
   were hover-only tooltips — unreachable on the touch devices that live in exactly that band.
   Both moves since were the same correction: the rail is only unconditionally worth its width on
   a desktop. 1180px is the ladder's own single-column breakpoint, and it puts a landscape tablet
   (1024px) on the drawer, where its 232px of rail is a fifth of the screen. */
@media (max-width: 1180px) {
    .page[b-nsd3tyz0uq] { --pt-nav-width: 0px; }

    .page__sidebar[b-nsd3tyz0uq] {
        position: fixed;
        top: 0;
        left: 0;
        width: min(280px, 84vw);
        min-width: 0;
        height: 100dvh;
        /* Safe-area accuracy note: env(safe-area-inset-*) resolves to 0px in every engine today —
           App.razor's viewport meta has no viewport-fit=cover, and shouldn't gain one in this
           batch (painting under notches needs its own visual pass and the product owner's
           sign-off). So every max(var(--pt-space-4), env(...)) in this codebase is, right now,
           exactly --pt-space-4: a floor, not a real inset — it only becomes one once
           viewport-fit=cover ships. This declaration used to be a bare env() with no floor, which
           computed to a literal 0 and did nothing at all; given the same max(...) shape as its
           siblings so it is at least consistent with them while equally inert. Other stylesheets
           carrying env(safe-area-inset-*) point back to this comment rather than repeating it. */
        padding-bottom: max(var(--pt-space-4), env(safe-area-inset-bottom));
        transform: translateX(-100%);
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 320;
        /* transform alone does not remove an off-screen element from the tab order or the
           accessibility tree, so a closed drawer would otherwise leave its eleven links reachable
           and invisible ahead of everything else on the page. visibility does remove both, and
           the delay-on-hide/no-delay-on-show pairing keeps it out of the way of the slide
           animation: the after-change style always wins the timing, so opening applies instantly
           (transition-delay 0s) while closing waits out the slide before it disappears. */
        visibility: hidden;
        transition: transform var(--pt-dur-base) var(--pt-ease-glide),
                    visibility 0s linear var(--pt-dur-base);
    }

    /* Focus lands here on open (see MainLayout's OnPopoverChanged) purely to fix Tab order; it is
       not a control, so it gets no visible ring of its own. */
    .page__sidebar:focus-visible[b-nsd3tyz0uq] { outline: none; }

    .page:has(.topbar__nav-toggle[aria-expanded="true"]) .page__sidebar[b-nsd3tyz0uq] {
        transform: translateX(0);
        visibility: visible;
        transition: transform var(--pt-dur-base) var(--pt-ease-glide),
                    visibility 0s linear 0s;
    }

    .page__nav-backdrop[b-nsd3tyz0uq] {
        position: fixed;
        inset: 0;
        z-index: 310;
        border: 0;
        padding: 0;
        background: oklch(from var(--pt-forest-900) l c h / .5);
    }

    .page__content[b-nsd3tyz0uq] { --pt-content-pad: var(--pt-space-4); }
}

@media (max-width: 1180px) and (prefers-reduced-motion: reduce) {
    .page__sidebar[b-nsd3tyz0uq] { transition: none; }
    /* The :has() open-state rule above carries its own transition declaration at specificity
       (0,4,0), which beats this block's (0,1,0) on .page__sidebar alone regardless of source
       order -- so the open transition needs its own override here, or reduced motion only ever
       suppressed the close. */
    .page:has(.topbar__nav-toggle[aria-expanded="true"]) .page__sidebar[b-nsd3tyz0uq] { transition: none; }
}

/* Between the prerendered page and its live circuit (first load, reload) a click on a Blazor button
   did nothing and said nothing. While starting, those buttons take no pointer events and a thin bar
   says the screen is still arriving. Links and submit forms (logout) work prerendered, so they stay. */
.page--starting[b-nsd3tyz0uq]  button[type="button"] { pointer-events: none; }
.page--starting .page__main[b-nsd3tyz0uq] { cursor: progress; }
.page--starting .page__main[b-nsd3tyz0uq]::before {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 250;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--pt-forest-600), transparent);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: page-starting-b-nsd3tyz0uq 1.1s var(--pt-ease-soft) infinite;
}
@keyframes page-starting-b-nsd3tyz0uq { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) {
    .page--starting .page__main[b-nsd3tyz0uq]::before { animation: none; background: var(--pt-forest-600); opacity: .5; }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Management surface: brand lives in colour and type only. No illustration, no mascot. */
/* flex-wrap: nowrap is explicit, not a default-value no-op: bootstrap.min.css ships its own
   global `.nav { flex-wrap: wrap; ... }` (the Navs/Tabs component), and this element's class
   name collides with it. Our scoped rule out-specifies bootstrap's `.nav` on every property it
   sets, but never set flex-wrap, so bootstrap's `wrap` applied uncontested — which made this
   column-direction container size each flex line to its content's width instead of stretching
   children to fill the sidebar, letting an unbreakable child (e.g. a login-only account's email,
   which has no display name to show instead) push .nav__user wider than the sidebar with the
   overflow silently clipped by .page__sidebar's overflow-x: hidden. */
.nav[b-snqqn3sfvd] {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    background: var(--pt-forest-900);
    /* 18/14 and the brand's 18/20 below are the prototype's own values, not the 4px scale —
       the rail predates the spacing scale and rounding it to 16/12 shortened the whole column. */
    padding: 18px 0 14px;
}

.nav__brand[b-snqqn3sfvd] {
    display: flex;
    align-items: flex-start;
    gap: var(--pt-space-2);
    padding: 0 18px 20px;
}

/* min-width: 0 so a long restaurant name ellipsises against the close button instead of pushing
   it out of the 280px drawer. */
.nav__brand-text[b-snqqn3sfvd] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Deliberately the quietest control in the rail: same transparent/fill/scale specimen as
   .nav__shop-btn, one step dimmer (--pt-moss-500, the brand subtitle's own colour) because it
   dismisses rather than does anything. Hidden above 1180px, where the rail is permanent — see the
   drawer block below for where it turns on. */
.nav__close[b-snqqn3sfvd] {
    display: none;
    flex: none;
    place-items: center;
    width: var(--pt-action-min-height);
    height: var(--pt-action-min-height);
    border: 0;
    border-radius: var(--pt-radius-md);
    background: transparent;
    color: var(--pt-moss-500);
    font-size: 15px;
    cursor: pointer;
    transition: all var(--pt-dur-glide) var(--pt-ease-glide);
}

.nav__close:hover[b-snqqn3sfvd] { background: var(--pt-nav-fill); color: var(--pt-cream-50); }

.nav__close:active[b-snqqn3sfvd] {
    background: var(--pt-nav-fill-press);
    transform: scale(.94);
    transition-duration: var(--pt-dur-press);
    transition-timing-function: var(--pt-ease-press);
}

.nav__close:focus-visible[b-snqqn3sfvd] {
    outline: 2px solid var(--pt-gold-500);
    outline-offset: -2px;
}

.nav__brand-name[b-snqqn3sfvd] {
    display: block;
    width: 78px;
    height: auto;
    image-rendering: pixelated;
}

.nav__brand-rest[b-snqqn3sfvd] {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--pt-moss-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The links scroll; the brand and the user block do not. */
.nav__links[b-snqqn3sfvd] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 10px;

    /* The platform scrollbar is drawn for a light surface and lands here as a pale slab on
       --pt-forest-900, which is the widest, brightest thing in the column. Thin, moss, and no
       track: the same two colours the nav already uses for its quietest text. */
    scrollbar-width: thin;
    scrollbar-color: var(--pt-moss-600) transparent;
}

/* The WebKit half is not redundant with the two declarations above: Safari only shipped
   scrollbar-color in 18.2, so this is what styles the bar there. The two cannot fight — Chromium
   ignores ::-webkit-scrollbar entirely on any element that sets scrollbar-color or
   scrollbar-width, so exactly one mechanism applies per engine. */
.nav__links[b-snqqn3sfvd]::-webkit-scrollbar { width: 8px; }
.nav__links[b-snqqn3sfvd]::-webkit-scrollbar-track { background: transparent; }

.nav__links[b-snqqn3sfvd]::-webkit-scrollbar-thumb {
    background: var(--pt-moss-600);
    border-radius: var(--pt-radius-pill);
}

.nav__links[b-snqqn3sfvd]::-webkit-scrollbar-thumb:hover { background: var(--pt-moss-500); }

.nav__group[b-snqqn3sfvd] {
    font-family: var(--pt-font-mono);
    font-size: 11px;
    letter-spacing: .12em;
    color: var(--pt-moss-300);
    padding: var(--pt-space-4) 10px 7px;
}

/* ::deep is mandatory on every rule whose FINAL selector is .nav__link.
   The <a> is rendered by the NavLink child component, so it never receives this file's
   b-* scope attribute — without ::deep these rules compile to .nav__link[b-xxx] and match
   nothing at all, leaving the links with app.css's bare `a` styling. Rules where .nav__link
   is only an ancestor (.nav__link i) are fine, because the scope lands on the descendant. */
[b-snqqn3sfvd] .nav__link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;              /* touch target floor, kept against the prototype's 34px */
    padding: 8px 10px;
    border: 0;
    border-radius: var(--pt-radius-md);
    color: var(--pt-sage-300);
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none;
    background: none;
    width: 100%;
    cursor: pointer;
    transition: background var(--pt-dur-swap) var(--pt-ease-slow),
                color var(--pt-dur-swap) var(--pt-ease-slow),
                transform var(--pt-dur-slide) var(--pt-ease-slow);
}

/* Active section: the prototype fills the pill. NavLink itself renders aria-current="page" on
   the active anchor — do not set it here by hand.
   It is declared BEFORE :hover on purpose. Both selectors weigh (0,2,0), so whichever comes
   last wins, and with .active last the current page's own link was the one link in the rail
   that did nothing on hover — which is the link the pointer lands on most. The prototype has
   no such hole: its style-hover overrides the inline active fill on every item. */
[b-snqqn3sfvd] .nav__link.active {
    background: var(--pt-forest-750);
    color: var(--pt-cream-50);
}

[b-snqqn3sfvd] .nav__link:hover {
    color: var(--pt-cream-50);
    background: var(--pt-forest-600);
    transform: translateX(2px);
}

/* Press. The design system's motion table declares dur-press ("bajada de la tecla al presionar,
   ida rápida") and ease-press for exactly this, and its pattern for anything that displaces on
   hover is to settle it back down — the Producto buttons undo their translateY, so a rail row
   undoes its 2px slide. Only the press is fast: releasing falls back to the :hover rule's own
   620/520ms, which is the asymmetry "ida rápida" describes. */
[b-snqqn3sfvd] .nav__link:active {
    color: var(--pt-cream-50);
    background: var(--pt-forest-600);
    transform: translateX(0);
    transition-duration: var(--pt-dur-press);
    transition-timing-function: var(--pt-ease-press);
}

[b-snqqn3sfvd] .nav__link:focus-visible {
    outline: 2px solid var(--pt-gold-500);
    outline-offset: -2px;
}

.nav__user-btn:focus-visible[b-snqqn3sfvd],
.nav__shop-btn:focus-visible[b-snqqn3sfvd],
.nav__popover-item:focus-visible[b-snqqn3sfvd] {
    outline: 2px solid var(--pt-gold-500);
    outline-offset: -2px;
}

/* A destination the administrator paused: named, not clickable, quieter than a live link. */
[b-snqqn3sfvd] .nav__link--locked { cursor: default; opacity: .55; }

.nav__link i[b-snqqn3sfvd] { font-size: 15px; flex: none; width: 18px; text-align: center; }

.nav__badge[b-snqqn3sfvd] {
    margin-left: auto;
    flex: none;
    min-width: 19px;
    height: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border-radius: var(--pt-radius-pill);
    background: var(--pt-gold-500);
    color: var(--pt-ink-900);
    font-size: 10.5px;
    font-weight: 800;
}

/* ── User block and its popover ─────────────────────────────── */

.nav__user[b-snqqn3sfvd] {
    position: relative;
    flex: none;
    margin: var(--pt-space-2) var(--pt-space-2) 0;
    padding-top: var(--pt-space-3);
    border-top: 1px solid var(--pt-nav-line-soft);
}

.nav__user-row[b-snqqn3sfvd] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.nav__user-btn[b-snqqn3sfvd] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    padding: var(--pt-space-2);
    border: 0;
    border-radius: 9px;
    background: none;
    cursor: pointer;
    text-align: left;
    transition: all var(--pt-dur-glide) var(--pt-ease-glide);
}

/* The prototype fills both buttons while their popover is open, not only on hover. The state
   is already in the DOM as aria-expanded, so it needs no extra class — the shop button carries
   one too, because it is a second control for the same accordion. */
.nav__user-btn:hover[b-snqqn3sfvd],
.nav__user-btn[aria-expanded="true"][b-snqqn3sfvd] { background: var(--pt-nav-fill); }

.nav__user-btn:active[b-snqqn3sfvd] {
    background: var(--pt-nav-fill-press);
    transition-duration: var(--pt-dur-press);
    transition-timing-function: var(--pt-ease-press);
}

.nav__shop-btn[b-snqqn3sfvd] {
    flex: none;
    margin-left: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--pt-radius-md);
    background: transparent;
    color: var(--pt-sage-400);
    font-size: 14px;
    cursor: pointer;
    transition: all var(--pt-dur-glide) var(--pt-ease-glide);
}

.nav__shop-btn:hover[b-snqqn3sfvd],
.nav__shop-btn[aria-expanded="true"][b-snqqn3sfvd] { background: var(--pt-nav-fill); }

/* Icon-only buttons press with a scale in the design system (scale(.94) at 120ms), not with a
   displacement — this is that specimen, at the declared dur-press. */
.nav__shop-btn:active[b-snqqn3sfvd] {
    background: var(--pt-nav-fill-press);
    transform: scale(.94);
    transition-duration: var(--pt-dur-press);
    transition-timing-function: var(--pt-ease-press);
}

.nav__avatar[b-snqqn3sfvd] {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--pt-forest-600);
    color: var(--pt-gold-400);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12px;
}

.nav__user-text[b-snqqn3sfvd] { flex: 1; min-width: 0; }

.nav__user-name[b-snqqn3sfvd] {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--pt-sage-100);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav__user-role[b-snqqn3sfvd] { display: block; font-size: 11px; color: var(--pt-moss-500); }

/* Closes the popover on any outside click without reaching for JS interop. */
.nav__backdrop[b-snqqn3sfvd] { position: fixed; inset: 0; z-index: 40; }

.nav__popover[b-snqqn3sfvd] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    z-index: 50;
    margin-bottom: var(--pt-space-2);
    padding: 6px;
    background: var(--pt-forest-850);
    border: 1px solid var(--pt-nav-line);
    border-radius: var(--pt-radius-popover);
    box-shadow: var(--pt-shadow-navpopover);
    animation: capy-rise 160ms var(--pt-ease-enter) both;
}

.nav__popover-divider[b-snqqn3sfvd] {
    display: block;
    height: 1px;
    margin: var(--pt-space-1) var(--pt-space-2);
    background: var(--pt-nav-line-soft);
}

.nav__popover-item[b-snqqn3sfvd] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 9px 10px;
    border: 0;
    border-radius: var(--pt-radius-md);
    background: none;
    color: var(--pt-sage-200);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all var(--pt-dur-glide) var(--pt-ease-glide);
}

.nav__popover-item i[b-snqqn3sfvd] { flex: none; width: 17px; font-size: 14px; color: var(--pt-sage-400); }
.nav__popover-item:hover[b-snqqn3sfvd] { background: var(--pt-nav-fill-soft); }

.nav__popover-item:active[b-snqqn3sfvd] {
    background: var(--pt-nav-fill-press);
    transition-duration: var(--pt-dur-press);
    transition-timing-function: var(--pt-ease-press);
}

/* The log-out item is the one popover row whose icon takes the row colour, not the sage. */
.nav__popover-item--out[b-snqqn3sfvd] { color: var(--pt-clay-300); }
.nav__popover-item--out i[b-snqqn3sfvd] { color: inherit; }
.nav__popover-item--out:hover[b-snqqn3sfvd] { background: var(--pt-nav-fill-out); }
.nav__popover-item--out:active[b-snqqn3sfvd] { background: var(--pt-nav-fill-out-press); }

.nav__popover form[b-snqqn3sfvd] { margin: 0; }


/* Reduced motion suppresses the movement, not the rail. This block used to set
   `transition: none` on every one of these, which — together with the duration tokens that were
   zeroed at the time — left the whole rail switching states instantly, with no fade on hover and
   nothing at all on press. The prototype keeps both: it disables `animation`, never `transition`.
   So the 2px slide and the .94 press scale go, the colour and fill still glide. */
@media (prefers-reduced-motion: reduce) {
    [b-snqqn3sfvd] .nav__link:hover,
    [b-snqqn3sfvd] .nav__link:active { transform: none; }
    .nav__shop-btn:active[b-snqqn3sfvd],
    .nav__close:active[b-snqqn3sfvd] { transform: none; }
    .nav__popover[b-snqqn3sfvd] { animation: none; }
}

@media (hover: none) and (pointer: coarse) {
    .nav__shop-btn[b-snqqn3sfvd],
    .nav__close[b-snqqn3sfvd] { width: var(--pt-action-min-height-touch); height: var(--pt-action-min-height-touch); }
}

/* Phone and tablet: the rail is an off-canvas drawer, so everything here is what the drawer needs
   ON TOP of the desktop presentation -- nothing to undo. This block used to be an undo list,
   reversing a 64px icon rail that occupied 701-820px and revealed each label as a hover tooltip.
   That rail is gone: a tablet is a touch device, a tooltip is not reachable by touch, and the
   drawer already showed real labels one breakpoint below. Deleting the tier deleted the undo
   list with it.

   No min-height override here: the base ::deep .nav__link rule already carries an unconditional
   min-height: 44px. Re-declaring it via --pt-action-min-height-touch would key a touch target on
   viewport width rather than device capability, which the responsive contract test
   (ResponsiveContractTests.TouchSizingKeysOnPointerCapabilityNeverOnViewportWidth) forbids. */
@media (max-width: 1180px) {
    .nav__close[b-snqqn3sfvd] { display: grid; }

    /* 280px of drawer, against 232px of rail: the rows can afford the roomier padding. */
    [b-snqqn3sfvd] .nav__link { padding: 10px 12px; }
}
/* /Components/Layout/NotificationBell.razor.rz.scp.css */
/* The bell is shell chrome: it reads --pt-chrome-* rather than the light palette directly, so
   it follows whatever surface the mounted screen declares. See capy-tokens.css and app.css. */
.notif[b-0034mixl81] { position: relative; }

/* Closes the panel on any outside click without reaching for JS interop, the same device the
   nav's user popover uses. */
.notif__backdrop[b-0034mixl81] { position: fixed; inset: 0; z-index: 30; }

.notif__bell[b-0034mixl81] {
    position: relative;
    z-index: 41;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--pt-chrome-line);
    border-radius: var(--pt-radius-md);
    background: var(--pt-chrome-surface);
    color: var(--pt-chrome-icon);
    cursor: pointer;
    transition: background var(--pt-dur-quick) linear,
                border-color var(--pt-dur-quick) linear;
}

.notif__bell i[b-0034mixl81] { font-size: 15px; }

.notif__bell:hover[b-0034mixl81] { background: var(--pt-chrome-hover); }

.notif__bell--open[b-0034mixl81] {
    border-color: var(--pt-chrome-accent);
    background: var(--pt-chrome-inset-hover);
}

.notif__bell:focus-visible[b-0034mixl81] {
    outline: 2px solid var(--pt-gold-500);
    outline-offset: 2px;
}

.notif__badge[b-0034mixl81] {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--pt-space-1);
    border-radius: var(--pt-radius-pill);
    background: var(--pt-danger);
    color: var(--pt-cream-50);
    font-size: 10px;
    font-weight: 800;
}

@media (hover: none) and (pointer: coarse) {
    .notif__bell[b-0034mixl81] { width: var(--pt-action-min-height-touch); height: var(--pt-action-min-height-touch); }
}
/* /Components/Layout/NotificationCenter.razor.rz.scp.css */
/* Management surface: 1px border, diffuse shadow, no illustration. Geometry is the
   prototype's; every colour comes from the shell-chrome tokens rather than the light palette
   directly, because the panel opens over every screen including the dark kitchen board. The
   board re-declares those tokens on its own branch — see capy-tokens.css and app.css. */
.notifc[b-erh9xd9gce] {
    position: absolute;
    top: 42px;
    right: 0;
    z-index: 40;
    width: min(374px, calc(100vw - 32px));
    background: var(--pt-chrome-surface);
    border: 1px solid var(--pt-chrome-line);
    border-radius: var(--pt-radius-popover);
    box-shadow: var(--pt-chrome-shadow);
    overflow: hidden;
    text-align: left;
    animation: capy-rise 180ms var(--pt-ease-enter) both;
}

.notifc__head[b-erh9xd9gce] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px 11px;
    border-bottom: 1px solid var(--pt-chrome-divider);
}

.notifc__title[b-erh9xd9gce] {
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 14.5px;
    letter-spacing: -.01em;
    color: var(--pt-chrome-title);
}

.notifc__count[b-erh9xd9gce] {
    font-family: var(--pt-font-mono);
    font-size: 11px;
    color: var(--pt-chrome-warn);
    background: var(--pt-chrome-warn-tint);
    border-radius: var(--pt-radius-sm);
    padding: 3px 6px;
}

.notifc__readall[b-erh9xd9gce] {
    margin-left: auto;
    font-family: inherit;
    font-weight: 700;
    font-size: 11.5px;
    color: var(--pt-chrome-link);
    background: transparent;
    border: 0;
    padding: var(--pt-space-1) 2px;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: 3px;
}

.notifc__tabs[b-erh9xd9gce] {
    display: flex;
    gap: 5px;
    padding: 10px 15px;
    border-bottom: 1px solid var(--pt-chrome-divider);
    background: var(--pt-chrome-inset);
}

.notifc__tab[b-erh9xd9gce] {
    font-family: inherit;
    font-weight: 700;
    font-size: 11.5px;
    border-radius: var(--pt-radius-pill);
    padding: 5px 11px;
    cursor: pointer;
    background: var(--pt-chrome-surface);
    color: var(--pt-chrome-text);
    border: 1px solid var(--pt-chrome-line);
    transition: background var(--pt-dur-glide) var(--pt-ease-glide),
                color var(--pt-dur-glide) var(--pt-ease-glide),
                border-color var(--pt-dur-glide) var(--pt-ease-glide);
}

.notifc__tab--on[b-erh9xd9gce] {
    background: var(--pt-chrome-accent);
    color: var(--pt-chrome-accent-fg);
    border-color: var(--pt-chrome-accent);
}

.notifc__list[b-erh9xd9gce] {
    max-height: 372px;
    overflow-y: auto;
}

.notifc__group[b-erh9xd9gce] {
    display: block;
    font-family: var(--pt-font-mono);
    font-size: 7.5px;
    letter-spacing: .12em;
    color: var(--pt-chrome-faint);
    padding: 11px 15px 5px;
    background: var(--pt-chrome-surface);
}

.notifc__row-wrap[b-erh9xd9gce] { display: block; border-bottom: 1px solid var(--pt-chrome-hairline); }

.notifc__row[b-erh9xd9gce] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 10px 15px 12px;
    cursor: pointer;
    background: var(--pt-chrome-surface);
    transition: background var(--pt-dur-glide) var(--pt-ease-glide);
}

.notifc__row:hover[b-erh9xd9gce] { background: var(--pt-chrome-hover); }

.notifc__row--unread[b-erh9xd9gce] { background: var(--pt-chrome-unread); }

.notifc__row:focus-visible[b-erh9xd9gce] {
    outline: 2px solid var(--pt-gold-500);
    outline-offset: -2px;
}

.notifc__icon[b-erh9xd9gce] {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: var(--pt-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.notifc__icon--danger[b-erh9xd9gce] { background: var(--pt-chrome-danger-tint); color: var(--pt-chrome-danger); }
.notifc__icon--warn[b-erh9xd9gce] { background: var(--pt-chrome-warn-tint); color: var(--pt-chrome-warn); }
.notifc__icon--info[b-erh9xd9gce] { background: var(--pt-chrome-info-tint); color: var(--pt-chrome-info); }

.notifc__body[b-erh9xd9gce] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.notifc__titleline[b-erh9xd9gce] { display: flex; align-items: baseline; gap: var(--pt-space-2); }

.notifc__row-title[b-erh9xd9gce] {
    font-size: 13px;
    letter-spacing: -.005em;
    color: var(--pt-chrome-title);
    font-weight: 600;
}

.notifc__row--unread .notifc__row-title[b-erh9xd9gce] { font-weight: 800; }

.notifc__time[b-erh9xd9gce] {
    margin-left: auto;
    flex: none;
    font-family: var(--pt-font-mono);
    font-size: 7.5px;
    letter-spacing: .06em;
    color: var(--pt-chrome-faint);
}

.notifc__text[b-erh9xd9gce] {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--pt-chrome-text);
    text-wrap: pretty;
}

.notifc__action-wrap[b-erh9xd9gce] { display: flex; margin-top: 5px; }

.notifc__action[b-erh9xd9gce] {
    font-family: inherit;
    font-weight: 700;
    font-size: 11.5px;
    background: var(--pt-chrome-surface);
    /* The prototype draws this border as the tone's own colour at 34%. Deriving it from
       currentColor rather than restating each tone means the three modifiers below only carry
       a colour, and the border follows the tone through a surface change on its own. */
    border: 1px solid color-mix(in srgb, currentColor 34%, transparent);
    border-radius: var(--pt-radius-chip);
    padding: 5px 11px;
    cursor: pointer;
    transition: background var(--pt-dur-glide) var(--pt-ease-glide);
}

.notifc__action:hover[b-erh9xd9gce] { background: var(--pt-chrome-hover); }

.notifc__action--danger[b-erh9xd9gce] { color: var(--pt-chrome-danger); }
.notifc__action--warn[b-erh9xd9gce] { color: var(--pt-chrome-warn); }
.notifc__action--info[b-erh9xd9gce] { color: var(--pt-chrome-info); }

.notifc__dot[b-erh9xd9gce] {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pt-chrome-dot);
    margin-top: 10px;
}

.notifc__empty[b-erh9xd9gce] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pt-space-2);
    padding: 34px 20px 38px;
    text-align: center;
    font-size: 12.5px;
    color: var(--pt-chrome-text);
}

.notifc__empty i[b-erh9xd9gce] { font-size: 20px; color: var(--pt-chrome-faint); }

.notifc__foot[b-erh9xd9gce] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pt-space-2);
    padding: 11px 15px;
    border-top: 1px solid var(--pt-chrome-divider);
    background: var(--pt-chrome-inset);
    font-weight: 700;
    font-size: 12px;
    color: var(--pt-chrome-strong);
    text-decoration: none;
    transition: background var(--pt-dur-glide) var(--pt-ease-glide);
}

.notifc__foot:hover[b-erh9xd9gce] { background: var(--pt-chrome-inset-hover); }

.notifc__foot i[b-erh9xd9gce] { font-size: 12px; color: var(--pt-chrome-text); }

/* Waiters work the panel one-handed on a phone: every control gets the touch hit area. The tabs
   wrap so four 44px pills still fit the panel at 360px (328px wide), and the action button is
   centred in its row so growing it does not push the row text around. */
@media (hover: none) and (pointer: coarse) {
    .notifc__readall[b-erh9xd9gce],
    .notifc__tab[b-erh9xd9gce],
    .notifc__action[b-erh9xd9gce] {
        min-height: var(--pt-action-min-height-touch);
        min-width: var(--pt-action-min-height-touch);
    }

    .notifc__readall[b-erh9xd9gce] { display: inline-flex; align-items: center; justify-content: center; }
    .notifc__tabs[b-erh9xd9gce] { flex-wrap: wrap; }
    .notifc__tab[b-erh9xd9gce] { display: inline-flex; align-items: center; justify-content: center; }
    .notifc__action-wrap[b-erh9xd9gce] { margin-top: 2px; }
    .notifc__foot[b-erh9xd9gce] { min-height: var(--pt-action-min-height-touch); }
}

/* Same policy as the rail: the panel's entrance goes, the fills still glide. Every transition in
   this file is a background or a colour — none of them is motion — so nothing else is suppressed. */
@media (prefers-reduced-motion: reduce) {
    .notifc[b-erh9xd9gce] { animation: none; }
}
/* /Components/Layout/NotificationHost.razor.rz.scp.css */
/* Toasts stack from the bottom-right, newest on top, above everything else. */
.toast-host[b-0552vzz1rc] {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1080;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.625rem;
    width: min(22rem, calc(100vw - 2rem));
    /* Alerts that wait stay until answered, so a busy night can outgrow the screen. Empty space must
       not swallow taps on the page beneath. */
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    pointer-events: none;
}

/* A drawer keeps its actions in its footer, right where the cards stack, and an alert that waits
   must not sit on the button that answers it. */
html:has(.drawer-overlay, .takeaway-drawer) .toast-host[b-0552vzz1rc] {
    right: auto;
    left: 1rem;
}

/* On a phone the drawer takes the whole width, and its header is the free end. */
@media (max-width: 560px) {
    html:has(.drawer-overlay, .takeaway-drawer) .toast-host[b-0552vzz1rc] {
        top: 4.5rem;
        bottom: auto;
    }
}

.toast-host > *[b-0552vzz1rc] {
    pointer-events: auto;
    flex-shrink: 0;
}

.toast-item[b-0552vzz1rc] {
    position: relative;
}

.toast-item__dismiss[b-0552vzz1rc] {
    position: absolute;
    top: var(--pt-space-2);
    right: var(--pt-space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: var(--pt-radius-md);
    background: transparent;
    color: var(--pt-text-secondary);
    font-size: 12px;
    cursor: pointer;
}

.toast-item__dismiss:hover[b-0552vzz1rc] {
    background: var(--pt-app-bg);
}

/* Under drawers and dialogs (300 and up): it can wait, and it must never sit on a Guardar button. */
.alerts-stack[b-0552vzz1rc] {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    width: min(22rem, calc(100vw - 2rem));
}

.alerts-banner[b-0552vzz1rc],
.alerts-live[b-0552vzz1rc] {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--pt-space-3);
    padding: 14px var(--pt-space-4);
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-lg);
    background: var(--pt-surface);
    box-shadow: var(--pt-shadow-panel);
}

.alerts-banner[hidden][b-0552vzz1rc] {
    display: none;
}

.alerts-banner__text[b-0552vzz1rc] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.alerts-banner__body[b-0552vzz1rc] {
    font-size: var(--pt-text-caption);
    line-height: var(--pt-leading-caption);
    color: var(--pt-text-secondary);
}

.toast-card[b-0552vzz1rc] {
    display: flex;
    align-items: flex-start;
    gap: var(--pt-space-3);
    width: 100%;
    padding: 14px var(--pt-space-4);
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-lg);
    background: var(--pt-surface);
    box-shadow: var(--pt-shadow-panel);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;

    /* Entrance / exit. Same "rise" idiom as waiter-rise / confirm-rise / capy-rise elsewhere in
       the dashboard: fade + translateY only, no blur, no scale. Toggling .is-open (see
       ShowToast/ToastCardClass) plays this forward; removing it plays the same transition in
       reverse, so there is no separate close curve to maintain. */
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--pt-dur-base) var(--pt-ease-soft),
                transform var(--pt-dur-base) var(--pt-ease-soft),
                box-shadow var(--pt-dur-hover) var(--pt-ease-soft);
}

.toast-card.is-open[b-0552vzz1rc] {
    opacity: 1;
    transform: none;
}

/* Waits for someone: the bar says it will not leave on its own, the padding clears the close button. */
.toast-card--waiting[b-0552vzz1rc] {
    border-left: 4px solid var(--pt-warning);
    padding-right: calc(var(--pt-space-4) + 28px);
}

/* It stays until someone reads it, so all of it has to be readable. */
.toast-card--waiting .toast-card__body[b-0552vzz1rc] {
    white-space: normal;
}

/* Declared after .is-open on purpose: both selectors weigh (0,2,0), and the lift should win over
   the resting "transform: none" while a toast is hovered, the same ordering NavMenu's active/hover
   pair uses for the same reason. */
.toast-card:hover[b-0552vzz1rc] {
    box-shadow: 0 10px 28px oklch(23.463% 0.021 156.521 / .18), 0 2px 8px oklch(23.463% 0.021 156.521 / .08);
    transform: var(--pt-lift-hover);
}

/* Tone mark: same anatomy as ConfirmDialog's .confirm__mark (tint square + hairline border +
   coloured glyph) and NotificationCenter's .notifc__icon (same tone-pair recipe), at this
   surface's own size. */
.toast-card__icon[b-0552vzz1rc] {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: var(--pt-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-card__icon svg[b-0552vzz1rc] { width: 16px; height: 16px; }
.toast-card__icon i[b-0552vzz1rc] { font-size: 15px; }

.toast-card__icon--success[b-0552vzz1rc] {
    background: oklch(from var(--pt-success) l c h / .12);
    border: 1px solid oklch(from var(--pt-success) l c h / .28);
    color: var(--pt-success);
}

.toast-card__icon--info[b-0552vzz1rc] {
    background: var(--pt-chrome-info-tint);
    border: 1px solid oklch(from var(--pt-info) l c h / .28);
    color: var(--pt-chrome-info);
}

/* The one flourish: the resolved check's stroke draws in, slightly after the card lands. */
.toast-card__check[b-0552vzz1rc] {
    stroke-dasharray: 15;
    stroke-dashoffset: 15;
    transition: stroke-dashoffset var(--pt-dur-base) var(--pt-ease-soft);
}

.toast-card.is-open .toast-card__check[b-0552vzz1rc] {
    stroke-dashoffset: 0;
    transition-delay: 90ms;
}

.toast-card__text[b-0552vzz1rc] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-top: 1px;
}

.toast-card__title[b-0552vzz1rc] {
    font-family: var(--pt-font-body);
    font-size: 14px;
    font-weight: 800;
    color: var(--pt-ink-900);
    line-height: 1.3;
}

.toast-card__body[b-0552vzz1rc] {
    font-size: var(--pt-text-caption);
    line-height: var(--pt-leading-caption);
    color: var(--pt-text-secondary);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .toast-card[b-0552vzz1rc],
    .toast-card__check[b-0552vzz1rc] {
        transition: none;
    }
}
/* /Components/Layout/TopBar.razor.rz.scp.css */
/* Management surface: professional SaaS, 1px border and no illustration.
   Surface and hairline come from the shell-chrome tokens, not from --pt-surface/--pt-line-200
   directly: the bar sits above every screen including the dark kitchen board, and the board
   re-declares those tokens on its own branch (capy-tokens.css, then app.css). */
.topbar[b-tpuslfj9ke] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--pt-space-2);
    height: var(--pt-topbar-height);
    padding: 0 var(--pt-space-8);
    background: var(--pt-chrome-bar);
    border-bottom: 1px solid var(--pt-chrome-line);
}

/* The bell sits at the right; the toggle and brand claim the left. justify-content on .topbar is
   flex-end, so the brand takes the slack with margin-right:auto rather than the bar changing its
   justification and disturbing the >=821px layout. */
.topbar__nav-toggle[b-tpuslfj9ke],
.topbar__brand[b-tpuslfj9ke] { display: none; }

/* Tracks MainLayout's drawer tier exactly — the toggle has to exist wherever the drawer does, or
   a viewport ends up with no rail and nothing to open one with. Was 700px, then 820px; there was
   also a separate 820px block here setting `padding: 0 18px` for the icon-rail tier, superseded
   by this block's own padding when that tier was deleted. */
@media (max-width: 1180px) {
    .topbar[b-tpuslfj9ke] {
        justify-content: flex-start;
        /* Safe-area floor only today — see MainLayout.razor.css's F5 note: env() resolves to 0px
           without viewport-fit=cover, so this is exactly --pt-space-4 on every device now. */
        padding-left: max(var(--pt-space-4), env(safe-area-inset-left));
        padding-right: max(var(--pt-space-4), env(safe-area-inset-right));

        /* Sticky so the nav toggle stays reachable: this bar is the only way to change section on
           a phone, and on a long screen (Reportes, Configuración) it used to scroll away, forcing
           a trip back to the top of the document before you could navigate at all.

           200 is chosen, not arbitrary. It clears every page-level fixed layer (toasts and panels
           top out at 80) and stays below the modal layer at 300, so a dialog still covers the bar
           rather than the bar floating over the dialog. Widening it past 300 is the mistake this
           file's earlier note warned about. */
        position: sticky;
        top: 0;
        z-index: 200;
    }

    /* The open drawer is 320 and its backdrop 310, both above this bar. Raising the bar past them
       (it was 321) kept its close button clickable but painted a full-width bar across the top of
       the 280px drawer — the overlap reported on open and close. The bar has nothing to offer
       while the drawer covers the screen, so it steps aside instead, and the drawer carries its
       own close button (.nav__close) rather than borrowing this one.

       visibility, not display: the bar is in flow and sticky, so removing its box would collapse
       57px of document height and jolt the page under the drawer on every open. visibility keeps
       the box, drops it from the accessibility tree, and makes it untabbable — MainLayout moves
       focus into the drawer on open and TopBar takes it back on close, both after the bar is
       visible again. */
    .page:has(.topbar__nav-toggle[aria-expanded="true"]) .topbar[b-tpuslfj9ke] { visibility: hidden; }

    /* Width-tier base size, keyed on the phone breakpoint like the rest of this block -- not on
       --pt-action-min-height-touch, which the responsive contract test
       (ResponsiveContractTests.TouchSizingKeysOnPointerCapabilityNeverOnViewportWidth) requires to
       stay inside a (hover: none) and (pointer: coarse) query on its own, never combined with a
       width feature. The capability query below bumps this to the touch size, mirroring
       NotificationBell's own .notif__bell base-size-then-touch-bump split in the same shell. */
    .topbar__nav-toggle[b-tpuslfj9ke] {
        display: grid;
        place-items: center;
        width: var(--pt-action-min-height);
        height: var(--pt-action-min-height);
        flex: none;
        border: 0;
        border-radius: var(--pt-radius-md);
        background: transparent;
        color: var(--pt-chrome-strong);
        font-size: 18px;
        cursor: pointer;
    }

    .topbar__nav-toggle:focus-visible[b-tpuslfj9ke] {
        outline: var(--pt-focus-outline);
        outline-offset: 2px;
    }

    .topbar__brand[b-tpuslfj9ke] {
        display: block;
        width: 78px;
        height: auto;
        margin-right: auto;
        image-rendering: pixelated;
    }
}

@media (hover: none) and (pointer: coarse) {
    .topbar__nav-toggle[b-tpuslfj9ke] { width: var(--pt-action-min-height-touch); height: var(--pt-action-min-height-touch); }
}
/* /Components/Pages/Account/AuthPageShell.razor.rz.scp.css */
/* Marca-dress values, local to this component only (see CLAUDE.md's third exception, 2026-08-20).
   Not added to the shared capy-tokens.css: capy-tokens.css's own comment says DURA is
   "deliberately absent from both frontends," and that stays true outside this scoped file. */
.auth-shell[b-2xwnss4v4z] {
    --auth-border: 3px solid var(--pt-ink-900);
    --auth-shadow: 8px 8px 0 var(--pt-ink-900);
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--pt-cream-100);
    overflow-x: hidden;
}

.auth-shell__scene[b-2xwnss4v4z] {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    image-rendering: pixelated;
}

.auth-shell__header[b-2xwnss4v4z] {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
    padding: 20px 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-sizing: border-box;
}

.auth-shell__brand[b-2xwnss4v4z] {
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.auth-shell__wordmark[b-2xwnss4v4z] {
    display: block;
    width: 78px;
    height: auto;
    image-rendering: pixelated;
}

.auth-shell__tagline[b-2xwnss4v4z] {
    font-family: var(--pt-font-mono);
    font-size: 7.5px;
    letter-spacing: .16em;
    color: var(--pt-neutral);
    margin-top: 3px;
}

.auth-shell__main[b-2xwnss4v4z] {
    /* Overrides app.css's unscoped `main { background: var(--bg) }`, meant for the dashboard's
       sidebar layout — it also matches this <main> since Blazor CSS isolation doesn't guard
       against plain-tag-name collisions with global stylesheets. Without this, a near-white box
       covers the Marca-dress background scene. */
    background: transparent;
    position: relative;
    z-index: 2;
    flex: 1;
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
    padding: 8px 28px 64px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.auth-shell__col[b-2xwnss4v4z] {
    width: 100%;
    max-width: 470px;
}

.auth-shell__eyebrow[b-2xwnss4v4z] {
    display: inline-block;
    font-family: var(--pt-font-mono);
    font-size: 9.5px;
    letter-spacing: .14em;
    color: var(--pt-forest-600);
    border: 2px solid var(--pt-forest-600);
    border-radius: var(--pt-radius-pill);
    padding: 7px 13px;
    margin-bottom: 18px;
    background: rgba(253, 250, 242, .7);
}

.auth-shell__title[b-2xwnss4v4z] {
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 40px;
    line-height: 1.04;
    letter-spacing: -.035em;
    margin: 0 0 10px;
}

.auth-shell__subtitle[b-2xwnss4v4z] {
    font-size: 16px;
    line-height: 1.6;
    color: var(--pt-text-secondary);
    margin: 0 0 26px;
    max-width: 36ch;
}

.auth-shell__card[b-2xwnss4v4z] {
    background: var(--pt-cream-50);
    border: var(--auth-border);
    border-radius: 14px;
    box-shadow: var(--auth-shadow);
    /* The horizontal half of the gutter only: the embedded Clerk widget carries the other 14px as
       its own card padding (wwwroot/js/clerk-auth.js). Splitting it lets the widget's panel run
       wider than its text, so nothing sits against a visible edge, while the text still clears
       this card's border by 28px. Changing one side without the other unbalances the form. */
    padding: 28px 14px;
    animation: auth-shell-rise-b-2xwnss4v4z 220ms cubic-bezier(.16, .84, .24, 1) both;
}

.auth-shell__footer[b-2xwnss4v4z] {
    position: relative;
    z-index: 2;
    padding: 0 28px 22px;
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    font-size: 13px;
    color: var(--pt-text-secondary);
}

.auth-shell__foottag[b-2xwnss4v4z] {
    font-family: var(--pt-font-mono);
    font-size: 9px;
    letter-spacing: .14em;
    color: var(--pt-neutral);
}

@keyframes auth-shell-rise-b-2xwnss4v4z {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 860px) {
    .auth-shell__scene[b-2xwnss4v4z] { background-position: 62% bottom; }
    .auth-shell__col[b-2xwnss4v4z] { max-width: none; }

    /* Above this width the column sits on the scene's pale left third and the subtitle reads at
       7.03:1. Below it the scene reframes to 62% and puts the house and the grass directly behind
       the same text: measured on /Account/SignUp at a 492px viewport, the subtitle ran at 4.59:1
       against the average pixel behind it and 2.86:1 against the darkest, so parts of the copy sat
       under the 4.5:1 AA floor. The scrim restores it to about 5.7:1 at the text and fades out
       towards the bottom, where the card already covers the scene and the illustration is the
       point. Values recomputed by sampling the scene if it is ever replaced. */
    .auth-shell__scene[b-2xwnss4v4z]::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg,
            rgba(253, 250, 242, .92) 0%,
            rgba(253, 250, 242, .88) 55%,
            rgba(253, 250, 242, .55) 100%);
    }
}

@media (max-width: 560px) {
    .auth-shell__card[b-2xwnss4v4z] { padding: 26px 10px; }
    .auth-shell__title[b-2xwnss4v4z] { font-size: 30px; }
    /* 28px a side costs 56px of a 390px phone, and every pixel of it comes off the Clerk form's
       usable width once the card's own border and padding are taken too. */
    .auth-shell__header[b-2xwnss4v4z],
    .auth-shell__main[b-2xwnss4v4z] { padding-left: 16px; padding-right: 16px; }
    .auth-shell__footer[b-2xwnss4v4z] { padding-left: 16px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-shell__card[b-2xwnss4v4z] { animation: none; }
}

[b-2xwnss4v4z] .auth-shell__backlink {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--pt-forest-700);
    background: rgba(253, 250, 242, .82);
    border: 2px solid var(--pt-forest-700);
    border-radius: 8px;
    padding: 8px 14px;
    text-decoration: none;
    transition: background 180ms ease;
}

[b-2xwnss4v4z] .auth-shell__backlink:hover {
    background: var(--pt-gold-400);
    color: var(--pt-ink-900);
}

[b-2xwnss4v4z] .auth-shell__footnote {
    background: rgba(253, 250, 242, .72);
    border-radius: 6px;
    padding: 4px 8px;
}

[b-2xwnss4v4z] .auth-shell__footnote a {
    font-weight: 700;
}
/* /Components/Pages/Account/DealsAccessRequestForm.razor.rz.scp.css */
/* The Capy Deals access request drawer. Producto dress: 1px border, diffuse shadow, no illustration.
   Same scrim and entrance as PromotionTypeDialog; the panel is the right-hand sheet the approved
   design draws. */
.deals-access__scrim[b-4wzy6tch6p] {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    justify-content: flex-end;
    background: oklch(from var(--pt-ink-900) l c h / .38);
    animation: deals-access-fade-b-4wzy6tch6p var(--pt-dur-base) var(--pt-ease-soft) both;
}

.deals-access[b-4wzy6tch6p] {
    display: flex;
    flex-direction: column;
    width: min(520px, 100%);
    max-height: 100dvh;
    background: var(--pt-surface);
    border-left: 1px solid var(--pt-line-200);
    box-shadow: var(--pt-shadow-panel);
    animation: deals-access-in-b-4wzy6tch6p var(--pt-dur-base) var(--pt-ease-soft) both;
}

.deals-access:focus[b-4wzy6tch6p] { outline: none; }

.deals-access__head[b-4wzy6tch6p] {
    display: flex;
    align-items: flex-start;
    gap: var(--pt-space-3);
    padding: 22px 24px 14px;
    border-bottom: var(--pt-border-row);
}

.deals-access__head > div[b-4wzy6tch6p] { flex: 1; min-width: 0; }

.deals-access__head h2[b-4wzy6tch6p] {
    margin: 0;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 20px;
    font-weight: 700;
}

.deals-access__head p[b-4wzy6tch6p] {
    margin: 2px 0 0;
    color: var(--pt-text-muted);
    font-size: 13.5px;
    overflow-wrap: anywhere;
}

.deals-access__head strong[b-4wzy6tch6p] { color: var(--pt-ink-900); }

.deals-access__close[b-4wzy6tch6p] {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--pt-action-min-height);
    height: var(--pt-action-min-height);
    border: 0;
    border-radius: var(--pt-radius-md);
    background: transparent;
    color: var(--pt-text-muted);
    cursor: pointer;
}

.deals-access__close:focus-visible[b-4wzy6tch6p] { outline: none; box-shadow: var(--pt-focus-ring); }

.deals-access__body[b-4wzy6tch6p] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--pt-space-4);
    overflow-y: auto;
    padding: 18px 24px;
}

/* The design draws these two in the pixel face; the management app takes the mono face instead (the
   "PRÓXIMAMENTE" chip on this same screen is the precedent), because pixel art stays out of Producto. */
.deals-access__section[b-4wzy6tch6p] {
    color: var(--pt-forest-600);
    font-family: var(--pt-font-mono);
    font-size: 10.5px;
    letter-spacing: .12em;
}

.deals-access__section--next[b-4wzy6tch6p] { margin-top: 6px; }

.deals-access__choices[b-4wzy6tch6p] { min-width: 0; margin: 0; padding: 0; border: 0; }
.deals-access__choices legend[b-4wzy6tch6p] { padding: 0; margin-bottom: 6px; }

.deals-access__choice-grid[b-4wzy6tch6p] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pt-space-2);
}

.deals-access__choice-grid--three[b-4wzy6tch6p] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.deals-access__choice-grid .capy-radio-card[b-4wzy6tch6p] { position: relative; cursor: pointer; padding: var(--pt-space-2) var(--pt-space-3); }
.deals-access__choice-grid .capy-radio-card__title[b-4wzy6tch6p] { white-space: normal; font-size: 13.5px; }

.deals-access__foot[b-4wzy6tch6p] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--pt-space-2);
    padding: 14px 24px;
    border-top: var(--pt-border-row);
}

.deals-access__summary[b-4wzy6tch6p] { flex-basis: 100%; margin: 0; }

@keyframes deals-access-fade-b-4wzy6tch6p { from { opacity: 0; } to { opacity: 1; } }
@keyframes deals-access-in-b-4wzy6tch6p { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .deals-access__scrim[b-4wzy6tch6p],
    .deals-access[b-4wzy6tch6p] { animation: none; }
}

@media (max-width: 560px) {
    .deals-access__choice-grid--three[b-4wzy6tch6p] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Pages/Account/LegalConsent.razor.rz.scp.css */
/* Producto dress: 1px border, diffuse shadow, brand present only through colour and typography.
   No pixel art and no mascot — see CLAUDE.md's three-surface table. */
.legal-consent[b-wa0d2l4ok9] {
    min-height: 100vh;
    background: var(--pt-app-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    box-sizing: border-box;
}

.legal-consent__card[b-wa0d2l4ok9] {
    width: 100%;
    max-width: 520px;
    background: var(--pt-surface);
    border: 1px solid var(--pt-cream-300);
    border-radius: var(--pt-radius-lg);
    box-shadow: 0 1px 3px rgba(22, 33, 26, .06), 0 8px 24px rgba(22, 33, 26, .06);
    padding: 32px 30px;
    box-sizing: border-box;
}

.legal-consent__eyebrow[b-wa0d2l4ok9] {
    display: block;
    font-family: var(--pt-font-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pt-text-meta);
    margin-bottom: 10px;
}

.legal-consent__card h1[b-wa0d2l4ok9] {
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -.02em;
    margin: 0 0 10px;
    color: var(--pt-text-strong);
}

.legal-consent__lead[b-wa0d2l4ok9] {
    font-size: 15px;
    line-height: 1.6;
    color: var(--pt-text-secondary);
    margin: 0 0 24px;
}

.legal-consent__check[b-wa0d2l4ok9] {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.55;
    color: var(--pt-text-strong);
    border: 1px solid var(--pt-cream-300);
    border-radius: var(--pt-radius-lg);
    padding: 14px 16px;
    cursor: pointer;
}

.legal-consent__check input[b-wa0d2l4ok9] {
    flex: none;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    accent-color: var(--pt-forest-700);
    cursor: pointer;
}

.legal-consent__check a[b-wa0d2l4ok9] {
    font-weight: 700;
    color: var(--pt-forest-700);
}

.legal-consent__error[b-wa0d2l4ok9] {
    margin: 12px 0 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--pt-on-danger);
}

.legal-consent__actions[b-wa0d2l4ok9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
}

.legal-consent__version[b-wa0d2l4ok9] {
    font-size: 12px;
    color: var(--pt-text-meta);
}

.legal-consent__decline[b-wa0d2l4ok9] {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--pt-row-divider);
}

@media (max-width: 560px) {
    .legal-consent__card[b-wa0d2l4ok9] { padding: 26px 20px; }
    .legal-consent__card h1[b-wa0d2l4ok9] { font-size: 22px; }
}
/* /Components/Pages/Account/Login.razor.rz.scp.css */
/* Shown above the Clerk widget after a refused sign-in (?error=signin). Marca dress, like the
   rest of this page: 2px border, matching the eyebrow chip in AuthPageShell. */
.login-failure[b-stx2jfxpbz] {
    margin: 12px 14px 0;
    padding: 10px 12px;
    font-family: var(--pt-font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--pt-on-danger);
    background: var(--pt-danger-surface);
    border: 2px solid var(--pt-danger);
    border-radius: var(--pt-radius-md);
}
/* /Components/Pages/Account/RestaurantAccess.razor.rz.scp.css */
/* "Mis restaurantes" — Producto dress. Every value below comes from the declared --pt-* tokens;
   the literals left are geometry the token set does not name (mark size, chip padding), matching
   Team.razor.css's own precedent. */

/* ── Page header ────────────────────────────────────────────── */
.my-restaurants__header[b-8k64wb1sqt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pt-space-4);
    margin: -22px calc(-1 * var(--pt-content-pad)) 26px;
    padding: 18px var(--pt-content-pad);
    background: var(--pt-forest-900);
}

.my-restaurants__header h1[b-8k64wb1sqt] {
    margin: 0;
    color: var(--pt-cream-50);
    font-family: var(--pt-font-display);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: var(--pt-tracking-display-l);
}

.my-restaurants__header p[b-8k64wb1sqt] {
    margin: 3px 0 0;
    color: var(--pt-sage-300);
    font-size: 14px;
}

.my-restaurants__header-actions[b-8k64wb1sqt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pt-space-3);
    margin-left: auto;
}

.my-restaurants__signout .capy-form-action[b-8k64wb1sqt] {
    border-color: var(--pt-sage-300);
    background: transparent;
    color: var(--pt-cream-50);
}

.my-restaurants__signout .capy-form-action:hover[b-8k64wb1sqt] {
    border-color: var(--pt-cream-50);
    background: var(--pt-forest-750);
}

@media (max-width: 600px) {
    .my-restaurants__header > div[b-8k64wb1sqt],
    .my-restaurants__signout[b-8k64wb1sqt],
    .my-restaurants__signout .capy-form-action[b-8k64wb1sqt] { width: 100%; }

    .my-restaurants__header-actions[b-8k64wb1sqt] { margin-left: 0; }
}

.my-restaurants__loading[b-8k64wb1sqt] { color: var(--pt-text-muted); }

/* ── Section headings ───────────────────────────────────────── */
.my-restaurants__section[b-8k64wb1sqt] { margin-bottom: 26px; }

.my-restaurants__section-head[b-8k64wb1sqt] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: var(--pt-space-3);
}

.my-restaurants__section-head h2[b-8k64wb1sqt] {
    margin: 0;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: var(--pt-tracking-title);
}

.my-restaurants__count[b-8k64wb1sqt] { color: var(--pt-text-faint); font-size: 12.5px; }

/* ── The one grid ───────────────────────────────────────────────
   Six tracks so restaurant cards (span 2 → three per row) and the two wide cards (span 3 → two per
   row) share a single grid. The headings are full-width children rather than section wrappers,
   which is what lets the merged single-restaurant layout drop them without a second markup path. */
.my-restaurants__grid[b-8k64wb1sqt] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--pt-space-4);
    align-items: start;
}

.my-restaurants__grid-head[b-8k64wb1sqt] { grid-column: 1 / -1; margin-bottom: 0; }
.my-restaurants__grid-head + .my-restaurants__card[b-8k64wb1sqt] { margin-top: 0; }

.my-restaurants__card[b-8k64wb1sqt] { grid-column: span 2; }
.my-restaurants__card--wide[b-8k64wb1sqt] { grid-column: span 3; }
.my-restaurants__grid--merged .my-restaurants__card--wide[b-8k64wb1sqt] { grid-column: span 2; }

@media (max-width: 1180px) {
    .my-restaurants__grid[b-8k64wb1sqt] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .my-restaurants__card--wide[b-8k64wb1sqt],
    .my-restaurants__grid--merged .my-restaurants__card--wide[b-8k64wb1sqt] { grid-column: span 2; }
}

@media (max-width: 760px) {
    .my-restaurants__grid[b-8k64wb1sqt] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .my-restaurants__card[b-8k64wb1sqt],
    .my-restaurants__card--wide[b-8k64wb1sqt],
    .my-restaurants__grid--merged .my-restaurants__card--wide[b-8k64wb1sqt] { grid-column: span 2; }
}

/* ── Card ───────────────────────────────────────────────────── */
.my-restaurants__card[b-8k64wb1sqt] {
    box-sizing: border-box;
    padding: 18px 20px;
    border: var(--pt-border-card);
    border-color: var(--pt-line-200);
    border-radius: var(--pt-radius-lg);
    background: var(--pt-surface);
    box-shadow: var(--pt-shadow-card);
    transition: border-color var(--pt-dur-color) var(--pt-ease-soft),
                background var(--pt-dur-color) var(--pt-ease-soft);
}

/* Same "selected" pair capy-forms.css already uses for a checked radio card, so "the one you are
   in" reads the same way everywhere in the dashboard. */
.my-restaurants__card--current[b-8k64wb1sqt] {
    border-color: var(--pt-olive-500);
    background: var(--pt-radio-selected);
}

/* The placeholder card is the only dashed border on the screen: it reads as a slot, not a thing
   that exists yet. Same 1px dashed --pt-radio-mark-border the handoff uses for its drop zone. */
.my-restaurants__card--soon[b-8k64wb1sqt] {
    border: 1px dashed var(--pt-radio-mark-border);
    background: var(--pt-app-bg);
    box-shadow: none;
}

.my-restaurants__card-head[b-8k64wb1sqt] { display: flex; align-items: flex-start; gap: 13px; }

.my-restaurants__card-title[b-8k64wb1sqt] { flex: 1; min-width: 0; }

.my-restaurants__name-row[b-8k64wb1sqt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
}

.my-restaurants__name[b-8k64wb1sqt] {
    display: block;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.my-restaurants__meta[b-8k64wb1sqt] {
    display: block;
    margin-top: 2px;
    color: var(--pt-text-muted);
    font-size: 12.5px;
}

.my-restaurants__blurb[b-8k64wb1sqt] {
    display: block;
    max-width: 46ch;
    margin-top: 5px;
    color: var(--pt-text-muted);
    font-size: var(--pt-text-caption);
    line-height: 1.55;
}

.my-restaurants__mark[b-8k64wb1sqt] {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    font-family: var(--pt-font-display);
    font-size: 15px;
    font-weight: 700;
}

.my-restaurants__icon[b-8k64wb1sqt] {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--pt-available-tint);
    color: var(--pt-forest-600);
    font-size: 18px;
}

.my-restaurants__icon--muted[b-8k64wb1sqt] {
    background: var(--pt-cream-200);
    color: var(--pt-unavailable-text);
}

/* Not gold: the design system reserves gold for what can be touched, and this label marks the one
   card that cannot be. */
.my-restaurants__soon[b-8k64wb1sqt] {
    padding: 4px 8px;
    border: 1px solid var(--pt-line-200);
    border-radius: var(--pt-radius-pill);
    color: var(--pt-text-faint);
    font-family: var(--pt-font-mono);
    font-size: 8.5px;
    letter-spacing: .12em;
}

/* ── Role chip — the five colours Equipo's roster already assigns ── */
.my-restaurants__role[b-8k64wb1sqt] {
    flex: none;
    padding: 4px 8px;
    border-radius: var(--pt-radius-sm);
    font-size: 11px;
    font-weight: 800;
}

.my-restaurants__role--owner[b-8k64wb1sqt] { color: var(--pt-on-warning); background: oklch(from var(--pt-warning) l c h / .16); }
.my-restaurants__role--shift-manager[b-8k64wb1sqt] { color: var(--pt-on-info); background: oklch(from var(--pt-info) l c h / .14); }
.my-restaurants__role--waiter[b-8k64wb1sqt] { color: var(--pt-forest-600); background: var(--pt-available-tint); }
.my-restaurants__role--kitchen[b-8k64wb1sqt] { color: var(--pt-unavailable-text); background: var(--pt-cream-200); }
.my-restaurants__role--reception[b-8k64wb1sqt] { color: var(--pt-on-danger); background: oklch(from var(--pt-danger) l c h / .12); }

/* ── Publicar en Capy Deals — request status chip ───────────────
   The same chip anatomy as the role chip, in the info and danger families the roster already uses. */
.my-restaurants__status[b-8k64wb1sqt] {
    flex: none;
    padding: 4px 8px;
    border-radius: var(--pt-radius-sm);
    font-size: 11px;
    font-weight: 800;
}

.my-restaurants__status--pending[b-8k64wb1sqt] { color: var(--pt-on-info); background: oklch(from var(--pt-info) l c h / .14); }
.my-restaurants__status--rejected[b-8k64wb1sqt] { color: var(--pt-on-danger); background: oklch(from var(--pt-danger) l c h / .12); }

/* The card the design adds eases in once, like a row appearing; never again on a state change. */
.my-restaurants__card--new[b-8k64wb1sqt] { animation: my-restaurants-in-b-8k64wb1sqt var(--pt-dur-base) var(--pt-ease-soft) both; }

@keyframes my-restaurants-in-b-8k64wb1sqt {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .my-restaurants__card--new[b-8k64wb1sqt] { animation: none; }
}

/* ── Card footer ────────────────────────────────────────────── */
.my-restaurants__card-foot[b-8k64wb1sqt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-top: var(--pt-space-3);
    padding-top: var(--pt-space-3);
    border-top: var(--pt-border-row);
}

.my-restaurants__card--soon .my-restaurants__card-foot[b-8k64wb1sqt] { border-top-color: transparent; }

.my-restaurants__card-foot form[b-8k64wb1sqt] { margin: 0; }

.my-restaurants__last-used[b-8k64wb1sqt] { color: var(--pt-text-faint); font-size: 12px; }

.my-restaurants__leave[b-8k64wb1sqt] {
    margin-left: auto;
    padding: 6px 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--pt-danger);
    font: 700 12.5px var(--pt-font-body);
    cursor: pointer;
    transition: background var(--pt-dur-hover) var(--pt-ease-soft);
}

.my-restaurants__leave:hover:not(:disabled)[b-8k64wb1sqt] { background: oklch(from var(--pt-danger) l c h / .08); }
.my-restaurants__leave:disabled[b-8k64wb1sqt] { color: var(--pt-text-faint); cursor: not-allowed; }
.my-restaurants__leave:focus-visible[b-8k64wb1sqt] { outline: none; box-shadow: var(--pt-focus-ring); }

.my-restaurants__departure[b-8k64wb1sqt] {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: var(--pt-space-3) 0 0;
    color: var(--pt-on-warning);
    font-size: 12px;
    line-height: 1.5;
}

/* ── Pending invitations ────────────────────────────────────── */
.my-restaurants__invitations[b-8k64wb1sqt] { display: grid; gap: var(--pt-space-3); }

.my-restaurants__invitation[b-8k64wb1sqt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pt-space-4);
    padding: 18px 20px;
    border: 1px solid var(--pt-occupied-border);
    border-radius: var(--pt-radius-lg);
    background: var(--pt-occupied-tint);
}

.my-restaurants__invitation-body[b-8k64wb1sqt] { flex: 1; min-width: 200px; }
.my-restaurants__invitation-actions[b-8k64wb1sqt] { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }

/* ── Notices ────────────────────────────────────────────────── */
.my-restaurants__notice[b-8k64wb1sqt],
.my-restaurants__empty[b-8k64wb1sqt] {
    box-sizing: border-box;
    padding: 22px 24px;
    border: var(--pt-border-card);
    border-color: var(--pt-line-200);
    border-radius: var(--pt-radius-lg);
    background: var(--pt-surface);
}

.my-restaurants__empty[b-8k64wb1sqt] { grid-column: 1 / -1; box-shadow: var(--pt-shadow-card); }

.my-restaurants__notice h2[b-8k64wb1sqt],
.my-restaurants__empty h2[b-8k64wb1sqt] {
    margin: 0 0 var(--pt-space-2);
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 17px;
    font-weight: 700;
}

.my-restaurants__notice p[b-8k64wb1sqt],
.my-restaurants__empty p[b-8k64wb1sqt] {
    margin: 0 0 var(--pt-space-4);
    max-width: 62ch;
    color: var(--pt-text-muted);
    font-size: 14px;
}

.my-restaurants__empty p[b-8k64wb1sqt] { margin-bottom: 0; }

.my-restaurants__alert[b-8k64wb1sqt] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: var(--pt-space-4);
    padding: 11px 13px;
    border: 1px solid oklch(from var(--pt-danger) l c h / .3);
    border-radius: 9px;
    background: var(--pt-danger-summary);
    color: var(--pt-danger);
    font-size: 12.5px;
    font-weight: 700;
}

/* ── The embedded code form ─────────────────────────────────────
   ::deep because JoinTeamCodeForm is a child component: its elements never carry this file's scope
   attribute, so a plain descendant selector would silently match nothing. */
.my-restaurants__join[b-8k64wb1sqt] { margin-top: var(--pt-space-4); }

.my-restaurants__join[b-8k64wb1sqt]  .field { margin-bottom: var(--pt-space-3); }

/* Eight characters read as a code, not as a word. */
.my-restaurants__join[b-8k64wb1sqt]  .join-code__control {
    font-weight: 700;
    letter-spacing: .14em;
}

/* ── Ajustes ───────────────────────────────────────────────────
   The header's gear, and the panel it opens. Producto dress: 1px border, diffuse shadow, cream
   surface — the panel sits on the forest band but is not part of it, so it takes the page's
   surface rather than the band's.

   A <details> gets display: list-item on its summary, which beats .capy-form-action's inline-flex
   at equal specificity; the marker and the display are the only two things that need restating. */
.my-restaurants__settings[b-8k64wb1sqt] { position: relative; }

.my-restaurants__settings > summary[b-8k64wb1sqt] {
    display: inline-flex;
    width: fit-content;
    list-style: none;
    background: transparent;
    border-color: var(--pt-sage-300);
    color: var(--pt-cream-50);
    font-size: 15px;
}

.my-restaurants__settings > summary[b-8k64wb1sqt]::-webkit-details-marker { display: none; }

.my-restaurants__settings > summary:focus-visible[b-8k64wb1sqt] { outline: none; box-shadow: var(--pt-focus-ring); }

.my-restaurants__settings[open] > summary[b-8k64wb1sqt] { background: var(--pt-forest-700); }

.my-restaurants__settings-panel[b-8k64wb1sqt] {
    position: absolute;
    top: calc(100% + var(--pt-space-2));
    right: 0;
    z-index: 20;
    width: min(360px, calc(100vw - 2 * var(--pt-content-pad)));
    padding: var(--pt-space-4);
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-md);
    background: var(--pt-surface);
    box-shadow: var(--pt-shadow-card);
    color: var(--pt-text-secondary);
    text-align: left;
}

.my-restaurants__settings-block + .my-restaurants__settings-block[b-8k64wb1sqt] {
    margin-top: var(--pt-space-4);
    padding-top: var(--pt-space-4);
    border-top: var(--pt-border-card);
}

.my-restaurants__settings-block h2[b-8k64wb1sqt] {
    margin: 0 0 var(--pt-space-2);
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: var(--pt-tracking-title);
}

.my-restaurants__settings-block p[b-8k64wb1sqt] {
    margin: 0 0 var(--pt-space-2);
    font-size: var(--pt-text-caption);
    line-height: 1.55;
}

.my-restaurants__settings-block--danger h2[b-8k64wb1sqt] { color: var(--pt-danger); }

/* The langpicker is declared whole in capy-forms.css and needs nothing from this file: at 132px
   an option the pair is 270px, inside the panel's 328px of content width. It used to sit directly
   in the forest band, which is why a compact 34px override lived here; that block is gone with the
   location, because the panel is still INSIDE .my-restaurants__header and every one of those rules
   still matched — 34px options with "Español" overflowing them, and band colours on a cream card. */

/* The delete confirmation stays collapsed behind its own danger button, so the panel opens on a
   heading and one control rather than on a text field asking for an exact string. Same marker and
   display restatement the Ajustes summary needs, for the same reason. */
.my-restaurants__delete > summary[b-8k64wb1sqt] {
    display: inline-flex;
    width: fit-content;
    list-style: none;
}

.my-restaurants__delete > summary[b-8k64wb1sqt]::-webkit-details-marker { display: none; }

.my-restaurants__delete > summary:focus-visible[b-8k64wb1sqt] { outline: none; box-shadow: var(--pt-focus-ring); }

.my-restaurants__delete[open] > summary[b-8k64wb1sqt] { margin-bottom: var(--pt-space-3); }

.my-restaurants__settings-block .field[b-8k64wb1sqt] { margin-bottom: var(--pt-space-3); }

/* The confirm goes solid danger once the typed target matches, and stays visibly dormant until it
   does — the same two states, off the same token, that Settings.razor.css gives its own
   settings-modal__confirm. Not .capy-form-action--danger: that one is red-on-surface, which is
   right for the trigger that OPENS this panel but reads as a second, equal choice next to it here.
   :disabled:hover is in the selector to neutralize the shared action button's hover lift. */
.my-restaurants__delete-confirm[b-8k64wb1sqt] {
    border-color: var(--pt-danger);
    background: var(--pt-danger);
    color: var(--pt-cream-50);
}

.my-restaurants__delete-confirm:disabled[b-8k64wb1sqt],
.my-restaurants__delete-confirm:disabled:hover[b-8k64wb1sqt] {
    border-color: oklch(from var(--pt-danger) l c h / .38);
    background: oklch(from var(--pt-danger) l c h / .18);
    color: oklch(from var(--pt-danger) l c h / .72);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ── Cambio de idioma del panel: esqueleto ────────────────────────────────────────────────────
   The same treatment as Settings.razor.css (read its block for the reasoning): while the language
   change posts through /Account/SetLanguage, every localized string shimmers in place. Structure,
   user data (restaurant names, initials) and the language picker itself never shimmer — the thumb
   IS the picker's animation, and skeletoning it would hide the one control the person just used.
   ::deep reaches the JoinTeamCodeForm child component's labels and button. */
.lang-swapping .my-restaurants__header h1[b-8k64wb1sqt],
.lang-swapping .my-restaurants__header p[b-8k64wb1sqt],
.lang-swapping .my-restaurants__section-head h2[b-8k64wb1sqt],
.lang-swapping .my-restaurants__count[b-8k64wb1sqt],
.lang-swapping .my-restaurants__meta[b-8k64wb1sqt],
.lang-swapping .my-restaurants__role[b-8k64wb1sqt],
.lang-swapping .my-restaurants__soon[b-8k64wb1sqt],
.lang-swapping .my-restaurants__status[b-8k64wb1sqt],
.lang-swapping .my-restaurants__blurb[b-8k64wb1sqt],
.lang-swapping .my-restaurants__card--wide .my-restaurants__name[b-8k64wb1sqt],
.lang-swapping .my-restaurants__last-used[b-8k64wb1sqt],
.lang-swapping .my-restaurants__leave[b-8k64wb1sqt],
.lang-swapping .my-restaurants__departure[b-8k64wb1sqt],
.lang-swapping .my-restaurants__notice h2[b-8k64wb1sqt],
.lang-swapping .my-restaurants__notice p[b-8k64wb1sqt],
.lang-swapping .my-restaurants__empty h2[b-8k64wb1sqt],
.lang-swapping .my-restaurants__empty p[b-8k64wb1sqt],
.lang-swapping .my-restaurants__alert span[b-8k64wb1sqt],
.lang-swapping .my-restaurants__loading[b-8k64wb1sqt],
.lang-swapping .my-restaurants__settings-block h2[b-8k64wb1sqt],
.lang-swapping .my-restaurants__settings-block p[b-8k64wb1sqt],
.lang-swapping[b-8k64wb1sqt]  .field__label,
.lang-swapping[b-8k64wb1sqt]  .field__help,
.lang-swapping[b-8k64wb1sqt]  .field-summary {
    width: fit-content;
    border-radius: 6px;
    color: transparent;
    background-image: var(--pt-shimmer);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: var(--pt-shimmer-animation);
}

/* The header sits on forest, where the dark ramp is invisible. */
.lang-swapping .my-restaurants__header h1[b-8k64wb1sqt],
.lang-swapping .my-restaurants__header p[b-8k64wb1sqt] {
    background-image: var(--pt-shimmer-inverse);
}

.lang-swapping .my-restaurants__departure > i[b-8k64wb1sqt],
.lang-swapping[b-8k64wb1sqt]  .field__label > *,
.lang-swapping[b-8k64wb1sqt]  .field-summary > * {
    visibility: hidden;
}

/* Buttons keep their box and shimmer a bar where the label was. */
.lang-swapping[b-8k64wb1sqt]  .capy-form-action {
    position: relative;
    color: transparent;
}

.lang-swapping[b-8k64wb1sqt]  .capy-form-action > i {
    visibility: hidden;
}

.lang-swapping[b-8k64wb1sqt]  .capy-form-action::before {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--pt-space-3);
    right: var(--pt-space-3);
    height: 9px;
    transform: translateY(-50%);
    border-radius: 6px;
    background-image: var(--pt-shimmer);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: var(--pt-shimmer-animation);
}

.lang-swapping[b-8k64wb1sqt]  .capy-form-action--primary::before,
.lang-swapping .my-restaurants__signout .capy-form-action[b-8k64wb1sqt]::before {
    background-image: var(--pt-shimmer-inverse);
}

/* The gear carries no localized visible text — only an aria-label — so it keeps its icon and does
   not grow a shimmer bar. It is also the control the open panel is anchored to: skeletoning it
   would make the panel look detached from its trigger for the length of the swap. */
.lang-swapping .my-restaurants__settings-trigger[b-8k64wb1sqt]::before { content: none; }
.lang-swapping .my-restaurants__settings-trigger > i[b-8k64wb1sqt] { visibility: visible; }
/* The colour has to come back too: the icon is a glyph, so the button's own `color: transparent`
   would leave the gear's box sitting empty even with visibility restored. */
.lang-swapping .my-restaurants__settings-trigger[b-8k64wb1sqt] { color: var(--pt-cream-50); }

/* The join form's submit starts disabled: JoinTeamCodeForm.razor.css re-colours its label at equal
   specificity and later in the bundle, and it sits on cream, where the inverse ramp is invisible. */
.lang-swapping[b-8k64wb1sqt]  .capy-form-action:disabled {
    color: transparent;
}

.lang-swapping[b-8k64wb1sqt]  .capy-form-action--primary:disabled::before {
    background-image: var(--pt-shimmer);
}

/* The language-swap skeleton keeps its bars (they are the message) but stops travelling. The
   --pt-shimmer-animation token already goes to none under this query; stating it here keeps the
   file correct on its own. Colour transitions stay, per the policy in capy-tokens.css. */
@media (prefers-reduced-motion: reduce) {
    .lang-swapping *[b-8k64wb1sqt],
    .lang-swapping[b-8k64wb1sqt]  *,
    .lang-swapping[b-8k64wb1sqt]  .capy-form-action::before {
        animation: none;
    }
}
/* /Components/Pages/Admin/BillingAdmin.razor.rz.scp.css */
.bl-stats[b-wu1a49uaml] { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--pt-space-3); margin-bottom: var(--pt-space-4); }
.bl-stats .da-stat span[b-wu1a49uaml] { display: block; color: var(--pt-text-muted); font-size: 12.5px; }

.bl-filters[b-wu1a49uaml] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--pt-space-3); padding: 14px 16px; margin-bottom: var(--pt-space-3); overflow: visible; }
.bl-field[b-wu1a49uaml] { display: grid; gap: 4px; flex: 1 1 150px; }
.bl-field--wide[b-wu1a49uaml] { flex: 2 1 220px; }
.bl-label[b-wu1a49uaml] { color: var(--pt-text-secondary); font: 700 12.5px var(--pt-font-body); }

.bl-tabs[b-wu1a49uaml] { display: flex; flex-wrap: wrap; gap: var(--pt-space-2); margin-bottom: var(--pt-space-3); }
.bl-tab[b-wu1a49uaml] { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-pill); background: var(--pt-surface);
    color: var(--pt-text-secondary); font: 700 13.5px var(--pt-font-body); cursor: pointer; transition: background var(--pt-dur-quick) var(--pt-ease-soft); }
.bl-tab[aria-pressed="true"][b-wu1a49uaml] { background: var(--pt-forest-700); border-color: var(--pt-forest-700); color: var(--pt-cream-50); }
.bl-tab:focus-visible[b-wu1a49uaml] { outline: none; box-shadow: var(--pt-focus-ring); }

.bl-rowlink[b-wu1a49uaml] { color: var(--pt-ink-900); font-weight: 800; text-decoration: none; }
.bl-rowlink:hover[b-wu1a49uaml] { text-decoration: underline; }
.bl-rowlink:focus-visible[b-wu1a49uaml] { outline: 2px solid var(--pt-forest-600); outline-offset: 2px; border-radius: 4px; }
.bl-strong[b-wu1a49uaml] { font-weight: 800; color: var(--pt-ink-900); }
.bl-danger[b-wu1a49uaml] { color: var(--pt-danger); }

.bl-pager[b-wu1a49uaml] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--pt-line-100); color: var(--pt-text-muted); font-size: 13px; }
.bl-pager__buttons[b-wu1a49uaml] { margin-left: auto; display: flex; gap: 6px; }
.bl-error[b-wu1a49uaml] { display: flex; align-items: center; gap: var(--pt-space-3); flex-wrap: wrap; margin: 0 0 var(--pt-space-3); }
/* /Components/Pages/Admin/BillingDialogFrame.razor.rz.scp.css */
/* No `display` on .bdf itself: a closed native <dialog> must stay display:none (see ConfirmDialog.razor.css). */
.bdf[b-3kkz5g7l75] { flex-direction: column; width: min(540px, 94vw); max-height: calc(100dvh - 60px); padding: 0; overflow: hidden;
    border: 1px solid var(--pt-radio-card-border); border-radius: 14px; background: var(--pt-surface); color: var(--pt-ink-900);
    box-shadow: var(--pt-shadow-panel); font-family: var(--pt-font-body); }
.bdf[open][b-3kkz5g7l75] { display: flex; animation: bdf-rise-b-3kkz5g7l75 var(--pt-dur-slide) var(--pt-ease-soft); }
.bdf[b-3kkz5g7l75]::backdrop { background: oklch(from var(--pt-ink-900) l c h / .55); }
.bdf--drawer[b-3kkz5g7l75] { width: min(460px, 100vw); height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; border-radius: 14px 0 0 14px; }
.bdf--drawer[open][b-3kkz5g7l75] { animation-name: bdf-slide-b-3kkz5g7l75; }
@keyframes bdf-rise-b-3kkz5g7l75 { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bdf-slide-b-3kkz5g7l75 { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .bdf[open][b-3kkz5g7l75] { animation: none; } }

/* 20px 24px: there is no --pt-space-5, so the design's 20px is space-4 + space-1. */
.bdf__head[b-3kkz5g7l75] { display: flex; justify-content: space-between; align-items: center; gap: var(--pt-space-3); padding: calc(var(--pt-space-4) + var(--pt-space-1)) var(--pt-space-6); border-bottom: var(--pt-border-card); }
.bdf__head h2[b-3kkz5g7l75] { margin: 0; font-family: var(--pt-font-display); font-size: 20px; color: var(--pt-ink-900); overflow-wrap: anywhere; }
.bdf__head p[b-3kkz5g7l75] { margin: 2px 0 0; color: var(--pt-text-muted); font-size: 13.5px; }
.bdf__close[b-3kkz5g7l75] { width: var(--pt-action-min-height); height: var(--pt-action-min-height); flex: none; border: 0; background: transparent; border-radius: var(--pt-radius-md); color: var(--pt-text-secondary); cursor: pointer; }
.bdf__close:focus-visible[b-3kkz5g7l75] { outline: 2px solid var(--pt-forest-600); outline-offset: 2px; }
.bdf__body[b-3kkz5g7l75] { flex: 1; display: grid; align-content: start; gap: var(--pt-space-3); padding: var(--pt-space-4) var(--pt-space-6); overflow-y: auto; font-size: 14px; }
.bdf__foot[b-3kkz5g7l75] { display: flex; justify-content: flex-end; gap: var(--pt-space-2); padding: 14px var(--pt-space-6); border-top: var(--pt-border-card); background: var(--pt-app-bg); }

/* Pieces the owners put inside the body. */
.bdf[b-3kkz5g7l75]  .field { margin-bottom: 0; }
.bdf[b-3kkz5g7l75]  .bdf-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--pt-space-3); }
.bdf[b-3kkz5g7l75]  .bdf-money { display: flex; align-items: center; min-height: 44px; border: var(--pt-border-card); border-radius: var(--pt-radius-md); background: var(--pt-cream-50); overflow: hidden; }
.bdf[b-3kkz5g7l75]  .bdf-money > span { padding: 0 var(--pt-space-3); color: var(--pt-text-secondary); font: 800 13px var(--pt-font-body); background: var(--pt-line-100); align-self: stretch; display: flex; align-items: center; }
.bdf[b-3kkz5g7l75]  .bdf-money > input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 9px var(--pt-space-3); font: 14px var(--pt-font-body); color: var(--pt-ink-900); font-variant-numeric: tabular-nums; }
.bdf[b-3kkz5g7l75]  .bdf-money > input:focus { outline: 0; }
.bdf[b-3kkz5g7l75]  .bdf-money:focus-within { border-color: var(--pt-forest-600); box-shadow: var(--pt-focus-ring); }
.bdf[b-3kkz5g7l75]  .bdf-money--error { border-color: var(--pt-danger); background: var(--pt-danger-surface); }
.bdf[b-3kkz5g7l75]  .bdf-note { padding: 10px 12px; border: var(--pt-border-card); border-radius: var(--pt-radius-md); background: var(--pt-line-100); color: var(--pt-text-secondary); font-size: 13px; }
.bdf[b-3kkz5g7l75]  .bdf-note--warn { border-color: var(--pt-occupied-border); background: var(--pt-occupied-tint); color: var(--pt-occupied-fg); font-weight: 700; }
.bdf[b-3kkz5g7l75]  .bdf-note--danger { border-color: oklch(from var(--pt-danger) l c h / .3); background: var(--pt-danger-summary); color: var(--pt-danger); font-weight: 700; }
.bdf[b-3kkz5g7l75]  .bdf-target { display: grid; gap: 2px; padding: 10px 12px; border: var(--pt-border-card); border-radius: var(--pt-radius-md); background: var(--pt-app-bg); font-size: 13.5px; }
.bdf[b-3kkz5g7l75]  .bdf-target span { color: var(--pt-text-secondary); font-size: 12.5px; }
.bdf[b-3kkz5g7l75]  .bdf-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bdf[b-3kkz5g7l75]  .bdf-seg button { min-height: 40px; border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-md); background: var(--pt-surface); color: var(--pt-text-secondary); font: 800 13px var(--pt-font-body); cursor: pointer; }
.bdf[b-3kkz5g7l75]  .bdf-seg button[aria-pressed="true"] { background: var(--pt-available-tint); border-color: var(--pt-forest-600); color: var(--pt-on-success); }
.bdf[b-3kkz5g7l75]  .bdf-seg button:focus-visible { outline: 2px solid var(--pt-forest-600); outline-offset: 2px; }
.bdf[b-3kkz5g7l75]  .bdf-alloc { border: var(--pt-border-card); border-radius: var(--pt-radius-md); overflow: hidden; }
.bdf[b-3kkz5g7l75]  .bdf-alloc header { padding: 8px 12px; background: var(--pt-app-bg); border-bottom: var(--pt-border-card); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--pt-text-secondary); }
.bdf[b-3kkz5g7l75]  .bdf-alloc table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bdf[b-3kkz5g7l75]  .bdf-alloc td { padding: 8px 12px; border-bottom: 1px solid var(--pt-line-100); }
.bdf[b-3kkz5g7l75]  .bdf-alloc tr:last-child td { border-bottom: 0; }
.bdf[b-3kkz5g7l75]  .bdf-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bdf[b-3kkz5g7l75]  .bdf-chip { display: inline-flex; border-radius: var(--pt-radius-chip); padding: 2px 8px; font-size: 12px; font-weight: 800; background: var(--pt-line-100); color: var(--pt-text-secondary); white-space: nowrap; }
.bdf[b-3kkz5g7l75]  .bdf-chip--ok { background: var(--pt-available-tint); color: var(--pt-on-success); }
.bdf[b-3kkz5g7l75]  .bdf-chip--warn { background: var(--pt-occupied-tint); color: var(--pt-on-warning); }
.bdf[b-3kkz5g7l75]  .bdf-choice { display: flex; gap: var(--pt-space-3); align-items: flex-start; padding: 10px 12px; border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-md); cursor: pointer; }
.bdf[b-3kkz5g7l75]  .bdf-choice--on { border-color: var(--pt-forest-600); background: var(--pt-available-tint); }
.bdf[b-3kkz5g7l75]  .bdf-choice span { display: grid; }
.bdf[b-3kkz5g7l75]  .bdf-choice small { color: var(--pt-text-secondary); font-size: 12.5px; }
.bdf[b-3kkz5g7l75]  .bdf-history { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.bdf[b-3kkz5g7l75]  .bdf-history li { display: flex; justify-content: space-between; gap: var(--pt-space-3); padding: 6px 10px; border: 1px solid var(--pt-line-100); border-radius: var(--pt-radius-md); }
.bdf[b-3kkz5g7l75]  .bdf-fieldset { display: grid; gap: var(--pt-space-2); margin: 0; padding: 0; border: 0; min-width: 0; }

@media (max-width: 520px) { .bdf[b-3kkz5g7l75] { width: 100vw; max-height: 100dvh; border-radius: 0; } }
/* /Components/Pages/Admin/BillingRestaurantDetail.razor.rz.scp.css */
.bd-back[b-4kqorw3i3s] { display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--pt-space-3); color: var(--pt-info); font-weight: 700; font-size: 13.5px; text-decoration: none; }
.bd-back:hover[b-4kqorw3i3s] { text-decoration: underline; }
.bd-back:focus-visible[b-4kqorw3i3s] { outline: 2px solid var(--pt-forest-600); outline-offset: 2px; border-radius: 4px; }
.bd-chips[b-4kqorw3i3s] { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.bd-notice[b-4kqorw3i3s] { margin: 0 0 var(--pt-space-4); padding: 10px 12px; border: 1px solid var(--pt-available-border); border-radius: var(--pt-radius-md); background: var(--pt-available-tint); color: var(--pt-on-success); font-weight: 700; font-size: 13.5px; }
.bd-stats[b-4kqorw3i3s] { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--pt-space-3); margin-bottom: var(--pt-space-4); }
.bd-stats .da-stat span[b-4kqorw3i3s] { display: block; color: var(--pt-text-muted); font-size: 12.5px; }

.bd-grid[b-4kqorw3i3s] { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: var(--pt-space-4); align-items: start; }
.bd-main[b-4kqorw3i3s], .bd-side[b-4kqorw3i3s] { display: grid; gap: var(--pt-space-3); min-width: 0; align-content: start; }
.bd-h2[b-4kqorw3i3s] { margin: 0; font-family: var(--pt-font-display); font-size: 17px; color: var(--pt-ink-900); }

.bd-month[b-4kqorw3i3s] { overflow: hidden; }
.bd-month__head[b-4kqorw3i3s] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; background: var(--pt-app-bg); border-bottom: 1px solid var(--pt-line-200); }
.bd-month__head b[b-4kqorw3i3s] { color: var(--pt-ink-900); font-size: 15px; }
.bd-month__balance[b-4kqorw3i3s] { margin-left: auto; font-weight: 800; color: var(--pt-ink-900); font-variant-numeric: tabular-nums; }
.bd-month table[b-4kqorw3i3s] { width: 100%; border-collapse: collapse; font-size: 14px; }
.bd-month th[b-4kqorw3i3s] { padding: 8px 16px; text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pt-text-secondary); white-space: nowrap; }
.bd-month th.da-num[b-4kqorw3i3s] { text-align: right; }
.bd-month td[b-4kqorw3i3s] { padding: 10px 16px; border-bottom: 1px solid var(--pt-line-100); vertical-align: top; }
.bd-month tbody tr:last-child td[b-4kqorw3i3s] { border-bottom: 0; }
.bd-sub td[b-4kqorw3i3s] { color: var(--pt-text-secondary); font-size: 13.5px; }
.bd-paid td:first-child[b-4kqorw3i3s], .bd-paid td.da-num[b-4kqorw3i3s] { color: var(--pt-on-success); font-weight: 700; }
.bd-strong[b-4kqorw3i3s] { font-weight: 800; color: var(--pt-ink-900); }

.bd-box[b-4kqorw3i3s] { padding: 14px 16px; display: grid; gap: var(--pt-space-3); overflow: visible; }
.bd-box__head[b-4kqorw3i3s] { display: flex; align-items: center; justify-content: space-between; gap: var(--pt-space-2); }
.bd-kv[b-4kqorw3i3s] { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; font-size: 14px; }
.bd-kv dt[b-4kqorw3i3s] { color: var(--pt-text-muted); font-weight: 700; }
.bd-kv dd[b-4kqorw3i3s] { margin: 0; color: var(--pt-ink-900); }
.bd-list[b-4kqorw3i3s] { list-style: none; margin: 0; padding: 0; display: grid; }
.bd-list li[b-4kqorw3i3s] { display: flex; align-items: center; justify-content: space-between; gap: var(--pt-space-3); padding: 10px 0; border-top: 1px solid var(--pt-line-100); font-size: 13.5px; }
.bd-list li:first-child[b-4kqorw3i3s] { border-top: 0; }
.bd-muted[b-4kqorw3i3s] { color: var(--pt-text-muted); font-size: 12.5px; }
.bd-block[b-4kqorw3i3s] { display: block; }
.bd-struck[b-4kqorw3i3s] { text-decoration: line-through; }

@media (max-width: 960px) { .bd-grid[b-4kqorw3i3s] { grid-template-columns: minmax(0, 1fr); } }
/* /Components/Pages/Admin/DealsAdminShell.razor.rz.scp.css */
.da-header[b-m85macrw26] { margin-bottom: 18px; display: flex; align-items: flex-end; gap: var(--pt-space-3); flex-wrap: wrap; }
.da-header__text[b-m85macrw26] { flex: 1 1 320px; min-width: 0; }
.da-header__actions[b-m85macrw26] { display: flex; gap: var(--pt-space-2); flex-wrap: wrap; }
.da-header h1[b-m85macrw26] { margin: 0; font-family: var(--pt-font-display); font-size: 26px; letter-spacing: -.015em; color: var(--pt-ink-900); }
.da-header p[b-m85macrw26] { margin: 2px 0 0; color: var(--pt-text-muted); font-size: 14px; }


.da[b-m85macrw26]  .da-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pt-space-3); margin-bottom: var(--pt-space-4); }
.da[b-m85macrw26]  .da-stat { background: var(--pt-surface); border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-lg); box-shadow: var(--pt-shadow-card); padding: var(--pt-space-3) var(--pt-space-4); }
.da[b-m85macrw26]  .da-stat small { display: block; color: var(--pt-text-secondary); font-weight: 700; font-size: 12px; }
.da[b-m85macrw26]  .da-stat b { display: block; font-family: var(--pt-font-display); font-size: 24px; color: var(--pt-ink-900); font-variant-numeric: tabular-nums; }

.da[b-m85macrw26]  .da-card { background: var(--pt-surface); border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-lg); box-shadow: var(--pt-shadow-card); overflow-x: auto; }
.da[b-m85macrw26]  .da-card table { width: 100%; border-collapse: collapse; font-size: 14px; }
.da[b-m85macrw26]  .da-card thead { background: var(--pt-app-bg); border-bottom: 1px solid var(--pt-line-200); }
.da[b-m85macrw26]  .da-card th { padding: 10px 16px; text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pt-text-secondary); white-space: nowrap; }
.da[b-m85macrw26]  .da-card td { padding: 12px 16px; border-bottom: 1px solid var(--pt-line-100); vertical-align: top; }
.da[b-m85macrw26]  .da-card tbody tr:hover { background: var(--pt-line-100); }
.da[b-m85macrw26]  .da-card tbody tr.da-edit-row:hover { background: transparent; }
.da[b-m85macrw26]  .da-name { font-weight: 800; color: var(--pt-ink-900); }
.da[b-m85macrw26]  .da-sub { display: block; font-size: 12px; color: var(--pt-text-secondary); }
.da[b-m85macrw26]  .da-quote { max-width: 360px; }
.da[b-m85macrw26]  .da-nowrap { white-space: nowrap; }
.da[b-m85macrw26]  .da-num { font-variant-numeric: tabular-nums; }
.da[b-m85macrw26]  th.da-num, .da[b-m85macrw26]  td.da-num { text-align: right; }
.da[b-m85macrw26]  .da-fee { font-weight: 700; }
.da[b-m85macrw26]  .da-actions { text-align: right; white-space: nowrap; }
.da[b-m85macrw26]  .da-actions .capy-form-action + .capy-form-action { margin-left: var(--pt-space-2); }

.da[b-m85macrw26]  .da-chip { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--pt-radius-chip); padding: 2px 8px; font-size: 12px; font-weight: 800;
    background: var(--pt-line-100); color: var(--pt-text-secondary); white-space: nowrap; }
.da[b-m85macrw26]  .da-chip--ok { background: var(--pt-available-tint); color: var(--pt-on-success); }
.da[b-m85macrw26]  .da-chip--warn { background: var(--pt-occupied-tint); color: var(--pt-on-warning); }
.da[b-m85macrw26]  .da-chip--danger { background: var(--pt-danger-surface); color: var(--pt-danger); }
.da[b-m85macrw26]  .da-stat--alert b { color: var(--pt-danger); }

.da[b-m85macrw26]  .da-edit { display: grid; grid-template-columns: auto minmax(180px, 200px) minmax(220px, 260px) auto; gap: var(--pt-space-4); align-items: end; }
.da[b-m85macrw26]  .da-edit b { align-self: center; color: var(--pt-ink-900); }
.da[b-m85macrw26]  .da-field { display: grid; gap: 4px; }
.da[b-m85macrw26]  .da-label { color: var(--pt-text-secondary); font: 700 13px var(--pt-font-body); }
.da[b-m85macrw26]  .da-input { min-height: 44px; width: 100%; box-sizing: border-box; border: 1px solid var(--pt-cream-300); border-radius: var(--pt-radius-md); background: var(--pt-cream-50);
    color: var(--pt-ink-900); font: 14px var(--pt-font-body); padding: 9px 12px; }
.da[b-m85macrw26]  .da-input:focus { outline: 0; border-color: var(--pt-forest-600); box-shadow: var(--pt-focus-ring); }
.da[b-m85macrw26]  .da-input[aria-invalid="true"] { border-color: var(--pt-danger); background: var(--pt-danger-surface); box-shadow: 0 0 0 3px oklch(from var(--pt-danger) l c h / .12); }
.da[b-m85macrw26]  .da-help { margin: 0; color: var(--pt-text-muted); font-size: 13px; }
.da[b-m85macrw26]  .da-err { margin: 0; color: var(--pt-danger); font-size: 12.5px; font-weight: 700; }
.da[b-m85macrw26]  .da-edit__actions { display: inline-flex; gap: var(--pt-space-2); }
.da[b-m85macrw26]  .da-error { color: var(--pt-danger); font-weight: 700; }

.da[b-m85macrw26]  .da-empty { max-width: 560px; margin: var(--pt-space-6) auto; padding: var(--pt-space-8) var(--pt-space-6); text-align: center; background: var(--pt-surface);
    border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-lg); box-shadow: var(--pt-shadow-card); }
.da[b-m85macrw26]  .da-empty h2 { margin: 0 0 var(--pt-space-2); font-family: var(--pt-font-display); font-size: 20px; color: var(--pt-ink-900); }
.da[b-m85macrw26]  .da-empty p { margin: 0 auto; max-width: 44ch; color: var(--pt-text-secondary); font-size: 14px; }

.da[b-m85macrw26]  .da-skeleton { display: grid; gap: 10px; }
.da[b-m85macrw26]  .da-skeleton span { display: block; height: 64px; border-radius: var(--pt-radius-lg); background: linear-gradient(90deg, var(--pt-line-100), var(--pt-line-200), var(--pt-line-100));
    background-size: 200% 100%; animation: da-shimmer-b-m85macrw26 1.3s linear infinite; }
@keyframes da-shimmer-b-m85macrw26 { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .da[b-m85macrw26]  .da-skeleton span { animation: none; } }

@media (max-width: 760px) {
    .da[b-m85macrw26]  .da-stats { gap: var(--pt-space-2); }
    .da[b-m85macrw26]  .da-stat { padding: var(--pt-space-2) var(--pt-space-3); }
    .da[b-m85macrw26]  .da-stat b { font-size: 18px; }
    .da[b-m85macrw26]  .da-edit { grid-template-columns: 1fr; }
}

/* Solicitudes: filter tabs, request cards and the approve / reject dialogs */
.da[b-m85macrw26]  .da-chip--info { background: oklch(from var(--pt-info) l c h / .10); color: var(--pt-on-info); }
.da[b-m85macrw26]  .da-chip--danger { background: oklch(from var(--pt-danger) l c h / .10); color: var(--pt-on-danger); }

.da[b-m85macrw26]  .da-tabs { display: flex; flex-wrap: wrap; gap: var(--pt-space-2); margin-bottom: var(--pt-space-3); }
.da[b-m85macrw26]  .da-tab { display: inline-flex; align-items: center; min-height: 38px; padding: 0 var(--pt-space-4); border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-pill);
    background: var(--pt-surface); color: var(--pt-text-secondary); font: 700 14px var(--pt-font-body); cursor: pointer; }
.da[b-m85macrw26]  .da-tab[aria-pressed="true"] { background: var(--pt-forest-700); border-color: var(--pt-forest-700); color: var(--pt-cream-50); }
.da[b-m85macrw26]  .da-tab:focus-visible { outline: var(--pt-focus-outline); outline-offset: 2px; }

.da[b-m85macrw26]  .da-requests { display: flex; flex-direction: column; gap: var(--pt-space-3); }
.da[b-m85macrw26]  .da-req { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px var(--pt-space-6); padding: var(--pt-space-4) 18px; overflow: visible; }
.da[b-m85macrw26]  .da-req__head { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: var(--pt-space-1); }
.da[b-m85macrw26]  .da-req__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pt-space-2); }
.da[b-m85macrw26]  .da-req__title .da-name { font-size: 16px; }
.da[b-m85macrw26]  .da-req__facts { flex: 2 1 420px; min-width: 0; margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); gap: 2px 14px; font-size: 13.5px; }
.da[b-m85macrw26]  .da-req__facts dt { color: var(--pt-text-meta); font-weight: 700; }
.da[b-m85macrw26]  .da-req__facts dd { margin: 0; color: var(--pt-ink-900); min-width: 0; overflow-wrap: anywhere; }
.da[b-m85macrw26]  .da-req__facts a { color: var(--pt-on-info); font-weight: 700; }
.da[b-m85macrw26]  .da-req__wide { grid-column: span 3; }
.da[b-m85macrw26]  .da-req__actions { flex: none; display: flex; gap: var(--pt-space-2); align-self: center; }

.da[b-m85macrw26]  .da-dialog { width: min(560px, 92vw); padding: 0; border: 1px solid var(--pt-line-200); border-radius: 14px; background: var(--pt-surface); box-shadow: var(--pt-shadow-panel); }
.da[b-m85macrw26]  .da-dialog[open] { display: flex; flex-direction: column; }
.da[b-m85macrw26]  .da-dialog__head { padding: 20px 22px 10px; }
.da[b-m85macrw26]  .da-dialog__head h2 { margin: 0; font-family: var(--pt-font-display); font-size: 20px; color: var(--pt-ink-900); }
.da[b-m85macrw26]  .da-dialog__head p { margin: 4px 0 0; font-size: 13.5px; color: var(--pt-text-secondary); }
.da[b-m85macrw26]  .da-dialog__head b { color: var(--pt-ink-900); }
.da[b-m85macrw26]  .da-dialog__form { padding: var(--pt-space-2) 22px var(--pt-space-4); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.da[b-m85macrw26]  .da-field--wide { grid-column: 1 / -1; }

/* Editorial priority: five named levels side by side; the help under them says what the chosen one does. */
.da[b-m85macrw26]  .da-priority { grid-column: 1 / -1; border: 0; margin: 0; padding: 0; min-width: 0; }
.da[b-m85macrw26]  .da-priority legend { padding: 0; margin-bottom: 4px; }
.da[b-m85macrw26]  .da-seg { display: inline-flex; width: fit-content; max-width: 100%; flex-wrap: wrap; gap: 2px; padding: 2px; border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-md); background: var(--pt-surface); }
.da[b-m85macrw26]  .da-seg label { position: relative; min-height: 38px; display: flex; align-items: center; padding: 0 12px; border-radius: 6px; cursor: pointer;
    color: var(--pt-text-secondary); font: 700 13px var(--pt-font-body); }
.da[b-m85macrw26]  .da-seg input { position: absolute; opacity: 0; pointer-events: none; }
.da[b-m85macrw26]  .da-seg label.is-on { background: var(--pt-forest-700); color: var(--pt-cream-50); }
.da[b-m85macrw26]  .da-seg label:focus-within { outline: 2px solid var(--pt-forest-600); outline-offset: 2px; }
.da[b-m85macrw26]  .da-priority .da-help { max-width: 640px; }
.da[b-m85macrw26]  .da-opt { font-weight: 600; color: var(--pt-text-meta); }
.da[b-m85macrw26]  .da-dialog__foot { padding: 14px 22px; border-top: 1px solid var(--pt-line-100); display: flex; justify-content: flex-end; gap: var(--pt-space-2); }

@media (max-width: 760px) {
    .da[b-m85macrw26]  .da-req__facts { grid-template-columns: max-content minmax(0, 1fr); }
    .da[b-m85macrw26]  .da-req__wide { grid-column: auto; }
    .da[b-m85macrw26]  .da-dialog__form { grid-template-columns: 1fr; }
}
/* /Components/Pages/Analytics/Analytics.razor.rz.scp.css */
/* Capy Reportes (P17). Reports is a Capy-migrated screen: panels use reports-* classes, never
   .card (app.css declares .card with !important and a scoped rule cannot beat it) — same
   convention as Home.razor.css and Orders.razor.css.

   ── Extension contract for Tasks 2-4 (read this before adding a panel) ──────────────────────
   1. Tabs: each tab is its own component (CartaTab, PlataTab, PersonalTab, OperacionTab). Every
      rule here is `::deep` because the shell wraps all output in `.reports-page`; keep new rules
      in that form.
   2. Grid: `.reports-grid` is the two-column row shape from the prototype's own
      `.capy-rep-grid` (`grid-template-columns: minmax(400px, 1fr) 340px；` collapsing to one
      column under 1180px, matching the shell's own content max-width breakpoint). Wrap a new
      two-column row (e.g. top dishes + peak hours, staff + kitchen speed) in
      `<div class="reports-grid">`; put a lone side column's stacked panels in
      `<div class="reports-grid__side">`. Do not centre a lone panel or invent a new column
      split — reflow means dropping a cut panel's slot, not resizing around it.
   3. Panel shell: reuse `.reports-panel`, `.reports-panel__head`, `.reports-panel__title`,
      `.reports-panel__hint`, `.reports-panel__foot` for any new bordered card — do not redeclare
      the card chrome per panel the way each new class name might tempt you to.
   4. Money: call the page's `Money(decimal)` / a new `MoneyShort(decimal)` you add next to it —
      both delegate to `ViewState.Money` / `ViewState.MoneyShort`, which already take the
      restaurant's own currency. Never format a figure inline.
   5. Loading/error/empty: reuse the `.reports-skeleton`, `.field-summary` (capy-forms.css) and
      `.reports-nodata` treatments this task establishes — do not invent a fourth. */

[b-6ghn504sfj] .reports-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--pt-space-4);
    margin-bottom: var(--pt-space-6);
}

[b-6ghn504sfj] .reports-header__title {
    margin: 0;
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -.025em;
    color: var(--pt-ink-900);
}

[b-6ghn504sfj] .reports-header__subhead {
    margin: 3px 0 0;
    font-size: 14px;
    color: var(--pt-text-secondary);
}

[b-6ghn504sfj] .reports-header__subhead::first-letter {
    text-transform: uppercase;
}

[b-6ghn504sfj] .reports-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--pt-space-3);
}

[b-6ghn504sfj] .reports-export { white-space: nowrap; }
[b-6ghn504sfj] .reports-print-context { display: none; }

/* Section headings of the full report (rendered only while its print dialog is open). */
[b-6ghn504sfj] .reports-print-section {
    margin: var(--pt-space-6) 0 var(--pt-space-3);
    font-family: var(--pt-font-display);
    font-size: 18px;
    color: var(--pt-text-strong);
}

/* ── Área filter (Step 3) ──────────────────────────────────────────────────────────────────── */
[b-6ghn504sfj] .reports-areas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-bottom: var(--pt-space-4);
}

[b-6ghn504sfj] .reports-areas__eyebrow {
    font-family: var(--pt-font-mono);
    font-size: 8.5px;
    letter-spacing: .12em;
    color: var(--pt-unavailable-icon);
}

[b-6ghn504sfj] .reports-areas__list { display: flex; flex-wrap: wrap; gap: 6px; }

[b-6ghn504sfj] .reports-areas__tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    border: 1px solid var(--pt-cream-300);
    border-radius: var(--pt-radius-pill);
    background: var(--pt-surface);
    color: var(--pt-text-secondary);
    font-family: var(--pt-font-body);
    font-weight: 700;
    font-size: 12.5px;
    padding: 7px 13px;
    cursor: pointer;
    transition: all var(--pt-dur-hover) var(--pt-ease-soft);
}

[b-6ghn504sfj] .reports-areas__tab i { font-size: 12px; }

[b-6ghn504sfj] .reports-areas__tab[aria-pressed="true"] {
    background: var(--pt-forest-700);
    color: var(--pt-cream-50);
    border-color: var(--pt-forest-700);
}

[b-6ghn504sfj] .reports-areas__hint { font-size: 12.5px; color: var(--pt-unavailable-icon); margin-left: 4px; }

[b-6ghn504sfj] .reports-currency-note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: calc(var(--pt-space-3) * -1) 0 var(--pt-space-4);
    color: var(--pt-text-secondary);
    font-size: 12px;
    line-height: 1.45;
}

[b-6ghn504sfj] .reports-currency-note i { margin-top: 2px; color: var(--pt-forest-600); }

/* ── Lo importante ─────────────────────────────────────────────────────────────────────────── */
[b-6ghn504sfj] .reports-insights { margin-bottom: var(--pt-space-4); }
[b-6ghn504sfj] .reports-insights__list { list-style: none; margin: 0; padding: 6px 8px; }
[b-6ghn504sfj] .reports-insights__item {
    display: flex; align-items: center; gap: var(--pt-space-3); width: 100%;
    min-height: var(--pt-action-min-height, 44px);
    padding: 10px 10px; border: 0; border-radius: var(--pt-radius-sm);
    background: transparent; text-align: left; cursor: pointer;
    font: 600 14px/1.45 var(--pt-font-body); color: var(--pt-ink-900);
}
[b-6ghn504sfj] .reports-insights__item:hover { background: var(--pt-row-hover); }
[b-6ghn504sfj] .reports-insights__text { flex: 1; }
[b-6ghn504sfj] .reports-insights__link { white-space: nowrap; font-size: 12.5px; font-weight: 800; color: var(--pt-forest-600); }

/* ── KPI row ───────────────────────────────────────────────────────────────────────────────── */
[b-6ghn504sfj] .reports-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--pt-space-3);
    margin-bottom: var(--pt-space-4);
}

[b-6ghn504sfj] .reports-kpi {
    background: var(--pt-surface);
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-lg);
    padding: 15px 17px;
}

[b-6ghn504sfj] .reports-kpi__label { font-size: 12.5px; color: var(--pt-text-secondary); }

[b-6ghn504sfj] .reports-kpi__value {
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 27px;
    letter-spacing: -.03em;
    margin-top: 5px;
    font-variant-numeric: tabular-nums;
}

[b-6ghn504sfj] .reports-kpi__delta-row { display: flex; align-items: center; gap: 6px; margin-top: 7px; }

[b-6ghn504sfj] .reports-kpi__delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: var(--pt-radius-sm);
}

[b-6ghn504sfj] .reports-kpi__delta i { font-size: 11px; }

[b-6ghn504sfj] .reports-kpi__delta--up { color: var(--pt-on-success); background: var(--pt-available-tint); }
[b-6ghn504sfj] .reports-kpi__delta--down { color: var(--pt-danger); background: oklch(from var(--pt-danger) l c h / .10); }
[b-6ghn504sfj] .reports-kpi__vs { font-size: 12px; color: var(--pt-unavailable-icon); }

/* ── Panel shell (shared by every reports-* panel, this task's and future tasks') ────────────── */
[b-6ghn504sfj] .reports-panel {
    background: var(--pt-surface);
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-lg);
    /* Without this, a panel that is a grid/flex item (every .reports-panel is, inside .reports-
       grid or .reports-grid__side) defaults to min-width: auto and grows to its widest
       descendant's min-content — the staff table's 700px min-width — instead of shrinking with
       its column. min-width: auto is where the overflow at narrow widths actually starts. */
    min-width: 0;
}

/* .reports-panel used to carry overflow: hidden purely so .reports-panel__foot's own background
   respected the panel's rounded bottom corners — but that also clipped every InfoHint bubble
   inside the panel (Horas fuertes' hints). .reports-panel__head paints no background of its own
   (transparent over the panel's own surface), so only the foot needs the matching radius below. */
[b-6ghn504sfj] .reports-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pt-space-3);
    padding: 14px 18px;
    border-bottom: var(--pt-border-card);
}

[b-6ghn504sfj] .reports-panel__title {
    margin: 0;
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -.02em;
    color: var(--pt-ink-900);
}

[b-6ghn504sfj] .reports-panel__hint { margin-left: auto; font-size: 12.5px; color: var(--pt-unavailable-icon); }

[b-6ghn504sfj] .reports-panel__foot {
    padding: 12px 18px;
    background: var(--pt-app-bg);
    border-top: var(--pt-border-card);
    border-radius: 0 0 var(--pt-radius-lg) var(--pt-radius-lg);
    font-size: 12.5px;
    color: var(--pt-text-secondary);
}

/* ── Ventas chart panel ───────────────────────────────────────────────────────────────────────
   Markup carries both "reports-panel reports-chart" (etc.) — Blazor's CSS isolation has no
   composition at-rule, so panel chrome is applied by stacking classes in the markup rather than
   by a CSS-side "composes". design's own "Ventas {period}" section is just that panel shell plus
   a legend. */
[b-6ghn504sfj] .reports-chart__hint { font-size: 12.5px; color: var(--pt-unavailable-icon); }

[b-6ghn504sfj] .reports-chart__legend { margin-left: auto; display: flex; align-items: center; gap: 14px; }

[b-6ghn504sfj] .reports-chart__legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--pt-text-secondary);
}

[b-6ghn504sfj] .reports-chart__swatch { width: 10px; height: 10px; border-radius: 3px; }
[b-6ghn504sfj] .reports-chart__swatch--now { background: var(--pt-forest-600); }
[b-6ghn504sfj] .reports-chart__swatch--prev { background: var(--pt-chart-track-warm); }

[b-6ghn504sfj] .reports-chart__canvas { padding: 6px 12px 10px; }

/* ── Grid (Tasks 2-4 reuse this — see the contract comment above) ───────────────────────────── */
[b-6ghn504sfj] .reports-grid {
    display: grid;
    grid-template-columns: minmax(400px, 1fr) 340px;
    gap: var(--pt-space-4);
    align-items: start;
    margin-top: var(--pt-space-4);
}

[b-6ghn504sfj] .reports-grid__side { display: flex; flex-direction: column; gap: var(--pt-space-4); }
[b-6ghn504sfj] .reports-grid--single { grid-template-columns: 1fr; }

/* Same min-width: auto trap as .reports-panel above, one level up: every direct child of .reports-
   grid (the main column and .reports-grid__side) is a grid item too, so each needs its
   own min-width: 0 to shrink with its track instead of growing to its widest descendant. */
[b-6ghn504sfj] .reports-grid > * {
    min-width: 0;
}

/* ── Top dishes / peak hours (P17 Task 2) ───────────────────────────────────
   The visible values and the sr-only tables carry the meaning; bar colour merely reinforces it.
   --pt-forest-600, --pt-olive-500 and --pt-moss-400 all clear the 3:1 non-text contrast
   threshold against --pt-surface (#fff): 8.3:1, 5.0:1 and 3.1:1 respectively. */
/* Explicit minmax(0, 1fr) column: without it, the single implicit "auto" column sizes to the
   row's max-content width (rank + un-truncated name + amount) instead of the panel's own width,
   so the row would overflow the panel and push the amount column past its right edge. (Used to be
   silently clipped there by `.reports-panel`'s own `overflow: hidden`, removed since — see that
   rule's own comment — so an overflow here is now visible rather than hidden, not caught at all.) */
[b-6ghn504sfj] .reports-top__rows { display: grid; grid-template-columns: minmax(0, 1fr); }

[b-6ghn504sfj] .reports-top__row {
    display: flex;
    align-items: center;
    gap: var(--pt-space-3);
    padding: 13px 18px;
    border-top: var(--pt-border-row);
}

[b-6ghn504sfj] .reports-top__row:first-child { border-top: 0; }

[b-6ghn504sfj] .reports-top__rank {
    width: 24px;
    flex: none;
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 14px;
    color: var(--pt-unavailable-icon);
    font-variant-numeric: tabular-nums;
}

[b-6ghn504sfj] .reports-top__dish { flex: 1; min-width: 0; }
[b-6ghn504sfj] .reports-top__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; font-size: 14.5px; }
[b-6ghn504sfj] .reports-top__track { display: block; height: 7px; overflow: hidden; margin-top: 7px; border-radius: var(--pt-radius-sm); background: var(--pt-row-divider); }
[b-6ghn504sfj] .reports-top__bar { display: block; height: 100%; border-radius: var(--pt-radius-sm); background: var(--pt-moss-400); }
[b-6ghn504sfj] .reports-top__bar--leader { background: var(--pt-forest-600); }

[b-6ghn504sfj] .reports-top__amount { min-width: 108px; text-align: right; }
[b-6ghn504sfj] .reports-top__money { font-family: var(--pt-font-display); font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
[b-6ghn504sfj] .reports-top__units { margin-top: 2px; font-size: 11.5px; color: var(--pt-unavailable-icon); }

[b-6ghn504sfj] .reports-peak-hours__title { font-size: 15px; }
/* Was display: flex with a per-row fixed-width count column (8.5rem) — wide enough for two-digit
   counts but not three ("150 pedidos"), and each row sized its own column independently so a
   fixed width was the only way to keep the bars aligned. Subgrid lets every row share one set of
   columns sized off the widest row's actual content instead: the count column grows to fit
   whatever the data needs, bars stay aligned, and nothing is hardcoded to overflow later. */
[b-6ghn504sfj] .reports-peak-hours__rows { display: grid; grid-template-columns: 64px minmax(0, 1fr) max-content; row-gap: 11px; column-gap: 10px; padding: 14px 16px; }
[b-6ghn504sfj] .reports-peak-hours__row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
/* The InfoHint wrapper is the actual grid item (it wraps .reports-peak-hours__count), so
   the column's own content is right-aligned on it, not on the count span inside. */
[b-6ghn504sfj] .reports-peak-hours__row .info-hint { justify-self: end; }
[b-6ghn504sfj] .reports-peak-hours__label { font-size: 12.5px; font-weight: 800; color: var(--pt-text-strong); font-variant-numeric: tabular-nums; }
[b-6ghn504sfj] .reports-peak-hours__track { height: 9px; overflow: hidden; border-radius: 5px; background: var(--pt-row-divider); }
[b-6ghn504sfj] .reports-peak-hours__bar { display: block; height: 100%; border-radius: 5px; background: var(--pt-moss-400); }
[b-6ghn504sfj] .reports-peak-hours__bar--peak { background: var(--pt-olive-500); }
[b-6ghn504sfj] .reports-peak-hours__count { display: inline-flex; align-items: center; gap: 6px; color: var(--pt-text-strong); font: 700 13px var(--pt-font-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
[b-6ghn504sfj] .reports-peak-hours__peak { padding: 1px 7px; border-radius: var(--pt-radius-pill); background: var(--pt-forest-700); color: var(--pt-cream-50); font-size: 11px; font-weight: 800; }
/* Horizontal inset matches .reports-peak-hours__rows' own 16px so the total lines up with the
   rows above it instead of running flush to the card edge (owner-reported live). */
[b-6ghn504sfj] .reports-peak-hours__total { margin: 0 16px; padding: var(--pt-space-3) 0 14px; border-top: var(--pt-border-row); color: var(--pt-text-muted); font-size: var(--pt-text-caption); }

/* ── Carta tab ──────────────────────────────────────────────────────────────────────────────── */
[b-6ghn504sfj] .reports-carta { margin-top: var(--pt-space-4); }
[b-6ghn504sfj] .reports-carta__filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 18px 4px; }
[b-6ghn504sfj] .reports-carta__count { font-weight: 600; opacity: .75; margin-left: 2px; }
[b-6ghn504sfj] .reports-carta__scroll { overflow-x: auto; }
[b-6ghn504sfj] .reports-carta__table { width: 100%; min-width: 640px; border-collapse: collapse; }
[b-6ghn504sfj] .reports-carta__table th {
    padding: 10px 18px;
    background: var(--pt-app-bg);
    border-bottom: var(--pt-border-card);
    text-align: left;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pt-text-secondary);
}
[b-6ghn504sfj] .reports-carta__table td { padding: 11px 18px; border-top: var(--pt-border-row); font-size: 14px; }
[b-6ghn504sfj] .reports-carta__num { text-align: right; font-variant-numeric: tabular-nums; }
[b-6ghn504sfj] .reports-carta__dish { font-weight: 800; color: var(--pt-ink-900); overflow-wrap: anywhere; }
[b-6ghn504sfj] .reports-carta__label { display: inline-block; padding: 3px 9px; border-radius: var(--pt-radius-chip); font-size: 12px; font-weight: 800; border: 1px solid var(--pt-line-200); color: var(--pt-text-secondary); background: var(--pt-surface); }
[b-6ghn504sfj] .reports-carta__label--motor { color: var(--pt-on-success); background: var(--pt-available-tint); border-color: var(--pt-available-border); }
[b-6ghn504sfj] .reports-carta__label--falling { color: var(--pt-on-danger); background: var(--pt-danger-summary); border-color: var(--pt-danger-summary); }
[b-6ghn504sfj] .reports-carta__label--weak { color: var(--pt-on-warning); background: var(--pt-occupied-tint); border-color: var(--pt-occupied-border); }
[b-6ghn504sfj] .reports-carta__label--unsold { color: var(--pt-text-muted); background: var(--pt-line-100); border-color: var(--pt-toggle-off); }
[b-6ghn504sfj] .reports-carta__revenue { display: flex; align-items: center; gap: 10px; }
[b-6ghn504sfj] .reports-carta__track { flex: 1; min-width: 60px; height: 7px; overflow: hidden; border-radius: var(--pt-radius-sm); background: var(--pt-row-divider); }
[b-6ghn504sfj] .reports-carta__bar { display: block; height: 100%; border-radius: var(--pt-radius-sm); background: var(--pt-moss-400); }
[b-6ghn504sfj] .reports-carta__bar--motor { background: var(--pt-forest-600); }
[b-6ghn504sfj] .reports-carta__bar--falling { background: var(--pt-danger); }
[b-6ghn504sfj] .reports-carta__money { min-width: 110px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
[b-6ghn504sfj] .reports-carta__share { min-width: 44px; text-align: right; font-size: 12.5px; color: var(--pt-text-muted); font-variant-numeric: tabular-nums; }
[b-6ghn504sfj] .reports-carta__delta { font-size: 13px; font-weight: 800; }
[b-6ghn504sfj] .reports-carta__delta--up { color: var(--pt-on-success); }
[b-6ghn504sfj] .reports-carta__delta--down { color: var(--pt-on-danger); }
[b-6ghn504sfj] .reports-carta__delta--none { color: var(--pt-text-muted); }

/* Staff performance / kitchen speed (P17 Task 3). The table keeps its native semantics and
   scrolls at narrow widths instead of collapsing five unlike measures into ambiguous cards. */
[b-6ghn504sfj] .reports-staff__scroll { overflow-x: auto; }

[b-6ghn504sfj] .reports-staff__table {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
}

[b-6ghn504sfj] .reports-staff__table th {
    padding: 10px 18px;
    background: var(--pt-app-bg);
    border-bottom: var(--pt-border-card);
    text-align: left;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pt-unavailable-icon);
}

[b-6ghn504sfj] .reports-staff__table td {
    padding: 12px 18px;
    border-top: var(--pt-border-row);
    vertical-align: middle;
}

[b-6ghn504sfj] .reports-staff__table tbody tr:first-child td { border-top: 0; }
[b-6ghn504sfj] .reports-staff__person { display: flex; align-items: center; gap: 9px; min-width: 0; }

[b-6ghn504sfj] .reports-staff__avatar {
    width: 34px;
    height: 34px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--pt-radius-pill);
    background: var(--pt-available-tint);
    color: var(--pt-forest-600);
    font-size: 12px;
    font-weight: 800;
}

[b-6ghn504sfj] .reports-staff__avatar--leader { background: var(--pt-forest-700); color: var(--pt-cream-200); }
[b-6ghn504sfj] .reports-staff__identity { min-width: 0; }
[b-6ghn504sfj] .reports-staff__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 800; }
[b-6ghn504sfj] .reports-staff__role { display: block; margin-top: 1px; font-size: 11.5px; color: var(--pt-unavailable-icon); }
[b-6ghn504sfj] .reports-staff__number { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
[b-6ghn504sfj] .reports-staff__money { font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; }

[b-6ghn504sfj] .reports-staff__tip {
    display: inline-flex;
    padding: 3px 8px;
    border-radius: var(--pt-radius-sm);
    background: oklch(from var(--pt-warning) l c h / .14);
    color: var(--pt-on-warning);
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

[b-6ghn504sfj] .reports-staff__tip--strong { background: var(--pt-available-tint); color: var(--pt-forest-600); }
[b-6ghn504sfj] .reports-kitchen-speed__title { font-size: 15px; }
[b-6ghn504sfj] .reports-kitchen-speed__body { padding: 15px 16px; }

[b-6ghn504sfj] .reports-kitchen-summary,
[b-6ghn504sfj] .reports-reservations__body { display: flex; flex-direction: column; gap: 12px; }

[b-6ghn504sfj] .reports-kitchen-summary__row,
[b-6ghn504sfj] .reports-reservations__row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: var(--pt-text-secondary);
    font-size: 13px;
}

[b-6ghn504sfj] .reports-kitchen-summary__row > span,
[b-6ghn504sfj] .reports-reservations__row > span { flex: 1; }

[b-6ghn504sfj] .reports-kitchen-summary__row strong,
[b-6ghn504sfj] .reports-reservations__row strong {
    color: var(--pt-text-strong);
    font-family: var(--pt-font-display);
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

[b-6ghn504sfj] .reports-kitchen-summary__row .reports-kitchen-summary__warn,
[b-6ghn504sfj] .reports-reservations__row .reports-reservations__warn { color: var(--pt-on-warning); }

[b-6ghn504sfj] .reports-kitchen-speed__divider {
    height: 1px;
    margin: 13px 0;
    background: var(--pt-row-divider);
}

[b-6ghn504sfj] .reports-kitchen-speed__subtitle {
    margin: 0 0 9px;
    font-family: var(--pt-font-body);
    font-size: 12.5px;
    font-weight: 800;
    color: var(--pt-text-strong);
}

[b-6ghn504sfj] .reports-kitchen-speed__row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
[b-6ghn504sfj] .reports-kitchen-speed__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; }
[b-6ghn504sfj] .reports-kitchen-speed__empty { margin: 0; color: var(--pt-text-secondary); font-size: 12.5px; line-height: 1.5; }

[b-6ghn504sfj] .reports-kitchen-speed__minutes {
    flex: none;
    padding: 4px 9px;
    border-radius: var(--pt-radius-sm);
    background: oklch(from var(--pt-warning) l c h / .14);
    color: var(--pt-on-warning);
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

[b-6ghn504sfj] .reports-kitchen-speed__minutes--critical {
    background: oklch(from var(--pt-danger) l c h / .10);
    color: var(--pt-danger);
}

/* Revenue leaks. Money is intentionally absent: each row's right edge carries its
   exact persisted count, while the detail and footer disclose the data basis and limitation. */
[b-6ghn504sfj] .reports-leaks__rows { display: grid; grid-template-columns: minmax(0, 1fr); }

[b-6ghn504sfj] .reports-leaks__row {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 14px 18px;
    border-top: var(--pt-border-row);
}

[b-6ghn504sfj] .reports-leaks__row:first-child { border-top: 0; }

[b-6ghn504sfj] .reports-leaks__icon {
    width: 38px;
    height: 38px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--pt-radius-md);
    background: oklch(from var(--pt-danger) l c h / .09);
    color: var(--pt-danger);
}

[b-6ghn504sfj] .reports-leaks__icon i { font-size: 16px; }
[b-6ghn504sfj] .reports-leaks__copy { flex: 1; min-width: 0; }
[b-6ghn504sfj] .reports-leaks__title { display: block; font-size: 14.5px; font-weight: 800; }

[b-6ghn504sfj] .reports-leaks__detail {
    display: block;
    margin-top: 3px;
    color: var(--pt-text-secondary);
    font-size: 12.5px;
    line-height: 1.5;
}

[b-6ghn504sfj] .reports-leaks__count { min-width: 106px; flex: none; text-align: right; }

[b-6ghn504sfj] .reports-leaks__number {
    display: block;
    color: var(--pt-danger);
    font-family: var(--pt-font-display);
    font-size: 18px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

[b-6ghn504sfj] .reports-leaks__unit {
    display: block;
    margin-top: 2px;
    /* Normal text: --pt-text-secondary clears WCAG AA on --pt-surface (7.33:1). */
    color: var(--pt-text-secondary);
    font-size: 11.5px;
}

[b-6ghn504sfj] .reports-reservations__title { font-size: 15px; }
[b-6ghn504sfj] .reports-reservations__body { padding: 15px 16px; }
[b-6ghn504sfj] .reports-reservations__note {
    margin: 2px 0 0;
    color: var(--pt-text-secondary);
    font-size: 12px;
    line-height: 1.55;
}

/* The prototype's own breakpoint for this grid (".capy-rep-grid"), independent of the shell's
   820/600 rail collapse. */
@media (max-width: 1180px) {
    [b-6ghn504sfj] .reports-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    [b-6ghn504sfj] .reports-leaks__row { flex-wrap: wrap; }
    [b-6ghn504sfj] .reports-leaks__copy { min-width: calc(100% - 51px); }
    [b-6ghn504sfj] .reports-leaks__count { width: 100%; min-width: 0; padding-left: 51px; text-align: left; }
}

/* ── Día 1 ─────────────────────────────────────────────────────────────────────────────────────
   Same anatomy as Home.razor's .home-dayone / Orders.razor's .orders-dayone (component reference
   §5): rebuilt here under this screen's own reports- prefix, not shared across files — Blazor
   scoped CSS is per-component. */
[b-6ghn504sfj] .reports-dayone {
    max-width: 720px;
    background: var(--pt-surface);
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-lg);
    box-shadow: var(--pt-shadow-card);
    padding: 30px 32px 28px;
}

[b-6ghn504sfj] .reports-dayone__badge {
    font-family: var(--pt-font-mono);
    font-size: 8.5px;
    letter-spacing: .12em;
    color: var(--pt-on-warning);
    margin-bottom: var(--pt-space-3);
}

[b-6ghn504sfj] .reports-dayone__title {
    margin: 0 0 var(--pt-space-2);
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -.025em;
}

[b-6ghn504sfj] .reports-dayone__body {
    margin: 0 0 var(--pt-space-6);
    max-width: 56ch;
    font-size: 14px;
    line-height: var(--pt-leading-body);
    color: var(--pt-text-secondary);
}

[b-6ghn504sfj] .reports-dayone__tasks { display: grid; gap: var(--pt-space-2); }

[b-6ghn504sfj] .reports-dayone-task {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    border: var(--pt-border-card);
    border-radius: 10px;
    background: var(--pt-app-bg);
}

[b-6ghn504sfj] .reports-dayone-task > i { font-size: 16px; color: var(--pt-forest-600); flex: none; }
[b-6ghn504sfj] .reports-dayone-task__text { flex: 1; min-width: 0; }

[b-6ghn504sfj] .reports-dayone-task__title {
    display: block;
    font-family: var(--pt-font-display);
    font-weight: 700;
    font-size: 14px;
}

[b-6ghn504sfj] .reports-dayone-task__body {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--pt-text-secondary);
}

[b-6ghn504sfj] .reports-dayone-task__action { flex: none; white-space: nowrap; }

[b-6ghn504sfj] .reports-dayone__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pt-space-3);
    margin-top: var(--pt-space-6);
}

[b-6ghn504sfj] .reports-dayone__note { font-size: 12.5px; color: var(--pt-unavailable-icon); }

/* ── Loading / error / no-data-for-period (Step 5) ────────────────────────────────────────────
   Skeleton per the component reference (§6): sweeping gradient bar, never a full-screen spinner.
   .field-summary (capy-forms.css) covers the inline error state — same class Orders.razor's own
   load-failure banners use, reused rather than a second error treatment invented here. */
[b-6ghn504sfj] .reports-skeleton { padding: 20px 18px; }

[b-6ghn504sfj] .reports-skeleton__bar {
    display: block;
    border-radius: var(--pt-radius-md);
    background: linear-gradient(90deg, var(--pt-cream-200), var(--pt-cream-100) 50%, var(--pt-cream-200));
    background-size: 220% 100%;
    animation: reports-sheen-b-6ghn504sfj 1.5s linear infinite;
}

[b-6ghn504sfj] .reports-skeleton__bar--chart { height: 230px; }
[b-6ghn504sfj] .reports-skeleton__bar--kpi { height: 64px; }

@keyframes reports-sheen-b-6ghn504sfj {
    0% { background-position: 200% 0; }
    100% { background-position: -20% 0; }
}

[b-6ghn504sfj] .reports-nodata {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 40px 18px;
    color: var(--pt-text-secondary);
}

[b-6ghn504sfj] .reports-nodata > i { font-size: 28px; color: var(--pt-unavailable-icon); }

[b-6ghn504sfj] .reports-nodata__title {
    margin: 4px 0 0;
    font-family: var(--pt-font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--pt-ink-900);
}

[b-6ghn504sfj] .reports-nodata__body { margin: 0; font-size: 13px; max-width: 42ch; }

/* Visually-hidden text alternative for the chart (component reference: every chart carries one).
   The data tables sit inside a <div class="sr-only">, never carry the class themselves: a
   display:table box ignores `height: 1px` and `overflow`, so a hidden table still grew to its
   full row height and stretched the document below the sticky nav rail (Plata, Año: 250px of
   blank page). A div honours both. */
[b-6ghn504sfj] .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── Plata: server-rendered bars (replaces Blazor-ApexCharts; no JS, CSP-safe) ────────────── */
[b-6ghn504sfj] .reports-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; align-items: end; padding: 16px 18px 12px; }
[b-6ghn504sfj] .reports-bars__bucket { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
[b-6ghn504sfj] .reports-bars__value { font-size: 11px; font-weight: 800; color: var(--pt-text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
[b-6ghn504sfj] .reports-bars__pair { display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: 100%; height: 200px; }
[b-6ghn504sfj] .reports-bars__bar { display: block; width: 38%; max-width: 22px; min-height: 2px; border-radius: 4px 4px 0 0; }
[b-6ghn504sfj] .reports-bars__bar--now { background: var(--pt-forest-600); }
[b-6ghn504sfj] .reports-bars__bar--prev { background: var(--pt-chart-track-warm); }
[b-6ghn504sfj] .reports-bars__label { font-size: 11px; color: var(--pt-unavailable-text); }

[b-6ghn504sfj] .reports-uncollected__body { display: flex; flex-direction: column; gap: 8px; padding: 15px 16px; }
[b-6ghn504sfj] .reports-uncollected__amount { font-family: var(--pt-font-display); font-weight: 800; font-size: 26px; color: var(--pt-on-warning); font-variant-numeric: tabular-nums; }
[b-6ghn504sfj] .reports-uncollected__copy,
[b-6ghn504sfj] .reports-uncollected__none { margin: 0; font-size: 13px; line-height: 1.5; color: var(--pt-text-secondary); }

[b-6ghn504sfj] .reports-breakdown__rows { margin: 0; padding: 6px 16px 10px; }
[b-6ghn504sfj] .reports-breakdown__row { display: flex; justify-content: space-between; padding: 8px 0; border-top: var(--pt-border-row); font-size: 14px; }
[b-6ghn504sfj] .reports-breakdown__row:first-child { border-top: 0; }
[b-6ghn504sfj] .reports-breakdown__row dd { margin: 0; font-variant-numeric: tabular-nums; }
[b-6ghn504sfj] .reports-breakdown__row--total { font-weight: 800; color: var(--pt-ink-900); }

/* ── Personal: heat map ───────────────────────────────────────────────────────────────────── */
[b-6ghn504sfj] .reports-heatmap__scroll { overflow-x: auto; padding: 12px 16px 4px; }
[b-6ghn504sfj] .reports-heatmap__table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
[b-6ghn504sfj] .reports-heatmap__table th { font-size: 12px; font-weight: 700; color: var(--pt-text-muted); }
[b-6ghn504sfj] .reports-heatmap__table th[scope="row"] { width: 52px; text-align: left; color: var(--pt-text-strong); font-weight: 800; }
[b-6ghn504sfj] .reports-heatmap__cell { height: 36px; border-radius: var(--pt-radius-sm); text-align: center; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--pt-text-strong); }
[b-6ghn504sfj] .reports-heatmap__cell--0 { background: var(--pt-line-100); }
[b-6ghn504sfj] .reports-heatmap__cell--1 { background: var(--pt-sage-100); }
[b-6ghn504sfj] .reports-heatmap__cell--2 { background: var(--pt-chart-track); }
[b-6ghn504sfj] .reports-heatmap__cell--3 { background: var(--pt-moss-400); }
[b-6ghn504sfj] .reports-heatmap__cell--4 { background: var(--pt-olive-500); color: var(--pt-surface); }
[b-6ghn504sfj] .reports-heatmap__cell--5 { background: var(--pt-forest-600); color: var(--pt-surface); }
[b-6ghn504sfj] .reports-heatmap__cell--peak { box-shadow: inset 0 0 0 2px var(--pt-gold-500); }
[b-6ghn504sfj] .reports-heatmap__callouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; padding: 10px 16px 16px; }
[b-6ghn504sfj] .reports-heatmap__callout { margin: 0; padding: 10px 12px; border-radius: var(--pt-radius-sm); background: var(--pt-tray-bg); border: 1px solid var(--pt-line-200); font-size: 13px; color: var(--pt-text-strong); }
[b-6ghn504sfj] .reports-heatmap__callout--peak { background: var(--pt-available-tint); border-color: var(--pt-available-border); color: var(--pt-on-success); }
[b-6ghn504sfj] .reports-staff__coverage { display: flex; align-items: center; gap: 6px; margin: 0; padding: 10px 18px; font-size: 13px; color: var(--pt-text-secondary); border-bottom: var(--pt-border-row); }

@media (max-width: 600px) {
    [b-6ghn504sfj] .reports-bars__value { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    [b-6ghn504sfj] .reports-areas__tab { transition: none; }
    [b-6ghn504sfj] .reports-skeleton__bar { animation: none; }
}

@media print {
    [b-6ghn504sfj] .reports-header {
        align-items: flex-start;
        margin-bottom: var(--pt-space-3);
    }

    [b-6ghn504sfj] .reports-header__actions,
    [b-6ghn504sfj] .reports-areas { display: none !important; }

    /* Full report: each section starts on its own page. */
    [b-6ghn504sfj] .reports-print-section:not(:first-of-type) { break-before: page; }

    [b-6ghn504sfj] .reports-print-context {
        display: flex;
        flex-wrap: wrap;
        gap: var(--pt-space-4);
        margin-bottom: var(--pt-space-4);
        color: var(--pt-text-secondary);
        font-size: 12px;
        font-weight: 700;
    }

    [b-6ghn504sfj] .reports-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    [b-6ghn504sfj] .reports-grid,
    [b-6ghn504sfj] .reports-grid--single {
        display: block;
        margin-top: var(--pt-space-4);
    }

    [b-6ghn504sfj] .reports-grid__side { display: block; }
    [b-6ghn504sfj] .reports-grid > * + *,
    [b-6ghn504sfj] .reports-grid__side > * + * { margin-top: var(--pt-space-4); }

    [b-6ghn504sfj] .reports-kpi,
    [b-6ghn504sfj] .reports-panel,
    [b-6ghn504sfj] .reports-dayone,
    [b-6ghn504sfj] .reports-chart__canvas {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    [b-6ghn504sfj] .reports-panel { overflow: visible; }
    [b-6ghn504sfj] .reports-staff__scroll { overflow: visible; }

    [b-6ghn504sfj] .reports-chart,
    [b-6ghn504sfj] .reports-top__bar,
    [b-6ghn504sfj] .reports-peak-hours__bar { print-color-adjust: exact; }

    [b-6ghn504sfj] .reports-chart__swatch--now {
        background: var(--pt-ink-900);
        border: 1px solid var(--pt-ink-900);
    }

    [b-6ghn504sfj] .reports-chart__swatch--prev {
        background: var(--pt-surface);
        border: 1px solid var(--pt-ink-900);
    }

    [b-6ghn504sfj] .reports-bars__bar--now { background: var(--pt-ink-900); print-color-adjust: exact; }
    [b-6ghn504sfj] .reports-bars__bar--prev { background: var(--pt-surface); border: 1.5px solid var(--pt-ink-900); print-color-adjust: exact; }
    [b-6ghn504sfj] .reports-heatmap__cell { print-color-adjust: exact; }
}

@media (hover: none) and (pointer: coarse) {
    [b-6ghn504sfj] .reports-areas__tab { min-height: var(--pt-action-min-height-touch); }
}

[b-6ghn504sfj] .reports-delivery__bar {
    display: flex;
    height: 10px;
    margin: 12px 0;
    border-radius: 999px;
    overflow: hidden;
    background: var(--pt-chart-track);
}

[b-6ghn504sfj] .reports-delivery__segment--wait { background: var(--pt-gold-500); }
[b-6ghn504sfj] .reports-delivery__segment--prep { background: var(--pt-forest-600); }
[b-6ghn504sfj] .reports-delivery__segment--service { background: var(--pt-chart-track-warm); }

[b-6ghn504sfj] .reports-delivery__key {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
}

[b-6ghn504sfj] .reports-delivery__samples {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--pt-text-secondary);
}
/* /Components/Pages/Deals/BillingAccountPanel.razor.rz.scp.css */
.billing-account[b-h6jmll32xh] { display: flex; flex-direction: column; gap: var(--pt-space-3); margin-bottom: var(--pt-space-6); }
.billing-account__head[b-h6jmll32xh] { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--pt-space-3); }
.billing-account__head h2[b-h6jmll32xh] { margin: 0; font-family: var(--pt-font-display); font-size: 18px; color: var(--pt-ink-900); }
.billing-account__head span[b-h6jmll32xh] { color: var(--pt-text-secondary); font-size: 13px; }

.billing-account__stats[b-h6jmll32xh] { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--pt-space-3); }
.billing-stat[b-h6jmll32xh] { background: var(--pt-surface); border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-lg); box-shadow: var(--pt-shadow-card); padding: var(--pt-space-3) var(--pt-space-4); }
.billing-stat small[b-h6jmll32xh] { display: block; color: var(--pt-text-secondary); font-weight: 700; font-size: 12px; }
.billing-stat b[b-h6jmll32xh] { display: block; font-family: var(--pt-font-display); font-size: 24px; color: var(--pt-ink-900); font-variant-numeric: tabular-nums; }
.billing-stat span[b-h6jmll32xh] { display: block; color: var(--pt-text-secondary); font-size: 12.5px; }
.billing-stat--alert b[b-h6jmll32xh] { color: var(--pt-on-danger); }

.billing-note[b-h6jmll32xh] { display: flex; align-items: flex-start; gap: var(--pt-space-3); padding: var(--pt-space-3) var(--pt-space-4); border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-lg); font-size: 14px; }
.billing-note b[b-h6jmll32xh] { color: var(--pt-ink-900); }
.billing-note > i[b-h6jmll32xh] { font-size: 18px; margin-top: 2px; }
.billing-note--warn[b-h6jmll32xh] { background: var(--pt-occupied-tint); }
.billing-note--warn > i[b-h6jmll32xh] { color: var(--pt-on-warning); }
.billing-note--ok[b-h6jmll32xh] { background: var(--pt-available-tint); }
.billing-note--ok > i[b-h6jmll32xh] { color: var(--pt-on-success); }
.billing-link[b-h6jmll32xh] { color: var(--pt-on-info); font-weight: 700; }
.billing-link:focus-visible[b-h6jmll32xh] { outline: var(--pt-focus-outline); outline-offset: 2px; }

.billing-account__error[b-h6jmll32xh] { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--pt-space-3); padding: var(--pt-space-3) var(--pt-space-4);
    border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-lg); background: var(--pt-danger-surface); color: var(--pt-on-danger); }

.billing-card[b-h6jmll32xh] { background: var(--pt-surface); border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-lg); box-shadow: var(--pt-shadow-card); overflow-x: auto; }
.billing-card table[b-h6jmll32xh] { width: 100%; border-collapse: collapse; font-size: 14px; }
.billing-card caption[b-h6jmll32xh] { caption-side: top; text-align: left; padding: 12px 16px 4px; font-weight: 800; color: var(--pt-ink-900); }
.billing-card thead[b-h6jmll32xh] { background: var(--pt-app-bg); border-bottom: 1px solid var(--pt-line-200); }
.billing-card th[b-h6jmll32xh] { padding: 10px 16px; text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pt-text-secondary); white-space: nowrap; }
.billing-card td[b-h6jmll32xh] { padding: 11px 16px; vertical-align: top; border-bottom: 1px solid var(--pt-line-100); }
.billing-card .billing-num[b-h6jmll32xh] { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.billing-strong[b-h6jmll32xh] { color: var(--pt-ink-900); font-weight: 800; }
.billing-nowrap[b-h6jmll32xh] { white-space: nowrap; }
.billing-detail[b-h6jmll32xh] { display: block; color: var(--pt-text-secondary); font-size: 12.5px; }
td.billing-detail[b-h6jmll32xh] { display: table-cell; font-size: 14px; }

.billing-chip[b-h6jmll32xh] { display: inline-flex; align-items: center; border-radius: var(--pt-radius-chip); padding: 2px 8px; font-size: 12px; font-weight: 800;
    background: var(--pt-line-100); color: var(--pt-text-secondary); white-space: nowrap; }
.billing-chip--ok[b-h6jmll32xh] { background: var(--pt-available-tint); color: var(--pt-on-success); }
.billing-chip--danger[b-h6jmll32xh] { background: var(--pt-chrome-danger-tint); color: var(--pt-on-danger); }

.billing-empty[b-h6jmll32xh] { padding: var(--pt-space-8) var(--pt-space-6); text-align: center; background: var(--pt-surface); border: 1px solid var(--pt-line-200);
    border-radius: var(--pt-radius-lg); box-shadow: var(--pt-shadow-card); }
.billing-empty__icon[b-h6jmll32xh] { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--pt-radius-lg);
    background: var(--pt-line-100); color: var(--pt-text-secondary); font-size: 20px; }
.billing-empty h3[b-h6jmll32xh] { margin: var(--pt-space-2) 0 var(--pt-space-1); font-family: var(--pt-font-display); font-size: 16px; color: var(--pt-ink-900); }
.billing-empty p[b-h6jmll32xh] { margin: 0 auto; max-width: 44ch; color: var(--pt-text-secondary); font-size: 14px; }

.billing-account__skeleton[b-h6jmll32xh] { display: grid; gap: 10px; }
.billing-account__skeleton span[b-h6jmll32xh] { display: block; height: 64px; border-radius: var(--pt-radius-lg); background: var(--pt-line-100); }
/* /Components/Pages/Deals/DealDisputeDialog.razor.rz.scp.css */
/* No `display` on .dispute itself: a closed native <dialog> must stay display:none (see ConfirmDialog.razor.css). */
.dispute[b-922pg5swjy] { flex-direction: column; width: min(500px, 92vw); max-height: calc(100dvh - 60px); padding: 0; overflow: hidden;
    border: 1px solid var(--pt-radio-card-border); border-radius: 14px; background: var(--pt-surface); color: var(--pt-ink-900);
    box-shadow: var(--pt-shadow-panel); font-family: var(--pt-font-body); }
.dispute[open][b-922pg5swjy] { display: flex; animation: dispute-rise-b-922pg5swjy var(--pt-dur-base) var(--pt-ease-soft); }
.dispute[b-922pg5swjy]::backdrop { background: oklch(from var(--pt-ink-900) l c h / .55); }
@keyframes dispute-rise-b-922pg5swjy { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .dispute[open][b-922pg5swjy] { animation: none; } }

.dispute__head[b-922pg5swjy] { padding: var(--pt-space-5) var(--pt-space-6) var(--pt-space-2); }
.dispute__head h2[b-922pg5swjy] { margin: 0; font-family: var(--pt-font-display); font-size: 20px; color: var(--pt-ink-900); }
.dispute__body[b-922pg5swjy] { display: grid; gap: var(--pt-space-3); padding: var(--pt-space-2) var(--pt-space-6) var(--pt-space-4); overflow-y: auto; font-size: 14px; }
.dispute__summary[b-922pg5swjy] { padding: 10px 12px; border: var(--pt-border-card); border-radius: var(--pt-radius-md); background: var(--pt-app-bg); font-size: 13.5px; }
.dispute__body .field[b-922pg5swjy] { margin-bottom: 0; }
.dispute__deadline[b-922pg5swjy] { display: flex; gap: var(--pt-space-2); align-items: center; margin: 0; color: var(--pt-text-secondary); font-size: 13px; }
.dispute__foot[b-922pg5swjy] { display: flex; justify-content: flex-end; gap: var(--pt-space-2); padding: 14px var(--pt-space-6); border-top: var(--pt-border-card); background: var(--pt-app-bg); }
/* /Components/Pages/Deals/DealOfferDrawer.razor.rz.scp.css */
.deal-drawer[b-5usybuck29] { background: var(--pt-surface); border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-lg); box-shadow: var(--pt-shadow-panel);
    display: flex; flex-direction: column; min-width: 0; position: sticky; top: var(--pt-space-4); max-height: calc(100vh - 2 * var(--pt-space-4));
    animation: deal-drawer-in-b-5usybuck29 var(--pt-dur-base) var(--pt-ease-soft) both; }
.deal-drawer:focus[b-5usybuck29] { outline: none; }
.deal-drawer__head[b-5usybuck29] { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--pt-space-3); padding: 20px 20px 12px; }
.deal-drawer__eyebrow[b-5usybuck29] { margin: 0 0 2px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pt-text-muted); }
.deal-drawer h2[b-5usybuck29] { margin: 0; font-family: var(--pt-font-display); font-size: 20px; color: var(--pt-ink-900); overflow-wrap: anywhere; }
.deal-drawer__close[b-5usybuck29] { width: var(--pt-action-min-height); height: var(--pt-action-min-height); border: 0; background: transparent; border-radius: var(--pt-radius-md);
    color: var(--pt-text-secondary); cursor: pointer; flex: none; }
.deal-drawer__close:focus-visible[b-5usybuck29] { outline: 2px solid var(--pt-forest-600); outline-offset: 2px; }
.deal-drawer__body[b-5usybuck29] { flex: 1; overflow-y: auto; padding: 0 20px 16px; display: flex; flex-direction: column; gap: var(--pt-space-4); }
.deal-drawer__body .field-summary[b-5usybuck29] { margin-bottom: 0; }
.deal-drawer__foot[b-5usybuck29] { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--pt-space-2); padding: 14px 20px; border-top: 1px solid var(--pt-line-200); background: var(--pt-app-bg);
    border-radius: 0 0 var(--pt-radius-lg) var(--pt-radius-lg); }
.deal-drawer__summary[b-5usybuck29] { flex-basis: 100%; margin: 0; }

.deal-presets[b-5usybuck29] { display: flex; gap: 6px; flex-wrap: wrap; }
.deal-presets button[b-5usybuck29] { min-height: 36px; padding: 0 12px; border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-pill); background: var(--pt-surface);
    color: var(--pt-text-secondary); font: 800 13px var(--pt-font-body); cursor: pointer; font-variant-numeric: tabular-nums;
    transition: background var(--pt-dur-hover) var(--pt-ease-soft), border-color var(--pt-dur-hover) var(--pt-ease-soft); }
.deal-presets button[aria-pressed="true"][b-5usybuck29] { background: var(--pt-available-tint); border-color: var(--pt-forest-600); color: var(--pt-on-success); }
.deal-custom[b-5usybuck29] { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--pt-text-secondary); }
.deal-custom .field__control[b-5usybuck29] { width: 72px; min-height: 36px; height: 36px; padding: 0 10px; border-radius: var(--pt-radius-pill); text-align: center; }
/* No spinner arrows: they crowd a two-digit number in a chip-sized field. */
.deal-custom .field__control[b-5usybuck29] { appearance: textfield; -moz-appearance: textfield; }
.deal-custom .field__control[b-5usybuck29]::-webkit-inner-spin-button, .deal-custom .field__control[b-5usybuck29]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.deal-days[b-5usybuck29] { display: flex; gap: 4px; }
.deal-days button[b-5usybuck29] { flex: 1; min-width: 0; min-height: 40px; border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-md); background: var(--pt-surface);
    color: var(--pt-text-secondary); font: 800 13px var(--pt-font-body); cursor: pointer;
    transition: background var(--pt-dur-hover) var(--pt-ease-soft), border-color var(--pt-dur-hover) var(--pt-ease-soft); }
.deal-days button.is-on[b-5usybuck29] { background: var(--pt-available-tint); border-color: var(--pt-forest-600); color: var(--pt-on-success); }
.deal-presets button:focus-visible[b-5usybuck29], .deal-days button:focus-visible[b-5usybuck29] { outline: 2px solid var(--pt-forest-600); outline-offset: 2px; }

.deal-three[b-5usybuck29] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pt-space-3); }
/* Fills the drawer like the fields around it, three equal options instead of a short strip on the left. The
   filled pill slides to the chosen option (--active is its index) instead of jumping. */
.deal-validity[b-5usybuck29] { display: flex; position: relative; isolation: isolate; }
.deal-validity[b-5usybuck29]::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: calc(100% / 3); z-index: -1;
    background: var(--pt-forest-700); transform: translateX(calc(var(--active, 0) * 100%));
    transition: transform var(--pt-dur-base) var(--pt-ease-glide);
}
.deal-validity .capy-segmented__option[b-5usybuck29] { flex: 1; transition: color var(--pt-dur-base) var(--pt-ease-glide); }
.deal-validity .capy-segmented__option[aria-pressed="true"][b-5usybuck29] { background: transparent; }
/* What a validity reveals (the dates, the days) eases in rather than popping. */
.deal-reveal[b-5usybuck29] { animation: deal-reveal-b-5usybuck29 var(--pt-dur-base) var(--pt-ease-enter); }
@keyframes deal-reveal-b-5usybuck29 { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
    .deal-validity[b-5usybuck29]::before, .deal-validity .capy-segmented__option[b-5usybuck29] { transition: none; }
    .deal-reveal[b-5usybuck29] { animation: none; }
}
.deal-dates[b-5usybuck29] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pt-space-3); margin-top: var(--pt-space-3); }
.deal-three label[b-5usybuck29] { display: grid; gap: 4px; min-width: 0; }

.deal-kinds[b-5usybuck29] { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--pt-space-2); }
.deal-kinds legend[b-5usybuck29] { padding: 0; margin-bottom: var(--pt-space-2); }
.deal-kinds__grid[b-5usybuck29] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pt-space-2); }
.deal-kind[b-5usybuck29] { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: var(--pt-border-card); border-radius: var(--pt-radius-md);
    background: var(--pt-surface); cursor: pointer; transition: background var(--pt-dur-hover) var(--pt-ease-soft), border-color var(--pt-dur-hover) var(--pt-ease-soft); }
.deal-kind--wide[b-5usybuck29] { grid-column: span 2; }
.deal-kind input[b-5usybuck29] { position: absolute; opacity: 0; pointer-events: none; }
.deal-kind b[b-5usybuck29] { color: var(--pt-ink-900); font-size: 14px; }
.deal-kind span[b-5usybuck29] { color: var(--pt-text-meta); font-size: 12.5px; line-height: 1.35; }
.deal-kind.is-on[b-5usybuck29] { border-color: var(--pt-forest-600); box-shadow: 0 0 0 1px var(--pt-forest-600); background: var(--pt-available-tint); }
.deal-kind:focus-within[b-5usybuck29] { outline: 2px solid var(--pt-forest-600); outline-offset: 2px; }

.deal-affix[b-5usybuck29] { display: flex; align-items: center; min-height: 44px; box-sizing: border-box; border: var(--pt-border-card); border-radius: var(--pt-radius-md);
    background: var(--pt-cream-50); overflow: hidden; }
.deal-affix:focus-within[b-5usybuck29] { border-color: var(--pt-forest-600); box-shadow: var(--pt-focus-ring); }
.deal-affix > span[b-5usybuck29] { padding: 0 10px 0 var(--pt-space-3); color: var(--pt-text-meta); font-weight: 700; font-size: 13px; white-space: nowrap; }
.deal-affix input[b-5usybuck29] { flex: 1; min-width: 0; border: 0; background: transparent; font: 14px var(--pt-font-body); color: var(--pt-ink-900); padding: 9px var(--pt-space-3) 9px 0; outline: 0; }
.deal-affix.is-error[b-5usybuck29] { border-color: var(--pt-danger); background: var(--pt-danger-surface); box-shadow: 0 0 0 3px oklch(from var(--pt-danger) l c h / .12); }
.deal-warning[b-5usybuck29] { display: flex; gap: var(--pt-space-2); margin: 0; padding: var(--pt-space-2) var(--pt-space-3); border-radius: var(--pt-radius-md);
    background: var(--pt-occupied-tint); color: var(--pt-on-warning); font-size: 12.5px; }
.deal-warning i[b-5usybuck29] { flex: none; margin-top: 2px; }
.deal-help-row[b-5usybuck29] { display: flex; justify-content: space-between; gap: var(--pt-space-2); }
.deal-counter[b-5usybuck29] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.deal-counter.is-over[b-5usybuck29] { color: var(--pt-danger); font-weight: 700; }
.deal-optional[b-5usybuck29] { margin-left: .3em; font-weight: 400; color: var(--pt-text-muted); }

.deal-preview[b-5usybuck29] { display: flex; gap: var(--pt-space-3); align-items: center; padding: var(--pt-space-3); border: var(--pt-border-card); border-radius: var(--pt-radius-md); background: var(--pt-app-bg); }
.deal-preview__text[b-5usybuck29] { display: flex; flex-direction: column; min-width: 0; font-size: 13px; color: var(--pt-text-secondary); }
.deal-preview__text b[b-5usybuck29] { font-size: 14px; color: var(--pt-ink-900); overflow-wrap: anywhere; }
.deal-preview__label[b-5usybuck29] { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pt-text-meta); }

/* The benefit tile: same width on every row, so titles line up whatever the benefit reads. */
.deal-tile[b-5usybuck29] { width: 112px; flex: none; min-height: 60px; border-radius: var(--pt-radius-md); background: var(--pt-available-tint); display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 1px; text-align: center; padding: 4px; box-sizing: border-box; }
.deal-tile b[b-5usybuck29] { font: 800 19px/1.1 var(--pt-font-display); color: var(--pt-forest-700); white-space: nowrap; }
.deal-tile span[b-5usybuck29] { font-size: 11.5px; font-weight: 700; color: var(--pt-on-success); }

@keyframes deal-drawer-in-b-5usybuck29 { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .deal-drawer[b-5usybuck29] { animation: none; } .deal-days button[b-5usybuck29], .deal-presets button[b-5usybuck29] { transition: none; } }
@media (hover: none) and (pointer: coarse) { .deal-days button[b-5usybuck29], .deal-presets button[b-5usybuck29] { min-height: var(--pt-action-min-height-touch); } }

/* Below the page's two-column breakpoint the form becomes a sheet over the list instead of squeezing it. */
@media (max-width: 520px) { .deal-three[b-5usybuck29] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .deal-three label:last-child[b-5usybuck29] { grid-column: span 2; } }

@media (max-width: 1100px) {
    .deal-drawer[b-5usybuck29] { position: fixed; inset: 0 0 0 auto; width: min(460px, 100vw); max-height: none; z-index: 300; border-radius: 0; top: 0; }
    .deal-drawer__foot[b-5usybuck29] { border-radius: 0; }
}
/* /Components/Pages/Deals/DealOffersTab.razor.rz.scp.css */
.offers-layout[b-vfyy1xe5tf] { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pt-space-6); align-items: start; }
.offers-layout.has-drawer[b-vfyy1xe5tf] { grid-template-columns: minmax(0, 1fr) 400px; }
.offers-main[b-vfyy1xe5tf] { min-width: 0; }
.offers-stats[b-vfyy1xe5tf] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pt-space-3); margin-bottom: var(--pt-space-4); }
.offers-stat[b-vfyy1xe5tf] { background: var(--pt-surface); border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-lg); box-shadow: var(--pt-shadow-card); padding: var(--pt-space-3) var(--pt-space-4); }
.offers-stat small[b-vfyy1xe5tf] { display: block; color: var(--pt-text-secondary); font-weight: 700; font-size: 12px; }
.offers-stat b[b-vfyy1xe5tf] { display: block; font-family: var(--pt-font-display); font-size: 24px; color: var(--pt-ink-900); font-variant-numeric: tabular-nums; }
.offers-toolbar[b-vfyy1xe5tf] { display: flex; justify-content: space-between; align-items: center; gap: var(--pt-space-3); flex-wrap: wrap; margin-bottom: var(--pt-space-3); }
.offers-filters[b-vfyy1xe5tf] { display: flex; gap: var(--pt-space-2); flex-wrap: wrap; }
.offers-filter[b-vfyy1xe5tf] { min-height: 36px; padding: 0 var(--pt-space-3); border-radius: var(--pt-radius-pill); border: 1px solid var(--pt-line-200); background: var(--pt-surface);
    color: var(--pt-text-secondary); font: 700 13px var(--pt-font-body); cursor: pointer; }
.offers-filter.is-on[b-vfyy1xe5tf] { background: var(--pt-forest-700); border-color: var(--pt-forest-700); color: var(--pt-cream-50); }
.offers-filter:focus-visible[b-vfyy1xe5tf] { outline: 2px solid var(--pt-forest-600); outline-offset: 2px; }
.offers-error[b-vfyy1xe5tf] { color: var(--pt-danger); font-weight: 700; }
.offers-none[b-vfyy1xe5tf] { color: var(--pt-text-secondary); }

.offer-row[b-vfyy1xe5tf] { display: flex; align-items: center; gap: var(--pt-space-3); background: var(--pt-surface); border: 1px solid var(--pt-line-200);
    border-radius: var(--pt-radius-lg); box-shadow: var(--pt-shadow-card); padding: var(--pt-space-3) var(--pt-space-4); margin-bottom: 10px; min-width: 0;
    animation: offer-reveal-b-vfyy1xe5tf var(--pt-dur-base) var(--pt-ease-soft) both;
    transition: border-color var(--pt-dur-hover) var(--pt-ease-soft), box-shadow var(--pt-dur-hover) var(--pt-ease-soft); }
.offer-row.is-selected[b-vfyy1xe5tf] { border-color: var(--pt-forest-600); box-shadow: var(--pt-selected-halo); }
/* Fixed width whatever the benefit reads ("30%", "−UYU 300"), so every row's title starts at the same place. */
.offer-row__tile[b-vfyy1xe5tf] { width: 112px; min-height: 60px; flex: none; box-sizing: border-box; padding: 4px; border-radius: var(--pt-radius-lg); background: var(--pt-available-tint);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-align: center; }
.offer-row__tile b[b-vfyy1xe5tf] { font: 800 19px/1.1 var(--pt-font-display); color: var(--pt-forest-700); letter-spacing: -.01em; white-space: nowrap; }
.offer-row__tile span[b-vfyy1xe5tf] { font-size: 11.5px; font-weight: 700; color: var(--pt-on-success); }
.offer-row__open[b-vfyy1xe5tf] { all: unset; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; cursor: pointer; align-items: flex-start; }
.offer-row__open:disabled[b-vfyy1xe5tf] { cursor: default; }
.offer-row__open:focus-visible[b-vfyy1xe5tf] { outline: 2px solid var(--pt-forest-600); outline-offset: 4px; border-radius: var(--pt-radius-md); }
.offer-row__head[b-vfyy1xe5tf] { display: flex; align-items: center; gap: var(--pt-space-2); flex-wrap: wrap; }
.offer-row__title[b-vfyy1xe5tf] { font-family: var(--pt-font-display); font-weight: 700; font-size: 16px; color: var(--pt-ink-900); overflow-wrap: anywhere; }
.offer-row__meta[b-vfyy1xe5tf] { color: var(--pt-text-secondary); font-size: 13px; overflow-wrap: anywhere; }
.offer-row__desc[b-vfyy1xe5tf] { color: var(--pt-text-meta); font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.offer-row__today[b-vfyy1xe5tf] { color: var(--pt-text-muted); font-size: 12.5px; font-weight: 700; }
.offer-row__switch[b-vfyy1xe5tf] { display: flex; align-items: center; gap: var(--pt-space-2); color: var(--pt-text-secondary); font-size: 12.5px; font-weight: 700; }
.offer-row__icon[b-vfyy1xe5tf] { width: var(--pt-action-min-height); height: var(--pt-action-min-height); border: 0; background: transparent; border-radius: var(--pt-radius-md);
    color: var(--pt-text-muted); cursor: pointer; }
.offer-row__icon:hover[b-vfyy1xe5tf] { background: var(--pt-app-bg); color: var(--pt-ink-900); }
.offer-row__icon--danger:hover[b-vfyy1xe5tf] { color: var(--pt-danger); }
.offer-row__icon:focus-visible[b-vfyy1xe5tf] { outline: 2px solid var(--pt-forest-600); outline-offset: 2px; }

.offer-chip[b-vfyy1xe5tf] { display: inline-flex; align-items: center; border-radius: var(--pt-radius-chip); padding: 2px 8px; font-size: 12px; font-weight: 800;
    background: var(--pt-line-100); color: var(--pt-text-secondary); white-space: nowrap; }
.offer-chip--ok[b-vfyy1xe5tf] { background: var(--pt-available-tint); color: var(--pt-on-success); }
.offer-chip--info[b-vfyy1xe5tf] { background: var(--pt-chrome-info-tint); color: var(--pt-on-info); }
.offer-chip--warn[b-vfyy1xe5tf] { background: var(--pt-occupied-tint); color: var(--pt-on-warning); }

.offers-empty[b-vfyy1xe5tf] { max-width: 560px; margin: var(--pt-space-6) auto; padding: var(--pt-space-8) var(--pt-space-6); text-align: center; background: var(--pt-surface);
    border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-lg); box-shadow: var(--pt-shadow-card); animation: offer-reveal-b-vfyy1xe5tf var(--pt-dur-base) var(--pt-ease-soft) both; }
.offers-empty__icon[b-vfyy1xe5tf] { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--pt-radius-lg);
    background: var(--pt-available-tint); color: var(--pt-forest-700); font-size: 24px; }
.offers-empty h2[b-vfyy1xe5tf] { margin: var(--pt-space-3) 0 var(--pt-space-2); font-family: var(--pt-font-display); font-size: 20px; color: var(--pt-ink-900); }
.offers-empty p[b-vfyy1xe5tf] { margin: 0 auto var(--pt-space-4); max-width: 44ch; color: var(--pt-text-secondary); font-size: 14px; }
.offers-empty__actions[b-vfyy1xe5tf] { display: flex; justify-content: center; gap: var(--pt-space-2); flex-wrap: wrap; }
.offers-empty__actions a[b-vfyy1xe5tf] { text-decoration: none; display: inline-flex; align-items: center; }

.offers-skeleton[b-vfyy1xe5tf] { display: grid; gap: 10px; }
.offers-skeleton span[b-vfyy1xe5tf] { display: block; height: 80px; border-radius: var(--pt-radius-lg); background: linear-gradient(90deg, var(--pt-line-100), var(--pt-line-200), var(--pt-line-100));
    background-size: 200% 100%; animation: offer-shimmer-b-vfyy1xe5tf 1.3s linear infinite; }

@keyframes offer-reveal-b-vfyy1xe5tf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes offer-shimmer-b-vfyy1xe5tf { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .offer-row[b-vfyy1xe5tf], .offers-empty[b-vfyy1xe5tf], .offers-skeleton span[b-vfyy1xe5tf] { animation: none; } }
@media (hover: none) and (pointer: coarse) { .offer-row__icon[b-vfyy1xe5tf] { width: var(--pt-action-min-height-touch); height: var(--pt-action-min-height-touch); } .offers-filter[b-vfyy1xe5tf] { min-height: var(--pt-action-min-height-touch); } }
@media (max-width: 1100px) { .offers-layout.has-drawer[b-vfyy1xe5tf] { grid-template-columns: minmax(0, 1fr); } }
/* Phone: tile and text share the top row; the switch and the two icons sit on their own row below. */
@media (max-width: 640px) {
    .offers-stats[b-vfyy1xe5tf] { gap: var(--pt-space-2); }
    .offers-stat[b-vfyy1xe5tf] { padding: var(--pt-space-2) var(--pt-space-3); }
    .offers-stat small[b-vfyy1xe5tf] { font-size: 11px; }
    .offers-stat b[b-vfyy1xe5tf] { font-size: 20px; }
    .offer-row[b-vfyy1xe5tf] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: var(--pt-space-3); row-gap: var(--pt-space-2); }
    .offer-row__tile[b-vfyy1xe5tf] { width: 72px; min-height: 56px; grid-row: 1; grid-column: 1; align-self: start; }
    .offer-row__tile b[b-vfyy1xe5tf] { font-size: 16px; }
    .offer-row__tile span[b-vfyy1xe5tf] { font-size: 10.5px; }
    .offer-row__open[b-vfyy1xe5tf] { grid-row: 1; grid-column: 2 / -1; }
    .offer-row__switch[b-vfyy1xe5tf] { grid-row: 2; grid-column: 1 / 3; }
    .offer-row__icon[b-vfyy1xe5tf] { grid-row: 2; }
    .offer-row__desc[b-vfyy1xe5tf] { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* The shared toggle has no busy state: while its request runs it waits, dimmed. */
.offers-main[b-vfyy1xe5tf]  .capy-toggle:disabled { opacity: .55; cursor: progress; }
/* /Components/Pages/Deals/DealPassLookup.razor.rz.scp.css */
.pass-header[b-rxqanykp5e] { margin-bottom: 18px; }
.pass-header h1[b-rxqanykp5e] { margin: 0; font: 700 26px var(--pt-font-display); color: var(--pt-ink-900); letter-spacing: -.015em; }
.pass-header p[b-rxqanykp5e], .pass-intro p[b-rxqanykp5e] { margin: 2px 0 0; color: var(--pt-text-muted); font-size: 14px; }
.pass-tabs[b-rxqanykp5e] { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 20px; }
.pass-tabs a[b-rxqanykp5e] { display: inline-flex; align-items: center; flex: none; min-height: 38px; padding: 0 16px; border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-pill); background: var(--pt-surface); color: var(--pt-text-secondary); font-weight: 700; font-size: 14px; text-decoration: none; }
.pass-tabs a[aria-current][b-rxqanykp5e] { background: var(--pt-forest-700); border-color: var(--pt-forest-700); color: var(--pt-cream-50); }
.pass-layout[b-rxqanykp5e] { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.pass-card[b-rxqanykp5e] { flex: 1 1 420px; max-width: 640px; padding: 20px 22px; background: var(--pt-surface); border: 1px solid var(--pt-line-200); border-radius: 12px; box-shadow: var(--pt-shadow-card); display: flex; flex-direction: column; gap: 16px; }
.pass-intro h2[b-rxqanykp5e] { margin: 0; font: 700 18px var(--pt-font-display); color: var(--pt-ink-900); }
form[b-rxqanykp5e] { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
label[b-rxqanykp5e] { flex: 1 1 220px; display: grid; gap: 4px; min-width: 0; }
label > span[b-rxqanykp5e] { color: var(--pt-text-secondary); font-weight: 700; font-size: 13px; }
.code-input[b-rxqanykp5e] { height: 56px; width: 100%; box-sizing: border-box; border: 1px solid var(--pt-cream-300); border-radius: 10px; background: var(--pt-cream-50); color: var(--pt-ink-900); font: 800 26px var(--pt-font-display); letter-spacing: .18em; text-transform: uppercase; padding: 0 16px; }
/* Faint on purpose, like the approved canvas: a muted-ink placeholder reads as a typed code. */
.code-input[b-rxqanykp5e]::placeholder { color: oklch(from var(--pt-text-muted) l c h / .4); }
.code-input:focus[b-rxqanykp5e], .pass-button:focus-visible[b-rxqanykp5e], .pass-tabs a:focus-visible[b-rxqanykp5e] { outline: 2px solid var(--pt-forest-600); outline-offset: 2px; }
.pass-button[b-rxqanykp5e] { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-height: 44px; box-sizing: border-box; padding: 0 18px; border: 1px solid var(--pt-forest-700); border-radius: 8px; font: 700 14px var(--pt-font-body); cursor: pointer; }
form .pass-button[b-rxqanykp5e] { height: 56px; align-self: flex-end; }
.pass-button--primary[b-rxqanykp5e] { background: var(--pt-forest-700); color: var(--pt-cream-50); }
.pass-button--ok[b-rxqanykp5e] { background: var(--pt-success); color: var(--pt-surface); border-color: var(--pt-on-success); }
.pass-button:disabled[b-rxqanykp5e] { opacity: .6; cursor: default; }
.pass-result[b-rxqanykp5e] { border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; animation: pass-reveal-b-rxqanykp5e 220ms var(--pt-ease-soft) both; }
.pass-result--valid[b-rxqanykp5e] { background: var(--pt-available-tint); border: 1px solid var(--pt-chart-track); }
.pass-result--alreadyconfirmed[b-rxqanykp5e] { background: oklch(from var(--pt-info) l c h / .08); border: 1px solid oklch(from var(--pt-info) l c h / .3); }
.pass-result--expired[b-rxqanykp5e] { background: var(--pt-danger-surface); border: 1px solid oklch(from var(--pt-danger) l c h / .3); }
.pass-result--notfound[b-rxqanykp5e] { background: var(--pt-cream-50); border: 1px solid var(--pt-line-200); }
.pass-result h2[b-rxqanykp5e] { margin: 0; font: 700 21px var(--pt-font-display); color: var(--pt-ink-900); display: flex; align-items: center; gap: 8px; }
.pass-result--valid i[b-rxqanykp5e] { color: var(--pt-success); }
.pass-result--alreadyconfirmed i[b-rxqanykp5e] { color: var(--pt-on-info); }
.pass-result--expired i[b-rxqanykp5e] { color: var(--pt-danger); }
.pass-result--notfound i[b-rxqanykp5e] { color: var(--pt-text-muted); }
.pass-result p[b-rxqanykp5e] { margin: 0; font-size: 14px; color: var(--pt-text-strong); }
.pass-facts[b-rxqanykp5e] { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.pass-facts small[b-rxqanykp5e] { display: block; color: var(--pt-text-secondary); font-weight: 700; font-size: 12px; }
.pass-facts b[b-rxqanykp5e] { display: block; font: 700 20px/1.3 var(--pt-font-display); color: var(--pt-ink-900); overflow-wrap: anywhere; }
.pass-mobile-facts[b-rxqanykp5e] { display: none; }
aside[b-rxqanykp5e] { flex: 1 1 260px; max-width: 360px; padding: 4px; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; color: var(--pt-text-secondary); }
aside h2[b-rxqanykp5e] { margin: 0; font: 400 10.5px var(--pt-font-mono); letter-spacing: .12em; color: var(--pt-forest-600); text-transform: uppercase; }
aside p[b-rxqanykp5e] { margin: 0; }
.pass-page--staff .pass-card[b-rxqanykp5e] { border: 0; box-shadow: none; background: transparent; padding: 0; max-width: 640px; }
.pass-page--staff form[b-rxqanykp5e] { flex-direction: column; align-items: stretch; }
.pass-page--staff label[b-rxqanykp5e] { flex: auto; }
.pass-page--staff .code-input[b-rxqanykp5e] { text-align: center; height: 58px; }
.pass-page--staff form .pass-button[b-rxqanykp5e] { width: 100%; height: 48px; font-size: 15px; }
.pass-page--staff .pass-manager-detail[b-rxqanykp5e] { display: none; }
@keyframes pass-reveal-b-rxqanykp5e { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
    .pass-header h1[b-rxqanykp5e] { font-size: 24px; }
    .pass-card[b-rxqanykp5e] { min-width: 0; padding: 16px; }
    .pass-result[b-rxqanykp5e] { padding: 16px; }
    .pass-result h2[b-rxqanykp5e] { font-size: 20px; }
    .pass-page--staff .pass-facts[b-rxqanykp5e] { display: none; }
    .pass-page--staff .pass-mobile-facts[b-rxqanykp5e] { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
    .pass-mobile-facts b[b-rxqanykp5e] { font: 700 34px/1 var(--pt-font-display); color: var(--pt-ink-900); }
    .pass-mobile-facts span[b-rxqanykp5e] { font-size: 15px; font-weight: 700; }
    .pass-page--staff .pass-result .pass-button[b-rxqanykp5e] { width: 100%; min-height: 48px; }
    .pass-page--staff .pass-result--alreadyconfirmed .pass-mobile-facts[b-rxqanykp5e] { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pass-result[b-rxqanykp5e] { animation: none; } }
/* /Components/Pages/Deals/DealsPage.razor.rz.scp.css */
.deals-header[b-bmu1b5uxcu] { display: flex; align-items: flex-end; gap: var(--pt-space-4); margin-bottom: 18px; flex-wrap: wrap; }
.deals-header h1[b-bmu1b5uxcu] { margin: 0; font-family: var(--pt-font-display); font-size: 26px; letter-spacing: -.015em; color: var(--pt-ink-900); }
.deals-header p[b-bmu1b5uxcu] { margin: 2px 0 0; color: var(--pt-text-muted); font-size: 14px; }
.deals-header .deals-chip[b-bmu1b5uxcu] { margin-left: auto; }

.deals-chip[b-bmu1b5uxcu] { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--pt-radius-chip); padding: 2px 8px; font-size: 12px; font-weight: 800;
    background: var(--pt-line-100); color: var(--pt-text-secondary); white-space: nowrap; }
.deals-chip--warn[b-bmu1b5uxcu] { background: var(--pt-occupied-tint); color: var(--pt-on-warning); }
.deals-chip--ok[b-bmu1b5uxcu] { background: var(--pt-available-tint); color: var(--pt-on-success); }
.deals-chip i[b-bmu1b5uxcu] { font-size: 12px; }

/* Four pills never wrap: on a 390px phone the strip scrolls sideways instead (HoyMovil). */
.deals-tabs[b-bmu1b5uxcu] { display: flex; gap: var(--pt-space-2); margin-bottom: 20px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.deals-tabs[b-bmu1b5uxcu]::-webkit-scrollbar { display: none; }
.deals-tabs__tab[b-bmu1b5uxcu] { flex: none; display: inline-flex; align-items: center; min-height: var(--pt-action-min-height); padding: 0 var(--pt-space-4);
    border-radius: var(--pt-radius-pill); border: 1px solid var(--pt-line-200); background: var(--pt-surface); color: var(--pt-text-secondary);
    font: 700 14px var(--pt-font-body); text-decoration: none; white-space: nowrap;
    transition: background var(--pt-dur-hover) var(--pt-ease-soft), color var(--pt-dur-hover) var(--pt-ease-soft), border-color var(--pt-dur-hover) var(--pt-ease-soft); }
.deals-tabs__tab.is-on[b-bmu1b5uxcu] { background: var(--pt-forest-700); border-color: var(--pt-forest-700); color: var(--pt-cream-50); }
.deals-tabs__tab:focus-visible[b-bmu1b5uxcu] { outline: 2px solid var(--pt-forest-600); outline-offset: 2px; }
@media (hover: hover) { .deals-tabs__tab:not(.is-on):hover[b-bmu1b5uxcu] { border-color: var(--pt-cream-300); color: var(--pt-ink-900); } }
@media (hover: none) and (pointer: coarse) { .deals-tabs__tab[b-bmu1b5uxcu] { min-height: var(--pt-action-min-height-touch); } }
@media (prefers-reduced-motion: reduce) { .deals-tabs__tab[b-bmu1b5uxcu] { transition: none; } }

.deals-plan-notice[b-bmu1b5uxcu] { display: flex; align-items: center; gap: var(--pt-space-3); padding: var(--pt-space-3) var(--pt-space-4); margin-bottom: var(--pt-space-4);
    background: var(--pt-cream-50); border: 1px solid var(--pt-cream-300); border-radius: var(--pt-radius-lg); box-shadow: var(--pt-shadow-card);
    font-size: 14px; color: var(--pt-text-secondary); }
.deals-plan-notice > i[b-bmu1b5uxcu] { font-size: 18px; color: var(--pt-on-warning); }
.deals-plan-notice > span[b-bmu1b5uxcu] { flex: 1; min-width: 0; }
.deals-plan-notice b[b-bmu1b5uxcu] { color: var(--pt-ink-900); }
.deals-plan-notice__cta[b-bmu1b5uxcu] { display: inline-flex; align-items: center; justify-content: center; min-height: var(--pt-action-min-height); box-sizing: border-box; padding: 0 var(--pt-space-3);
    border: 1px solid var(--pt-forest-700); border-radius: var(--pt-radius-md); background: var(--pt-forest-700); color: var(--pt-cream-50);
    font: 700 13px var(--pt-font-body); text-decoration: none; white-space: nowrap; }
.deals-plan-notice__cta:focus-visible[b-bmu1b5uxcu] { outline: 2px solid var(--pt-forest-600); outline-offset: 2px; }
.deals-visits-heading[b-bmu1b5uxcu] { margin: var(--pt-space-6) 0 var(--pt-space-3); padding-top: var(--pt-space-4); border-top: 1px solid var(--pt-line-200); font-family: var(--pt-font-display); font-size: 18px; color: var(--pt-ink-900); }
/* /Components/Pages/Deals/DealsProfileTab.razor.rz.scp.css */
.profile-card[b-29jrwi09xc] { background: var(--pt-surface); border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-lg); box-shadow: var(--pt-shadow-card); padding: 20px; }
.profile-grid[b-29jrwi09xc] { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.profile-form[b-29jrwi09xc], .profile-qr[b-29jrwi09xc] { display: flex; flex-direction: column; gap: var(--pt-space-4); }
.profile-form .field[b-29jrwi09xc] { margin-bottom: 0; }

.profile-blockers[b-29jrwi09xc] { margin-bottom: 20px; }
.profile-blockers__head[b-29jrwi09xc] { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.profile-blockers__head i[b-29jrwi09xc] { font-size: 16px; color: var(--pt-on-warning); }
.profile-blockers h2[b-29jrwi09xc], .profile-qr h2[b-29jrwi09xc] { margin: 0; font-family: var(--pt-font-display); font-weight: 700; font-size: 18px; color: var(--pt-ink-900); }
.profile-blockers ul[b-29jrwi09xc] { list-style: none; margin: 6px 0 0; padding: 0; }
.profile-blockers li[b-29jrwi09xc] { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.profile-blockers li + li[b-29jrwi09xc] { border-top: 1px solid var(--pt-line-100); }
.profile-blockers__mark[b-29jrwi09xc] { width: 26px; height: 26px; flex: none; border-radius: 999px; display: flex; align-items: center; justify-content: center;
    background: var(--pt-available-tint); color: var(--pt-on-success); font-size: 13px; }
.profile-blockers__mark.is-missing[b-29jrwi09xc] { background: var(--pt-occupied-tint); color: var(--pt-on-warning); }
.profile-blockers__label[b-29jrwi09xc] { flex: 1; min-width: 0; font-weight: 700; color: var(--pt-ink-900); font-size: 14px; }
.profile-blockers a[b-29jrwi09xc] { color: var(--pt-forest-700); font-weight: 700; font-size: 13.5px; }

.profile-publish[b-29jrwi09xc] { display: flex; align-items: center; gap: 14px; }
.profile-publish__text[b-29jrwi09xc] { flex: 1; min-width: 0; font-size: 13.5px; color: var(--pt-text-secondary); }
.profile-publish__text b[b-29jrwi09xc] { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-family: var(--pt-font-display); font-size: 18px; color: var(--pt-ink-900); }
.profile-publish__toggle:disabled[b-29jrwi09xc] { opacity: .55; cursor: not-allowed; }

.profile-help-row[b-29jrwi09xc] { display: flex; justify-content: space-between; gap: var(--pt-space-3); }
.profile-counter[b-29jrwi09xc] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.profile-optional[b-29jrwi09xc] { font-weight: 400; color: var(--pt-text-muted); }
.profile-mode[b-29jrwi09xc] { align-self: flex-start; justify-self: start; margin-bottom: 4px; }
.profile-mode .capy-segmented__option[b-29jrwi09xc] { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }

.settings-upload-row[b-29jrwi09xc] {
    display: flex;
    align-items: flex-start;
    gap: var(--pt-space-3);
    margin-bottom: 0;
    padding: var(--pt-space-4) 0;
    border-bottom: var(--pt-border-row);
}

.settings-upload-row:first-child[b-29jrwi09xc] { padding-top: 0; }
.settings-upload-row:last-child[b-29jrwi09xc] { border-bottom: 0; }

.settings-upload-thumb[b-29jrwi09xc] {
    display: grid;
    flex: none;
    place-items: center;
    width: 62px;
    height: 62px;
    overflow: hidden;
    border-radius: var(--pt-radius-lg);
    background: var(--pt-available-tint);
    color: var(--pt-forest-600);
}

.settings-upload-thumb--banner[b-29jrwi09xc] { width: 96px; height: 40px; border-radius: var(--pt-radius-md); }

.settings-upload-thumb--empty[b-29jrwi09xc] { background: var(--pt-row-divider); color: var(--pt-unavailable-icon); }

.settings-upload-thumb img[b-29jrwi09xc] { width: 100%; height: 100%; object-fit: cover; }

.settings-upload-meta[b-29jrwi09xc] { display: grid; gap: 3px; min-width: 0; }

.settings-upload-label[b-29jrwi09xc] { color: var(--pt-text-strong); font: 800 12.5px var(--pt-font-body); }

.settings-upload-hint[b-29jrwi09xc] { margin: 0; color: var(--pt-text-meta); font-size: 12px; line-height: 1.45; }

.settings-upload-actions[b-29jrwi09xc] { display: flex; gap: var(--pt-space-2); margin-top: var(--pt-space-1); }

/* InputFile renders its own <input> deep inside the <label>; ::deep reaches past this file's
   scoping isolation the same way MenuItemEditor.razor.css's .drawer-item-editor__file already
   does for the identical pattern. */
.settings-upload-row[b-29jrwi09xc]  .settings-upload-file {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}


.profile-photo[b-29jrwi09xc] { scroll-margin-top: var(--pt-space-4); }
.profile-photo__fallback[b-29jrwi09xc] { opacity: .55; }
.profile-photo__upload[b-29jrwi09xc] { position: relative; }
.profile-photo__upload:focus-within[b-29jrwi09xc] { box-shadow: var(--pt-focus-ring); }

.profile-pdf[b-29jrwi09xc] { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-md); background: var(--pt-cream-50); }
.profile-pdf__icon[b-29jrwi09xc] { width: 36px; height: 36px; flex: none; border-radius: var(--pt-radius-md); background: var(--pt-danger-surface); color: var(--pt-danger);
    display: flex; align-items: center; justify-content: center; font-size: 17px; }
.profile-pdf__name[b-29jrwi09xc] { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; color: var(--pt-text-secondary); }
.profile-pdf__name b[b-29jrwi09xc] { color: var(--pt-ink-900); font-size: 14px; }
.profile-pdf__name a[b-29jrwi09xc] { color: var(--pt-forest-700); font-weight: 700; }
.profile-pdf__upload[b-29jrwi09xc] { position: relative; min-height: 34px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
/* The upload spinner of Menú > Fotos (photos-spinner): scoped styles cannot share it, so it is repeated here.
   It keeps turning under reduced motion, as there: it is the only sign the upload is still going. */
.profile-spinner[b-29jrwi09xc] { display: inline-block; flex: none; width: 16px; height: 16px; box-sizing: border-box; border: 2px solid oklch(from var(--pt-forest-700) l c h / .2); border-top-color: var(--pt-forest-700); border-radius: 50%; animation: profile-spin-b-29jrwi09xc .7s linear infinite; }
@keyframes profile-spin-b-29jrwi09xc { to { transform: rotate(360deg); } }
.profile-pdf__upload:focus-within[b-29jrwi09xc] { box-shadow: var(--pt-focus-ring); }
.profile-pdf__remove[b-29jrwi09xc] { min-height: 34px; }
/* The file input stays in the tab order but is not drawn: the label around it is the button. */
.profile-pdf[b-29jrwi09xc]  .profile-upload-file { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.profile-note[b-29jrwi09xc] { margin: 0; display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--pt-radius-md); background: var(--pt-line-100); color: var(--pt-text-secondary); font-size: 13px; }
.profile-note i[b-29jrwi09xc] { font-size: 14px; margin-top: 2px; }
.profile-note a[b-29jrwi09xc] { color: var(--pt-forest-700); font-weight: 700; }

.profile-actions[b-29jrwi09xc] { display: flex; justify-content: flex-end; align-items: center; gap: var(--pt-space-3); }
.profile-saved[b-29jrwi09xc] { margin: 0; color: var(--pt-on-success); font-size: 13px; font-weight: 700; }
.profile-error[b-29jrwi09xc] { margin: 0; color: var(--pt-danger); font-size: 12.5px; font-weight: 700; }

.profile-qr > div > p[b-29jrwi09xc] { margin: 2px 0 0; font-size: 13.5px; color: var(--pt-text-secondary); }
.profile-sticker[b-29jrwi09xc] { display: flex; gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-lg); background: var(--pt-app-bg); }
.profile-sticker__preview[b-29jrwi09xc] { flex: none; width: 150px; }
.profile-sticker__preview--a6tent[b-29jrwi09xc] { width: 70px; }
.profile-sticker__preview[b-29jrwi09xc]  svg { display: block; width: 100%; height: auto; }
.profile-sticker__caption[b-29jrwi09xc] { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--pt-text-secondary); }
.profile-sticker__caption b[b-29jrwi09xc] { color: var(--pt-ink-900); }
.profile-formats[b-29jrwi09xc] { align-self: flex-start; flex-wrap: wrap; }
.profile-qr__actions[b-29jrwi09xc] { display: flex; gap: var(--pt-space-2); flex-wrap: wrap; }
.profile-qr .field__help[b-29jrwi09xc] { margin: calc(-1 * var(--pt-space-2)) 0 0; }

.profile-rotate[b-29jrwi09xc] { padding-top: 14px; border-top: 1px solid var(--pt-line-100); display: flex; align-items: center; gap: 12px; }
.profile-rotate__text[b-29jrwi09xc] { flex: 1; font-size: 13px; color: var(--pt-text-secondary); }
.profile-rotate__text b[b-29jrwi09xc] { display: block; color: var(--pt-ink-900); }

.profile-skeleton[b-29jrwi09xc] { display: grid; gap: 10px; }
.profile-skeleton span[b-29jrwi09xc] { display: block; height: 160px; border-radius: var(--pt-radius-lg); background: linear-gradient(90deg, var(--pt-line-100), var(--pt-line-200), var(--pt-line-100));
    background-size: 200% 100%; animation: profile-shimmer-b-29jrwi09xc 1.3s linear infinite; }
@keyframes profile-shimmer-b-29jrwi09xc { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .profile-skeleton span[b-29jrwi09xc] { animation: none; } }

@media (hover: none) and (pointer: coarse) {
    .profile-pdf__upload[b-29jrwi09xc], .profile-pdf__remove[b-29jrwi09xc], .profile-mode .capy-segmented__option[b-29jrwi09xc] { min-height: var(--pt-action-min-height-touch); }
}

@media (max-width: 960px) {
    .profile-grid[b-29jrwi09xc] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .profile-pdf[b-29jrwi09xc] { flex-wrap: wrap; }
    .profile-rotate[b-29jrwi09xc] { flex-direction: column; align-items: flex-start; }
}

.profile-chip[b-29jrwi09xc] { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--pt-radius-chip); padding: 2px 8px; font: 800 12px var(--pt-font-body);
    background: var(--pt-line-100); color: var(--pt-text-secondary); white-space: nowrap; }
.profile-chip--ok[b-29jrwi09xc] { background: var(--pt-available-tint); color: var(--pt-on-success); }
.profile-chip i[b-29jrwi09xc] { font-size: 12px; }
/* /Components/Pages/Deals/DealsStatementTab.razor.rz.scp.css */
.statement-bar[b-y3jyxannag] { display: flex; align-items: center; flex-wrap: wrap; gap: var(--pt-space-3); margin-bottom: var(--pt-space-3); }
.statement-bar__download[b-y3jyxannag] { margin-left: auto; }
.statement-month[b-y3jyxannag] { display: inline-flex; align-items: center; border: var(--pt-border-card); border-radius: var(--pt-radius-md); background: var(--pt-surface); }
.statement-month__label[b-y3jyxannag] { padding: 0 6px; min-width: 140px; text-align: center; font-weight: 800; color: var(--pt-ink-900); }
.statement-month__step[b-y3jyxannag] { width: 38px; height: 38px; border: 0; border-radius: var(--pt-radius-md); background: transparent; color: var(--pt-text-secondary); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; }
.statement-month__step:hover:not(:disabled)[b-y3jyxannag] { background: var(--pt-line-100); color: var(--pt-ink-900); }
.statement-month__step:disabled[b-y3jyxannag] { opacity: .4; cursor: default; }
.statement-month__step:focus-visible[b-y3jyxannag] { outline: var(--pt-focus-outline); outline-offset: 2px; }
.statement-note[b-y3jyxannag] { color: var(--pt-text-secondary); font-size: 13px; }

.statement-chip[b-y3jyxannag] { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--pt-radius-chip); padding: 2px 8px; font-size: 12px; font-weight: 800;
    background: var(--pt-line-100); color: var(--pt-text-secondary); white-space: nowrap; }
.statement-chip--ok[b-y3jyxannag] { background: var(--pt-available-tint); color: var(--pt-on-success); }
.statement-chip--info[b-y3jyxannag] { background: var(--pt-chrome-info-tint); color: var(--pt-on-info); }
.statement-chip--warn[b-y3jyxannag] { background: var(--pt-occupied-tint); color: var(--pt-on-warning); }

.statement-saved[b-y3jyxannag] { display: flex; align-items: center; gap: var(--pt-space-3); margin-bottom: var(--pt-space-3); padding: var(--pt-space-3) var(--pt-space-4);
    border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-lg); background: var(--pt-available-tint); color: var(--pt-on-success); }
.statement-saved__icon[b-y3jyxannag] { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 999px; background: var(--pt-surface); font-size: 18px; }
.statement-saved b[b-y3jyxannag] { display: block; font-family: var(--pt-font-display); font-size: 17px; }
.statement-saved span > span[b-y3jyxannag] { font-size: 13.5px; }

.statement-stats[b-y3jyxannag] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pt-space-3); margin-bottom: var(--pt-space-4); }
.statement-stat[b-y3jyxannag] { background: var(--pt-surface); border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-lg); box-shadow: var(--pt-shadow-card); padding: var(--pt-space-3) var(--pt-space-4); }
.statement-stat small[b-y3jyxannag] { display: block; color: var(--pt-text-secondary); font-weight: 700; font-size: 12px; }
.statement-stat b[b-y3jyxannag] { display: block; font-family: var(--pt-font-display); font-size: 24px; color: var(--pt-ink-900); font-variant-numeric: tabular-nums; }
.statement-error[b-y3jyxannag] { color: var(--pt-danger); font-weight: 700; }

.statement-card[b-y3jyxannag] { background: var(--pt-surface); border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-lg); box-shadow: var(--pt-shadow-card); overflow-x: auto;
    /* Containing block for the visually hidden header text, so it scrolls inside the card instead of widening the page. */
    position: relative; }
.statement-card table[b-y3jyxannag] { width: 100%; border-collapse: collapse; font-size: 14px; }
.statement-card thead[b-y3jyxannag] { background: var(--pt-app-bg); border-bottom: 1px solid var(--pt-line-200); }
.statement-card th[b-y3jyxannag] { padding: 10px 16px; text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pt-text-secondary); white-space: nowrap; }
.statement-card td[b-y3jyxannag] { padding: 11px 16px; border-bottom: 1px solid var(--pt-line-100); }
.statement-card .statement-num[b-y3jyxannag] { text-align: right; }
.statement-strong[b-y3jyxannag] { color: var(--pt-ink-900); font-weight: 700; }
.statement-time[b-y3jyxannag] { font-variant-numeric: tabular-nums; }
.statement-pct[b-y3jyxannag] { font-family: var(--pt-font-display); font-weight: 700; color: var(--pt-ink-900); }
.statement-benefit b[b-y3jyxannag] { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: var(--pt-radius-sm); background: var(--pt-available-tint);
    color: var(--pt-forest-700); font: 800 12.5px var(--pt-font-display); white-space: nowrap; }
.statement-benefit[b-y3jyxannag] { font-family: var(--pt-font-body); font-weight: 600; color: var(--pt-text-strong); }
.statement-fee[b-y3jyxannag] { font-weight: 800; color: var(--pt-ink-900); font-variant-numeric: tabular-nums; white-space: nowrap; }
.statement-fee s[b-y3jyxannag] { color: var(--pt-text-secondary); font-weight: 400; }
.statement-dispute[b-y3jyxannag] { min-height: 32px; padding: 0 10px; }
.statement-more[b-y3jyxannag] { color: var(--pt-text-secondary); font-size: 13px; }
.statement-more__link[b-y3jyxannag] { margin-left: var(--pt-space-2); border: 0; background: none; padding: 0; color: var(--pt-forest-700); font: 700 13px var(--pt-font-body); text-decoration: underline; cursor: pointer; }
.statement-more__link:focus-visible[b-y3jyxannag] { outline: var(--pt-focus-outline); outline-offset: 2px; }
.statement-card tfoot td[b-y3jyxannag] { border-bottom: 0; background: var(--pt-app-bg); font-weight: 800; color: var(--pt-ink-900); }
.statement-card tfoot .statement-total[b-y3jyxannag] { font-family: var(--pt-font-display); font-size: 17px; white-space: nowrap; }

.statement-empty[b-y3jyxannag] { max-width: 560px; margin: var(--pt-space-6) auto; padding: var(--pt-space-8) var(--pt-space-6); text-align: center; background: var(--pt-surface);
    border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-lg); box-shadow: var(--pt-shadow-card); }
.statement-empty__icon[b-y3jyxannag] { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--pt-radius-lg);
    background: var(--pt-available-tint); color: var(--pt-forest-700); font-size: 24px; }
.statement-empty h2[b-y3jyxannag] { margin: var(--pt-space-3) 0 var(--pt-space-2); font-family: var(--pt-font-display); font-size: 20px; color: var(--pt-ink-900); }
.statement-empty p[b-y3jyxannag] { margin: 0 auto; max-width: 44ch; color: var(--pt-text-secondary); font-size: 14px; }

.statement-skeleton[b-y3jyxannag] { display: grid; gap: 10px; }
.statement-skeleton span[b-y3jyxannag] { display: block; height: 64px; border-radius: var(--pt-radius-lg); background: linear-gradient(90deg, var(--pt-line-100), var(--pt-line-200), var(--pt-line-100));
    background-size: 200% 100%; animation: statement-shimmer-b-y3jyxannag 1.3s linear infinite; }
@keyframes statement-shimmer-b-y3jyxannag { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .statement-skeleton span[b-y3jyxannag] { animation: none; } }
@media (hover: none) and (pointer: coarse) { .statement-dispute[b-y3jyxannag] { min-height: var(--pt-action-min-height-touch); } }

@media (max-width: 640px) {
    .statement-stats[b-y3jyxannag] { gap: var(--pt-space-2); }
    .statement-stat[b-y3jyxannag] { padding: var(--pt-space-2) var(--pt-space-3); }
    .statement-stat b[b-y3jyxannag] { font-size: 18px; }
    .statement-bar__download[b-y3jyxannag] { margin-left: 0; width: 100%; }
    .statement-bar__download[b-y3jyxannag]  .capy-form-action { width: 100%; justify-content: center; }
}
/* /Components/Pages/Deals/DealsTodayTab.razor.rz.scp.css */
.today-stats[b-op0vfngcsa] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pt-space-3); margin-bottom: var(--pt-space-4); }
.today-stat[b-op0vfngcsa] { background: var(--pt-surface); border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-lg); box-shadow: var(--pt-shadow-card); padding: var(--pt-space-3) var(--pt-space-4); }
.today-stat small[b-op0vfngcsa] { display: block; color: var(--pt-text-secondary); font-weight: 700; font-size: 12px; }
.today-stat b[b-op0vfngcsa] { display: block; font-family: var(--pt-font-display); font-size: 24px; color: var(--pt-ink-900); font-variant-numeric: tabular-nums; }
.today-help[b-op0vfngcsa] { display: flex; gap: var(--pt-space-2); align-items: flex-start; margin: 0 0 var(--pt-space-3); color: var(--pt-text-secondary); font-size: 14px; }
.today-error[b-op0vfngcsa] { color: var(--pt-danger); font-weight: 700; }

.today-table[b-op0vfngcsa] { background: var(--pt-surface); border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-lg); box-shadow: var(--pt-shadow-card); overflow: hidden; }
.today-row[b-op0vfngcsa] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr) 120px minmax(0, 1.3fr) 170px; gap: var(--pt-space-3); align-items: center;
    padding: var(--pt-space-3) var(--pt-space-4); border-top: 1px solid var(--pt-line-100); min-width: 0; }
.today-row--head[b-op0vfngcsa] { border-top: 0; background: var(--pt-app-bg); color: var(--pt-text-secondary); font-size: 12px; font-weight: 800; }
.today-row__name[b-op0vfngcsa] { font-family: var(--pt-font-display); font-weight: 700; color: var(--pt-ink-900); overflow-wrap: anywhere; }
.today-row__detail[b-op0vfngcsa] { display: contents; }
.today-row__sep[b-op0vfngcsa], .today-stat__short[b-op0vfngcsa] { display: none; }
.today-row__pct b[b-op0vfngcsa] { font-variant-numeric: tabular-nums; }
.today-row__benefit b[b-op0vfngcsa] { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: var(--pt-radius-sm); background: var(--pt-available-tint);
    color: var(--pt-forest-700); font: 800 12.5px var(--pt-font-display); white-space: nowrap; }
.today-row__terms summary[b-op0vfngcsa] { cursor: pointer; color: var(--pt-forest-600); font-size: 12.5px; font-weight: 700; }
.today-row__terms p[b-op0vfngcsa] { margin: 4px 0 0; font-size: 13px; color: var(--pt-text-strong); white-space: pre-line; max-width: 60ch; }
.today-row__hours[b-op0vfngcsa] { font-variant-numeric: tabular-nums; color: var(--pt-text-secondary); }
.today-row__arrives[b-op0vfngcsa] { display: none; }
.today-row__status[b-op0vfngcsa] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pt-space-2); }
.today-row__status small[b-op0vfngcsa] { color: var(--pt-text-muted); font-weight: 700; font-size: 12px; }
.today-row__action[b-op0vfngcsa] { display: flex; justify-content: flex-end; }

.today-chip[b-op0vfngcsa] { display: inline-flex; align-items: center; border-radius: var(--pt-radius-chip); padding: 2px 8px; font-size: 12px; font-weight: 800;
    background: var(--pt-line-100); color: var(--pt-text-secondary); white-space: nowrap; }
.today-chip--ok[b-op0vfngcsa] { background: var(--pt-available-tint); color: var(--pt-on-success); }
.today-chip--info[b-op0vfngcsa] { background: var(--pt-chrome-info-tint); color: var(--pt-on-info); }
.today-chip--warn[b-op0vfngcsa] { background: var(--pt-occupied-tint); color: var(--pt-on-warning); }

.today-empty[b-op0vfngcsa] { max-width: 560px; margin: var(--pt-space-6) auto; padding: var(--pt-space-8) var(--pt-space-6); text-align: center; background: var(--pt-surface);
    border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-lg); box-shadow: var(--pt-shadow-card); }
.today-empty__icon[b-op0vfngcsa] { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--pt-radius-lg);
    background: var(--pt-available-tint); color: var(--pt-forest-700); font-size: 24px; }
.today-empty h2[b-op0vfngcsa] { margin: var(--pt-space-3) 0 var(--pt-space-2); font-family: var(--pt-font-display); font-size: 20px; color: var(--pt-ink-900); }
.today-empty p[b-op0vfngcsa] { margin: 0 auto var(--pt-space-4); max-width: 44ch; color: var(--pt-text-secondary); font-size: 14px; }
.today-empty a[b-op0vfngcsa] { text-decoration: none; display: inline-flex; align-items: center; }

.today-skeleton[b-op0vfngcsa] { display: grid; gap: 10px; }
.today-skeleton span[b-op0vfngcsa] { display: block; height: 64px; border-radius: var(--pt-radius-lg); background: linear-gradient(90deg, var(--pt-line-100), var(--pt-line-200), var(--pt-line-100));
    background-size: 200% 100%; animation: today-shimmer-b-op0vfngcsa 1.3s linear infinite; }
@keyframes today-shimmer-b-op0vfngcsa { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .today-skeleton span[b-op0vfngcsa] { animation: none; } }
@media (hover: none) and (pointer: coarse) { .today-row__action[b-op0vfngcsa]  .capy-form-action { min-height: var(--pt-action-min-height-touch); } }

/* 390-wide cards (HoyMovil): name and chip on the first line, discount and window under it, the action full width. */
@media (max-width: 640px) {
    .today-stats[b-op0vfngcsa] { gap: var(--pt-space-2); }
    .today-stat[b-op0vfngcsa] { padding: var(--pt-space-2) var(--pt-space-3); }
    .today-row--head[b-op0vfngcsa] { display: none; }
    .today-table[b-op0vfngcsa] { background: transparent; border: 0; box-shadow: none; display: grid; gap: 10px; overflow: visible; }
    .today-row[b-op0vfngcsa] { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "name status" "detail detail" "action action";
        background: var(--pt-surface); border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-lg); box-shadow: var(--pt-shadow-card); gap: var(--pt-space-2); }
    .today-row__name[b-op0vfngcsa] { grid-area: name; }
    .today-row__status[b-op0vfngcsa] { grid-area: status; justify-content: flex-end; }
    .today-row__detail[b-op0vfngcsa] { display: block; grid-area: detail; color: var(--pt-text-secondary); }
    .today-row__pct[b-op0vfngcsa], .today-row__hours[b-op0vfngcsa] { display: inline; }
    .today-row__sep[b-op0vfngcsa] { display: inline; }
    /* "Ver condiciones" breaks the line, so the hours start a line of their own: no leading dot. */
    .today-row__pct:has(.today-row__terms) + .today-row__sep[b-op0vfngcsa] { display: none; }
    .today-stat__full[b-op0vfngcsa] { display: none; }
    .today-stat__short[b-op0vfngcsa] { display: inline; }
    .today-row__arrives[b-op0vfngcsa] { display: inline; margin-right: .3em; }
    .today-row__action[b-op0vfngcsa] { grid-area: action; }
    .today-row__action:empty[b-op0vfngcsa] { display: none; }
    .today-row__action[b-op0vfngcsa]  .capy-form-action { width: 100%; justify-content: center; }
}
/* /Components/Pages/Deals/RestaurantRestrictedNotice.razor.rz.scp.css */
.restricted-notice[b-atlip4lel9] { display: flex; gap: var(--pt-space-3); align-items: flex-start; padding: var(--pt-space-4); margin-bottom: var(--pt-space-4);
    background: var(--pt-occupied-tint); border: 1px solid var(--pt-cream-300); border-radius: var(--pt-radius-lg); box-shadow: var(--pt-shadow-card);
    font-size: 14px; color: var(--pt-text-secondary); }
.restricted-notice__icon[b-atlip4lel9] { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--pt-radius-md);
    background: var(--pt-surface); color: var(--pt-on-warning); font-size: 18px; }
.restricted-notice h1[b-atlip4lel9], .restricted-notice h2[b-atlip4lel9] { margin: 0 0 var(--pt-space-1); font-family: var(--pt-font-display); font-size: 17px; color: var(--pt-ink-900); }
.restricted-notice h1[b-atlip4lel9] { font-size: 22px; }
.restricted-notice p[b-atlip4lel9] { margin: 0 0 var(--pt-space-2); }
.restricted-notice__actions[b-atlip4lel9] { display: flex; gap: var(--pt-space-2); flex-wrap: wrap; margin-top: var(--pt-space-3); }
.restricted-staff[b-atlip4lel9] { display: flex; justify-content: center; padding: var(--pt-space-8) 0; }
.restricted-notice--staff[b-atlip4lel9] { max-width: 480px; padding: var(--pt-space-6); background: var(--pt-surface); border-color: var(--pt-line-200); }
.restricted-notice--staff form[b-atlip4lel9] { margin-top: var(--pt-space-3); }
/* /Components/Pages/Help/Help.razor.rz.scp.css */
/* Capy "Ayuda y recursos" — P20 Task 5: screen frame (header + two-column grid) only, rebuilt from
   Capy Ayuda y Recursos.dc.html per the fidelity doctrine. Every value below is a --pt-* token,
   matching Settings.razor.css/Team.razor.css's own precedent for this header + grid shape. The
   MainLayout.razor.css still owns the outer padding; this file owns the Help-specific content cap
   and local layout. */

.help[b-5bd4mj3p9y] {
    box-sizing: border-box;
    width: 100%;
    max-width: calc((var(--pt-space-12) * 24) + var(--pt-space-6) + var(--pt-space-1));
    margin-inline: auto;
}

.help__header[b-5bd4mj3p9y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pt-space-4);
    margin-bottom: var(--pt-space-4);
}

.help__heading h1[b-5bd4mj3p9y] {
    margin: 0;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: var(--pt-tracking-display-l);
}

.help__heading p[b-5bd4mj3p9y] {
    margin: calc(var(--pt-space-1) * .75) 0 0;
    color: var(--pt-text-muted);
    font-size: 14px;
}

/* ── Two-column grid: matches the prototype's .capy-help-grid exactly ──────── */
.help__grid[b-5bd4mj3p9y] {
    display: grid;
    grid-template-columns: minmax(460px, 1fr) 330px;
    gap: var(--pt-space-6);
    align-items: start;
}

@media (max-width: 1180px) {
    .help__grid[b-5bd4mj3p9y] { grid-template-columns: 1fr; }
}

.help__main[b-5bd4mj3p9y],
.help__aside[b-5bd4mj3p9y] {
    display: flex;
    flex-direction: column;
    gap: var(--pt-space-6);
    min-width: 0;
}

/* ── Tutoriales (Task 6): search + category chips + filterable card grid, rebuilt from the
   prototype's Tutoriales section (search "TUTS"/"CATS"/.capy-tut-grid in the handoff file).
   Panel shell matches Settings.razor.css/MenuCategories.razor.css's own --pt-border-card +
   --pt-radius-lg precedent for a white card on the app background. ──────────────────────── */
.help__tut-panel[b-5bd4mj3p9y] {
    background: var(--pt-surface);
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-lg);
    overflow: hidden;
}

.help__tut-head[b-5bd4mj3p9y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pt-space-3);
    padding: calc(var(--pt-space-3) + (var(--pt-space-1) / 2)) var(--pt-space-4);
    border-bottom: var(--pt-border-card);
}

.help__tut-head h2[b-5bd4mj3p9y] {
    margin: 0;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: var(--pt-tracking-title);
}

.help__tut-head p[b-5bd4mj3p9y] {
    margin: var(--pt-space-1) 0 0;
    color: var(--pt-text-muted);
    font-size: 13px;
}

.help__search[b-5bd4mj3p9y] {
    display: inline-flex;
    align-items: center;
    gap: var(--pt-space-2);
    box-sizing: border-box;
    min-width: calc((var(--pt-space-3) * 17) + (var(--pt-space-3) / 2));
    min-height: var(--pt-action-min-height);
    margin-left: auto;
    padding: var(--pt-space-2) var(--pt-space-3);
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-md);
    background: var(--pt-app-bg);
    color: var(--pt-unavailable-icon);
}

.help__search input[b-5bd4mj3p9y] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-body);
    font-size: var(--pt-text-caption);
}

.help__search input[b-5bd4mj3p9y]::placeholder { color: var(--pt-unavailable-icon); }

.help__search:focus-within[b-5bd4mj3p9y] {
    outline: var(--pt-focus-outline);
    outline-offset: calc(var(--pt-space-1) / 2);
}

/* Chip dress per the brief: active forest-700/cream-50, inactive surface/text-muted/cream-300. */
.help__chips[b-5bd4mj3p9y] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pt-space-2);
    padding: calc(var(--pt-space-3) + (var(--pt-space-1) / 2)) var(--pt-space-4) 0;
}

.help__chip[b-5bd4mj3p9y] {
    min-height: calc(var(--pt-action-min-height) - (var(--pt-space-1) / 2));
    border-radius: var(--pt-radius-pill);
    padding: var(--pt-space-2) calc(var(--pt-space-3) + (var(--pt-space-1) / 2));
    color: var(--pt-text-muted);
    background: var(--pt-surface);
    border: 1px solid var(--pt-cream-300);
    font-family: var(--pt-font-body);
    font-weight: 800;
    font-size: 12.5px;
    cursor: pointer;
    transition: all var(--pt-dur-hover) var(--pt-ease-soft);
}

.help__chip[aria-pressed="true"][b-5bd4mj3p9y] {
    color: var(--pt-cream-50);
    background: var(--pt-forest-700);
    border-color: var(--pt-forest-700);
}

.help__chip:focus-visible[b-5bd4mj3p9y],
.help__tut-cta:focus-visible[b-5bd4mj3p9y] {
    outline: var(--pt-focus-outline);
    outline-offset: calc(var(--pt-space-1) / 2);
}

/* Card grid: 2 columns, collapsing to 1 under 900px — matches the prototype's own .capy-tut-grid
   media query, the same breakpoint the shell's sidebar already collapses at. */
.help__tut-grid[b-5bd4mj3p9y] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pt-space-3);
    padding: calc(var(--pt-space-3) + (var(--pt-space-1) / 2)) var(--pt-space-4) var(--pt-space-4);
}

@media (max-width: 900px) {
    .help__tut-grid[b-5bd4mj3p9y] { grid-template-columns: 1fr; }
}

.help__tut-card[b-5bd4mj3p9y] {
    padding: calc(var(--pt-space-3) + (var(--pt-space-1) / 2));
    border: var(--pt-border-card);
    border-radius: calc(var(--pt-radius-lg) - (var(--pt-space-1) / 4));
    background: var(--pt-app-bg);
    transition: border-color var(--pt-dur-color) var(--pt-ease-soft), background var(--pt-dur-color) var(--pt-ease-soft);
}

.help__tut-meta[b-5bd4mj3p9y] {
    display: flex;
    align-items: center;
    gap: var(--pt-space-2);
}

.help__tut-meta i[b-5bd4mj3p9y] {
    font-size: 13px;
    color: var(--pt-success);
}

.help__tut-meta span[b-5bd4mj3p9y] {
    font-family: var(--pt-font-mono);
    font-size: 8px;
    letter-spacing: .1em;
    color: var(--pt-unavailable-text);
}

.help__tut-card h3[b-5bd4mj3p9y] {
    display: block;
    margin: calc(var(--pt-space-2) + (var(--pt-space-1) / 4)) 0 0;
    color: var(--pt-ink-900);
    font-weight: 800;
    font-size: 14px;
    line-height: 1.35;
}

.help__tut-card p[b-5bd4mj3p9y] {
    display: block;
    margin: calc(var(--pt-space-1) + (var(--pt-space-1) / 4)) 0 0;
    color: var(--pt-text-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.help__tut-cta[b-5bd4mj3p9y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--pt-action-min-height) - (var(--pt-space-1) / 2));
    margin-top: calc(var(--pt-space-3) - (var(--pt-space-1) / 4));
    padding: var(--pt-space-2) calc(var(--pt-space-3) + (var(--pt-space-1) / 4));
    border-radius: var(--pt-radius-md);
    color: var(--pt-cream-50);
    background: var(--pt-forest-700);
    font-family: var(--pt-font-body);
    font-weight: 800;
    font-size: 12.5px;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--pt-dur-hover) var(--pt-ease-soft);
}

.help__tut-cta:hover[b-5bd4mj3p9y] { background: var(--pt-forest-600); }

.help__tut-empty[b-5bd4mj3p9y],
.help__news-empty[b-5bd4mj3p9y] {
    margin: 0;
    padding: calc(var(--pt-space-2) + (var(--pt-space-1) / 2)) var(--pt-space-4) var(--pt-space-4);
    color: var(--pt-unavailable-text);
    font-size: 13px;
}

@media (max-width: 820px) {
    .help__tut-head[b-5bd4mj3p9y] { align-items: flex-start; }
    .help__search[b-5bd4mj3p9y] { flex: 1 1 100%; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .help__chip[b-5bd4mj3p9y], .help__tut-card[b-5bd4mj3p9y], .help__tut-cta[b-5bd4mj3p9y] { transition: none; }
}

/* ── Novedades (Task 7): version header + tag pill + dated bullet list, rebuilt from the
   prototype's second .help__main card (search "Novedades" in the handoff file). Panel shell and
   header match .help__tut-panel/.help__tut-head exactly — same white-card-on-app-bg precedent. */
.help__news-panel[b-5bd4mj3p9y] {
    background: var(--pt-surface);
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-lg);
    overflow: hidden;
}

.help__news-head[b-5bd4mj3p9y] {
    display: flex;
    align-items: center;
    gap: var(--pt-space-3);
    padding: var(--pt-space-3) var(--pt-space-4);
    border-bottom: var(--pt-border-card);
}

.help__news-head h2[b-5bd4mj3p9y] {
    margin: 0;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: var(--pt-tracking-title);
}

.help__news-head p[b-5bd4mj3p9y] {
    margin: var(--pt-space-1) 0 0;
    color: var(--pt-text-muted);
    font-size: 13px;
}

.help__news-version[b-5bd4mj3p9y] {
    margin-left: auto;
    font-family: var(--pt-font-mono);
    font-size: 8px;
    letter-spacing: .1em;
    color: var(--pt-unavailable-text);
    flex: none;
}

.help__news-list[b-5bd4mj3p9y] {
    display: grid;
}

.help__news-row[b-5bd4mj3p9y] {
    padding: var(--pt-space-3) var(--pt-space-4);
}

.help__news-row:not(:last-child)[b-5bd4mj3p9y] {
    border-bottom: var(--pt-border-row);
}

.help__news-row-head[b-5bd4mj3p9y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pt-space-2);
}

.help__news-row-version[b-5bd4mj3p9y] {
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 14.5px;
    color: var(--pt-ink-900);
}

.help__news-tag[b-5bd4mj3p9y] {
    font-family: var(--pt-font-mono);
    font-size: 8px;
    letter-spacing: .1em;
    border-radius: var(--pt-radius-pill);
    padding: var(--pt-space-1) var(--pt-space-2);
}

/* Same success/warning/neutral tones as the Orders status badges (.orders-badge--*) — no fourth
   palette for a fourth screen's tag. */
.help__news-tag--success[b-5bd4mj3p9y] { color: var(--pt-on-success); background: oklch(from var(--pt-success) l c h / .14); }
.help__news-tag--warning[b-5bd4mj3p9y] { color: var(--pt-on-warning); background: oklch(from var(--pt-warning) l c h / .18); }
.help__news-tag--neutral[b-5bd4mj3p9y] { color: var(--pt-text-secondary); background: var(--pt-row-divider); }

.help__news-row-date[b-5bd4mj3p9y] {
    margin-left: auto;
    font-size: 12px;
    color: var(--pt-unavailable-text);
}

.help__news-items[b-5bd4mj3p9y] {
    margin: var(--pt-space-2) 0 0;
    padding-left: var(--pt-space-4);
    display: grid;
    gap: var(--pt-space-1);
}

.help__news-items li[b-5bd4mj3p9y] {
    font-size: 13px;
    line-height: 1.55;
    color: var(--pt-text-strong);
}

/* ── Hablar con alguien (Task 7): the screen's dark panel and its one gold element (§10's
   "at most one gold element per visible zone" rule), rebuilt from the prototype's forest-700
   support card. Border colour matches the prototype's #16211A exactly via --pt-ink-900. */
.help__support-card[b-5bd4mj3p9y] {
    display: flex;
    flex-direction: column;
    padding: var(--pt-space-3) var(--pt-space-4);
    background: var(--pt-forest-700);
    border: 1px solid var(--pt-ink-900);
    border-radius: var(--pt-radius-lg);
}

.help__support-eyebrow[b-5bd4mj3p9y] {
    font-family: var(--pt-font-mono);
    font-size: 8px;
    letter-spacing: .12em;
    color: var(--pt-moss-400);
}

.help__support-card p[b-5bd4mj3p9y] {
    margin: var(--pt-space-2) 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--pt-cream-100);
}

.help__support-card a[b-5bd4mj3p9y] {
    display: flex;
    align-items: center;
    gap: var(--pt-space-2);
    min-height: calc(var(--pt-space-12) - var(--pt-space-1));
    margin-top: var(--pt-space-2);
    border-radius: var(--pt-radius-md);
    padding: var(--pt-space-3) var(--pt-space-4);
    font-weight: 800;
    font-size: 13.5px;
    text-decoration: none;
    transition: background var(--pt-dur-hover) var(--pt-ease-soft),
                color var(--pt-dur-hover) var(--pt-ease-soft),
                transform var(--pt-dur-hover) var(--pt-ease-soft);
}

/* The link right after the intro paragraph gets the wider gap the prototype gives the first row;
   every later link keeps the tighter 8px gap between rows — this holds regardless of which of the
   three links (WhatsApp/email/public help) ends up first when one is absent. */
.help__support-card p + a[b-5bd4mj3p9y] {
    margin-top: var(--pt-space-3);
}

.help__support-whatsapp[b-5bd4mj3p9y] {
    color: var(--pt-on-gold);
    background: var(--pt-gold-400);
}

.help__support-whatsapp:hover[b-5bd4mj3p9y] {
    transform: var(--pt-lift-hover);
}

.help__support-email[b-5bd4mj3p9y] {
    color: var(--pt-cream-100);
    background: transparent;
    border: 1px solid oklch(from var(--pt-cream-50) l c h / .3);
}

.help__support-email:hover[b-5bd4mj3p9y] {
    color: var(--pt-cream-50);
    background: oklch(from var(--pt-cream-50) l c h / .1);
}

.help__support-public[b-5bd4mj3p9y] {
    color: var(--pt-moss-400);
    background: transparent;
}

.help__support-public:hover[b-5bd4mj3p9y] {
    color: var(--pt-cream-50);
}

.help__support-card a:focus-visible[b-5bd4mj3p9y] {
    outline: calc(var(--pt-space-1) / 2) solid var(--pt-gold-400);
    outline-offset: calc(var(--pt-space-1) / 2);
}

/* ── Para imprimir (Task 7): one navigation row to /qr-codes (see this task's plan for why it
   links out instead of downloading — P9's QR sheet generator already owns the print flow). Panel
   shell matches .help__tut-panel; the row reuses the prototype's own downloads-row anatomy. */
.help__print-panel[b-5bd4mj3p9y] {
    background: var(--pt-surface);
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-lg);
    overflow: hidden;
}

.help__print-head[b-5bd4mj3p9y] {
    padding: var(--pt-space-3) var(--pt-space-4);
    border-bottom: var(--pt-border-card);
}

.help__print-head h2[b-5bd4mj3p9y] {
    margin: 0;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: var(--pt-tracking-title);
}

.help__print-row[b-5bd4mj3p9y] {
    display: flex;
    align-items: center;
    gap: var(--pt-space-3);
    width: 100%;
    box-sizing: border-box;
    min-height: calc(var(--pt-space-12) + var(--pt-space-1));
    padding: var(--pt-space-3) var(--pt-space-4);
    color: inherit;
    text-decoration: none;
    transition: background var(--pt-dur-hover) var(--pt-ease-soft);
}

.help__print-row:hover[b-5bd4mj3p9y] {
    background: var(--pt-app-bg);
}

.help__print-row > i:first-child[b-5bd4mj3p9y] {
    font-size: 15px;
    width: var(--pt-space-4);
    flex: none;
    color: var(--pt-success);
}

.help__print-row > i:last-child[b-5bd4mj3p9y] {
    font-size: 13px;
    color: var(--pt-unavailable-icon);
}

.help__print-row > span[b-5bd4mj3p9y] {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.help__print-label[b-5bd4mj3p9y] {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--pt-ink-900);
}

.help__print-meta[b-5bd4mj3p9y] {
    display: block;
    margin-top: calc(var(--pt-space-1) / 2);
    font-size: 11.5px;
    color: var(--pt-unavailable-text);
}

.help__print-row:focus-visible[b-5bd4mj3p9y] {
    outline: var(--pt-focus-outline);
    outline-offset: calc(-1 * var(--pt-space-1));
}

@media (prefers-reduced-motion: reduce) {
    .help__support-card a[b-5bd4mj3p9y], .help__print-row[b-5bd4mj3p9y] { transition: none; }
}
/* /Components/Pages/Help/HelpFeedbackForm.razor.rz.scp.css */
.help__feedback-panel[b-r5gabrbltv] { background: var(--pt-surface); border: var(--pt-border-card); border-radius: var(--pt-radius-lg); overflow: hidden; }
.help__feedback-head[b-r5gabrbltv] { padding: var(--pt-space-3) var(--pt-space-4); border-bottom: var(--pt-border-card); }
.help__feedback-head h2[b-r5gabrbltv] { margin: 0; color: var(--pt-ink-900); font-family: var(--pt-font-display); font-size: var(--pt-text-subtitle); font-weight: 800; letter-spacing: var(--pt-tracking-title); }
.help__feedback-head p[b-r5gabrbltv] { margin: var(--pt-space-1) 0 0; color: var(--pt-text-muted); font-size: var(--pt-text-caption); line-height: var(--pt-leading-caption); }
.help__feedback-form[b-r5gabrbltv] { display: grid; gap: var(--pt-space-3); padding: var(--pt-space-4); }
.help__feedback-types[b-r5gabrbltv] { display: flex; flex-wrap: wrap; gap: var(--pt-space-2); }
.help__feedback-type[b-r5gabrbltv] { display: inline-flex; align-items: center; gap: var(--pt-space-2); min-height: var(--pt-action-min-height); padding: var(--pt-space-2) var(--pt-space-3); border: 1px solid var(--pt-cream-300); border-radius: var(--pt-radius-pill); background: var(--pt-surface); color: var(--pt-text-muted); font-family: var(--pt-font-body); font-size: var(--pt-text-caption); font-weight: 800; cursor: pointer; transition: background var(--pt-dur-hover) var(--pt-ease-soft), border-color var(--pt-dur-hover) var(--pt-ease-soft), color var(--pt-dur-hover) var(--pt-ease-soft); }
.help__feedback-type[aria-pressed="true"][b-r5gabrbltv] { border-color: var(--pt-forest-700); background: var(--pt-forest-700); color: var(--pt-cream-50); }
.help__feedback-prompt[b-r5gabrbltv] { color: var(--pt-ink-900); font-size: var(--pt-text-caption); font-weight: 800; }
.help__feedback-form textarea[b-r5gabrbltv] { box-sizing: border-box; width: 100%; min-height: var(--pt-space-12); max-height: calc(var(--pt-space-12) * 4); padding: var(--pt-space-3); border: var(--pt-border-card); border-radius: var(--pt-radius-md); background: var(--pt-app-bg); color: var(--pt-ink-900); font-family: var(--pt-font-body); font-size: var(--pt-text-body); line-height: var(--pt-leading-body); resize: vertical; field-sizing: content; overflow-y: auto; }
.help__feedback-form textarea[b-r5gabrbltv]::placeholder { color: var(--pt-unavailable-icon); }
.help__feedback-type:focus-visible[b-r5gabrbltv], .help__feedback-form textarea:focus-visible[b-r5gabrbltv], .help__feedback-send:focus-visible[b-r5gabrbltv] { outline: var(--pt-focus-outline); outline-offset: 2px; }
.help__feedback-error[b-r5gabrbltv] { margin: 0; padding: var(--pt-space-2) var(--pt-space-3); border-radius: var(--pt-radius-md); background: var(--pt-danger-surface); color: var(--pt-danger); font-size: var(--pt-text-caption); line-height: var(--pt-leading-caption); }
.help__feedback-actions[b-r5gabrbltv] { display: flex; justify-content: flex-end; }
.help__feedback-send[b-r5gabrbltv] { min-height: var(--pt-action-min-height); padding: var(--pt-space-2) var(--pt-space-4); border: 0; border-radius: var(--pt-radius-md); background: var(--pt-forest-700); color: var(--pt-cream-50); font-family: var(--pt-font-body); font-size: var(--pt-text-caption); font-weight: 800; cursor: pointer; transition: background var(--pt-dur-hover) var(--pt-ease-soft), color var(--pt-dur-hover) var(--pt-ease-soft); }
.help__feedback-send:hover:not(:disabled)[b-r5gabrbltv] { background: var(--pt-forest-600); }
.help__feedback-send:disabled[b-r5gabrbltv] { background: var(--pt-toggle-off); color: var(--pt-text-muted); cursor: not-allowed; }
.help__feedback-send--sent[b-r5gabrbltv], .help__feedback-send--sent:disabled[b-r5gabrbltv] { background: var(--pt-success); color: var(--pt-cream-50); }
@media (prefers-reduced-motion: reduce) { .help__feedback-type[b-r5gabrbltv], .help__feedback-send[b-r5gabrbltv] { transition: none; } }

@media (hover: none) and (pointer: coarse) {
    .help__feedback-type[b-r5gabrbltv] { min-height: var(--pt-action-min-height-touch); }
    .help__feedback-send[b-r5gabrbltv] { min-height: var(--pt-action-min-height-touch); }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Home is a Capy-migrated screen: panels use home-* classes, never .card, because app.css
   declares .card with !important and a scoped rule cannot beat it. */

/* ── Shared button dress ────────────────────────────────────── */
/* Component reference §2, Producto dress. Local to this screen until a shared sheet exists. */
.pt-btn[b-hfawntwz67] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--pt-font-body);
    font-weight: 700;
    font-size: 14px;
    line-height: normal;
    border-radius: var(--pt-radius-md);
    box-sizing: border-box;
    padding: 9px 16px;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--pt-dur-hover) var(--pt-ease-soft);
}

.pt-btn--primary[b-hfawntwz67] {
    color: var(--pt-cream-50);
    background: var(--pt-forest-700);
    border: 1px solid var(--pt-forest-700);
}

.pt-btn--primary:hover[b-hfawntwz67] {
    background: var(--pt-forest-600);
    border-color: var(--pt-forest-600);
    color: var(--pt-cream-50);
    box-shadow: 0 8px 15px oklch(from var(--pt-ink-900) l c h / .26);
    transform: translateY(-2px);
}

.pt-btn--secondary[b-hfawntwz67] {
    color: var(--pt-text-strong);
    background: transparent;
    border: 1px solid var(--pt-cream-300);
}

.pt-btn--secondary:hover[b-hfawntwz67] {
    color: var(--pt-ink-900);
    background: var(--pt-cream-100);
    box-shadow: 0 8px 15px oklch(from var(--pt-ink-900) l c h / .16);
    transform: translateY(-2px);
}

.pt-btn:active[b-hfawntwz67] { box-shadow: none; transform: translateY(0); }

/* ── Page header ────────────────────────────────────────────── */
.home-header[b-hfawntwz67] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--pt-space-4);
    margin-bottom: var(--pt-space-6);
}

.home-header__title-row[b-hfawntwz67] { display: flex; align-items: center; gap: var(--pt-space-3); }

.home-header__greeting[b-hfawntwz67] {
    margin: 0;
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 27px;
    letter-spacing: -.025em;
    color: var(--pt-ink-900);
}

.home-header__badge[b-hfawntwz67] {
    font-family: var(--pt-font-mono);
    font-size: 8px;
    letter-spacing: .1em;
    color: var(--pt-on-warning);
    background: oklch(from var(--pt-warning) l c h / .14);
    border-radius: var(--pt-radius-sm);
    padding: 4px 7px;
}

.home-header__subhead[b-hfawntwz67] {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--pt-text-secondary);
}

.home-header__subhead[b-hfawntwz67]::first-letter {
    text-transform: uppercase;
}

.home-header__actions[b-hfawntwz67] { display: flex; gap: var(--pt-space-2); }

/* ── Panels ─────────────────────────────────────────────────── */
.home-panel[b-hfawntwz67] {
    background: var(--pt-surface);
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-lg);
    box-shadow: var(--pt-shadow-card);
    overflow: hidden;
}

.home-panel__head[b-hfawntwz67] {
    display: flex;
    align-items: baseline;
    gap: var(--pt-space-3);
    padding: 15px 18px;
    border-bottom: var(--pt-border-card);
}

.home-panel__title[b-hfawntwz67] {
    margin: 0;
    font-family: var(--pt-font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--pt-ink-900);
}

.home-panel__meta[b-hfawntwz67] { margin: 0; font-size: 12px; color: var(--pt-text-meta); }

.home-panel__foot[b-hfawntwz67] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pt-space-3);
    padding: 12px 18px;
    background: var(--pt-app-bg);
    border-top: var(--pt-border-card);
    font-size: 12.5px;
    color: var(--pt-text-secondary);
}

.home-panel__foot a[b-hfawntwz67] { font-weight: 700; color: var(--pt-forest-600); text-decoration: none; }

/* ── Día 1 ──────────────────────────────────────────────────── */
.home-dayone[b-hfawntwz67] {
    max-width: 720px;
    background: var(--pt-surface);
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-lg);
    box-shadow: var(--pt-shadow-card);
    padding: 30px 32px 28px;
}

.home-dayone__badge[b-hfawntwz67] {
    font-family: var(--pt-font-mono);
    font-size: 8.5px;
    letter-spacing: .12em;
    color: var(--pt-on-warning);
    margin-bottom: var(--pt-space-3);
}

.home-dayone__title[b-hfawntwz67] {
    margin: 0 0 var(--pt-space-2);
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -.025em;
}

.home-dayone__body[b-hfawntwz67] {
    margin: 0 0 var(--pt-space-6);
    max-width: 56ch;
    font-size: 14px;
    line-height: var(--pt-leading-body);
    color: var(--pt-text-secondary);
}

.home-dayone__tasks[b-hfawntwz67] { display: grid; gap: var(--pt-space-2); }

.home-task[b-hfawntwz67] {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    border: var(--pt-border-card);
    border-radius: 10px;
    background: var(--pt-app-bg);
}

.home-task > i[b-hfawntwz67] { font-size: 16px; color: var(--pt-forest-600); flex: none; }
.home-task__text[b-hfawntwz67] { flex: 1; min-width: 0; }

.home-task__title[b-hfawntwz67] {
    display: block;
    font-family: var(--pt-font-display);
    font-weight: 700;
    font-size: 14px;
}

.home-task__body[b-hfawntwz67] {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--pt-text-secondary);
}

.home-task__action[b-hfawntwz67] { flex: none; white-space: nowrap; font-size: 12.5px; padding: 9px 14px; }

.home-dayone__cta[b-hfawntwz67] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pt-space-3);
    margin-top: var(--pt-space-6);
}

.home-dayone__note[b-hfawntwz67] { font-size: 12.5px; color: var(--pt-text-meta); }

/* ── Load failure ───────────────────────────────────────────────
   Same treatment as TableSections' .inline-error; CSS isolation is per component, so the rule
   is restated here rather than shared. */
.inline-error[b-hfawntwz67] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-sizing: border-box;
    max-width: 720px;
    margin-bottom: var(--pt-space-4);
    padding: 13px 15px;
    border: 1px solid oklch(from var(--pt-danger) l c h / .25);
    border-radius: 10px;
    background: oklch(from var(--pt-danger) l c h / .08);
}

.inline-error__icon[b-hfawntwz67] { flex: none; margin-top: 1px; color: var(--pt-danger); }
.inline-error__body[b-hfawntwz67] { display: grid; gap: 3px; min-width: 0; }
.inline-error__title[b-hfawntwz67] { color: var(--pt-on-danger); font-weight: 800; font-size: 13px; }
.inline-error__detail[b-hfawntwz67] { color: var(--pt-text-secondary); font-size: 12px; line-height: 1.5; }
.inline-error .capy-form-action[b-hfawntwz67] { flex: none; margin-left: auto; }

/* ── Attention ──────────────────────────────────────────────── */
.home-attention[b-hfawntwz67] { margin-bottom: var(--pt-space-6); }

.home-attention__head[b-hfawntwz67] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 11px;
}

.home-attention__head i[b-hfawntwz67] { color: var(--pt-warning); font-size: 14px; }

.home-attention__head h2[b-hfawntwz67] {
    margin: 0;
    font-family: var(--pt-font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -.01em;
}

.home-attention__count[b-hfawntwz67] { font-size: 12px; color: var(--pt-text-meta); }

.home-attention__grid[b-hfawntwz67] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--pt-space-3);
}

.home-att[b-hfawntwz67] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--pt-space-3);
    padding: 14px 15px;
    border-radius: 11px;
    animation: home-rise-b-hfawntwz67 var(--pt-dur-base) var(--pt-ease-soft) both;
}

@keyframes home-rise-b-hfawntwz67 {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.home-att__top[b-hfawntwz67] { display: flex; align-items: flex-start; gap: 10px; }
.home-att__top i[b-hfawntwz67] { font-size: 15px; margin-top: 2px; flex: none; }

.home-att__title[b-hfawntwz67] {
    font-family: var(--pt-font-display);
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 3px;
}

.home-att__body[b-hfawntwz67] { font-size: 12.5px; line-height: 1.5; color: var(--pt-text-secondary); }

.home-att__action[b-hfawntwz67] {
    align-self: flex-start;
    font-weight: 700;
    font-size: 12.5px;
    background: var(--pt-surface);
    border-radius: 7px;
    padding: 6px 13px;
    text-decoration: none;
    transition: background var(--pt-dur-color) var(--pt-ease-soft);
}

/* The design tints the action text with the card's own tone. That works for danger and info,
   which clear AA on white; warning (#C98A2E) reaches only ~2.4:1, so its text takes the darker
   badge foreground instead. The icon keeps the tone — the title carries the meaning. */
.home-att--warn[b-hfawntwz67] { background: oklch(from var(--pt-warning) l c h / .07); border: 1px solid oklch(from var(--pt-warning) l c h / .32); }
.home-att--warn i[b-hfawntwz67] { color: var(--pt-warning); }
.home-att--warn .home-att__action[b-hfawntwz67] { color: var(--pt-on-warning); border: 1px solid oklch(from var(--pt-warning) l c h / .32); }

.home-att--danger[b-hfawntwz67] { background: oklch(from var(--pt-danger) l c h / .06); border: 1px solid oklch(from var(--pt-danger) l c h / .30); }
.home-att--danger i[b-hfawntwz67], .home-att--danger .home-att__action[b-hfawntwz67] { color: var(--pt-danger); }
.home-att--danger .home-att__action[b-hfawntwz67] { border: 1px solid oklch(from var(--pt-danger) l c h / .30); }

.home-att--info[b-hfawntwz67] { background: oklch(from var(--pt-info) l c h / .06); border: 1px solid oklch(from var(--pt-info) l c h / .26); }
.home-att--info i[b-hfawntwz67], .home-att--info .home-att__action[b-hfawntwz67] { color: var(--pt-info); }
.home-att--info .home-att__action[b-hfawntwz67] { border: 1px solid oklch(from var(--pt-info) l c h / .26); }

/* ── Main grid ──────────────────────────────────────────────── */
.home-grid[b-hfawntwz67] {
    display: grid;
    grid-template-columns: minmax(360px, 1.35fr) minmax(300px, 1fr);
    gap: var(--pt-space-6);
    align-items: start;
}

/* The design's own collapse point, separate from the shell's 820 and 600. */
@media (max-width: 1100px) {
    .home-grid[b-hfawntwz67] { grid-template-columns: 1fr; }
}

.home-side[b-hfawntwz67] { display: flex; flex-direction: column; gap: var(--pt-space-6); }

/* ── Today's plan ───────────────────────────────────────────── */
.home-plan__rows[b-hfawntwz67] { display: grid; }

.home-plan__row[b-hfawntwz67] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--pt-cream-100);
}

.home-plan__time[b-hfawntwz67] { width: 54px; flex: none; text-align: right; }

.home-plan__hour[b-hfawntwz67] {
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.home-plan__rel[b-hfawntwz67] { font-size: 10.5px; color: var(--pt-text-meta); }

.home-plan__dot[b-hfawntwz67] { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.home-plan__dot--seated[b-hfawntwz67] { background: var(--pt-on-success); }
.home-plan__dot--confirmed[b-hfawntwz67] { background: var(--pt-on-info); }
.home-plan__dot--pending[b-hfawntwz67] { background: var(--pt-on-warning); }
.home-plan__dot--completed[b-hfawntwz67] { background: var(--pt-text-secondary); }

.home-plan__body[b-hfawntwz67] { flex: 1; min-width: 0; }

.home-plan__nameline[b-hfawntwz67] { display: flex; align-items: center; gap: var(--pt-space-2); flex-wrap: wrap; }
.home-plan__name[b-hfawntwz67] { font-weight: 700; font-size: 14px; }

.home-plan__detail[b-hfawntwz67] {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--pt-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-tag[b-hfawntwz67] {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--pt-radius-pill);
}

.home-tag--seated[b-hfawntwz67] { background: oklch(from var(--pt-success) l c h / .12); color: var(--pt-on-success); border: 1px solid oklch(from var(--pt-success) l c h / .28); }
.home-tag--confirmed[b-hfawntwz67] { background: oklch(from var(--pt-info) l c h / .10); color: var(--pt-on-info); border: 1px solid oklch(from var(--pt-info) l c h / .26); }
.home-tag--pending[b-hfawntwz67] { background: oklch(from var(--pt-warning) l c h / .13); color: var(--pt-on-warning); border: 1px solid oklch(from var(--pt-warning) l c h / .30); }
.home-tag--completed[b-hfawntwz67] { background: oklch(from var(--pt-neutral) l c h / .13); color: var(--pt-text-secondary); border: 1px solid oklch(from var(--pt-neutral) l c h / .28); }

.home-plan__actions[b-hfawntwz67] { display: flex; gap: 6px; flex: none; }

.home-plan__action[b-hfawntwz67] {
    font-family: var(--pt-font-body);
    font-weight: 700;
    font-size: 12px;
    border-radius: 7px;
    padding: 6px 12px;
    background: var(--pt-surface);
    color: var(--pt-text-secondary);
    border: var(--pt-border-card);
    cursor: pointer;
    transition: all var(--pt-dur-color) var(--pt-ease-soft);
}

.home-plan__action--primary[b-hfawntwz67] {
    background: var(--pt-forest-700);
    color: var(--pt-cream-50);
    border: 1px solid var(--pt-forest-700);
}

.home-plan__action:disabled[b-hfawntwz67] { opacity: .55; cursor: not-allowed; }

.home-plan__empty[b-hfawntwz67] {
    margin: 0;
    padding: 34px 18px;
    text-align: center;
    font-size: 14px;
    color: var(--pt-text-secondary);
}

/* ── Floor ──────────────────────────────────────────────────── */
.home-floor[b-hfawntwz67] { padding-bottom: var(--pt-space-4); }
.home-floor .home-panel__head[b-hfawntwz67] { border-bottom: 0; padding-bottom: 0; }

.home-floor__grid[b-hfawntwz67] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    padding: var(--pt-space-3) 18px;
}

@media (max-width: 600px) {
    .home-floor__grid[b-hfawntwz67] { grid-template-columns: repeat(4, 1fr); }
}

.home-floor__chip[b-hfawntwz67] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 4px;
    border-radius: 7px;
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-floor__chip--free[b-hfawntwz67] { background: var(--pt-app-bg); color: var(--pt-text-meta); border: var(--pt-border-card); }
.home-floor__chip--busy[b-hfawntwz67] { background: var(--pt-olive-500); color: var(--pt-surface); border: 1px solid var(--pt-olive-500); }
.home-floor__chip--paying[b-hfawntwz67] { background: var(--pt-gold-500); color: var(--pt-on-gold); border: 1px solid var(--pt-gold-500); }
.home-floor__chip--reset[b-hfawntwz67] { background: var(--pt-cream-100); color: var(--pt-text-secondary); border: 1px solid var(--pt-cream-300); }

.home-floor__legend[b-hfawntwz67] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pt-space-3);
    margin: 0;
    padding: 0 18px;
    list-style: none;
    font-size: 11.5px;
    color: var(--pt-text-secondary);
}

.home-floor__legend li[b-hfawntwz67] { display: flex; align-items: center; gap: 6px; }

.home-floor__swatch[b-hfawntwz67] { width: 9px; height: 9px; border-radius: 3px; }
.home-floor__swatch--free[b-hfawntwz67] { background: var(--pt-cream-300); }
.home-floor__swatch--busy[b-hfawntwz67] { background: var(--pt-olive-500); }
.home-floor__swatch--paying[b-hfawntwz67] { background: var(--pt-gold-500); }
.home-floor__swatch--reset[b-hfawntwz67] { background: var(--pt-neutral); }

/* ── Numbers ────────────────────────────────────────────────── */
.home-numbers[b-hfawntwz67] { padding: 16px 18px; }
.home-numbers .home-panel__title[b-hfawntwz67] { margin-bottom: 14px; }

.home-stat-rows[b-hfawntwz67] { display: grid; gap: var(--pt-space-3); }

.home-stat[b-hfawntwz67] {
    display: flex;
    align-items: baseline;
    gap: var(--pt-space-3);
    padding-bottom: 11px;
    border-bottom: 1px solid var(--pt-cream-100);
}

.home-stat__label[b-hfawntwz67] { flex: 1; font-size: 13px; color: var(--pt-text-secondary); }

.home-stat__value[b-hfawntwz67] {
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.home-stat__delta[b-hfawntwz67] { width: 46px; text-align: right; font-size: 11.5px; font-weight: 800; }
.home-stat__delta--up[b-hfawntwz67] { color: var(--pt-success); }
.home-stat__delta--down[b-hfawntwz67] { color: var(--pt-danger); }

.home-spark[b-hfawntwz67] { margin-top: 14px; }

.home-spark__head[b-hfawntwz67] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 7px;
    font-size: 11.5px;
    color: var(--pt-text-meta);
}

.home-spark__bars[b-hfawntwz67] { display: flex; align-items: flex-end; gap: 5px; height: 52px; }

.home-spark__bar[b-hfawntwz67] {
    flex: 1;
    border-radius: 3px 3px 0 0;
    background: var(--pt-chart-track);
}

.home-spark__bar--today[b-hfawntwz67] { background: var(--pt-forest-700); }

@media (prefers-reduced-motion: reduce) {
    .pt-btn[b-hfawntwz67], .home-att__action[b-hfawntwz67], .home-plan__action[b-hfawntwz67] { transition: none; }
    .pt-btn:hover[b-hfawntwz67] { transform: none; }
    .home-att[b-hfawntwz67] { animation: none; }
}

/* At 320px the plan and attention rows exceeded the pane. Stacking preserves every action. */
@media (max-width: 700px) {
    .home-plan__row[b-hfawntwz67] {
        flex-wrap: wrap;
        align-items: flex-start;
        row-gap: var(--pt-space-2);
    }

    .home-plan__actions[b-hfawntwz67] { width: 100%; }
    .home-plan__action[b-hfawntwz67] { flex: 1; }

    .home-att__top[b-hfawntwz67] { flex-wrap: wrap; }
    .home-att__body[b-hfawntwz67] { min-width: 0; }
    /* .home-att__action is an inline anchor, not a flex/grid container: text-align centers the label. */
    .home-att__action[b-hfawntwz67] { width: 100%; text-align: center; }
}

@media (hover: none) and (pointer: coarse) {
    .home-plan__action[b-hfawntwz67],
    .home-att__action[b-hfawntwz67] { min-height: var(--pt-action-min-height-touch); }

    /* "Ver todas las reservas" — real navigation, not prose. Two separate mechanisms, both
       load-bearing: min-height alone would already reach 44px, because the anchor is a flex item
       of .home-panel__foot and is therefore blockified to a plain block box regardless of its own
       `display` — that part needs nothing else. But align-items only ever affects an element's
       own flex/grid children, so on a plain block box it is a no-op; display: inline-flex is what
       turns the anchor into a flex container for its own text, which is what lets align-items
       actually centre that text inside the now-taller 44px box instead of leaving it flush with
       the top. Dropping either line keeps the tap target but loses the centring. */
    .home-panel__foot a[b-hfawntwz67] { min-height: var(--pt-action-min-height-touch); display: inline-flex; align-items: center; }

    .pt-btn[b-hfawntwz67] { min-height: var(--pt-action-min-height-touch); }
}
/* /Components/Pages/Invoicing/PendingInvoices.razor.rz.scp.css */
.invoicing-header[b-lse88s9ube] { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--pt-space-4); margin-bottom: var(--pt-space-6); flex-wrap: wrap; }
.invoicing-header h1[b-lse88s9ube] { margin: 0; font-family: var(--pt-font-display); font-size: 26px; letter-spacing: -.015em; color: var(--pt-ink-900); }
.invoicing-header p[b-lse88s9ube] { margin: 2px 0 0; color: var(--pt-text-muted); font-size: 14px; }
/* Desde, Hasta and the buttons on one row, bottoms aligned (same shape as Pedidos' custom range). */
.invoicing-export[b-lse88s9ube] { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.invoicing-export .field[b-lse88s9ube] { min-width: 150px; margin-bottom: 0; }
.invoicing-export .field__error[b-lse88s9ube] { flex-basis: 100%; margin: 0; }
.invoicing-export__prepare[aria-busy] i[b-lse88s9ube] { animation: invoicing-export-pulse-b-lse88s9ube 1.1s var(--pt-ease-glide) infinite alternate; }
@keyframes invoicing-export-pulse-b-lse88s9ube { from { opacity: 1; } to { opacity: .35; } }
.invoicing-export__download[b-lse88s9ube] { animation: capy-rise 180ms var(--pt-ease-enter) both; }
@media (prefers-reduced-motion: reduce) { .invoicing-export__prepare[aria-busy] i[b-lse88s9ube], .invoicing-export__download[b-lse88s9ube] { animation: none; } }
.invoicing-list[b-lse88s9ube] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pt-space-3); }
.invoicing-card[b-lse88s9ube] { background: var(--pt-surface); border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-lg); box-shadow: var(--pt-shadow-card); padding: var(--pt-space-4); }
.invoicing-card__head[b-lse88s9ube] { display: flex; align-items: center; gap: var(--pt-space-3); flex-wrap: wrap; font-size: 14px; color: var(--pt-text-secondary); }
.invoicing-card__head strong[b-lse88s9ube] { font-family: var(--pt-font-display); font-size: 17px; color: var(--pt-ink-900); }
.invoicing-card__kind[b-lse88s9ube] { border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-pill); padding: 0 8px; font-size: 12px; font-weight: 800; }
.invoicing-card__receiver[b-lse88s9ube] { margin: var(--pt-space-2) 0 0; font-size: 14px; color: var(--pt-text-secondary); }
.invoicing-card__lines[b-lse88s9ube] { width: 100%; margin: var(--pt-space-3) 0; border-collapse: collapse; font-size: 14px; color: var(--pt-ink-900); }
.invoicing-card__lines td[b-lse88s9ube] { padding: 4px 0; border-bottom: var(--pt-border-row); }
.invoicing-card__lines td:first-child[b-lse88s9ube] { width: 48px; white-space: nowrap; }
.invoicing-card__lines td:last-child[b-lse88s9ube] { text-align: right; font-variant-numeric: tabular-nums; }
.invoicing-card__lines tfoot td[b-lse88s9ube] { border-bottom: 0; color: var(--pt-text-secondary); }
.invoicing-card__actions[b-lse88s9ube] { display: flex; align-items: center; gap: var(--pt-space-2); flex-wrap: wrap; }
.invoicing-card__actions input[b-lse88s9ube] { flex: 1 1 200px; max-width: 280px; }
.invoicing-loading[b-lse88s9ube], .invoicing-empty[b-lse88s9ube] { color: var(--pt-text-secondary); }
.invoicing-notice[b-lse88s9ube] { color: var(--pt-text-secondary); font-weight: 700; }
.invoicing-error[b-lse88s9ube] { color: var(--pt-danger); font-weight: 700; }
/* /Components/Pages/Kitchen/ItemUnavailableModal.razor.rz.scp.css */
/* Item-unavailable modal (Task 3). Light on the otherwise-dark board — constraints: "the modal
   is light on a dark board", an intentional inversion that stops the board for the screen's most
   consequential, undoable-from-here action. Every colour below is --pt-* (the light dashboard's
   token set); nothing here reads one of the --kds-* *dark surface* properties
   KitchenDisplay.razor.css declares. The two it does take from that root, --kds-modal-shadow and
   --kds-modal-footer-bg, are this panel's own light chrome, shared with the other light panel on
   the board rather than restated in each.
   Selectors still start with .kds anyway (same rule as KitchenDisplay.razor.css and
   TicketCard.razor.css, and DarkSurfaceOverridesAreConfinedToTheKdsRoot now covers this file too)
   so this folder's dark-board confinement guarantee holds regardless of which file a class lives
   in, not because this surface is itself dark. */

.kds-oos-overlay[b-z3dq8zzxqm] {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    padding: var(--pt-space-4);
    /* Safe-area floor only today — see MainLayout.razor.css's F5 note: env() resolves to 0px
       without viewport-fit=cover, so this is exactly --pt-space-4 on every device now. */
    padding-bottom: max(var(--pt-space-4), env(safe-area-inset-bottom));
    padding-left: max(var(--pt-space-4), env(safe-area-inset-left));
    padding-right: max(var(--pt-space-4), env(safe-area-inset-right));
    background: oklch(from var(--pt-ink-900) l c h / .55);
}

.kds-oos[b-z3dq8zzxqm] {
    /* --kds-modal-shadow and --kds-modal-footer-bg are inherited from the .kds board root
       (KitchenDisplay.razor.css), which is where both light panels' shared chrome is declared.
       They used to be restated here because the other panel lived on its own route and could not
       reach them; it renders inside this board now, so the values have one home. */
    display: flex;
    width: min(560px, 92vw);
    /* dvh, not vh: a phone's dynamic toolbar and its virtual keyboard both shrink the visible
       area below 100vh, which put this panel's footer — and its primary action — out of reach. */
    max-height: calc(100dvh - 60px);
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--pt-radio-card-border);
    border-radius: 14px;
    background: var(--pt-app-bg);
    color: var(--pt-ink-900);
    box-shadow: var(--kds-modal-shadow);
    animation: kds-oos-rise-b-z3dq8zzxqm var(--pt-dur-base) var(--pt-ease-soft);
}

@keyframes kds-oos-rise-b-z3dq8zzxqm {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.kds-oos__header[b-z3dq8zzxqm] {
    display: flex;
    align-items: flex-start;
    gap: var(--pt-space-3);
    padding: var(--pt-space-6) var(--pt-space-6) var(--pt-space-4);
}

.kds-oos__icon[b-z3dq8zzxqm] {
    flex: none;
    margin-top: 2px;
    color: var(--pt-danger);
    font-size: 22px;
}

.kds-oos__title[b-z3dq8zzxqm] {
    margin: 0;
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 20px;
    color: var(--pt-ink-900);
}

.kds-oos__subtitle[b-z3dq8zzxqm] {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--pt-text-secondary);
}

/* The chosen options, on both the picker row and the confirmation header. Two same-named dishes
   are otherwise one indistinguishable pair and the cook flags the wrong one. */
.kds-oos__subtitle-options[b-z3dq8zzxqm] {
    margin: 2px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--pt-ink-900);
    overflow-wrap: break-word;
}

.kds-oos__body[b-z3dq8zzxqm] {
    min-height: 0;
    padding: 0 var(--pt-space-6) var(--pt-space-4);
    overflow-y: auto;
}

.kds-oos__eyebrow[b-z3dq8zzxqm] {
    margin: 0 0 var(--pt-space-2);
    color: var(--pt-text-meta);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.kds-oos__list[b-z3dq8zzxqm] {
    display: grid;
    max-height: 320px;
    margin: 0;
    padding: 0;
    gap: var(--pt-space-2);
    overflow-y: auto;
    list-style: none;
}

.kds-oos__row[b-z3dq8zzxqm] {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    flex-direction: column;
    gap: 2px;
    padding: 10px var(--pt-space-3);
    border: 1px solid var(--pt-radio-card-border);
    border-radius: var(--pt-radius-md);
    background: var(--pt-surface);
    color: var(--pt-ink-900);
    text-align: left;
    cursor: pointer;
    transition: background var(--pt-dur-hover) var(--pt-ease-soft),
                border-color var(--pt-dur-hover) var(--pt-ease-soft);
}

.kds-oos__row:hover[b-z3dq8zzxqm] {
    border-color: var(--pt-danger);
    background: var(--pt-danger-surface);
}

.kds-oos__row:focus-visible[b-z3dq8zzxqm] {
    outline: 0;
    box-shadow: var(--pt-focus-ring);
}

/* 15px/800, the brief's literal picker-row spec (task decision) — below the board's 18px body
   floor deliberately: this is a close-range decision list inside a modal, not text read from
   three metres across the kitchen. See the task report. */
.kds-oos__row-name[b-z3dq8zzxqm] {
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 15px;
}

.kds-oos__row-meta[b-z3dq8zzxqm] {
    font-size: 13px;
    color: var(--pt-text-secondary);
}

.kds-oos__row-options[b-z3dq8zzxqm] {
    font-size: 13px;
    font-weight: 600;
    color: var(--pt-ink-900);
    overflow-wrap: break-word;
}

/* The one sentence the cook must read before the destructive click — held to the 18px floor even
   though the rows above it are not, because this is the text the confirm button's consequence
   turns on. */
.kds-oos__consequence[b-z3dq8zzxqm] {
    display: flex;
    align-items: flex-start;
    gap: var(--pt-space-2);
    margin: 0;
    padding: var(--pt-space-3);
    border-radius: var(--pt-radius-md);
    background: var(--pt-available-tint);
    color: var(--pt-ink-900);
    font-size: 18px;
    font-weight: 700;
    line-height: var(--pt-leading-subtitle);
}

.kds-oos__consequence i[b-z3dq8zzxqm] {
    flex: none;
    margin-top: 2px;
    color: var(--pt-success);
    font-size: 18px;
}

.kds-oos__footer[b-z3dq8zzxqm] {
    display: flex;
    justify-content: flex-end;
    gap: var(--pt-space-2);
    padding: var(--pt-space-4) var(--pt-space-6);
    background: var(--kds-modal-footer-bg);
    border-top: 1px solid var(--pt-radio-card-border);
}

.kds-oos__action[b-z3dq8zzxqm] {
    min-height: 46px;
    box-sizing: border-box;
    padding: 0 var(--pt-space-4);
    border-radius: var(--pt-radius-md);
    font-family: var(--pt-font-body);
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
    transition: background var(--pt-dur-hover) var(--pt-ease-soft),
                opacity var(--pt-dur-hover) var(--pt-ease-soft);
}

.kds-oos__action--secondary[b-z3dq8zzxqm] {
    border: 1px solid var(--pt-radio-card-border);
    background: var(--pt-surface);
    color: var(--pt-text-strong);
}

.kds-oos__action--secondary:hover[b-z3dq8zzxqm] { background: var(--pt-app-bg); }

.kds-oos__action--danger[b-z3dq8zzxqm] {
    border: 1px solid var(--pt-danger);
    background: var(--pt-danger);
    color: var(--pt-cream-50);
}

.kds-oos__action--danger:hover[b-z3dq8zzxqm] { opacity: .9; }

.kds-oos__action--danger:disabled[b-z3dq8zzxqm] {
    opacity: .5;
    cursor: not-allowed;
}

.kds-oos__action:focus-visible[b-z3dq8zzxqm] {
    outline: 0;
    box-shadow: var(--pt-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
    .kds-oos[b-z3dq8zzxqm] { animation: none; }
    .kds-oos__row[b-z3dq8zzxqm], .kds-oos__action[b-z3dq8zzxqm] { transition: none; }
}
/* /Components/Pages/Kitchen/KitchenDisplay.razor.rz.scp.css */
/* Capy migration of the kitchen board. The one dark screen in the management app — every rule
   below is nested under .kds, so these surface overrides cannot leak into the rest of the
   (light) dashboard. Landscape kitchen tablet, mounted and run for a full shift; 18px is the
   body-text floor (PRODUCT.md's three-metre rule), touch targets stay >= 44px.

   The live-pill and out-of-stock-button colours are the design's literal values and have no
   --pt-* equivalent (a light-surface pill recipe does not read on a near-black board), so they
   are declared once here as --kds-* custom properties — the same "declare at the .kds root,
   reference by var() everywhere else" rule this file already applies to --kds-bg/surface/border/
   text/text-dim — rather than inlined at each call site. The Submitted dot reuses --pt-gold-400
   (capy-tokens.css), the exact same hex the design specifies for it. */
.kds[b-9np5expsoe] {
    --kds-bg: oklch(18% 0.030 160);
    --kds-surface: oklch(23% 0.030 160);
    --kds-border: oklch(35% 0.025 160);
    --kds-text: oklch(93% 0.012 140);
    --kds-text-dim: oklch(70% 0.018 145);

    --kds-dot-submitted: var(--pt-gold-400);
    --kds-dot-preparing: #7ED08F;
    --kds-dot-ready: #8FC7E8;

    --kds-live-text: #C6DCB0;
    --kds-live-bg: rgba(62, 122, 75, .22);
    --kds-live-border: rgba(126, 169, 107, .4);

    --kds-oos-text: #FFD9CF;
    --kds-oos-bg: rgba(168, 68, 47, .24);
    --kds-oos-border: rgba(168, 68, 47, .55);

    /* Task 2 ticket-card values (used by TicketCard.razor.css, which inherits these through the
       DOM from this .kds root). --kds-qty-bg/--kds-note-bg are gold tints derived from
       --pt-gold-400 with the same relative-colour recipe --pt-focus-ring already uses in
       capy-tokens.css, rather than restating #E0B75A's rgb() as a separate literal that would
       silently drift if the token were ever retuned. --kds-ticket-rule has no --pt-* equivalent
       (it is a one-off muted rule colour, not a reuse of any existing hue), so it stays literal,
       same reasoning as --kds-live-bg above. */
    --kds-ticket-rule: rgba(185, 199, 182, .22);
    --kds-qty-bg: oklch(from var(--pt-gold-400) l c h / .16);
    --kds-note-bg: oklch(from var(--pt-gold-400) l c h / .10);

    /* The two light overlay panels on this board (ItemUnavailableModal, MenuStockModal) share
       these. Neither has a --pt-* equivalent: no --pt-* shadow is this deep, and no --pt-cream-*
       equals #F5F2E9 (its nearest neighbours are cream-100 #F7F1E3 and cream-200 #EFE6D2). They
       were declared twice, once per modal, while the stock panel was still a separate route and
       could not inherit anything from here. It is a child of this element now, so both panels take
       them from the DOM and the values exist in one place — see
       ModalChromeValuesAreDeclaredOnceOnTheBoardRoot. */
    --kds-modal-shadow: 0 30px 70px rgba(4, 12, 8, .5);
    --kds-modal-footer-bg: #F5F2E9;

    /* Cancels .page__content's padding exactly, at every breakpoint — the same bleed the pre-Capy
       .kitchen-page used. A dark board framed by cream padding reads as a broken layout, not an
       intentional one, on a screen meant to fill a mounted tablet.

       That padding is asymmetric (22px top / --pt-content-pad sides / 34px bottom), so bleeding
       --pt-content-pad on all four sides did not cancel it: on a phone, where the token is 16px,
       it left a 6px cream strip above the board and an 18px one below it. The vertical literals
       match MainLayout's own, the way .reservations-header and .restaurant-access-header already
       spell out their -22px. */
    margin: -22px calc(-1 * var(--pt-content-pad)) -34px;
    padding: 22px var(--pt-content-pad) 34px;

    min-height: 100vh;
    background: var(--kds-bg);
    color: var(--kds-text);
    font-family: var(--pt-font-body);
    font-size: 18px;              /* three-meter floor, PRODUCT.md */
    line-height: var(--pt-leading-body);
}

/* ── Header ─────────────────────────────────────────────────── */
.kds__header[b-9np5expsoe] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--pt-space-4);
    margin-bottom: var(--pt-space-6);
}

.kds__title[b-9np5expsoe] {
    margin: 0;
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -.025em;
    color: var(--pt-cream-50);
}

.kds__header-right[b-9np5expsoe] {
    display: flex;
    align-items: center;
    gap: var(--pt-space-4);
    flex-wrap: wrap;
}

.kds__live-pill[b-9np5expsoe] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--pt-radius-pill);
    background: var(--kds-live-bg);
    border: 1px solid var(--kds-live-border);
    color: var(--kds-live-text);
    font-family: var(--pt-font-body);
    font-weight: 700;
    font-size: 18px;
}

.kds__live-dot[b-9np5expsoe] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
    background: var(--kds-live-text);
    animation: kds-pulse-b-9np5expsoe 2s var(--pt-ease-soft) infinite;
}

@keyframes kds-pulse-b-9np5expsoe {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

.kds__clock[b-9np5expsoe] {
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 26px;
    font-variant-numeric: tabular-nums;
    color: var(--pt-cream-50);
}

.kds__connection[b-9np5expsoe] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
}

.kds__connection--warn[b-9np5expsoe] { color: var(--pt-gold-400); }
.kds__connection--ok[b-9np5expsoe] { color: var(--kds-dot-preparing); }

/* ── Error banner ───────────────────────────────────────────── */
.kds__banner[b-9np5expsoe] {
    display: flex;
    align-items: center;
    gap: var(--pt-space-2);
    margin-bottom: var(--pt-space-4);
    padding: 11px 13px;
    border-radius: var(--pt-radius-md);
    background: rgba(168, 68, 47, .18);
    border: 1px solid rgba(168, 68, 47, .4);
    color: var(--kds-oos-text);
    font-size: 18px;
    font-weight: 700;
}

/* ── Action bar: the board's one destructive action, away from the tickets ──── */
.kds__actions[b-9np5expsoe] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--pt-space-3);
    margin-bottom: var(--pt-space-4);
}

.kds__filters[b-9np5expsoe] {
    display: flex;
    flex: 1 1 auto;
    gap: 10px;
    min-width: 0;
    overflow-x: auto;
    padding: 3px;
    scrollbar-color: var(--kds-border) transparent;
}

.kds__filter[b-9np5expsoe] {
    flex: none;
    min-height: 44px;
    padding: 9px 17px;
    border: 1px solid rgba(185, 199, 182, .26);
    border-radius: var(--pt-radius-pill);
    background: transparent;
    color: var(--kds-text-dim);
    font-family: var(--pt-font-body);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--pt-dur-hover) var(--pt-ease-soft),
                border-color var(--pt-dur-hover) var(--pt-ease-soft),
                color var(--pt-dur-hover) var(--pt-ease-soft);
}

/* Not on the active filter: its hover colour (light text) outranks .kds__filter--active by
   specificity and painted light text onto the active filter's light background. */
.kds__filter:hover:not(.kds__filter--active)[b-9np5expsoe] {
    border-color: rgba(185, 199, 182, .5);
    color: var(--kds-text);
}

.kds__filter--active[b-9np5expsoe] {
    border-color: var(--kds-text);
    background: var(--kds-text);
    color: var(--kds-bg);
}

.kds__filter:focus-visible[b-9np5expsoe] {
    outline: 2px solid var(--kds-text);
    outline-offset: 2px;
}

.kds__oos-button[b-9np5expsoe] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    box-sizing: border-box;
    padding: 9px 18px;
    border-radius: 10px;
    background: var(--kds-oos-bg);
    border: 1px solid var(--kds-oos-border);
    color: var(--kds-oos-text);
    font-family: var(--pt-font-body);
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
    transition: background var(--pt-dur-hover) var(--pt-ease-soft);
}

.kds__oos-button:hover[b-9np5expsoe] { background: rgba(168, 68, 47, .34); }

.kds__oos-button:focus-visible[b-9np5expsoe] {
    outline: 3px solid rgba(255, 217, 207, .5);
    outline-offset: 2px;
}

/* ── Columns ────────────────────────────────────────────────── */
.kds__columns[b-9np5expsoe] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--pt-space-4);
    align-items: start;
}

.kds__columns--filtered[b-9np5expsoe] { grid-template-columns: 1fr; }
.kds__column--filtered-out[b-9np5expsoe] { display: none; }

/* Two columns before one: a 1180px screen still fits two boards side by side, and a cook
   scanning two columns beats a cook scrolling one. */
@media (max-width: 1180px) {
    .kds__columns[b-9np5expsoe] { grid-template-columns: 1fr 1fr; }
    .kds__columns--filtered[b-9np5expsoe] { grid-template-columns: 1fr; }
}

/* Below 900px the board stacks rather than squeezing columns into a phone.
   A kitchen tablet is landscape; this is the degraded case, not the target. */
@media (max-width: 900px) { .kds__columns[b-9np5expsoe] { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 640px) {
    .kds__actions[b-9np5expsoe] { flex-wrap: wrap; }
    .kds__filters[b-9np5expsoe] { flex-basis: 100%; }
    .kds__oos-button[b-9np5expsoe] { width: 100%; justify-content: center; }
}

.kds__column[b-9np5expsoe] {
    background: var(--kds-surface);
    border: 1px solid var(--kds-border);
    border-radius: var(--pt-radius-lg);
    padding: var(--pt-space-4);
    min-height: 220px;
}

.kds__column-header[b-9np5expsoe] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--pt-space-3);
}

.kds__column-dot[b-9np5expsoe] {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex: none;
}

.kds__column--submitted .kds__column-dot[b-9np5expsoe] { background: var(--kds-dot-submitted); }
.kds__column--preparing .kds__column-dot[b-9np5expsoe] { background: var(--kds-dot-preparing); }
.kds__column--ready .kds__column-dot[b-9np5expsoe] { background: var(--kds-dot-ready); }

.kds__column-title[b-9np5expsoe] {
    flex: 1;
    margin: 0;
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 19px;
    color: var(--pt-cream-50);
}

/* Below the three-metre floor and it is fine (PRODUCT.md's floor is for body text and key
   information; a column count is neither) — see the task report for the full reasoning. */
.kds__column-count[b-9np5expsoe] {
    font-family: var(--pt-font-mono);
    font-size: 11px;
    color: var(--kds-text-dim);
}

.kds__column-empty[b-9np5expsoe] {
    margin: 0;
    padding: var(--pt-space-4) 0;
    color: var(--kds-text-dim);
    font-size: 18px;
}

.kds__column-body[b-9np5expsoe] {
    display: grid;
    gap: var(--pt-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Ticket-card rules (.kds-ticket*) live in TicketCard.razor.css, the child component this page
   renders one column-body list item per ticket into. */

@media (prefers-reduced-motion: reduce) {
    /* The live pill's dot holds steady rather than disappearing under reduced motion. */
    .kds__live-dot[b-9np5expsoe] { animation: none; opacity: 1; }
    .kds__oos-button[b-9np5expsoe],
    .kds__filter[b-9np5expsoe] { transition: none; }
}
/* /Components/Pages/Kitchen/MenuStockModal.razor.rz.scp.css */
/* The menu-stock panel, drawn from the Capy Cocina design's overlay: light card on the dark
   board, cream footer bar, dark toast under it. This was a full dark .kds route until
   2026-08-20; nothing here is dark any more except the toast, which the design draws against the
   board rather than against the card.

   Every colour is a --pt-* token (the light dashboard's set) — the same rule
   ItemUnavailableModal.razor.css states, and for the same reason: the inversion is the point, so
   reading one of the --kds-* *dark surface* properties here would fight it. The exception is the
   pair of --kds-modal-* values below, which are this panel's own light chrome, shared with the
   board's other light panel. Selectors still all start with .kds so the folder's confinement
   guarantee (DarkSurfaceOverridesAreConfinedToTheKdsRoot) covers this file.

   The 18px board floor (PRODUCT.md's three-metre rule) does not apply to the rows: this is a
   close-range decision list a cook reads with the tablet in hand, the same exception
   ItemUnavailableModal.razor.css already documents for its picker. The one sentence that states
   the consequence stays at the floor. */

.kds-stock-overlay[b-ph6hue57nw] {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    padding: var(--pt-space-6);
    /* Safe-area floor only today — see MainLayout.razor.css's F5 note: env() resolves to 0px
       without viewport-fit=cover, so this is exactly --pt-space-4 on every device now. */
    padding-bottom: max(var(--pt-space-4), env(safe-area-inset-bottom));
    padding-left: max(var(--pt-space-4), env(safe-area-inset-left));
    padding-right: max(var(--pt-space-4), env(safe-area-inset-right));
    background: oklch(from var(--pt-ink-900) l c h / .66);
}

.kds-stock[b-ph6hue57nw] {
    /* --kds-modal-shadow and --kds-modal-footer-bg come from the .kds board root
       (KitchenDisplay.razor.css) and are shared with ItemUnavailableModal — the two light panels
       on this board have the same chrome, so the values live in one place. This panel could not
       reach them while it was a separate route; as a child of the board it inherits them through
       the DOM. */
    display: flex;
    width: min(560px, 92vw);
    /* dvh, not vh: a phone's dynamic toolbar and its virtual keyboard both shrink the visible
       area below 100vh, which put this panel's footer — and its primary action — out of reach. */
    max-height: calc(100dvh - 60px);
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--pt-radio-card-border);
    border-radius: 14px;
    background: var(--pt-app-bg);
    color: var(--pt-ink-900);
    box-shadow: var(--kds-modal-shadow);
    animation: kds-stock-rise-b-ph6hue57nw var(--pt-dur-base) var(--pt-ease-soft);
}

@keyframes kds-stock-rise-b-ph6hue57nw {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Header ─────────────────────────────────────────────────── */
.kds-stock__header[b-ph6hue57nw] {
    display: flex;
    align-items: flex-start;
    gap: var(--pt-space-3);
    padding: 20px var(--pt-space-6) var(--pt-space-4);
    border-bottom: 1px solid var(--pt-radio-card-border);
}

.kds-stock__icon[b-ph6hue57nw] {
    flex: none;
    margin-top: 3px;
    color: var(--pt-danger);
    font-size: 20px;
}

.kds-stock__title[b-ph6hue57nw] {
    margin: 0 0 5px;
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -.02em;
    color: var(--pt-ink-900);
}

.kds-stock__subtitle[b-ph6hue57nw] {
    margin: 0;
    max-width: 46ch;
    color: var(--pt-text-muted);
    font-size: 14px;
    line-height: var(--pt-leading-caption);
}

/* ── Body ───────────────────────────────────────────────────── */
.kds-stock__body[b-ph6hue57nw] {
    min-height: 0;
    padding: 18px var(--pt-space-6);
    overflow-y: auto;
}

.kds-stock__banner[b-ph6hue57nw] {
    display: flex;
    align-items: flex-start;
    gap: var(--pt-space-2);
    margin-bottom: var(--pt-space-3);
    padding: var(--pt-space-3);
    border: 1px solid var(--pt-danger);
    border-radius: var(--pt-radius-md);
    background: var(--pt-danger-surface);
    color: var(--pt-danger);
    font-size: 14px;
}

/* The design sets this eyebrow in Silkscreen. The pixel face is marketing-surface brand and never
   enters the management app (CLAUDE.md's three-surface rule), so it carries over as the design's
   gold, tracking and scale in the body face instead — the same substitution
   ItemUnavailableModal.razor.css makes for its own eyebrow. */
.kds-stock__eyebrow[b-ph6hue57nw] {
    margin: 0 0 var(--pt-space-2);
    color: var(--pt-gold-500);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.kds-stock__search[b-ph6hue57nw] {
    width: 100%;
    box-sizing: border-box;
    min-height: 46px;
    margin-bottom: var(--pt-space-3);
    padding: 0 var(--pt-space-3);
    border: 1px solid var(--pt-radio-card-border);
    border-radius: 10px;
    background: var(--pt-surface);
    color: var(--pt-ink-900);
    font-family: var(--pt-font-body);
    font-size: 15px;
}

.kds-stock__search[b-ph6hue57nw]::placeholder { color: var(--pt-text-meta); }

.kds-stock__search:focus-visible[b-ph6hue57nw] {
    outline: 0;
    border-color: var(--pt-forest-600);
    box-shadow: var(--pt-focus-ring);
}

.kds-stock__empty[b-ph6hue57nw] {
    margin: 0;
    padding: var(--pt-space-6) 0;
    color: var(--pt-text-muted);
    font-size: 15px;
    text-align: center;
}

.kds-stock__list[b-ph6hue57nw] {
    display: grid;
    max-height: 320px;
    margin: 0;
    padding: 0;
    gap: var(--pt-space-2);
    overflow-y: auto;
    list-style: none;
}

.kds-stock__row[b-ph6hue57nw] {
    display: flex;
    align-items: center;
    gap: var(--pt-space-3);
    min-height: 46px;
    padding: 12px 15px;
    border: 1px solid var(--pt-radio-card-border);
    border-radius: 10px;
    background: var(--pt-surface);
    transition: border-color var(--pt-dur-hover) var(--pt-ease-soft),
                background var(--pt-dur-hover) var(--pt-ease-soft);
}

.kds-stock__row--marked[b-ph6hue57nw] {
    border-color: var(--pt-danger);
    background: var(--pt-danger-surface);
}

.kds-stock__row-info[b-ph6hue57nw] {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px var(--pt-space-2);
}

/* 15px/800: the design's literal picker-row spec, matching ItemUnavailableModal's rows so the
   board's two dish lists read as one component. */
.kds-stock__row-name[b-ph6hue57nw] {
    width: 100%;
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 15px;
}

.kds-stock__row--marked .kds-stock__row-name[b-ph6hue57nw] {
    color: var(--pt-text-muted);
    text-decoration: line-through;
}

.kds-stock__row-category[b-ph6hue57nw],
.kds-stock__row-marked[b-ph6hue57nw] {
    color: var(--pt-text-muted);
    font-size: 13px;
}

.kds-stock__badge[b-ph6hue57nw] {
    padding: 2px var(--pt-space-2);
    border-radius: var(--pt-radius-pill);
    background: var(--pt-danger);
    color: var(--pt-cream-50);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.kds-stock__action[b-ph6hue57nw] {
    flex: none;
    min-height: 46px;
    box-sizing: border-box;
    padding: 0 var(--pt-space-4);
    border-radius: 9px;
    font-family: var(--pt-font-body);
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    transition: background var(--pt-dur-hover) var(--pt-ease-soft),
                opacity var(--pt-dur-hover) var(--pt-ease-soft);
}

.kds-stock__action--mark[b-ph6hue57nw] {
    border: 1px solid var(--pt-danger);
    background: var(--pt-danger);
    color: var(--pt-cream-50);
}

.kds-stock__action--mark:hover[b-ph6hue57nw] { opacity: .9; }

.kds-stock__action--restore[b-ph6hue57nw] {
    border: 1px solid var(--pt-forest-600);
    background: var(--pt-surface);
    color: var(--pt-forest-600);
}

.kds-stock__action--restore:hover[b-ph6hue57nw] { background: var(--pt-available-tint); }

.kds-stock__action:focus-visible[b-ph6hue57nw] {
    outline: 0;
    box-shadow: var(--pt-focus-ring);
}

/* ── Footer ─────────────────────────────────────────────────── */
.kds-stock__footer[b-ph6hue57nw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--pt-space-3);
    padding: var(--pt-space-4) var(--pt-space-6);
    border-top: 1px solid var(--pt-radio-card-border);
    background: var(--kds-modal-footer-bg);
}

/* The consequence, stated not chosen: the design offers a duration picker and an "avisar al
   salón" checkbox, and neither is real here — MenuItem has no expiry (the restore job clears the
   mark at the operational day's end) and the guest menu is always updated. Rendering either as a
   control would be a lie; the sentence says what happens instead. Held to the 18px board floor,
   unlike the rows, because it is the line that justifies the button beside it. */
.kds-stock__note[b-ph6hue57nw] {
    display: flex;
    flex: 1;
    min-width: 220px;
    align-items: flex-start;
    gap: var(--pt-space-2);
    margin: 0;
    color: var(--pt-text-strong);
    font-size: 18px;
    line-height: var(--pt-leading-subtitle);
}

.kds-stock__note i[b-ph6hue57nw] {
    flex: none;
    margin-top: 2px;
    color: var(--pt-success);
    font-size: 18px;
}

.kds-stock__close[b-ph6hue57nw] {
    flex: none;
    min-height: 46px;
    box-sizing: border-box;
    padding: 0 var(--pt-space-4);
    border: 1px solid var(--pt-radio-card-border);
    border-radius: 9px;
    background: var(--pt-surface);
    color: var(--pt-text-strong);
    font-family: var(--pt-font-body);
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
    transition: background var(--pt-dur-hover) var(--pt-ease-soft);
}

.kds-stock__close:hover[b-ph6hue57nw] { background: var(--pt-app-bg); }

.kds-stock__close:focus-visible[b-ph6hue57nw] {
    outline: 0;
    box-shadow: var(--pt-focus-ring);
}

/* ── Toast ──────────────────────────────────────────────────── */
/* Dark on purpose: it lands on the board after the panel closes, not inside the light card. */
.kds-stock-toast[b-ph6hue57nw] {
    position: fixed;
    left: 50%;
    bottom: 26px;
    z-index: 310;
    display: flex;
    align-items: center;
    gap: var(--pt-space-2);
    padding: 13px 20px;
    /* Bottom-inset only: 13px is this toast's own vertical padding, kept as the floor so a
       device with no home-indicator inset (env() resolves to 0px, all of them today — see F5)
       renders identically to before. No horizontal counterpart: this is a centered pill, not an
       edge-anchored panel. */
    padding-bottom: max(13px, env(safe-area-inset-bottom));
    border: 1px solid oklch(from var(--pt-success) l c h / .45);
    border-radius: 11px;
    background: var(--pt-forest-900);
    color: var(--pt-cream-50);
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 18px 40px rgba(4, 12, 8, .5);
    transform: translateX(-50%);
    animation: kds-stock-rise-b-ph6hue57nw var(--pt-dur-base) var(--pt-ease-soft);
}

.kds-stock-toast i[b-ph6hue57nw] {
    flex: none;
    color: var(--pt-success);
    font-size: 18px;
}

@media (prefers-reduced-motion: reduce) {
    .kds-stock[b-ph6hue57nw], .kds-stock-toast[b-ph6hue57nw] { animation: none; }
    .kds-stock__row[b-ph6hue57nw], .kds-stock__action[b-ph6hue57nw], .kds-stock__close[b-ph6hue57nw] { transition: none; }
}
/* /Components/Pages/Kitchen/TicketCard.razor.rz.scp.css */
/* Ticket card, extracted out of KitchenDisplay.razor.css so the header/items/actions markup
   exists in exactly one place instead of three hand-copied blocks. Every selector below still
   starts with .kds, same rule as the parent stylesheet: the --kds-* custom properties are
   declared on the .kds root in KitchenDisplay.razor.css and inherit down through the DOM to this
   component's rendered elements regardless of Blazor's CSS-isolation scoping attribute (that
   scoping only decides which selectors apply to which elements; custom-property inheritance
   follows the real DOM tree, unaffected by it). */

.kds-ticket[b-vr54oo3s83] {
    background: var(--kds-surface);
    border: 1px solid var(--kds-border);
    border-radius: var(--pt-radius-lg);
    /* New tickets fade in and rise 8px; existing ones never move (PRODUCT.md — a ticket must
       never slide out from under a hand mid-service). Zeroed under reduced motion below. */
    animation: kds-ticket-in-b-vr54oo3s83 var(--pt-dur-base) var(--pt-ease-soft);
}

@keyframes kds-ticket-in-b-vr54oo3s83 {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* The dashed rule is deliberate — the one place a ticket reads as a docket, not a card. */
.kds-ticket__header[b-vr54oo3s83] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px dashed var(--kds-ticket-rule);
}

/* 28px, not the design's 22px: PRODUCT.md's 28-32px floor for the table number wins over the
   brief's literal value — see the task report. */
.kds-ticket__table[b-vr54oo3s83] {
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 28px;
    color: var(--pt-cream-50);
}

/* Below the 18px floor and it is fine — same reasoning as the column count (Task 1): a ticket
   code is a reference read at arm's length, not body text or a key figure a cook acts on. */
.kds-ticket__code[b-vr54oo3s83] {
    font-family: var(--pt-font-mono);
    font-size: 10px;
    color: var(--kds-text-dim);
}

.kds-ticket__timer[b-vr54oo3s83] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    margin-left: auto;
    padding: 5px 12px;
    border-radius: var(--pt-radius-pill);
    border: 1px solid var(--kds-border);
    color: var(--kds-text);
    font-family: var(--pt-font-display);
    font-weight: 600;
    font-size: 18px;
    font-variant-numeric: tabular-nums;
}

.kds-ticket__timer-icon[b-vr54oo3s83] {
    width: 1em;
    height: 1em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .8;
}

.kds-ticket__timer--warn[b-vr54oo3s83] {
    background: var(--kds-qty-bg);
    border-color: var(--pt-gold-400);
    color: var(--pt-gold-400);
}

.kds-ticket__timer--danger[b-vr54oo3s83] {
    /* Solid fill so the overdue state does not rely on hue alone (the icon is the same in every state). */
    background: var(--pt-danger);
    border-color: var(--pt-danger);
    color: var(--pt-danger-summary);
}

.kds-ticket__items[b-vr54oo3s83] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 13px 16px;
}

.kds-ticket__item[b-vr54oo3s83] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.kds-ticket__qty[b-vr54oo3s83] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    flex: none;
    border-radius: 7px;
    background: var(--kds-qty-bg);
    color: var(--pt-gold-400);
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 18px;
}

.kds-ticket__item-body[b-vr54oo3s83] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 28px, not the design's 18px: PRODUCT.md's 28-32px floor for the item name wins over the
   brief's literal value — see the task report. */
.kds-ticket__name[b-vr54oo3s83] {
    margin: 0;
    font-family: var(--pt-font-display);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.25;
    color: var(--kds-text);
}

/* The chosen options define the dish, so they read at full contrast, not as dim metadata, and
   like the note below they get no text-overflow, no line-clamp and no fixed height — a clipped
   "sin queso" is a wrong plate. Below the name's 28px but on PRODUCT.md's 18px body floor. */
.kds-ticket__options[b-vr54oo3s83] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    color: var(--kds-text);
    font-family: var(--pt-font-body);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.35;
}

.kds-ticket__options i[b-vr54oo3s83] { margin-top: 3px; color: var(--kds-text-dim); }

/* Customer notes are the highest-risk text on the screen — the gold treatment, and deliberately
   no text-overflow, no line-clamp, no fixed height anywhere near it. The card grows to fit. */
.kds-ticket__note[b-vr54oo3s83] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--kds-note-bg);
    border-left: 3px solid var(--pt-gold-400);
    color: var(--pt-gold-400);
    font-family: var(--pt-font-body);
    font-weight: 700;
    font-size: 18px;
}

.kds-ticket__note i[b-vr54oo3s83] { margin-top: 2px; }

.kds-ticket__flag[b-vr54oo3s83] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: var(--pt-radius-md);
    border: 1px solid var(--kds-border);
    background: transparent;
    color: var(--kds-text-dim);
    font-size: 16px;
    cursor: pointer;
    transition: background var(--pt-dur-hover) var(--pt-ease-soft),
                color var(--pt-dur-hover) var(--pt-ease-soft),
                border-color var(--pt-dur-hover) var(--pt-ease-soft);
}

.kds-ticket__flag:hover[b-vr54oo3s83] {
    background: var(--kds-oos-bg);
    border-color: var(--kds-oos-border);
    color: var(--kds-oos-text);
}

.kds-ticket__flag:focus-visible[b-vr54oo3s83] {
    outline: 3px solid rgba(255, 217, 207, .5);
    outline-offset: 2px;
}

.kds-ticket__actions[b-vr54oo3s83] {
    display: flex;
    gap: 9px;
    padding: 0 16px 14px;
}

/* Sized for a gloved hand (brief, Step 3). */
.kds-ticket__action[b-vr54oo3s83] {
    flex: 1;
    min-height: 48px;
    box-sizing: border-box;
    border-radius: 10px;
    font-family: var(--pt-font-body);
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
    transition: background var(--pt-dur-hover) var(--pt-ease-soft),
                color var(--pt-dur-hover) var(--pt-ease-soft),
                border-color var(--pt-dur-hover) var(--pt-ease-soft);
}

.kds-ticket__action--primary[b-vr54oo3s83] {
    background: var(--pt-forest-700);
    border: 1px solid var(--pt-forest-700);
    color: var(--pt-cream-50);
}

.kds-ticket__action--primary:hover[b-vr54oo3s83] {
    background: var(--pt-forest-600);
    border-color: var(--pt-forest-600);
}

/* Same danger-tint language as the header's out-of-stock button and the per-item flag button's
   hover state, so "this marks something unavailable" reads the same everywhere on the board.
   Every column's secondary action is this one now — Ready's "Volver a fuego" was cut (see the
   fix report: no Ready -> InPreparation domain transition exists), so there is no other variant. */
.kds-ticket__action--oos[b-vr54oo3s83] {
    background: var(--kds-oos-bg);
    border: 1px solid var(--kds-oos-border);
    color: var(--kds-oos-text);
}

.kds-ticket__action--oos:hover[b-vr54oo3s83] { background: rgba(168, 68, 47, .34); }

.kds-ticket__action:focus-visible[b-vr54oo3s83] {
    outline: 3px solid rgba(255, 217, 207, .5);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .kds-ticket[b-vr54oo3s83] { animation: none; }
    .kds-ticket__flag[b-vr54oo3s83], .kds-ticket__action[b-vr54oo3s83] { transition: none; }
}

/* .kds-ticket__flag is the per-item "sin stock" action — 34x34 today, and the control a cook
   taps most on a tablet. .kds-ticket__action is NOT raised here: it is already min-height:48px
   unconditionally ("Sized for a gloved hand", above) — 4px above this token's 44px, so a touch
   override at 44px would shrink it. .kds-ticket__qty is 32px but is a quantity badge, not a
   control. */
@media (hover: none) and (pointer: coarse) {
    .kds-ticket__flag[b-vr54oo3s83] { width: var(--pt-action-min-height-touch); height: var(--pt-action-min-height-touch); }
}
/* /Components/Pages/Menu/MenuCategories.razor.rz.scp.css */
/* Sticky so "Agregar plato" stays in reach on a long section, the same way the Configuración header
   keeps Guardar in reach (Settings.razor.css). Below 1180px the shell top bar is sticky too, so the
   header sits under it. On a phone the actions stack into a column, so it scrolls away there
   instead of covering half the screen. */
.menu-header[b-uxex8h9sow] {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--pt-space-4);
    padding: var(--pt-space-3) 0;
    margin-bottom: var(--pt-space-6);
    background: var(--pt-app-bg);
}
@media (max-width: 1180px) { .menu-header[b-uxex8h9sow] { top: var(--pt-topbar-height); } }
@media (max-width: 600px) { .menu-header[b-uxex8h9sow] { position: static; } }

.menu-header h1[b-uxex8h9sow], .menu-dayone h2[b-uxex8h9sow] {
    margin: 0;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-title);
    font-weight: 800;
    letter-spacing: var(--pt-tracking-display-l);
}

.menu-header p[b-uxex8h9sow] { margin: var(--pt-space-1) 0 0; color: var(--pt-text-secondary); font-size: var(--pt-text-caption); }
.menu-header__actions[b-uxex8h9sow] { display: flex; flex-wrap: wrap; gap: var(--pt-space-2); }

.menu-btn[b-uxex8h9sow], .menu-search[b-uxex8h9sow] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pt-space-2);
    min-height: 42px;
    box-sizing: border-box;
    border-radius: var(--pt-radius-md);
    font-family: var(--pt-font-body);
    font-size: var(--pt-text-caption);
    font-weight: 700;
    text-decoration: none;
    transition: all var(--pt-dur-hover) var(--pt-ease-soft);
}

.menu-btn[b-uxex8h9sow] { padding: 9px var(--pt-space-4); cursor: pointer; }
.menu-btn--primary[b-uxex8h9sow] { color: var(--pt-cream-50); background: var(--pt-forest-700); border: 1px solid var(--pt-forest-700); }
.menu-btn--secondary[b-uxex8h9sow] { color: var(--pt-text-strong); background: transparent; border: var(--pt-border-card); }
.menu-btn--import[b-uxex8h9sow] { color: var(--pt-on-warning); background: oklch(from var(--pt-gold-400) l c h / .14); border: 1px solid oklch(from var(--pt-warning) l c h / .42); }
.menu-btn:hover[b-uxex8h9sow] { transform: translateY(-2px); box-shadow: var(--pt-shadow-card); }
.menu-btn--primary:hover[b-uxex8h9sow] { background: var(--pt-forest-600); border-color: var(--pt-forest-600); }
.menu-btn--primary .bi-plus[b-uxex8h9sow] { transition: transform var(--pt-dur-hover) var(--pt-ease-soft); }
.menu-btn--primary:hover .bi-plus[b-uxex8h9sow] { transform: rotate(90deg); }
.menu-btn:active[b-uxex8h9sow] { transform: none; box-shadow: none; }
.menu-btn:focus-visible[b-uxex8h9sow], .menu-search:focus-within[b-uxex8h9sow], .menu-tabs__tab:focus-visible[b-uxex8h9sow] { outline: var(--pt-focus-outline); outline-offset: 2px; }

.menu-search[b-uxex8h9sow] { min-width: 230px; justify-content: flex-start; padding: 0 var(--pt-space-3); border: var(--pt-border-card); background: var(--pt-surface); color: var(--pt-text-meta); }
.menu-search input[b-uxex8h9sow] { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--pt-ink-900); font: inherit; }
.menu-search input[b-uxex8h9sow]::placeholder { color: var(--pt-text-meta); }

.menu-stats[b-uxex8h9sow] { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--pt-space-3); margin-bottom: var(--pt-space-6); }
.menu-stat[b-uxex8h9sow] { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--pt-space-2); padding: 14px var(--pt-space-4); background: var(--pt-surface); border: var(--pt-border-card); border-radius: var(--pt-radius-lg); box-shadow: var(--pt-shadow-card); }
.menu-stat--warning[b-uxex8h9sow] { border-color: oklch(from var(--pt-warning) l c h / .5); }
.menu-stat > span[b-uxex8h9sow] { width: 100%; color: var(--pt-text-secondary); font-size: var(--pt-text-caption); }
.menu-stat strong[b-uxex8h9sow] { color: var(--pt-ink-900); font-family: var(--pt-font-display); font-size: var(--pt-text-title); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: var(--pt-tracking-display-l); }
.menu-stat small[b-uxex8h9sow] { color: var(--pt-text-meta); font-size: var(--pt-text-caption); }

/* Wider than the handoff's 236px: that width assumed a section row of name + count only, and
   this one also has to hold the hover action cluster without burying the name. */
/* 320px, not 280: a section row carries a name, a kind badge and a count badge, and at 280 the
   name — the only part you actually scan — was down to ~70px, i.e. "Para com…". The 40px comes
   out of an items panel that has hundreds to spare. */
.menu-grid[b-uxex8h9sow] { display: grid; grid-template-columns: minmax(236px, 320px) minmax(420px, 1fr); gap: var(--pt-space-6); align-items: start; }
/* overflow is visible, not hidden: a row's action menu (.capy-rowmenu__panel) is absolutely
   positioned inside the panel and a clip would cut it off at the panel edge. The rounded corners
   the clip used to give the header and footer bands are now on those bands themselves. */
.menu-categories-panel[b-uxex8h9sow], .menu-items-panel[b-uxex8h9sow] { overflow: visible; background: var(--pt-surface); border: var(--pt-border-card); border-radius: var(--pt-radius-lg); box-shadow: var(--pt-shadow-card); }
.menu-categories-panel__header[b-uxex8h9sow], .menu-items-panel__header[b-uxex8h9sow] { border-radius: var(--pt-radius-lg) var(--pt-radius-lg) 0 0; }
.menu-sections-panel__hint[b-uxex8h9sow], .menu-items-panel__footer[b-uxex8h9sow] { border-radius: 0 0 var(--pt-radius-lg) var(--pt-radius-lg); }
.menu-categories-panel__header[b-uxex8h9sow], .menu-items-panel__header[b-uxex8h9sow] { display: flex; align-items: center; justify-content: space-between; gap: var(--pt-space-3); padding: 15px 18px; border-bottom: var(--pt-border-card); color: var(--pt-ink-900); font-family: var(--pt-font-display); font-size: var(--pt-text-body); font-weight: 700; }
.menu-sections-panel__hint[b-uxex8h9sow] { margin: 0; padding: var(--pt-space-3) var(--pt-space-4); background: var(--pt-app-bg); border-top: var(--pt-border-card); color: var(--pt-text-secondary); font-size: var(--pt-text-caption); line-height: var(--pt-leading-caption); }
/* Was a bare checkbox floating under the panel header, present even on a menu with nothing
   retired. Now a pressed-state pill in the header itself, rendered only once something is
   retired, carrying the count so the owner knows what turning it on will reveal. */
/* The header is `justify-content: space-between` with the panel title as its other child, so the
   toggle and its InfoHint have to travel together as one flex item or the InfoHint floats mid-header
   instead of sitting beside the toggle it explains. */
.menu-retired-filter[b-uxex8h9sow] { display: inline-flex; align-items: center; gap: var(--pt-space-1); }
.menu-retired-toggle[b-uxex8h9sow] { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 5px 9px; border: var(--pt-border-card); border-radius: var(--pt-radius-pill); background: var(--pt-surface); color: var(--pt-text-secondary); font-family: var(--pt-font-body); font-size: 11.5px; font-weight: 700; cursor: pointer; transition: background var(--pt-dur-quick) var(--pt-ease-enter), color var(--pt-dur-quick) var(--pt-ease-enter), border-color var(--pt-dur-quick) var(--pt-ease-enter); }
.menu-retired-toggle:hover[b-uxex8h9sow] { border-color: var(--pt-forest-600); color: var(--pt-ink-900); }
.menu-retired-toggle--on[b-uxex8h9sow], .menu-retired-toggle--on:hover[b-uxex8h9sow] { border-color: var(--pt-forest-700); background: var(--pt-forest-700); color: var(--pt-cream-50); }
.menu-retired-toggle:focus-visible[b-uxex8h9sow] { outline: var(--pt-focus-outline); outline-offset: 2px; }
.menu-retired-toggle__count[b-uxex8h9sow] { padding: 0 5px; border-radius: var(--pt-radius-pill); background: var(--pt-cream-100); color: var(--pt-text-secondary); font-size: 10.5px; }
.menu-retired-toggle--on .menu-retired-toggle__count[b-uxex8h9sow] { background: oklch(from var(--pt-cream-50) l c h / .2); color: var(--pt-cream-50); }

/* Silkscreen eyebrow, sanctioned in the management app for exactly this: a rule that separates
   the carte from what is no longer on it. */
.menu-retired-heading[b-uxex8h9sow] { display: flex; align-items: center; gap: var(--pt-space-2); margin: var(--pt-space-3) var(--pt-space-1) 2px; }
.menu-retired-heading > span[b-uxex8h9sow] { flex: none; color: var(--pt-text-faint); font-family: var(--pt-font-mono); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.menu-retired-heading[b-uxex8h9sow]::after { content: ""; flex: 1; height: 1px; background: var(--pt-row-divider); }
/* minmax(0, 1fr), never the default `auto`: an auto track is floored at its widest item's
   MIN-content, and a row's min-content is its name at full `white-space: nowrap` width. The track
   grew to fit the longest section name — 297px inside a 278px panel — and since the panel is
   deliberately `overflow: visible` (the row kebab opens outside it), every row, its selected green
   fill and its kebab hung out past the card's right edge. The zero floor lets the track match the
   panel, at which point the flex row below does its own shrinking and the name ellipsizes. */
.menu-categories-panel__list[b-uxex8h9sow] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: var(--pt-space-2); }
/* The section lists are rendered by SortableList (its own scope), so the rule is anchored on the
   panel list this page renders. A node is a plain block (card + children list); only a non-empty
   children list gets separation from its parent row, so leaves keep the single 2px pitch. */
.menu-categories-panel__list[b-uxex8h9sow]  .menu-section-children { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.menu-categories-panel__list[b-uxex8h9sow]  .menu-section-children:not(:empty) { margin-top: 2px; }
.menu-section-node[b-uxex8h9sow] { display: block; }
.menu-categories-panel__footer[b-uxex8h9sow] { padding: var(--pt-space-2); border-top: 1px solid var(--pt-row-divider); }
.menu-add-category[b-uxex8h9sow] { width: 100%; }
.add-category-input[b-uxex8h9sow] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pt-space-2); padding: var(--pt-space-2); border-top: 1px solid var(--pt-row-divider); }
.add-category-input > .field[b-uxex8h9sow] { flex: 1; min-width: 0; margin: 0; }
/* The kind selector and its drink-only checkbox each take the full row width and drop below the
   name field, rather than squeezing in beside the Add/Cancel buttons. */
.add-category-input__kind[b-uxex8h9sow] { display: flex; flex: 1 0 100%; align-items: center; gap: var(--pt-space-3); font-size: var(--pt-text-caption); color: var(--pt-text-secondary); }
.add-category-input__kind label[b-uxex8h9sow] { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.add-category-input__checkbox[b-uxex8h9sow] { display: flex; flex: 1 0 100%; align-items: center; gap: 6px; font-size: var(--pt-text-caption); color: var(--pt-text-secondary); cursor: pointer; }
.menu-inline-error[b-uxex8h9sow] { margin: 0; padding: 0 var(--pt-space-3) var(--pt-space-2); color: var(--pt-danger); font-size: 12.5px; }
.menu-subcategory-input--depth-1[b-uxex8h9sow] { padding-left: var(--pt-space-6); }
.menu-subcategory-input--depth-2[b-uxex8h9sow] { padding-left: var(--pt-space-8); }
.menu-subcategory-input--depth-3[b-uxex8h9sow] { padding-left: var(--pt-space-12); }
.menu-items-panel__header > div:first-child[b-uxex8h9sow] { display: flex; align-items: baseline; gap: var(--pt-space-2); }
.menu-items-panel__title[b-uxex8h9sow] { margin: 0; font-family: var(--pt-font-display); font-size: var(--pt-text-subtitle); font-weight: 800; letter-spacing: var(--pt-tracking-display-l); }
.menu-items-panel__count[b-uxex8h9sow] { color: var(--pt-text-meta); font-family: var(--pt-font-body); font-size: var(--pt-text-caption); font-weight: 400; }

.menu-tabs[b-uxex8h9sow] { display: inline-flex; gap: var(--pt-space-1); padding: var(--pt-space-1); background: var(--pt-cream-100); border-radius: var(--pt-radius-md); }
.menu-tabs__tab[b-uxex8h9sow] { min-height: 36px; padding: 0 var(--pt-space-3); border: 0; border-radius: var(--pt-radius-sm); background: transparent; color: var(--pt-text-secondary); font: 700 var(--pt-text-caption) var(--pt-font-body); cursor: pointer; }
.menu-tabs__tab--selected[b-uxex8h9sow] { background: var(--pt-surface); color: var(--pt-ink-900); box-shadow: var(--pt-shadow-card); }

.menu-dayone[b-uxex8h9sow] { max-width: 720px; padding: var(--pt-space-8); background: var(--pt-surface); border: var(--pt-border-card); border-radius: var(--pt-radius-lg); box-shadow: var(--pt-shadow-card); }
.menu-dayone__badge[b-uxex8h9sow] { margin-bottom: var(--pt-space-3); color: var(--pt-text-meta); font-family: var(--pt-font-mono); font-size: var(--pt-text-caption); font-weight: 700; letter-spacing: .12em; }
.menu-dayone > p[b-uxex8h9sow] { max-width: 56ch; color: var(--pt-text-secondary); font-size: var(--pt-text-body); line-height: var(--pt-leading-body); }
.menu-dayone__tasks[b-uxex8h9sow] { display: grid; gap: var(--pt-space-2); margin-top: var(--pt-space-6); }
.menu-dayone__task[b-uxex8h9sow] { display: flex; align-items: center; gap: var(--pt-space-3); padding: 14px var(--pt-space-4); background: var(--pt-app-bg); border: var(--pt-border-card); border-radius: 10px; }
.menu-dayone__task > i[b-uxex8h9sow] { color: var(--pt-forest-600); font-size: var(--pt-text-subtitle); }
.menu-dayone__task > span[b-uxex8h9sow] { flex: 1; min-width: 0; }
.menu-dayone__task strong[b-uxex8h9sow], .menu-dayone__task small[b-uxex8h9sow] { display: block; }
.menu-dayone__task strong[b-uxex8h9sow] { font-family: var(--pt-font-display); font-size: var(--pt-text-caption); }
.menu-dayone__task small[b-uxex8h9sow], .menu-dayone__cta span[b-uxex8h9sow] { color: var(--pt-text-secondary); font-size: var(--pt-text-caption); }
.menu-dayone__cta[b-uxex8h9sow] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pt-space-3); margin-top: var(--pt-space-6); }
/* One dish per line, flush to the panel edges: each row draws its own top divider, so the
   container must not add a grid gap or the dividers stop meeting the panel border. */
.menu-items-panel[b-uxex8h9sow]  .menu-items-grid { display: grid; }
.menu-no-matches[b-uxex8h9sow] { margin: 0; padding: 34px 18px; color: var(--pt-text-muted); font-size: 14px; text-align: center; }

.menu-alert[b-uxex8h9sow] { display: flex; align-items: center; gap: var(--pt-space-2); margin-bottom: var(--pt-space-4); padding: 11px 13px; border: 1px solid oklch(from var(--pt-danger) l c h / .3); border-radius: var(--pt-radius-md); background: var(--pt-danger-summary); color: var(--pt-danger); font-size: 13px; font-weight: 700; }
.menu-alert > span[b-uxex8h9sow] { flex: 1; min-width: 0; }
.menu-alert__dismiss[b-uxex8h9sow] { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border: 0; border-radius: var(--pt-radius-sm); background: transparent; color: inherit; font-size: 16px; cursor: pointer; }
.menu-alert__dismiss:hover[b-uxex8h9sow] { background: oklch(from var(--pt-danger) l c h / .1); }

/* Legacy shells this page still renders. Both are styled globally for pre-Capy screens; the
   overrides below keep them on the Capy palette without touching the pages that share them. */
.tip-banner[b-uxex8h9sow] { margin-bottom: var(--pt-space-6); padding: var(--pt-space-3) var(--pt-space-4); border: 1px solid oklch(from var(--pt-gold-500) l c h / .34); border-radius: var(--pt-radius-md); background: oklch(from var(--pt-gold-400) l c h / .12); color: var(--pt-on-warning); font-size: var(--pt-text-caption); }
.tip-banner__icon[b-uxex8h9sow], .tip-banner__dismiss[b-uxex8h9sow] { color: var(--pt-on-warning); }
.empty-state__icon[b-uxex8h9sow] { color: var(--pt-unavailable-icon); }
.empty-state__title[b-uxex8h9sow] { color: var(--pt-ink-900); font-family: var(--pt-font-display); font-size: var(--pt-text-subtitle); font-weight: 800; letter-spacing: -.02em; }
.empty-state__subtitle[b-uxex8h9sow] { color: var(--pt-text-muted); font-size: var(--pt-text-caption); }
.menu-items-panel__footer[b-uxex8h9sow] { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--pt-space-3); padding: var(--pt-space-3) 18px; border-top: 1px solid var(--pt-row-divider); background: var(--pt-app-bg); color: var(--pt-text-secondary); font-size: var(--pt-text-caption); }
.menu-items-panel__hidden[b-uxex8h9sow] { color: var(--pt-text-meta); }

/* ── Section row ────────────────────────────────────────────────────────────────────────────
   Three fixed zones: a 20px gutter, the name, one action trigger. The gutter holds the collapse
   chevron for a parent and the drag grip for everything else, and keeps its width either way so
   names align down the whole tree regardless of depth or children.

   The selected fill is on the ROW, not on the inner select button as it was before. With the fill
   on the button, the action trigger sat outside the green and had to fight it; on the row, every
   part of the row belongs to one surface and the trigger simply inherits cream. */
[b-uxex8h9sow] .menu-section { position: relative; display: flex; align-items: center; gap: 6px; min-height: var(--pt-menu-section-min-height); padding: 0 6px 0 4px; border-radius: 9px; }
[b-uxex8h9sow] .menu-section--depth-1 { padding-left: 28px; }
[b-uxex8h9sow] .menu-section--depth-2 { padding-left: var(--pt-space-12); }
[b-uxex8h9sow] .menu-section:hover { background: var(--pt-row-hover); }
[b-uxex8h9sow] .menu-section--selected, [b-uxex8h9sow] .menu-section--selected:hover { background: var(--pt-forest-700); }

[b-uxex8h9sow] .menu-section__gutter { display: grid; place-items: center; width: 20px; flex: none; }
[b-uxex8h9sow] .menu-section__chevron { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--pt-radius-sm); background: transparent; color: var(--pt-text-meta); font-size: 12px; cursor: pointer; }
[b-uxex8h9sow] .menu-section--selected .menu-section__chevron { color: var(--pt-cream-50); }
/* The grip is affordance, not a control: the whole row is draggable, so it only has to say so
   when the pointer is over it. It occupies the same 20px the chevron would, so revealing it
   moves nothing. */
[b-uxex8h9sow] .menu-section__grip { color: transparent; font-size: 13px; transition: color var(--pt-dur-quick) var(--pt-ease-enter); }
[b-uxex8h9sow] .menu-section:hover .menu-section__grip { color: var(--pt-text-faint); cursor: grab; }
[b-uxex8h9sow] .menu-section--selected:hover .menu-section__grip { color: oklch(from var(--pt-cream-50) l c h / .55); }

[b-uxex8h9sow] .menu-section__select { display: flex; flex: 1; align-items: center; gap: var(--pt-space-2); min-width: 0; min-height: var(--pt-menu-section-min-height); padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--pt-text-strong); font: 700 var(--pt-text-caption) var(--pt-font-body); text-align: left; cursor: pointer; }
[b-uxex8h9sow] .menu-section--selected .menu-section__select { color: var(--pt-cream-50); }
[b-uxex8h9sow] .menu-section--archived .menu-section__select { color: var(--pt-unavailable-text); }
[b-uxex8h9sow] .menu-section__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A bare glyph, not a pill: the fork and the glass are already distinct at 12px, so the shape
   carries the whole signal and no fill is needed to hold it. It sits one notch quieter than the
   name it follows and never competes with the count badge on the far right. */
[b-uxex8h9sow] .menu-section__kind { display: inline-flex; flex: none; align-items: center; color: var(--pt-text-meta); font-size: 12px; line-height: 1; }
[b-uxex8h9sow] .menu-section--selected .menu-section__kind { color: oklch(from var(--pt-cream-50) l c h / .7); }
[b-uxex8h9sow] .menu-section__count { display: inline-flex; align-items: center; gap: 4px; flex: none; margin-left: auto; padding: 3px 7px; white-space: nowrap; border-radius: 6px; background: var(--pt-cream-100); color: var(--pt-text-secondary); font-size: 11.5px; font-weight: 700; }
[b-uxex8h9sow] .menu-section__count--out { background: oklch(from var(--pt-warning) l c h / .16); color: var(--pt-on-warning); }
[b-uxex8h9sow] .menu-section__count--out i { font-size: 11px; }
[b-uxex8h9sow] .menu-section--selected .menu-section__count:not(.menu-section__count--out) { background: oklch(from var(--pt-cream-50) l c h / .18); color: var(--pt-cream-50); }
[b-uxex8h9sow] .menu-section--archived .menu-section__count { background: var(--pt-row-divider); color: var(--pt-text-meta); }

/* The kebab inherits the row's foreground so it reads on cream and on forest alike. */
[b-uxex8h9sow] .menu-section--selected .capy-rowmenu__trigger { color: var(--pt-cream-50); }
[b-uxex8h9sow] .menu-section--selected .capy-rowmenu__trigger:hover,
[b-uxex8h9sow] .menu-section--selected .capy-rowmenu__trigger[aria-expanded="true"] { background: oklch(from var(--pt-cream-50) l c h / .18); color: var(--pt-cream-50); }

[b-uxex8h9sow] .menu-section__edit { flex: 1; display: grid; gap: var(--pt-space-2); padding: var(--pt-space-2); }
[b-uxex8h9sow] .menu-section__edit .field { margin: 0; }
[b-uxex8h9sow] .menu-section__edit-actions { display: flex; gap: var(--pt-space-2); }

@media (max-width: 1120px) { .menu-grid[b-uxex8h9sow] { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .menu-header__actions[b-uxex8h9sow] { width: 100%; } .menu-search[b-uxex8h9sow] { flex: 1; } }
@media (max-width: 600px) { .menu-header__actions[b-uxex8h9sow], .menu-items-panel__header[b-uxex8h9sow], .menu-dayone__task[b-uxex8h9sow], .menu-items-panel__footer[b-uxex8h9sow] { align-items: stretch; flex-direction: column; } .menu-btn[b-uxex8h9sow] { width: 100%; } .menu-search[b-uxex8h9sow] { min-width: 0; } .menu-tabs[b-uxex8h9sow] { width: 100%; } .menu-tabs__tab[b-uxex8h9sow] { flex: 1; } .menu-dayone[b-uxex8h9sow] { padding: var(--pt-space-6); } }
@media (prefers-reduced-motion: reduce) { .menu-btn[b-uxex8h9sow], .menu-btn--primary .bi-plus[b-uxex8h9sow] { transition: none; } .menu-btn:hover[b-uxex8h9sow], .menu-btn--primary:hover .bi-plus[b-uxex8h9sow] { transform: none; } }

/* Grid items default to min-content width; zeroing it lets the phone's 1fr track shrink. */
@media (max-width: 700px) {
    .menu-grid > *[b-uxex8h9sow] { min-width: 0; }
    .menu-categories-panel[b-uxex8h9sow] { min-width: 0; }
    /* width: 100% on the wrapper, not the button directly: the button is now nested inside
       .menu-retired-filter for the InfoHint, and a nested flex item's own width:100% would
       resolve against its unset-width parent rather than the header's full row. */
    .menu-retired-filter[b-uxex8h9sow] { width: 100%; }
    .menu-retired-toggle[b-uxex8h9sow] { flex: 1; justify-content: space-between; }
    /* The full-width toggle no longer fits beside the panel title on one row; let the header wrap. */
    .menu-categories-panel__header[b-uxex8h9sow] { flex-wrap: wrap; }
}

@media (hover: none) and (pointer: coarse) {
    .menu-btn[b-uxex8h9sow] { min-height: var(--pt-action-min-height-touch); }
    .menu-tabs__tab[b-uxex8h9sow] { min-height: var(--pt-action-min-height-touch); }
    .menu-retired-toggle[b-uxex8h9sow] { min-height: var(--pt-action-min-height-touch); }
    .menu-alert__dismiss[b-uxex8h9sow] { width: var(--pt-action-min-height-touch); height: var(--pt-action-min-height-touch); }
    [b-uxex8h9sow] .menu-section__chevron { width: var(--pt-action-min-height-touch); height: var(--pt-action-min-height-touch); }
    /* Widen the gutter to match the enlarged chevron so it no longer overlaps the select target. */
    [b-uxex8h9sow] .menu-section__gutter { width: var(--pt-action-min-height-touch); }
    .menu-search input[b-uxex8h9sow] { min-height: var(--pt-action-min-height-touch); }
    .tip-banner__dismiss[b-uxex8h9sow] { width: var(--pt-action-min-height-touch); height: var(--pt-action-min-height-touch); }
}

/* "Empezar una carta nueva" — deliberately quiet. It is the one control on this screen that
   clears everything, so it reads as a link rather than a button: nothing here should catch the
   eye of an owner who came to add a dish. The confirm dialog carries the weight. */
.menu-newmenu[b-uxex8h9sow] { display: grid; gap: 2px; padding: 0 var(--pt-space-4) var(--pt-space-4); }
.menu-newmenu__action[b-uxex8h9sow] { display: flex; gap: var(--pt-space-2); align-items: center; justify-self: start; padding: var(--pt-space-1) 0; border: 0; background: transparent; color: var(--pt-text-secondary); font: 700 var(--pt-text-caption) var(--pt-font-body); cursor: pointer; }
.menu-newmenu__action:hover[b-uxex8h9sow] { color: var(--pt-on-danger); text-decoration: underline; }
.menu-newmenu__action:focus-visible[b-uxex8h9sow] { outline: 0; border-radius: var(--pt-radius-md); box-shadow: var(--pt-focus-ring); }
.menu-newmenu__hint[b-uxex8h9sow] { margin: 0; color: var(--pt-text-secondary); font-size: var(--pt-text-caption); }

/* A link-styled control still needs a real target under a finger. Gated on pointer capability,
   not viewport width, per ResponsiveContractTests. */
@media (hover: none) and (pointer: coarse) {
    .menu-newmenu__action[b-uxex8h9sow] { min-height: var(--pt-action-min-height-touch); }
}

/* Skeleton while the menu loads. Same treatment as Orders' skeleton; MenuItemOptions carries its
   own copy because scoped CSS does not cross components. */
.menu-skeleton[b-uxex8h9sow] { display: grid; gap: 10px; }
.menu-skeleton__bar[b-uxex8h9sow] { border-radius: var(--pt-radius-md); background: var(--pt-cream-100); animation: menu-skeleton-pulse-b-uxex8h9sow 1.4s var(--pt-ease-soft) infinite; }
.menu-skeleton__bar--title[b-uxex8h9sow] { width: 220px; height: 20px; margin-top: var(--pt-space-3); }
.menu-skeleton__bar--row[b-uxex8h9sow] { height: 64px; }
@keyframes menu-skeleton-pulse-b-uxex8h9sow { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .menu-skeleton__bar[b-uxex8h9sow] { animation: none; } }
/* /Components/Pages/Menu/MenuCategoryHeader.razor.rz.scp.css */
/* Row metrics live in MenuCategories.razor.css under ::deep, because the row is laid out inside
   that panel and its selected/hover states are the panel's business. What stays here is what
   belongs to the component alone: its indentation ladder and its focus rings. */
.menu-section[b-s7sj1jkru4] { min-height: var(--pt-menu-section-min-height); }
.menu-section--depth-1[b-s7sj1jkru4] { padding-left: var(--pt-space-6); }
.menu-section--depth-2[b-s7sj1jkru4] { padding-left: var(--pt-space-8); }
.menu-section--depth-3[b-s7sj1jkru4] { padding-left: var(--pt-space-12); }
.menu-section__select:focus-visible[b-s7sj1jkru4], .menu-section__chevron:focus-visible[b-s7sj1jkru4] { outline: var(--pt-focus-outline); outline-offset: 2px; }
/* /Components/Pages/Menu/MenuImportFlow.razor.rz.scp.css */
/* Safe-area floor only today — see MainLayout.razor.css's F5 note: env() resolves to 0px without
   viewport-fit=cover, so every max(var(--pt-space-4), env(...)) below is exactly --pt-space-4. */
.menu-import-overlay[b-eu0w2g582n] { position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:var(--pt-space-4); padding-bottom:max(var(--pt-space-4), env(safe-area-inset-bottom)); padding-left:max(var(--pt-space-4), env(safe-area-inset-left)); padding-right:max(var(--pt-space-4), env(safe-area-inset-right)); background:oklch(from var(--pt-forest-900) l c h / .5); }
/* dvh, not vh: a phone's dynamic toolbar and its virtual keyboard both shrink the visible area
   below 100vh, which put this panel's footer — and its primary action — out of reach. */
.menu-import-modal[b-eu0w2g582n] { display:flex; width:min(620px,100%); max-height:calc(100dvh - 60px); flex-direction:column; overflow:hidden; border:var(--pt-border-card); border-radius:14px; background:var(--pt-surface); box-shadow:0 26px 70px oklch(from var(--pt-ink-900) l c h / .28); animation:capy-pop-b-eu0w2g582n var(--pt-dur-base) var(--pt-ease-soft); }
.menu-import-modal__header[b-eu0w2g582n] { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--pt-space-3); align-items:start; padding:var(--pt-space-6); border-bottom:var(--pt-border-row); }
/* The header mark is the AI accent — gold, like the "Importar con IA" trigger that opened it.
   The dropzone below stays green: uploading is an ordinary action, not the AI signal. */
.menu-import-modal__mark[b-eu0w2g582n] { display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:10px; background:oklch(from var(--pt-gold-400) l c h / .16); color:var(--pt-on-warning); font-size:20px; }
.menu-import-modal h2[b-eu0w2g582n] { margin:0; color:var(--pt-ink-900); font-family:var(--pt-font-display); font-size:var(--pt-text-subtitle); font-weight:800; }.menu-import-modal__header p[b-eu0w2g582n] { margin:var(--pt-space-1) 0 0; color:var(--pt-text-secondary); font-size:var(--pt-text-caption); }
.menu-import-modal__close[b-eu0w2g582n] { display:grid; place-items:center; width:36px; height:36px; border:0; border-radius:var(--pt-radius-md); background:transparent; color:var(--pt-text-secondary); font-size:20px; cursor:pointer; }
.menu-import-modal__body[b-eu0w2g582n] { min-height:0; padding:var(--pt-space-6); overflow:auto; }.menu-import-modal__body--flush[b-eu0w2g582n] { padding:0; }.menu-import-modal__body--flush .menu-import-error[b-eu0w2g582n] { margin:var(--pt-space-4) var(--pt-space-4) 0; }
/* One dropzone for photos and PDFs. The input sits on top at opacity 0 rather than
   visually-hidden, because a clipped input cannot receive a dropped file. */
.menu-import-drop[b-eu0w2g582n] { position:relative; display:grid; justify-items:center; gap:var(--pt-space-2); padding:var(--pt-space-6) var(--pt-space-4); border:2px dashed var(--pt-radio-mark-border); border-radius:var(--pt-radius-lg); background:var(--pt-app-bg); color:var(--pt-text-secondary); text-align:center; cursor:pointer; transition:border-color .15s, background-color .15s; }
.menu-import-drop:hover[b-eu0w2g582n],.menu-import-drop--over[b-eu0w2g582n] { border-color:var(--pt-forest-600); background:var(--pt-available-tint); }
.menu-import-drop:focus-within[b-eu0w2g582n] { outline:0; box-shadow:var(--pt-focus-ring); }
.menu-import-drop__icon[b-eu0w2g582n] { display:grid; place-items:center; width:48px; height:48px; border-radius:var(--pt-radius-md); background:var(--pt-available-tint); color:var(--pt-forest-600); font-size:24px; }
.menu-import-drop--over .menu-import-drop__icon[b-eu0w2g582n] { background:var(--pt-cream-50); }
.menu-import-drop strong[b-eu0w2g582n] { color:var(--pt-ink-900); font-family:var(--pt-font-display); font-size:var(--pt-text-body); }
.menu-import-drop small[b-eu0w2g582n] { max-width:34ch; font-size:var(--pt-text-caption); }
.menu-import-drop__cta[b-eu0w2g582n] { margin-top:var(--pt-space-1); padding:9px var(--pt-space-4); border:1px solid var(--pt-forest-700); border-radius:var(--pt-radius-md); background:var(--pt-forest-700); color:var(--pt-cream-50); font:700 var(--pt-text-caption) var(--pt-font-body); }
/* ::deep is mandatory here: InputFile renders the <input> itself, so it never gets this
   component's b-* scope attribute. Without it the rule compiles to .menu-import-drop__file[b-xxx],
   matches nothing, and the browser's default "Choose files" control shows through — the same
   trap MenuItemEditor.razor.css and Settings.razor.css already document. */
.menu-import-drop[b-eu0w2g582n]  .menu-import-drop__file { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }

.menu-import-limits[b-eu0w2g582n] { display:flex; flex-wrap:wrap; gap:var(--pt-space-2) var(--pt-space-4); margin:var(--pt-space-3) 0 0; padding:0; list-style:none; color:var(--pt-text-secondary); font-size:var(--pt-text-caption); }
.menu-import-limits li[b-eu0w2g582n] { display:flex; gap:var(--pt-space-2); align-items:center; }

.menu-import-picked[b-eu0w2g582n] { display:grid; gap:var(--pt-space-2); margin:var(--pt-space-4) 0 0; padding:0; list-style:none; }
.menu-import-picked li[b-eu0w2g582n] { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; gap:var(--pt-space-3); align-items:center; padding:var(--pt-space-2) var(--pt-space-3); border:var(--pt-border-card); border-radius:var(--pt-radius-md); color:var(--pt-text-secondary); font-size:var(--pt-text-caption); }
.menu-import-picked li > i[b-eu0w2g582n] { color:var(--pt-forest-600); font-size:18px; }
.menu-import-picked__name[b-eu0w2g582n] { overflow:hidden; color:var(--pt-ink-900); text-overflow:ellipsis; white-space:nowrap; }
.menu-import-picked__size[b-eu0w2g582n] { font-variant-numeric:tabular-nums; }
.menu-import-picked__remove[b-eu0w2g582n] { display:grid; place-items:center; width:32px; height:32px; border:0; border-radius:var(--pt-radius-md); background:transparent; color:var(--pt-text-secondary); cursor:pointer; }
.menu-import-picked__remove:hover[b-eu0w2g582n] { color:var(--pt-on-danger); background:var(--pt-danger-surface); }
.menu-import-picked__remove:focus-visible[b-eu0w2g582n] { outline:0; box-shadow:var(--pt-focus-ring); }

.menu-import-pdfnote[b-eu0w2g582n] { display:flex; gap:var(--pt-space-2); align-items:start; margin:var(--pt-space-3) 0 0; color:var(--pt-text-secondary); font-size:var(--pt-text-caption); }
.menu-import-pdfnote i[b-eu0w2g582n] { flex:none; margin-top:2px; color:var(--pt-success); }
.menu-import-expectation[b-eu0w2g582n] { margin:var(--pt-space-4) 0 0; padding:var(--pt-space-3); border-left:3px solid var(--pt-olive-500); background:var(--pt-app-bg); color:var(--pt-text-secondary); font-size:var(--pt-text-caption); }.menu-import-error[b-eu0w2g582n] { margin:0 0 var(--pt-space-3); padding:var(--pt-space-3); border:1px solid oklch(from var(--pt-danger) l c h / .28); border-radius:var(--pt-radius-md); background:var(--pt-danger-surface); color:var(--pt-on-danger); font-size:var(--pt-text-caption); }
.menu-import-reading[b-eu0w2g582n] { display:grid; gap:var(--pt-space-4); }.menu-import-preview[b-eu0w2g582n] { position:relative; display:flex; align-items:center; gap:var(--pt-space-3); min-height:96px; padding:var(--pt-space-4); overflow:hidden; border:var(--pt-border-card); border-radius:var(--pt-radius-lg); background:var(--pt-app-bg); color:var(--pt-text-secondary); }.menu-import-preview[b-eu0w2g582n]::after { position:absolute; inset:0; background:linear-gradient(180deg,transparent,oklch(from var(--pt-success) l c h / .16),transparent); content:""; animation:capy-scan-b-eu0w2g582n 1.4s linear infinite; }.menu-import-preview i[b-eu0w2g582n],.menu-import-preview span[b-eu0w2g582n] { position:relative; z-index:1; }.menu-import-preview i[b-eu0w2g582n] { color:var(--pt-forest-600); font-size:24px; }.menu-import-checklist[b-eu0w2g582n] { display:grid; gap:var(--pt-space-2); margin:0; padding:0; list-style:none; color:var(--pt-text-secondary); }.menu-import-checklist li[b-eu0w2g582n] { display:flex; gap:var(--pt-space-2); align-items:center; }.menu-import-checklist i[b-eu0w2g582n] { color:var(--pt-radio-mark-border); }.menu-import-checklist__done[b-eu0w2g582n],.menu-import-checklist__done i[b-eu0w2g582n] { color:var(--pt-success); }
.menu-import-modal__footer[b-eu0w2g582n] { display:flex; align-items:center; justify-content:space-between; gap:var(--pt-space-3); padding:var(--pt-space-4) var(--pt-space-6); border-top:var(--pt-border-row); background:var(--pt-app-bg); }.menu-import-modal__footer-actions[b-eu0w2g582n] { display:flex; gap:var(--pt-space-2); margin-left:auto; }.menu-import-modal__safeguard[b-eu0w2g582n] { display:flex; max-width:250px; gap:var(--pt-space-2); margin:0; color:var(--pt-text-secondary); font-size:var(--pt-text-caption); font-weight:700; }.menu-import-action[b-eu0w2g582n] { min-height:44px; padding:9px var(--pt-space-4); border-radius:var(--pt-radius-md); font:700 var(--pt-text-caption) var(--pt-font-body); cursor:pointer; }.menu-import-action--primary[b-eu0w2g582n] { border:1px solid var(--pt-forest-700); background:var(--pt-forest-700); color:var(--pt-cream-50); }.menu-import-action--tertiary[b-eu0w2g582n] { border:0; background:transparent; color:var(--pt-forest-600); text-decoration:underline; }.menu-import-action:focus-visible[b-eu0w2g582n],.menu-import-modal__close:focus-visible[b-eu0w2g582n] { outline:0; box-shadow:var(--pt-focus-ring); }.menu-import-success[b-eu0w2g582n] { display:flex; gap:var(--pt-space-3); color:var(--pt-on-success); }.menu-import-success p[b-eu0w2g582n] { margin:0; }
@keyframes capy-pop-b-eu0w2g582n { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }@keyframes capy-scan-b-eu0w2g582n { from { transform:translateY(-100%); } to { transform:translateY(100%); } }@media (max-width:600px) { .menu-import-overlay[b-eu0w2g582n] { padding:0; }.menu-import-modal[b-eu0w2g582n] { max-height:100dvh; border-radius:0; }.menu-import-modal__header[b-eu0w2g582n],.menu-import-modal__body[b-eu0w2g582n],.menu-import-modal__footer[b-eu0w2g582n] { padding:var(--pt-space-4); }.menu-import-modal__footer[b-eu0w2g582n] { align-items:stretch; flex-direction:column; }.menu-import-modal__footer-actions[b-eu0w2g582n] { margin-left:0; }.menu-import-action[b-eu0w2g582n] { flex:1; } }@media (prefers-reduced-motion:reduce) { .menu-import-modal[b-eu0w2g582n],.menu-import-preview[b-eu0w2g582n]::after { animation:none; }.menu-import-drop[b-eu0w2g582n] { transition:none; } }

@media (hover: none) and (pointer: coarse) {
    .menu-import-modal__close[b-eu0w2g582n] { width: var(--pt-action-min-height-touch); height: var(--pt-action-min-height-touch); }
    .menu-import-picked__remove[b-eu0w2g582n] { width: var(--pt-action-min-height-touch); height: var(--pt-action-min-height-touch); }
}

/* Ring dot loader + shimmer label (transitions.dev), shown while the menu is being read.
   Colours come from the dashboard tokens; a small 20px ring of 3px dots, deliberately discreet. */
.menu-import-working[b-eu0w2g582n] { display:flex; align-items:center; gap:var(--pt-space-3); }
.menu-import-ring[b-eu0w2g582n] { --n:12; --size:20px; --dot:3px; --cycle:1200ms; position:relative; flex:none; width:var(--size); height:var(--size); }
.menu-import-ring i[b-eu0w2g582n] { position:absolute; left:50%; top:50%; width:var(--dot); height:var(--dot); margin:calc(var(--dot) / -2) 0 0 calc(var(--dot) / -2); border-radius:50%; background:var(--pt-radio-mark-border); transform:rotate(calc(var(--i) * 360deg / var(--n))) translateY(calc(var(--size) / -2 + var(--dot) / 2)); animation:menu-import-ring-pulse-b-eu0w2g582n var(--cycle) ease-in-out infinite; animation-delay:calc(var(--i) * var(--cycle) / var(--n)); }
@keyframes menu-import-ring-pulse-b-eu0w2g582n { 0%, 45%, 100% { background-color:var(--pt-radio-mark-border); } 15% { background-color:var(--pt-forest-600); } }
.menu-import-shimmer[b-eu0w2g582n] { position:relative; display:inline-block; color:var(--pt-text-secondary); font-size:var(--pt-text-body); font-weight:700; }
.menu-import-shimmer[b-eu0w2g582n]::before { position:absolute; inset:0; content:attr(data-text); pointer-events:none; background-image:linear-gradient(90deg, transparent 0%, transparent 40%, var(--pt-ink-900) 50%, transparent 60%, transparent 100%); background-size:400% 100%; background-repeat:no-repeat; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; animation:menu-import-shimmer-b-eu0w2g582n 2000ms linear infinite; }
@keyframes menu-import-shimmer-b-eu0w2g582n { from { background-position:100% 0; } to { background-position:0% 0; } }
@media (prefers-reduced-motion:reduce) { .menu-import-ring i[b-eu0w2g582n], .menu-import-shimmer[b-eu0w2g582n]::before { animation:none; } }
/* /Components/Pages/Menu/MenuImportReview.razor.rz.scp.css */
.menu-import-review__filter[b-8lpb1kufxo] { display:flex; justify-content:space-between; gap:var(--pt-space-3); padding:var(--pt-space-3) var(--pt-space-4); background:var(--pt-app-bg); color:var(--pt-text-secondary); font-size:var(--pt-text-caption); font-weight:700; }
.menu-import-review__filter span:last-child[b-8lpb1kufxo] { display:flex; gap:var(--pt-space-2); }
.menu-import-review__filter button[b-8lpb1kufxo] { border:0; background:transparent; color:var(--pt-forest-600); font:inherit; cursor:pointer; text-decoration:underline; }
.menu-import-review__list[b-8lpb1kufxo] { display:grid; max-height:360px; overflow:auto; }
.menu-import-review__category-header[b-8lpb1kufxo] { display:flex; align-items:center; justify-content:space-between; gap:var(--pt-space-3); padding:var(--pt-space-3) var(--pt-space-4); background:var(--pt-app-bg); }
/* Reads as the heading until hovered or focused, then shows it is a field. */
.menu-import-review__category-name[b-8lpb1kufxo] { min-width:0; max-width:280px; margin-left:calc(-1 * var(--pt-space-2)); padding:var(--pt-space-1) var(--pt-space-2); border:1px solid transparent; border-radius:var(--pt-radius-md); background:transparent; color:var(--pt-ink-900); font:800 15px var(--pt-font-display); }
.menu-import-review__category-name:hover:not(:disabled)[b-8lpb1kufxo] { border-color:var(--pt-cream-300); }
.menu-import-review__category-name:focus-visible[b-8lpb1kufxo] { outline:0; border-color:var(--pt-forest-600); background:var(--pt-surface); box-shadow:var(--pt-focus-ring); }
.menu-import-review__kind[b-8lpb1kufxo] { display:flex; gap:var(--pt-space-3); }
.menu-import-review__kind label[b-8lpb1kufxo] { display:flex; align-items:center; gap:var(--pt-space-1); color:var(--pt-text-secondary); font-size:var(--pt-text-caption); cursor:pointer; }
/* Section-wide options the model read once for a whole section; shown under its heading. */
.menu-import-review__shared[b-8lpb1kufxo] { display:flex; flex-wrap:wrap; align-items:center; gap:var(--pt-space-2); padding:var(--pt-space-2) var(--pt-space-4); border-top:var(--pt-border-row); background:var(--pt-surface); color:var(--pt-text-secondary); font-size:var(--pt-text-caption); }
.menu-import-review__shared-option[b-8lpb1kufxo] { display:inline-flex; align-items:center; gap:var(--pt-space-2); padding:2px var(--pt-space-2); border-radius:var(--pt-radius-pill); background:var(--pt-cream-100); color:var(--pt-ink-900); }
.menu-import-review__shared-remove[b-8lpb1kufxo] { display:inline-grid; place-items:center; min-width:var(--pt-action-min-height); min-height:var(--pt-action-min-height); border:0; border-radius:var(--pt-radius-pill); background:transparent; color:var(--pt-text-secondary); cursor:pointer; }
.menu-import-review__shared-remove:hover:not(:disabled)[b-8lpb1kufxo] { color:var(--pt-danger); }
.menu-import-review__shared-remove:disabled[b-8lpb1kufxo] { cursor:default; opacity:.6; }
.menu-import-review__shared-remove:focus-visible[b-8lpb1kufxo] { outline:0; box-shadow:var(--pt-focus-ring); }
.menu-import-review__row[b-8lpb1kufxo] { border-top:var(--pt-border-row); background:var(--pt-surface); color:var(--pt-ink-900); }
.menu-import-review__row-select[b-8lpb1kufxo] { display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:var(--pt-space-3); align-items:center; width:100%; padding:var(--pt-space-3) var(--pt-space-4); border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.menu-import-review__row--selected[b-8lpb1kufxo] { background:var(--pt-radio-selected); }
.menu-import-review__check[b-8lpb1kufxo] { display:grid; place-items:center; width:20px; height:20px; border:1px solid var(--pt-radio-mark-border); border-radius:6px; color:var(--pt-cream-50); }
.menu-import-review__row--selected .menu-import-review__check[b-8lpb1kufxo] { border-color:var(--pt-success); background:var(--pt-success); }
.menu-import-review__copy[b-8lpb1kufxo] { min-width:0; display:grid; gap:var(--pt-space-1); }
.menu-import-review__copy strong[b-8lpb1kufxo], .menu-import-review__price[b-8lpb1kufxo] { font-family:var(--pt-font-display); font-weight:800; }
.menu-import-review__chips[b-8lpb1kufxo] { display:flex; flex-wrap:wrap; gap:var(--pt-space-1); }
.menu-import-review__chips small[b-8lpb1kufxo] { padding:2px var(--pt-space-2); border-radius:var(--pt-radius-pill); background:var(--pt-cream-100); color:var(--pt-text-secondary); font-size:11px; }
.menu-import-review__chips .menu-import-review__warning[b-8lpb1kufxo] { background:oklch(from var(--pt-warning) l c h / .14); color:var(--pt-on-warning); }
.menu-import-review__copy em[b-8lpb1kufxo] { overflow:hidden; color:var(--pt-text-muted); font-size:12.5px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.menu-import-review__price[b-8lpb1kufxo] { display:grid; justify-items:end; font-size:15px; font-variant-numeric:tabular-nums; }
.menu-import-review__price small[b-8lpb1kufxo] { color:var(--pt-unavailable-icon); font-family:var(--pt-font-body); font-size:11px; font-weight:400; }
.menu-import-review__row-select:focus-visible[b-8lpb1kufxo], .menu-import-review__filter button:focus-visible[b-8lpb1kufxo], .menu-import-review__tag:focus-visible[b-8lpb1kufxo] { outline:0; box-shadow:inset 0 0 0 2px var(--pt-forest-600); }
/* Tag strip. Indented to line up with the copy column above it: the row padding plus the 20px
   check column plus its gap. */
.menu-import-review__tags[b-8lpb1kufxo] { display:flex; flex-wrap:wrap; gap:var(--pt-space-2); padding:0 var(--pt-space-4) var(--pt-space-3) calc(var(--pt-space-4) + 20px + var(--pt-space-3)); }
/* Outlined, not filled — the metadata pills directly above (category, warning) are filled cream,
   and an interactive chip must not read as one of them. */
.menu-import-review__tag[b-8lpb1kufxo] { padding:2px var(--pt-space-2); border:var(--pt-border-card); border-radius:var(--pt-radius-pill); background:transparent; color:var(--pt-text-secondary); font:inherit; font-size:11px; font-weight:700; cursor:pointer; }
.menu-import-review__tag--active[b-8lpb1kufxo] { border-color:var(--pt-forest-600); background:var(--pt-forest-600); color:var(--pt-cream-50); }
.menu-import-review__tag:disabled[b-8lpb1kufxo] { cursor:default; opacity:.6; }
.menu-import-review__edit[b-8lpb1kufxo] { display:inline-flex; align-items:center; gap:var(--pt-space-1); margin-left:auto; min-height:30px; padding:0 var(--pt-space-3); border:1px solid var(--pt-radio-mark-border); border-radius:var(--pt-radius-md); background:var(--pt-surface); color:var(--pt-forest-600); font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.menu-import-review__edit[aria-expanded="true"][b-8lpb1kufxo] { border-color:var(--pt-forest-600); background:var(--pt-forest-600); color:var(--pt-cream-50); }
.menu-import-review__edit:disabled[b-8lpb1kufxo] { cursor:default; opacity:.6; }
.menu-import-review__edit:focus-visible[b-8lpb1kufxo] { outline:0; box-shadow:var(--pt-focus-ring); }
/* Inline editor, indented like the tag strip. */
.menu-import-review__editor[b-8lpb1kufxo] { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--pt-space-3); margin:0 var(--pt-space-4) var(--pt-space-3) calc(var(--pt-space-4) + 20px + var(--pt-space-3)); padding:var(--pt-space-3); border:var(--pt-border-card); border-radius:var(--pt-radius-lg); background:var(--pt-app-bg); }
.menu-import-review__field[b-8lpb1kufxo] { display:grid; gap:var(--pt-space-1); }
.menu-import-review__field span[b-8lpb1kufxo], .menu-import-review__field-label[b-8lpb1kufxo] { color:var(--pt-text-secondary); font-size:var(--pt-text-caption); font-weight:700; }
.menu-import-review__field--wide[b-8lpb1kufxo], .menu-import-review__field-label[b-8lpb1kufxo], .menu-import-review__variant[b-8lpb1kufxo] { grid-column:1 / -1; }
.menu-import-review__editor-actions[b-8lpb1kufxo] { display:flex; align-items:flex-end; justify-content:flex-end; }
.menu-import-review__remove[b-8lpb1kufxo] { display:inline-flex; align-items:center; gap:var(--pt-space-1); min-height:var(--pt-action-min-height); padding:0 var(--pt-space-3); border:0; border-radius:var(--pt-radius-md); background:transparent; color:var(--pt-danger); font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.menu-import-review__remove:hover:not(:disabled)[b-8lpb1kufxo] { background:var(--pt-danger-surface); }
.menu-import-review__remove:disabled[b-8lpb1kufxo] { cursor:default; opacity:.6; }
.menu-import-review__remove:focus-visible[b-8lpb1kufxo] { outline:0; box-shadow:var(--pt-focus-ring); }
.menu-import-review__variant[b-8lpb1kufxo] { display:grid; grid-template-columns:minmax(0,1fr) 140px; gap:var(--pt-space-2); }
@media (max-width:600px) { .menu-import-review__filter[b-8lpb1kufxo] { align-items:flex-start; flex-direction:column; } .menu-import-review__row-select[b-8lpb1kufxo] { grid-template-columns:20px minmax(0,1fr); } .menu-import-review__price[b-8lpb1kufxo] { grid-column:2; justify-items:start; } .menu-import-review__editor[b-8lpb1kufxo] { grid-template-columns:minmax(0,1fr); margin-left:var(--pt-space-4); } }

/* .menu-import-review__check (above) is a decorative selection glyph inside the full-width
   .menu-import-review__row-select button, not a control of its own — no touch rule for it. These
   two are real controls this pass had missed: .menu-import-review__tag is an aria-pressed toggle
   button (~19px tall today), and .menu-import-review__filter button is the unpadded "seleccionar
   todo/ninguno" text action. */
@media (hover: none) and (pointer: coarse) {
    .menu-import-review__tag[b-8lpb1kufxo] { min-height: var(--pt-action-min-height-touch); }
    .menu-import-review__filter button[b-8lpb1kufxo] { min-height: var(--pt-action-min-height-touch); }
    .menu-import-review__edit[b-8lpb1kufxo] { min-height: var(--pt-action-min-height-touch); }
}

/* Hover feedback for the review list. Every rule is gated on :not(:disabled) so the read-only
   Confirming state stays still, and reduced motion drops the transitions and the movement. */
.menu-import-review__row[b-8lpb1kufxo], .menu-import-review__check[b-8lpb1kufxo], .menu-import-review__tag[b-8lpb1kufxo], .menu-import-review__edit[b-8lpb1kufxo], .menu-import-review__filter button[b-8lpb1kufxo], .menu-import-review__remove[b-8lpb1kufxo], .menu-import-review__category-name[b-8lpb1kufxo] { transition:background-color var(--pt-dur-hover) var(--pt-ease-soft), border-color var(--pt-dur-hover) var(--pt-ease-soft), color var(--pt-dur-hover) var(--pt-ease-soft), transform var(--pt-dur-hover) var(--pt-ease-soft); }
.menu-import-review__row:not(.menu-import-review__row--selected):hover[b-8lpb1kufxo] { background:var(--pt-app-bg); }
.menu-import-review__row-select:not(:disabled):hover .menu-import-review__copy strong[b-8lpb1kufxo] { color:var(--pt-forest-700); }
.menu-import-review__tag:not(:disabled):not(.menu-import-review__tag--active):hover[b-8lpb1kufxo] { border-color:var(--pt-forest-600); color:var(--pt-forest-600); transform:translateY(-1px); }
.menu-import-review__tag--active:not(:disabled):hover[b-8lpb1kufxo] { background:var(--pt-forest-700); }
.menu-import-review__edit:not(:disabled):not([aria-expanded="true"]):hover[b-8lpb1kufxo] { border-color:var(--pt-forest-600); background:var(--pt-available-tint); }
.menu-import-review__filter button:hover[b-8lpb1kufxo] { color:var(--pt-forest-700); }
@media (prefers-reduced-motion:reduce) { .menu-import-review__row[b-8lpb1kufxo], .menu-import-review__check[b-8lpb1kufxo], .menu-import-review__tag[b-8lpb1kufxo], .menu-import-review__edit[b-8lpb1kufxo], .menu-import-review__filter button[b-8lpb1kufxo], .menu-import-review__remove[b-8lpb1kufxo], .menu-import-review__category-name[b-8lpb1kufxo] { transition:none; } .menu-import-review__tag:hover[b-8lpb1kufxo] { transform:none; } }
/* /Components/Pages/Menu/MenuItemEditor.razor.rz.scp.css */
.drawer-item-editor__section[b-w83dxzza3w] { display: grid; gap: var(--pt-space-2); margin-top: var(--pt-space-6); }
.drawer-item-editor__more-details[b-w83dxzza3w] { margin-top: var(--pt-space-6); }
.drawer-item-editor__more-details > summary[b-w83dxzza3w] { cursor: pointer; color: var(--pt-text-secondary); font: 700 var(--pt-text-caption) var(--pt-font-body); }
.drawer-item-editor__more-details[open] > summary[b-w83dxzza3w] { margin-bottom: var(--pt-space-3); }
.drawer-item-editor__more-details .drawer-item-editor__section[b-w83dxzza3w] { margin-top: var(--pt-space-3); }
.drawer-item-editor__photo-preview[b-w83dxzza3w], .drawer-item-editor__group-header[b-w83dxzza3w], .drawer-item-editor__choice[b-w83dxzza3w] { display: flex; align-items: center; gap: var(--pt-space-2); }
.drawer-item-editor__photo-preview[b-w83dxzza3w] { flex-wrap: wrap; }
.drawer-item-editor__thumb[b-w83dxzza3w] { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 10px; object-fit: cover; background: var(--pt-available-tint); color: var(--pt-forest-600); }
.drawer-item-editor__thumb--empty[b-w83dxzza3w] { background: var(--pt-row-divider); color: var(--pt-unavailable-icon); }
.drawer-item-editor__help[b-w83dxzza3w], .drawer-item-editor__meta[b-w83dxzza3w] { margin: 0; color: var(--pt-text-muted); font-size: var(--pt-text-caption); }
.drawer-item-editor__action[b-w83dxzza3w] { display: inline-flex; align-items: center; justify-content: center; gap: var(--pt-space-1); min-height: 38px; box-sizing: border-box; padding: 0 var(--pt-space-3); border: var(--pt-border-card); border-radius: var(--pt-radius-md); background: var(--pt-surface); color: var(--pt-text-secondary); font: 700 var(--pt-text-caption) var(--pt-font-body); text-decoration: none; cursor: pointer; }
.drawer-item-editor__action--danger[b-w83dxzza3w] { color: var(--pt-danger); }
.drawer-item-editor__action--primary[b-w83dxzza3w] { border-color: var(--pt-forest-700); background: var(--pt-forest-700); color: var(--pt-cream-50); }
.drawer-item-editor__action:focus-visible[b-w83dxzza3w], .drawer-item-editor__action:focus-within[b-w83dxzza3w] { outline: var(--pt-focus-outline); outline-offset: 2px; }
.drawer-item-editor__action[b-w83dxzza3w]  .drawer-item-editor__file { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.drawer-item-editor__group[b-w83dxzza3w] { display: grid; gap: var(--pt-space-2); padding: var(--pt-space-3); border: 1px solid var(--pt-row-divider); border-radius: 10px; background: var(--pt-app-bg); }
.drawer-item-editor__group-header strong[b-w83dxzza3w] { flex: 1; color: var(--pt-ink-900); font-family: var(--pt-font-display); }
.drawer-item-editor__choice[b-w83dxzza3w] { justify-content: space-between; padding-top: var(--pt-space-2); border-top: 1px solid var(--pt-row-divider); }
.drawer-item-editor__choice > span:first-child[b-w83dxzza3w] { flex: 1; }
.drawer-item-editor__choice-form[b-w83dxzza3w], .drawer-item-editor__group-form[b-w83dxzza3w] { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: var(--pt-space-2); align-items: end; }
.drawer-item-editor__group-form[b-w83dxzza3w] { grid-template-columns: minmax(0, 1fr) auto auto auto; }
.drawer-item-editor__group-form .field[b-w83dxzza3w] { margin: 0; }
.drawer-item-editor__price[b-w83dxzza3w] { width: 100px; }
.drawer-item-editor__number[b-w83dxzza3w] { width: 70px; }
/* The footer holds two groups, not one row: the destructive action anchored left, Cancelar and
   Guardar right, with a flexible span between them. Putting "Eliminar plato" beside "Guardar"
   is how a person aiming for save hits delete. */
.drawer-item-editor__footer[b-w83dxzza3w] { justify-content: flex-start; flex-wrap: wrap; gap: var(--pt-space-2); }
.drawer-item-editor__footer-spacer[b-w83dxzza3w] { flex: 1 1 auto; min-width: 0; }
.drawer-item-editor__delete[b-w83dxzza3w] { border-color: oklch(from var(--pt-danger) l c h / .34); background: var(--pt-danger-surface); }
.drawer-item-editor__delete:hover[b-w83dxzza3w] { border-color: var(--pt-danger); background: var(--pt-danger-summary); }
@media (max-width: 600px) { .drawer-item-editor__choice-form[b-w83dxzza3w], .drawer-item-editor__group-form[b-w83dxzza3w] { grid-template-columns: 1fr 1fr; } .drawer-item-editor__choice-form > input:first-child[b-w83dxzza3w], .drawer-item-editor__group-form > input:first-child[b-w83dxzza3w] { grid-column: 1 / -1; } }

@media (hover: none) and (pointer: coarse) {
    .drawer-item-editor__action[b-w83dxzza3w] { min-height: var(--pt-action-min-height-touch); }
    /* The remove-photo/remove-group/remove-choice buttons are icon-only (no visible text), so
       min-height alone leaves them ~40px wide — the [aria-label] attribute is what marks an
       icon-only instance in this file's markup, since a labelled button has no visible text to
       supply its accessible name. Text-bearing actions already exceed 44px in width from padding
       plus label text, so they need no explicit min-width. */
    .drawer-item-editor__action[aria-label][b-w83dxzza3w] { min-width: var(--pt-action-min-height-touch); }
}
.drawer-item-editor__group-edit[b-w83dxzza3w] { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: var(--pt-space-2); align-items: end; }
.drawer-item-editor__group-edit .field[b-w83dxzza3w] { margin: 0; }
.drawer-item-editor__check[b-w83dxzza3w] { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: var(--pt-space-2); color: var(--pt-text-secondary); font-size: var(--pt-text-caption); }
.drawer-item-editor__choice > input:first-child[b-w83dxzza3w] { flex: 1; min-width: 0; }
.drawer-item-editor__row-actions[b-w83dxzza3w] { display: inline-flex; gap: var(--pt-space-1); }
.drawer-item-editor__action:disabled[b-w83dxzza3w] { opacity: .45; cursor: default; }
@media (max-width: 600px) { .drawer-item-editor__group-edit[b-w83dxzza3w] { grid-template-columns: 1fr 1fr; } .drawer-item-editor__group-edit > input:first-child[b-w83dxzza3w], .drawer-item-editor__group-edit > .drawer-item-editor__row-actions[b-w83dxzza3w] { grid-column: 1 / -1; } .drawer-item-editor__choice[b-w83dxzza3w] { flex-wrap: wrap; } }
/* /Components/Pages/Menu/MenuItemForm.razor.rz.scp.css */
/* Last track is auto, not a literal px width, so it always matches .menu-item-form__remove's own
   width — 32px normally, 44px under the touch capability query below — instead of duplicating
   that number here (which a media query cannot do without either combining a width feature with
   a touch feature, forbidden by the responsive contract test, or overriding this unconditionally
   and cancelling the max-width: 600px collapse below for every touch phone). */
.menu-item-form__variant[b-bz278tcg1a] { display: grid; grid-template-columns: 1fr 120px auto; gap: var(--pt-space-2); align-items: center; }
.menu-item-form__remove[b-bz278tcg1a] { width: 32px; height: 32px; border: var(--pt-border-card); border-radius: var(--pt-radius-sm); background: transparent; color: var(--pt-danger); }
.menu-item-form__remove:focus-visible[b-bz278tcg1a] { outline: var(--pt-focus-outline); outline-offset: 2px; }
@media (max-width: 600px) { .menu-item-form__variant[b-bz278tcg1a] { grid-template-columns: 1fr auto; } .menu-item-form__variant input:first-child[b-bz278tcg1a] { grid-column: 1 / -1; } }
.menu-item-form__tag-group[b-bz278tcg1a] { display: grid; gap: var(--pt-space-2); margin: 0 0 var(--pt-space-3); padding: 0; border: 0; }
.menu-item-form__tag-legend[b-bz278tcg1a] { padding: 0; color: var(--pt-text-muted); font: 800 12px var(--pt-font-body); letter-spacing: .04em; text-transform: uppercase; }
.menu-item-form__tags[b-bz278tcg1a] { display: flex; flex-wrap: wrap; gap: var(--pt-space-2); }
.menu-item-form__tag[b-bz278tcg1a] { display: inline-flex; align-items: center; gap: var(--pt-space-2); padding: var(--pt-space-1) var(--pt-space-3); border: var(--pt-border-card); border-radius: var(--pt-radius-pill); background: var(--pt-surface); color: var(--pt-text-secondary); font-size: var(--pt-text-caption); font-weight: 700; cursor: pointer; }
.menu-item-form__tag--active[b-bz278tcg1a] { border-color: var(--pt-forest-600); background: var(--pt-radio-selected); color: var(--pt-ink-900); }
.menu-item-form__tag:has(input:focus-visible)[b-bz278tcg1a] { box-shadow: var(--pt-focus-ring); }
.menu-item-form__tag input[b-bz278tcg1a], .menu-item-form__featured input[b-bz278tcg1a] { margin: 0; accent-color: var(--pt-forest-600); }
.menu-item-form__featured[b-bz278tcg1a] { display: inline-flex; align-items: center; gap: var(--pt-space-2); cursor: pointer; }

@media (hover: none) and (pointer: coarse) {
    .menu-item-form__remove[b-bz278tcg1a] { width: var(--pt-action-min-height-touch); height: var(--pt-action-min-height-touch); }
}
/* /Components/Pages/Menu/MenuItemOptions.razor.rz.scp.css */
.options-page[b-i5rc2oxote] { display: grid; gap: var(--pt-space-6); }
.options-page__status[b-i5rc2oxote], .options-page__empty[b-i5rc2oxote] { margin: 0; color: var(--pt-text-secondary); font-size: var(--pt-text-body); }
.options-page__empty[b-i5rc2oxote] { display: grid; justify-items: start; gap: var(--pt-space-3); }
.options-page__breadcrumb[b-i5rc2oxote], .option-group__actions[b-i5rc2oxote], .option-group__meta[b-i5rc2oxote], .option-group__row-actions[b-i5rc2oxote] { display: flex; align-items: center; gap: var(--pt-space-2); }
.options-page__breadcrumb[b-i5rc2oxote] { flex-wrap: wrap; color: var(--pt-text-meta); font-size: var(--pt-text-caption); }
.options-page__breadcrumb a[b-i5rc2oxote] { color: var(--pt-text-secondary); text-decoration: none; }
.options-page__breadcrumb a:hover[b-i5rc2oxote] { color: var(--pt-forest-600); text-decoration: underline; }
.options-page__header[b-i5rc2oxote] { display: flex; align-items: end; justify-content: space-between; gap: var(--pt-space-4); }
.options-page__eyebrow[b-i5rc2oxote] { margin: 0 0 var(--pt-space-1); color: var(--pt-text-meta); font-size: var(--pt-text-caption); font-weight: 700; }
.options-page__header h1[b-i5rc2oxote], .options-page__new-group h2[b-i5rc2oxote], .option-group h2[b-i5rc2oxote] { margin: 0; color: var(--pt-ink-900); font-family: var(--pt-font-display); letter-spacing: var(--pt-tracking-title); }
.options-page__header h1[b-i5rc2oxote] { font-size: var(--pt-text-title); }
.options-page__new-group h2[b-i5rc2oxote], .option-group h2[b-i5rc2oxote] { font-size: var(--pt-text-subtitle); }
.options-page__price[b-i5rc2oxote] { margin: 0; color: var(--pt-text-secondary); font-size: var(--pt-text-body); font-variant-numeric: tabular-nums; }
.options-page__price span[b-i5rc2oxote] { margin-left: var(--pt-space-2); color: var(--pt-text-meta); font-size: var(--pt-text-caption); }
.options-page__groups[b-i5rc2oxote] { display: grid; gap: var(--pt-space-4); }
.option-group[b-i5rc2oxote], .options-page__new-group[b-i5rc2oxote] { padding: var(--pt-space-4); border: var(--pt-border-card); border-radius: var(--pt-radius-lg); background: var(--pt-surface); box-shadow: var(--pt-shadow-card); }
.option-group__header[b-i5rc2oxote] { display: flex; align-items: start; justify-content: space-between; gap: var(--pt-space-4); }
.option-group__meta[b-i5rc2oxote] { flex-wrap: wrap; margin: var(--pt-space-1) 0 0; color: var(--pt-text-meta); font-size: var(--pt-text-caption); }
.option-group__badge[b-i5rc2oxote] { padding: var(--pt-space-1) var(--pt-space-2); border-radius: var(--pt-radius-pill); background: var(--pt-cream-100); color: var(--pt-text-secondary); font-size: var(--pt-text-caption); font-weight: 700; }
.option-group__badge--required[b-i5rc2oxote] { background: var(--pt-danger-summary); color: var(--pt-on-danger); }
/* The variant flag changes how the guest carte renders the dish — chips, and a "desde $X" price —
   so it has to be legible with the group collapsed, not only inside the editor. Same pill anatomy as
   the required/optional badge, in the forest pair the tokens already pin to --pt-available-tint. */
.option-group__badge--variant[b-i5rc2oxote] { background: var(--pt-available-tint); color: var(--pt-forest-600); }
.option-group__body[b-i5rc2oxote] { display: grid; gap: var(--pt-space-3); margin-top: var(--pt-space-4); }
.option-group__choices[b-i5rc2oxote] { width: 100%; border-collapse: collapse; color: var(--pt-text-strong); font-size: var(--pt-text-caption); }
.option-group__choices th[b-i5rc2oxote], .option-group__choices td[b-i5rc2oxote] { padding: var(--pt-space-3); border-top: var(--pt-border-row); text-align: left; vertical-align: middle; }
.option-group__choices th[b-i5rc2oxote] { color: var(--pt-text-meta); font-weight: 700; }
.option-group__choices th:last-child[b-i5rc2oxote], .option-group__choices td:last-child[b-i5rc2oxote] { text-align: right; }
.option-group__row-actions[b-i5rc2oxote] { justify-content: flex-end; }
.option-group__modifier[b-i5rc2oxote] { font-variant-numeric: tabular-nums; }
.option-group__modifier--positive[b-i5rc2oxote] { color: var(--pt-on-danger); }
.option-group__description[b-i5rc2oxote] { color: var(--pt-text-meta); }
.option-group--shared[b-i5rc2oxote] { background: var(--pt-cream-100); }
.option-group__shared[b-i5rc2oxote], .option-group__shared-choices[b-i5rc2oxote], .options-page__help[b-i5rc2oxote] { margin: var(--pt-space-1) 0 0; color: var(--pt-text-meta); font-size: var(--pt-text-caption); }
.option-group__edit[b-i5rc2oxote], .option-group__add-choice[b-i5rc2oxote], .options-page__group-form[b-i5rc2oxote] { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: end; gap: var(--pt-space-3); width: 100%; }
.option-group__add-choice[b-i5rc2oxote] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; padding-top: var(--pt-space-4); border-top: var(--pt-border-row); }
.option-group__edit .field[b-i5rc2oxote], .option-group__add-choice .field[b-i5rc2oxote], .options-page__group-form .field[b-i5rc2oxote] { margin: 0; }
/* The group forms are 4-track grids (name, min, max, actions). The variant checkbox is a fifth
   child with a help line under it, so it takes a row of its own rather than a fifth track that
   would squash the name field. */
.field--checkbox[b-i5rc2oxote] { grid-column: 1 / -1; display: grid; gap: var(--pt-space-1); }
.field--checkbox label[b-i5rc2oxote] { display: inline-flex; align-items: center; gap: var(--pt-space-2); font-size: var(--pt-text-caption); font-weight: 700; cursor: pointer; }
.field--checkbox input[b-i5rc2oxote] { margin: 0; accent-color: var(--pt-forest-600); }
/* The "Avanzado" disclosure holding the raw Min/Max fields is the same kind of grid child as the
   variant checkbox above — it needs the full row, not a squashed single track. */
.option-group__advanced[b-i5rc2oxote] { grid-column: 1 / -1; display: grid; gap: var(--pt-space-3); }
.option-group__advanced summary[b-i5rc2oxote] { cursor: pointer; color: var(--pt-text-secondary); font-size: var(--pt-text-caption); font-weight: 700; }
.option-group__advanced .field[b-i5rc2oxote] { margin-top: var(--pt-space-2); }
.option-group__number[b-i5rc2oxote] { width: var(--pt-space-12); }
.option-group__price-control[b-i5rc2oxote] { min-width: calc(var(--pt-space-12) * 2); }
.options-page__new-group[b-i5rc2oxote] { display: grid; gap: var(--pt-space-4); }
@media (max-width: 600px) { .options-page__header[b-i5rc2oxote], .option-group__header[b-i5rc2oxote] { align-items: stretch; flex-direction: column; } .option-group__actions[b-i5rc2oxote] { flex-wrap: wrap; } .option-group__choices[b-i5rc2oxote] { display: block; overflow-x: auto; } .option-group__choices th[b-i5rc2oxote], .option-group__choices td[b-i5rc2oxote] { white-space: nowrap; } .option-group__edit[b-i5rc2oxote], .option-group__add-choice[b-i5rc2oxote], .options-page__group-form[b-i5rc2oxote] { grid-template-columns: 1fr 1fr; } .option-group__edit > .field:first-child[b-i5rc2oxote], .option-group__add-choice > .field:first-child[b-i5rc2oxote], .options-page__group-form > .field:first-child[b-i5rc2oxote] { grid-column: 1 / -1; } .option-group__edit .option-group__actions[b-i5rc2oxote], .option-group__add-choice .option-group__actions[b-i5rc2oxote] { grid-column: 1 / -1; } }

.menu-skeleton[b-i5rc2oxote] { display: grid; gap: 10px; }
.menu-skeleton__bar[b-i5rc2oxote] { border-radius: var(--pt-radius-md); background: var(--pt-cream-100); animation: menu-skeleton-pulse-b-i5rc2oxote 1.4s var(--pt-ease-soft) infinite; }
.menu-skeleton__bar--title[b-i5rc2oxote] { width: 220px; height: 20px; }
.menu-skeleton__bar--row[b-i5rc2oxote] { height: 64px; }
@keyframes menu-skeleton-pulse-b-i5rc2oxote { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .menu-skeleton__bar[b-i5rc2oxote] { animation: none; } }
.option-group__limits[b-i5rc2oxote] { display: flex; flex-wrap: wrap; gap: var(--pt-space-3); }
.option-group__limits .field[b-i5rc2oxote] { margin: 0; }
.option-group__actions .capy-form-action:disabled[b-i5rc2oxote], .option-group__row-actions .capy-form-action:disabled[b-i5rc2oxote] { opacity: .45; cursor: default; }
/* /Components/Pages/Menu/MenuItemRow.razor.rz.scp.css */
.dish-row[b-3gqpf7hjag] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--pt-space-4); align-items: center; padding: 14px 18px; border-top: 1px solid var(--pt-row-divider); }
.dish-row:first-child[b-3gqpf7hjag] { border-top: 0; }
/* A dish the owner took off the carte, as opposed to one the kitchen pulled for the night: it is
   only on screen because "Ver retiradas" is on, so it reads as set aside rather than as part of
   today's list. */
.dish-row--retired[b-3gqpf7hjag] { background: var(--pt-app-bg); }
.dish-row__main[b-3gqpf7hjag], .dish-row__controls[b-3gqpf7hjag] { display: flex; align-items: center; gap: var(--pt-space-3); min-width: 0; }
.dish-row__main[b-3gqpf7hjag] { align-items: flex-start; gap: var(--pt-space-3); }
/* .dish-row__body is the unnamed wrapper around heading + description: a flex item of
   .dish-row__main, so it defaults to min-width: auto (sized to its widest descendant's
   min-content) unless overridden — the same trap .dish-row__main itself guards against above.
   Without this, a long dish name pushed the whole row past the viewport on phones. */
.dish-row__body[b-3gqpf7hjag] { min-width: 0; }
.dish-row__heading[b-3gqpf7hjag] { display: flex; align-items: center; flex-wrap: wrap; gap: var(--pt-space-2); min-width: 0; }
.dish-row__thumb[b-3gqpf7hjag] { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 10px; object-fit: cover; background: var(--pt-available-tint); color: var(--pt-forest-600); }
.dish-row__thumb--empty.dish-row__thumb--available[b-3gqpf7hjag] { background: var(--pt-available-tint); color: var(--pt-forest-600); }
.dish-row__thumb--empty.dish-row__thumb--unavailable[b-3gqpf7hjag] { background: var(--pt-row-divider); color: var(--pt-unavailable-icon); }
/* Owner-reported live at 353px: a long dish name ("SHISH KEBAB DE POLLO O CORDERO") must stay
   readable, not get ellipsised, so it wraps instead of truncating. overflow-wrap: anywhere lets it
   break even mid-word if a single word alone is wider than the row. */
.dish-row__name[b-3gqpf7hjag] { color: var(--pt-ink-900); font: 800 15.5px var(--pt-font-display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.dish-row__name--unavailable[b-3gqpf7hjag] { color: var(--pt-unavailable-text); text-decoration: line-through; }
/* Why a dish is off the carte, said once at the top of the row. Amber is the kitchen's temporary
   pull; the neutral chip is the owner's own retirement, which no shift will undo by itself. */
.dish-row__chip[b-3gqpf7hjag] { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 2px 7px; border-radius: var(--pt-radius-chip); background: var(--pt-row-divider); color: var(--pt-text-muted); font: 700 11px var(--pt-font-body); }
.dish-row__chip--out[b-3gqpf7hjag] { background: oklch(from var(--pt-warning) l c h / .16); color: var(--pt-on-warning); }
.dish-row__chip > i[b-3gqpf7hjag] { font-size: 11px; }
.dish-row__description[b-3gqpf7hjag] { margin: 3px 0 0; color: var(--pt-text-muted); font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }
.dish-row__marked-out[b-3gqpf7hjag] { margin: 3px 0 0; color: var(--pt-text-secondary); font-size: 12.5px; line-height: 1.5; }
.dish-row__price[b-3gqpf7hjag] { min-width: 5ch; color: var(--pt-ink-900); font: 800 17px var(--pt-font-display); font-variant-numeric: tabular-nums; text-align: right; }
.dish-row--retired .dish-row__price[b-3gqpf7hjag] { color: var(--pt-unavailable-text); }
.dish-row__toggle[b-3gqpf7hjag] { width: 52px; height: 30px; }
.dish-row__toggle .capy-toggle__knob[b-3gqpf7hjag] { width: 24px; height: 24px; }
.dish-row__toggle[aria-checked="true"] .capy-toggle__knob[b-3gqpf7hjag] { transform: translateX(22px); }
/* Photo, reordering and option groups now live behind the row's kebab (.capy-rowmenu, in
   capy-forms.css) instead of five icon buttons that faded in on hover. The trigger is sized and
   bordered to match the pencil beside it, so the row ends in two identical squares rather than a
   square and a bare glyph. */
.dish-row__menu[b-3gqpf7hjag] { --rowmenu-trigger: 38px; --rowmenu-trigger-border: var(--pt-border-card); }
.dish-row__edit[b-3gqpf7hjag] { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none; border: var(--pt-border-card); border-radius: 9px; background: var(--pt-surface); color: var(--pt-text-secondary); font: 700 var(--pt-text-caption) var(--pt-font-body); text-decoration: none; cursor: pointer; }
.dish-row__edit:hover[b-3gqpf7hjag] { border-color: var(--pt-forest-600); color: var(--pt-ink-900); }
.dish-row__menu[b-3gqpf7hjag]  .capy-rowmenu__trigger { border-radius: 9px; background: var(--pt-surface); }
.dish-row__menu[b-3gqpf7hjag]  .capy-rowmenu__trigger:hover, .dish-row__menu[b-3gqpf7hjag]  .capy-rowmenu__trigger[aria-expanded="true"] { border-color: var(--pt-forest-600); background: var(--pt-surface); }
.dish-row__edit:focus-visible[b-3gqpf7hjag] { outline: var(--pt-focus-outline); outline-offset: 2px; }
@media (max-width: 900px) { .dish-row[b-3gqpf7hjag] { grid-template-columns: 1fr; gap: 10px; } .dish-row__controls[b-3gqpf7hjag] { flex-wrap: wrap; padding-left: 54px; } }

@media (hover: none) and (pointer: coarse) {
    .dish-row__edit[b-3gqpf7hjag] { width: var(--pt-action-min-height-touch); height: var(--pt-action-min-height-touch); }
    .dish-row__toggle[b-3gqpf7hjag] { width: 56px; height: var(--pt-action-min-height-touch); }
    .dish-row__toggle .capy-toggle__knob[b-3gqpf7hjag] { width: 32px; height: 32px; }
    /* .dish-row__toggle's unconditional translateX(22px) (above) outranks the shared
       .capy-toggle touch rule's translateX(12px) (capy-forms.css) because it is more specific,
       so it still wins here unless restated: without this line the checked knob would overflow
       the 56px track by 4px at this size. Same 56/44/32/6px-inset numbers as the shared
       component, so the same translateX. */
    .dish-row__toggle[aria-checked="true"] .capy-toggle__knob[b-3gqpf7hjag] { transform: translateX(12px); }
}
/* /Components/Pages/Menu/MenuPhotos.razor.rz.scp.css */
/* Fotos de la carta. Header, buttons and alert repeat MenuCategories.razor.css
   rule for rule (scoped CSS cannot share them), so the two screens read as one. The review panel
   uses the global .drawer from app.css, the same one the dish editor opens. */
.photos-header[b-ojuofmtovg] {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--pt-space-4);
    padding: var(--pt-space-3) 0;
    margin-bottom: var(--pt-space-6);
}
.photos-header h1[b-ojuofmtovg] {
    margin: 0;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-title);
    font-weight: 800;
    letter-spacing: var(--pt-tracking-display-l);
}
.photos-header p[b-ojuofmtovg] { margin: var(--pt-space-1) 0 0; color: var(--pt-text-secondary); font-size: var(--pt-text-caption); }
.photos-header__actions[b-ojuofmtovg] { display: flex; flex-wrap: wrap; gap: var(--pt-space-2); }

.photos-btn[b-ojuofmtovg] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pt-space-2);
    min-height: 42px;
    box-sizing: border-box;
    padding: 9px var(--pt-space-4);
    border-radius: var(--pt-radius-md);
    font-family: var(--pt-font-body);
    font-size: var(--pt-text-caption);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--pt-dur-hover) var(--pt-ease-soft);
}
.photos-btn--primary[b-ojuofmtovg] { color: var(--pt-cream-50); background: var(--pt-forest-700); border: 1px solid var(--pt-forest-700); }
.photos-btn--secondary[b-ojuofmtovg] { color: var(--pt-text-strong); background: transparent; border: var(--pt-border-card); }
.photos-btn:hover[b-ojuofmtovg] { transform: translateY(-2px); box-shadow: var(--pt-shadow-card); }
.photos-btn--primary:hover[b-ojuofmtovg] { background: var(--pt-forest-600); border-color: var(--pt-forest-600); }
.photos-btn--danger[b-ojuofmtovg] { color: var(--pt-danger); background: var(--pt-surface); border: 1px solid var(--pt-danger); }
.photos-btn--danger:hover[b-ojuofmtovg] { color: var(--pt-cream-50); background: var(--pt-danger); }
.photos-btn:active[b-ojuofmtovg] { transform: none; box-shadow: none; }
.photos-btn:focus-visible[b-ojuofmtovg], .photos-btn:focus-within[b-ojuofmtovg] { outline: var(--pt-focus-outline); outline-offset: 2px; }
.photos-btn:disabled[b-ojuofmtovg], .photos-btn--disabled[b-ojuofmtovg] { opacity: .55; cursor: default; transform: none; box-shadow: none; }
/* The bulk input covers its label at opacity 0, so the whole button opens the picker. */
.photos-btn[b-ojuofmtovg]  .photos-btn__file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.photos-btn--disabled[b-ojuofmtovg]  .photos-btn__file { cursor: default; }
/* Inputs of earlier batches, kept mounted only so their files stay readable until sent. */
.photos-btn[b-ojuofmtovg]  .photos-btn__file--held { display: none; }

.photos-alert[b-ojuofmtovg] { display: flex; align-items: center; gap: var(--pt-space-2); margin-bottom: var(--pt-space-4); padding: 11px 13px; border: 1px solid oklch(from var(--pt-danger) l c h / .3); border-radius: var(--pt-radius-md); background: var(--pt-danger-summary); color: var(--pt-danger); font-size: 13px; font-weight: 700; }
.photos-alert > span[b-ojuofmtovg] { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.photos-alert__dismiss[b-ojuofmtovg] { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border: 0; border-radius: var(--pt-radius-sm); background: transparent; color: inherit; font-size: 16px; cursor: pointer; }
.photos-alert__dismiss:hover[b-ojuofmtovg] { background: oklch(from var(--pt-danger) l c h / .1); }

.photos-progress[b-ojuofmtovg] { display: flex; align-items: center; gap: var(--pt-space-3); margin-top: var(--pt-space-2); max-width: 440px; }
.photos-progress__track[b-ojuofmtovg] { flex: 0 0 180px; height: 8px; overflow: hidden; border-radius: var(--pt-radius-pill); background: var(--pt-cream-200); }
.photos-progress__fill[b-ojuofmtovg] { display: block; min-width: 8px; height: 100%; border-radius: inherit; background: var(--pt-forest-700); transition: width var(--pt-dur-base) var(--pt-ease-soft); }
.photos-progress__label[b-ojuofmtovg] { color: var(--pt-text-strong); font-size: var(--pt-text-caption); font-weight: 700; white-space: nowrap; }

/* Category navigation: top sections as underlined tabs, their subsections as chips below. */
.photos-nav[b-ojuofmtovg] { display: flex; flex-direction: column; gap: var(--pt-space-3); margin-bottom: var(--pt-space-6); }
.photos-nav__row[b-ojuofmtovg] { display: flex; align-items: end; gap: var(--pt-space-4); border-bottom: 1px solid var(--pt-cream-300); }
.photos-roots[b-ojuofmtovg] { display: flex; flex: 1; min-width: 0; gap: var(--pt-space-6); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.photos-roots__tab[b-ojuofmtovg] { display: inline-flex; align-items: center; gap: var(--pt-space-2); min-height: 48px; padding: 0 2px; margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--pt-text-meta); font: 700 14px var(--pt-font-body); white-space: nowrap; cursor: pointer; transition: color var(--pt-dur-hover) var(--pt-ease-soft); }
.photos-roots__tab:hover[b-ojuofmtovg] { color: var(--pt-ink-900); }
.photos-roots__tab--selected[b-ojuofmtovg] { color: var(--pt-forest-700); border-bottom-color: var(--pt-forest-700); }
.photos-roots__count[b-ojuofmtovg] { padding: 2px 8px; border-radius: var(--pt-radius-pill); background: var(--pt-cream-100); color: var(--pt-text-strong); font-size: 12px; font-variant-numeric: tabular-nums; }
.photos-roots__tab--selected .photos-roots__count[b-ojuofmtovg] { background: var(--pt-forest-700); color: var(--pt-cream-50); }
.photos-toggle[b-ojuofmtovg] { display: inline-flex; flex: none; align-items: center; gap: var(--pt-space-2); min-height: 40px; margin-bottom: var(--pt-space-1); padding: 0 var(--pt-space-3); border: var(--pt-border-card); border-radius: var(--pt-radius-md); background: var(--pt-surface); color: var(--pt-text-strong); font: 700 var(--pt-text-caption) var(--pt-font-body); cursor: pointer; }
.photos-toggle--on[b-ojuofmtovg] { border-color: var(--pt-forest-700); color: var(--pt-forest-700); }
.photos-chips[b-ojuofmtovg] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pt-space-2); }
.photos-chips__sep[b-ojuofmtovg] { width: 1px; height: 24px; margin: 0 var(--pt-space-1); background: var(--pt-cream-300); }
.photos-chip[b-ojuofmtovg] { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: var(--pt-border-card); border-radius: var(--pt-radius-pill); background: var(--pt-surface); color: var(--pt-ink-900); font: 700 var(--pt-text-caption) var(--pt-font-body); white-space: nowrap; cursor: pointer; }
.photos-chip:hover[b-ojuofmtovg] { border-color: var(--pt-forest-600); }
.photos-chip--selected[b-ojuofmtovg] { border-color: var(--pt-forest-700); background: var(--pt-available-tint); color: var(--pt-forest-700); }
.photos-chip__count[b-ojuofmtovg] { color: var(--pt-text-meta); font-weight: 600; font-variant-numeric: tabular-nums; }
.photos-roots__tab:focus-visible[b-ojuofmtovg], .photos-chip:focus-visible[b-ojuofmtovg], .photos-toggle:focus-visible[b-ojuofmtovg] { outline: var(--pt-focus-outline); outline-offset: 2px; }

.photos-section[b-ojuofmtovg] { margin-bottom: var(--pt-space-8); }
.photos-section h2[b-ojuofmtovg] { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pt-space-2); margin: 0 0 var(--pt-space-3); color: var(--pt-ink-900); font-family: var(--pt-font-display); font-size: var(--pt-text-subtitle); font-weight: 700; }
.photos-section__parent[b-ojuofmtovg], .photos-section__count[b-ojuofmtovg] { color: var(--pt-text-meta); font-family: var(--pt-font-body); font-size: var(--pt-text-caption); font-weight: 600; }
.photos-section__count[b-ojuofmtovg] { font-variant-numeric: tabular-nums; }
.photos-grid[b-ojuofmtovg] { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--pt-space-4); margin: 0; padding: 0; list-style: none; }

.photos-card[b-ojuofmtovg] { display: flex; flex-direction: column; overflow: hidden; border: var(--pt-border-card); border-radius: var(--pt-radius-lg); background: var(--pt-surface); box-shadow: var(--pt-shadow-card); }
.photos-card__photo[b-ojuofmtovg] { position: relative; aspect-ratio: 4 / 3; max-width: 100%; overflow: hidden; background: var(--pt-tray-bg); border-bottom: var(--pt-border-row); }
.photos-card__frame[b-ojuofmtovg] { position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer; }
/* Saved photo and travelling preview stack in the same frame. Transparent text: a photo that fails
   to load shows an empty frame, not its alt text spilling over the card. */
.photos-card__img[b-ojuofmtovg], .photos-card__preview[b-ojuofmtovg] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; color: transparent; }
.photos-card__img[b-ojuofmtovg] { z-index: 1; }
.photos-card__preview[b-ojuofmtovg] { z-index: 2; }
.photos-card__preview--under[b-ojuofmtovg] { z-index: 0; }
.photos-card__img--new[b-ojuofmtovg] { animation: photos-reveal-b-ojuofmtovg var(--pt-dur-swap) var(--pt-ease-enter) both; }
/* Children ignore the pointer so a drag over them never fires dragleave on the label, and a click
   anywhere on the frame reaches the file input. */
.photos-card__img[b-ojuofmtovg], .photos-card__preview[b-ojuofmtovg], .photos-card__empty[b-ojuofmtovg], .photos-card__drop[b-ojuofmtovg], .photos-card__busy[b-ojuofmtovg], .photos-card__badge[b-ojuofmtovg], .photos-card__failed[b-ojuofmtovg] { pointer-events: none; }
.photos-card__empty[b-ojuofmtovg] { position: absolute; inset: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--pt-space-1); padding: var(--pt-space-2); border: 1.5px dashed var(--pt-cream-300); border-radius: var(--pt-radius-md); color: var(--pt-text-meta); font-size: var(--pt-text-caption); font-weight: 700; text-align: center; transition: border-color var(--pt-dur-hover) var(--pt-ease-soft), color var(--pt-dur-hover) var(--pt-ease-soft); }
.photos-card__empty .bi[b-ojuofmtovg] { font-size: 22px; }
.photos-card__photo:hover .photos-card__empty[b-ojuofmtovg] { border-color: var(--pt-forest-600); color: var(--pt-forest-700); }
.photos-card__frame:focus-within[b-ojuofmtovg] { outline: var(--pt-focus-outline); outline-offset: -2px; }
/* With a photo the frame shows it bigger, so the cursor says so; Cambiar and Quitar sit in a bar that
   appears on hover or focus. Hidden by visibility, not only opacity: a file dragged in from outside
   the window leaves :hover frozen, so the bar stays out of the way and the drop lands on the input. */
.photos-card--has-photo .photos-card__photo[b-ojuofmtovg]  .photos-card__file { cursor: zoom-in; }
.photos-card__tools[b-ojuofmtovg] { position: absolute; z-index: 7; right: 8px; bottom: 8px; display: flex; gap: 4px; padding: 3px; border: var(--pt-border-card); border-radius: var(--pt-radius-md); background: var(--pt-surface); box-shadow: var(--pt-shadow-card); visibility: hidden; opacity: 0; transition: opacity var(--pt-dur-base) var(--pt-ease-soft), visibility var(--pt-dur-base) var(--pt-ease-soft); }
.photos-card--has-photo .photos-card__photo:hover .photos-card__tools[b-ojuofmtovg], .photos-card--has-photo .photos-card__photo:focus-within .photos-card__tools[b-ojuofmtovg] { visibility: visible; opacity: 1; }
.photos-card__tool[b-ojuofmtovg] { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 32px; height: 32px; box-sizing: border-box; padding: 0 10px; border: 0; border-radius: var(--pt-radius-sm); background: transparent; color: var(--pt-ink-900); font: 700 12.5px var(--pt-font-body); cursor: pointer; transition: background var(--pt-dur-hover) var(--pt-ease-soft), color var(--pt-dur-hover) var(--pt-ease-soft); }
.photos-card__tool:hover[b-ojuofmtovg] { background: var(--pt-row-hover); }
.photos-card__tool--danger[b-ojuofmtovg] { padding: 0; color: var(--pt-danger); }
.photos-card__tool--danger:hover[b-ojuofmtovg] { background: var(--pt-danger); color: var(--pt-cream-50); }
.photos-card__tool:focus-visible[b-ojuofmtovg], .photos-card__tool:focus-within[b-ojuofmtovg] { outline: var(--pt-focus-outline); outline-offset: 1px; }
.photos-card__tool[b-ojuofmtovg]  .photos-card__tool-file { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.photos-card__drop[b-ojuofmtovg] { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--pt-space-1); background: oklch(from var(--pt-available-tint) l c h / .9); color: var(--pt-forest-700); font-size: var(--pt-text-caption); font-weight: 700; }
.photos-card__drop .bi[b-ojuofmtovg] { font-size: 20px; }
/* Removing asks once, inside the card, so the grid never jumps to a dialog. */
.photos-card__confirm[b-ojuofmtovg] { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: var(--pt-space-3); background: oklch(from var(--pt-surface) l c h / .95); color: var(--pt-ink-900); font-size: 13px; text-align: center; animation: photos-fade-b-ojuofmtovg var(--pt-dur-base) var(--pt-ease-enter) both; }
.photos-card__confirm > span[b-ojuofmtovg] { color: var(--pt-text-meta); font-size: 12px; }
.photos-card__confirm-actions[b-ojuofmtovg] { display: flex; gap: var(--pt-space-2); margin-top: 4px; }
.photos-card__confirm-remove[b-ojuofmtovg], .photos-card__confirm-cancel[b-ojuofmtovg] { min-height: 32px; padding: 0 12px; border-radius: var(--pt-radius-pill); background: var(--pt-surface); font: 700 12.5px var(--pt-font-body); cursor: pointer; transition: background var(--pt-dur-hover) var(--pt-ease-soft), color var(--pt-dur-hover) var(--pt-ease-soft); }
.photos-card__confirm-remove[b-ojuofmtovg] { border: 1px solid var(--pt-danger); color: var(--pt-danger); }
.photos-card__confirm-remove:hover[b-ojuofmtovg] { background: var(--pt-danger); color: var(--pt-cream-50); }
.photos-card__confirm-cancel[b-ojuofmtovg] { border: var(--pt-border-card); color: var(--pt-text-strong); }
.photos-card__confirm-cancel:hover[b-ojuofmtovg] { background: var(--pt-row-hover); }
.photos-card__confirm-remove:focus-visible[b-ojuofmtovg], .photos-card__confirm-cancel:focus-visible[b-ojuofmtovg] { outline: var(--pt-focus-outline); outline-offset: 2px; }
/* In flight: the new photo shows through a light veil, with the step and a meter over it. */
.photos-card__busy[b-ojuofmtovg] { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--pt-space-2); padding: var(--pt-space-3); background: oklch(from var(--pt-surface) l c h / .72); color: var(--pt-ink-900); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; animation: photos-fade-b-ojuofmtovg var(--pt-dur-base) var(--pt-ease-enter) both; }
.photos-card__busy .photos-meter[b-ojuofmtovg] { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 0; background: oklch(from var(--pt-forest-700) l c h / .14); }
.photos-card__badge[b-ojuofmtovg] { position: absolute; z-index: 3; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border: 1px solid var(--pt-available-border); border-radius: var(--pt-radius-chip); background: var(--pt-available-tint); color: var(--pt-on-success); font-size: 12px; font-weight: 700; animation: photos-pop-b-ojuofmtovg var(--pt-dur-return) var(--pt-ease-glide) 120ms both; }
.photos-card--over .photos-card__photo[b-ojuofmtovg] { background: var(--pt-available-tint); outline: 2px solid var(--pt-forest-600); outline-offset: -2px; }
.photos-card--over .photos-card__empty[b-ojuofmtovg] { border-color: var(--pt-forest-600); color: var(--pt-forest-600); }
.photos-card__photo[b-ojuofmtovg]  .photos-card__file { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.photos-card__photo[b-ojuofmtovg]  .photos-card__file:disabled { cursor: progress; }
/* Failed: the reason, and a retry above the input; the rest of the frame still opens the picker. */
.photos-card--failed[b-ojuofmtovg] { border-color: oklch(from var(--pt-danger) l c h / .45); }
.photos-card__failed[b-ojuofmtovg] { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: var(--pt-space-3); background: oklch(from var(--pt-danger-summary) l c h / .94); color: var(--pt-danger); font-size: 12px; font-weight: 700; text-align: center; animation: photos-fade-b-ojuofmtovg var(--pt-dur-base) var(--pt-ease-enter) both; }
.photos-card__failed > .bi[b-ojuofmtovg] { font-size: 18px; }
.photos-card__error[b-ojuofmtovg] { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.photos-card__retry[b-ojuofmtovg] { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 12px; border: 1px solid var(--pt-danger); border-radius: var(--pt-radius-pill); background: var(--pt-surface); color: var(--pt-danger); font: 700 12px var(--pt-font-body); cursor: pointer; pointer-events: auto; transition: background var(--pt-dur-hover) var(--pt-ease-soft), color var(--pt-dur-hover) var(--pt-ease-soft); }
.photos-card__retry:hover[b-ojuofmtovg] { background: var(--pt-danger); color: var(--pt-cream-50); }
.photos-card__retry:focus-visible[b-ojuofmtovg] { outline: var(--pt-focus-outline); outline-offset: 2px; }
.photos-card__body[b-ojuofmtovg] { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px 12px; }
.photos-card__name[b-ojuofmtovg] { color: var(--pt-ink-900); font-weight: 700; overflow-wrap: anywhere; }
.photos-card__meta[b-ojuofmtovg] { color: var(--pt-text-meta); font-size: 12px; }

.photos-empty[b-ojuofmtovg] { display: flex; flex-direction: column; align-items: center; gap: var(--pt-space-3); padding: var(--pt-space-8); border: 1px dashed var(--pt-cream-300); border-radius: var(--pt-radius-lg); background: var(--pt-surface); color: var(--pt-text-meta); text-align: center; }
.photos-empty p[b-ojuofmtovg] { margin: 0; }

.photos-skeleton[b-ojuofmtovg] { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--pt-space-4); }
.photos-skeleton__card[b-ojuofmtovg] { aspect-ratio: 4 / 3.8; border-radius: var(--pt-radius-lg); background: var(--pt-cream-100); animation: photos-skeleton-pulse-b-ojuofmtovg 1.4s var(--pt-ease-soft) infinite; }
@keyframes photos-skeleton-pulse-b-ojuofmtovg { 50% { opacity: .55; } }

/* Review drawer */
.photos-review[b-ojuofmtovg] { width: min(560px, 96vw); }
.photos-review h3[b-ojuofmtovg] { color: var(--pt-ink-900); font-family: var(--pt-font-display); font-weight: 700; }
.photos-review__sub[b-ojuofmtovg] { margin: var(--pt-space-1) 0 0; color: var(--pt-text-meta); font-size: var(--pt-text-caption); }
.photos-review__body[b-ojuofmtovg] { display: flex; flex-direction: column; gap: var(--pt-space-6); }
.photos-review__group h4[b-ojuofmtovg] { display: flex; align-items: center; gap: var(--pt-space-2); margin: 0 0 var(--pt-space-2); color: var(--pt-text-strong); font-family: var(--pt-font-display); font-size: 14px; font-weight: 700; }
.photos-review__count[b-ojuofmtovg] { padding: 1px 8px; border-radius: var(--pt-radius-pill); background: var(--pt-cream-100); color: var(--pt-text-meta); font-size: 12px; }
.photos-review__rows[b-ojuofmtovg] { margin: 0; padding: 0; list-style: none; border: var(--pt-border-card); border-radius: var(--pt-radius-lg); overflow: hidden; }
.photos-review__row[b-ojuofmtovg] { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: var(--pt-space-3); padding: 10px 12px; border-top: var(--pt-border-row); }
.photos-review__row:first-child[b-ojuofmtovg] { border-top: 0; }
.photos-review__row--skipped[b-ojuofmtovg] { opacity: .55; }
.photos-review__row[b-ojuofmtovg] { animation: photos-fade-b-ojuofmtovg var(--pt-dur-base) var(--pt-ease-enter) both; }
.photos-review__row img[b-ojuofmtovg], .photos-review__thumb[b-ojuofmtovg] { width: 56px; height: 42px; border-radius: var(--pt-radius-sm); object-fit: cover; display: grid; place-items: center; background: var(--pt-tray-bg); color: var(--pt-text-faint); }
.photos-review__text[b-ojuofmtovg] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.photos-review__dish[b-ojuofmtovg] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--pt-ink-900); font-weight: 700; }
.photos-review__pill[b-ojuofmtovg] { padding: 2px 7px; border: 1px solid var(--pt-occupied-border); border-radius: var(--pt-radius-chip); background: var(--pt-occupied-tint); color: var(--pt-occupied-fg); font-size: 11.5px; font-weight: 700; }
.photos-review__problem[b-ojuofmtovg] { color: var(--pt-danger); font-weight: 700; }
.photos-review__file[b-ojuofmtovg] { color: var(--pt-text-meta); font-size: 12px; overflow-wrap: anywhere; }
.photos-review__select[b-ojuofmtovg] { width: 100%; min-height: 36px; padding: 0 var(--pt-space-2); border: var(--pt-border-card); border-radius: var(--pt-radius-md); background: var(--pt-surface); color: var(--pt-ink-900); font: 600 var(--pt-text-caption) var(--pt-font-body); }
.photos-review__skip[b-ojuofmtovg] { min-height: 36px; padding: 0 var(--pt-space-2); border: 0; border-radius: var(--pt-radius-sm); background: transparent; color: var(--pt-text-meta); font: 700 var(--pt-text-caption) var(--pt-font-body); text-decoration: underline; cursor: pointer; }
.photos-review__skip:hover[b-ojuofmtovg] { background: var(--pt-row-hover); }
.photos-review__skip:focus-visible[b-ojuofmtovg], .photos-review__select:focus-visible[b-ojuofmtovg] { outline: var(--pt-focus-outline); outline-offset: 2px; }
.photos-review__footer[b-ojuofmtovg] { flex-wrap: wrap; align-items: center; }
.photos-review__summary[b-ojuofmtovg] { margin-right: auto; color: var(--pt-text-meta); font-size: var(--pt-text-caption); font-weight: 700; }

.photos-viewer[b-ojuofmtovg] { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: var(--pt-space-4); background: oklch(0% 0 0 / .5); animation: photos-fade-b-ojuofmtovg var(--pt-dur-base) var(--pt-ease-enter) both; }
.photos-viewer__panel[b-ojuofmtovg] { display: flex; flex-direction: column; width: min(720px, 100%); max-height: calc(100dvh - 2 * var(--pt-space-4)); overflow: hidden; border-radius: var(--pt-radius-lg); background: var(--pt-surface); box-shadow: var(--pt-shadow-card); }
.photos-viewer__header[b-ojuofmtovg] { display: flex; align-items: center; justify-content: space-between; gap: var(--pt-space-3); padding: 12px 12px 12px 20px; }
.photos-viewer__header h3[b-ojuofmtovg] { margin: 0; min-width: 0; color: var(--pt-ink-900); font-family: var(--pt-font-display); font-size: var(--pt-text-subtitle); font-weight: 700; overflow-wrap: anywhere; }
.photos-viewer__img[b-ojuofmtovg] { display: block; width: 100%; min-height: 0; aspect-ratio: 4 / 3; object-fit: contain; background: var(--pt-tray-bg); }
.photos-viewer__footer[b-ojuofmtovg] { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--pt-space-2); padding: 12px 16px; }

/* Spinner and meter, shared by cards, review rows and the tray. The meter grows by scaleX, so a
   progress tick never relayouts the card. */
.photos-spinner[b-ojuofmtovg] { display: inline-block; flex: none; width: 18px; height: 18px; box-sizing: border-box; border: 2px solid oklch(from var(--pt-forest-700) l c h / .2); border-top-color: var(--pt-forest-700); border-radius: 50%; animation: photos-spin-b-ojuofmtovg .7s linear infinite; }
.photos-meter[b-ojuofmtovg] { display: block; width: 100%; height: 6px; overflow: hidden; border-radius: var(--pt-radius-pill); background: var(--pt-cream-200); }
.photos-meter__fill[b-ojuofmtovg] { display: block; width: 100%; height: 100%; background: var(--pt-forest-700); transform-origin: left center; transition: transform var(--pt-dur-base) var(--pt-ease-soft); }

/* Upload tray: floats over the page so its arrival, progress and departure never move the grid. */
.photos-tray[b-ojuofmtovg] { position: fixed; z-index: 250; right: max(var(--pt-space-6), env(safe-area-inset-right, 0px)); bottom: max(var(--pt-space-6), env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: var(--pt-space-3); width: min(380px, calc(100vw - 2 * var(--pt-space-4))); box-sizing: border-box; padding: 12px 12px 12px 14px; border: var(--pt-border-card); border-radius: var(--pt-radius-lg); background: var(--pt-surface); box-shadow: var(--pt-shadow-card); animation: photos-rise-b-ojuofmtovg var(--pt-dur-return) var(--pt-ease-glide) both; }
.photos-tray__icon[b-ojuofmtovg] { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--pt-cream-100); color: var(--pt-forest-700); font-size: 17px; }
.photos-tray--done .photos-tray__icon[b-ojuofmtovg] { background: var(--pt-available-tint); color: var(--pt-on-success); }
.photos-tray--error[b-ojuofmtovg] { border-color: oklch(from var(--pt-danger) l c h / .35); }
.photos-tray--error .photos-tray__icon[b-ojuofmtovg] { background: var(--pt-danger-summary); color: var(--pt-danger); }
.photos-tray--notice[b-ojuofmtovg] { animation: photos-nudge-b-ojuofmtovg var(--pt-dur-return) var(--pt-ease-soft) both; }
.photos-tray__text[b-ojuofmtovg] { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; color: var(--pt-text-meta); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.photos-tray__text strong[b-ojuofmtovg] { color: var(--pt-ink-900); font-size: 13.5px; overflow-wrap: anywhere; }
.photos-meter--tray[b-ojuofmtovg] { margin-top: 4px; }
.photos-tray__retry[b-ojuofmtovg] { display: inline-flex; flex: none; align-items: center; gap: 4px; min-height: 34px; padding: 0 12px; border: 1px solid var(--pt-forest-700); border-radius: var(--pt-radius-md); background: var(--pt-forest-700); color: var(--pt-cream-50); font: 700 12.5px var(--pt-font-body); cursor: pointer; }
.photos-tray__retry:hover[b-ojuofmtovg] { background: var(--pt-forest-600); border-color: var(--pt-forest-600); }
.photos-tray__close[b-ojuofmtovg] { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border: 0; border-radius: var(--pt-radius-sm); background: transparent; color: var(--pt-text-meta); font-size: 18px; cursor: pointer; }
.photos-tray__close:hover[b-ojuofmtovg] { background: var(--pt-row-hover); color: var(--pt-ink-900); }
.photos-tray__retry:focus-visible[b-ojuofmtovg], .photos-tray__close:focus-visible[b-ojuofmtovg] { outline: var(--pt-focus-outline); outline-offset: 2px; }

@keyframes photos-spin-b-ojuofmtovg { to { transform: rotate(360deg); } }
@keyframes photos-fade-b-ojuofmtovg { from { opacity: 0; } }
@keyframes photos-reveal-b-ojuofmtovg { from { opacity: 0; transform: scale(1.04); } }
@keyframes photos-pop-b-ojuofmtovg { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.08); } }
@keyframes photos-rise-b-ojuofmtovg { from { opacity: 0; transform: translateY(14px); } }
@keyframes photos-nudge-b-ojuofmtovg { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 60% { transform: translateX(5px); } }

@media (max-width: 600px) {
    /* Side by side, so the first photos are still on the first screen of a phone. */
    .photos-header__actions[b-ojuofmtovg] { display: grid; grid-template-columns: auto minmax(0, 1fr); width: 100%; }
    .photos-review__footer .photos-btn[b-ojuofmtovg] { flex: 1; }
    .photos-review__summary[b-ojuofmtovg] { flex-basis: 100%; }
    .photos-nav__row[b-ojuofmtovg] { flex-direction: column-reverse; align-items: stretch; border-bottom: 0; }
    .photos-roots[b-ojuofmtovg] { border-bottom: 1px solid var(--pt-cream-300); }
    .photos-toggle[b-ojuofmtovg] { align-self: start; }
    .photos-grid[b-ojuofmtovg], .photos-skeleton[b-ojuofmtovg] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pt-space-3); }
    .photos-review__row[b-ojuofmtovg] { grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--pt-space-2); }
    .photos-review__row img[b-ojuofmtovg], .photos-review__thumb[b-ojuofmtovg] { width: 48px; height: 36px; }
    .photos-tray[b-ojuofmtovg] { right: max(var(--pt-space-4), env(safe-area-inset-right, 0px)); left: max(var(--pt-space-4), env(safe-area-inset-left, 0px)); bottom: max(var(--pt-space-4), env(safe-area-inset-bottom, 0px)); width: auto; }
}
@media (hover: none) and (pointer: coarse) {
    .photos-roots__tab[b-ojuofmtovg], .photos-chip[b-ojuofmtovg], .photos-toggle[b-ojuofmtovg], .photos-review__skip[b-ojuofmtovg], .photos-review__select[b-ojuofmtovg], .photos-card__retry[b-ojuofmtovg], .photos-tray__retry[b-ojuofmtovg] { min-height: var(--pt-action-min-height-touch); }
    .photos-tray__close[b-ojuofmtovg] { width: var(--pt-action-min-height-touch); height: var(--pt-action-min-height-touch); }
    /* No hover on touch: Cambiar and Quitar stay on the photo as two round icons at full touch size,
       and a tap on the photo itself still shows it bigger. */
    .photos-card--has-photo .photos-card__tools[b-ojuofmtovg] { visibility: visible; opacity: 1; top: 6px; bottom: auto; right: 6px; gap: 6px; padding: 0; border: 0; background: transparent; box-shadow: none; }
    .photos-card__tool[b-ojuofmtovg] { width: var(--pt-action-min-height-touch); height: var(--pt-action-min-height-touch); padding: 0; border: var(--pt-border-card); border-radius: var(--pt-radius-pill); background: var(--pt-surface); }
    .photos-card__tool-text[b-ojuofmtovg] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .photos-card__confirm-remove[b-ojuofmtovg], .photos-card__confirm-cancel[b-ojuofmtovg] { min-height: var(--pt-action-min-height-touch); }
}
@media (prefers-reduced-motion: reduce) {
    .photos-btn[b-ojuofmtovg], .photos-card__tools[b-ojuofmtovg], .photos-card__tool[b-ojuofmtovg], .photos-card__empty[b-ojuofmtovg], .photos-card__retry[b-ojuofmtovg], .photos-roots__tab[b-ojuofmtovg], .photos-progress__fill[b-ojuofmtovg], .photos-meter__fill[b-ojuofmtovg] { transition: none; }
    .photos-skeleton__card[b-ojuofmtovg], .photos-card__img--new[b-ojuofmtovg], .photos-card__busy[b-ojuofmtovg], .photos-card__badge[b-ojuofmtovg], .photos-card__failed[b-ojuofmtovg], .photos-card__confirm[b-ojuofmtovg], .photos-viewer[b-ojuofmtovg], .photos-review__row[b-ojuofmtovg], .photos-tray[b-ojuofmtovg], .photos-tray--notice[b-ojuofmtovg] { animation: none; }
}
/* /Components/Pages/Onboarding.razor.rz.scp.css */
/* Capy "Primeros pasos". This is the wizard FRAME only — background, header, two-column body,
   per-step copy, the aside and the footer. Steps 1-2 field markup is Task 3, steps 3-4 is Task 4;
   both land inside .onboarding__fields, which this file positions but does not style further.

   The "Marca dress" — 2px/3px hard borders, 4px/8px offset shadows with no blur, the Silkscreen
   labels, the mechanical key-press on the primary button — is deliberately confined to this one
   scoped file. Blazor's CSS isolation means none of it can leak onto another screen; every other
   Capy dashboard screen keeps the diffuse --pt-shadow-* dress instead. Every colour below maps to
   a token in capy-tokens.css by exact hex match. The handful that don't (called out inline) get a
   local custom property here rather than a raw value at the call site. */

.onboarding[b-pl4z4sxipk] {
  /* Local tokens: no exact match in capy-tokens.css for these handoff values (two are AA-darkened
     stand-ins for a token/handoff value that fails contrast here — see below). */
  --onboarding-scene-image: url('/img/onboarding-salon.png');
  /* #6E8570 (the handoff's literal value) measures ~3.8:1 on cream-50 and ~3.55:1 on cream-100 —
     below the 4.5:1 AA floor for the text this drives (wordmark tagline, step counter, aside
     title). Darkened locally to clear AA on both backgrounds; capy-tokens.css is untouched so no
     other migrated screen is affected. See task-2-report.md fix-round-1 for the measured ratios. */
  --onboarding-meta: #556B56;
  --onboarding-icon-pending: #C4CDBE; /* aside icon colour before a step is reached */
  /* --pt-unavailable-text (#8B9A8C) measures ~2.84:1 / ~2.63:1 here — also below AA. Same
     treatment: a local, darker stand-in used only for the aside's muted label/value text. */
  --onboarding-aside-muted: #5F6B60;
  /* The handoff's unchosen-chip/input border. --pt-cream-300 (#E2D6BC) is a visibly different
     hue — not a substitute — so this gets its own local token per this file's own precedent
     rather than a nearby-but-wrong existing one (fix round 1, finding #2). */
  --onboarding-input-border: #C9BFA6;
  /* The handoff's "Así quedan tus mesas" preview panel background — no exact capy-tokens.css
     match either (fix round 1, finding #2). */
  --onboarding-preview-bg: #F3EEDF;
  /* The handoff's resumen row border on step 4 — no exact capy-tokens.css match, same treatment
     as the two tokens above. */
  --onboarding-resumen-border: #D6E4CE;

  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--pt-cream-100);
  font-family: var(--pt-font-body);
  color: var(--pt-ink-900);
}

/* ── Background scene ───────────────────────────────────────── */
.onboarding__scene[b-pl4z4sxipk] {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--onboarding-scene-image);
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}

/* WebP (about 13% of the PNG's size) where image-set() with type() is understood; the PNG above
   stays the fallback for every other browser. */
@supports (background-image: image-set(url('/a.webp') type('image/webp'))) {
  .onboarding__scene[b-pl4z4sxipk] {
    background-image: image-set(
      url('/img/onboarding-salon.webp') type('image/webp'),
      url('/img/onboarding-salon.png') type('image/png'));
  }
}

/* Handoff's own scene breakpoint (940px) — distinct from the 1000px/700px layout breakpoints the
   brief specifies. Below it the figure in the scene sits further right. */
@media (max-width: 940px) {
  .onboarding__scene[b-pl4z4sxipk] {
    background-position: 62% bottom;
  }
}

/* ── Header ─────────────────────────────────────────────────── */
.onboarding__header[b-pl4z4sxipk] {
  position: relative;
  z-index: 2;
  border-bottom: 2px solid oklch(from var(--pt-ink-900) l c h / .10);
  /* Near-opaque, same fill as .onboarding__aside-card, because the scene has no veil: the wordmark
     tagline and step counter are 7.5-9px Silkscreen and cannot hold AA over the lamps and window
     behind them. */
  background: oklch(from var(--pt-cream-50) l c h / .94);
}

.onboarding__header-row[b-pl4z4sxipk] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pt-space-4);
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 28px;
}

/* app.css sets a colour on <a> but no text-decoration, so anchors fall back to the browser's
   default underline. The handoff draws every link on this screen unadorned, so each one turns it
   off explicitly rather than relying on a global reset that does not exist. */
.onboarding__brand[b-pl4z4sxipk] {
  display: block;
  text-decoration: none;
}

.onboarding__brand:focus-visible[b-pl4z4sxipk] {
  outline: none;
  box-shadow: var(--pt-focus-ring);
}

.onboarding__brand-name[b-pl4z4sxipk] {
  display: block;
  font-family: var(--pt-font-display);
  font-weight: 800;
  font-size: 21px;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--pt-forest-700);
}

.onboarding__brand-tag[b-pl4z4sxipk] {
  display: block;
  margin-top: 3px;
  font-family: var(--pt-font-mono);
  font-size: 7.5px;
  letter-spacing: .16em;
  color: var(--onboarding-meta);
}

.onboarding__progress[b-pl4z4sxipk] {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: auto;
}

.onboarding__step-counter[b-pl4z4sxipk] {
  font-family: var(--pt-font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--onboarding-meta);
}

.onboarding__pips[b-pl4z4sxipk] {
  display: flex;
  gap: 5px;
}

.onboarding__pip[b-pl4z4sxipk] {
  width: 22px;
  height: 6px;
  border-radius: 3px;
  background: oklch(from var(--pt-ink-900) l c h / .16);
}

.onboarding__pip--filled[b-pl4z4sxipk] {
  background: var(--pt-forest-600);
}

.onboarding__skip-header[b-pl4z4sxipk] {
  font-size: 13px;
  font-weight: 700;
  color: var(--pt-text-secondary);
  text-decoration: none;
}

.onboarding__skip-header:hover[b-pl4z4sxipk] {
  color: var(--pt-gold-500);
}

.onboarding__skip-header:focus-visible[b-pl4z4sxipk] {
  outline: none;
  box-shadow: var(--pt-focus-ring);
}

/* ── Body ───────────────────────────────────────────────────── */
.onboarding__main[b-pl4z4sxipk] {
  position: relative;
  z-index: 2;
  flex: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 26px 28px 60px;
  box-sizing: border-box;
  /* app.css:164 gives every <main> in the dashboard `background: var(--bg)` — a near-white fill
     that is right for a shell screen and wrong here: it paints an opaque column straight over the
     salón scene, which is the whole point of this screen. Overridden locally rather than in
     app.css, where it would restyle every other page. */
  background: transparent;
}

.onboarding__grid[b-pl4z4sxipk] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 26px;
  align-items: center;
}

@media (max-width: 1000px) {
  .onboarding__grid[b-pl4z4sxipk] {
    grid-template-columns: 1fr;
  }

  /* The aside moves above the card — it is the wizard's navigation, so it stays reachable
     before scrolling past the whole form on a phone. */
  .onboarding__aside[b-pl4z4sxipk] {
    order: -1;
  }

  /* ...and collapses to just the pip row: the full checklist stacked above the card eats too
     much of a phone screen, and the header already carries the same progress. */
  .onboarding__aside-card[b-pl4z4sxipk],
  .onboarding__aside-note[b-pl4z4sxipk] {
    display: none;
  }

  .onboarding__aside-mobile-pips[b-pl4z4sxipk] {
    display: flex;
  }
}

.onboarding__col-main[b-pl4z4sxipk] {
  min-width: 0;
}

/* ── Eyebrow / title / blurb ────────────────────────────────── */
/* Heads the opaque card rather than sitting above it: without a veil the blurb would lie straight
   on the chalkboard and shelves, where no text colour clears AA. The rule mirrors the footer's. */
.onboarding__card-head[b-pl4z4sxipk] {
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 2px solid oklch(from var(--pt-ink-900) l c h / .10);
}

.onboarding__eyebrow[b-pl4z4sxipk] {
  display: inline-block;
  padding: 7px 13px;
  border: 2px solid var(--pt-forest-600);
  border-radius: var(--pt-radius-pill);
  background: oklch(from var(--pt-cream-50) l c h / .7);
  font-family: var(--pt-font-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  color: var(--pt-forest-600);
}

.onboarding__title[b-pl4z4sxipk] {
  margin: 14px 0 8px;
  font-family: var(--pt-font-display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.06;
  letter-spacing: -.035em;
  color: var(--pt-ink-900);
}

.onboarding__blurb[b-pl4z4sxipk] {
  max-width: 46ch;
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--pt-text-strong);
}

@media (max-width: 700px) {
  .onboarding__title[b-pl4z4sxipk] {
    font-size: 26px;
  }
}

/* ── Card ───────────────────────────────────────────────────── */
.onboarding__card[b-pl4z4sxipk] {
  padding: 26px 24px;
  border: 3px solid var(--pt-ink-900);
  border-radius: var(--pt-radius-lg);
  /* Opaque, as the handoff draws it. The scene shows around the card, not through it — see
     .onboarding__main, which drops the global <main> fill so the salón is visible everywhere the
     card is not. Keeping this solid is also what lets the field labels hold AA contrast: the
     scene runs from near-white wall to mid-tone chalkboard, and no single text colour clears
     4.5:1 across that range. */
  background: var(--pt-cream-50);
  /* Hard, unblurred offset shadow — the Marca "key" dress, not the diffuse --pt-shadow-card
     the rest of the dashboard uses. Outer box-shadow is clipped to outside the border box, so an
     unfilled card shows the scene rather than this ink block. */
  box-shadow: 8px 8px 0 var(--pt-ink-900);
}

@media (max-width: 700px) {
  .onboarding__card[b-pl4z4sxipk] {
    padding: 22px 18px;
  }
}

/* Task 3/4 land each step's fields here. Left empty and unstyled by this task on purpose. */
.onboarding__fields[b-pl4z4sxipk] {
  min-height: 1px;
}

/* ── Step 1: name / city / WhatsApp / venue type ───────────────
   The three text inputs use the shared .field anatomy from capy-forms.css (this file adds
   nothing to that file, per the brief) — only the 1fr/1fr grid and the venue-type chips, which
   are Marca dress, belong here. */
.onboarding__grid-2col[b-pl4z4sxipk] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pt-space-4);
}

@media (max-width: 700px) {
  .onboarding__grid-2col[b-pl4z4sxipk] {
    grid-template-columns: 1fr;
  }
}

.onboarding__field-full[b-pl4z4sxipk] {
  grid-column: 1 / -1;
}

.onboarding__chips[b-pl4z4sxipk] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pt-space-2);
}

.onboarding__chip[b-pl4z4sxipk] {
  min-height: 40px;
  padding: 9px 14px;
  border: 2px solid var(--onboarding-input-border);
  border-radius: var(--pt-radius-md);
  background: var(--pt-cream-50);
  color: var(--pt-text-strong);
  font-family: var(--pt-font-body);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  transition: background var(--pt-dur-color) var(--pt-ease-soft),
              box-shadow var(--pt-dur-hover) var(--pt-ease-soft);
}

/* Chosen = gold with the hard ink border and offset shadow (the Marca "key" dress); unchosen =
   plain cream with a sand border and no shadow. Text stays ink-900 on the gold fill, matching the
   established local ruling for the step 4 primary button rather than --pt-on-gold. */
.onboarding__chip--selected[b-pl4z4sxipk] {
  background: var(--pt-gold-400);
  color: var(--pt-ink-900);
  border-color: var(--pt-ink-900);
  box-shadow: 3px 3px 0 var(--pt-ink-900);
}

.onboarding__chip:focus-visible[b-pl4z4sxipk] {
  outline: none;
  box-shadow: var(--pt-focus-ring);
}

.onboarding__chip--selected:focus-visible[b-pl4z4sxipk] {
  box-shadow: 3px 3px 0 var(--pt-ink-900), var(--pt-focus-ring);
}

/* ── Step 2: table count stepper, naming scheme, live preview ── */
.onboarding__step2-row[b-pl4z4sxipk] {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--pt-space-4);
}

.onboarding__stepper-field[b-pl4z4sxipk] {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.onboarding__stepper[b-pl4z4sxipk] {
  display: flex;
  align-items: center;
  gap: 10px;
}

.onboarding__stepper-btn[b-pl4z4sxipk] {
  width: 44px;
  height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--pt-ink-900);
  border-radius: var(--pt-radius-md);
  background: var(--pt-cream-50);
  color: var(--pt-ink-900);
  font-size: 16px;
  cursor: pointer;
}

.onboarding__stepper-btn:focus-visible[b-pl4z4sxipk] {
  outline: none;
  box-shadow: var(--pt-focus-ring);
}

.onboarding__stepper-value[b-pl4z4sxipk] {
  min-width: 62px;
  font-family: var(--pt-font-display);
  font-weight: 800;
  font-size: 34px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.onboarding__naming-field[b-pl4z4sxipk] {
  flex: 1;
  min-width: 190px;
}

.onboarding__preview[b-pl4z4sxipk] {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 11px;
  background: var(--onboarding-preview-bg);
  border: 2px solid oklch(from var(--pt-ink-900) l c h / .10);
}

.onboarding__preview-title[b-pl4z4sxipk] {
  display: block;
  margin-bottom: 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--onboarding-meta);
}

.onboarding__preview-chips[b-pl4z4sxipk] {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.onboarding__preview-chip[b-pl4z4sxipk] {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pt-forest-600);
  background: var(--pt-cream-50);
  border: 2px solid var(--pt-cream-300);
  border-radius: 7px;
  padding: 6px 10px;
}

.onboarding__preview-chip--more[b-pl4z4sxipk] {
  color: var(--onboarding-aside-muted);
  background: transparent;
  border: 2px dashed oklch(from var(--pt-ink-900) l c h / .18);
}

.onboarding__preview-note[b-pl4z4sxipk] {
  margin: 11px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--pt-text-secondary);
}

/* ── Step 3: import-first, then the manual dish fields ─────────
   The import button is deliberately the largest thing on this step (brief's own ordering rule).
   Its colours reuse --pt-warning / --pt-on-warning / --pt-gold-400 — the same trio
   MenuCategories.razor.css already uses for its own "Importar con IA" trigger — rather than a
   near-duplicate local token; every one of the handoff's literal hexes here (#E0B75A, #C99A3C,
   #C98A2E, #8A5C16) matches one of those three exactly. */
.onboarding__import-cta[b-pl4z4sxipk] {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 15px;
  border: 2px dashed oklch(from var(--pt-warning) l c h / .5);
  border-radius: var(--pt-radius-lg);
  background: oklch(from var(--pt-gold-400) l c h / .12);
  font-family: var(--pt-font-body);
  text-align: left;
  cursor: pointer;
  transition: background var(--pt-dur-color) var(--pt-ease-soft);
}

/* Once an AI import has actually completed — solid border, heavier tint, same --pt-gold-500 the
   handoff's own "imported" state uses (#C99A3C, exact match). */
.onboarding__import-cta--done[b-pl4z4sxipk] {
  border: 2px solid var(--pt-gold-500);
  background: oklch(from var(--pt-gold-400) l c h / .26);
}

.onboarding__import-cta:focus-visible[b-pl4z4sxipk] {
  outline: none;
  box-shadow: var(--pt-focus-ring);
}

.onboarding__import-icon[b-pl4z4sxipk] {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pt-radius-md);
  background: oklch(from var(--pt-gold-400) l c h / .24);
  color: var(--pt-on-warning);
  font-size: 17px;
}

.onboarding__import-copy[b-pl4z4sxipk] {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.onboarding__import-title[b-pl4z4sxipk] {
  display: block;
  font-weight: 800;
  font-size: 14.5px;
  color: var(--pt-ink-900);
}

.onboarding__import-note[b-pl4z4sxipk] {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--pt-text-secondary);
}

.onboarding__import-chevron[b-pl4z4sxipk] {
  flex: none;
  font-size: 15px;
  color: var(--pt-on-warning);
}

.onboarding__divider[b-pl4z4sxipk] {
  display: flex;
  align-items: center;
  gap: var(--pt-space-3);
  margin: 18px 0;
}

.onboarding__divider-rule[b-pl4z4sxipk] {
  flex: 1;
  height: 2px;
  background: oklch(from var(--pt-ink-900) l c h / .10);
}

.onboarding__divider-label[b-pl4z4sxipk] {
  font-size: 12px;
  font-weight: 800;
  color: var(--pt-unavailable-text);
}

.onboarding__dish-grid[b-pl4z4sxipk] {
  display: grid;
  grid-template-columns: 1fr 140px;
  gap: var(--pt-space-4);
}

@media (max-width: 700px) {
  .onboarding__dish-grid[b-pl4z4sxipk] {
    grid-template-columns: 1fr;
  }
}

.onboarding__optional[b-pl4z4sxipk] {
  font-weight: 600;
  color: var(--pt-unavailable-text);
}

/* ── Step 4: the payoff — hero mark, print actions, resumen ────
   No local token needed here beyond --onboarding-resumen-border: every other literal hex in the
   handoff's s4 block (#F0F5EC, #3E7A4B, #4A5A4E, #E0B75A, #16211A, #FDFAF2, #C4CDBE) already
   matches an existing capy-tokens.css value exactly. */
@keyframes onboarding-qr-pop-b-pl4z4sxipk {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: none; }
}

.onboarding__qr-hero[b-pl4z4sxipk] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.onboarding__qr-mark[b-pl4z4sxipk] {
  flex: none;
  width: 132px;
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--pt-ink-900);
  border-radius: var(--pt-radius-lg);
  background: var(--pt-cream-50);
  box-shadow: 5px 5px 0 var(--pt-ink-900);
  font-size: 74px;
  color: var(--pt-ink-900);
  animation: onboarding-qr-pop-b-pl4z4sxipk var(--pt-dur-base) var(--pt-ease-glide) both;
}

.onboarding__qr-copy[b-pl4z4sxipk] {
  flex: 1;
  min-width: 200px;
}

.onboarding__qr-title[b-pl4z4sxipk] {
  display: block;
  font-family: var(--pt-font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.02em;
  color: var(--pt-ink-900);
}

.onboarding__qr-note[b-pl4z4sxipk] {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--pt-text-strong);
}

.onboarding__qr-actions[b-pl4z4sxipk] {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
}

.onboarding__qr-action[b-pl4z4sxipk] {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  box-sizing: border-box;
  padding: 10px 15px;
  border: 2px solid var(--pt-ink-900);
  border-radius: var(--pt-radius-md);
  font-family: var(--pt-font-body);
  font-weight: 800;
  font-size: 13.5px;
  color: var(--pt-ink-900);
  background: var(--pt-cream-50);
  /* Same default-underline fallback as .onboarding__brand — and this one is drawn as a button,
     where an underline reads as a mistake rather than a link. */
  text-decoration: none;
  transition: transform var(--pt-dur-return) var(--pt-ease-glide),
              box-shadow var(--pt-dur-hover) var(--pt-ease-soft);
}

/* "Imprimir carteles" — the Marca "key" dress, matching the footer's own primary button. */
.onboarding__qr-action--primary[b-pl4z4sxipk] {
  background: var(--pt-gold-400);
  box-shadow: 3px 3px 0 var(--pt-ink-900);
}

.onboarding__qr-action--primary:hover[b-pl4z4sxipk] {
  transform: translate(1.5px, 1.5px);
  box-shadow: 2px 2px 0 var(--pt-ink-900);
}

.onboarding__qr-action--primary:active[b-pl4z4sxipk] {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--pt-ink-900);
  transition: transform var(--pt-dur-press) var(--pt-ease-press),
              box-shadow var(--pt-dur-press) var(--pt-ease-press);
}

.onboarding__qr-action:focus-visible[b-pl4z4sxipk] {
  outline: none;
  box-shadow: var(--pt-focus-ring);
}

.onboarding__qr-action--primary:focus-visible[b-pl4z4sxipk] {
  box-shadow: 3px 3px 0 var(--pt-ink-900), var(--pt-focus-ring);
}

.onboarding__resumen[b-pl4z4sxipk] {
  display: grid;
  gap: 9px;
  margin-top: 20px;
}

.onboarding__resumen-row[b-pl4z4sxipk] {
  display: flex;
  align-items: center;
  gap: 11px;
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  border-radius: 11px;
  background: var(--pt-available-tint);
  border: 2px solid var(--onboarding-resumen-border);
  font-family: var(--pt-font-body);
  text-decoration: none;
  color: inherit;
}

/* A skipped step: no check, a muted marker, and a real link to where it still gets finished —
   never a false checkmark (brief's "do not congratulate" rule). */
.onboarding__resumen-row--link[b-pl4z4sxipk] {
  background: var(--pt-cream-50);
  border-color: var(--pt-cream-300);
  cursor: pointer;
  transition: border-color var(--pt-dur-hover) var(--pt-ease-soft);
}

.onboarding__resumen-row--link:hover[b-pl4z4sxipk] {
  border-color: var(--pt-ink-900);
}

.onboarding__resumen-row:focus-visible[b-pl4z4sxipk] {
  outline: none;
  box-shadow: var(--pt-focus-ring);
}

.onboarding__resumen-icon[b-pl4z4sxipk] {
  flex: none;
  font-size: 15px;
}

.onboarding__resumen-icon--done[b-pl4z4sxipk] {
  color: var(--pt-success);
}

.onboarding__resumen-icon--pending[b-pl4z4sxipk] {
  color: var(--onboarding-icon-pending);
}

.onboarding__resumen-label[b-pl4z4sxipk] {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--pt-ink-900);
}

.onboarding__resumen-value[b-pl4z4sxipk] {
  font-size: 13px;
  color: var(--pt-text-secondary);
  text-align: right;
}

.onboarding__resumen-shortfall[b-pl4z4sxipk] {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--pt-text-strong);
}

/* ── Inline write-failure line ──────────────────────────────── */
@keyframes onboarding-rise-b-pl4z4sxipk {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* Same dress as QrCodes' .qr-alert (the established action-failure banner) rather than a new
   near-duplicate — this is the same kind of inline, dismissible-by-retry failure notice. */
.onboarding__error[b-pl4z4sxipk] {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 11px 14px;
  border: 1px solid oklch(from var(--pt-danger) l c h / .3);
  border-radius: var(--pt-radius-md);
  background: var(--pt-danger-summary);
  color: var(--pt-danger);
  font-size: 13px;
  font-weight: 700;
  animation: onboarding-rise-b-pl4z4sxipk var(--pt-dur-base) var(--pt-ease-soft) both;
}

/* ── Footer ─────────────────────────────────────────────────── */
.onboarding__footer[b-pl4z4sxipk] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pt-space-3);
  margin-top: 22px;
  padding-top: 20px;
  border-top: 2px solid oklch(from var(--pt-ink-900) l c h / .10);
}

.onboarding__footer-back[b-pl4z4sxipk] {
  min-height: 46px;
  padding: 12px 18px;
  border: 2px solid var(--pt-ink-900);
  border-radius: var(--pt-radius-md);
  background: var(--pt-cream-50);
  color: var(--pt-ink-900);
  font-family: var(--pt-font-body);
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
}

.onboarding__footer-skip[b-pl4z4sxipk] {
  margin-left: auto;
  min-height: 44px;
  padding: 11px 6px;
  border: 0;
  background: transparent;
  color: var(--pt-text-secondary);
  font-family: var(--pt-font-body);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
}

.onboarding__footer-skip:hover[b-pl4z4sxipk] {
  color: var(--pt-ink-900);
}

/* Next/primary sits after Back when both render, and after Skip when it renders too — CSS
   alone (no JS reorder) makes it float right whichever of those two precede it. */
.onboarding__footer-next[b-pl4z4sxipk] {
  min-height: 46px;
  margin-left: auto;
  padding: 12px 22px;
  border: 2px solid var(--pt-ink-900);
  border-radius: var(--pt-radius-md);
  font-family: var(--pt-font-display);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--pt-ink-900);
  transition: transform var(--pt-dur-return) var(--pt-ease-glide),
              box-shadow var(--pt-dur-hover) var(--pt-ease-soft),
              background var(--pt-dur-color) var(--pt-ease-soft),
              color var(--pt-dur-color) var(--pt-ease-soft);
}

.onboarding__footer-skip ~ .onboarding__footer-next[b-pl4z4sxipk] {
  margin-left: 0;
}

.onboarding__footer-next--default[b-pl4z4sxipk] {
  background: var(--pt-forest-700);
  color: var(--pt-cream-50);
}

.onboarding__footer-next--final[b-pl4z4sxipk] {
  background: var(--pt-gold-400);
  /* The design's btn() helper always pairs the gold fill with ink-900 text, not --pt-on-gold
     (that token is for a lighter/smaller gold tint elsewhere — #3A2A08 appears nowhere in the
     handoff for this button). */
  color: var(--pt-ink-900);
}

.onboarding__footer-next:hover[b-pl4z4sxipk] {
  transform: translate(1.5px, 1.5px);
  box-shadow: 3px 3px 0 var(--pt-ink-900);
}

.onboarding__footer-next:active[b-pl4z4sxipk] {
  transform: translate(4px, 4px);
  box-shadow: 1px 1px 0 var(--pt-ink-900);
  transition: transform var(--pt-dur-press) var(--pt-ease-press),
              box-shadow var(--pt-dur-press) var(--pt-ease-press);
}

.onboarding__footer-back:focus-visible[b-pl4z4sxipk],
.onboarding__footer-skip:focus-visible[b-pl4z4sxipk],
.onboarding__footer-next:focus-visible[b-pl4z4sxipk] {
  outline: none;
  box-shadow: var(--pt-focus-ring);
}

@media (max-width: 700px) {
  .onboarding__footer[b-pl4z4sxipk] {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .onboarding__footer-skip[b-pl4z4sxipk],
  .onboarding__footer-next[b-pl4z4sxipk] {
    margin-left: 0;
  }
}

/* ── DATO tip ───────────────────────────────────────────────── */
.onboarding__tip[b-pl4z4sxipk] {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-top: 18px;
  padding: 13px 16px;
  border: 2px solid var(--pt-forest-600);
  border-radius: var(--pt-radius-lg);
  background: oklch(from var(--pt-available-tint) l c h / .94);
}

.onboarding__tip p[b-pl4z4sxipk] {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--pt-text-strong);
}

.onboarding__tip-label[b-pl4z4sxipk] {
  margin-right: 8px;
  font-family: var(--pt-font-mono);
  font-size: 8.5px;
  letter-spacing: .12em;
  color: var(--pt-forest-600);
}

/* ── Aside: "TU ALTA" ───────────────────────────────────────── */
.onboarding__aside[b-pl4z4sxipk] {
  display: flex;
  flex-direction: column;
  gap: var(--pt-space-4);
  min-width: 0;
}

.onboarding__aside-mobile-pips[b-pl4z4sxipk] {
  display: none;
  justify-content: center;
  gap: 5px;
}

.onboarding__aside-card[b-pl4z4sxipk] {
  padding: 16px 17px;
  border: 2px solid oklch(from var(--pt-ink-900) l c h / .12);
  border-radius: 13px;
  background: oklch(from var(--pt-cream-50) l c h / .94);
}

.onboarding__aside-title[b-pl4z4sxipk] {
  display: block;
  margin-bottom: 12px;
  font-family: var(--pt-font-mono);
  font-size: 8.5px;
  letter-spacing: .14em;
  color: var(--onboarding-meta);
}

.onboarding__aside-list[b-pl4z4sxipk] {
  display: grid;
  gap: 3px;
}

.onboarding__aside-row[b-pl4z4sxipk] {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
  box-sizing: border-box;
  padding: 10px 11px;
  border: 0;
  border-radius: var(--pt-radius-md);
  background: transparent;
  font-family: var(--pt-font-body);
  text-align: left;
  cursor: default;
}

.onboarding__aside-row:not(:disabled)[b-pl4z4sxipk] {
  cursor: pointer;
}

.onboarding__aside-row--current[b-pl4z4sxipk] {
  background: var(--pt-available-tint);
}

.onboarding__aside-row:focus-visible[b-pl4z4sxipk] {
  outline: none;
  box-shadow: var(--pt-focus-ring);
}

.onboarding__aside-icon[b-pl4z4sxipk] {
  flex: none;
  font-size: 15px;
}

.onboarding__aside-icon--done[b-pl4z4sxipk] {
  color: var(--pt-success);
}

.onboarding__aside-icon--current[b-pl4z4sxipk] {
  color: var(--pt-gold-500);
}

.onboarding__aside-icon--pending[b-pl4z4sxipk] {
  color: var(--onboarding-icon-pending);
}

.onboarding__aside-copy[b-pl4z4sxipk] {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.onboarding__aside-label[b-pl4z4sxipk] {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
}

.onboarding__aside-label--reached[b-pl4z4sxipk] {
  color: var(--pt-ink-900);
}

.onboarding__aside-label--pending[b-pl4z4sxipk] {
  color: var(--onboarding-aside-muted);
}

.onboarding__aside-value[b-pl4z4sxipk] {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--onboarding-aside-muted);
}

.onboarding__aside-note[b-pl4z4sxipk] {
  margin: 0;
  padding: 10px 13px;
  border: 2px solid oklch(from var(--pt-ink-900) l c h / .12);
  border-radius: 11px;
  background: oklch(from var(--pt-cream-50) l c h / .94);
  font-size: 12px;
  line-height: 1.5;
  color: var(--pt-text-strong);
}

@media (prefers-reduced-motion: reduce) {
  .onboarding__error[b-pl4z4sxipk] {
    animation: none;
  }

  .onboarding__qr-mark[b-pl4z4sxipk] {
    animation: none;
  }
}
/* /Components/Pages/Orders.razor.rz.scp.css */
/* Capy "Pedidos". Every value below is the handoff's (Capy Pedidos.dc.html), expressed through
   the declared tokens. #E6E1D5 borders normalise onto var(--pt-border-card) and the #F5F2E9 tab
   track onto var(--pt-cream-100), matching the precedent QrCodes already set for both. */

/* ── Page header ────────────────────────────────────────────── */
.orders-header[b-nyc3v4sds9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pt-space-4);
    margin-bottom: var(--pt-space-6);
}

.orders-header h1[b-nyc3v4sds9] {
    margin: 0;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: var(--pt-tracking-display-l);
}

.orders-header p[b-nyc3v4sds9] {
    margin: 3px 0 0;
    color: var(--pt-text-muted);
    font-size: 14px;
}

.orders-header__controls[b-nyc3v4sds9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-left: auto;
}

/* ── View switch (live / history) ──────────────────────────── */
/* Not .capy-segmented: that control is a bordered pill pair with a forest-filled selection.
   This is the same cream-track-with-a-raised-white-selection affordance QrCodes' zone filter
   uses — a mode switch, not a form control. */
.orders-view-switch[b-nyc3v4sds9] {
    display: flex;
    gap: 4px;
    background: var(--pt-cream-100);
    border-radius: var(--pt-radius-md);
    padding: 3px;
}

.orders-view-switch__btn[b-nyc3v4sds9] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    border: 0;
    border-radius: 7px;
    padding: 9px 15px;
    background: transparent;
    color: var(--pt-text-muted);
    font-family: var(--pt-font-body);
    font-weight: 800;
    font-size: 13.5px;
    cursor: pointer;
    transition: all var(--pt-dur-hover) var(--pt-ease-soft);
}

.orders-view-switch__btn[aria-pressed="true"][b-nyc3v4sds9] {
    background: var(--pt-surface);
    color: var(--pt-ink-900);
    box-shadow: var(--pt-shadow-card);
}

.orders-view-switch__dot[b-nyc3v4sds9] { width: 8px; height: 8px; border-radius: 50%; background: var(--pt-unavailable-icon); }
.orders-view-switch__dot--on[b-nyc3v4sds9] { background: var(--pt-success); }

/* ── Search ─────────────────────────────────────────────────── */
.orders-search[b-nyc3v4sds9] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 240px;
    min-height: 42px;
    box-sizing: border-box;
    padding: 0 13px;
    border: var(--pt-border-card);
    border-radius: 9px;
    background: var(--pt-app-bg);
    color: var(--pt-unavailable-icon);
}

.orders-search input[b-nyc3v4sds9] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-body);
    font-size: 13.5px;
}

.orders-search input[b-nyc3v4sds9]::placeholder { color: var(--pt-unavailable-icon); }

.orders-view-switch__btn:focus-visible[b-nyc3v4sds9],
.orders-search:focus-within[b-nyc3v4sds9],
.orders-tabs__tab:focus-visible[b-nyc3v4sds9],
.orders-row:focus-visible[b-nyc3v4sds9],
.orders-history-pill:focus-visible[b-nyc3v4sds9],
.orders-history-state:focus-visible[b-nyc3v4sds9] {
    outline: var(--pt-focus-outline);
    outline-offset: 2px;
}

/* ── Inline error / skeleton ────────────────────────────────── */
.orders-skeleton[b-nyc3v4sds9] { display: grid; gap: 10px; margin-bottom: var(--pt-space-6); }

.orders-skeleton__bar[b-nyc3v4sds9] {
    border-radius: var(--pt-radius-md);
    background: var(--pt-cream-100);
    animation: orders-pulse-b-nyc3v4sds9 1.4s var(--pt-ease-soft) infinite;
}

.orders-skeleton__bar--title[b-nyc3v4sds9] { width: 240px; height: 20px; }
.orders-skeleton__bar--row[b-nyc3v4sds9] { height: 64px; }

@keyframes orders-pulse-b-nyc3v4sds9 { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ── Stat cards (R5: four) ──────────────────────────────────── */
.orders-stats[b-nyc3v4sds9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--pt-space-3);
    margin-bottom: var(--pt-space-6);
}

.orders-stat[b-nyc3v4sds9] {
    background: var(--pt-surface);
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-lg);
    padding: 14px 16px;
}

.orders-stat__label[b-nyc3v4sds9] { font-size: 12.5px; color: var(--pt-text-muted); }

.orders-stat__row[b-nyc3v4sds9] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 5px;
}

.orders-stat__value[b-nyc3v4sds9] {
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 25px;
    letter-spacing: -.025em;
    font-variant-numeric: tabular-nums;
    color: var(--pt-ink-900);
}

.orders-stat__hint[b-nyc3v4sds9] { font-size: 12.5px; color: var(--pt-unavailable-text); }

/* ── Día 1 (Task 4) ─────────────────────────────────────────────────────────────────────────
   "No orders have ever arrived" — not the filtered-empty state above (.orders-empty), which
   fires when a tab or search matches nothing inside an otherwise non-empty restaurant. Same
   anatomy as Home.razor's .home-dayone and QrCodes' .qr-dayone (component reference §5);
   rebuilt here under this screen's own orders- prefix rather than shared across files — Blazor
   CSS isolation scopes each .razor.css to the elements its own component renders. */
.orders-dayone[b-nyc3v4sds9] {
    max-width: 720px;
    padding: 30px 32px 28px;
    background: var(--pt-surface);
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-lg);
    box-shadow: var(--pt-shadow-card);
}

.orders-dayone__badge[b-nyc3v4sds9] {
    margin-bottom: var(--pt-space-3);
    color: var(--pt-on-warning);
    font-family: var(--pt-font-mono);
    font-size: 8.5px;
    letter-spacing: .12em;
}

.orders-dayone__title[b-nyc3v4sds9] {
    margin: 0 0 var(--pt-space-2);
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.025em;
}

.orders-dayone__body[b-nyc3v4sds9] {
    max-width: 56ch;
    margin: 0 0 22px;
    color: var(--pt-text-muted);
    font-size: 14px;
    line-height: var(--pt-leading-body);
    text-wrap: pretty;
}

.orders-dayone__tasks[b-nyc3v4sds9] { display: grid; gap: var(--pt-space-2); }

.orders-dayone-task[b-nyc3v4sds9] {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px var(--pt-space-4);
    border: var(--pt-border-card);
    border-radius: 10px;
    background: var(--pt-app-bg);
}

.orders-dayone-task > i[b-nyc3v4sds9] { flex: none; color: var(--pt-forest-600); font-size: 16px; }
.orders-dayone-task__text[b-nyc3v4sds9] { flex: 1; min-width: 0; }

.orders-dayone-task__title[b-nyc3v4sds9] {
    display: block;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-weight: 700;
    font-size: 14px;
}

.orders-dayone-task__body[b-nyc3v4sds9] {
    display: block;
    margin-top: 2px;
    color: var(--pt-text-muted);
    font-size: 12.5px;
}

.orders-dayone-task__action[b-nyc3v4sds9] { flex: none; white-space: nowrap; }

.orders-dayone__cta[b-nyc3v4sds9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
}

.orders-dayone__cta span[b-nyc3v4sds9] { color: var(--pt-text-muted); font-size: 12.5px; }
.orders-dayone__cta .capy-form-action[b-nyc3v4sds9] { min-height: 42px; padding: 11px 18px; font-size: var(--pt-text-caption); }

/* ── Live master–detail grid (Step 0) ──────────────────────── */
.orders-live[b-nyc3v4sds9] {
    display: grid;
    grid-template-columns: minmax(460px, 1.5fr) minmax(340px, 1fr);
    gap: var(--pt-space-6);
    align-items: start;
}

@media (max-width: 1180px) {
    .orders-live[b-nyc3v4sds9] { grid-template-columns: 1fr; }
}

.orders-panel[b-nyc3v4sds9],
.orders-detail[b-nyc3v4sds9],
.orders-history-toolbar[b-nyc3v4sds9],
.orders-history-table[b-nyc3v4sds9] {
    background: var(--pt-surface);
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-lg);
    overflow: hidden;
}

.orders-detail[b-nyc3v4sds9] { min-height: 120px; position: sticky; top: 22px; }

@media (max-width: 1180px) {
    .orders-detail[b-nyc3v4sds9] { position: static; }
}

/* ── List panel head: tabs + count ─────────────────────────── */
.orders-panel__head[b-nyc3v4sds9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border-bottom: var(--pt-border-card);
}

.orders-panel__count[b-nyc3v4sds9] { margin-left: auto; font-size: 12.5px; color: var(--pt-unavailable-icon); }

.orders-tabs[b-nyc3v4sds9] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    background: var(--pt-cream-100);
    border-radius: var(--pt-radius-md);
    padding: 3px;
}

.orders-tabs__tab[b-nyc3v4sds9] {
    min-height: 38px;
    border: 0;
    border-radius: 6px;
    padding: 8px 14px;
    background: transparent;
    color: var(--pt-text-muted);
    font-family: var(--pt-font-body);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all var(--pt-dur-hover) var(--pt-ease-soft);
}

.orders-tabs__tab[aria-pressed="true"][b-nyc3v4sds9] {
    background: var(--pt-surface);
    color: var(--pt-ink-900);
    box-shadow: var(--pt-shadow-card);
}

/* ── Column headers (R12: Silkscreen is permitted here) ────── */
.orders-list-head[b-nyc3v4sds9] {
    display: grid;
    grid-template-columns: 78px 1fr 110px 120px 96px;
    gap: 12px;
    padding: 10px 18px;
    background: var(--pt-app-bg);
    border-bottom: var(--pt-border-card);
    font-family: var(--pt-font-mono);
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--pt-unavailable-text);
}

.orders-list-head__total[b-nyc3v4sds9] { text-align: right; }

/* ── Rows ───────────────────────────────────────────────────── */
.orders-rows[b-nyc3v4sds9] { display: grid; }

.orders-row[b-nyc3v4sds9] {
    display: grid;
    grid-template-columns: 78px 1fr 110px 120px 96px;
    gap: 12px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    border: 0;
    border-top: 1px solid var(--pt-row-divider);
    border-left: 3px solid transparent;
    padding: 13px 18px;
    background: var(--pt-surface);
    color: var(--pt-ink-900);
    font-family: var(--pt-font-body);
    text-align: left;
    cursor: pointer;
    transition: all var(--pt-dur-hover) var(--pt-ease-soft);
}

.orders-rows > .orders-row:first-child[b-nyc3v4sds9] { border-top: 0; }

.orders-row:hover:not(.orders-row--active)[b-nyc3v4sds9] { background: var(--pt-app-bg); }

.orders-row--active[b-nyc3v4sds9] {
    border-left-color: var(--pt-forest-700);
    background: var(--pt-available-tint);
}

.orders-row__code[b-nyc3v4sds9], .orders-row__table[b-nyc3v4sds9] { min-width: 0; }

.orders-row__number[b-nyc3v4sds9] { display: block; font-family: var(--pt-font-display); font-weight: 800; font-size: 15px; }
.orders-row__opened[b-nyc3v4sds9] { display: block; margin-top: 2px; font-size: 11px; color: var(--pt-unavailable-icon); }

.orders-row__table-name[b-nyc3v4sds9] { display: block; font-weight: 700; font-size: 14px; }

.orders-row__summary[b-nyc3v4sds9] {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    color: var(--pt-text-muted);
}

.orders-row__total[b-nyc3v4sds9] {
    text-align: right;
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

/* ── Status badges (R7) ────────────────────────────────────── */
.orders-badge[b-nyc3v4sds9] {
    display: inline-block;
    border-radius: 6px;
    padding: 5px 9px;
    font-size: 11.5px;
    font-weight: 800;
}

.orders-badge--warning[b-nyc3v4sds9] { color: var(--pt-on-warning); background: oklch(from var(--pt-warning) l c h / .14); }
.orders-badge--success[b-nyc3v4sds9] { color: var(--pt-on-success); background: oklch(from var(--pt-success) l c h / .12); }
.orders-badge--neutral[b-nyc3v4sds9] { color: var(--pt-text-secondary); background: var(--pt-row-divider); }
.orders-badge--danger[b-nyc3v4sds9] { color: var(--pt-on-danger); background: oklch(from var(--pt-danger) l c h / .12); }

/* Cancelled orders carry no PAGO state (R7) — a plain dash, not a coloured pill, so it never
   reads as "some other payment state" by mistake. */
.orders-badge-dash[b-nyc3v4sds9] { color: var(--pt-unavailable-icon); }

/* ── Empty / footer ─────────────────────────────────────────── */
.orders-empty[b-nyc3v4sds9] {
    margin: 0;
    padding: 34px 18px;
    text-align: center;
    font-size: 14px;
    color: var(--pt-text-muted);
}

.orders-foot[b-nyc3v4sds9] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    background: var(--pt-app-bg);
    border-top: var(--pt-border-card);
    font-size: 12.5px;
    color: var(--pt-text-muted);
}

.orders-foot__note[b-nyc3v4sds9] { font-size: 12px; color: var(--pt-unavailable-icon); }

/* ── History view (Task 3) ─────────────────────────────────────
   Unlike .orders-panel/.orders-detail, .orders-history is not itself a bordered panel — the
   history view is two separate cards (toolbar, table) stacked in a column, matching
   .capy-content's own flex layout, not one box wrapping both. */
.orders-history[b-nyc3v4sds9] { display: flex; flex-direction: column; gap: var(--pt-space-6); }

.orders-history-toolbar[b-nyc3v4sds9] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--pt-space-4);
    padding: 14px 18px;
}

.orders-history-toolbar__group[b-nyc3v4sds9] { min-width: 230px; }

.orders-history-eyebrow[b-nyc3v4sds9] {
    display: block;
    margin-bottom: 8px;
    font-family: var(--pt-font-mono);
    font-size: 11px;
    letter-spacing: .12em;
    color: var(--pt-unavailable-text);
}

.orders-history-pills[b-nyc3v4sds9] { display: flex; flex-wrap: wrap; gap: 6px; }

.orders-history-pill[b-nyc3v4sds9],
.orders-history-state[b-nyc3v4sds9] {
    min-height: 42px;
    box-sizing: border-box;
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-md);
    padding: 10px 14px;
    background: var(--pt-surface);
    color: var(--pt-text-strong);
    font-family: var(--pt-font-body);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all var(--pt-dur-hover) var(--pt-ease-soft);
}

/* Range pills: solid forest fill when selected — the prototype's RANGES buttons. */
.orders-history-pill[aria-pressed="true"][b-nyc3v4sds9] {
    border-color: var(--pt-forest-700);
    background: var(--pt-forest-700);
    color: var(--pt-cream-50);
}

/* State tabs: a 2px outlined mint tint when selected — the prototype's HSTATE_TABS buttons,
   a visibly different affordance from the range pills so the two axes read as distinct. */
.orders-history-state[aria-pressed="true"][b-nyc3v4sds9] {
    padding: 9px 13px;
    border: 2px solid var(--pt-forest-600);
    background: var(--pt-available-tint);
    color: var(--pt-forest-600);
}

/* The count on a Canal button: how many orders the period holds in that channel. */
.orders-history-state__n[b-nyc3v4sds9] {
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--pt-row-divider);
    color: var(--pt-text-secondary);
    font-size: 11.5px;
    font-weight: 800;
}

/* Canal cell of a history row: a table order, a delivery or a pickup, readable at a glance. */
.orders-channel[b-nyc3v4sds9] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 6px;
    padding: 4px 9px;
    font-size: 11.5px;
    font-weight: 800;
}

.orders-channel--mesa[b-nyc3v4sds9] { background: var(--pt-row-divider); color: var(--pt-text-secondary); }
.orders-channel--delivery[b-nyc3v4sds9] { background: var(--pt-occupied-tint); color: var(--pt-occupied-fg); }
.orders-channel--pickup[b-nyc3v4sds9] { background: var(--pt-chrome-info-tint); color: var(--pt-on-info); }

.orders-history-custom[b-nyc3v4sds9] { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }

.orders-history-custom .field[b-nyc3v4sds9] { min-width: 150px; margin-bottom: 0; }

.orders-history-table__head[b-nyc3v4sds9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border-bottom: var(--pt-border-card);
}

.orders-history-table__head h2[b-nyc3v4sds9] {
    margin: 0;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-weight: 700;
    font-size: 15px;
}

.orders-history-table__count[b-nyc3v4sds9] { font-size: 12.5px; color: var(--pt-unavailable-icon); }
.orders-history-table__range[b-nyc3v4sds9] { margin-left: auto; font-size: 12.5px; color: var(--pt-text-muted); }

/* Column headers: FECHA · PEDIDO · CANAL · CLIENTE / MOZO · ESTADO · TOTAL. MEDIO DE PAGO is cut. */
.orders-history-list-head[b-nyc3v4sds9] {
    display: grid;
    grid-template-columns: 96px 66px 104px minmax(0, 1fr) 112px 108px;
    gap: 12px;
    padding: 10px 18px;
    background: var(--pt-app-bg);
    border-bottom: var(--pt-border-card);
    font-family: var(--pt-font-mono);
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--pt-unavailable-text);
}

.orders-history-list-head__total[b-nyc3v4sds9] { text-align: right; }

.orders-history-rows[b-nyc3v4sds9] { display: grid; }

.orders-history-row[b-nyc3v4sds9] {
    display: grid;
    grid-template-columns: 96px 66px 104px minmax(0, 1fr) 112px 108px;
    gap: 12px;
    align-items: center;
    padding: 12px 18px;
    border-top: 1px solid var(--pt-row-divider);
}

.orders-history-rows > .orders-history-row:first-child[b-nyc3v4sds9] { border-top: 0; }

/* Order state plus, for a paid order, its fiscal status: two badges that wrap within the column. */
.orders-history-row__status[b-nyc3v4sds9] { display: flex; flex-wrap: wrap; gap: 4px; }

.orders-history-row__date[b-nyc3v4sds9] { display: block; font-weight: 700; font-size: 13.5px; color: var(--pt-ink-900); }
.orders-history-row__time[b-nyc3v4sds9] { display: block; margin-top: 2px; font-size: 11px; color: var(--pt-unavailable-icon); }

.orders-history-row__code[b-nyc3v4sds9] { font-family: var(--pt-font-display); font-weight: 800; font-size: 14px; color: var(--pt-ink-900); }

.orders-history-row__table[b-nyc3v4sds9] { min-width: 0; }
.orders-history-row__table-name[b-nyc3v4sds9] { display: block; font-weight: 700; font-size: 13.5px; color: var(--pt-ink-900); }

.orders-history-row__summary[b-nyc3v4sds9] {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: var(--pt-text-muted);
}

.orders-history-row__total[b-nyc3v4sds9] {
    text-align: right;
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 14.5px;
    font-variant-numeric: tabular-nums;
    color: var(--pt-ink-900);
}

/* ── Detail panel (Task 2) ──────────────────────────────────── */
.orders-detail__header[b-nyc3v4sds9] {
    padding: 16px 18px;
    border-bottom: var(--pt-border-card);
}

.orders-detail__title-row[b-nyc3v4sds9] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.orders-detail__code[b-nyc3v4sds9] {
    margin: 0;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -.02em;
}

.orders-detail__meta[b-nyc3v4sds9] {
    margin: 5px 0 0;
    font-size: 13px;
    color: var(--pt-text-muted);
}

.orders-detail__items[b-nyc3v4sds9] {
    display: grid;
    gap: 11px;
    padding: 14px 18px;
}

.orders-detail-item[b-nyc3v4sds9] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.orders-detail-item__qty[b-nyc3v4sds9] {
    flex: none;
    min-width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--pt-cream-100);
    color: var(--pt-text-secondary);
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 13px;
}

.orders-detail-item__body[b-nyc3v4sds9] { flex: 1; min-width: 0; }

.orders-detail-item__name[b-nyc3v4sds9] { display: block; font-weight: 700; font-size: 14px; color: var(--pt-ink-900); }

/* Long notes wrap rather than truncate — the handoff's own sample notes ("Una a punto, otra
   jugosa", "Sin cebolla · alergia") demonstrate this deliberately (task-2 brief, Step 4). */
.orders-detail-item__note[b-nyc3v4sds9] {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--pt-on-warning);
    overflow-wrap: break-word;
}

/* Sits between the name and the note: what the guest chose, not what they asked for on top of it.
   Full ink, not muted — it is part of the dish's identity, not metadata about it. */
.orders-detail-item__options[b-nyc3v4sds9] {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pt-ink-900);
    overflow-wrap: break-word;
}

/* R17: an OrderItemStatus.Unavailable row is never hidden — the guest ordered it and the kitchen
   refused it. Pill anatomy per the component reference §4, danger tone. */
.orders-detail-item__unavailable-badge[b-nyc3v4sds9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 5px 11px;
    border-radius: var(--pt-radius-pill);
    border: 1px solid oklch(from var(--pt-danger) l c h / .28);
    background: oklch(from var(--pt-danger) l c h / .10);
    color: var(--pt-on-danger);
    font-size: 12px;
    font-weight: 700;
}

.orders-detail-item__unavailable-badge i[b-nyc3v4sds9] { font-size: 11px; }

.orders-detail-item__price[b-nyc3v4sds9] {
    font-family: var(--pt-font-display);
    font-weight: 700;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--pt-text-secondary);
}

.orders-detail-item--unavailable .orders-detail-item__name[b-nyc3v4sds9],
.orders-detail-item--unavailable .orders-detail-item__price[b-nyc3v4sds9] {
    text-decoration: line-through;
    color: var(--pt-unavailable-text);
}

.orders-detail__totals[b-nyc3v4sds9] {
    display: grid;
    gap: 9px;
    padding: 14px 18px;
    border-top: 1px dashed var(--pt-cream-300);
}

.orders-detail__totals-row[b-nyc3v4sds9] {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--pt-text-muted);
}

.orders-detail__totals-row--total[b-nyc3v4sds9] {
    align-items: baseline;
    padding-top: 9px;
    border-top: var(--pt-border-row);
}

.orders-detail__totals-row--total span:first-child[b-nyc3v4sds9] {
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 16px;
    color: var(--pt-ink-900);
}

.orders-detail__totals-row--total span:last-child[b-nyc3v4sds9] {
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--pt-ink-900);
}

.orders-detail__tax-note[b-nyc3v4sds9] { font-size: 11.5px; color: var(--pt-unavailable-icon); }

@media (prefers-reduced-motion: reduce) {
    .orders-view-switch__btn[b-nyc3v4sds9], .orders-tabs__tab[b-nyc3v4sds9], .orders-row[b-nyc3v4sds9],
    .orders-history-pill[b-nyc3v4sds9], .orders-history-state[b-nyc3v4sds9] { transition: none; }
    .orders-skeleton__bar[b-nyc3v4sds9] { animation: none; }
}

/* ── Phone composition ────────────────────────────────────────────────────────
   The live rows are a five-track grid whose fixed columns total 404px, the history rows a
   six-track grid of 382px plus a flexible track, before gaps and padding. At 320px the content pane is 273px, so the trailing columns
   were laid out past the edge and clipped by the panel — status, payment and total simply were
   not there, with no scroll that recovered them.

   The recomposition is CSS only. A live row has five element children and a history row six,
   in a fixed order, so grid-template-areas re-flows them without touching the markup,
   the click handler, or any state. Desktop keeps its dense column grids untouched.

   The column header is hidden here rather than re-flowed: with the cells stacked, a row of
   headings no longer aligns to anything. The information is not lost — the status and payment
   cells are badges that carry their own words ("Abierta", "Pagado"), and the total carries its
   currency symbol. */
@media (max-width: 700px) {
    .orders-list-head[b-nyc3v4sds9],
    .orders-history-list-head[b-nyc3v4sds9] { display: none; }

    .orders-row[b-nyc3v4sds9],
    .orders-history-row[b-nyc3v4sds9] {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: var(--pt-space-3);
        row-gap: 6px;
        align-items: start;
        padding: var(--pt-space-3) var(--pt-space-4);
    }

    .orders-row[b-nyc3v4sds9] {
        grid-template-areas:
            "code  total"
            "table table"
            "state pay";
    }

    .orders-history-row[b-nyc3v4sds9] {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "when  channel total"
            "who   who     who"
            "code  code    state";
    }

    .orders-row > :nth-child(1)[b-nyc3v4sds9] { grid-area: code; }
    .orders-row > :nth-child(2)[b-nyc3v4sds9] { grid-area: table; }
    .orders-row > :nth-child(3)[b-nyc3v4sds9] { grid-area: state; justify-self: start; }
    .orders-row > :nth-child(4)[b-nyc3v4sds9] { grid-area: pay; justify-self: start; }
    .orders-row > :nth-child(5)[b-nyc3v4sds9] { grid-area: total; justify-self: end; }

    .orders-history-row > :nth-child(1)[b-nyc3v4sds9] { grid-area: when; }
    .orders-history-row > :nth-child(2)[b-nyc3v4sds9] { grid-area: code; justify-self: start; }
    /* No justify-self: start here: it sizes the cell to its nowrap text, so a long table name never
       shrinks to the track and the chip overlaps the total. Stretched, the chip's max-width ellipsises. */
    .orders-history-row > :nth-child(3)[b-nyc3v4sds9] { grid-area: channel; min-width: 0; }
    .orders-history-row > :nth-child(4)[b-nyc3v4sds9] { grid-area: who; }
    .orders-history-row > :nth-child(5)[b-nyc3v4sds9] { grid-area: state; justify-self: end; }
    .orders-history-row > :nth-child(6)[b-nyc3v4sds9] { grid-area: total; justify-self: end; }

    /* The header's controls stack instead of competing for 273px; measured overflow was 15px
       from .orders-header__controls and .orders-search together. */
    .orders-header__controls[b-nyc3v4sds9] { flex-direction: column; align-items: stretch; }
    .orders-search[b-nyc3v4sds9] { width: 100%; min-width: 0; }
    .orders-view-switch[b-nyc3v4sds9] { width: 100%; }
    .orders-view-switch__btn[b-nyc3v4sds9] { flex: 1; }
}

/* The search field is 24px tall today — it does not use .field__control, which is already 44px. */
@media (hover: none) and (pointer: coarse) {
    .orders-search input[b-nyc3v4sds9] { min-height: var(--pt-action-min-height-touch); }
    .orders-tabs__tab[b-nyc3v4sds9],
    .orders-view-switch__btn[b-nyc3v4sds9] { min-height: var(--pt-action-min-height-touch); }

    /* Restores the shared touch contract: this per-screen density rule (line 244) sits at the
       same specificity as .capy-form-action's own touch rule in capy-forms.css, and a media
       query adds no specificity, so the later same-file declaration below is what wins. */
    .orders-dayone__cta .capy-form-action[b-nyc3v4sds9] { min-height: var(--pt-action-min-height-touch); }
}
/* /Components/Pages/OrderTimeline.razor.rz.scp.css */
/* Capy "Pedidos" — timeline half of the order detail panel (Task 2). Reproduces the handoff's
   row anatomy (Capy Pedidos.dc.html script lines 654-657): a coloured dot, the label, the time,
   right-aligned, on the panel's cream footer band. Colour choice per row lives in
   OrderTimeline.razor's own comment, not here. */

.order-timeline[b-p4865yu3bh] {
    display: grid;
    gap: 9px;
    padding: 14px 18px;
    background: var(--pt-app-bg);
    border-top: var(--pt-border-card);
}

.order-timeline__row[b-p4865yu3bh] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: var(--pt-text-secondary);
}

.order-timeline__dot[b-p4865yu3bh] {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.order-timeline__label[b-p4865yu3bh] { flex: 1; }

.order-timeline__time[b-p4865yu3bh] {
    font-family: var(--pt-font-display);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--pt-text-muted);
}

.order-timeline__skeleton[b-p4865yu3bh] { display: grid; gap: 9px; }

.order-timeline__skeleton-row[b-p4865yu3bh] {
    height: 16px;
    border-radius: var(--pt-radius-sm);
    background: var(--pt-cream-100);
    animation: order-timeline-pulse-b-p4865yu3bh 1.4s var(--pt-ease-soft) infinite;
}

@keyframes order-timeline-pulse-b-p4865yu3bh { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

@media (prefers-reduced-motion: reduce) {
    .order-timeline__skeleton-row[b-p4865yu3bh] { animation: none; }
}
/* /Components/Pages/QrCodes/QrCodes.razor.rz.scp.css */
/* Capy "Códigos QR". Every value below is the handoff's, expressed through the declared tokens;
   the few literals left (px sizes, the 96/178px code boxes) are geometry the token set does not
   name. Nothing here inlines a colour a token already carries. */

/* ── Page header ────────────────────────────────────────────── */
.qr-header[b-oqftdmkdtm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pt-space-4);
    margin-bottom: var(--pt-space-4);
}

.qr-header h1[b-oqftdmkdtm] {
    margin: 0;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: var(--pt-tracking-display-l);
}

.qr-header p[b-oqftdmkdtm] {
    margin: 3px 0 0;
    color: var(--pt-text-muted);
    font-size: 14px;
}

.qr-header__actions[b-oqftdmkdtm] {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-left: auto;
}

/* flex-basis: 100% forces this onto its own row of the wrapping .qr-header, under the actions,
   at any width — the visible replacement for the old title= tooltip on the print button.
   Right-aligned by default so it sits under "Imprimir o guardar PDF" at the row's right edge
   (.qr-header__actions has margin-left: auto) rather than under the page title on the left —
   live-reviewed defect. Left-aligned again once .qr-header wraps onto separate lines (same
   breakpoint .qr-zones already uses below), where the actions row is no longer to the right of
   anything this line could align under. */
.qr-header__print-help[b-oqftdmkdtm] {
    flex-basis: 100%;
    margin: 0;
    color: var(--pt-text-muted);
    font-size: var(--pt-text-caption);
    text-align: right;
}

/* The handoff draws its bar buttons taller and heavier than the shared form action; the shared
   anatomy still supplies the border, radius, hover lift and focus ring. */
.qr-header__actions .capy-form-action[b-oqftdmkdtm],
.qr-detail__actions .capy-form-action[b-oqftdmkdtm],
.qr-modal__actions .capy-form-action[b-oqftdmkdtm] {
    min-height: 42px;
    padding: 10px var(--pt-space-4);
    font-size: 13.5px;
    font-weight: 800;
    color: var(--pt-text-strong);
}

.qr-header__actions .capy-form-action i[b-oqftdmkdtm] { font-size: 14px; }

/* Scoped under .qr-header__actions so it outranks the grouped sizing rule above, which also sets
   a colour. Without the extra specificity "Descargar PDF" renders --pt-text-strong on the forest
   fill instead of the global .capy-form-action--primary's cream text — same fix as the modal's
   confirm button below. */
.qr-header__actions .capy-form-action--primary[b-oqftdmkdtm] { color: var(--pt-cream-50); }

.qr-alert[b-oqftdmkdtm] {
    display: flex;
    align-items: center;
    gap: var(--pt-space-2);
    margin-bottom: var(--pt-space-4);
    padding: 11px 13px;
    border: 1px solid oklch(from var(--pt-danger) l c h / .3);
    border-radius: var(--pt-radius-md);
    background: var(--pt-danger-summary);
    color: var(--pt-danger);
    font-size: var(--pt-text-caption);
    font-weight: 700;
}

.qr-alert > span[b-oqftdmkdtm] { flex: 1; min-width: 0; }

.qr-alert__dismiss[b-oqftdmkdtm] {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    border: 0;
    border-radius: var(--pt-radius-sm);
    background: transparent;
    color: inherit;
    font-size: 16px;
    cursor: pointer;
}

.qr-alert__dismiss:hover[b-oqftdmkdtm] { background: oklch(from var(--pt-danger) l c h / .1); }
.qr-alert__dismiss:focus-visible[b-oqftdmkdtm] { outline: none; box-shadow: var(--pt-focus-ring); }

/* ── Día 1 ──────────────────────────────────────────────────── */
.qr-dayone[b-oqftdmkdtm] {
    max-width: 720px;
    padding: 30px 32px 28px;
    background: var(--pt-surface);
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-lg);
    box-shadow: var(--pt-shadow-card);
}

.qr-dayone__badge[b-oqftdmkdtm] {
    margin-bottom: var(--pt-space-3);
    color: var(--pt-on-warning);
    font-family: var(--pt-font-mono);
    font-size: 8.5px;
    letter-spacing: .12em;
}

.qr-dayone h2[b-oqftdmkdtm] {
    margin: 0 0 var(--pt-space-2);
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: var(--pt-tracking-display-l);
}

.qr-dayone > p[b-oqftdmkdtm] {
    max-width: 56ch;
    margin: 0 0 22px;
    color: var(--pt-text-muted);
    font-size: 14px;
    line-height: var(--pt-leading-body);
    text-wrap: pretty;
}

.qr-dayone__tasks[b-oqftdmkdtm] { display: grid; gap: var(--pt-space-2); }

.qr-dayone__task[b-oqftdmkdtm] {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px var(--pt-space-4);
    border: var(--pt-border-card);
    border-radius: 10px;
    background: var(--pt-app-bg);
}

.qr-dayone__task > i[b-oqftdmkdtm] {
    flex: none;
    color: var(--pt-forest-600);
    font-size: 16px;
}

.qr-dayone__task > span[b-oqftdmkdtm] { flex: 1; min-width: 0; }
.qr-dayone__task strong[b-oqftdmkdtm],
.qr-dayone__task small[b-oqftdmkdtm] { display: block; }

.qr-dayone__task strong[b-oqftdmkdtm] {
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 14px;
    font-weight: 700;
}

.qr-dayone__task small[b-oqftdmkdtm] {
    margin-top: 2px;
    color: var(--pt-text-muted);
    font-size: 12.5px;
}

/* Deliberately not a button: it names the order of operations, and a disabled button
   invites clicking. --pt-text-muted here and on .qr-panel__count / .qr-dayone__cta span, not
   the handoff's #A0A89C: that value is 2.45:1 on white and fails AA at these sizes. */
.qr-dayone__later[b-oqftdmkdtm] {
    flex: none;
    color: var(--pt-text-muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.qr-dayone__cta[b-oqftdmkdtm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
}

.qr-dayone__cta span[b-oqftdmkdtm] { color: var(--pt-text-muted); font-size: 12.5px; }
.qr-dayone__cta .capy-form-action[b-oqftdmkdtm] { min-height: 42px; padding: 11px 18px; font-size: var(--pt-text-caption); }

/* ── Master–detail ──────────────────────────────────────────── */
.qr-grid[b-oqftdmkdtm] {
    display: grid;
    grid-template-columns: minmax(420px, 1fr) 330px;
    gap: 20px;
    align-items: start;
}

@media (max-width: 1180px) {
    .qr-grid[b-oqftdmkdtm] { grid-template-columns: 1fr; }
}

.qr-panel[b-oqftdmkdtm],
.qr-detail[b-oqftdmkdtm] {
    overflow: hidden;
    background: var(--pt-surface);
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-lg);
    box-shadow: var(--pt-shadow-card);
}

.qr-panel__header[b-oqftdmkdtm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pt-space-3);
    padding: 13px 18px;
    border-bottom: var(--pt-border-card);
}

.qr-panel__header h2[b-oqftdmkdtm] {
    margin: 0;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.qr-panel__count[b-oqftdmkdtm] { color: var(--pt-text-muted); font-size: 12.5px; }

/* ── Zone tabs ──────────────────────────────────────────────── */
/* Not .capy-segmented: that control is a bordered pill pair with a forest-filled selection.
   The handoff's zone filter is a cream track with a raised white selection, which is a
   different affordance — a filter, not a mode switch. */
.qr-zones[b-oqftdmkdtm] {
    display: flex;
    gap: var(--pt-space-1);
    margin-left: auto;
    padding: 3px;
    border-radius: var(--pt-radius-md);
    background: var(--pt-cream-100);
}

.qr-zones__tab[b-oqftdmkdtm] {
    min-height: 36px;
    padding: var(--pt-space-2) 13px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--pt-text-muted);
    font: 700 12.5px var(--pt-font-body);
    cursor: pointer;
    transition: all var(--pt-dur-return) var(--pt-ease-soft);
}

.qr-zones__tab[aria-pressed="true"][b-oqftdmkdtm] {
    background: var(--pt-surface);
    color: var(--pt-ink-900);
    box-shadow: var(--pt-shadow-card);
}

/* ── Tiles ──────────────────────────────────────────────────── */
.qr-tiles[b-oqftdmkdtm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 14px;
    padding: 18px;
    background: var(--pt-app-bg);
}

/* Every other empty path on this screen has copy; a zone with no tables yet gets one too. */
.qr-tiles__empty[b-oqftdmkdtm] {
    margin: 0;
    padding: 34px 18px;
    background: var(--pt-app-bg);
    color: var(--pt-text-muted);
    font-size: 14px;
    text-align: center;
}

.qr-tile[b-oqftdmkdtm] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pt-space-2);
    padding: var(--pt-space-3);
    border: 2px solid var(--pt-cream-300);
    border-radius: var(--pt-radius-lg);
    background: var(--pt-surface);
    color: var(--pt-ink-900);
    font-family: var(--pt-font-body);
    text-align: left;
    cursor: pointer;
    transition: box-shadow var(--pt-dur-hover) var(--pt-ease-soft),
                border-color var(--pt-dur-hover) var(--pt-ease-soft);
}

.qr-tile:hover[b-oqftdmkdtm] { box-shadow: var(--pt-shadow-card); }

.qr-tile[aria-pressed="true"][b-oqftdmkdtm] {
    border-color: var(--pt-success);
    box-shadow: var(--pt-shadow-panel);
}

.qr-tile:focus-visible[b-oqftdmkdtm] { outline: none; box-shadow: var(--pt-focus-ring); }

/* Decorative only — the handoff draws a 46px bi-qr-code glyph here, not a scannable code.
   Scanning happens from the detail panel and the printed sheet, both real QRs on white with a
   quiet zone; this box is a picker affordance, not one of them. */
.qr-tile__code[b-oqftdmkdtm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 96px;
    border: var(--pt-border-card);
    border-radius: 10px;
    background: var(--pt-surface);
}

.qr-tile__code i[b-oqftdmkdtm] { font-size: 46px; color: var(--pt-forest-600); }

.qr-tile__name[b-oqftdmkdtm] {
    display: flex;
    align-items: center;
    gap: var(--pt-space-2);
    width: 100%;
    font-family: var(--pt-font-display);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.qr-tile__meta[b-oqftdmkdtm] { color: var(--pt-text-muted); font-size: 11.5px; font-weight: 700; }

.qr-chip[b-oqftdmkdtm] {
    margin-left: auto;
    flex: none;
    padding: 3px 7px;
    border-radius: 5px;
    background: oklch(from var(--pt-warning) l c h / .16);
    color: var(--pt-on-warning);
    font-family: var(--pt-font-body);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0;
}

/* ── Detail panel ───────────────────────────────────────────── */
.qr-detail__header[b-oqftdmkdtm] {
    display: flex;
    align-items: center;
    gap: var(--pt-space-2);
    padding: 14px var(--pt-space-4);
    border-bottom: var(--pt-border-card);
}

.qr-detail__header h2[b-oqftdmkdtm] {
    margin: 0;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 15px;
    font-weight: 700;
}

.qr-detail__header .qr-chip[b-oqftdmkdtm] { font-size: 11.5px; padding: 4px 9px; border-radius: 6px; }

.qr-detail__body[b-oqftdmkdtm] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px var(--pt-space-4);
}

/* 178px box, 118px code — the remaining 30px on each side is the quiet zone. */
.qr-detail__code[b-oqftdmkdtm] {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    width: 178px;
    height: 178px;
    border: var(--pt-border-card);
    border-radius: 14px;
    background: var(--pt-surface);
}

.qr-detail__url[b-oqftdmkdtm] {
    display: flex;
    align-items: center;
    gap: var(--pt-space-2);
    padding: 10px var(--pt-space-3);
    border: var(--pt-border-card);
    border-radius: 9px;
    background: var(--pt-cream-100);
}

.qr-detail__url > span[b-oqftdmkdtm] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--pt-text-strong);
    font-size: 12.5px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qr-detail__copy[b-oqftdmkdtm] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-md);
    background: var(--pt-surface);
    color: var(--pt-text-strong);
    font-size: var(--pt-text-caption);
    cursor: pointer;
}

.qr-detail__copy:focus-visible[b-oqftdmkdtm] { outline: none; box-shadow: var(--pt-focus-ring); }

/* 14px to match the handoff's body rhythm — the <dl> wrapper is a semantic addition, not a
   reason for the rows to sit tighter than the design draws them. */
.qr-detail__rows[b-oqftdmkdtm] { display: grid; gap: 14px; margin: 0; }
.qr-detail__rows > div[b-oqftdmkdtm] { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; }
.qr-detail__rows dt[b-oqftdmkdtm] { color: var(--pt-text-muted); }
.qr-detail__rows dd[b-oqftdmkdtm] { margin: 0; color: var(--pt-ink-900); font-weight: 800; text-align: right; }

.qr-detail__actions[b-oqftdmkdtm] { display: grid; gap: var(--pt-space-2); }
.qr-detail__actions .capy-form-action[b-oqftdmkdtm] { width: 100%; min-height: 44px; }
.qr-detail__actions .capy-form-action--primary[b-oqftdmkdtm] { color: var(--pt-cream-50); }

/* The repo's declared destructive dress, plus the border it needs to read as one of two
   stacked buttons rather than a link. */
.qr-detail__actions .capy-form-action--danger[b-oqftdmkdtm] {
    border-color: oklch(from var(--pt-danger) l c h / .4);
    color: var(--pt-danger);
}

.qr-detail__hint[b-oqftdmkdtm] {
    margin: 0;
    padding: var(--pt-space-3) var(--pt-space-4);
    border-top: var(--pt-border-card);
    background: var(--pt-app-bg);
    color: var(--pt-text-muted);
    font-size: 12px;
    line-height: var(--pt-leading-caption);
}

/* ── Skeleton (before the first load resolves) ──────────────── */
.qr-detail__skeleton[b-oqftdmkdtm] { display: flex; flex-direction: column; gap: 14px; padding: 18px var(--pt-space-4); }

.qr-skeleton[b-oqftdmkdtm] {
    border-radius: var(--pt-radius-md);
    background: var(--pt-cream-100);
    animation: qr-pulse-b-oqftdmkdtm 1.4s var(--pt-ease-soft) infinite;
}

.qr-skeleton--title[b-oqftdmkdtm] { width: 44%; height: 15px; }
.qr-skeleton--code[b-oqftdmkdtm] { align-self: center; width: 178px; height: 178px; border-radius: 14px; }
.qr-skeleton--row[b-oqftdmkdtm] { height: 13px; }

@keyframes qr-pulse-b-oqftdmkdtm { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

@media (prefers-reduced-motion: reduce) {
    .qr-skeleton[b-oqftdmkdtm], .qr-toast[b-oqftdmkdtm], .qr-modal[b-oqftdmkdtm] { animation: none; }
}

/* ── Regeneration confirmation ──────────────────────────────── */
.qr-modal-overlay[b-oqftdmkdtm] {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pt-space-6);
    /* Safe-area floor only today — see MainLayout.razor.css's F5 note: env() resolves to 0px
       without viewport-fit=cover, so this is exactly --pt-space-4 on every device now. */
    padding-bottom: max(var(--pt-space-4), env(safe-area-inset-bottom));
    padding-left: max(var(--pt-space-4), env(safe-area-inset-left));
    padding-right: max(var(--pt-space-4), env(safe-area-inset-right));
    background: oklch(from var(--pt-forest-900) l c h / .5);
}

.qr-modal[b-oqftdmkdtm] {
    width: min(420px, 92vw);
    overflow: hidden;
    border: var(--pt-border-card);
    border-radius: 14px;
    background: var(--pt-surface);
    box-shadow: var(--pt-shadow-panel);
    animation: qr-rise-b-oqftdmkdtm var(--pt-dur-base) var(--pt-ease-soft) both;
}

@keyframes qr-rise-b-oqftdmkdtm { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.qr-modal__head[b-oqftdmkdtm] { padding: 18px 20px 0; }

.qr-modal__head h3[b-oqftdmkdtm] {
    margin: 0;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.qr-modal__head p[b-oqftdmkdtm] {
    margin: var(--pt-space-2) 0 0;
    color: var(--pt-text-muted);
    font-size: 14px;
    line-height: var(--pt-leading-body);
}

.qr-modal__warn[b-oqftdmkdtm] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: var(--pt-space-4) 20px 0;
    padding: var(--pt-space-3) 13px;
    border: 1px solid oklch(from var(--pt-warning) l c h / .3);
    border-radius: 10px;
    background: oklch(from var(--pt-warning) l c h / .12);
    color: var(--pt-on-warning);
    font-size: var(--pt-text-caption);
    font-weight: 700;
    line-height: 1.55;
}

.qr-modal__warn i[b-oqftdmkdtm] { flex: none; font-size: 15px; }

.qr-modal__actions[b-oqftdmkdtm] {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 18px 20px 20px;
}

.qr-modal__actions .capy-form-action[b-oqftdmkdtm] { min-height: 44px; padding: 11px var(--pt-space-4); }

/* Scoped under .qr-modal__actions so it outranks the grouped sizing rule above, which also sets
   a colour. Without the extra specificity the confirm label renders --pt-text-strong on the red
   fill at ~1.6:1 — unreadable, on the one control that invalidates printed material. */
.qr-modal__actions .qr-modal__confirm[b-oqftdmkdtm] {
    border-color: var(--pt-danger);
    background: var(--pt-danger);
    color: var(--pt-cream-50);
}

/* ── Toast ──────────────────────────────────────────────────── */
/* Dark on purpose — the handoff's forest pill, bottom-centre, over the light page. */
.qr-toast[b-oqftdmkdtm] {
    position: fixed;
    left: 50%;
    bottom: 26px;
    z-index: 70;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    /* Bottom-inset only: 13px is this toast's own vertical padding, kept as the floor so a
       device with no home-indicator inset (env() resolves to 0px, all of them today — see F5)
       renders identically to before. No horizontal counterpart: this is a centered pill, not an
       edge-anchored panel. */
    padding-bottom: max(13px, env(safe-area-inset-bottom));
    border: 1px solid oklch(from var(--pt-moss-400) l c h / .45);
    border-radius: 11px;
    background: var(--pt-forest-900);
    color: var(--pt-cream-50);
    font-size: 15px;
    font-weight: 700;
    box-shadow: var(--pt-shadow-panel);
    transform: translateX(-50%);
    animation: qr-rise-b-oqftdmkdtm var(--pt-dur-base) var(--pt-ease-soft) both;
}

/* The live region stays mounted so screen readers have it registered before the text arrives;
   only its content changes. */
.qr-toast--hidden[b-oqftdmkdtm] { display: none; }

/* The handoff's #7ED08F: --pt-success at the lightness that reads on forest-900. The token
   itself (52.6% L) is too dark against this background to carry the confirmation. */
.qr-toast i[b-oqftdmkdtm] { flex: none; font-size: 16px; color: oklch(from var(--pt-success) 78% c h); }

/* ── Print sheet (Task 2) ───────────────────────────────────── */
/* Off-screen by default; @media print below swaps it in for .qr__screen-only. The handoff has no
   print design — restrained and high-contrast is the brief, derived from the same tokens as the
   rest of the screen rather than inlined. column-count over grid: it is the well-understood way
   to get break-inside: avoid to actually hold across both page breaks and column breaks in print
   engines, and it satisfies the required "display: block" on the container. */
.qr__sheet[b-oqftdmkdtm] { display: none; }

.qr__card[b-oqftdmkdtm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pt-space-2);
    padding: 10mm 6mm;
    border: 1px solid var(--pt-ink-900);
    border-radius: var(--pt-radius-lg);
    text-align: center;
    /* The load-bearing rule: without both, a card splits across a break and prints half a QR —
       fails silently, nobody checks before cutting the sheet apart. */
    break-inside: avoid;
    page-break-inside: avoid;
}

.qr__card-restaurant[b-oqftdmkdtm] {
    margin: 0;
    color: var(--pt-text-muted);
    font-family: var(--pt-font-body);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.qr__card-table[b-oqftdmkdtm] {
    margin: 0;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
}

/* White with a quiet zone whatever the card sits on — the box is deliberately larger than the
   200px code inside it, same relationship as the detail box (178px box / 118px code) above. */
.qr__card-code[b-oqftdmkdtm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 224px;
    height: 224px;
    background: var(--pt-surface);
}

.qr__card-instruction[b-oqftdmkdtm] {
    max-width: 42ch;
    margin: 0;
    color: var(--pt-text-muted);
    font-size: 11px;
    line-height: var(--pt-leading-caption);
}

/* "Imprimir este cartel" reuses this same sheet rather than a second print implementation —
   this class hides every card except the requested one for that one print. !important because
   .qr__card's own display:flex is declared unconditionally above, with no media-query gate for
   this class to outrank on specificity alone. */
.qr__card--print-hidden[b-oqftdmkdtm] { display: none !important; }

@media print {
    /* Everything but the sheet disappears — including the shell, which is on the page because
       this is a normal route, not a popup. .page__sidebar is a different component (MainLayout)
       and is hidden globally from wwwroot/app.css instead: Blazor's CSS isolation scopes every
       selector in this file to elements QrCodes.razor itself renders, so a rule here naming
       .page__sidebar would never match the sidebar's own scope attribute. */
    .qr__screen-only[b-oqftdmkdtm] { display: none !important; }

    .qr__sheet[b-oqftdmkdtm] {
        display: block;
        column-count: 2;
        column-gap: 10mm;
    }

    .qr__card[b-oqftdmkdtm] { margin: 0 0 10mm; }
}

/* Intentional, visible control scroll — same anatomy as Kitchen's .kds__filters (09038cca).
   min-width: 0 is required alongside overflow-x: auto — without it, this flex item's automatic
   min-width stays content-based and the row pushes .qr-panel__header wider instead of scrolling
   internally. */
@media (max-width: 700px) {
    .qr-zones[b-oqftdmkdtm] { overflow-x: auto; max-width: 100%; min-width: 0; }
    .qr-zones__tab[b-oqftdmkdtm] { flex: none; }
    .qr-header__print-help[b-oqftdmkdtm] { text-align: left; }
}

@media (hover: none) and (pointer: coarse) {
    .qr-zones__tab[b-oqftdmkdtm] { min-height: var(--pt-action-min-height-touch); }
    .qr-detail__copy[b-oqftdmkdtm] { width: var(--pt-action-min-height-touch); height: var(--pt-action-min-height-touch); }

    /* Restores the shared touch contract: these per-screen density rules (lines 38-46, 180) sit
       at the same specificity as .capy-form-action's own touch rule in capy-forms.css, and a
       media query adds no specificity, so the later same-file declaration below is what wins. */
    .qr-header__actions .capy-form-action[b-oqftdmkdtm],
    .qr-detail__actions .capy-form-action[b-oqftdmkdtm],
    .qr-modal__actions .capy-form-action[b-oqftdmkdtm] {
        min-height: var(--pt-action-min-height-touch);
    }

    .qr-dayone__cta .capy-form-action[b-oqftdmkdtm] { min-height: var(--pt-action-min-height-touch); }
}
/* /Components/Pages/Reservations/Reservations.razor.rz.scp.css */
.reservations-header[b-078k7sg4eq] { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin:-22px calc(-1 * var(--pt-content-pad)) 0; padding:16px var(--pt-content-pad); background:var(--pt-surface); border-bottom:var(--pt-border-card); }
.reservations-header__title[b-078k7sg4eq] { margin:0; color:var(--pt-ink-900); font-family:var(--pt-font-display); font-size:26px; font-weight:800; letter-spacing:var(--pt-tracking-title); }
.reservations-header__subhead[b-078k7sg4eq] { margin:3px 0 0; color:var(--pt-text-secondary); font-size:14px; }
.reservations-day-control[b-078k7sg4eq] { display:flex; align-items:center; gap:8px; margin-left:auto; }
.reservations-icon-button[b-078k7sg4eq], .reservations-date-button[b-078k7sg4eq], .reservations-calendar__arrow[b-078k7sg4eq] { border:var(--pt-border-card); background:var(--pt-surface); color:var(--pt-text-strong); cursor:pointer; }
.reservations-icon-button[b-078k7sg4eq] { width:40px; height:40px; border-radius:var(--pt-radius-md); }
.reservations-date-button[b-078k7sg4eq] { display:flex; align-items:center; justify-content:center; gap:9px; min-width:208px; min-height:40px; padding:9px 14px; border-radius:var(--pt-radius-md); font-family:var(--pt-font-display); font-weight:800; }
.reservations-calendar-wrap[b-078k7sg4eq] { position:relative; }
.reservations-calendar[b-078k7sg4eq] { position:absolute; z-index:4; top:48px; left:50%; width:max-content; transform:translateX(-50%); padding:14px; background:var(--pt-surface); border:var(--pt-border-card); border-radius:var(--pt-radius-lg); box-shadow:var(--pt-shadow-panel); }
.reservations-calendar__header[b-078k7sg4eq] { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.reservations-calendar__header strong[b-078k7sg4eq] { flex:1; text-align:center; font-family:var(--pt-font-display); font-size:14px; }
.reservations-calendar__arrow[b-078k7sg4eq] { width:32px; height:32px; border-radius:var(--pt-radius-sm); }
.reservations-calendar__weekdays[b-078k7sg4eq], .reservations-calendar__days[b-078k7sg4eq] { display:grid; grid-template-columns:repeat(7,34px); gap:3px; }
.reservations-calendar__weekdays[b-078k7sg4eq] { margin-bottom:5px; color:var(--pt-text-meta); font-family:var(--pt-font-mono); font-size:8px; text-align:center; }
.reservations-calendar__days button[b-078k7sg4eq] { width:34px; height:34px; border:var(--pt-border-card); border-radius:8px; background:var(--pt-surface); color:var(--pt-text-strong); font:700 13px var(--pt-font-body); cursor:pointer; }
.reservations-calendar__days .is-selected[b-078k7sg4eq] { background:var(--pt-forest-700); border-color:var(--pt-forest-700); color:var(--pt-cream-50); }
.reservations-calendar__days .is-today[b-078k7sg4eq] { background:var(--pt-available-tint); border-color:var(--pt-available-border); color:var(--pt-forest-700); }
.reservations-calendar__days .is-past[b-078k7sg4eq] { border-color:var(--pt-cream-200); color:var(--pt-text-meta); }
.reservations-calendar__today[b-078k7sg4eq] { width:100%; min-height:38px; margin-top:10px; border:1px solid var(--pt-available-border); border-radius:8px; background:var(--pt-available-tint); color:var(--pt-forest-700); font:700 13px var(--pt-font-body); cursor:pointer; }
.reservations-page[b-078k7sg4eq] { display:flex; flex-direction:column; gap:20px; padding:22px 0 0; }
.reservations-notice[b-078k7sg4eq], .reservations-disconnected[b-078k7sg4eq] { display:flex; align-items:center; gap:9px; margin:0; padding:11px 14px; border-radius:var(--pt-radius-md); font-size:13px; }
.reservations-notice[b-078k7sg4eq] { background:oklch(from var(--pt-warning) l c h / .11); border:1px solid oklch(from var(--pt-warning) l c h / .35); color:var(--pt-on-warning); }
.reservations-disconnected[b-078k7sg4eq] { background:oklch(from var(--pt-danger) l c h / .08); border:1px solid oklch(from var(--pt-danger) l c h / .28); color:var(--pt-danger); }
.reservations-loading[b-078k7sg4eq], .reservations-loading__side[b-078k7sg4eq] { display:grid; gap:20px; }
.reservations-loading__stats[b-078k7sg4eq] { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.reservations-loading__grid[b-078k7sg4eq] { display:grid; grid-template-columns:minmax(420px,1.4fr) minmax(280px,1fr); gap:20px; align-items:start; }
.reservations-loading span[b-078k7sg4eq] { display:block; border:var(--pt-border-card); border-radius:var(--pt-radius-lg); background:linear-gradient(90deg,var(--pt-cream-100),var(--pt-surface),var(--pt-cream-100)); background-size:200% 100%; animation:reservations-shimmer-b-078k7sg4eq 1.1s infinite; }
.reservations-loading__stat[b-078k7sg4eq] { height:84px; }
.reservations-loading__board[b-078k7sg4eq] { min-height:430px; }
.reservations-loading__timeline[b-078k7sg4eq] { height:190px; }
.reservations-loading__rules[b-078k7sg4eq] { height:180px; }
@keyframes reservations-shimmer-b-078k7sg4eq { to { background-position:-200% 0; } }
.reservations-stats[b-078k7sg4eq] { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.reservations-stats div[b-078k7sg4eq], .reservations-board[b-078k7sg4eq], .reservations-timeline[b-078k7sg4eq], .reservations-rules[b-078k7sg4eq] { background:var(--pt-surface); border:var(--pt-border-card); border-radius:var(--pt-radius-lg); box-shadow:none; }
.reservations-stats div[b-078k7sg4eq] { display:grid; gap:5px; padding:14px 16px; }
.reservations-stats div.reservations-stat--attention[b-078k7sg4eq] { border-color:oklch(from var(--pt-warning) l c h / .5); }
.reservations-stats span[b-078k7sg4eq], .reservations-board__head > span[b-078k7sg4eq], .reservations-board__foot[b-078k7sg4eq] { color:var(--pt-text-secondary); font-size:12.5px; }
.reservations-stats p[b-078k7sg4eq] { display:flex; align-items:baseline; gap:8px; margin:0; }
.reservations-stats strong[b-078k7sg4eq] { color:var(--pt-ink-900); font-family:var(--pt-font-display); font-size:26px; font-variant-numeric:tabular-nums; }
.reservations-stats small[b-078k7sg4eq] { color:var(--pt-unavailable-text); font-size:12.5px; }
.reservations-grid[b-078k7sg4eq] { display:grid; grid-template-columns:minmax(420px,1.4fr) minmax(280px,1fr); gap:20px; align-items:start; }
.reservations-board[b-078k7sg4eq] { overflow:hidden; }
.reservations-board__head[b-078k7sg4eq] { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:14px 18px; border-bottom:var(--pt-border-card); }
.reservations-board__head > span[b-078k7sg4eq] { margin-left:auto; }
.reservations-tabs[b-078k7sg4eq] { display:flex; gap:4px; padding:3px; border-radius:8px; background:var(--pt-cream-100); }
.reservations-tabs button[b-078k7sg4eq] { min-height:38px; padding:8px 14px; border:0; border-radius:6px; background:transparent; color:var(--pt-text-secondary); font:700 13px var(--pt-font-body); cursor:pointer; }
.reservations-tabs button.is-active[b-078k7sg4eq] { background:var(--pt-surface); color:var(--pt-ink-900); box-shadow:0 1px 3px oklch(from var(--pt-ink-900) l c h / .12); }
/* The body keeps a floor: the actions column is auto-sized, and the note's overflow-wrap:anywhere
   makes the body's min-content one letter wide, so without it a long note or name was squeezed
   to a letter per line next to a row of buttons. The actions wrap instead of taking the row. */
.reservations-board__row[b-078k7sg4eq] { display:grid; grid-template-columns:62px minmax(180px,1fr) auto; align-items:start; gap:14px; padding:15px 18px; border-top:var(--pt-border-row); }
.reservations-board__row:first-child[b-078k7sg4eq] { border-top:0; }
.reservations-card__time[b-078k7sg4eq] { display:grid; align-content:start; gap:var(--pt-space-1); }
.reservations-card__time strong[b-078k7sg4eq] { color:var(--pt-ink-900); font-family:var(--pt-font-display); font-size:var(--pt-text-subtitle); font-weight:800; line-height:var(--pt-leading-subtitle); font-variant-numeric:tabular-nums; }
.reservations-card__time span[b-078k7sg4eq] { color:var(--pt-unavailable-icon); font-size:11px; line-height:var(--pt-leading-caption); }
.reservations-card__body[b-078k7sg4eq] { min-width:0; }
.reservations-card__identity[b-078k7sg4eq] { display:flex; flex-wrap:wrap; align-items:center; gap:var(--pt-space-2); }
.reservations-card__identity > strong[b-078k7sg4eq] { min-width:0; overflow-wrap:anywhere; color:var(--pt-ink-900); font-size:var(--pt-text-body); font-weight:700; line-height:var(--pt-leading-body); }
.reservations-card__channel[b-078k7sg4eq] { display:inline-flex; padding:5px 7px; border-radius:5px; background:oklch(from var(--pt-success) l c h / .12); color:var(--pt-forest-600); font:800 8px var(--pt-font-mono); line-height:1; letter-spacing:.1em; text-transform:uppercase; }
.reservations-card__code[b-078k7sg4eq] { color:var(--pt-text-muted); font:700 var(--pt-text-caption) var(--pt-font-mono); letter-spacing:.04em; }
/* Search: the magnifier says what the box is before anything is typed, and the clear button
   undoes a search in one tap. The browser's own clear button is hidden so there is only one. */
.reservations-search[b-078k7sg4eq] { display:flex; align-items:center; gap:var(--pt-space-2); margin:12px 18px 0; min-height:42px; box-sizing:border-box; padding:0 6px 0 13px; border:var(--pt-border-card); border-radius:var(--pt-radius-md); background:var(--pt-app-bg); color:var(--pt-text-muted); cursor:text; transition:border-color var(--pt-dur-hover) var(--pt-ease-soft), box-shadow var(--pt-dur-hover) var(--pt-ease-soft); }
.reservations-search:hover[b-078k7sg4eq] { border-color:var(--pt-cream-300); }
.reservations-search:focus-within[b-078k7sg4eq] { border-color:var(--pt-forest-600); box-shadow:0 0 0 3px oklch(from var(--pt-forest-600) l c h / .15); color:var(--pt-forest-700); }
.reservations-search > .bi-search[b-078k7sg4eq] { flex:none; font-size:14px; }
.reservations-search input[b-078k7sg4eq] { flex:1; min-width:0; min-height:40px; border:0; outline:0; background:transparent; color:var(--pt-ink-900); font:inherit; font-family:var(--pt-font-body); font-size:13.5px; }
.reservations-search input[b-078k7sg4eq]::placeholder { color:var(--pt-text-muted); }
.reservations-search input[b-078k7sg4eq]::-webkit-search-cancel-button { appearance:none; }
.reservations-search__clear[b-078k7sg4eq] { display:grid; place-items:center; flex:none; width:30px; height:30px; border:0; border-radius:var(--pt-radius-sm); background:transparent; color:var(--pt-text-muted); font-size:13px; cursor:pointer; }
.reservations-search__clear:hover[b-078k7sg4eq] { background:var(--pt-row-hover); color:var(--pt-ink-900); }
.reservations-card__detail[b-078k7sg4eq], .reservations-card__capacity-warning[b-078k7sg4eq] { margin-top:var(--pt-space-1); font-size:var(--pt-text-caption); line-height:var(--pt-leading-caption); }
.reservations-card__detail[b-078k7sg4eq] { color:var(--pt-text-muted); }
.reservations-card__note[b-078k7sg4eq] { display:inline-block; max-width:100%; margin-top:var(--pt-space-2); padding:var(--pt-space-2); border-radius:var(--pt-radius-md); background:oklch(from var(--pt-warning) l c h / .12); color:var(--pt-on-warning); font-size:var(--pt-text-caption); line-height:var(--pt-leading-caption); overflow-wrap:anywhere; }
.reservations-card__capacity-warning[b-078k7sg4eq] { display:flex; align-items:flex-start; gap:var(--pt-space-1); color:var(--pt-danger); font-weight:700; }
.reservations-card__capacity-warning i[b-078k7sg4eq] { flex:none; }
.reservations-card__actions[b-078k7sg4eq] { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; max-width:232px; }
.reservations-action[b-078k7sg4eq] { display:inline-flex; align-items:center; justify-content:center; min-width:106px; min-height:44px; padding:10px 15px; border:1px solid var(--pt-radio-card-border); border-radius:9px; background:var(--pt-surface); color:var(--pt-text-strong); font:800 13.5px var(--pt-font-body); cursor:pointer; text-decoration:none; }
.reservations-action:disabled[b-078k7sg4eq] { cursor:not-allowed; opacity:.6; }
.reservations-action--approve[b-078k7sg4eq], .reservations-action--confirm[b-078k7sg4eq] { background:var(--pt-forest-700); color:var(--pt-cream-50); }
.reservations-action--decline[b-078k7sg4eq], .reservations-action--cancel[b-078k7sg4eq] { border-color:oklch(from var(--pt-danger) l c h / .4); background:var(--pt-surface); color:var(--pt-danger); }
.reservations-action--confirm-decline[b-078k7sg4eq] { background:var(--pt-danger); color:var(--pt-cream-50); }
.reservations-dayone[b-078k7sg4eq] { max-width:720px; padding:30px 32px 28px; border:var(--pt-border-card); border-radius:var(--pt-radius-lg); background:var(--pt-surface); box-shadow:none; }
.reservations-dayone__badge[b-078k7sg4eq] { margin-bottom:var(--pt-space-3); color:var(--pt-on-warning); font-family:var(--pt-font-mono); font-size:8.5px; letter-spacing:.12em; }
.reservations-dayone h2[b-078k7sg4eq] { margin:0 0 var(--pt-space-2); color:var(--pt-ink-900); font-family:var(--pt-font-display); font-size:22px; font-weight:800; letter-spacing:var(--pt-tracking-title); }
.reservations-dayone > p[b-078k7sg4eq] { max-width:56ch; margin:0 0 22px; color:var(--pt-text-secondary); font-size:14px; line-height:1.6; text-wrap:pretty; }
.reservations-dayone__tasks[b-078k7sg4eq] { display:grid; gap:var(--pt-space-2); }
.reservations-dayone__task[b-078k7sg4eq] { display:flex; align-items:center; gap:13px; padding:14px 16px; border:var(--pt-border-card); border-radius:10px; background:var(--pt-app-bg); }
.reservations-dayone__task i[b-078k7sg4eq] { flex:none; color:var(--pt-forest-600); font-size:16px; }
.reservations-dayone__task span[b-078k7sg4eq] { flex:1; min-width:0; }
.reservations-dayone__task strong[b-078k7sg4eq] { display:block; color:var(--pt-ink-900); font-family:var(--pt-font-display); font-size:14px; font-weight:700; }
.reservations-dayone__task small[b-078k7sg4eq] { display:block; margin-top:2px; color:var(--pt-text-secondary); font-size:12.5px; }
.reservations-dayone__cta[b-078k7sg4eq] { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:22px; }
.reservations-dayone__cta span[b-078k7sg4eq] { color:var(--pt-text-meta); font-size:12.5px; }
.reservations-board__empty[b-078k7sg4eq] { margin:0; padding:34px 18px; color:var(--pt-text-secondary); font-size:14px; text-align:center; }
.reservations-board__foot[b-078k7sg4eq] { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; padding:12px 18px; background:var(--pt-app-bg); }
.reservations-board__foot-note[b-078k7sg4eq] { color:var(--pt-unavailable-icon); font-size:12px; }
.reservations-side[b-078k7sg4eq] { display:grid; gap:20px; }
.reservations-timeline[b-078k7sg4eq] { padding:16px 18px; }
.reservations-timeline h2[b-078k7sg4eq], .reservations-rules h2[b-078k7sg4eq] { margin:0 0 13px; color:var(--pt-ink-900); font-family:var(--pt-font-display); font-size:15px; }
.reservations-timeline__empty[b-078k7sg4eq] { margin:0; color:var(--pt-text-secondary); font-size:13px; }
.reservations-slot[b-078k7sg4eq] { display:flex; align-items:center; gap:11px; margin-top:9px; }
.reservations-slot time[b-078k7sg4eq] { width:42px; color:var(--pt-text-strong); font-family:var(--pt-font-display); font-size:13px; font-variant-numeric:tabular-nums; }
.reservations-slot__track[b-078k7sg4eq] { flex:1; height:12px; overflow:hidden; border-radius:999px; background:var(--pt-cream-200); }
.reservations-slot__track span[b-078k7sg4eq] { display:block; height:100%; border-radius:inherit; }
.reservations-slot__track .is-quiet[b-078k7sg4eq] { background:var(--pt-success); }
.reservations-slot__track .is-busy[b-078k7sg4eq] { background:var(--pt-warning); }
.reservations-slot__track .is-full[b-078k7sg4eq] { background:var(--pt-danger); }
.reservations-slot__label[b-078k7sg4eq] { min-width:96px; white-space:nowrap; color:var(--pt-text-secondary); font-size:12px; text-align:right; font-variant-numeric:tabular-nums; }
.reservations-slot__state[b-078k7sg4eq] { display:block; color:var(--pt-on-danger); font-weight:800; }
.reservations-slot__state--busy[b-078k7sg4eq] { color:var(--pt-on-warning); }
.reservations-timeline__group[b-078k7sg4eq] { margin:14px 0 0; color:var(--pt-text-secondary); font:700 12px var(--pt-font-body); }
.reservations-timeline__group:first-of-type[b-078k7sg4eq] { margin-top:0; }
.reservations-rules[b-078k7sg4eq] { padding:16px 18px; }
.reservations-rules p[b-078k7sg4eq] { display:flex; align-items:flex-start; gap:10px; margin:0 0 11px; color:var(--pt-text-secondary); font-size:13px; line-height:1.5; }
.reservations-rules p:last-child[b-078k7sg4eq] { margin-bottom:0; }
.reservations-rules i[b-078k7sg4eq] { margin-top:3px; color:var(--pt-success); font-size:13px; }
/* dvh, not vh: a phone's dynamic toolbar and its virtual keyboard both shrink the visible area
   below 100vh, which put this panel's footer — and its primary action — out of reach. */
.reservations-modal[b-078k7sg4eq] { width:min(560px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:0; overflow:auto; border:var(--pt-border-card); border-radius:14px; background:var(--pt-app-bg); color:var(--pt-text-strong); box-shadow:0 30px 70px oklch(23.463% .021 156.521 / .35); }
/* showModal() focuses the first control, which drew the keyboard ring on "Walk-in" for a mouse
   open. The title takes the initial focus instead (tabindex=-1 + autofocus; Chrome ignores autofocus
   on the dialog element itself), is announced first, and needs no ring; Tab still reaches the controls. */
.reservations-modal__initial-focus:focus[b-078k7sg4eq] { outline:none; }
.reservations-new[b-078k7sg4eq] { width:min(600px,calc(100vw - 32px)); }
.reservations-modal[b-078k7sg4eq]::backdrop { background:oklch(from var(--pt-ink-900) l c h / .5); }
.reservations-modal section[b-078k7sg4eq] { display:flex; flex-direction:column; }
.reservations-modal__header[b-078k7sg4eq] { display:flex; gap:13px; padding:20px 22px 16px; border-bottom:var(--pt-border-card); }
.reservations-modal__header i[b-078k7sg4eq] { flex:none; margin-top:2px; color:var(--pt-forest-700); font-size:20px; }
.reservations-modal__header .reservations-modal__icon--decline[b-078k7sg4eq] { color:var(--pt-danger); }
.reservations-modal__header h2[b-078k7sg4eq] { margin:0; color:var(--pt-ink-900); font-family:var(--pt-font-display); font-size:20px; font-weight:800; }
.reservations-modal__header p[b-078k7sg4eq] { margin:5px 0 0; color:var(--pt-text-muted); font-size:14px; }
.reservations-modal__body[b-078k7sg4eq] { display:grid; gap:var(--pt-space-3); padding:18px 22px; }
.reservations-modal__choice-label[b-078k7sg4eq] { color:var(--pt-on-warning); font-family:var(--pt-font-mono); font-size:9px; letter-spacing:.12em; }
/* The prototype offers three tables; a real floor has thirty, and thirty stacked cards push the
   notify toggle and the confirm button off the modal. The list scrolls, the footer stays put.
   The decline modal keeps its three reasons well under this cap. */
.reservations-modal__choices[b-078k7sg4eq] { display:flex; flex-direction:column; gap:var(--pt-space-2); max-height:268px; overflow-y:auto; }
.reservations-modal__choice[b-078k7sg4eq] { display:flex; flex-direction:column; align-items:flex-start; gap:3px; flex:none; min-height:46px; padding:12px 15px; border:var(--pt-border-card); border-radius:10px; background:var(--pt-surface); color:var(--pt-text-strong); font-family:var(--pt-font-body); text-align:left; cursor:pointer; }
.reservations-modal__choice:disabled[b-078k7sg4eq] { cursor:not-allowed; opacity:.72; }
.reservations-modal__choice strong[b-078k7sg4eq] { font-size:15px; }
.reservations-modal__choice span[b-078k7sg4eq] { color:var(--pt-text-muted); font-size:13px; }
.reservations-modal__choice.is-selected[b-078k7sg4eq] { border:2px solid var(--pt-forest-700); background:var(--pt-available-tint); }
.reservations-modal__empty[b-078k7sg4eq] { margin:0; color:var(--pt-text-secondary); font-size:13px; }
.reservations-modal__warning[b-078k7sg4eq], .reservations-modal__error[b-078k7sg4eq] { display:flex; align-items:flex-start; gap:var(--pt-space-1); margin:0; font-size:13px; font-weight:700; }
.reservations-modal__warning[b-078k7sg4eq] { color:var(--pt-danger); }
.reservations-modal__error[b-078k7sg4eq] { color:var(--pt-danger); }
.reservations-modal__guest-notice[b-078k7sg4eq] { margin:0; color:var(--pt-text-secondary); font-size:13px; line-height:1.4; }
.reservations-modal__notify[b-078k7sg4eq] { display:flex; align-items:flex-start; gap:var(--pt-space-2); color:var(--pt-text-strong); font-size:13px; cursor:pointer; }
.reservations-modal__notify input[b-078k7sg4eq] { margin-top:2px; accent-color:var(--pt-forest-700); }
.reservations-modal__preview[b-078k7sg4eq] {
    display: grid;
    gap: var(--pt-space-1);
    margin-top: var(--pt-space-2);
    padding: var(--pt-space-3);
    border: 1px solid var(--pt-line-200);
    border-radius: var(--pt-radius-md);
    background: var(--pt-app-bg);
}
.reservations-modal__preview span[b-078k7sg4eq] { color: var(--pt-text-muted); font-size: 12px; font-weight: 800; }
.reservations-modal__preview p[b-078k7sg4eq] { margin: 0; color: var(--pt-text-strong); font-size: var(--pt-text-caption); line-height: 1.5; }
.reservations-modal__footer[b-078k7sg4eq] { display:flex; justify-content:flex-end; gap:10px; padding:16px 22px; border-top:var(--pt-border-card); background:var(--pt-cream-100); }
.reservations-new__kinds[b-078k7sg4eq] { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--pt-space-2); }
.reservations-new__gap[b-078k7sg4eq] { display:flex; align-items:flex-start; gap:var(--pt-space-2); margin:0; padding:var(--pt-space-3); border:1px solid oklch(from var(--pt-info) l c h / .26); border-radius:10px; background:oklch(from var(--pt-info) l c h / .08); color:var(--pt-text-secondary); font-size:13px; line-height:1.4; }
.reservations-new__gap i[b-078k7sg4eq] { flex:none; color:var(--pt-info); }
button:focus-visible[b-078k7sg4eq] { outline:3px solid oklch(from var(--pt-info) l c h / .45); outline-offset:2px; }
@media (max-width:1080px) { .reservations-grid[b-078k7sg4eq], .reservations-loading__grid[b-078k7sg4eq] { grid-template-columns:1fr; } .reservations-board__row[b-078k7sg4eq] { grid-template-columns:62px minmax(0,1fr); } .reservations-card__actions[b-078k7sg4eq] { grid-column:2; flex-wrap:wrap; min-width:0; } }
@media (max-width:900px) { .reservations-card__actions[b-078k7sg4eq] { width:100%; } }
@media (max-width:560px) { .reservations-new__row[b-078k7sg4eq] { grid-template-columns:1fr; } }
@media (max-width:700px) { .reservations-day-control[b-078k7sg4eq] { width:100%; margin-left:0; flex-wrap:wrap; } .reservations-date-button[b-078k7sg4eq] { flex:1; min-width:0; } .reservations-dayone[b-078k7sg4eq] { padding:22px 18px; } .reservations-dayone__task[b-078k7sg4eq] { align-items:flex-start; flex-wrap:wrap; } .reservations-dayone__task .reservations-action[b-078k7sg4eq] { width:100%; } .reservations-modal__header[b-078k7sg4eq], .reservations-modal__body[b-078k7sg4eq] { padding:var(--pt-space-4); } .reservations-modal__footer[b-078k7sg4eq] { padding:var(--pt-space-3) var(--pt-space-4); } }
@media (prefers-reduced-motion:reduce) { .reservations-loading span[b-078k7sg4eq] { animation:none; } }

/* Hover: neutral controls take the row tint, forest buttons deepen, danger buttons wash red.
   Never on disabled or already-selected controls. */
.reservations-icon-button[b-078k7sg4eq], .reservations-date-button[b-078k7sg4eq], .reservations-calendar__arrow[b-078k7sg4eq], .reservations-action[b-078k7sg4eq],
.reservations-tabs button[b-078k7sg4eq], .reservations-calendar__days button[b-078k7sg4eq], .reservations-calendar__today[b-078k7sg4eq],
.reservations-modal__choice[b-078k7sg4eq], .reservations-new__chip[b-078k7sg4eq] { transition: background-color var(--pt-dur-hover), border-color var(--pt-dur-hover), color var(--pt-dur-hover); }
.reservations-icon-button:hover:not(:disabled)[b-078k7sg4eq], .reservations-date-button:hover:not(:disabled)[b-078k7sg4eq], .reservations-calendar__arrow:hover:not(:disabled)[b-078k7sg4eq],
.reservations-action:hover:not(:disabled)[b-078k7sg4eq], .reservations-calendar__days button:hover:not(:disabled):not(.is-selected)[b-078k7sg4eq],
.reservations-modal__choice:hover:not(:disabled):not(.is-selected)[b-078k7sg4eq], .reservations-new__chip:hover:not(:disabled):not(.is-selected)[b-078k7sg4eq] { background: var(--pt-row-hover); }
.reservations-tabs button:hover:not(:disabled):not(.is-active)[b-078k7sg4eq] { background: var(--pt-row-hover); color: var(--pt-ink-900); }
.reservations-calendar__today:hover:not(:disabled)[b-078k7sg4eq] { background: oklch(from var(--pt-available-tint) calc(l - .03) c h); }
.reservations-action--approve:hover:not(:disabled)[b-078k7sg4eq], .reservations-action--confirm:hover:not(:disabled)[b-078k7sg4eq] { background: var(--pt-forest-600); }
.reservations-action--decline:hover:not(:disabled)[b-078k7sg4eq], .reservations-action--cancel:hover:not(:disabled)[b-078k7sg4eq] { background: oklch(from var(--pt-danger) l c h / .08); }
.reservations-action--confirm-decline:hover:not(:disabled)[b-078k7sg4eq] { background: oklch(from var(--pt-danger) calc(l - .06) c h); }
a.reservations-action:focus-visible[b-078k7sg4eq], .reservations-timeline__empty a:focus-visible[b-078k7sg4eq] { outline: 3px solid oklch(from var(--pt-info) l c h / .45); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .reservations-icon-button[b-078k7sg4eq], .reservations-date-button[b-078k7sg4eq], .reservations-calendar__arrow[b-078k7sg4eq], .reservations-action[b-078k7sg4eq],
    .reservations-tabs button[b-078k7sg4eq], .reservations-calendar__days button[b-078k7sg4eq], .reservations-calendar__today[b-078k7sg4eq],
    .reservations-modal__choice[b-078k7sg4eq], .reservations-new__chip[b-078k7sg4eq] { transition: none; }
}

/* Design tones the channel chip by the row's board state (gold pending / green confirmed / red closed). */
.reservations-card__channel--pending[b-078k7sg4eq] { background:oklch(from var(--pt-warning) l c h / .14); color:var(--pt-on-warning); }
.reservations-card__channel--closed[b-078k7sg4eq] { background:oklch(from var(--pt-danger) l c h / .12); color:var(--pt-danger); }

/* New-reservation table chips (◆ MESA) — the design's chip row, not the modal's stacked choices. */
.reservations-new__row[b-078k7sg4eq] { display:grid; grid-template-columns:1.4fr .8fr .8fr; gap:var(--pt-space-3); align-items:start; }
.reservations-new__row-error[b-078k7sg4eq] { margin-top:calc(-1 * var(--pt-space-2)); }
.reservations-new__tables[b-078k7sg4eq] { display:grid; gap:var(--pt-space-2); }
/* The prototype has five tables; a real floor can have thirty, so the row scrolls rather than
   pushing the note field and the save button off the modal. */
.reservations-new__chips[b-078k7sg4eq] { display:flex; flex-wrap:wrap; gap:var(--pt-space-2); max-height:148px; overflow-y:auto; }
.reservations-new__chip[b-078k7sg4eq] { min-height:44px; padding:10px 15px; border:var(--pt-border-card); border-radius:9px; background:var(--pt-surface); color:var(--pt-text-strong); font:700 13.5px var(--pt-font-body); cursor:pointer; }
.reservations-new__chip.is-selected[b-078k7sg4eq] { border-color:var(--pt-forest-700); background:var(--pt-forest-700); color:var(--pt-cream-50); }
.reservations-modal__hint[b-078k7sg4eq] { margin-right:auto; color:var(--pt-text-secondary); font-size:12.5px; }

/* Action confirmation toast — same shape as Tables.razor's .tables-toast. Bottom-inset only,
   floored at the toast's own 13px so a device with no home-indicator inset renders unchanged. */
.reservations-toast[b-078k7sg4eq] { position:fixed; left:50%; bottom:26px; z-index:70; display:flex; align-items:center; gap:10px; padding:13px 20px; padding-bottom:max(13px, env(safe-area-inset-bottom)); border:1px solid oklch(from var(--pt-moss-400) l c h / .45); border-radius:11px; background:var(--pt-forest-900); color:var(--pt-cream-50); font-size:15px; font-weight:700; box-shadow:var(--pt-shadow-panel); transform:translateX(-50%); }
.reservations-toast--hidden[b-078k7sg4eq] { display:none; }
.reservations-toast i[b-078k7sg4eq] { flex:none; font-size:16px; color:oklch(from var(--pt-success) 78% c h); }
.reservations-timeline__empty a[b-078k7sg4eq] { display:inline-block; margin-top:var(--pt-space-2); color:var(--pt-forest-700); font-weight:700; }
.reservations-timeline__empty a:hover[b-078k7sg4eq] { color:var(--pt-forest-600); text-decoration:underline; }

/* Intentional, visible control scroll — the one place the constraints permit horizontal scroll.
   Same anatomy as Kitchen's .kds__filters (09038cca): the row scrolls, each control keeps its
   full width, and nothing is hidden behind a truncation. min-width: 0 is required alongside
   overflow-x: auto — without it, this flex item's automatic min-width stays content-based and
   the row pushes .reservations-board__head wider instead of scrolling internally. */
@media (max-width: 700px) {
    .reservations-tabs[b-078k7sg4eq] { overflow-x: auto; max-width: 100%; min-width: 0; }
    .reservations-tabs button[b-078k7sg4eq] { flex: none; }
}

@media (hover: none) and (pointer: coarse) {
    .reservations-tabs button[b-078k7sg4eq] { min-height: var(--pt-action-min-height-touch); }
    .reservations-icon-button[b-078k7sg4eq] { width: var(--pt-action-min-height-touch); height: var(--pt-action-min-height-touch); }
    .reservations-date-button[b-078k7sg4eq] { min-height: var(--pt-action-min-height-touch); }
    .reservations-search[b-078k7sg4eq] { min-height: var(--pt-action-min-height-touch); }
    .reservations-search__clear[b-078k7sg4eq] { width: var(--pt-action-min-height-touch); height: var(--pt-action-min-height-touch); }
    .reservations-calendar__arrow[b-078k7sg4eq] { width: var(--pt-action-min-height-touch); height: var(--pt-action-min-height-touch); }
    .reservations-calendar__weekdays[b-078k7sg4eq],
    .reservations-calendar__days[b-078k7sg4eq] { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .reservations-calendar__days button[b-078k7sg4eq] { width: 100%; min-height: var(--pt-action-min-height-touch); }
    .reservations-calendar__today[b-078k7sg4eq] { min-height: var(--pt-action-min-height-touch); }
}

/* Same table, overlapping reservations: tables another live reservation holds at this time wear
   the "Reservada" blue (the same tokens as the Mesas label), chosen or not, so "reserved" reads the
   same on every screen; choosing one opens the amber warning, the only amber in the picker, which
   the host must acknowledge before the confirm button enables. */
.reservations-modal__choice-row[b-078k7sg4eq] { display:flex; align-items:center; justify-content:space-between; gap:var(--pt-space-3); flex-wrap:wrap; }
.reservations-reserved-legend[b-078k7sg4eq] { display:inline-flex; align-items:center; gap:6px; color:var(--pt-text-meta); font-size:12.5px; }
.reservations-reserved-legend i[b-078k7sg4eq] { color:var(--pt-reserved-fg); }
.reservations-modal__choice--table[b-078k7sg4eq] { flex-direction:row; align-items:center; justify-content:space-between; gap:var(--pt-space-3); }
.reservations-modal__choice-main[b-078k7sg4eq] { display:flex; flex-direction:column; gap:3px; min-width:0; }
.reservations-modal__choice-main span[b-078k7sg4eq] { color:var(--pt-text-muted); font-size:13px; }
.reservations-modal__choice--table.is-reserved[b-078k7sg4eq] { border-color:var(--pt-reserved-border); background:var(--pt-reserved-tint); }
.reservations-modal__choice--table.is-reserved.is-selected[b-078k7sg4eq] { border:2px solid var(--pt-reserved-fg); background:var(--pt-reserved-tint); }
.reservations-reserved[b-078k7sg4eq] { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:none; }
.reservations-modal__choice .reservations-reserved__tag[b-078k7sg4eq] { display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:999px; background:var(--pt-reserved-fg); color:var(--pt-surface); font-size:12px; font-weight:800; }
.reservations-modal__choice .reservations-reserved__who[b-078k7sg4eq] { color:var(--pt-reserved-fg); font-size:12.5px; font-weight:700; }

.reservations-new__chip[b-078k7sg4eq] { display:inline-flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:1px; }
.reservations-new__chip-name[b-078k7sg4eq] { display:inline-flex; align-items:center; gap:6px; }
.reservations-new__chip-slot[b-078k7sg4eq] { font-size:11.5px; font-weight:700; }
.reservations-new__chip.is-reserved[b-078k7sg4eq] { border-color:var(--pt-reserved-border); background:var(--pt-reserved-tint); color:var(--pt-reserved-fg); }
.reservations-new__chip.is-reserved.is-selected[b-078k7sg4eq] { border-color:var(--pt-reserved-fg); background:var(--pt-reserved-fg); color:var(--pt-cream-50); }

.reservations-overlap[b-078k7sg4eq] { display:grid; gap:var(--pt-space-3); padding:var(--pt-space-4); border:1px solid var(--pt-occupied-border); border-radius:12px; background:var(--pt-occupied-tint); color:var(--pt-on-warning); }
.reservations-overlap__head[b-078k7sg4eq] { display:flex; align-items:flex-start; gap:10px; }
.reservations-overlap__head > i[b-078k7sg4eq] { flex:none; font-size:18px; }
.reservations-overlap h3[b-078k7sg4eq] { margin:0 0 4px; font-family:var(--pt-font-display); font-size:16px; font-weight:800; }
.reservations-overlap p[b-078k7sg4eq] { margin:0; font-size:13.5px; line-height:1.45; }
.reservations-overlap__timeline[b-078k7sg4eq] { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:8px 12px; padding:12px 14px; border:1px solid var(--pt-occupied-border); border-radius:9px; background:var(--pt-surface); font-size:13px; }
.reservations-overlap__name[b-078k7sg4eq] { overflow:hidden; color:var(--pt-text-meta); font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.reservations-overlap__track[b-078k7sg4eq] { position:relative; height:18px; border-radius:4px; background:var(--pt-row-divider); }
.reservations-overlap__bar[b-078k7sg4eq] { position:absolute; top:0; bottom:0; border-radius:4px; background:var(--pt-reserved-fg); }
.reservations-overlap__bar.is-own[b-078k7sg4eq] { background:var(--pt-forest-700); }
.reservations-overlap__hatch[b-078k7sg4eq] { position:absolute; top:-3px; bottom:-3px; border:1.5px solid var(--pt-on-warning); border-radius:4px; background:repeating-linear-gradient(135deg, oklch(from var(--pt-warning) l c h / .55) 0 5px, transparent 5px 10px); }
.reservations-overlap__ticks[b-078k7sg4eq] { display:flex; justify-content:space-between; color:var(--pt-text-meta); font-size:11.5px; }
.reservations-overlap__ack[b-078k7sg4eq] { display:flex; align-items:center; gap:10px; min-height:44px; padding:0 12px; border:1px solid var(--pt-occupied-border); border-radius:9px; background:var(--pt-surface); color:var(--pt-ink-900); font-size:13.5px; font-weight:700; cursor:pointer; }
.reservations-overlap__ack input[b-078k7sg4eq] { width:18px; height:18px; margin:0; accent-color:var(--pt-on-warning); }
.reservations-action--overlap[b-078k7sg4eq] { background:var(--pt-on-warning); color:var(--pt-surface); }
.reservations-action--overlap:hover:not(:disabled)[b-078k7sg4eq] { background:oklch(from var(--pt-on-warning) calc(l - .06) c h); }

/* /Components/Pages/Settings/Settings.razor.rz.scp.css */
/* Capy "Configuración" — P19 Task 1: screen frame (save/discard header, section nav sidebar,
   placeholder panel shell, toast). Every value below is a --pt-* token; the two literals left (the
   sidebar's fixed 214px column, per the plan's own Step 4 CSS, and the 8px dirty dot) are
   dimensions the token set does not name — same precedent Tables.razor.css/QrCodes.razor.css
   already set for this migration.

   Save/Discard must stay reachable while a long section scrolls, so the header is sticky at every
   width. Above 1180px it sticks to the top of the viewport. At or below 1180px the shell top bar
   (TopBar.razor.css, sticky, z-index 200) is in the way, so the header sticks just under it at
   --pt-topbar-height instead of sliding beneath it. The sticky section nav clears the header with
   --settings-header-height, which the header also uses as its min-height so the two cannot drift. */

:is(.settings-header, .settings-nav)[b-wze7zez7ce] {
    --settings-header-height: 80px;
}

.settings-header[b-wze7zez7ce] {
    position: sticky;
    top: 0;
    z-index: 20;
    box-sizing: border-box;
    min-height: var(--settings-header-height);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pt-space-4);
    padding: var(--pt-space-3) 0;
    margin-bottom: var(--pt-space-6);
    background: var(--pt-surface);
    border-bottom: var(--pt-border-card);
}

.settings-header h1[b-wze7zez7ce] {
    margin: 0;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: var(--pt-tracking-display-l);
}

.settings-header p[b-wze7zez7ce] {
    margin: 3px 0 0;
    color: var(--pt-text-muted);
    font-size: 14px;
}

.settings-header__actions[b-wze7zez7ce] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-left: auto;
}

/* ── Two-column grid: 214px section nav + content ─────────────── */
.settings-grid[b-wze7zez7ce] {
    display: grid;
    grid-template-columns: 214px minmax(420px, 1fr);
    gap: var(--pt-space-6);
    align-items: start;
}

.settings-nav[b-wze7zez7ce] {
    position: sticky;
    top: calc(var(--settings-header-height) + var(--pt-space-4));
    display: grid;
    gap: 2px;
    padding: var(--pt-space-2);
    background: var(--pt-surface);
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-lg);
    overflow: hidden;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--pt-cream-300) transparent;
}

.settings-nav__item[b-wze7zez7ce] {
    display: flex;
    align-items: center;
    gap: var(--pt-space-2);
    min-height: 44px;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 0;
    border-radius: var(--pt-radius-md);
    background: transparent;
    color: var(--pt-text-strong);
    font: 700 14px var(--pt-font-body);
    text-align: left;
    cursor: pointer;
    transition: all var(--pt-dur-hover) var(--pt-ease-soft);
}

.settings-nav__item i[b-wze7zez7ce] { flex: none; width: 19px; font-size: 15px; }
.settings-nav__item span:first-of-type[b-wze7zez7ce] { flex: 1; }

.settings-nav__item:hover:not(.settings-nav__item--active)[b-wze7zez7ce] { background: var(--pt-app-bg); }

.settings-nav__item--active[b-wze7zez7ce] {
    background: var(--pt-forest-700);
    color: var(--pt-cream-50);
}

.settings-nav__item:focus-visible[b-wze7zez7ce] {
    outline: none;
    box-shadow: var(--pt-focus-ring);
}

/* Per-section dirty dot: gold normally, danger when the section is dirty AND blocked from saving
   (a missing required field in Datos, an invalid shift in Horarios, once Tasks 2/4 wire those gates
   through ISettingsSection.CanSave) — see IsSectionBlocked in Settings.razor. */
.settings-nav__dot[b-wze7zez7ce] {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pt-gold-500);
}

.settings-nav__dot--danger[b-wze7zez7ce] { background: var(--pt-danger); }

/* ── Section panels (Task 1: heading-only placeholders) ───────── */
.settings-panels[b-wze7zez7ce] {
    display: flex;
    flex-direction: column;
    gap: var(--pt-space-4);
    min-width: 0;
}

[b-wze7zez7ce] .settings-panel {
    width: 100%;
    box-sizing: border-box;
    background: var(--pt-surface);
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-lg);
}

/* Live-review fix: .settings-panel used to carry overflow: hidden purely so this header's own
   background respected the panel's rounded top corners — but that also clipped every InfoHint
   bubble inside the panel (Zona horaria, Fin del día operativo, Reservas). Rounding the one child
   that actually paints a background here replaces the clip; .settings-panel__body below has no
   background of its own, so it needs no matching treatment at the bottom. */
[b-wze7zez7ce] .settings-panel__header {
    padding: var(--pt-space-6) var(--pt-space-6) var(--pt-space-4);
    border-bottom: var(--pt-border-card);
    border-radius: var(--pt-radius-lg) var(--pt-radius-lg) 0 0;
    background: var(--pt-app-bg);
}

[b-wze7zez7ce] .settings-panel__header h2 {
    margin: 0;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-title);
    font-weight: 800;
    letter-spacing: var(--pt-tracking-title);
}

[b-wze7zez7ce] .settings-panel__header p {
    margin: var(--pt-space-1) 0 0;
    color: var(--pt-text-muted);
    max-width: 70ch;
    font-size: 14px;
    line-height: var(--pt-leading-body);
}

[b-wze7zez7ce] .settings-panel__body {
    padding: var(--pt-space-6);
}

/* ── Task 2 (Datos): 2-column field grid, prototype's .capy-field-row ─── */
[b-wze7zez7ce] .settings-field-row {
    display: grid;
    gap: var(--pt-space-8);
}

[b-wze7zez7ce] .settings-content-group {
    min-width: 0;
}

[b-wze7zez7ce] .settings-content-group > .field {
    align-self: start;
    align-content: start;
}

[b-wze7zez7ce] .settings-panel .capy-segmented, [b-wze7zez7ce] .settings-panel .capy-langpicker { justify-self: start; }

[b-wze7zez7ce] .field__control--compact {
    width: 96px;
    max-width: 100%;
}

[b-wze7zez7ce] .field__control--medium {
    width: min(100%, 320px);
}

/* Instagram: a fixed "@" inside the field, so the owner types only the username. */
[b-wze7zez7ce] .field__handle {
    position: relative;
    display: block;
    width: min(100%, 320px);
}

[b-wze7zez7ce] .field__handle-at {
    position: absolute;
    top: 50%;
    left: var(--pt-space-3);
    translate: 0 -50%;
    color: var(--pt-text-meta);
    font: 14px var(--pt-font-body);
    pointer-events: none;
}

[b-wze7zez7ce] .field__handle .field__control {
    width: 100%;
    padding-left: calc(var(--pt-space-3) + 1.1em);
}

[b-wze7zez7ce] .settings-group__title {
    grid-column: 1 / -1;
    margin: 0 0 var(--pt-space-4);
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-subtitle);
    font-weight: 800;
    line-height: var(--pt-leading-subtitle);
    letter-spacing: var(--pt-tracking-title);
}

[b-wze7zez7ce] .settings-group__title--device {
    margin-top: var(--pt-space-6);
    padding-top: var(--pt-space-6);
    border-top: var(--pt-border-row);
}

[b-wze7zez7ce] .settings-field-row > .settings-content-group {
    display: grid;
    grid-template-columns: minmax(0, 640px);
    gap: 0 var(--pt-space-4);
}

/* Live-review fix: the rules group's sentences ("cada 15 min... antes.", "...reservar online.")
   shared every other settings-field-row group's 640px column, narrow enough to drop the last word
   of a sentence onto its own line. Widened for this group only — same selector specificity as the
   rule above (two classes), so it must stay declared after it to win the cascade. */
[b-wze7zez7ce] .settings-field-row > .settings-content-group--reservation-rules {
    grid-template-columns: minmax(0, 720px);
}

/* Delivery y retiro: same readable column as the Reservas rules group, for the same reason. */
[b-wze7zez7ce] .settings-field-row > .settings-content-group--delivery {
    grid-template-columns: minmax(0, 720px);
}

[b-wze7zez7ce] .settings-content-group + .settings-content-group {
    padding-top: var(--pt-space-8);
    border-top: var(--pt-border-row);
}

[b-wze7zez7ce] .settings-field-row .field--wide {
    grid-column: 1 / -1;
}

[b-wze7zez7ce] .settings-reservas__toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pt-space-4);
}

[b-wze7zez7ce] .settings-reservas__toggle-row > span {
    display: grid;
    gap: var(--pt-space-1);
}

[b-wze7zez7ce] .settings-public-menu__url {
    display: flex;
    align-items: center;
    gap: var(--pt-space-2);
    width: min(100%, 480px);
    padding: 10px var(--pt-space-3);
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-md);
    background: var(--pt-cream-100);
}

[b-wze7zez7ce] .settings-public-menu__url > span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--pt-text-strong);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-wze7zez7ce] .settings-reservas__confirmation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pt-space-3);
}

@media (max-width: 900px) {
    [b-wze7zez7ce] .settings-field-row { grid-template-columns: 1fr; }
}

[b-wze7zez7ce] .horarios-day {
    padding: var(--pt-space-4) 0;
    border-bottom: var(--pt-border-row);
}

[b-wze7zez7ce] .horarios-day:first-child { padding-top: 0; }
[b-wze7zez7ce] .horarios-day:last-child { border-bottom: 0; }
[b-wze7zez7ce] .horarios-day__head {
    display: flex;
    align-items: center;
    gap: var(--pt-space-2);
}

[b-wze7zez7ce] .horarios-day__label {
    color: var(--pt-ink-900);
    font: 800 13.5px var(--pt-font-body);
}
[b-wze7zez7ce] .horarios-day__closed {
    margin: var(--pt-space-2) 0 0;
    color: var(--pt-text-meta);
    font-size: 13px;
}

[b-wze7zez7ce] .horarios-shifts {
    display: flex;
    flex-direction: column;
    gap: var(--pt-space-2);
    margin-top: var(--pt-space-2);
}
[b-wze7zez7ce] .horarios-day__add { margin-top: var(--pt-space-1); align-self: flex-start; }

/* ── Shared save/discard toast ─────────────────────────────────── */
.settings-toast[b-wze7zez7ce] {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: 70;
    display: flex;
    align-items: center;
    gap: var(--pt-space-2);
    padding: 13px 20px;
    /* Bottom-inset only: 13px is this toast's own vertical padding, kept as the floor so a
       device with no home-indicator inset (env() resolves to 0px, all of them today — see F5)
       renders identically to before. No horizontal counterpart: this is a centered pill, not an
       edge-anchored panel. */
    padding-bottom: max(13px, env(safe-area-inset-bottom));
    background: var(--pt-forest-900);
    border: 1px solid oklch(from var(--pt-moss-400) l c h / .45);
    border-radius: var(--pt-radius-lg);
    color: var(--pt-cream-100);
    font: 700 15px var(--pt-font-body);
    box-shadow: var(--pt-shadow-panel);
}

.settings-toast i[b-wze7zez7ce] { color: var(--pt-success); font-size: 16px; }

/* Confirm dialog — same bespoke shape as QrCodes.razor's regenerate-confirm modal
   (.qr-modal-overlay/.qr-modal), not the shared ConfirmDialog.razor component: no per-device
   "don't show again" skip is appropriate for a destructive action like this one. */
.settings-modal-overlay[b-wze7zez7ce] {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pt-space-6);
    /* Safe-area floor only today — see MainLayout.razor.css's F5 note: env() resolves to 0px
       without viewport-fit=cover, so this is exactly --pt-space-4 on every device now. */
    padding-bottom: max(var(--pt-space-4), env(safe-area-inset-bottom));
    padding-left: max(var(--pt-space-4), env(safe-area-inset-left));
    padding-right: max(var(--pt-space-4), env(safe-area-inset-right));
    background: oklch(from var(--pt-forest-900) l c h / .5);
}

.settings-modal[b-wze7zez7ce] {
    width: min(420px, 92vw);
    overflow: hidden;
    border: var(--pt-border-card);
    border-radius: 14px;
    background: var(--pt-surface);
    box-shadow: var(--pt-shadow-panel);
    animation: settings-modal-rise-b-wze7zez7ce var(--pt-dur-base) var(--pt-ease-soft) both;
}

@keyframes settings-modal-rise-b-wze7zez7ce { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .settings-modal[b-wze7zez7ce] { animation: none; }
}

.settings-modal__head[b-wze7zez7ce] { padding: 18px 20px 0; }

.settings-modal__head h3[b-wze7zez7ce] {
    margin: 0;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.settings-modal__head p[b-wze7zez7ce] {
    margin: var(--pt-space-2) 0 0;
    color: var(--pt-text-muted);
    font-size: 14px;
    line-height: var(--pt-leading-body);
}

/* Dar de baja refused while takeaway orders are open: the reason, not muted help text. */
.settings-modal__head p.field__error[b-wze7zez7ce] { color: var(--pt-danger); }

/* Borrar cuenta's "type the name to confirm" field, between the head text and the actions bar —
   only the elevated delete dialog has a form field, Dar de baja's plain confirm dialog doesn't
   use this class. */
.settings-modal__body[b-wze7zez7ce] { padding: var(--pt-space-3) 20px 0; }
.settings-modal__body .field[b-wze7zez7ce] { margin-bottom: 0; }

.settings-modal__actions[b-wze7zez7ce] {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 18px 20px 20px;
}

.settings-modal__actions .capy-form-action[b-wze7zez7ce] { min-height: 44px; padding: 11px var(--pt-space-4); }

/* Scoped under .settings-modal__actions so it outranks the grouped sizing rule above, which also
   sets a colour — same fix QrCodes.razor.css applies to its own qr-modal__confirm. */
.settings-modal__actions .settings-modal__confirm[b-wze7zez7ce] {
    border-color: var(--pt-danger);
    background: var(--pt-danger);
    color: var(--pt-cream-50);
}

/* Keep the destructive action visibly dormant until the typed confirmation matches. Including
   :disabled:hover in the selector neutralizes the shared action button's hover treatment. */
.settings-modal__actions .settings-modal__confirm:disabled[b-wze7zez7ce],
.settings-modal__actions .settings-modal__confirm:disabled:hover[b-wze7zez7ce] {
    border-color: oklch(from var(--pt-danger) l c h / .38);
    background: oklch(from var(--pt-danger) l c h / .18);
    color: oklch(from var(--pt-danger) l c h / .72);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Below the desktop tier the shell top bar is sticky (TopBar.razor.css, same breakpoint), so this
   header sticks beneath it; --pt-topbar-height is the bar's own height token. */
@media (max-width: 1180px) {
    .settings-header[b-wze7zez7ce] { top: var(--pt-topbar-height); }
    .settings-nav[b-wze7zez7ce] { top: calc(var(--pt-topbar-height) + var(--settings-header-height) + var(--pt-space-4)); }
}

@media (max-width: 1120px) {
    .settings-grid[b-wze7zez7ce] { grid-template-columns: 1fr; }

    .settings-nav[b-wze7zez7ce] {
        position: static;
        display: flex;
        gap: var(--pt-space-1);
        padding: var(--pt-space-1);
    }

    .settings-nav__item[b-wze7zez7ce] {
        flex: 0 0 auto;
        min-height: 40px;
        white-space: nowrap;
    }
}

@media (max-width: 760px) {
    /* Sticky on phones too, so keep it compact: no subhead, tighter padding. */
    .settings-header[b-wze7zez7ce] { align-items: center; min-height: 0; gap: var(--pt-space-2); padding: var(--pt-space-2) 0; margin-bottom: var(--pt-space-4); }
    .settings-header h1[b-wze7zez7ce] { font-size: 20px; }
    .settings-header p[b-wze7zez7ce] { display: none; }
    .settings-header__actions[b-wze7zez7ce] { flex: 1 1 auto; margin-left: 0; }
    .settings-header__actions .capy-form-action[b-wze7zez7ce] { flex: 1; }
    [b-wze7zez7ce] .settings-panel__header, [b-wze7zez7ce] .settings-panel__body { padding-inline: var(--pt-space-4); }
    [b-wze7zez7ce] .settings-field-row > .settings-content-group,
    [b-wze7zez7ce] .settings-reservas__confirmation { grid-template-columns: 1fr; }
}

/* ── Cambio de idioma del panel: esqueleto ────────────────────────────────────────────────────
   Changing the panel language is not an ordinary save. The `lang` claim lives in the auth cookie,
   so SetLanguagePreferenceAsync has to end in a hard reload through /Account/RefreshClaims, and
   between the click and the new document there is a gap this screen used to spend blank.

   `.lang-swapping` (set on both screen roots by SwapClass while that is in flight) turns every
   localized string on the screen into a shimmer bar and leaves everything else alone. The ramp
   itself is --pt-shimmer / --pt-shimmer-inverse in capy-tokens.css — the nav rail paints the same
   treatment off the same class from app.css, which is why they are tokens and not local values.

   No timer and no teardown: the browser keeps painting this document until the new one commits, so
   the shimmer lasts exactly as long as the round trip and dies with the page.

   Which nodes it reaches is a list of design-system class names rather than a marker attribute on
   every string, because the alternative is retrofitting a wrapper span onto ~200 call sites. The
   list is therefore this screen's, and a new kind of localized row needs adding to it. Three rules
   it must keep:
     · Structure never shimmers. Cards, borders, inputs and icons stay put — a screen that dissolves
       reads as broken, not as translating.
     · User data never shimmers. The email address, the restaurant name and every amount are not
       translated, so showing them as loading would be a lie about what is happening.
     · The language picker never shimmers. "Español" and "English" are endonyms, and its thumb is
       already answering. */
.lang-swapping h1[b-wze7zez7ce],
.lang-swapping .settings-header p[b-wze7zez7ce],
.lang-swapping .settings-nav__item span:first-of-type[b-wze7zez7ce],
.lang-swapping .settings-panel__header h2[b-wze7zez7ce] {
    width: fit-content;
    border-radius: 6px;
    color: transparent;
    background-image: var(--pt-shimmer);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: var(--pt-shimmer-animation);
}

.lang-swapping .settings-nav__item--active span:first-of-type[b-wze7zez7ce] {
    background-image: var(--pt-shimmer-inverse);
}

/* Buttons keep their box — border, height, fill — and shimmer a bar where the label was. Doing it
   with ::before instead of on the button itself is what keeps the structure rule above true, and it
   costs no markup: the 22 .capy-form-action labels on this screen are bare text nodes. */
.lang-swapping .capy-form-action[b-wze7zez7ce] {
    position: relative;
    color: transparent;
}

.lang-swapping .capy-form-action > i[b-wze7zez7ce] {
    visibility: hidden;
}

.lang-swapping .capy-form-action[b-wze7zez7ce]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--pt-space-3);
    right: var(--pt-space-3);
    height: 9px;
    transform: translateY(-50%);
    border-radius: 6px;
    background-image: var(--pt-shimmer);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: var(--pt-shimmer-animation);
}

.lang-swapping .capy-form-action--primary[b-wze7zez7ce]::before {
    background-image: var(--pt-shimmer-inverse);
}

@media (hover: none) and (pointer: coarse) {
    .settings-nav__item[b-wze7zez7ce] { min-height: var(--pt-action-min-height-touch); }
}

/* Sentence rules, inline inputs, "advanced" disclosure and the icon-only remove button are shared by
   the Reservas and Delivery y retiro panels, so they live here rather than in either panel. */
[b-wze7zez7ce] .settings-reservas__rule {
    display: grid;
    gap: var(--pt-space-1);
    padding: var(--pt-space-4) 0;
    border-bottom: var(--pt-border-row);
}

[b-wze7zez7ce] .settings-reservas__eyebrow {
    color: var(--pt-text-muted);
    font: 800 12px var(--pt-font-body);
    letter-spacing: .04em;
    text-transform: uppercase;
}

[b-wze7zez7ce] .settings-reservas__sentence {
    margin: 0;
    color: var(--pt-text-strong);
    font-size: var(--pt-text-body);
    line-height: 2.6;
}

[b-wze7zez7ce] .settings-reservas__inline {
    min-height: 40px;
    margin: 0 var(--pt-space-1);
    padding: 0 var(--pt-space-2);
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-md);
    background: var(--pt-cream-50);
    color: var(--pt-ink-900);
    font: 700 15px var(--pt-font-body);
}

[b-wze7zez7ce] .settings-reservas__inline:focus { outline: 0; border-color: var(--pt-forest-600); box-shadow: var(--pt-focus-ring); }
[b-wze7zez7ce] .settings-reservas__inline--number { width: 64px; box-sizing: border-box; text-align: center; }

[b-wze7zez7ce] .settings-reservas__advanced { padding-top: var(--pt-space-3); }
[b-wze7zez7ce] .settings-reservas__advanced summary {
    display: inline-flex;
    align-items: center;
    list-style: none;
    color: var(--pt-forest-600);
    font-weight: 800;
    cursor: pointer;
}
[b-wze7zez7ce] .settings-reservas__advanced summary::-webkit-details-marker { display: none; }

/* inline-flex above drops the native disclosure triangle, so it's redrawn by hand here — a
   rotating chevron rather than the browser's own marker, which no longer renders at all once the
   summary is flex/inline-flex. */
[b-wze7zez7ce] .settings-reservas__advanced summary::before {
    content: "";
    width: 8px;
    height: 8px;
    margin-right: var(--pt-space-2);
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--pt-dur-quick) ease;
}
[b-wze7zez7ce] .settings-reservas__advanced[open] summary::before { transform: rotate(45deg); }
[b-wze7zez7ce] .settings-reservas__advanced summary:focus-visible { outline: none; box-shadow: var(--pt-focus-ring); border-radius: var(--pt-radius-sm); }

/* Touch sizing follows the device, not the viewport: a 44px target is for a finger, and a
   finger is what `pointer: coarse` reports. */
@media (hover: none) and (pointer: coarse) {
    [b-wze7zez7ce] .settings-reservas__advanced summary { min-height: var(--pt-action-min-height-touch); }
    [b-wze7zez7ce] .settings-reservas__inline { min-height: var(--pt-action-min-height-touch); }
}

[b-wze7zez7ce] .reservas-window__remove {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    border-radius: var(--pt-radius-md);
    background: transparent;
    color: var(--pt-danger);
    cursor: pointer;
}

[b-wze7zez7ce] .reservas-window__remove:hover { background: oklch(from var(--pt-danger) l c h / .08); }
[b-wze7zez7ce] .reservas-window__remove:focus-visible { outline: none; box-shadow: var(--pt-focus-ring); }

@media (prefers-reduced-motion: reduce) {
    [b-wze7zez7ce] .settings-reservas__advanced summary::before { transition: none; }
}
/* /Components/Pages/Settings/SettingsAvisosPanel.razor.rz.scp.css */
/* ── Task 6 (Avisos): restaurant policy + per-device diagnostics ────── */
.settings-avisos[b-pjct2ghfdl] {
    display: grid;
    gap: 0;
}

.settings-avisos__row[b-pjct2ghfdl] {
    display: flex;
    align-items: center;
    gap: var(--pt-space-3);
    margin-bottom: 0;
    padding: var(--pt-space-4) 0;
    border-bottom: var(--pt-border-row);
}

.settings-avisos__select[b-pjct2ghfdl] {
    width: auto;
    min-width: 7rem;
    flex: none;
}


.settings-avisos__copy[b-pjct2ghfdl] {
    display: grid;
    flex: 1;
    gap: var(--pt-space-1);
    min-width: 0;
}

.settings-avisos__status[b-pjct2ghfdl] { flex: none; }
.settings-avisos__status--up[b-pjct2ghfdl] { color: var(--pt-success); }
.settings-avisos__status--down[b-pjct2ghfdl] { color: var(--pt-danger); }

.settings-avisos__test[b-pjct2ghfdl] {
    display: flex;
    align-items: center;
    gap: var(--pt-space-3);
    margin-bottom: 0;
    padding-top: var(--pt-space-4);
}

@media (max-width: 900px) {
    .settings-avisos__test[b-pjct2ghfdl] { align-items: flex-start; flex-direction: column; }
}

/* Language swap: the shimmer for this panel's localized strings (rationale in Settings.razor.css). */
.lang-swapping .settings-panel__header h2[b-pjct2ghfdl],
.lang-swapping .settings-panel__header p[b-pjct2ghfdl],
.lang-swapping .settings-group__title[b-pjct2ghfdl],
.lang-swapping .field__label[b-pjct2ghfdl],
.lang-swapping .field__help[b-pjct2ghfdl] {
    width: fit-content;
    border-radius: 6px;
    color: transparent;
    background-image: var(--pt-shimmer);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: var(--pt-shimmer-animation);
}

/* Badges and icons riding inside a shimmering label would otherwise float on top of the bar. */
.lang-swapping .field__label > *[b-pjct2ghfdl],
.lang-swapping .settings-group__title > *[b-pjct2ghfdl] {
    visibility: hidden;
}

.lang-swapping .capy-form-action[b-pjct2ghfdl] {
    position: relative;
    color: transparent;
}

.lang-swapping .capy-form-action > i[b-pjct2ghfdl] {
    visibility: hidden;
}

.lang-swapping .capy-form-action[b-pjct2ghfdl]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--pt-space-3);
    right: var(--pt-space-3);
    height: 9px;
    transform: translateY(-50%);
    border-radius: 6px;
    background-image: var(--pt-shimmer);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: var(--pt-shimmer-animation);
}
/* /Components/Pages/Settings/SettingsCobrosPanel.razor.rz.scp.css */
.settings-cobros__modes[b-276itk22yi] {
    display: grid;
    grid-template-columns: minmax(0, 680px);
    gap: var(--pt-space-3);
}

.settings-cobros__modes .capy-radio-card[b-276itk22yi] {
    align-items: flex-start;
    min-height: 100%;
}

.settings-cobros__modes .capy-radio-card__description[b-276itk22yi] {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
}

.settings-cobros__tip-editor[b-276itk22yi] {
    display: flex;
    align-items: end;
    gap: var(--pt-space-2);
}

.settings-cobros__tip-editor .field[b-276itk22yi] { margin-bottom: 0; }
.settings-cobros__tip-editor .capy-form-action[b-276itk22yi] { margin-bottom: var(--pt-space-1); }

.settings-cobros__add-tip[b-276itk22yi] {
    width: var(--pt-action-min-height);
    min-width: var(--pt-action-min-height);
    padding: 0;
    border-color: var(--pt-forest-700);
    background: var(--pt-forest-700);
    color: var(--pt-cream-50);
    animation: settings-tip-action-in-b-276itk22yi 180ms cubic-bezier(.16, 1, .3, 1) backwards;
    transition:
        background-color 260ms cubic-bezier(.16, 1, .3, 1),
        border-color 260ms cubic-bezier(.16, 1, .3, 1),
        transform var(--pt-dur-hover) var(--pt-ease-soft),
        box-shadow var(--pt-dur-hover) var(--pt-ease-soft);
}

.settings-cobros__add-tip[data-state="success"][b-276itk22yi] {
    border-color: var(--pt-success);
    background: var(--pt-success);
}

.settings-cobros__add-tip:disabled[b-276itk22yi] {
    cursor: default;
    opacity: 1;
}

.settings-cobros__icon-swap[b-276itk22yi] {
    position: relative;
    display: inline-grid;
    place-items: center;
}

.settings-cobros__icon-swap [data-icon][b-276itk22yi] {
    grid-area: 1 / 1;
    transition:
        opacity 260ms cubic-bezier(.16, 1, .3, 1),
        filter 260ms cubic-bezier(.16, 1, .3, 1),
        transform 260ms cubic-bezier(.16, 1, .3, 1);
}

.settings-cobros__icon-swap[data-state="add"] [data-icon="add"][b-276itk22yi],
.settings-cobros__icon-swap[data-state="success"] [data-icon="success"][b-276itk22yi] {
    opacity: 1;
    filter: blur(0);
    transform: scale(1) rotate(0deg);
}

.settings-cobros__icon-swap[data-state="add"] [data-icon="success"][b-276itk22yi] {
    opacity: 0;
    filter: blur(2px);
    transform: scale(.35) rotate(-20deg);
}

.settings-cobros__icon-swap[data-state="success"] [data-icon="add"][b-276itk22yi] {
    opacity: 0;
    filter: blur(2px);
    transform: scale(.35) rotate(20deg);
    animation: settings-tip-plus-out-b-276itk22yi 300ms cubic-bezier(.4, 0, .2, 1) both;
}

.settings-cobros__icon-swap[data-state="success"] [data-icon="success"][b-276itk22yi] {
    animation: settings-tip-check-in-b-276itk22yi 300ms cubic-bezier(.16, 1, .3, 1) both;
}

.settings-content-group--payments[b-276itk22yi] { max-width: 560px; }
.settings-content-group--currency[b-276itk22yi] { max-width: 560px; }

.settings-cobros__suggestions[b-276itk22yi] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pt-space-2);
}

.settings-cobros__tip-chip[b-276itk22yi] {
    color: var(--pt-text-strong);
    font-variant-numeric: tabular-nums;
}

.settings-cobros__tip-chip .bi-x-lg[b-276itk22yi] {
    color: var(--pt-text-muted);
    transition: color var(--pt-dur-hover) var(--pt-ease-soft);
}

.settings-cobros__tip-chip:hover .bi-x-lg[b-276itk22yi],
.settings-cobros__tip-chip:focus-visible .bi-x-lg[b-276itk22yi] { color: var(--pt-danger); }

@keyframes settings-tip-action-in-b-276itk22yi {
    from {
        opacity: 0;
        filter: blur(2px);
        transform: scale(.82);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }
}

@keyframes settings-tip-plus-out-b-276itk22yi {
    from {
        opacity: 1;
        filter: blur(0);
        transform: scale(1) rotate(0deg);
    }
    to {
        opacity: 0;
        filter: blur(2px);
        transform: scale(.35) rotate(20deg);
    }
}

@keyframes settings-tip-check-in-b-276itk22yi {
    from {
        opacity: 0;
        filter: blur(2px);
        transform: scale(.35) rotate(-20deg);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: scale(1) rotate(0deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .settings-cobros__add-tip[b-276itk22yi] { animation: none; }

    .settings-cobros__icon-swap [data-icon][b-276itk22yi] {
        animation: none !important;
        transition: opacity 100ms linear;
        filter: none;
        transform: none;
    }
}

@media (max-width: 760px) {
    .settings-cobros__modes[b-276itk22yi] { grid-template-columns: 1fr; }
}

/* Language swap: the shimmer for this panel's localized strings (rationale in Settings.razor.css). */
.lang-swapping .settings-panel__header h2[b-276itk22yi],
.lang-swapping .settings-panel__header p[b-276itk22yi],
.lang-swapping .settings-group__title[b-276itk22yi],
.lang-swapping .field__label[b-276itk22yi],
.lang-swapping .field__help[b-276itk22yi] {
    width: fit-content;
    border-radius: 6px;
    color: transparent;
    background-image: var(--pt-shimmer);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: var(--pt-shimmer-animation);
}

/* Badges and icons riding inside a shimmering label would otherwise float on top of the bar. */
.lang-swapping .field__label > *[b-276itk22yi],
.lang-swapping .settings-group__title > *[b-276itk22yi] {
    visibility: hidden;
}

.lang-swapping .capy-form-action[b-276itk22yi] {
    position: relative;
    color: transparent;
}

.lang-swapping .capy-form-action > i[b-276itk22yi] {
    visibility: hidden;
}

.lang-swapping .capy-form-action[b-276itk22yi]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--pt-space-3);
    right: var(--pt-space-3);
    height: 9px;
    transform: translateY(-50%);
    border-radius: 6px;
    background-image: var(--pt-shimmer);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: var(--pt-shimmer-animation);
}

.settings-cobros__currency[b-276itk22yi] { margin: 0; color: var(--pt-ink-900); font: 700 14px var(--pt-font-body); }
/* /Components/Pages/Settings/SettingsCuentaPanel.razor.rz.scp.css */
/* ── Cuenta: Dar de baja / Borrar cuenta ───────────────────────── */
.settings-cuenta[b-op792cwoc2] {
    display: grid;
    gap: 0;
}

.settings-cuenta .settings-content-group[b-op792cwoc2] {
    display: grid;
    grid-template-columns: minmax(0, 560px);
    gap: 0 var(--pt-space-4);
}

.settings-cuenta .capy-form-action[b-op792cwoc2] { justify-self: start; }

.settings-danger-zone[b-op792cwoc2] {
    display: grid;
    gap: var(--pt-space-4);
    padding: var(--pt-space-6);
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-lg);
    background: var(--pt-surface);
}

.settings-danger-zone .settings-group__title[b-op792cwoc2] { color: var(--pt-ink-900); }

.settings-cuenta__copy[b-op792cwoc2] { display: grid; flex: 1; gap: var(--pt-space-1); min-width: 0; }
.settings-cuenta__title[b-op792cwoc2] { color: var(--pt-ink-900); font: 700 15px var(--pt-font-display); }
.settings-cuenta__reversible[b-op792cwoc2] { color: var(--pt-on-success); font-size: var(--pt-text-caption); font-weight: 700; }
.settings-cuenta__deactivate[b-op792cwoc2] { padding-bottom: var(--pt-space-4); border-bottom: var(--pt-border-row); }

.settings-danger-callout[b-op792cwoc2] {
    display: flex;
    gap: var(--pt-space-4);
    padding: 20px;
    border: 1px solid oklch(from var(--pt-danger) l c h / .35);
    border-radius: var(--pt-radius-lg);
    background: var(--pt-danger-surface);
}

.settings-danger-callout__mark[b-op792cwoc2] {
    display: inline-flex; flex: none; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--pt-radius-pill);
    background: oklch(from var(--pt-danger) l c h / .10); color: var(--pt-danger);
}

.settings-danger-callout__title[b-op792cwoc2] { color: var(--pt-on-danger); font: 800 16px var(--pt-font-display); }
.settings-danger-callout__body[b-op792cwoc2] { color: var(--pt-text-strong); font-size: var(--pt-text-caption); line-height: 1.5; }
.settings-danger-callout__warning[b-op792cwoc2] { color: var(--pt-on-danger); font-size: var(--pt-text-caption); font-weight: 800; }
.settings-danger-callout .capy-form-action[b-op792cwoc2] { align-self: center; }

@media (max-width: 900px) {
    .settings-danger-callout[b-op792cwoc2] { flex-direction: column; }
    .settings-danger-callout .capy-form-action[b-op792cwoc2] { align-self: flex-start; }
}

.settings-cuenta__notice[b-op792cwoc2] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    padding: var(--pt-space-3) 13px;
    border: 1px solid oklch(from var(--pt-warning) l c h / .3);
    border-radius: 10px;
    background: oklch(from var(--pt-warning) l c h / .12);
    color: var(--pt-on-warning);
    font-size: var(--pt-text-caption);
    font-weight: 700;
    line-height: 1.55;
}

.settings-cuenta__notice i[b-op792cwoc2] { flex: none; font-size: 15px; }

@media (max-width: 760px) {
    .settings-cuenta .settings-content-group[b-op792cwoc2] { grid-template-columns: 1fr; }
}

/* Language swap: the shimmer for this panel's localized strings (rationale in Settings.razor.css). */
.lang-swapping .settings-panel__header h2[b-op792cwoc2],
.lang-swapping .settings-group__title[b-op792cwoc2],
.lang-swapping .field__label[b-op792cwoc2],
.lang-swapping .field__help[b-op792cwoc2] {
    width: fit-content;
    border-radius: 6px;
    color: transparent;
    background-image: var(--pt-shimmer);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: var(--pt-shimmer-animation);
}

/* Badges and icons riding inside a shimmering label would otherwise float on top of the bar. */
.lang-swapping .field__label > *[b-op792cwoc2],
.lang-swapping .settings-group__title > *[b-op792cwoc2] {
    visibility: hidden;
}

.lang-swapping .capy-form-action[b-op792cwoc2] {
    position: relative;
    color: transparent;
}

.lang-swapping .capy-form-action > i[b-op792cwoc2] {
    visibility: hidden;
}

.lang-swapping .capy-form-action[b-op792cwoc2]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--pt-space-3);
    right: var(--pt-space-3);
    height: 9px;
    transform: translateY(-50%);
    border-radius: 6px;
    background-image: var(--pt-shimmer);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: var(--pt-shimmer-animation);
}
/* /Components/Pages/Settings/SettingsDatosPanel.razor.rz.scp.css */
.settings-datos__label-row[b-4qgrbgkj6a] { display: inline-flex; align-items: center; gap: var(--pt-space-1); }
.settings-datos__chips[b-4qgrbgkj6a] { display: flex; flex-wrap: wrap; gap: var(--pt-space-2); }
.settings-datos__chip[b-4qgrbgkj6a] {
    min-height: var(--pt-action-min-height);
    padding: 0 14px;
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-pill);
    background: var(--pt-surface);
    color: var(--pt-text-secondary);
    font: 700 var(--pt-text-caption) var(--pt-font-body);
    cursor: pointer;
}
.settings-datos__chip[aria-checked="true"][b-4qgrbgkj6a] { border-color: var(--pt-olive-500); background: var(--pt-radio-selected); color: var(--pt-on-success); }
.settings-datos__chip:focus-visible[b-4qgrbgkj6a] { outline: none; box-shadow: var(--pt-focus-ring); }

@media (hover: none) and (pointer: coarse) {
    .settings-datos__chip[b-4qgrbgkj6a] { min-height: var(--pt-action-min-height-touch); }
}

/* Language swap: the shimmer for this panel's localized strings (rationale in Settings.razor.css). */
.lang-swapping .settings-panel__header h2[b-4qgrbgkj6a],
.lang-swapping .settings-panel__header p[b-4qgrbgkj6a],
.lang-swapping .settings-group__title[b-4qgrbgkj6a],
.lang-swapping .field__label[b-4qgrbgkj6a],
.lang-swapping .field__help[b-4qgrbgkj6a] {
    width: fit-content;
    border-radius: 6px;
    color: transparent;
    background-image: var(--pt-shimmer);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: var(--pt-shimmer-animation);
}

/* Badges and icons riding inside a shimmering label would otherwise float on top of the bar. */
.lang-swapping .field__label > *[b-4qgrbgkj6a],
.lang-swapping .settings-group__title > *[b-4qgrbgkj6a] {
    visibility: hidden;
}

/* Address search: the same look as the delivery search it replaced (scoped CSS does not cross panels). */
.settings-datos__search[b-4qgrbgkj6a] { position: relative; }
.settings-datos__location[b-4qgrbgkj6a] { margin: var(--pt-space-2) 0 0; display: flex; align-items: center; gap: var(--pt-space-3); flex-wrap: wrap; font-size: var(--pt-text-caption); }
.settings-datos__chip[b-4qgrbgkj6a] { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; padding: 3px 8px;
    border-radius: var(--pt-radius-chip); background: var(--pt-available-tint); color: var(--pt-on-success); white-space: nowrap; }
.settings-datos__suggestions[b-4qgrbgkj6a] { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; list-style: none; margin: 4px 0 0; padding: 4px;
    background: var(--pt-surface); border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-md); box-shadow: var(--pt-shadow-popover); }
.settings-datos__suggestions button[b-4qgrbgkj6a] { all: unset; display: block; width: 100%; padding: var(--pt-space-2) var(--pt-space-3); border-radius: var(--pt-radius-sm); cursor: pointer; }
.settings-datos__suggestions button:hover[b-4qgrbgkj6a], .settings-datos__suggestions button:focus-visible[b-4qgrbgkj6a] { background: var(--pt-row-hover); }
.settings-datos__search-actions[b-4qgrbgkj6a] { display: flex; flex-wrap: wrap; gap: var(--pt-space-2); margin-top: var(--pt-space-2); }
.settings-datos__here[aria-busy] i[b-4qgrbgkj6a] { animation: settings-datos-pulse-b-4qgrbgkj6a 1.1s var(--pt-ease-glide) infinite alternate; }
@keyframes settings-datos-pulse-b-4qgrbgkj6a { from { opacity: 1; } to { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .settings-datos__here[aria-busy] i[b-4qgrbgkj6a] { animation: none; } }
.settings-datos__location[b-4qgrbgkj6a], .settings-datos__suggestions[b-4qgrbgkj6a], .settings-datos__ask[b-4qgrbgkj6a] { animation: capy-rise 180ms var(--pt-ease-enter) both; }
.settings-datos__attribution[b-4qgrbgkj6a] { margin: var(--pt-space-2) 0 0; font-size: 11px; color: var(--pt-text-muted); }
/* /Components/Pages/Settings/SettingsDeliveryPanel.razor.rz.scp.css */
/* Delivery y retiro */
.settings-delivery__location[b-ge6ejjdhd8] { margin-top: var(--pt-space-3); display: flex; align-items: center; gap: var(--pt-space-3); flex-wrap: wrap; }
/* "Usar mi ubicación actual" and "Cancelar" sit under the box, at their own width. */
.settings-delivery__search-actions[b-ge6ejjdhd8] { display: flex; flex-wrap: wrap; gap: var(--pt-space-2); margin-top: var(--pt-space-2); }
.settings-delivery__here[aria-busy] i[b-ge6ejjdhd8] { animation: settings-delivery-pulse-b-ge6ejjdhd8 1.1s var(--pt-ease-glide) infinite alternate; }
@keyframes settings-delivery-pulse-b-ge6ejjdhd8 { from { opacity: 1; } to { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .settings-delivery__here[aria-busy] i[b-ge6ejjdhd8] { animation: none; } }
/* Showing the saved address or the search, the list and the "number" line: a short rise, never a jump. */
.settings-delivery__location[b-ge6ejjdhd8], .settings-delivery__search[b-ge6ejjdhd8], .settings-delivery__suggestions[b-ge6ejjdhd8], .settings-delivery__ask[b-ge6ejjdhd8] { animation: capy-rise 180ms var(--pt-ease-enter) both; }
.settings-delivery__chip[b-ge6ejjdhd8] { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; padding: 3px 8px;
    border-radius: var(--pt-radius-chip); background: var(--pt-available-tint); color: var(--pt-on-success); white-space: nowrap; }
.settings-delivery__chip--muted[b-ge6ejjdhd8] { background: var(--pt-line-100); color: var(--pt-text-secondary); }
.settings-delivery__search[b-ge6ejjdhd8] { position: relative; margin-top: var(--pt-space-3); }
.settings-delivery__suggestions[b-ge6ejjdhd8] { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; list-style: none; margin: 4px 0 0; padding: 4px;
    background: var(--pt-surface); border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-md); box-shadow: var(--pt-shadow-popover); }
.settings-delivery__suggestions button[b-ge6ejjdhd8] { all: unset; display: block; width: 100%; padding: var(--pt-space-2) var(--pt-space-3); border-radius: var(--pt-radius-sm); cursor: pointer; }
.settings-delivery__suggestions button:hover[b-ge6ejjdhd8], .settings-delivery__suggestions button:focus-visible[b-ge6ejjdhd8] { background: var(--pt-row-hover); }
.settings-delivery__attribution[b-ge6ejjdhd8] { margin: 0; font-size: 11px; color: var(--pt-text-muted); }
.settings-delivery__warn[b-ge6ejjdhd8] { display: flex; align-items: center; justify-content: space-between; gap: var(--pt-space-3); flex-wrap: wrap;
    padding: var(--pt-space-3); border-radius: var(--pt-radius-md); background: var(--pt-chrome-warn-tint); color: var(--pt-on-warning); font-size: var(--pt-text-caption); font-weight: 700; }
.settings-delivery__attribution[b-ge6ejjdhd8] { margin-top: var(--pt-space-2); }

/* Delivery copy is longer than the shared card's one-line description allows: let it wrap. */
.settings-content-group--delivery .capy-radio-card[b-ge6ejjdhd8] { align-items: flex-start; }
.settings-content-group--delivery .capy-radio-card__description[b-ge6ejjdhd8] { overflow: visible; white-space: normal; text-overflow: clip; }
.settings-delivery__warn[b-ge6ejjdhd8] { margin-bottom: var(--pt-space-3); }
.settings-panel__body > .field__error[b-ge6ejjdhd8] { margin: 0 0 var(--pt-space-3); }

/* Prefix / suffix inputs, the same shape as the Reservas "/r/" slug field. The affix is a tinted
   cap on one side of a normal .field__control. */
.settings-delivery__affix[b-ge6ejjdhd8] { display: flex; align-items: stretch; width: 100%; }
.settings-delivery__affix--field[b-ge6ejjdhd8] { width: min(100%, 220px); }
.settings-delivery__affix .field__control[b-ge6ejjdhd8] { min-width: 0; flex: 1 1 auto; }
.settings-delivery__affix-text[b-ge6ejjdhd8] {
    display: grid; place-items: center; padding: 0 var(--pt-space-3);
    border: var(--pt-border-card); background: var(--pt-app-bg);
    color: var(--pt-text-muted); font-weight: 700; white-space: nowrap;
}
.settings-delivery__affix-text:first-child[b-ge6ejjdhd8] { border-right: 0; border-radius: var(--pt-radius-md) 0 0 var(--pt-radius-md); }
.settings-delivery__affix-text:first-child + .field__control[b-ge6ejjdhd8] { border-radius: 0 var(--pt-radius-md) var(--pt-radius-md) 0; }
.settings-delivery__affix-text--after[b-ge6ejjdhd8] { border-left: 0; border-radius: 0 var(--pt-radius-md) var(--pt-radius-md) 0; }
.settings-delivery__affix .field__control:has(+ .settings-delivery__affix-text--after)[b-ge6ejjdhd8] { border-radius: var(--pt-radius-md) 0 0 var(--pt-radius-md); }

/* The sentence rows sit flush above the toggle that follows them. */
.settings-delivery__toggle-after-rule[b-ge6ejjdhd8] { padding-top: var(--pt-space-4); }
.settings-delivery__nested[b-ge6ejjdhd8] { margin-left: var(--pt-space-2); padding-left: var(--pt-space-4); border-left: var(--pt-border-row); }
.settings-delivery__nested > .field[b-ge6ejjdhd8] { margin-top: var(--pt-space-3); }

/* Zones: a table-like list. Header row on wide screens, labelled cells on phones. */
.settings-delivery__zones[b-ge6ejjdhd8] { display: grid; gap: var(--pt-space-2); margin-top: var(--pt-space-3); }
.settings-delivery__zone[b-ge6ejjdhd8] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 44px; gap: var(--pt-space-3); align-items: center; }
.settings-delivery__zone--head[b-ge6ejjdhd8] { color: var(--pt-text-muted); font: 800 12px var(--pt-font-body); letter-spacing: .04em; text-transform: uppercase; }
.settings-delivery__cell[b-ge6ejjdhd8] { display: block; margin: 0; }
.settings-delivery__cell-label[b-ge6ejjdhd8] {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}
.settings-delivery__empty[b-ge6ejjdhd8] {
    margin: var(--pt-space-3) 0; padding: var(--pt-space-4); border: 1px dashed var(--pt-line-200);
    border-radius: var(--pt-radius-md); background: var(--pt-app-bg); color: var(--pt-text-muted); font-size: var(--pt-text-caption);
}
.settings-delivery__add[b-ge6ejjdhd8] { margin-top: var(--pt-space-3); }
.settings-delivery__free[b-ge6ejjdhd8] { margin-top: var(--pt-space-4); }
/* A field label with its info hint beside it. */
.settings-delivery__label-row[b-ge6ejjdhd8] { display: inline-flex; align-items: center; gap: var(--pt-space-1); }

@media (max-width: 760px) {
    .settings-delivery__zone--head[b-ge6ejjdhd8] { display: none; }
    /* Distance and fee on the first row; the minimum takes the second row beside the bin, so its
       "Sin mínimo" placeholder is not cut to "Sin m…" in half a card. */
    .settings-delivery__zone[b-ge6ejjdhd8] { grid-template-columns: 1fr 1fr 44px; padding: var(--pt-space-3); border: var(--pt-border-row); border-radius: var(--pt-radius-md); }
    .settings-delivery__zone > .settings-delivery__cell:nth-child(2)[b-ge6ejjdhd8] { grid-column: 2 / -1; }
    .settings-delivery__zone > .settings-delivery__cell:nth-child(3)[b-ge6ejjdhd8] { grid-column: 1 / 3; }
    .settings-delivery__cell-label[b-ge6ejjdhd8] {
        position: static; width: auto; height: auto; margin: 0 0 var(--pt-space-1); overflow: visible; clip-path: none;
        display: block; color: var(--pt-text-muted); font: 800 12px var(--pt-font-body); letter-spacing: .04em; text-transform: uppercase;
    }
    .settings-delivery__zone .reservas-window__remove[b-ge6ejjdhd8] { grid-column: 3; align-self: end; justify-self: end; }
}

/* Language swap: the shimmer for this panel's localized strings (rationale in Settings.razor.css). */
.lang-swapping .settings-panel__header h2[b-ge6ejjdhd8],
.lang-swapping .settings-panel__header p[b-ge6ejjdhd8],
.lang-swapping .settings-group__title[b-ge6ejjdhd8],
.lang-swapping .field__label[b-ge6ejjdhd8],
.lang-swapping .field__help[b-ge6ejjdhd8] {
    width: fit-content;
    border-radius: 6px;
    color: transparent;
    background-image: var(--pt-shimmer);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: var(--pt-shimmer-animation);
}

/* Badges and icons riding inside a shimmering label would otherwise float on top of the bar. */
.lang-swapping .field__label > *[b-ge6ejjdhd8],
.lang-swapping .settings-group__title > *[b-ge6ejjdhd8] {
    visibility: hidden;
}

.lang-swapping .capy-form-action[b-ge6ejjdhd8] {
    position: relative;
    color: transparent;
}

.lang-swapping .capy-form-action > i[b-ge6ejjdhd8] {
    visibility: hidden;
}

.lang-swapping .capy-form-action[b-ge6ejjdhd8]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--pt-space-3);
    right: var(--pt-space-3);
    height: 9px;
    transform: translateY(-50%);
    border-radius: 6px;
    background-image: var(--pt-shimmer);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: var(--pt-shimmer-animation);
}

/* What blocks Guardar, one line per problem. */
.settings-delivery__missing-title[b-ge6ejjdhd8] { margin: 0; font-weight: 700; }
.settings-delivery__missing[b-ge6ejjdhd8] { margin: var(--pt-space-1) 0 var(--pt-space-4); padding-left: var(--pt-space-4); }
.settings-delivery__account[b-ge6ejjdhd8] { display: flex; flex-direction: column; gap: var(--pt-space-2); margin: 0 0 var(--pt-space-3); padding: var(--pt-space-3); border: var(--pt-border-card); border-radius: var(--pt-radius-md); }
.settings-delivery__account .field[b-ge6ejjdhd8] { margin: 0; }
.settings-delivery__account > .capy-form-action[b-ge6ejjdhd8] { align-self: flex-start; }
/* /Components/Pages/Settings/SettingsFacturacionPanel.razor.rz.scp.css */
.settings-facturacion .field[b-78rd1z8s7u] { max-width: 560px; }

.settings-facturacion__modes[b-78rd1z8s7u] {
    display: grid;
    grid-template-columns: minmax(0, 560px);
    gap: var(--pt-space-3);
}
/* /Components/Pages/Settings/SettingsHorariosPanel.razor.rz.scp.css */
/* ── Task 4 (Horarios): per-day shift editor ───────────────────── */
.horarios-days[b-vt1a00eqo1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--pt-space-6);
}

.horarios-day__copy[b-vt1a00eqo1] {
    margin-left: auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: var(--pt-radius-sm);
    background: transparent;
    color: var(--pt-text-muted);
    cursor: pointer;
}

.horarios-day__copy:hover[b-vt1a00eqo1] { background: var(--pt-surface); color: var(--pt-forest-700); }

.horarios-shift[b-vt1a00eqo1] {
    display: flex;
    align-items: center;
    gap: var(--pt-space-2);
}

.horarios-shift__select[b-vt1a00eqo1] {
    min-height: var(--pt-action-min-height);
    max-width: 110px;
}

.horarios-shift__sep[b-vt1a00eqo1] { color: var(--pt-text-muted); }

.horarios-shift__badge[b-vt1a00eqo1] {
    padding: 2px 8px;
    border-radius: var(--pt-radius-pill);
    background: var(--pt-occupied-tint);
    color: var(--pt-warning);
    font: 700 11px var(--pt-font-body);
    white-space: nowrap;
}

.horarios-shift__remove[b-vt1a00eqo1] {
    margin-left: auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: var(--pt-radius-sm);
    background: transparent;
    color: var(--pt-danger);
    cursor: pointer;
}

.horarios-shift__remove:hover[b-vt1a00eqo1] { background: var(--pt-surface); }

.horarios-foot[b-vt1a00eqo1] {
    margin: var(--pt-space-3) 0 0;
    color: var(--pt-text-muted);
    font-size: 13px;
}

@media (max-width: 760px) {
    .horarios-days[b-vt1a00eqo1] { grid-template-columns: 1fr; }
}

/* Language swap: the shimmer for this panel's localized strings (rationale in Settings.razor.css). */
.lang-swapping .settings-panel__header h2[b-vt1a00eqo1],
.lang-swapping .settings-panel__header p[b-vt1a00eqo1],
.lang-swapping .settings-group__title[b-vt1a00eqo1] {
    width: fit-content;
    border-radius: 6px;
    color: transparent;
    background-image: var(--pt-shimmer);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: var(--pt-shimmer-animation);
}

/* Badges and icons riding inside a shimmering label would otherwise float on top of the bar. */
.lang-swapping .settings-group__title > *[b-vt1a00eqo1] {
    visibility: hidden;
}

.lang-swapping .capy-form-action[b-vt1a00eqo1] {
    position: relative;
    color: transparent;
}

.lang-swapping .capy-form-action > i[b-vt1a00eqo1] {
    visibility: hidden;
}

.lang-swapping .capy-form-action[b-vt1a00eqo1]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--pt-space-3);
    right: var(--pt-space-3);
    height: 9px;
    transform: translateY(-50%);
    border-radius: 6px;
    background-image: var(--pt-shimmer);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: var(--pt-shimmer-animation);
}
/* /Components/Pages/Settings/SettingsLinksPanel.razor.rz.scp.css */
/* Enlaces: the rows are ShareLinkRow components (their own scoped CSS); this only stacks them. */
.settings-links[b-q5m59q3u58] { display: flex; flex-direction: column; gap: var(--pt-space-3); }

/* The page address every shared link starts from. */
.settings-links__address[b-q5m59q3u58] { margin-bottom: var(--pt-space-2); }

.settings-links__slug[b-q5m59q3u58] {
    display: flex;
    align-items: stretch;
    width: min(100%, 480px);
}

.settings-links__slug > span[b-q5m59q3u58] {
    display: grid;
    place-items: center;
    padding: 0 var(--pt-space-3);
    border: var(--pt-border-card);
    border-right: 0;
    border-radius: var(--pt-radius-md) 0 0 var(--pt-radius-md);
    background: var(--pt-app-bg);
    color: var(--pt-text-muted);
    font-weight: 700;
}

.settings-links__slug .field__control[b-q5m59q3u58] { border-radius: 0 var(--pt-radius-md) var(--pt-radius-md) 0; }

/* Restaurant-domain mode: the suffix follows the input, so the rounding and the missing border swap sides. */
.settings-links__slug .field__control + span[b-q5m59q3u58] {
    border: var(--pt-border-card);
    border-left: 0;
    border-radius: 0 var(--pt-radius-md) var(--pt-radius-md) 0;
}
.settings-links__slug .field__control:has(+ span)[b-q5m59q3u58] { border-radius: var(--pt-radius-md) 0 0 var(--pt-radius-md); }

/* Narrow phones: ".capy.software" took half the row and left about 12 characters of the address
   visible; a tighter affix and field padding give the address the room. */
@media (max-width: 480px) {
    .settings-links__slug > span[b-q5m59q3u58] { padding: 0 var(--pt-space-2); font-size: var(--pt-text-caption); }
    .settings-links__slug .field__control[b-q5m59q3u58] { padding-inline: var(--pt-space-2); }
}

/* Language swap: the shimmer for this panel's localized strings (rationale in Settings.razor.css). */
.lang-swapping .settings-panel__header h2[b-q5m59q3u58],
.lang-swapping .settings-panel__header p[b-q5m59q3u58] {
    width: fit-content;
    border-radius: 6px;
    color: transparent;
    background-image: var(--pt-shimmer);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: var(--pt-shimmer-animation);
}
/* /Components/Pages/Settings/SettingsMarcaPanel.razor.rz.scp.css */
/* ── Task 3 (Marca): logo/banner upload row ────────────────────── */
.settings-upload-row[b-tl30z0v0yp] {
    display: flex;
    align-items: flex-start;
    gap: var(--pt-space-3);
    margin-bottom: 0;
    padding: var(--pt-space-4) 0;
    border-bottom: var(--pt-border-row);
}

.settings-upload-row:first-child[b-tl30z0v0yp] { padding-top: 0; }
.settings-upload-row:last-child[b-tl30z0v0yp] { border-bottom: 0; }

.settings-upload-thumb[b-tl30z0v0yp] {
    display: grid;
    flex: none;
    place-items: center;
    width: 62px;
    height: 62px;
    overflow: hidden;
    border-radius: var(--pt-radius-lg);
    background: var(--pt-available-tint);
    color: var(--pt-forest-600);
}

.settings-upload-thumb--banner[b-tl30z0v0yp] { width: 96px; height: 40px; border-radius: var(--pt-radius-md); }

.settings-upload-thumb--background[b-tl30z0v0yp] { width: 62px; height: 88px; border-radius: var(--pt-radius-md); }

.settings-upload-thumb--empty[b-tl30z0v0yp] { background: var(--pt-row-divider); color: var(--pt-unavailable-icon); }

.settings-upload-thumb img[b-tl30z0v0yp] { width: 100%; height: 100%; object-fit: cover; }

.settings-upload-meta[b-tl30z0v0yp] { display: grid; gap: 3px; min-width: 0; }

.settings-upload-label[b-tl30z0v0yp] { color: var(--pt-text-strong); font: 800 12.5px var(--pt-font-body); }

.settings-upload-hint[b-tl30z0v0yp] { margin: 0; color: var(--pt-text-meta); font-size: 12px; line-height: 1.45; }

.settings-upload-actions[b-tl30z0v0yp] { display: flex; gap: var(--pt-space-2); margin-top: var(--pt-space-1); }

/* InputFile renders its own <input> deep inside the <label>; ::deep reaches past this file's
   scoping isolation the same way MenuItemEditor.razor.css's .drawer-item-editor__file already
   does for the identical pattern. */
.settings-upload-row[b-tl30z0v0yp]  .settings-upload-file {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── Task 3 (Marca): theme preset grid — migrated from app.css's legacy
   .preset-grid/.preset-card (which used --surface/--border/--accent/--ink tokens) onto --pt-*
   per the coexistence rule; app.css's copy is removed since no other screen referenced it. ── */
.preset-grid[b-tl30z0v0yp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    gap: var(--pt-space-3);
    max-width: 760px;
}

.preset-card[b-tl30z0v0yp] {
    display: flex;
    flex-direction: column;
    gap: var(--pt-space-2);
    padding: var(--pt-space-3);
    background: var(--pt-surface);
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-lg);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--pt-dur-hover) var(--pt-ease-soft), box-shadow var(--pt-dur-hover) var(--pt-ease-soft);
}

.preset-card:hover[b-tl30z0v0yp] { border-color: var(--pt-olive-500); }

.preset-card--selected[b-tl30z0v0yp] {
    border-color: var(--pt-olive-500);
    background: var(--pt-radio-selected);
    box-shadow: 0 0 0 2px var(--pt-olive-500);
}

.preset-swatches[b-tl30z0v0yp] { display: flex; gap: var(--pt-space-1); }

.preset-swatch[b-tl30z0v0yp] { width: 22px; height: 22px; border-radius: 50%; border: var(--pt-border-card); }

.preset-name[b-tl30z0v0yp] { color: var(--pt-ink-900); font-weight: 700; }

.preset-tagline[b-tl30z0v0yp] { color: var(--pt-text-muted); font-size: var(--pt-text-caption); }

@media (hover: none) and (pointer: coarse) {
    .preset-swatch[b-tl30z0v0yp] { width: 32px; height: 32px; }
}

@media (max-width: 760px) {
    .settings-upload-row[b-tl30z0v0yp] { align-items: stretch; flex-direction: column; }
    .settings-upload-thumb--banner[b-tl30z0v0yp] { width: min(100%, 280px); height: 96px; }
    .settings-upload-thumb--background[b-tl30z0v0yp] { width: 120px; height: 160px; }
    .settings-upload-actions[b-tl30z0v0yp] { flex-wrap: wrap; }
}

/* Language swap: the shimmer for this panel's localized strings (rationale in Settings.razor.css). */
.lang-swapping .settings-panel__header h2[b-tl30z0v0yp],
.lang-swapping .settings-panel__header p[b-tl30z0v0yp],
.lang-swapping .settings-group__title[b-tl30z0v0yp],
.lang-swapping .field__label[b-tl30z0v0yp],
.lang-swapping .field__help[b-tl30z0v0yp] {
    width: fit-content;
    border-radius: 6px;
    color: transparent;
    background-image: var(--pt-shimmer);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: var(--pt-shimmer-animation);
}

/* Badges and icons riding inside a shimmering label would otherwise float on top of the bar. */
.lang-swapping .field__label > *[b-tl30z0v0yp],
.lang-swapping .settings-group__title > *[b-tl30z0v0yp] {
    visibility: hidden;
}

.lang-swapping .capy-form-action[b-tl30z0v0yp] {
    position: relative;
    color: transparent;
}

.lang-swapping .capy-form-action > i[b-tl30z0v0yp] {
    visibility: hidden;
}

.lang-swapping .capy-form-action[b-tl30z0v0yp]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--pt-space-3);
    right: var(--pt-space-3);
    height: 9px;
    transform: translateY(-50%);
    border-radius: 6px;
    background-image: var(--pt-shimmer);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: var(--pt-shimmer-animation);
}
/* /Components/Pages/Settings/SettingsReservasPanel.razor.rz.scp.css */
/* ── Task 5 (Cobros): ordering mode cards reuse capy-forms.css ─────── */
.settings-content-group--reservations-access[b-mind57zbu7],
.settings-content-group--reservation-rules[b-mind57zbu7],
.settings-content-group--reservation-windows[b-mind57zbu7] { max-width: 760px; }

.settings-reservas__manual[b-mind57zbu7] {
    display: flex;
    align-items: flex-start;
    gap: var(--pt-space-3);
    margin-top: var(--pt-space-1);
    padding: var(--pt-space-3) 14px;
    border: 1px solid var(--pt-radio-card-border);
    border-radius: 10px;
    background: var(--pt-surface);
    cursor: pointer;
}

.settings-reservas__manual--on[b-mind57zbu7] { border-color: var(--pt-olive-500); background: var(--pt-radio-selected); }
.settings-reservas__manual input[type="checkbox"][b-mind57zbu7] { width: 20px; height: 20px; margin: 10px 0 0; flex: none; accent-color: var(--pt-success); }

.settings-reservas__windows[b-mind57zbu7] { display: grid; }

.reservas-window[b-mind57zbu7] {
    display: grid;
    /* The service column gets the room: "Turno según la hora" was cut off at an equal share. */
    grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr) auto minmax(185px, 1.4fr) 44px;
    gap: var(--pt-space-2);
    align-items: center;
    padding: var(--pt-space-3);
    border: var(--pt-border-row);
    border-radius: var(--pt-radius-md);
    background: var(--pt-app-bg);
}

.reservas-window label[b-mind57zbu7] { margin: 0; }
/* "40 personas": the number alone did not say what it counts. */
.reservas-window__covers[b-mind57zbu7] { display: flex; align-items: center; gap: var(--pt-space-2); color: var(--pt-text-muted); font-size: var(--pt-text-caption); white-space: nowrap; }
.reservas-window__covers .field__control[b-mind57zbu7] { width: 72px; min-width: 0; }
.reservas-window__error[b-mind57zbu7] { margin: calc(-1 * var(--pt-space-1)) 0 0 var(--pt-space-3); }

@media (max-width: 760px) {
    /* Phone: the hours share a row with the bin, the covers take the next row and the service
       selector a full row, so "Turno según la hora" is not cut off at half width. */
    .reservas-window[b-mind57zbu7] { grid-template-columns: 1fr 1fr 44px; }
    .reservas-window__remove[b-mind57zbu7] { grid-column: 3; grid-row: 1; justify-self: end; }
    .reservas-window__covers[b-mind57zbu7] { grid-column: 1 / 3; }
    .reservas-window select[b-mind57zbu7] { grid-column: 1 / -1; }
}

/* Language swap: the shimmer for this panel's localized strings (rationale in Settings.razor.css). */
.lang-swapping .settings-panel__header h2[b-mind57zbu7],
.lang-swapping .settings-panel__header p[b-mind57zbu7],
.lang-swapping .settings-group__title[b-mind57zbu7],
.lang-swapping .field__label[b-mind57zbu7],
.lang-swapping .field__help[b-mind57zbu7] {
    width: fit-content;
    border-radius: 6px;
    color: transparent;
    background-image: var(--pt-shimmer);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: var(--pt-shimmer-animation);
}

/* Badges and icons riding inside a shimmering label would otherwise float on top of the bar. */
.lang-swapping .field__label > *[b-mind57zbu7],
.lang-swapping .settings-group__title > *[b-mind57zbu7] {
    visibility: hidden;
}

.lang-swapping .capy-form-action[b-mind57zbu7] {
    position: relative;
    color: transparent;
}

.lang-swapping .capy-form-action > i[b-mind57zbu7] {
    visibility: hidden;
}

.lang-swapping .capy-form-action[b-mind57zbu7]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--pt-space-3);
    right: var(--pt-space-3);
    height: 9px;
    transform: translateY(-50%);
    border-radius: 6px;
    background-image: var(--pt-shimmer);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: var(--pt-shimmer-animation);
}
/* /Components/Pages/Tables/Tables.razor.rz.scp.css */
/* Capy "Mesas" (Task 2: screen frame, zone tabs, chip grid, header figures). Every value below is
   the handoff's (Capy Mesas.dc.html), expressed through the declared tokens — new ones added to
   capy-tokens.css where the prototype's STATES hex had no existing exact match (see that file's
   own comment for the mapping). Task 4 removed the inline section-management panel this comment
   used to describe (a "Administrar zonas" link to /table-sections replaced it — see Tables.razor's
   own header comment, R3); Task 5's cleanup removed the pre-Capy app.css classes
   (.add-section-row/.section-group/.table-tile/...) it used to reuse, since nothing referenced
   them any more. */

/* ── Page header ────────────────────────────────────────────── */
.tables-header[b-sjq7p8izaa] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pt-space-4);
    margin-bottom: var(--pt-space-6);
}

.tables-header h1[b-sjq7p8izaa] {
    margin: 0;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: var(--pt-tracking-display-l);
}

.tables-header p[b-sjq7p8izaa] {
    margin: 3px 0 0;
    color: var(--pt-text-muted);
    font-size: 14px;
}

/* ── Head actions (zone tabs + Task 4's Editar/Descartar/Guardar) ─────────── */
.tables-head-actions[b-sjq7p8izaa] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-left: auto;
}

/* ── Zone tabs ──────────────────────────────────────────────── */
.tables-zones[b-sjq7p8izaa] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    background: var(--pt-cream-100);
    border-radius: var(--pt-radius-md);
    padding: 3px;
}

.tables-zones__tab[b-sjq7p8izaa] {
    min-height: 36px;
    border: 0;
    border-radius: 7px;
    padding: 8px 14px;
    background: transparent;
    color: var(--pt-text-muted);
    font-family: var(--pt-font-body);
    font-weight: 700;
    font-size: 12.5px;
    cursor: pointer;
    transition: all var(--pt-dur-hover) var(--pt-ease-soft);
}

.tables-zones__tab[aria-pressed="true"][b-sjq7p8izaa] {
    background: var(--pt-surface);
    color: var(--pt-ink-900);
    box-shadow: var(--pt-shadow-card);
}

.tables-zones__tab:focus-visible[b-sjq7p8izaa],
.tables-chip:focus-visible[b-sjq7p8izaa] {
    outline: var(--pt-focus-outline);
    outline-offset: 2px;
}

/* ── Skeleton / error ───────────────────────────────────────── */
.tables-skeleton[b-sjq7p8izaa] { display: grid; gap: 10px; margin-bottom: var(--pt-space-6); }

.tables-skeleton__bar[b-sjq7p8izaa] {
    border-radius: var(--pt-radius-md);
    background: var(--pt-cream-100);
    animation: tables-pulse-b-sjq7p8izaa 1.4s var(--pt-ease-soft) infinite;
}

.tables-skeleton__bar--title[b-sjq7p8izaa] { width: 240px; height: 20px; }
.tables-skeleton__bar--row[b-sjq7p8izaa] { height: 64px; }

@keyframes tables-pulse-b-sjq7p8izaa { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ── Stat cards (Task 3, R11: three of the prototype's four — "Rotación del turno" is cut
   whole) ───────────────────────────────────────────────────── */
.tables-stats[b-sjq7p8izaa] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--pt-space-3);
    margin-bottom: var(--pt-space-6);
}

.tables-stat[b-sjq7p8izaa] {
    background: var(--pt-surface);
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-lg);
    padding: 14px 16px;
}

/* "Esperando cobro" above zero — the prototype's own warn treatment on the card border. */
.tables-stat--warn[b-sjq7p8izaa] { border-color: oklch(from var(--pt-warning) l c h / .5); }

.tables-stat__label[b-sjq7p8izaa] { font-size: 12.5px; color: var(--pt-text-muted); }

.tables-stat__row[b-sjq7p8izaa] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 5px;
}

.tables-stat__value[b-sjq7p8izaa] {
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 25px;
    letter-spacing: -.025em;
    font-variant-numeric: tabular-nums;
    color: var(--pt-ink-900);
}

.tables-stat__hint[b-sjq7p8izaa] { font-size: 12.5px; color: var(--pt-unavailable-text); }

/* ── Two-column grid (Step 0) ──────────────────────────────── */
.tables-grid[b-sjq7p8izaa] {
    display: grid;
    grid-template-columns: minmax(420px, 1fr) 320px;
    gap: var(--pt-space-6);
    align-items: start;
}

@media (max-width: 1180px) {
    .tables-grid[b-sjq7p8izaa] { grid-template-columns: 1fr; }
}

.tables-panel[b-sjq7p8izaa],
.tables-detail[b-sjq7p8izaa] {
    background: var(--pt-surface);
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-lg);
    overflow: hidden;
}

.tables-detail[b-sjq7p8izaa] { min-height: 120px; position: sticky; top: 22px; }

@media (max-width: 1180px) {
    .tables-detail[b-sjq7p8izaa] { position: static; }
}

/* ── Left panel head: zone title, count, legend ────────────── */
.tables-panel__head[b-sjq7p8izaa] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border-bottom: var(--pt-border-card);
}

.tables-panel__head h2[b-sjq7p8izaa] {
    margin: 0;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -.02em;
}

.tables-panel__count[b-sjq7p8izaa] { font-size: 12.5px; color: var(--pt-unavailable-icon); }

.tables-legend[b-sjq7p8izaa] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-left: auto;
}

.tables-legend__item[b-sjq7p8izaa] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--pt-text-secondary);
}

.tables-legend__dot[b-sjq7p8izaa] { width: 9px; height: 9px; border-radius: 50%; }
.tables-legend__dot--available[b-sjq7p8izaa] { background: var(--pt-success); }
.tables-legend__dot--reserved[b-sjq7p8izaa] { background: var(--pt-reserved-fg); }
.tables-legend__dot--occupied[b-sjq7p8izaa] { background: var(--pt-gold-500); }
.tables-legend__dot--pending[b-sjq7p8izaa] { background: var(--pt-pending-fg); }
.tables-legend__dot--closed[b-sjq7p8izaa] { background: var(--pt-neutral); }

/* ── Empty zone / chip grid (Step 2) ───────────────────────── */
.tables-empty[b-sjq7p8izaa] {
    margin: 0;
    padding: 34px 18px;
    text-align: center;
    font-size: 14px;
    color: var(--pt-text-muted);
}

/* The edit grid is rendered by SortableList, which carries SortableList's scope, not this page's. */
.tables-chips[b-sjq7p8izaa],
.tables-panel[b-sjq7p8izaa]  .tables-chips--edit {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 14px;
    padding: 20px;
    background: var(--pt-tray-bg);
}

/* "Todas" tab: one subheading per zone above that zone's own .tables-chips grid — spacing only,
   the grid itself is the unmodified single-zone one (Requirement 2). */
.tables-panel__zone-heading[b-sjq7p8izaa] {
    margin: 0;
    padding: 16px 20px 0;
    background: var(--pt-tray-bg);
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: -.01em;
}

.tables-panel__zone-heading:first-child[b-sjq7p8izaa] { padding-top: 20px; }

.tables-chip[b-sjq7p8izaa] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    min-height: 108px;
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    padding: 13px 14px;
    border-radius: var(--pt-radius-lg);
    border: 2px solid transparent;
    cursor: pointer;
    font-family: var(--pt-font-body);
    transition: transform 120ms, box-shadow 140ms;
}

.tables-chip--available[b-sjq7p8izaa] { color: var(--pt-forest-600); background: var(--pt-available-tint); border-color: var(--pt-available-border); }
.tables-chip--reserved[b-sjq7p8izaa] { color: var(--pt-reserved-fg); background: var(--pt-reserved-tint); border-color: var(--pt-reserved-border); }
.tables-chip--occupied[b-sjq7p8izaa] { color: var(--pt-occupied-fg); background: var(--pt-occupied-tint); border-color: var(--pt-occupied-border); }
.tables-chip--pending[b-sjq7p8izaa] { color: var(--pt-pending-fg); background: var(--pt-pending-tint); border-color: var(--pt-pending-border); }
/* R2: Closed borrows none of the three states above — neutral/cream pair only. */
.tables-chip--closed[b-sjq7p8izaa] { color: var(--pt-text-secondary); background: var(--pt-cream-100); border-color: var(--pt-cream-300); }

.tables-chip--active.tables-chip--available[b-sjq7p8izaa] { border-color: var(--pt-success); box-shadow: 0 6px 18px oklch(from var(--pt-ink-900) l c h / .14); }
.tables-chip--active.tables-chip--reserved[b-sjq7p8izaa] { border-color: var(--pt-reserved-fg); box-shadow: 0 6px 18px oklch(from var(--pt-ink-900) l c h / .14); }
.tables-chip--active.tables-chip--occupied[b-sjq7p8izaa] { border-color: var(--pt-gold-500); box-shadow: 0 6px 18px oklch(from var(--pt-ink-900) l c h / .14); }
.tables-chip--active.tables-chip--pending[b-sjq7p8izaa] { border-color: var(--pt-pending-fg); box-shadow: 0 6px 18px oklch(from var(--pt-ink-900) l c h / .14); }
.tables-chip--active.tables-chip--closed[b-sjq7p8izaa] { border-color: var(--pt-neutral); box-shadow: 0 6px 18px oklch(from var(--pt-ink-900) l c h / .14); }

.tables-chip__top[b-sjq7p8izaa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.tables-chip__name[b-sjq7p8izaa] {
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -.02em;
}

/* No colour-only state: every chip already carries its state as this text badge, never the dot
   alone (the dot itself only appears in the legend). */
.tables-chip__badge[b-sjq7p8izaa] {
    font-size: 10.5px;
    font-weight: 800;
    padding: 3px 7px;
    border-radius: 5px;
    color: inherit;
    background: oklch(from var(--pt-surface) l c h / .68);
}

.tables-chip__seats[b-sjq7p8izaa] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    opacity: .82;
}

.tables-chip__meta[b-sjq7p8izaa] {
    display: block;
    min-height: 1em;
    font-size: 11.5px;
    font-weight: 700;
    opacity: .74;
}

/* ── Right panel: detail header, rows, note, actions, footer (Task 3) ─────────────── */
.tables-detail__skeleton[b-sjq7p8izaa] { display: grid; gap: 10px; padding: 18px; }

.tables-detail__header[b-sjq7p8izaa] {
    display: flex;
    align-items: center;
    gap: var(--pt-space-2);
    padding: 14px var(--pt-space-4);
    border-bottom: var(--pt-border-card);
}

.tables-detail__header h2[b-sjq7p8izaa] {
    margin: 0;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-weight: 700;
    font-size: 15px;
}

/* Same tone family as .tables-chip--*, applied to a small pill instead of the whole chip — no
   colour-only state here either, the state name is still text (WCAG AA). */
.tables-detail__chip[b-sjq7p8izaa] {
    margin-left: auto;
    flex: none;
    font-size: 11.5px;
    font-weight: 800;
    padding: 4px 9px;
    border-radius: 6px;
}

.tables-detail__chip--available[b-sjq7p8izaa] { color: var(--pt-forest-600); background: var(--pt-available-tint); }
.tables-detail__chip--reserved[b-sjq7p8izaa] { color: var(--pt-reserved-fg); background: var(--pt-reserved-tint); }
.tables-detail__chip--occupied[b-sjq7p8izaa] { color: var(--pt-occupied-fg); background: var(--pt-occupied-tint); }
.tables-detail__chip--pending[b-sjq7p8izaa] { color: var(--pt-pending-fg); background: var(--pt-pending-tint); }
.tables-detail__chip--closed[b-sjq7p8izaa] { color: var(--pt-text-secondary); background: var(--pt-cream-100); }

.tables-detail__body[b-sjq7p8izaa] {
    display: flex;
    flex-direction: column;
    gap: var(--pt-space-3);
    padding: var(--pt-space-4);
}

.tables-detail__rows[b-sjq7p8izaa] { display: grid; gap: 14px; margin: 0; }
.tables-detail__rows > div[b-sjq7p8izaa] { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; }
.tables-detail__rows dt[b-sjq7p8izaa] { color: var(--pt-text-muted); }
.tables-detail__rows dd[b-sjq7p8izaa] { margin: 0; color: var(--pt-ink-900); font-weight: 800; text-align: right; }

.tables-detail__note[b-sjq7p8izaa] {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--pt-text-muted);
}

.tables-detail__actions[b-sjq7p8izaa] { display: grid; gap: var(--pt-space-2); margin-top: 4px; }
.tables-detail__actions .capy-form-action[b-sjq7p8izaa] { width: 100%; min-height: 44px; }
.tables-detail__actions .capy-form-action--primary[b-sjq7p8izaa] { color: var(--pt-cream-50); }

.tables-detail__footer[b-sjq7p8izaa] {
    padding: var(--pt-space-3) var(--pt-space-4);
    border-top: var(--pt-border-card);
    background: var(--pt-app-bg);
}

.tables-detail__footer p[b-sjq7p8izaa] {
    margin: 0;
    font-size: 12px;
    line-height: var(--pt-leading-caption);
    color: var(--pt-text-muted);
}

/* ── Task 4: edit mode ──────────────────────────────────────
   R10/R3's two secondary actions, shown in .tables-panel__head instead of the legend while
   editing (the legend itself is hidden — Tone doesn't apply to a name/capacity/zone editor). */
.tables-edit-toolbar[b-sjq7p8izaa] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.tables-panel[b-sjq7p8izaa]  .tables-chips--edit { align-items: stretch; }

/* One draft row. Border colour is the drag cue; the grip icon + "grab" affordance is the second,
   non-colour one (WCAG AA — no colour-only state). */
.tables-edit-card[b-sjq7p8izaa] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-height: 156px;
    box-sizing: border-box;
    padding: 12px;
    border-radius: var(--pt-radius-lg);
    background: var(--pt-surface);
    border: 2px solid var(--pt-cream-300);
    cursor: grab;
}

.tables-edit-card__row[b-sjq7p8izaa] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.tables-edit-card__grip[b-sjq7p8izaa] { flex: none; font-size: 15px; color: var(--pt-unavailable-icon); cursor: grab; }

.tables-edit-card__name[b-sjq7p8izaa] {
    width: 100%;
    min-width: 0;
    min-height: 0;
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -.02em;
    padding: 6px 8px;
}

.tables-edit-card__step[b-sjq7p8izaa] {
    width: 32px;
    height: 32px;
    flex: none;
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-md);
    background: var(--pt-surface);
    color: var(--pt-text-strong);
    font-weight: 800;
    cursor: pointer;
}

.tables-edit-card__step:focus-visible[b-sjq7p8izaa] { outline: none; box-shadow: var(--pt-focus-ring); }

.tables-edit-card__seats[b-sjq7p8izaa] {
    flex: 1;
    text-align: center;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--pt-text-strong);
    font-variant-numeric: tabular-nums;
}

/* Move up/down (Steps 3–4): unconditionally visible, never hover-revealed — this is the
   keyboard/touch equivalent of the drag reorder, not a decoration. */
.tables-edit-card__move[b-sjq7p8izaa] {
    flex: 1;
    min-height: 32px;
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-md);
    background: var(--pt-surface);
    color: var(--pt-text-strong);
    cursor: pointer;
}

.tables-edit-card__move:disabled[b-sjq7p8izaa] { color: var(--pt-unavailable-icon); cursor: not-allowed; }
.tables-edit-card__move:focus-visible[b-sjq7p8izaa] { outline: none; box-shadow: var(--pt-focus-ring); }

.tables-edit-card__zone[b-sjq7p8izaa] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--pt-text-strong);
    padding: 7px 8px;
}

.tables-edit-card__delete[b-sjq7p8izaa] {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: var(--pt-radius-md);
    cursor: pointer;
    border: 1px solid oklch(from var(--pt-danger) l c h / .35);
    background: var(--pt-surface);
    color: var(--pt-danger);
}

.tables-edit-card__delete:focus-visible[b-sjq7p8izaa] { outline: none; box-shadow: var(--pt-focus-ring); }

.tables-edit-card__warn[b-sjq7p8izaa] {
    font-size: 11px;
    font-weight: 700;
    color: var(--pt-on-warning);
}

.tables-edit-add[b-sjq7p8izaa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 156px;
    border-radius: var(--pt-radius-lg);
    cursor: pointer;
    font-family: var(--pt-font-body);
    color: var(--pt-forest-600);
    background: var(--pt-surface);
    border: 2px dashed var(--pt-available-border);
}

/* ── Save/delete-refused toast (Step 7) — same shape as QrCodes.razor's .qr-toast ───────── */
.tables-toast[b-sjq7p8izaa] {
    position: fixed;
    left: 50%;
    bottom: 26px;
    z-index: 70;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    /* Bottom-inset only: 13px is this toast's own vertical padding, kept as the floor so a
       device with no home-indicator inset (env() resolves to 0px, all of them today — see F5)
       renders identically to before. No horizontal counterpart: this is a centered pill, not an
       edge-anchored panel. */
    padding-bottom: max(13px, env(safe-area-inset-bottom));
    border: 1px solid oklch(from var(--pt-moss-400) l c h / .45);
    border-radius: 11px;
    background: var(--pt-forest-900);
    color: var(--pt-cream-50);
    font-size: 15px;
    font-weight: 700;
    box-shadow: var(--pt-shadow-panel);
}

.tables-toast--hidden[b-sjq7p8izaa] { display: none; }
.tables-toast i[b-sjq7p8izaa] { flex: none; font-size: 16px; color: oklch(from var(--pt-success) 78% c h); }

/* ── Bulk-create modal (R10 — Producto dress, relocated into edit mode) ─────────────────── */
.tables-bulk-modal[b-sjq7p8izaa] { max-width: 480px; }
.tables-bulk-modal__row[b-sjq7p8izaa] { display: flex; gap: var(--pt-space-3); }
.tables-bulk-modal__row .field[b-sjq7p8izaa] { flex: 1; }

.tables-bulk-modal__preview[b-sjq7p8izaa] {
    padding: var(--pt-space-3);
    margin-bottom: var(--pt-space-4);
    background: var(--pt-cream-100);
    border-radius: var(--pt-radius-md);
}

.tables-bulk-modal__preview-label[b-sjq7p8izaa] {
    font-size: 11px;
    font-weight: 700;
    color: var(--pt-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 5px;
}

.tables-bulk-modal__preview-value[b-sjq7p8izaa] { font-size: var(--pt-text-caption); color: var(--pt-ink-900); }

/* ── Día 1 (Task 5) ─────────────────────────────────────────
   "No tables at all" -- same anatomy as Orders.razor's own .orders-dayone / QrCodes' .qr-dayone
   (component reference §5); rebuilt here under this screen's own tables- prefix, same reasoning
   as those two files' own comments (Blazor CSS isolation scopes each .razor.css to its own
   component). Tokens only, nothing inlined, reusing exactly the tokens Orders/QrCodes already
   proved for this pattern -- no new ones needed. */
.tables-dayone[b-sjq7p8izaa] {
    max-width: 720px;
    padding: 30px 32px 28px;
    background: var(--pt-surface);
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-lg);
    box-shadow: var(--pt-shadow-card);
}

.tables-dayone__badge[b-sjq7p8izaa] {
    margin-bottom: var(--pt-space-3);
    color: var(--pt-on-warning);
    font-family: var(--pt-font-mono);
    font-size: 8.5px;
    letter-spacing: .12em;
}

.tables-dayone__title[b-sjq7p8izaa] {
    margin: 0 0 var(--pt-space-2);
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.025em;
}

/* P15 Task 5 fix round 1: --pt-text-muted (#6E7A70) on --pt-surface/--pt-app-bg computes to
   4.33-4.49:1 at these sizes/weights, just under WCAG AA's 4.5:1 -- copied verbatim from
   Orders.razor.css/QrCodes.razor.css, which have the same near-miss (reported separately, not
   fixed here). --pt-text-secondary (#4A5A4E) clears AA on both backgrounds: 7.333:1 on
   --pt-surface, 7.082:1 on --pt-app-bg. */
.tables-dayone__body[b-sjq7p8izaa] {
    max-width: 56ch;
    margin: 0 0 22px;
    color: var(--pt-text-secondary);
    font-size: 14px;
    line-height: var(--pt-leading-body);
    text-wrap: pretty;
}

.tables-dayone__tasks[b-sjq7p8izaa] { display: grid; gap: var(--pt-space-2); }

.tables-dayone-task[b-sjq7p8izaa] {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px var(--pt-space-4);
    border: var(--pt-border-card);
    border-radius: 10px;
    background: var(--pt-app-bg);
}

.tables-dayone-task > i[b-sjq7p8izaa] { flex: none; color: var(--pt-forest-600); font-size: 16px; }
.tables-dayone-task__text[b-sjq7p8izaa] { flex: 1; min-width: 0; }

.tables-dayone-task__title[b-sjq7p8izaa] {
    display: block;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-weight: 700;
    font-size: 14px;
}

/* WCAG AA fix, see .tables-dayone__body above: --pt-text-secondary on --pt-app-bg is 7.082:1. */
.tables-dayone-task__body[b-sjq7p8izaa] {
    display: block;
    margin-top: 2px;
    color: var(--pt-text-secondary);
    font-size: 12.5px;
}

.tables-dayone-task__action[b-sjq7p8izaa] { flex: none; white-space: nowrap; }

.tables-dayone__cta[b-sjq7p8izaa] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
}

/* WCAG AA fix, see .tables-dayone__body above: --pt-text-secondary on --pt-surface is 7.333:1. */
.tables-dayone__cta span[b-sjq7p8izaa] { color: var(--pt-text-secondary); font-size: 12.5px; }
.tables-dayone__cta .capy-form-action[b-sjq7p8izaa] { min-height: 42px; padding: 11px 18px; font-size: var(--pt-text-caption); }

@media (prefers-reduced-motion: reduce) {
    .tables-zones__tab[b-sjq7p8izaa], .tables-chip[b-sjq7p8izaa] { transition: none; }
    .tables-skeleton__bar[b-sjq7p8izaa] { animation: none; }
}

/* Intentional, visible control scroll — same anatomy as Kitchen's .kds__filters (09038cca).
   .tables-zones carries an unconditional flex-wrap: wrap (see the base rule above) so tabs
   normally reflow onto a second line; that reflow already keeps the page from overflowing, but
   it is not the scrolling affordance this pattern is meant to give, so flex-wrap: nowrap forces
   the row onto one line here, letting overflow-x: auto do the job instead. min-width: 0 is
   required alongside it — without it, this flex item's automatic min-width stays content-based
   and the row pushes .tables-head-actions wider instead of scrolling internally. */
@media (max-width: 700px) {
    .tables-zones[b-sjq7p8izaa] { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; min-width: 0; }
    .tables-zones__tab[b-sjq7p8izaa] { flex: none; }
}

@media (hover: none) and (pointer: coarse) {
    .tables-zones__tab[b-sjq7p8izaa] { min-height: var(--pt-action-min-height-touch); }

    /* Restores the shared touch contract: this per-screen density rule (line 630) sits at the
       same specificity as .capy-form-action's own touch rule in capy-forms.css, and a media
       query adds no specificity, so the later same-file declaration below is what wins. */
    .tables-dayone__cta .capy-form-action[b-sjq7p8izaa] { min-height: var(--pt-action-min-height-touch); }
}
/* /Components/Pages/Tables/TableSections.razor.rz.scp.css */
/* Capy "Zonas del salón". The bundle has no prototype for this screen (see TableSections.razor's
   provenance note), so every value below comes from the shipped Capy vocabulary — Tables.razor.css,
   ConfirmDialog.razor.css and the component reference — expressed through the declared tokens and
   never as a literal. capy-forms.css already supplies .field/.field__label/.field__control/.field__error and
   .capy-form-action(--primary/--danger) — nothing here restates them; only the page-specific
   .zones-*/.zrow*/.dayone*/.inline-error/skeleton rules live in this file. */

/* ── Page header ─────────────────────────────────────────── */
.zones-header[b-auucd069sd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pt-space-4);
    margin-bottom: var(--pt-space-6);
}

.zones-header h1[b-auucd069sd] {
    margin: 0;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: var(--pt-tracking-display-l);
}

.zones-header p[b-auucd069sd] {
    margin: 3px 0 0;
    max-width: 56ch;
    color: var(--pt-text-muted);
    font-size: 14px;
}

.zones-head-actions[b-auucd069sd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-left: auto;
}

.icon[b-auucd069sd] { display: block; }

/* ── Panel ───────────────────────────────────────────────── */
.zones-panel[b-auucd069sd] {
    overflow: hidden;
    background: var(--pt-surface);
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-lg);
}

.zones-panel__head[b-auucd069sd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border-bottom: var(--pt-border-card);
}

.zones-panel__head h2[b-auucd069sd] {
    margin: 0;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -.02em;
}

.zones-panel__count[b-auucd069sd] { color: var(--pt-unavailable-icon); font-size: 12.5px; }

/* ── Zone rows ───────────────────────────────────────────── */
.zones-list[b-auucd069sd] { margin: 0; padding: 0; list-style: none; }

.zrow[b-auucd069sd] {
    display: flex;
    align-items: center;
    gap: var(--pt-space-3);
    padding: 14px 18px;
    border-bottom: 1px solid var(--pt-row-divider);
}

.zrow:last-child[b-auucd069sd] { border-bottom: 0; }

.zrow:hover[b-auucd069sd] { background: var(--pt-row-hover); }

.zrow__icon[b-auucd069sd] {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--pt-radius-md);
    background: var(--pt-cream-100);
    color: var(--pt-forest-700);
}

.zrow__body[b-auucd069sd] { display: grid; gap: 2px; min-width: 0; }

.zrow__name[b-auucd069sd] {
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-weight: 700;
    font-size: 15px;
}

.zrow__meta[b-auucd069sd] { color: var(--pt-text-muted); font-size: 12.5px; }

.zrow__actions[b-auucd069sd] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pt-space-2);
    margin-left: auto;
}

.zrow--unzoned[b-auucd069sd] { background: var(--pt-tray-bg); }
.zrow--unzoned:hover[b-auucd069sd] { background: var(--pt-tray-bg); }
.zrow--unzoned .zrow__icon[b-auucd069sd] { color: var(--pt-text-faint); }
.zrow--unzoned .zrow__name[b-auucd069sd] { color: var(--pt-text-secondary); }

.zrow__hint[b-auucd069sd] {
    max-width: 34ch;
    margin-left: auto;
    color: var(--pt-text-faint);
    font-size: 12.5px;
    text-align: right;
}

.zrow--edit[b-auucd069sd] {
    align-items: flex-start;
    background: var(--pt-tray-bg);
}

.zrow--edit:hover[b-auucd069sd] { background: var(--pt-tray-bg); }

.zrow__edit[b-auucd069sd] {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 420px;
    gap: var(--pt-space-1);
}

/* The create/rename row's own action pair sits at the bottom of the row, not centered against
   the label+input+error stack above it. */
.zrow--edit .zrow__actions[b-auucd069sd] { align-self: flex-end; }

.zones-foot[b-auucd069sd] {
    margin: var(--pt-space-3) 0 0;
    color: var(--pt-text-muted);
    font-size: 12px;
    line-height: 1.5;
}

/* ── Día 1 — anatomía fija de la referencia de componentes (sección 5). Sin mascota. ────── */
.dayone[b-auucd069sd] {
    box-sizing: border-box;
    max-width: 720px;
    padding: 28px 32px;
    border: 1px solid var(--pt-line-200);
    border-radius: var(--pt-radius-lg);
    background: var(--pt-app-bg);
}

.dayone__label[b-auucd069sd] {
    display: block;
    margin: 0 0 10px;
    color: var(--pt-on-warning);
    font-family: var(--pt-font-mono);
    font-size: 8.5px;
    letter-spacing: .12em;
}

.dayone__title[b-auucd069sd] {
    margin: 0;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 21px;
    letter-spacing: -.025em;
}

.dayone__lead[b-auucd069sd] {
    max-width: 56ch;
    margin: 8px 0 0;
    color: var(--pt-text-muted);
    font-size: 14px;
    line-height: 1.6;
}

.dayone__tasks[b-auucd069sd] {
    display: grid;
    gap: 2px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.dayone__task[b-auucd069sd] {
    display: flex;
    align-items: center;
    gap: var(--pt-space-3);
    padding: 12px 0;
    border-top: 1px solid var(--pt-row-divider);
}

.dayone__task:last-child[b-auucd069sd] { border-bottom: 1px solid var(--pt-row-divider); }

.dayone__task-icon[b-auucd069sd] { flex: none; color: var(--pt-forest-600); }

.dayone__task-body[b-auucd069sd] { display: grid; gap: 2px; min-width: 0; }

.dayone__task-title[b-auucd069sd] {
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-weight: 700;
    font-size: 14px;
}

.dayone__task-text[b-auucd069sd] { color: var(--pt-text-muted); font-size: 12.5px; line-height: 1.5; }

.dayone__task .capy-form-action[b-auucd069sd] { flex: none; margin-left: auto; }

.dayone__foot[b-auucd069sd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pt-space-3);
    margin-top: 20px;
}

.dayone__note[b-auucd069sd] { color: var(--pt-text-faint); font-size: 12.5px; }

/* ── Loading skeleton and inline error (component reference §6, same values as
   Tables.razor.css / QrCodes.razor.css) ──────────────────────────────────── */
.zones-skeleton[b-auucd069sd] { display: grid; gap: 10px; padding: 18px; }

.zones-skeleton__bar[b-auucd069sd] {
    border-radius: var(--pt-radius-md);
    background: var(--pt-cream-100);
    animation: zones-pulse-b-auucd069sd 1.4s var(--pt-ease-soft) infinite;
}

.zones-skeleton__bar--title[b-auucd069sd] { width: 240px; height: 20px; }
.zones-skeleton__bar--row[b-auucd069sd] { height: 64px; }

@keyframes zones-pulse-b-auucd069sd { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.inline-error[b-auucd069sd] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-sizing: border-box;
    max-width: 720px;
    margin-bottom: var(--pt-space-4);
    padding: 13px 15px;
    border: 1px solid oklch(from var(--pt-danger) l c h / .25);
    border-radius: 10px;
    background: oklch(from var(--pt-danger) l c h / .08);
}

.inline-error__icon[b-auucd069sd] { flex: none; margin-top: 1px; color: var(--pt-danger); }
.inline-error__body[b-auucd069sd] { display: grid; gap: 3px; min-width: 0; }
.inline-error__title[b-auucd069sd] { color: var(--pt-on-danger); font-weight: 800; font-size: 13px; }
.inline-error__detail[b-auucd069sd] { color: var(--pt-text-secondary); font-size: 12px; line-height: 1.5; }
.inline-error .capy-form-action[b-auucd069sd] { flex: none; margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
    .zones-skeleton__bar[b-auucd069sd] { animation: none; }
}

/* ── Mobile (component reference §9: 1440 → 820 rail → 600 tables become a list) ────────── */
@media (max-width: 600px) {
    .zones-header h1[b-auucd069sd] { font-size: 22px; }
    .zones-head-actions[b-auucd069sd] { width: 100%; margin-left: 0; }
    .zones-head-actions .capy-form-action[b-auucd069sd] { flex: 1 1 auto; }
    .zrow[b-auucd069sd] { flex-wrap: wrap; padding: 14px; }
    .zrow__actions[b-auucd069sd] { width: 100%; margin-left: 0; }
    .zrow__actions .capy-form-action[b-auucd069sd] { flex: 1 1 auto; }
    .zrow__hint[b-auucd069sd] { width: 100%; max-width: none; margin-left: 0; text-align: left; }
    .zrow__edit[b-auucd069sd] { max-width: none; }
}

@media (hover: none) and (pointer: coarse) {
    /* Was min-height: 44px inside the @media (max-width: 600px) block above — touch sizing keyed
       on viewport width, which the plan forbids, and an inlined touch-token value at the call
       site, which the plan also forbids. Moved here and switched to the token. */
    .zones-head-actions .capy-form-action[b-auucd069sd],
    .zrow__actions .capy-form-action[b-auucd069sd] { min-height: var(--pt-action-min-height-touch); }
}
/* /Components/Pages/Takeaway/NewTakeawayOrder.razor.rz.scp.css */
.new-order-header a[b-8f4uql0b9h] { font-size: 13px; font-weight: 700; text-decoration: none; color: var(--pt-forest-600); }
.new-order-header h1[b-8f4uql0b9h] { margin: 4px 0 0; font-family: var(--pt-font-display); font-size: 26px; color: var(--pt-ink-900); }
.new-order-header p[b-8f4uql0b9h] { margin: 2px 0 18px; color: var(--pt-text-muted); font-size: 14px; }
.new-order[b-8f4uql0b9h] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 520px); gap: 20px; align-items: start; }
.new-order__menu[b-8f4uql0b9h], .new-order__ticket[b-8f4uql0b9h] { background: var(--pt-surface); border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-lg); box-shadow: var(--pt-shadow-card); overflow: hidden; }
.new-order__menu-head[b-8f4uql0b9h] { padding: var(--pt-space-4); display: flex; flex-direction: column; gap: var(--pt-space-3); border-bottom: var(--pt-border-row); }
.new-order__cats[b-8f4uql0b9h] { display: flex; gap: var(--pt-space-2); flex-wrap: wrap; }
.new-order__cat[b-8f4uql0b9h] { border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-pill); padding: 6px 14px; background: var(--pt-surface);
    font: 700 13px var(--pt-font-body); color: var(--pt-text-secondary); cursor: pointer; min-height: 34px; }
.new-order__cat.is-on[b-8f4uql0b9h] { background: var(--pt-forest-700); border-color: var(--pt-forest-700); color: var(--pt-cream-50); }
.new-order__items[b-8f4uql0b9h] { list-style: none; margin: 0; padding: 0; max-height: 640px; overflow-y: auto; }
.new-order__item[b-8f4uql0b9h] { border-bottom: var(--pt-border-row); padding: var(--pt-space-3) var(--pt-space-4); }
.new-order__item.is-out[b-8f4uql0b9h] { opacity: .55; }
.new-order__item-row[b-8f4uql0b9h] { display: flex; align-items: center; gap: var(--pt-space-3); }
.new-order__item-row--end[b-8f4uql0b9h] { justify-content: flex-end; }
.new-order__item-row small[b-8f4uql0b9h] { display: block; color: var(--pt-text-muted); font-size: 12.5px; }
.new-order__price[b-8f4uql0b9h] { margin-left: auto; font-weight: 800; white-space: nowrap; }
.new-order__add[b-8f4uql0b9h] { width: var(--pt-action-min-height); height: var(--pt-action-min-height); border-radius: var(--pt-radius-md);
    border: 1px solid var(--pt-cream-300); background: var(--pt-surface); color: var(--pt-forest-700); cursor: pointer; }
@media (hover: none) and (pointer: coarse) { .new-order__add[b-8f4uql0b9h] { width: var(--pt-action-min-height-touch); height: var(--pt-action-min-height-touch); } }
@media (hover: none) and (pointer: coarse) { .new-order__cat[b-8f4uql0b9h] { min-height: var(--pt-action-min-height-touch); } }
@media (hover: none) and (pointer: coarse) { .new-order-header a[b-8f4uql0b9h] { display: inline-flex; align-items: center; min-height: var(--pt-action-min-height-touch); } }
.new-order__options[b-8f4uql0b9h] { display: flex; flex-direction: column; gap: var(--pt-space-3); background: var(--pt-radio-selected); margin: calc(-1 * var(--pt-space-3)) calc(-1 * var(--pt-space-4)); padding: var(--pt-space-3) var(--pt-space-4); }
.new-order__options fieldset[b-8f4uql0b9h] { border: 0; padding: 0; margin: 0; display: flex; gap: var(--pt-space-2); flex-wrap: wrap; }
.new-order__options legend[b-8f4uql0b9h] { font-size: 13px; font-weight: 800; color: var(--pt-text-strong); margin-bottom: 6px; }
.new-order__choice[b-8f4uql0b9h] { display: inline-flex; align-items: center; gap: var(--pt-space-2); border: 1px solid var(--pt-line-200);
    border-radius: var(--pt-radius-md); padding: var(--pt-space-2) var(--pt-space-3); font-size: 14px; font-weight: 700; background: var(--pt-surface); min-height: 40px; }
.new-order__foot[b-8f4uql0b9h] { padding: var(--pt-space-3) var(--pt-space-4); margin: 0; }
/* Numbered by CSS: a step that is not rendered (address on pickup, schedule when off) is not counted. */
.new-order__steps[b-8f4uql0b9h] { padding: 18px 20px; display: flex; flex-direction: column; gap: 18px; counter-reset: new-order-step; }
.new-order__step[b-8f4uql0b9h] { display: flex; flex-direction: column; gap: 10px; counter-increment: new-order-step; }
.new-order__step h2[b-8f4uql0b9h] { margin: 0; font-family: var(--pt-font-display); font-size: 16px; display: flex; align-items: center; gap: 10px; }
.new-order__step h2 span[b-8f4uql0b9h] { width: 24px; height: 24px; border-radius: 50%; background: var(--pt-forest-700); color: var(--pt-cream-50); font-size: 13px; display: grid; place-items: center; }
.new-order__step h2 span[b-8f4uql0b9h]::before { content: counter(new-order-step); }
.new-order__seg[b-8f4uql0b9h] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pt-space-2); }
.new-order__pair[b-8f4uql0b9h] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.new-order__address[b-8f4uql0b9h] { position: relative; }
.new-order__suggestions[b-8f4uql0b9h], .new-order__ask[b-8f4uql0b9h] { animation: capy-rise 160ms var(--pt-ease-enter) both; }
.new-order__suggestions[b-8f4uql0b9h] { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; list-style: none; margin: 4px 0 0; padding: 4px; background: var(--pt-surface);
    border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-md); box-shadow: var(--pt-shadow-popover); }
.new-order__suggestions button[b-8f4uql0b9h] { all: unset; display: block; width: 100%; padding: var(--pt-space-2) var(--pt-space-3); border-radius: var(--pt-radius-sm); cursor: pointer; }
.new-order__suggestions button:hover[b-8f4uql0b9h], .new-order__suggestions button:focus-visible[b-8f4uql0b9h] { background: var(--pt-row-hover); }
.new-order__found[b-8f4uql0b9h] { margin: 0; display: flex; gap: var(--pt-space-2); align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--pt-text-secondary); }
.new-order__attribution[b-8f4uql0b9h] { margin: 0; font-size: 11px; color: var(--pt-text-muted); }
.new-order__radios[b-8f4uql0b9h] { display: flex; gap: var(--pt-space-2); flex-wrap: wrap; align-items: center; }
.new-order__check[b-8f4uql0b9h] { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--pt-text-strong); }
.new-order__line[b-8f4uql0b9h] { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: var(--pt-space-2) 0; border-bottom: var(--pt-border-row); }
.new-order__line > span:first-child[b-8f4uql0b9h] { flex: 1; }
.new-order__line small[b-8f4uql0b9h] { display: block; color: var(--pt-text-muted); font-size: 12.5px; }
.new-order__line-note[b-8f4uql0b9h] { margin: var(--pt-space-2) 0; }
.new-order__qty[b-8f4uql0b9h] { display: inline-flex; align-items: center; border: 1px solid var(--pt-cream-300); border-radius: var(--pt-radius-md); overflow: hidden; }
.new-order__qty button[b-8f4uql0b9h] { width: 34px; height: 34px; border: 0; background: var(--pt-surface); font: 800 15px var(--pt-font-body); color: var(--pt-forest-600); cursor: pointer; }
.new-order__qty span[b-8f4uql0b9h] { min-width: 24px; text-align: center; font-weight: 800; }
.new-order__summary[b-8f4uql0b9h] { background: var(--pt-app-bg); border-top: 1px solid var(--pt-line-200); padding: var(--pt-space-4) 20px; display: flex; flex-direction: column; gap: var(--pt-space-2); }
.new-order__summary > p[b-8f4uql0b9h] { margin: 0; display: flex; justify-content: space-between; font-size: 14px; color: var(--pt-text-secondary); }
.new-order__warning[b-8f4uql0b9h] { display: flex !important; gap: var(--pt-space-2); justify-content: flex-start !important; background: var(--pt-occupied-tint);
    color: var(--pt-on-warning) !important; border-radius: var(--pt-radius-md); padding: var(--pt-space-2) var(--pt-space-3); font-weight: 700; }
.new-order__total[b-8f4uql0b9h] { display: flex; align-items: center; gap: var(--pt-space-3); margin-top: 4px; }
.new-order__total > span[b-8f4uql0b9h] { font-family: var(--pt-font-display); font-weight: 700; font-size: 22px; color: var(--pt-ink-900); }
.new-order__total button[b-8f4uql0b9h] { margin-left: auto; min-height: 46px; padding: 0 24px; }
.new-order-error[b-8f4uql0b9h] { color: var(--pt-danger); font-weight: 700; }
.takeaway-chip[b-8f4uql0b9h] { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; border-radius: var(--pt-radius-chip); padding: 3px 8px; }
.takeaway-chip--ok[b-8f4uql0b9h] { background: var(--pt-available-tint); color: var(--pt-on-success); }
@media (max-width: 1080px) { .new-order[b-8f4uql0b9h] { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .new-order__items[b-8f4uql0b9h] { max-height: 60vh; } }
@media (max-width: 760px) {
    /* One scrolling row instead of five wrapped ones; same approach as .settings-nav. */
    .new-order__cats[b-8f4uql0b9h] { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-block: 2px; }
    .new-order__cats[b-8f4uql0b9h]::-webkit-scrollbar { display: none; }
    .new-order__cat[b-8f4uql0b9h] { flex: 0 0 auto; white-space: nowrap; }
}
@media (max-width: 600px) { .new-order__steps[b-8f4uql0b9h] { padding: var(--pt-space-4); } .new-order__summary[b-8f4uql0b9h] { padding: var(--pt-space-4); } }
@media (max-width: 480px) { .new-order__seg[b-8f4uql0b9h], .new-order__pair[b-8f4uql0b9h] { grid-template-columns: minmax(0, 1fr); } }
@media (hover: none) and (pointer: coarse) { .new-order__qty button[b-8f4uql0b9h] { width: var(--pt-action-min-height-touch); height: var(--pt-action-min-height-touch); } }
@media (hover: none) and (pointer: coarse) { .new-order__choice[b-8f4uql0b9h] { min-height: var(--pt-action-min-height-touch); } }
.new-order__cat[b-8f4uql0b9h], .new-order__add[b-8f4uql0b9h], .new-order__qty button[b-8f4uql0b9h], .new-order-header a[b-8f4uql0b9h] { transition: background var(--pt-dur-hover) var(--pt-ease-soft), color var(--pt-dur-hover) var(--pt-ease-soft), border-color var(--pt-dur-hover) var(--pt-ease-soft); }
@media (hover: hover) {
    .new-order__cat:hover:not(.is-on)[b-8f4uql0b9h] { background: var(--pt-row-hover); border-color: var(--pt-cream-300); }
    .new-order__cat.is-on:hover[b-8f4uql0b9h] { background: var(--pt-forest-600); border-color: var(--pt-forest-600); }
    .new-order__add:hover:not(:disabled)[b-8f4uql0b9h] { background: var(--pt-forest-700); border-color: var(--pt-forest-700); color: var(--pt-cream-50); }
    .new-order__qty button:hover[b-8f4uql0b9h] { background: var(--pt-row-hover); color: var(--pt-forest-700); }
    .new-order-header a:hover[b-8f4uql0b9h] { color: var(--pt-forest-700); text-decoration: underline; }
}
.new-order__created[b-8f4uql0b9h] { max-width: 560px; display: flex; flex-direction: column; gap: var(--pt-space-3); padding: var(--pt-space-6);
    background: var(--pt-surface); border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-lg); box-shadow: var(--pt-shadow-card); }
.new-order__created h2[b-8f4uql0b9h] { margin: 0; font-family: var(--pt-font-display); font-size: var(--pt-text-title); color: var(--pt-ink-900); }
.new-order__created p[b-8f4uql0b9h] { margin: 0; color: var(--pt-text-secondary); }
.new-order__created-url[b-8f4uql0b9h] { user-select: all; }
.new-order__created-actions[b-8f4uql0b9h] { display: flex; flex-wrap: wrap; gap: var(--pt-space-2); }
@media (hover: none) and (pointer: coarse) { .new-order__created a[b-8f4uql0b9h] { display: inline-flex; align-items: center; min-height: var(--pt-action-min-height-touch); } }
@media (hover: hover) { .new-order__created a:hover[b-8f4uql0b9h] { text-decoration: none; } }

/* The shared radio card: position for its hidden input, room for the channel icon. */
.new-order__seg .capy-radio-card[b-8f4uql0b9h] { position: relative; cursor: pointer; }
.new-order__seg .capy-radio-card__title i[b-8f4uql0b9h] { margin-right: 4px; color: var(--pt-text-muted); }
@media (hover: hover) { .new-order__seg .capy-radio-card:hover:not(:has(input:checked))[b-8f4uql0b9h] { border-color: var(--pt-cream-300); background: var(--pt-row-hover); } }
/* A step is a flex column: keep the shared segmented control at its own width, as in "¿Para cuándo?". */
.new-order__step > .capy-segmented[b-8f4uql0b9h] { align-self: flex-start; }
.new-order__choice--count output[b-8f4uql0b9h] { min-width: 1.5em; text-align: center; font-variant-numeric: tabular-nums; }
.new-order__step[b-8f4uql0b9h] { min-width: 32px; min-height: 32px; border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-md); background: var(--pt-surface); cursor: pointer; }
.new-order__step:disabled[b-8f4uql0b9h] { opacity: .45; cursor: default; }
@media (hover: none) and (pointer: coarse) { .new-order__step[b-8f4uql0b9h] { min-width: var(--pt-action-min-height-touch); min-height: var(--pt-action-min-height-touch); } }
/* /Components/Pages/Takeaway/PromotionDrawer.razor.rz.scp.css */
.promo-drawer[b-ogpt0ycqqb] { background: var(--pt-surface); border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-lg); box-shadow: var(--pt-shadow-panel);
    display: flex; flex-direction: column; min-width: 0; position: sticky; top: var(--pt-space-4); max-height: calc(100vh - 2 * var(--pt-space-4));
    animation: promo-drawer-in-b-ogpt0ycqqb var(--pt-dur-hover) var(--pt-ease-soft) both; }
.promo-drawer:focus[b-ogpt0ycqqb] { outline: none; }
.promo-drawer__head[b-ogpt0ycqqb] { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--pt-space-3); padding: 20px 20px 12px; }
.promo-drawer__step[b-ogpt0ycqqb] { margin: 0 0 2px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pt-text-muted); }
.promo-drawer h2[b-ogpt0ycqqb] { margin: 0; font-family: var(--pt-font-display); font-size: 20px; color: var(--pt-ink-900); overflow-wrap: anywhere; }
.promo-drawer__close[b-ogpt0ycqqb] { width: var(--pt-action-min-height); height: var(--pt-action-min-height); border: 0; background: transparent; border-radius: var(--pt-radius-md);
    color: var(--pt-text-secondary); cursor: pointer; flex: none; }
.promo-drawer__close:focus-visible[b-ogpt0ycqqb] { outline: 2px solid var(--pt-forest-600); outline-offset: 2px; }
.promo-drawer__body[b-ogpt0ycqqb] { flex: 1; overflow-y: auto; padding: 0 20px 16px; display: flex; flex-direction: column; gap: var(--pt-space-3); }
.promo-drawer__foot[b-ogpt0ycqqb] { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--pt-space-2); padding: 14px 20px; border-top: 1px solid var(--pt-line-200); background: var(--pt-app-bg);
    border-radius: 0 0 var(--pt-radius-lg) var(--pt-radius-lg); }

/* The shared segmented control, stretched to the form's width. */
.promo-segmented[b-ogpt0ycqqb] { display: flex; }
.promo-segmented .capy-segmented__option[b-ogpt0ycqqb] { flex: 1; }
.promo-days button:focus-visible[b-ogpt0ycqqb], .promo-presets button:focus-visible[b-ogpt0ycqqb] { outline: 2px solid var(--pt-forest-600); outline-offset: -2px; }

/* "Regalo tras una compra" does not fit a third of the drawer on one line, so the options may wrap. */
.promo-segmented--wrap .capy-segmented__option[b-ogpt0ycqqb] { line-height: 1.2; padding-block: var(--pt-space-2); }
/* A saved promotion cannot change how it activates: the chosen option stays readable, the others step back. */
.promo-segmented .capy-segmented__option:disabled[b-ogpt0ycqqb] { cursor: not-allowed; }
.promo-segmented .capy-segmented__option:disabled:not([aria-pressed="true"])[b-ogpt0ycqqb] { opacity: .55; }

.promo-code[b-ogpt0ycqqb] { display: flex; gap: var(--pt-space-2); }
.promo-code .field__control[b-ogpt0ycqqb] { flex: 1; min-width: 0; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.promo-code .capy-form-action[b-ogpt0ycqqb] { flex: none; }
/* Under a two-column row the hint reads as that row's caption, not as a field of its own. */
.promo-hint[b-ogpt0ycqqb] { margin-top: calc(var(--pt-space-2) * -1); }

.takeaway-error[b-ogpt0ycqqb] { color: var(--pt-danger); font-weight: 700; margin: 0; }
.promo-presets[b-ogpt0ycqqb] { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.promo-presets button[b-ogpt0ycqqb] { border: 0; border-radius: var(--pt-radius-pill); padding: 4px 11px; background: var(--pt-chrome-info-tint); color: var(--pt-on-info);
    font: 700 12px var(--pt-font-body); cursor: pointer; }
.promo-days[b-ogpt0ycqqb] { display: flex; gap: 4px; }
.promo-days button[b-ogpt0ycqqb] { flex: 1; min-width: 0; min-height: 36px; border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-md); background: var(--pt-surface);
    color: var(--pt-text-secondary); font: 800 12px var(--pt-font-body); cursor: pointer;
    transition: background var(--pt-dur-hover) var(--pt-ease-soft), border-color var(--pt-dur-hover) var(--pt-ease-soft); }
.promo-days button.is-on[b-ogpt0ycqqb] { background: var(--pt-available-tint); border-color: var(--pt-forest-600); color: var(--pt-on-success); }
.promo-two[b-ogpt0ycqqb] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--pt-space-3); }
.promo-check[b-ogpt0ycqqb] { display: flex; gap: 9px; align-items: center; font-size: 14px; cursor: pointer; }

.promo-dishes[b-ogpt0ycqqb] { border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-md); padding: var(--pt-space-3); margin: 0; min-width: 0; }
.promo-dishes--error[b-ogpt0ycqqb] { border-color: var(--pt-danger); background: var(--pt-danger-surface); }
.promo-dishes legend[b-ogpt0ycqqb] { padding: 0 6px; font-size: 12px; font-weight: 800; color: var(--pt-text-secondary); }
.promo-dishes legend span[b-ogpt0ycqqb] { font-weight: 600; color: var(--pt-text-muted); }
.promo-dishes__list[b-ogpt0ycqqb] { max-height: 220px; overflow-y: auto; margin-top: var(--pt-space-2); }
.promo-dishes__group[b-ogpt0ycqqb] { margin: var(--pt-space-2) 0 2px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--pt-text-muted); }
.promo-dishes__item[b-ogpt0ycqqb] { display: flex; align-items: center; gap: var(--pt-space-2); padding: 6px 2px; cursor: pointer; font-size: 14px; }
.promo-dishes__item span[b-ogpt0ycqqb] { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.promo-dishes__item small[b-ogpt0ycqqb] { color: var(--pt-text-muted); white-space: nowrap; }

.promo-summary[b-ogpt0ycqqb] { margin: 0 20px 14px; background: var(--pt-available-tint); border: 1px solid var(--pt-chart-track); border-radius: var(--pt-radius-md); padding: var(--pt-space-3);
    color: var(--pt-on-success); animation: promo-reveal-b-ogpt0ycqqb var(--pt-dur-base) var(--pt-ease-soft) both; }
.promo-summary b[b-ogpt0ycqqb] { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.promo-summary p[b-ogpt0ycqqb] { margin: 2px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.promo-summary__dish[b-ogpt0ycqqb] { display: flex; align-items: center; justify-content: space-between; gap: var(--pt-space-2); margin-top: 8px; padding: 7px 10px; background: var(--pt-surface);
    border-radius: var(--pt-radius-md); font-size: 13.5px; }
.promo-summary__dish > span:first-child[b-ogpt0ycqqb] { min-width: 0; overflow-wrap: anywhere; }
.promo-summary__dish > span:last-child[b-ogpt0ycqqb] { display: flex; align-items: baseline; gap: 6px; flex: none; font-variant-numeric: tabular-nums; }
.promo-summary__dish s[b-ogpt0ycqqb] { color: var(--pt-text-muted); }
.promo-summary__dish em[b-ogpt0ycqqb] { font-style: normal; font-size: 12px; font-weight: 700; padding: 1px 6px; border-radius: var(--pt-radius-md); background: var(--pt-available-tint); }

@keyframes promo-drawer-in-b-ogpt0ycqqb { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes promo-reveal-b-ogpt0ycqqb { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .promo-drawer[b-ogpt0ycqqb], .promo-summary[b-ogpt0ycqqb] { animation: none; } .promo-days button[b-ogpt0ycqqb] { transition: none; } }
@media (hover: none) and (pointer: coarse) { .promo-days button[b-ogpt0ycqqb] { min-height: var(--pt-action-min-height-touch); } }

/* Below the page's two-column breakpoint the form becomes a sheet over the list instead of squeezing it. */
@media (max-width: 1100px) {
    .promo-drawer[b-ogpt0ycqqb] { position: fixed; inset: 0 0 0 auto; width: min(460px, 100vw); max-height: none; z-index: 300; border-radius: 0; top: 0; }
    .promo-drawer__foot[b-ogpt0ycqqb] { border-radius: 0; }
}

/* A refused save explains itself on its own line, above Cancel and Save. */
.promo-drawer__summary[b-ogpt0ycqqb] { flex-basis: 100%; margin: 0; }
/* /Components/Pages/Takeaway/PromotionsPage.razor.rz.scp.css */
.takeaway-header[b-9kck82l80j] { display: flex; align-items: flex-end; gap: var(--pt-space-4); margin-bottom: 18px; flex-wrap: wrap; }
.takeaway-header h1[b-9kck82l80j] { margin: 0; font-family: var(--pt-font-display); font-size: 26px; letter-spacing: -.015em; color: var(--pt-ink-900); }
.takeaway-header p[b-9kck82l80j] { margin: 2px 0 0; color: var(--pt-text-muted); font-size: 14px; }
.takeaway-header__share[b-9kck82l80j] { margin-left: auto; }
.takeaway-error[b-9kck82l80j] { color: var(--pt-danger); font-weight: 700; }
.takeaway-empty-state[b-9kck82l80j] { color: var(--pt-text-secondary); }
/* Two tracks always, so opening and closing the editor slides the list over instead of jumping (grid tracks interpolate). */
.promos-layout[b-9kck82l80j] { display: grid; grid-template-columns: minmax(0, 1fr) 0px; column-gap: 0; row-gap: var(--pt-space-6); align-items: start;
    transition: grid-template-columns var(--pt-dur-hover) var(--pt-ease-soft), column-gap var(--pt-dur-hover) var(--pt-ease-soft); }
.promos-layout.has-drawer[b-9kck82l80j] { grid-template-columns: minmax(0, 1fr) 400px; column-gap: var(--pt-space-6); }
@media (prefers-reduced-motion: reduce) { .promos-layout[b-9kck82l80j] { transition: none; } }
.promos-main[b-9kck82l80j] { min-width: 0; }
/* Estado and Cómo se activa filters: the Pedidos history toolbar pattern (outlined mint when pressed, a count bubble). */
.promos-toolbar[b-9kck82l80j] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--pt-space-4); margin-bottom: 18px; padding: 14px 18px;
    background: var(--pt-surface); border: var(--pt-border-card); border-radius: var(--pt-radius-lg); }
.promos-toolbar__group[b-9kck82l80j] { min-width: 0; }
.promos-toolbar__eyebrow[b-9kck82l80j] { display: block; margin-bottom: 8px; font-family: var(--pt-font-mono); font-size: 11px; letter-spacing: .12em; color: var(--pt-unavailable-text); }
.promos-toolbar__pills[b-9kck82l80j] { display: flex; flex-wrap: wrap; gap: 6px; }
.promos-toolbar__new[b-9kck82l80j] { margin-left: auto; }
.promos-state[b-9kck82l80j] { min-height: 42px; box-sizing: border-box; display: inline-flex; align-items: center; gap: 7px; border: var(--pt-border-card);
    border-radius: var(--pt-radius-md); padding: 10px 14px; background: var(--pt-surface); color: var(--pt-text-strong);
    font: 700 13px var(--pt-font-body); cursor: pointer; transition: background var(--pt-dur-hover) var(--pt-ease-soft), color var(--pt-dur-hover) var(--pt-ease-soft); }
.promos-state:focus-visible[b-9kck82l80j] { outline: var(--pt-focus-outline); outline-offset: 2px; }
@media (hover: hover) { .promos-state:hover[b-9kck82l80j] { background: var(--pt-row-hover); } }
.promos-state[aria-pressed="true"][b-9kck82l80j] { padding: 9px 13px; border: 2px solid var(--pt-forest-600); background: var(--pt-available-tint); color: var(--pt-forest-600); }
.promos-state__n[b-9kck82l80j] { padding: 1px 7px; border-radius: var(--pt-radius-pill); background: var(--pt-row-divider); color: var(--pt-text-secondary); font-size: 11.5px; font-weight: 800; }
.promos-state[aria-pressed="true"] .promos-state__n[b-9kck82l80j] { background: var(--pt-surface); color: var(--pt-forest-600); }

.promo-row[b-9kck82l80j] { display: flex; align-items: center; gap: var(--pt-space-3); background: var(--pt-surface); border: 1px solid var(--pt-line-200);
    border-radius: var(--pt-radius-lg); box-shadow: var(--pt-shadow-card); padding: var(--pt-space-3) var(--pt-space-4); margin-bottom: 10px; min-width: 0;
    animation: promo-reveal-b-9kck82l80j var(--pt-dur-base) var(--pt-ease-soft) both;
    transition: border-color var(--pt-dur-hover) var(--pt-ease-soft), box-shadow var(--pt-dur-hover) var(--pt-ease-soft); }
.promo-row.is-selected[b-9kck82l80j] { border-color: var(--pt-forest-600); box-shadow: var(--pt-selected-halo); }
/* The value comes first: it is what an owner scans the list for. Percent and money are forest, a free item is the success green, a paused promotion goes grey. */
.promo-value[b-9kck82l80j] { flex: none; min-width: 66px; height: 44px; box-sizing: border-box; padding: 0 8px; border-radius: 10px; display: grid; place-items: center; white-space: nowrap;
    background: var(--pt-forest-700); color: var(--pt-cream-50); font-family: var(--pt-font-display); font-weight: 800; font-size: 17px; }
.promo-value--price[b-9kck82l80j] { font-size: 14px; }
.promo-value--gift[b-9kck82l80j] { background: var(--pt-success); font-size: 13px; letter-spacing: .04em; }
.promo-value--off[b-9kck82l80j] { background: var(--pt-line-200); color: var(--pt-text-muted); }
.promo-row__open[b-9kck82l80j] { all: unset; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; cursor: pointer; align-items: flex-start; }
.promo-row__open:focus-visible[b-9kck82l80j] { outline: 2px solid var(--pt-forest-600); outline-offset: 4px; border-radius: var(--pt-radius-md); }
.promo-row__line[b-9kck82l80j] { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.promo-row__title[b-9kck82l80j] { font-family: var(--pt-font-display); font-weight: 700; font-size: 16px; color: var(--pt-ink-900); overflow-wrap: anywhere; transition: color var(--pt-dur-hover) var(--pt-ease-soft); }
@media (hover: hover) { .promo-row__open:hover .promo-row__title[b-9kck82l80j] { color: var(--pt-forest-700); } }
.promo-row__meta[b-9kck82l80j] { color: var(--pt-text-secondary); font-size: 13px; font-weight: 400; overflow-wrap: anywhere; }
.promo-row__hint[b-9kck82l80j] { color: var(--pt-on-warning); font-size: 12.5px; font-weight: 700; }
.promo-row__use[b-9kck82l80j] { flex: none; width: 150px; text-align: right; color: var(--pt-text-secondary); font-size: 12.5px; white-space: nowrap; }
.promo-row__use b[b-9kck82l80j] { display: block; font-family: var(--pt-font-display); font-size: 16px; color: var(--pt-ink-900); }
.promo-bar[b-9kck82l80j] { height: 5px; margin-top: 5px; border-radius: var(--pt-radius-pill); background: var(--pt-row-divider); overflow: hidden; }
.promo-bar i[b-9kck82l80j] { display: block; height: 100%; border-radius: var(--pt-radius-pill); background: var(--pt-success); }
.promo-row__delete[b-9kck82l80j] { width: var(--pt-action-min-height); height: var(--pt-action-min-height); border: 0; background: transparent; border-radius: var(--pt-radius-md);
    color: var(--pt-text-muted); cursor: pointer; }
.promo-row__delete:hover[b-9kck82l80j] { color: var(--pt-danger); }
.promo-row__delete:focus-visible[b-9kck82l80j] { outline: 2px solid var(--pt-forest-600); outline-offset: 2px; }

.promo-chip[b-9kck82l80j] { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--pt-radius-chip); padding: 2px 8px; font-size: 12px; font-weight: 800;
    background: var(--pt-line-100); color: var(--pt-text-secondary); }
.promo-chip--ok[b-9kck82l80j] { background: var(--pt-available-tint); color: var(--pt-on-success); }
.promo-chip--info[b-9kck82l80j] { background: var(--pt-chrome-info-tint); color: var(--pt-on-info); }
.promo-chip--warn[b-9kck82l80j] { background: var(--pt-occupied-tint); color: var(--pt-on-warning); }
.promo-chip--off[b-9kck82l80j] { background: var(--pt-line-100); color: var(--pt-text-secondary); }

    cursor: pointer; transition: background var(--pt-dur-hover) var(--pt-ease-soft);[b-9kck82l80j] }
    transition: transform var(--pt-dur-hover) var(--pt-ease-soft);[b-9kck82l80j] }

.promos-skeleton[b-9kck82l80j] { display: grid; gap: 10px; }
.promos-skeleton span[b-9kck82l80j] { display: block; height: 72px; border-radius: var(--pt-radius-lg); background: linear-gradient(90deg, var(--pt-line-100), var(--pt-line-200), var(--pt-line-100));
    background-size: 200% 100%; animation: promo-shimmer-b-9kck82l80j 1.3s linear infinite; }

@keyframes promo-reveal-b-9kck82l80j { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* A row whose toggle moved it to another tab: held still long enough to read its new state, then it folds away. 1.4 s, as LeaveAfter. */
.promo-row.is-leaving[b-9kck82l80j] { overflow: hidden; pointer-events: none; animation: promo-leave-b-9kck82l80j 1400ms var(--pt-ease-soft) both; }
@keyframes promo-leave-b-9kck82l80j {
    0%, 55% { opacity: 1; transform: none; max-height: 160px; }
    85% { opacity: 0; transform: translateX(16px); max-height: 160px; margin-bottom: 10px; padding-block: var(--pt-space-3); }
    100% { opacity: 0; transform: translateX(16px); max-height: 0; margin-bottom: 0; padding-block: 0; border-width: 0; }
}
/* The pill the row went to pulses twice, so the owner sees where it is now. */
.promos-state.is-pulse .promos-state__n[b-9kck82l80j] { animation: promo-pulse-b-9kck82l80j 700ms var(--pt-ease-soft) 2; }
@keyframes promo-pulse-b-9kck82l80j { 50% { transform: scale(1.18); background: var(--pt-chrome-warn-tint); color: var(--pt-on-warning); } }
@keyframes promo-shimmer-b-9kck82l80j { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .promo-row[b-9kck82l80j], .promo-row.is-leaving[b-9kck82l80j], .promos-skeleton span[b-9kck82l80j], .promos-state.is-pulse .promos-state__n[b-9kck82l80j] { animation: none; } }
@media (hover: none) and (pointer: coarse) { .promo-row__delete[b-9kck82l80j] { width: var(--pt-action-min-height-touch); height: var(--pt-action-min-height-touch); } .promos-state[b-9kck82l80j] { min-height: var(--pt-action-min-height-touch); } }
@media (max-width: 1100px) { .promos-layout[b-9kck82l80j], .promos-layout.has-drawer[b-9kck82l80j] { grid-template-columns: minmax(0, 1fr); column-gap: 0; } }
/* On a phone the value and the name keep the first line; the usage, the switch and the bin share the one below. */
@media (max-width: 640px) { .promo-row[b-9kck82l80j] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; } .promo-row__open[b-9kck82l80j] { grid-column: 2 / -1; } .promo-row__use[b-9kck82l80j] { grid-column: 1 / 3; width: auto; text-align: left; } }

/* The shared toggle has no busy state: while its request runs it waits, dimmed. */
.capy-toggle:disabled[b-9kck82l80j] { opacity: .55; cursor: progress; }
/* /Components/Pages/Takeaway/PromotionTypeDialog.razor.rz.scp.css */
/* The dress of the dashboard's modals (Shared/ConfirmDialog, Kitchen/ItemUnavailableModal). */
.promo-dialog__scrim[b-2454guu3w4] { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: var(--pt-space-4);
    background: oklch(from var(--pt-ink-900) l c h / .55); animation: promo-fade-b-2454guu3w4 var(--pt-dur-base) var(--pt-ease-soft) both; }
.promo-dialog[b-2454guu3w4] { width: min(620px, 100%); max-height: calc(100dvh - 60px); overflow-y: auto; background: var(--pt-app-bg); border: 1px solid var(--pt-radio-card-border);
    border-radius: 14px; box-shadow: var(--pt-shadow-panel); padding: 26px; animation: promo-pop-b-2454guu3w4 var(--pt-dur-base) var(--pt-ease-soft) both; }
.promo-dialog:focus[b-2454guu3w4] { outline: none; }
.promo-dialog__step[b-2454guu3w4] { margin: 0 0 4px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pt-text-muted); }
.promo-dialog h2[b-2454guu3w4] { margin: 0 0 4px; font-family: var(--pt-font-display); font-size: 22px; color: var(--pt-ink-900); }
.promo-dialog__sub[b-2454guu3w4] { margin: 0; color: var(--pt-text-secondary); }
.promo-dialog__types[b-2454guu3w4] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pt-space-3); margin: 18px 0 22px; }
/* The shared card keeps a description to one line; these explain the type, so let them wrap. */
.promo-dialog__types .capy-radio-card[b-2454guu3w4] { position: relative; align-items: flex-start; cursor: pointer; }
.promo-dialog__types .capy-radio-card__mark[b-2454guu3w4] { margin-top: 2px; }
.promo-dialog__types .capy-radio-card__description[b-2454guu3w4] { white-space: normal; }
.promo-dialog__actions[b-2454guu3w4] { display: flex; justify-content: flex-end; gap: var(--pt-space-2); }
@keyframes promo-fade-b-2454guu3w4 { from { opacity: 0; } to { opacity: 1; } }
@keyframes promo-pop-b-2454guu3w4 { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .promo-dialog__scrim[b-2454guu3w4], .promo-dialog[b-2454guu3w4] { animation: none; } }
@media (max-width: 560px) { .promo-dialog__types[b-2454guu3w4] { grid-template-columns: minmax(0, 1fr); } .promo-dialog[b-2454guu3w4] { padding: 18px; } }
@media (hover: hover) { .promo-dialog__types .capy-radio-card:hover:not(:has(input:checked))[b-2454guu3w4] { border-color: var(--pt-cream-300); background: var(--pt-row-hover); } }
/* /Components/Pages/Takeaway/ShareMenuPopover.razor.rz.scp.css */
.share-pop[b-5d8ukyx5pt] { position: relative; }
.share-pop__trigger:focus-visible[b-5d8ukyx5pt] { outline: none; box-shadow: var(--pt-focus-ring); }

/* Transparent backdrop: a click anywhere outside the panel lands here and closes it. */
.share-pop__scrim[b-5d8ukyx5pt] { position: fixed; inset: 0; z-index: 30; padding: 0; border: 0; background: transparent; cursor: default; }

.share-pop__panel[b-5d8ukyx5pt] { position: absolute; top: calc(100% + var(--pt-space-2)); right: 0; z-index: 31; box-sizing: border-box; width: 460px; max-width: calc(100vw - 2 * var(--pt-space-4)); display: flex; flex-direction: column; gap: var(--pt-space-3); padding: var(--pt-space-4); background: var(--pt-surface); border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-lg); box-shadow: var(--pt-shadow-card); animation: share-pop-in-b-5d8ukyx5pt var(--pt-dur-base) var(--pt-ease-soft); }
.share-pop__panel strong[b-5d8ukyx5pt] { font: 700 15px var(--pt-font-display); color: var(--pt-ink-900); }
.share-pop__note[b-5d8ukyx5pt] { margin: 0; color: var(--pt-text-secondary); font-size: 14px; }

.share-pop__url[b-5d8ukyx5pt] { display: flex; flex-wrap: wrap; gap: var(--pt-space-2); min-width: 0; }
.share-pop__url output[b-5d8ukyx5pt] { flex: 1 1 200px; min-width: 0; box-sizing: border-box; padding: 0 var(--pt-space-3); border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-md); background: var(--pt-app-bg); color: var(--pt-ink-900); font: 600 13.5px var(--pt-font-body); line-height: calc(var(--pt-action-min-height) - 2px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }

.share-pop__activate[b-5d8ukyx5pt] { align-self: flex-start; }
.share-pop__all[b-5d8ukyx5pt] { align-self: flex-start; padding: var(--pt-space-1) 0; color: var(--pt-forest-600); font-weight: 700; font-size: 14px; text-decoration: none; border-radius: var(--pt-radius-sm); }
.share-pop__all:hover[b-5d8ukyx5pt] { text-decoration: underline; }
.share-pop__all:focus-visible[b-5d8ukyx5pt], .share-pop__activate:focus-visible[b-5d8ukyx5pt] { outline: none; box-shadow: var(--pt-focus-ring); }

@keyframes share-pop-in-b-5d8ukyx5pt { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .share-pop__panel[b-5d8ukyx5pt] { animation: none; } }

@media (hover: none) and (pointer: coarse) {
    .share-pop__trigger[b-5d8ukyx5pt], .share-pop__activate[b-5d8ukyx5pt] { min-height: var(--pt-action-min-height-touch); }
    .share-pop__all[b-5d8ukyx5pt] { min-height: var(--pt-action-min-height-touch); display: inline-flex; align-items: center; }
    .share-pop__url output[b-5d8ukyx5pt] { line-height: calc(var(--pt-action-min-height-touch) - 2px); }
}

@media (max-width: 560px) {
    /* Left-anchored under the trigger would run off the screen on a phone; pin it to the viewport gutters instead. */
    .share-pop[b-5d8ukyx5pt] { position: static; }
    .share-pop__panel[b-5d8ukyx5pt] { position: fixed; top: auto; right: var(--pt-space-4); left: var(--pt-space-4); width: auto; max-width: none; margin-top: var(--pt-space-2); }
}
/* /Components/Pages/Takeaway/TakeawayBoard.razor.rz.scp.css */
.takeaway-header[b-yyfgzwa8ve] { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--pt-space-4); margin-bottom: 18px; flex-wrap: wrap; }
.takeaway-header h1[b-yyfgzwa8ve] { margin: 0; font-family: var(--pt-font-display); font-size: 26px; letter-spacing: -.015em; color: var(--pt-ink-900); }
.takeaway-header p[b-yyfgzwa8ve] { margin: 2px 0 0; color: var(--pt-text-muted); font-size: 14px; }
.takeaway-header__actions[b-yyfgzwa8ve] { display: flex; align-items: center; gap: var(--pt-space-3); }
.takeaway-header__new[b-yyfgzwa8ve] { min-height: var(--pt-action-min-height); }
.takeaway-channels[b-yyfgzwa8ve] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pt-space-4); margin-bottom: 18px; }
.takeaway-channel[b-yyfgzwa8ve] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pt-space-2) 14px; padding: var(--pt-space-3) var(--pt-space-4); background: var(--pt-surface);
    border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-lg); box-shadow: var(--pt-shadow-card); }
.takeaway-channel__text[b-yyfgzwa8ve] { flex: 1 1 140px; min-width: 0; }
.takeaway-channel b[b-yyfgzwa8ve] { font-family: var(--pt-font-display); font-size: 16px; color: var(--pt-ink-900); }
.takeaway-channel__icon[b-yyfgzwa8ve] { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 19px; }
.takeaway-channel__icon--pickup[b-yyfgzwa8ve] { background: var(--pt-chrome-info-tint); color: var(--pt-on-info); }
.takeaway-channel__icon--delivery[b-yyfgzwa8ve] { background: var(--pt-occupied-tint); color: var(--pt-occupied-fg); }
.takeaway-channel__state[b-yyfgzwa8ve] { display: flex; align-items: center; gap: 6px; font-size: var(--pt-text-caption); color: var(--pt-text-secondary); }
.takeaway-channel__dot[b-yyfgzwa8ve] { width: 8px; height: 8px; border-radius: 50%; background: var(--pt-neutral); }
.takeaway-channel__dot.is-on[b-yyfgzwa8ve] { background: var(--pt-success); }
.takeaway-channel__wait[b-yyfgzwa8ve] { margin-left: auto; white-space: nowrap; display: flex; align-items: center; gap: var(--pt-space-2); font-size: var(--pt-text-caption); color: var(--pt-text-secondary); }
.takeaway-stepper[b-yyfgzwa8ve] { display: inline-flex; align-items: center; border: 1px solid var(--pt-cream-300); border-radius: var(--pt-radius-md); overflow: hidden; background: var(--pt-surface); }
.takeaway-stepper button[b-yyfgzwa8ve] { flex: none; width: 34px; height: var(--pt-action-min-height); border: 0; background: var(--pt-surface); font: 700 16px var(--pt-font-body); color: var(--pt-forest-600); cursor: pointer; }
.takeaway-stepper span[b-yyfgzwa8ve] { min-width: 62px; text-align: center; font-weight: 800; color: var(--pt-ink-900); }
/* Stacked first: two columns, one on a phone. Side by side (>= 1181px) the columns share the row and an empty one is a rail. */
/* Design D: open orders of earlier days, apart from today's columns and above them. */
.takeaway-prior[b-yyfgzwa8ve] { margin: 0 0 var(--pt-space-3); padding: 12px 14px; border-radius: var(--pt-radius-lg);
    background: var(--pt-occupied-tint); border: 1px solid oklch(from var(--pt-on-warning) l c h / .3); display: flex; flex-direction: column; gap: var(--pt-space-2); }
.takeaway-prior__title[b-yyfgzwa8ve] { margin: 0; display: flex; align-items: center; gap: var(--pt-space-2); font-family: var(--pt-font-display);
    font-size: 15px; font-weight: 600; color: var(--pt-on-warning); }
.takeaway-prior__list[b-yyfgzwa8ve] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.takeaway-prior__row[b-yyfgzwa8ve] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; border-radius: var(--pt-radius-md);
    background: var(--pt-surface); border: 1px solid oklch(from var(--pt-on-warning) l c h / .18); font-size: 13px; }
.takeaway-prior__number[b-yyfgzwa8ve] { font-family: var(--pt-font-display); }
.takeaway-prior__who[b-yyfgzwa8ve] { min-width: 0; overflow-wrap: anywhere; color: var(--pt-ink-900); }
.takeaway-prior__due[b-yyfgzwa8ve] { color: var(--pt-text-muted); }
.takeaway-prior__review[b-yyfgzwa8ve] { margin-left: auto; }
.takeaway-prior__more[b-yyfgzwa8ve] { align-self: flex-start; }
.takeaway-prior .takeaway-chip[b-yyfgzwa8ve] { display: inline-flex; align-items: center; font-size: 12px; font-weight: 800; border-radius: var(--pt-radius-chip); padding: 3px 8px; }
.takeaway-prior .takeaway-chip--pickup[b-yyfgzwa8ve] { background: var(--pt-chrome-info-tint); color: var(--pt-on-info); }
.takeaway-prior .takeaway-chip--delivery[b-yyfgzwa8ve] { background: var(--pt-occupied-tint); color: var(--pt-occupied-fg); }
.takeaway-prior .takeaway-chip--late[b-yyfgzwa8ve] { background: var(--pt-danger-summary); color: var(--pt-on-danger); }

.takeaway-columns[b-yyfgzwa8ve] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pt-space-4); align-items: start; }
.takeaway-columns--single[b-yyfgzwa8ve] { grid-template-columns: minmax(0, 1fr); }
.takeaway-column[b-yyfgzwa8ve] { background: var(--pt-row-hover); border-radius: var(--pt-radius-lg); padding: var(--pt-space-3); display: flex; flex-direction: column; gap: 10px; }
.takeaway-column__head[b-yyfgzwa8ve] { display: flex; align-items: center; gap: var(--pt-space-2); padding: 2px 4px; }
.takeaway-column__head b[b-yyfgzwa8ve] { font-family: var(--pt-font-display); font-size: 15px; color: var(--pt-ink-900); }
.takeaway-column__count[b-yyfgzwa8ve] { background: var(--pt-surface); border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-pill); font-size: 12px; font-weight: 800; padding: 0 8px; color: var(--pt-text-secondary); }
.takeaway-column__hint[b-yyfgzwa8ve], .takeaway-column__empty[b-yyfgzwa8ve] { margin: 0 4px; font-size: 12px; color: var(--pt-text-muted); }
/* Etapa and Canal filters: the Pedidos toolbar pattern (outlined mint when pressed, a count bubble). */
.takeaway-filters[b-yyfgzwa8ve] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--pt-space-4); margin-bottom: 18px; padding: 14px 18px;
    background: var(--pt-surface); border: var(--pt-border-card); border-radius: var(--pt-radius-lg); }
.takeaway-filters__group[b-yyfgzwa8ve] { min-width: 0; }
.takeaway-filters__eyebrow[b-yyfgzwa8ve] { display: block; margin-bottom: 8px; font-family: var(--pt-font-mono); font-size: 11px; letter-spacing: .12em; color: var(--pt-unavailable-text); }
.takeaway-filters__pills[b-yyfgzwa8ve] { display: flex; flex-wrap: wrap; gap: 6px; }
.takeaway-stage[b-yyfgzwa8ve] { min-height: 42px; box-sizing: border-box; display: inline-flex; align-items: center; gap: 7px; border: var(--pt-border-card);
    border-radius: var(--pt-radius-md); padding: 10px 14px; background: var(--pt-surface); color: var(--pt-text-strong);
    font: 700 13px var(--pt-font-body); cursor: pointer; }
.takeaway-stage:focus-visible[b-yyfgzwa8ve] { outline: 2px solid var(--pt-forest-600); outline-offset: 2px; }
.takeaway-stage[aria-pressed="true"][b-yyfgzwa8ve] { padding: 9px 13px; border: 2px solid var(--pt-forest-600); background: var(--pt-available-tint); color: var(--pt-forest-600); }
.takeaway-stage__n[b-yyfgzwa8ve] { padding: 1px 7px; border-radius: var(--pt-radius-pill); background: var(--pt-row-divider); color: var(--pt-text-secondary); font-size: 11.5px; font-weight: 800; }
.takeaway-stage[aria-pressed="true"] .takeaway-stage__n[b-yyfgzwa8ve] { background: var(--pt-surface); color: var(--pt-forest-600); }
.takeaway-stage--alert .takeaway-stage__n[b-yyfgzwa8ve],
.takeaway-stage--alert[aria-pressed="true"] .takeaway-stage__n[b-yyfgzwa8ve] { background: var(--pt-chrome-warn-tint); color: var(--pt-on-warning); }
.takeaway-grid[b-yyfgzwa8ve] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
/* Empty columns shrink to rails, so one column can take the whole board: a card never grows past a column's usual width. */
.takeaway-column__cards[b-yyfgzwa8ve] { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; align-items: start; }
.takeaway-rail[b-yyfgzwa8ve] { display: flex; align-items: center; justify-content: space-between; grid-column: 1 / -1; gap: var(--pt-space-2); padding: 8px 14px;
    background: var(--pt-row-hover); border-radius: var(--pt-radius-lg); color: var(--pt-text-secondary); font-size: 12.5px; font-weight: 700; }
.takeaway-rail b[b-yyfgzwa8ve] { font-weight: 800; }
.takeaway-column__hint--alert[b-yyfgzwa8ve] { color: var(--pt-on-warning); font-weight: 700; }
.takeaway-done__total[b-yyfgzwa8ve] { margin: 0 0 var(--pt-space-2); font-weight: 700; color: var(--pt-text-secondary); }
.takeaway-hint[b-yyfgzwa8ve] { margin: var(--pt-space-3) 0 0; font-size: 12px; color: var(--pt-text-muted); }
.takeaway-error[b-yyfgzwa8ve] { color: var(--pt-danger); font-weight: 700; }
.takeaway-empty-state[b-yyfgzwa8ve] { color: var(--pt-text-secondary); }
.takeaway-done[b-yyfgzwa8ve] { margin-top: var(--pt-space-6); background: var(--pt-surface); border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-lg); padding: var(--pt-space-4); }
.takeaway-done h2[b-yyfgzwa8ve] { margin: 0 0 var(--pt-space-2); font-family: var(--pt-font-display); font-size: 17px; }
.takeaway-done ul[b-yyfgzwa8ve] { list-style: none; margin: 0; padding: 0; }
.takeaway-done button[b-yyfgzwa8ve] { all: unset; cursor: pointer; display: block; padding: var(--pt-space-2) 0; border-bottom: var(--pt-border-row); width: 100%; }
.takeaway-done button:focus-visible[b-yyfgzwa8ve] { box-shadow: var(--pt-focus-ring); }
.takeaway-done__tag[b-yyfgzwa8ve] { margin-left: var(--pt-space-2); font-size: 12px; font-weight: 800; color: var(--pt-on-danger); }
@media (hover: none) and (pointer: coarse) { .takeaway-header__new[b-yyfgzwa8ve] { min-height: var(--pt-action-min-height-touch); } }
@media (hover: none) and (pointer: coarse) { .takeaway-stepper button[b-yyfgzwa8ve] { width: var(--pt-action-min-height-touch); height: var(--pt-action-min-height-touch); } }
@media (hover: none) and (pointer: coarse) { .takeaway-stage[b-yyfgzwa8ve] { min-height: var(--pt-action-min-height-touch); } }
/* Side by side, a busy column scrolls on its own and keeps its title and count in view: at peak the
   board was one 18,700 px page, and reaching "Por aceptar" from low in "En cocina" meant scrolling
   it all back. Once a column ends, the wheel carries on with the page. Stacked (<=1180px), the page scrolls. */
@media (min-width: 1181px) {
    .takeaway-columns[b-yyfgzwa8ve] { display: flex; }
    .takeaway-column[b-yyfgzwa8ve] { flex: 1 1 0; min-width: 0; }
    .takeaway-rail[b-yyfgzwa8ve] { flex: 0 0 46px; flex-direction: column; justify-content: center; align-self: stretch; min-height: 150px; padding: var(--pt-space-3) 0; }
    .takeaway-rail span[b-yyfgzwa8ve] { writing-mode: vertical-rl; transform: rotate(180deg); }
}
@media (min-width: 1181px) {
    .takeaway-column[b-yyfgzwa8ve] { max-height: calc(100dvh - 2 * var(--pt-space-4)); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--pt-line-200) transparent; }
    .takeaway-column__head[b-yyfgzwa8ve] { position: sticky; top: calc(-1 * var(--pt-space-3)); z-index: 1; margin: calc(-1 * var(--pt-space-3)) calc(-1 * var(--pt-space-3)) 0;
        padding: var(--pt-space-3) calc(var(--pt-space-3) + 4px) var(--pt-space-2); background: var(--pt-row-hover); }
}
@media (max-width: 1180px) { .takeaway-rail[b-yyfgzwa8ve] { order: 1; } }
@media (max-width: 1180px) { .takeaway-grid[b-yyfgzwa8ve] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1181px) { .takeaway-column[b-yyfgzwa8ve] { min-height: 240px; } }
@media (max-width: 820px) { .takeaway-channels[b-yyfgzwa8ve] { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .takeaway-columns[b-yyfgzwa8ve] { grid-template-columns: minmax(0, 1fr); } .takeaway-grid[b-yyfgzwa8ve] { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
    .takeaway-header[b-yyfgzwa8ve] { flex-direction: column; align-items: stretch; }
    .takeaway-header__actions[b-yyfgzwa8ve] { flex-direction: column-reverse; align-items: stretch; gap: var(--pt-space-2); }
    .takeaway-header__new[b-yyfgzwa8ve] { justify-content: center; }
    .takeaway-channel__wait[b-yyfgzwa8ve] { flex: 1 1 100%; justify-content: space-between; }
}
@media (max-width: 420px) { .takeaway-channel[b-yyfgzwa8ve] { flex-wrap: wrap; } }
.takeaway-stage[b-yyfgzwa8ve], .takeaway-stepper button[b-yyfgzwa8ve], .takeaway-done button[b-yyfgzwa8ve] { transition: background var(--pt-dur-hover) var(--pt-ease-soft), color var(--pt-dur-hover) var(--pt-ease-soft); }
.takeaway-done button[b-yyfgzwa8ve] { border-radius: var(--pt-radius-sm); }
@media (hover: hover) {
    .takeaway-stage:hover[b-yyfgzwa8ve] { background: var(--pt-row-hover); }
    .takeaway-stepper button:hover[b-yyfgzwa8ve] { background: var(--pt-row-hover); color: var(--pt-forest-700); }
    .takeaway-done button:hover[b-yyfgzwa8ve] { background: var(--pt-row-hover); }
}
.takeaway-channel--paused[b-yyfgzwa8ve] { background: var(--pt-chrome-warn-tint); border-color: var(--pt-gold-500); }
.takeaway-channel__paused[b-yyfgzwa8ve] { display: block; font-size: 12px; font-weight: 700; color: var(--pt-on-warning); }
.takeaway-channel__paused--ok[b-yyfgzwa8ve] { color: var(--pt-on-success); }
/* /Components/Pages/Takeaway/TakeawayCard.razor.rz.scp.css */
/* The 2 px border says the channel at a glance; the padding gives back the pixel it takes from the 1 px card. */
.takeaway-card[b-6os85b6otv] { min-width: 0; display: flex; flex-direction: column; gap: var(--pt-space-2); background: var(--pt-surface);
    border: 2px solid var(--pt-line-200); border-radius: var(--pt-radius-lg); padding: 11px 13px;
    box-shadow: var(--pt-shadow-card); }
.takeaway-card--delivery[b-6os85b6otv] { border-color: var(--pt-channel-delivery-border); }
.takeaway-card--pickup[b-6os85b6otv] { border-color: var(--pt-channel-pickup-border); }
/* The channel border keeps its colour; a forest ring says "this is the open one". */
.takeaway-card--selected[b-6os85b6otv] { box-shadow: var(--pt-selected-halo); outline: 2px solid var(--pt-forest-600); outline-offset: 2px; }
.takeaway-card__open[b-6os85b6otv] { all: unset; box-sizing: border-box; width: 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--pt-space-2); cursor: pointer; }
.takeaway-card__open:focus-visible[b-6os85b6otv] { outline: 2px solid var(--pt-forest-600); outline-offset: 4px; border-radius: var(--pt-radius-md); }
.takeaway-card__row[b-6os85b6otv] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--pt-space-2); }
.takeaway-card__row--wrap[b-6os85b6otv] { flex-wrap: wrap; }
.takeaway-card__number[b-6os85b6otv] { font-family: var(--pt-font-display); font-weight: 700; font-size: 20px; color: var(--pt-ink-900); }
.takeaway-card__total[b-6os85b6otv] { margin-left: auto; white-space: nowrap; font-family: var(--pt-font-display); font-weight: 700; font-size: 16px; color: var(--pt-ink-900); }
.takeaway-card__name[b-6os85b6otv] { overflow-wrap: anywhere; font-weight: 800; font-size: 15px; color: var(--pt-ink-900); }
.takeaway-card__meta[b-6os85b6otv] { display: flex; align-items: center; gap: 6px; font-size: var(--pt-text-caption); color: var(--pt-text-secondary); }
.takeaway-card__progress[b-6os85b6otv] { display: block; height: 6px; border-radius: var(--pt-radius-pill); background: var(--pt-row-divider); overflow: hidden; }
.takeaway-card__progress i[b-6os85b6otv] { display: block; height: 100%; background: var(--pt-success); border-radius: var(--pt-radius-pill); }
.takeaway-card__action[b-6os85b6otv] { min-height: var(--pt-action-min-height); border-radius: var(--pt-radius-md); border: 1px solid var(--pt-forest-700);
    background: var(--pt-forest-700); color: var(--pt-cream-50); font: 700 14px var(--pt-font-body); cursor: pointer; }
@media (hover: none) and (pointer: coarse) { .takeaway-card__action[b-6os85b6otv] { min-height: var(--pt-action-min-height-touch); } }
.takeaway-card__action--gold[b-6os85b6otv] { background: var(--pt-gold-500); border-color: var(--pt-gold-500); color: var(--pt-on-gold); }
.takeaway-card__action:disabled[b-6os85b6otv] { opacity: .55; cursor: progress; }
.takeaway-chip[b-6os85b6otv] { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; border-radius: var(--pt-radius-chip);
    padding: 3px 8px; max-width: 100%; overflow-wrap: anywhere; background: var(--pt-line-100); color: var(--pt-text-secondary); }
.takeaway-chip--pickup[b-6os85b6otv] { background: var(--pt-chrome-info-tint); color: var(--pt-on-info); }
.takeaway-chip--delivery[b-6os85b6otv] { background: var(--pt-occupied-tint); color: var(--pt-occupied-fg); }
.takeaway-card__waiting[b-6os85b6otv] { font-size: 12px; font-weight: 800; color: var(--pt-on-warning); }
.takeaway-card__review[b-6os85b6otv] { width: 100%; }
.takeaway-chip--ok[b-6os85b6otv] { background: var(--pt-available-tint); color: var(--pt-on-success); }
.takeaway-chip--warn[b-6os85b6otv] { background: var(--pt-occupied-tint); color: var(--pt-on-warning); }
.takeaway-chip--late[b-6os85b6otv] { background: var(--pt-danger-summary); color: var(--pt-on-danger); }
.takeaway-card[b-6os85b6otv], .takeaway-card__action[b-6os85b6otv] { transition: background var(--pt-dur-hover) var(--pt-ease-soft), border-color var(--pt-dur-hover) var(--pt-ease-soft), box-shadow var(--pt-dur-hover) var(--pt-ease-soft); }
@media (hover: hover) {
    .takeaway-card__review:hover:not(:disabled)[b-6os85b6otv] { background: var(--pt-forest-600); border-color: var(--pt-forest-600); }
    .takeaway-card:not(.takeaway-card--selected):hover[b-6os85b6otv] { box-shadow: var(--pt-shadow-panel); }
    .takeaway-card__open:hover .takeaway-card__number[b-6os85b6otv] { color: var(--pt-forest-600); }
    .takeaway-card__action:hover:not(:disabled)[b-6os85b6otv] { background: var(--pt-forest-600); border-color: var(--pt-forest-600); }
    .takeaway-card__action--gold:hover:not(:disabled)[b-6os85b6otv] { background: var(--pt-gold-400); border-color: var(--pt-gold-400); }
}
/* /Components/Pages/Takeaway/TakeawayOrderDrawer.razor.rz.scp.css */
.takeaway-drawer[b-r7d9vbmhmt] { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); z-index: 300; display: flex; flex-direction: column;
    background: var(--pt-surface); border-left: 1px solid var(--pt-line-200); box-shadow: var(--pt-shadow-panel);
    animation: takeaway-drawer-in-b-r7d9vbmhmt var(--pt-dur-hover) var(--pt-ease-soft); }
.takeaway-drawer.is-closing[b-r7d9vbmhmt] { animation: takeaway-drawer-out-b-r7d9vbmhmt var(--pt-dur-hover) var(--pt-ease-soft) forwards; }
@keyframes takeaway-drawer-in-b-r7d9vbmhmt { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes takeaway-drawer-out-b-r7d9vbmhmt { from { transform: translateX(0); } to { transform: translateX(100%); } }
@media (max-width: 600px) {
    .takeaway-drawer__head[b-r7d9vbmhmt], .takeaway-drawer__body section[b-r7d9vbmhmt], .takeaway-drawer__foot[b-r7d9vbmhmt] { padding-left: var(--pt-space-4); padding-right: var(--pt-space-4); }
}
@media (prefers-reduced-motion: reduce) { .takeaway-drawer[b-r7d9vbmhmt], .takeaway-drawer.is-closing[b-r7d9vbmhmt] { animation: none; } }
.takeaway-drawer:focus[b-r7d9vbmhmt] { outline: none; }
.takeaway-drawer__head[b-r7d9vbmhmt] { padding: 20px 24px 16px; border-bottom: var(--pt-border-row); display: flex; flex-direction: column; gap: var(--pt-space-3); }
.takeaway-drawer__title-row[b-r7d9vbmhmt] { display: flex; align-items: center; gap: var(--pt-space-2); }
.takeaway-drawer__title-row h2[b-r7d9vbmhmt] { margin: 0; font-family: var(--pt-font-display); font-size: var(--pt-text-title); color: var(--pt-ink-900); }
.takeaway-drawer__close[b-r7d9vbmhmt] { margin-left: auto; width: var(--pt-action-min-height); height: var(--pt-action-min-height); border: 0; background: transparent;
    border-radius: var(--pt-radius-md); color: var(--pt-text-secondary); cursor: pointer; }
.takeaway-steps[b-r7d9vbmhmt] { display: flex; gap: var(--pt-space-2); list-style: none; margin: 0; padding: 0; font-size: 11.5px; font-weight: 700; color: var(--pt-text-muted); }
.takeaway-steps li[b-r7d9vbmhmt] { flex: 1; padding-top: 6px; border-top: 3px solid var(--pt-line-200); }
.takeaway-steps li.is-done[b-r7d9vbmhmt] { border-top-color: var(--pt-success); color: var(--pt-on-success); }
.takeaway-drawer__body[b-r7d9vbmhmt] { flex: 1; overflow-y: auto; }
.takeaway-drawer__body section[b-r7d9vbmhmt] { padding: var(--pt-space-4) 24px; border-bottom: var(--pt-border-row); display: flex; flex-direction: column; gap: var(--pt-space-2); }
.takeaway-drawer__body h3[b-r7d9vbmhmt] { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .07em; color: var(--pt-text-muted); display: flex; }
.takeaway-drawer__aside[b-r7d9vbmhmt] { margin-left: auto; letter-spacing: 0; font-weight: 600; }
.takeaway-drawer__strong[b-r7d9vbmhmt] { margin: 0; font-weight: 700; color: var(--pt-ink-900); }
.takeaway-drawer__facts[b-r7d9vbmhmt] { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--pt-space-3); margin: 0; font-size: 13px; }
.takeaway-drawer__facts dt[b-r7d9vbmhmt] { color: var(--pt-text-muted); }
.takeaway-drawer__facts dd[b-r7d9vbmhmt] { margin: 0; font-weight: 700; color: var(--pt-ink-900); }
.takeaway-drawer__buttons[b-r7d9vbmhmt], .takeaway-drawer__secondary[b-r7d9vbmhmt] { display: flex; gap: var(--pt-space-2); flex-wrap: wrap; }
.takeaway-drawer__secondary[b-r7d9vbmhmt] { justify-content: space-between; }
.takeaway-drawer__pair[b-r7d9vbmhmt] { display: flex; gap: var(--pt-space-2); }
.takeaway-drawer__pair > *[b-r7d9vbmhmt] { flex: 1; }
/* "Más acciones": the row menu's popover behind a button the size of the others, pushed to the end of the row. */
.takeaway-drawer__more[b-r7d9vbmhmt] { margin-left: auto; }
.takeaway-drawer__more .capy-rowmenu__trigger[b-r7d9vbmhmt] { width: auto; height: var(--pt-action-min-height); display: inline-flex; gap: 6px; padding: 0 12px;
    border: var(--pt-border-card); border-radius: var(--pt-radius-md); background: var(--pt-surface); color: var(--pt-text-secondary); font: 700 13px var(--pt-font-body); }
/* The reasons slide in where the acceptance choices were. */
.takeaway-drawer__reject[b-r7d9vbmhmt], .takeaway-drawer__discount[b-r7d9vbmhmt] { animation: takeaway-reveal-b-r7d9vbmhmt var(--pt-dur-hover) var(--pt-ease-soft) both; }
@keyframes takeaway-reveal-b-r7d9vbmhmt { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .takeaway-drawer__reject[b-r7d9vbmhmt], .takeaway-drawer__discount[b-r7d9vbmhmt] { animation: none; } }
.takeaway-drawer__items[b-r7d9vbmhmt] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pt-space-2); }
.takeaway-drawer__items li[b-r7d9vbmhmt] { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.takeaway-drawer__items li > span:first-of-type[b-r7d9vbmhmt] { flex: 1; }
.takeaway-drawer__items small[b-r7d9vbmhmt] { display: block; color: var(--pt-text-muted); }
.takeaway-drawer__promo[b-r7d9vbmhmt] { color: var(--pt-on-success) !important; font-weight: 700; }
.takeaway-drawer__totals p[b-r7d9vbmhmt] { margin: 0; display: flex; justify-content: space-between; color: var(--pt-text-secondary); }
.takeaway-drawer__grand[b-r7d9vbmhmt] { font-family: var(--pt-font-display); font-weight: 700; font-size: 18px; color: var(--pt-ink-900) !important; }
.takeaway-drawer__foot[b-r7d9vbmhmt] { padding: var(--pt-space-4) 24px 20px; border-top: 1px solid var(--pt-line-200); background: var(--pt-app-bg);
    display: flex; flex-direction: column; gap: 10px; }
.takeaway-chip[b-r7d9vbmhmt] { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; border-radius: var(--pt-radius-chip);
    padding: 3px 8px; max-width: 100%; overflow-wrap: anywhere; background: var(--pt-line-100); color: var(--pt-text-secondary); align-self: flex-start; }
.takeaway-chip--pickup[b-r7d9vbmhmt] { background: var(--pt-chrome-info-tint); color: var(--pt-on-info); }
.takeaway-chip--delivery[b-r7d9vbmhmt] { background: var(--pt-occupied-tint); color: var(--pt-occupied-fg); }
.takeaway-chip--ok[b-r7d9vbmhmt] { background: var(--pt-available-tint); color: var(--pt-on-success); }
.takeaway-chip--warn[b-r7d9vbmhmt] { background: var(--pt-occupied-tint); color: var(--pt-on-warning); }
@media (hover: none) and (pointer: coarse) { .takeaway-drawer__close[b-r7d9vbmhmt] { width: var(--pt-action-min-height-touch); height: var(--pt-action-min-height-touch); } }
.takeaway-drawer__address-actions[b-r7d9vbmhmt] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pt-space-3); margin-top: var(--pt-space-2); }
@media (hover: none) and (pointer: coarse) { .takeaway-drawer__maps[b-r7d9vbmhmt] { display: inline-flex; align-items: center; min-height: var(--pt-action-min-height-touch); } }
.takeaway-drawer__close[b-r7d9vbmhmt], .takeaway-drawer__maps[b-r7d9vbmhmt] { transition: background var(--pt-dur-hover) var(--pt-ease-soft), color var(--pt-dur-hover) var(--pt-ease-soft); }
@media (hover: hover) {
    .takeaway-drawer__close:hover[b-r7d9vbmhmt] { background: var(--pt-row-hover); color: var(--pt-ink-900); }
    .takeaway-drawer__maps:hover[b-r7d9vbmhmt] { color: var(--pt-forest-700); }
}
.takeaway-drawer__ended[b-r7d9vbmhmt] { margin: 0; font-size: 12px; font-weight: 800; color: var(--pt-text-muted); }
.takeaway-drawer__waiting[b-r7d9vbmhmt] { margin: 0; font-size: 12px; font-weight: 800; color: var(--pt-on-warning); }
.takeaway-reject[b-r7d9vbmhmt] { display: flex; align-items: center; gap: var(--pt-space-2); font-size: var(--pt-text-caption); color: var(--pt-ink-900); cursor: pointer; }
.takeaway-eta[b-r7d9vbmhmt] { min-width: 72px; }
@media (hover: hover) { .takeaway-eta:hover[b-r7d9vbmhmt] { background: var(--pt-row-hover); } .takeaway-eta.capy-form-action--primary:hover[b-r7d9vbmhmt] { background: var(--pt-forest-600); } }

.takeaway-drawer__discount[b-r7d9vbmhmt] { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--pt-space-4); }
.takeaway-drawer__discount-actions[b-r7d9vbmhmt] { display: flex; gap: var(--pt-space-4); }
/* The shared segmented control, across the form; the fields sit on the form's own 8px rhythm. */
.takeaway-drawer__discount-kind[b-r7d9vbmhmt] { display: flex; }
.takeaway-drawer__discount-kind .capy-segmented__option[b-r7d9vbmhmt] { flex: 1; }
.takeaway-drawer__discount-form .field[b-r7d9vbmhmt] { margin-bottom: 0; }
.takeaway-drawer__discount-hint[b-r7d9vbmhmt] { margin: 0; font-size: 12.5px; color: var(--pt-on-warning); }
.takeaway-drawer__totals .takeaway-drawer__discount-line[b-r7d9vbmhmt] { color: var(--pt-on-success); }
.takeaway-drawer__discount-form[b-r7d9vbmhmt] { display: flex; flex-direction: column; gap: 8px; animation: takeaway-reveal-b-r7d9vbmhmt var(--pt-dur-base) var(--pt-ease-soft) both; }
.takeaway-drawer__discount-line[b-r7d9vbmhmt] { animation: takeaway-reveal-b-r7d9vbmhmt var(--pt-dur-base) var(--pt-ease-soft) both; }
@keyframes takeaway-reveal-b-r7d9vbmhmt { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .takeaway-drawer__discount-form[b-r7d9vbmhmt], .takeaway-drawer__discount-line[b-r7d9vbmhmt] { animation: none; } }
/* /Components/Pages/Takeaway/TakeawayPauseControl.razor.rz.scp.css */
.takeaway-pause[b-anf6oftj1u] { position: relative; }
.takeaway-pause__menu[b-anf6oftj1u] { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 240px; padding: var(--pt-space-2);
    display: flex; flex-direction: column; gap: 2px; background: var(--pt-surface); border: 1px solid var(--pt-line-200);
    border-radius: var(--pt-radius-md); box-shadow: var(--pt-shadow-panel); }
.takeaway-pause__item[b-anf6oftj1u] { all: unset; cursor: pointer; padding: var(--pt-space-2) var(--pt-space-3); border-radius: var(--pt-radius-sm);
    font: 700 14px var(--pt-font-body); color: var(--pt-ink-900); transition: background var(--pt-dur-hover) var(--pt-ease-soft); }
.takeaway-pause__item:focus-visible[b-anf6oftj1u] { box-shadow: var(--pt-focus-ring); }
.takeaway-pause__item:disabled[b-anf6oftj1u] { opacity: .55; cursor: progress; }
.takeaway-pause__note[b-anf6oftj1u] { margin: var(--pt-space-2) var(--pt-space-3) 0; font-size: 12px; color: var(--pt-text-muted); }
@media (hover: hover) { .takeaway-pause__item:hover:not(:disabled)[b-anf6oftj1u] { background: var(--pt-row-hover); } }
/* /Components/Pages/Takeaway/TakeawayTabs.razor.rz.scp.css */
.takeaway-tabs[b-028yesi6n9] { display: flex; gap: var(--pt-space-2); margin-bottom: var(--pt-space-4); flex-wrap: wrap; }
.takeaway-tabs__tab[b-028yesi6n9] { display: inline-flex; align-items: center; min-height: var(--pt-action-min-height); padding: 0 var(--pt-space-4);
    border-radius: var(--pt-radius-pill); border: 1px solid var(--pt-line-200); background: var(--pt-surface); color: var(--pt-text-secondary);
    font: 700 14px var(--pt-font-body); text-decoration: none;
    transition: background var(--pt-dur-hover) var(--pt-ease-soft), color var(--pt-dur-hover) var(--pt-ease-soft), border-color var(--pt-dur-hover) var(--pt-ease-soft); }
.takeaway-tabs__tab.is-on[b-028yesi6n9] { background: var(--pt-forest-700); border-color: var(--pt-forest-700); color: var(--pt-cream-50); }
.takeaway-tabs__tab:focus-visible[b-028yesi6n9] { outline: 2px solid var(--pt-forest-600); outline-offset: 2px; }
@media (hover: hover) { .takeaway-tabs__tab:not(.is-on):hover[b-028yesi6n9] { border-color: var(--pt-cream-300); color: var(--pt-ink-900); } }
@media (hover: none) and (pointer: coarse) { .takeaway-tabs__tab[b-028yesi6n9] { min-height: var(--pt-action-min-height-touch); } }
@media (prefers-reduced-motion: reduce) { .takeaway-tabs__tab[b-028yesi6n9] { transition: none; } }
/* /Components/Pages/Team/Team.razor.rz.scp.css */
/* Capy "Equipo" — screen frame, roster, tabs, search, Día 1 (P18 Task 5). Every value below is
   expressed through the declared --pt-* tokens; the few literals left (px sizes, avatar/chip
   geometry) are dimensions the token set does not name, matching QrCodes.razor.css's own
   precedent. Role and state chip colours are the prototype's exact tokens where one exists
   (Titular=warning, Encargado=info, Mozo=forest/available-tint) and a reasoned pick from the same
   token set where the prototype has no colour at all (Cocina, and Recepción — a role the
   prototype never drew, added per S1's gap resolution) — see the two chip sections below for the
   reasoning, kept close to the code so nobody "fixes" it back to a literal. */

/* ── Page header ────────────────────────────────────────────── */
.team-header[b-4dteno8xqi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pt-space-4);
    margin-bottom: var(--pt-space-4);
}

.team-header h1[b-4dteno8xqi] {
    margin: 0;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: var(--pt-tracking-display-l);
}

.team-header p[b-4dteno8xqi] {
    margin: 3px 0 0;
    color: var(--pt-text-muted);
    font-size: 14px;
}

.team-header__actions[b-4dteno8xqi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-left: auto;
}

.team-search[b-4dteno8xqi] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 210px;
    min-height: 42px;
    box-sizing: border-box;
    padding: 9px 13px;
    border: var(--pt-border-card);
    border-radius: 9px;
    background: var(--pt-app-bg);
}

.team-search i[b-4dteno8xqi] { color: var(--pt-text-muted); font-size: 13px; }

.team-search input[b-4dteno8xqi] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--pt-ink-900);
    font: 13.5px var(--pt-font-body);
}

.team-header__actions .capy-form-action--primary[b-4dteno8xqi] {
    min-height: 42px;
    padding: 10px var(--pt-space-4);
    font-size: 13.5px;
    font-weight: 800;
    color: var(--pt-cream-50);
}

.team-alert[b-4dteno8xqi] {
    display: flex;
    align-items: center;
    gap: var(--pt-space-2);
    margin-bottom: var(--pt-space-4);
    padding: 11px 13px;
    border: 1px solid oklch(from var(--pt-danger) l c h / .3);
    border-radius: var(--pt-radius-md);
    background: var(--pt-danger-summary);
    color: var(--pt-danger);
    font-size: var(--pt-text-caption);
    font-weight: 700;
}

/* ── Día 1 ──────────────────────────────────────────────────── */
.team-dayone[b-4dteno8xqi] {
    max-width: 720px;
    padding: 30px 32px 28px;
    background: var(--pt-surface);
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-lg);
    box-shadow: var(--pt-shadow-card);
}

.team-dayone__badge[b-4dteno8xqi] {
    margin-bottom: var(--pt-space-3);
    color: var(--pt-on-warning);
    font-family: var(--pt-font-mono);
    font-size: 8.5px;
    letter-spacing: .12em;
}

.team-dayone h2[b-4dteno8xqi] {
    margin: 0 0 var(--pt-space-2);
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: var(--pt-tracking-display-l);
}

.team-dayone > p[b-4dteno8xqi] {
    max-width: 56ch;
    margin: 0 0 22px;
    color: var(--pt-text-muted);
    font-size: 14px;
    line-height: var(--pt-leading-body);
    text-wrap: pretty;
}

.team-dayone__tasks[b-4dteno8xqi] { display: grid; gap: var(--pt-space-2); }

.team-dayone__task[b-4dteno8xqi] {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px var(--pt-space-4);
    border: var(--pt-border-card);
    border-radius: 10px;
    background: var(--pt-app-bg);
}

.team-dayone__task > i[b-4dteno8xqi] { flex: none; color: var(--pt-forest-600); font-size: 16px; }
.team-dayone__task > span[b-4dteno8xqi] { flex: 1; min-width: 0; }
.team-dayone__task strong[b-4dteno8xqi],
.team-dayone__task small[b-4dteno8xqi] { display: block; }

.team-dayone__task strong[b-4dteno8xqi] {
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 14px;
    font-weight: 700;
}

.team-dayone__task small[b-4dteno8xqi] {
    margin-top: 2px;
    color: var(--pt-text-muted);
    font-size: 12.5px;
}

.team-dayone__cta[b-4dteno8xqi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
}

.team-dayone__cta span[b-4dteno8xqi] { color: var(--pt-text-muted); font-size: 12.5px; }
.team-dayone__cta .capy-form-action[b-4dteno8xqi] { min-height: 42px; padding: 11px 18px; font-size: var(--pt-text-caption); color: var(--pt-cream-50); }

/* ── Stat row (3 cards — "En turno ahora" is cut, see the file-header comment) ─ */
.team-stats[b-4dteno8xqi] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: var(--pt-space-4);
}

.team-stat[b-4dteno8xqi] {
    padding: 14px 16px;
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-lg);
    background: var(--pt-surface);
}

.team-stat--warn[b-4dteno8xqi] { border-color: oklch(from var(--pt-warning) l c h / .5); }

.team-stat__label[b-4dteno8xqi] { color: var(--pt-text-muted); font-size: 12.5px; }

.team-stat__row[b-4dteno8xqi] {
    display: flex;
    align-items: baseline;
    gap: var(--pt-space-2);
    margin-top: 5px;
}

.team-stat__value[b-4dteno8xqi] {
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 25px;
    font-weight: 800;
    letter-spacing: var(--pt-tracking-display-l);
    font-variant-numeric: tabular-nums;
}

.team-stat__hint[b-4dteno8xqi] { color: var(--pt-unavailable-text); font-size: 12.5px; }

/* ── Two-column grid ────────────────────────────────────────── */
.capy-team-grid[b-4dteno8xqi] {
    display: grid;
    grid-template-columns: minmax(440px, 1fr) 320px;
    gap: var(--pt-space-6);
    align-items: start;
}

@media (max-width: 1180px) {
    .capy-team-grid[b-4dteno8xqi] { grid-template-columns: 1fr; }
}

.team-roster[b-4dteno8xqi],
.team-detail[b-4dteno8xqi] {
    overflow: hidden;
    background: var(--pt-surface);
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-lg);
    box-shadow: var(--pt-shadow-card);
}

/* ── Roster header + tabs ───────────────────────────────────── */
.team-roster__header[b-4dteno8xqi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pt-space-3);
    padding: 13px 18px;
    border-bottom: var(--pt-border-card);
}

.team-roster__header h2[b-4dteno8xqi] {
    margin: 0;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.team-roster__count[b-4dteno8xqi] { color: var(--pt-text-muted); font-size: 12.5px; }

.team-roster__tabs[b-4dteno8xqi] { margin-left: auto; }

.team-roster__empty[b-4dteno8xqi] {
    margin: 0;
    padding: 34px 18px;
    color: var(--pt-text-muted);
    font-size: 14px;
    text-align: center;
}

/* ── Rows ───────────────────────────────────────────────────── */
.team-rows[b-4dteno8xqi] { display: flex; flex-direction: column; }

.team-row[b-4dteno8xqi] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
}

.team-row:not(:first-child)[b-4dteno8xqi] { border-top: var(--pt-border-row); }
.team-row--selected[b-4dteno8xqi] { background: var(--pt-app-bg); }

@media (max-width: 900px) {
    .team-row[b-4dteno8xqi] { grid-template-columns: 1fr; gap: 10px; }
    .team-row__end[b-4dteno8xqi] { justify-content: flex-start; }
}

.team-row__identity[b-4dteno8xqi] {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.team-avatar[b-4dteno8xqi] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 50%;
    background: var(--pt-available-tint);
    color: var(--pt-forest-600);
    font-weight: 800;
    font-size: 13px;
}

.team-avatar--muted[b-4dteno8xqi] { background: var(--pt-cream-200); color: var(--pt-unavailable-icon); }

.team-row__text[b-4dteno8xqi] { min-width: 0; }

.team-row__email[b-4dteno8xqi] {
    margin-top: 2px;
    overflow: hidden;
    color: var(--pt-text-muted);
    font-size: 12.5px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-row__name-line[b-4dteno8xqi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pt-space-2);
}

.team-row__name[b-4dteno8xqi] {
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.team-row__meta[b-4dteno8xqi] { margin-top: 3px; color: var(--pt-text-muted); font-size: 12.5px; }

.team-row__end[b-4dteno8xqi] {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
}

.team-roster__footer[b-4dteno8xqi] {
    padding: 12px 18px;
    border-top: var(--pt-border-card);
    background: var(--pt-app-bg);
}

.team-roster__footer span[b-4dteno8xqi] { color: var(--pt-text-muted); font-size: 12.5px; }

/* ── Role chip ──────────────────────────────────────────────── */
/* One tag colour per role, all drawn from the declared token set. Titular/Encargado/Mozo are the
   prototype's own ROLES colours mapped straight onto their closest --pt-* token — Mozo's fg/bg is
   an exact match (forest-600 / available-tint). Cocina had a hand-picked purple in the prototype
   with no matching token anywhere in capy-tokens.css; Recepción has no prototype colour at all
   (S1 added the role, the prototype predates it). Gold is reserved for Titular's chip and the
   Pendiente state chip only — component reference section 10: "at most one gold element per
   visible zone," and a pending Recepción/Titular invitation row would otherwise carry two. Neither
   Cocina nor Recepción gets gold for that reason; they take the two token families the rest of the
   row's chips don't already use for anything semantic on the same row (a warm neutral and the
   danger family respectively) — a compromise forced by a five-role palette drawn from a
   four-colour prototype, not a literal design instruction. */
.team-role-chip[b-4dteno8xqi] {
    flex: none;
    padding: 4px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 800;
}

.team-role-chip--owner[b-4dteno8xqi] { color: var(--pt-on-warning); background: oklch(from var(--pt-warning) l c h / .16); }
.team-role-chip--shift-manager[b-4dteno8xqi] { color: var(--pt-on-info); background: oklch(from var(--pt-info) l c h / .14); }
.team-role-chip--waiter[b-4dteno8xqi] { color: var(--pt-forest-600); background: var(--pt-available-tint); }
.team-role-chip--kitchen[b-4dteno8xqi] { color: var(--pt-unavailable-text); background: var(--pt-cream-200); }
.team-role-chip--reception[b-4dteno8xqi] { color: var(--pt-on-danger); background: oklch(from var(--pt-danger) l c h / .12); }

/* Inline "invitation sent" pill next to the name — kept alongside the state chip on the right per
   the prototype's own row (p.pendingStyle + p.stateChip both draw for a pending person). Expired
   gets a different icon and a dashed border, same warning palette (never danger — see Step 5). */
.team-pending-pill[b-4dteno8xqi] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
    padding: 4px 8px;
    border-radius: 5px;
    color: var(--pt-on-warning);
    background: oklch(from var(--pt-warning) l c h / .16);
    font-size: 11px;
    font-weight: 800;
}

.team-pending-pill i[b-4dteno8xqi] { font-size: 11px; }
.team-pending-pill--expired[b-4dteno8xqi] { border: 1px dashed oklch(from var(--pt-warning) l c h / .5); }

/* ── State chip ─────────────────────────────────────────────── */
/* Icon + text always — never colour alone (WCAG AA, non-negotiable for this migration). */
.team-state-chip[b-4dteno8xqi] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    padding: 6px 11px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 800;
}

.team-state-chip i[b-4dteno8xqi] { font-size: 12px; }

.team-state-chip--neutral[b-4dteno8xqi] { color: var(--pt-text-secondary); background: oklch(from var(--pt-neutral) l c h / .14); }
.team-state-chip--info[b-4dteno8xqi] { color: var(--pt-on-info); background: oklch(from var(--pt-info) l c h / .10); }
.team-state-chip--danger[b-4dteno8xqi] { color: var(--pt-on-danger); background: oklch(from var(--pt-danger) l c h / .10); }
.team-state-chip--warning[b-4dteno8xqi] { color: var(--pt-on-warning); background: oklch(from var(--pt-warning) l c h / .12); }

/* ── Detail panel (P18 Task 6 — rows, permissions matrix, actions) ─ */
.team-detail__header[b-4dteno8xqi] {
    display: flex;
    align-items: center;
    gap: var(--pt-space-2);
    padding: 14px var(--pt-space-4);
    border-bottom: var(--pt-border-card);
}

.team-detail__header h2[b-4dteno8xqi] {
    margin: 0;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 15px;
    font-weight: 700;
}

.team-detail__body[b-4dteno8xqi] { padding: var(--pt-space-4); display: grid; gap: var(--pt-space-4); }
.team-detail__body p[b-4dteno8xqi] { margin: 0; color: var(--pt-text-muted); font-size: 13.5px; line-height: var(--pt-leading-body); }

/* Desde / Estado / Código vence — a simple label:value list, the "Turno"/"Última vez" rows the
   design also draws are cut (no data — see Team.razor's file-header comment). */
.team-detail__rows[b-4dteno8xqi] { display: grid; gap: var(--pt-space-2); margin: 0; }

.team-detail__row[b-4dteno8xqi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pt-space-3);
    padding: 9px 0;
}

.team-detail__row:not(:first-child)[b-4dteno8xqi] { border-top: var(--pt-border-row); }
.team-detail__row dt[b-4dteno8xqi] { margin: 0; color: var(--pt-text-muted); font-size: 12.5px; font-weight: 700; }
.team-detail__row dd[b-4dteno8xqi] { margin: 0; overflow-wrap: anywhere; color: var(--pt-ink-900); font-size: 13.5px; font-weight: 700; text-align: right; }

.team-detail__section-title[b-4dteno8xqi] {
    margin: 0;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -.01em;
}

/* ── "Qué puede hacer" — the generated permissions matrix ─────── */
.team-perm-list[b-4dteno8xqi] { display: grid; gap: 9px; margin-top: -6px; }

.team-perm-row[b-4dteno8xqi] { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.team-perm-row i[b-4dteno8xqi] { flex: none; font-size: 15px; }

.team-perm-row--on[b-4dteno8xqi] { color: var(--pt-ink-900); }
.team-perm-row--off[b-4dteno8xqi] { color: var(--pt-text-muted); }
.team-perm-row i.bi-check-circle-fill[b-4dteno8xqi] { color: var(--pt-success); }
.team-perm-row i.bi-slash-circle[b-4dteno8xqi] { color: var(--pt-unavailable-icon); }

/* ── Self row — "Sos vos: no podés sacarte el acceso" ──────────── */
/* A genuinely non-interactive label, never a disabled button that invites a click and then does
   nothing (the same anti-pattern TeamComponentStructureTests guards against for the invite entry
   points, applied here to the detail panel). */
.team-detail__self-note[b-4dteno8xqi] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    border-radius: var(--pt-radius-md);
    background: var(--pt-app-bg);
    color: var(--pt-text-muted);
    font-size: 12.5px;
}

.team-detail__self-note i[b-4dteno8xqi] { flex: none; color: var(--pt-text-muted); }

/* ── Actions ────────────────────────────────────────────────────── */
.team-detail__actions[b-4dteno8xqi] { display: flex; flex-wrap: wrap; gap: 9px; }
.team-detail__actions .capy-form-action[b-4dteno8xqi] { min-height: 38px; font-size: 12.5px; }

/* ── Reissue result — the fresh WhatsApp link/toast ────────────── */
.team-toast[b-4dteno8xqi] {
    display: flex;
    align-items: center;
    gap: var(--pt-space-2);
    padding: 10px 12px;
    border: 1px solid oklch(from var(--pt-success) l c h / .3);
    border-radius: var(--pt-radius-md);
    background: oklch(from var(--pt-success) l c h / .1);
    color: var(--pt-ink-900);
    font-size: 12.5px;
}

.team-toast > i:first-child[b-4dteno8xqi] { flex: none; color: var(--pt-success); }
.team-toast > span[b-4dteno8xqi] { flex: 1; min-width: 0; }
.team-toast .capy-form-action[b-4dteno8xqi] { min-height: 32px; padding: 0 var(--pt-space-2); font-size: 12px; }

.team-toast__dismiss[b-4dteno8xqi] {
    flex: none;
    border: 0;
    background: transparent;
    color: var(--pt-text-muted);
    cursor: pointer;
}

/* ── Assign tables dialog (unchanged behaviour, re-attached from the pre-Capy Team.razor) ─ */
.team-assign-dialog__body[b-4dteno8xqi] { margin: 0 0 var(--pt-space-3); color: var(--pt-text-muted); font-size: 13px; line-height: var(--pt-leading-body); }

.team-assign-dialog__list[b-4dteno8xqi] {
    display: grid;
    gap: 4px;
    max-height: 16rem;
    overflow-y: auto;
}

.team-assign-dialog__option[b-4dteno8xqi] {
    display: flex;
    align-items: center;
    gap: var(--pt-space-2);
    padding: 6px 4px;
    color: var(--pt-ink-900);
    font-size: 13.5px;
}

/* ── Invite modal (P18 Task 7) ─────────────────────────────────── */
/* A plain overlay + section, same shape as MenuImportFlow.razor.css/ItemUnavailableModal.razor.css
   rather than the native <dialog> the assign-tables dialog above uses: those two already establish
   the "custom overlay + primeTableMenu.modal JS interop" precedent for a fully re-skinned Producto
   modal, while team-assign-tables-dialog was carried over unchanged from the pre-Capy screen and
   deliberately not re-skinned (see Team.razor's own comment on that dialog). This modal is new for
   Capy, so it follows the new precedent, not the legacy one. */
.team-invite-overlay[b-4dteno8xqi] {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pt-space-6);
    /* Safe-area floor only today — see MainLayout.razor.css's F5 note: env() resolves to 0px
       without viewport-fit=cover, so this is exactly --pt-space-4 on every device now. */
    padding-bottom: max(var(--pt-space-4), env(safe-area-inset-bottom));
    padding-left: max(var(--pt-space-4), env(safe-area-inset-left));
    padding-right: max(var(--pt-space-4), env(safe-area-inset-right));
    overflow-y: auto;
    background: oklch(from var(--pt-forest-900) l c h / .5);
}

.team-invite-modal[b-4dteno8xqi] {
    width: min(440px, 92vw);
    overflow: hidden;
    background: var(--pt-surface);
    border: var(--pt-border-card);
    border-radius: 14px;
    box-shadow: var(--pt-shadow-panel);
    animation: team-invite-rise-b-4dteno8xqi var(--pt-dur-base) var(--pt-ease-soft);
}

@keyframes team-invite-rise-b-4dteno8xqi {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .team-invite-modal[b-4dteno8xqi] { animation: none; }
}

.team-invite-modal__header[b-4dteno8xqi] { padding: var(--pt-space-4) var(--pt-space-4) 0; }

.team-invite-modal__header h3[b-4dteno8xqi] {
    margin: 0;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.team-invite-modal__header p[b-4dteno8xqi] {
    margin: var(--pt-space-2) 0 0;
    color: var(--pt-text-muted);
    font-size: 14px;
    line-height: var(--pt-leading-body);
}

.team-invite-modal__body[b-4dteno8xqi] {
    display: flex;
    flex-direction: column;
    gap: var(--pt-space-3);
    /* dvh, not vh: a phone's dynamic toolbar and its virtual keyboard both shrink the visible
       area below 100vh, so 60vh of the full viewport can exceed what is actually visible and
       push this scrollable body past the fold along with the modal's own footer. */
    max-height: 60dvh;
    padding: var(--pt-space-4) var(--pt-space-4) 0;
    overflow-y: auto;
}

/* capy-forms.css's .field already carries its own bottom margin for a plain stacked form; this
   modal spaces fields with the body's own gap instead so the two don't add up. */
.team-invite-modal__body .field[b-4dteno8xqi] { margin-bottom: 0; }

.team-invite-roles[b-4dteno8xqi] { display: grid; gap: var(--pt-space-2); }

/* capy-forms.css's .capy-radio-card__description truncates to one line (its other, shorter-copy
   use case) — the four role descriptions here run to two sentences, so this modal alone wraps
   them normally rather than clipping the Recepción description mid-sentence. */
.team-invite-roles .capy-radio-card__description[b-4dteno8xqi] {
    overflow: visible;
    white-space: normal;
    line-height: var(--pt-leading-caption);
    text-overflow: clip;
}

.team-invite-modal__footer[b-4dteno8xqi] {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: var(--pt-space-4);
}

/* No :disabled treatment exists yet for .capy-form-action--primary anywhere else on this page
   (Reenviar/Cancelar/Sacar el acceso rely on the browser default) — the prototype's own sendStyle
   explicitly recolours the disabled Send button, so this one gets a scoped rule rather than a
   silent browser default that would drop the prototype's own disabled-state cue. */
.team-invite-modal__footer .capy-form-action--primary:disabled[b-4dteno8xqi] {
    background: var(--pt-moss-400);
    border-color: var(--pt-moss-400);
    cursor: not-allowed;
}

/* ── Invite success panel (Step 2) ─────────────────────────────── */
.team-invite-success[b-4dteno8xqi] {
    display: flex;
    align-items: flex-start;
    gap: var(--pt-space-2);
    margin-bottom: var(--pt-space-4);
    padding: 12px 14px;
    border: 1px solid oklch(from var(--pt-success) l c h / .3);
    border-radius: var(--pt-radius-md);
    background: oklch(from var(--pt-success) l c h / .1);
}

.team-invite-success > i:first-child[b-4dteno8xqi] { flex: none; margin-top: 2px; color: var(--pt-success); }
.team-invite-success__body[b-4dteno8xqi] { flex: 1; min-width: 0; }

.team-invite-success__body strong[b-4dteno8xqi] {
    display: block;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 14px;
}

.team-invite-success__body p[b-4dteno8xqi] { margin: 3px 0 0; color: var(--pt-text-muted); font-size: 13px; }

.team-invite-success__actions[b-4dteno8xqi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pt-space-2);
    margin-top: var(--pt-space-2);
}

.team-invite-success__actions .capy-form-action[b-4dteno8xqi] { min-height: 34px; padding: 0 var(--pt-space-2); font-size: 12px; }

.team-invite-success__code[b-4dteno8xqi] {
    padding: 4px 8px;
    border-radius: var(--pt-radius-sm);
    background: var(--pt-cream-200);
    color: var(--pt-ink-900);
    font-family: monospace;
    font-size: 13px;
    letter-spacing: .04em;
}

/* ── Role-change modal (P18 Task 8) ────────────────────────────── */
/* Same overlay/section shell as the invite modal above (.team-invite-overlay/.team-invite-modal,
   including the .team-invite-roles radio-card grid its role list already reuses) — only the width
   differs from the prototype's own roleModalStyle (470px vs the invite modal's 440px), applied as
   a modifier on top of the shared shell rather than a second modal class. */
.team-role-modal[b-4dteno8xqi] { width: min(470px, 92vw); }

/* "Actual" pill on whichever radio card matches the member's role today. It sits inside the same
   flex row the shared .capy-radio-card already lays out (capy-forms.css), after the card's body —
   there is no separate check-state icon on the right the prototype's own hand-rolled buttons draw,
   since the card's own __mark circle on the left already carries that role, same reuse the invite
   modal (Task 7) already made of this component. Page-scoped here rather than added to the shared
   capy-forms.css: this task's file list is Team.razor/Team.razor.css only. */
.capy-radio-card__tag[b-4dteno8xqi] {
    flex: none;
    padding: 3px 7px;
    border-radius: 5px;
    color: var(--pt-text-muted);
    background: var(--pt-cream-200);
    font-size: 10.5px;
    font-weight: 800;
}

.team-role-diff[b-4dteno8xqi] {
    display: grid;
    gap: 7px;
    padding: 13px 14px;
    border: var(--pt-border-card);
    border-radius: 10px;
    background: var(--pt-app-bg);
}

.team-role-diff__row[b-4dteno8xqi] { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: var(--pt-leading-body); font-weight: 700; color: var(--pt-ink-900); }
.team-role-diff__row i[b-4dteno8xqi] { flex: none; font-size: 14px; }
.team-role-diff__row--gain i[b-4dteno8xqi] { color: var(--pt-success); }
.team-role-diff__row--lose i[b-4dteno8xqi] { color: var(--pt-danger); }
.team-role-diff__row--neutral[b-4dteno8xqi] { font-weight: 400; color: var(--pt-text-muted); }
.team-role-diff__row--neutral i[b-4dteno8xqi] { color: var(--pt-unavailable-icon); }

.team-role-warning[b-4dteno8xqi] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 12px 13px;
    border: 1px solid oklch(from var(--pt-warning) l c h / .3);
    border-radius: 10px;
    background: oklch(from var(--pt-warning) l c h / .12);
    color: var(--pt-on-warning);
    font-size: 13px;
    line-height: var(--pt-leading-body);
    font-weight: 700;
}

.team-role-warning i[b-4dteno8xqi] { flex: none; font-size: 15px; }

.team-role-confirm[b-4dteno8xqi] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 13px;
    border: var(--pt-border-card);
    border-radius: 10px;
    background: var(--pt-surface);
    cursor: pointer;
}

.team-role-confirm input[b-4dteno8xqi] { width: 18px; height: 18px; flex: none; accent-color: var(--pt-forest-600); cursor: pointer; }
.team-role-confirm span[b-4dteno8xqi] { font-size: 13px; line-height: var(--pt-leading-body); font-weight: 700; color: var(--pt-ink-900); }

/* Before a different role is picked: dashed border, muted opacity, and the checkbox itself is
   disabled — nothing to confirm yet (matches the "never a disabled control that invites a click and
   does nothing" rule from the opposite direction: here the control is inert because there is
   genuinely nothing to do with it until a role is chosen, not despite there being something to do). */
.team-role-confirm--disabled[b-4dteno8xqi] {
    background: var(--pt-app-bg);
    border-style: dashed;
    opacity: .7;
    cursor: default;
}

@media (hover: none) and (pointer: coarse) {
    /* Sized on the .team-search <label> wrapper, not the inner input: the label is the actual
       tap target, and sizing the input directly would grow the whole box past 44px (its 9px 13px
       padding on top of a 44px input), a density jump the wrapper alone avoids. */
    .team-search[b-4dteno8xqi] { min-height: var(--pt-action-min-height-touch); }

    /* Restores the shared touch contract: these per-screen density rules (lines 164, 481, 498,
       663) sit at the same specificity as .capy-form-action's own touch rule in capy-forms.css,
       and a media query adds no specificity, so the later same-file declaration below is what
       wins. Desktop values (42px/38px/32px/34px) are deliberate density choices and stay put. */
    .team-dayone__cta .capy-form-action[b-4dteno8xqi] { min-height: var(--pt-action-min-height-touch); }
    .team-detail__actions .capy-form-action[b-4dteno8xqi] { min-height: var(--pt-action-min-height-touch); }
    .team-toast .capy-form-action[b-4dteno8xqi] { min-height: var(--pt-action-min-height-touch); }
    .team-invite-success__actions .capy-form-action[b-4dteno8xqi] { min-height: var(--pt-action-min-height-touch); }

    /* Same defect, a BEM modifier instead of the base class: line 67 targets
       .capy-form-action--primary, not .capy-form-action, so the base-class fixes above never
       reached "Invitar a alguien". */
    .team-header__actions .capy-form-action--primary[b-4dteno8xqi] { min-height: var(--pt-action-min-height-touch); }
}
/* /Components/Pages/Waiter/WaiterDisplay.razor.rz.scp.css */
/* Capy migration of the waiter display. Landscape tablet is the primary target (1024x768),
   mounted and run for a full shift — touch targets stay >= 44px and nothing relies on hover.
   Every colour below is an existing --pt-* token, tinted with the established
   `oklch(from var(--pt-X) l c h / alpha)` recipe (see MenuCategories.razor.css); no literal
   ever needed declaring, so no new component-scoped custom properties were required. */

/* ── Page header ────────────────────────────────────────────── */
.waiter-header[b-m7i4ge6rw1] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--pt-space-4);
    margin-bottom: var(--pt-space-6);
}

.waiter-header h1[b-m7i4ge6rw1] {
    margin: 0;
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.025em;
}

.waiter-header p[b-m7i4ge6rw1] {
    margin: var(--pt-space-1) 0 0;
    color: var(--pt-text-muted);
    font-size: 14px;
}

.waiter-header__right[b-m7i4ge6rw1] { display: flex; align-items: center; gap: var(--pt-space-4); }

.waiter-free-pill[b-m7i4ge6rw1] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: var(--pt-radius-pill);
    background: oklch(from var(--pt-warning) l c h / .14);
    border: 1px solid oklch(from var(--pt-warning) l c h / .3);
    color: var(--pt-on-warning);
    font-family: var(--pt-font-body);
    font-size: 13px;
    font-weight: 700;
}

.waiter-free-pill__dot[b-m7i4ge6rw1] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    background: var(--pt-gold-500);
    animation: waiter-pulse-b-m7i4ge6rw1 2s var(--pt-ease-soft) infinite;
}

@keyframes waiter-pulse-b-m7i4ge6rw1 {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

.waiter-clock[b-m7i4ge6rw1] {
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 24px;
    font-variant-numeric: tabular-nums;
    color: var(--pt-ink-900);
}

/* ── Banners: error / disconnected ─────────────────────────────── */
.waiter-banner[b-m7i4ge6rw1] {
    display: flex;
    align-items: center;
    gap: var(--pt-space-2);
    margin-bottom: var(--pt-space-4);
    padding: 11px 13px;
    border-radius: var(--pt-radius-md);
    font-size: 13px;
    font-weight: 700;
}

.waiter-banner > span[b-m7i4ge6rw1] { flex: 1; min-width: 0; }

.waiter-banner--error[b-m7i4ge6rw1] {
    background: var(--pt-danger-summary);
    border: 1px solid oklch(from var(--pt-danger) l c h / .3);
    color: var(--pt-danger);
}

.waiter-banner--warn[b-m7i4ge6rw1] {
    background: oklch(from var(--pt-warning) l c h / .12);
    border: 1px solid oklch(from var(--pt-warning) l c h / .3);
    color: var(--pt-on-warning);
}

.waiter-banner__dismiss[b-m7i4ge6rw1] {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    border: 0;
    border-radius: var(--pt-radius-sm);
    background: transparent;
    color: inherit;
    font-size: 16px;
    cursor: pointer;
}

.waiter-banner__dismiss:hover[b-m7i4ge6rw1] { background: oklch(from var(--pt-danger) l c h / .1); }

/* ── Grid (Step 0) ──────────────────────────────────────────── */
.waiter-grid[b-m7i4ge6rw1] {
    display: grid;
    grid-template-columns: minmax(380px, 1.25fr) minmax(300px, 1fr);
    gap: var(--pt-space-6);
    align-items: start;
}

@media (max-width: 1080px) {
    .waiter-grid[b-m7i4ge6rw1] { grid-template-columns: 1fr; }
}

/* ── Alert list panel ───────────────────────────────────────── */
.waiter-alerts[b-m7i4ge6rw1] {
    background: var(--pt-surface);
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-lg);
    box-shadow: var(--pt-shadow-card);
    padding: var(--pt-space-4);
}

.waiter-alerts__head[b-m7i4ge6rw1] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pt-space-2);
    margin-bottom: var(--pt-space-3);
}

.waiter-alerts__head h2[b-m7i4ge6rw1] {
    margin: 0;
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -.01em;
    color: var(--pt-ink-900);
}

.waiter-alerts__meta[b-m7i4ge6rw1] { font-size: 12.5px; color: var(--pt-text-meta); }

.waiter-alert-list[b-m7i4ge6rw1] {
    display: grid;
    gap: var(--pt-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.waiter-alert-list--groups[b-m7i4ge6rw1] { gap: var(--pt-space-4); }

.waiter-alert-list--groups > li + li[b-m7i4ge6rw1] {
    padding-top: var(--pt-space-4);
    border-top: var(--pt-border-row);
}

.waiter-table-group__head[b-m7i4ge6rw1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pt-space-2);
    min-height: var(--pt-action-min-height);
    cursor: pointer;
    list-style: none;
}

@media (hover: none) and (pointer: coarse) {
    .waiter-table-group__head[b-m7i4ge6rw1] { min-height: var(--pt-action-min-height-touch); }
}

.waiter-table-group__head[b-m7i4ge6rw1]::-webkit-details-marker { display: none; }
.waiter-table-group__head:focus-visible[b-m7i4ge6rw1] { outline: none; box-shadow: var(--pt-focus-ring); border-radius: var(--pt-radius-md); }

.waiter-table-group__chevron[b-m7i4ge6rw1] {
    color: var(--pt-text-meta);
    transition: transform var(--pt-dur-base) var(--pt-ease-soft);
}

.waiter-table-group[open] .waiter-table-group__chevron[b-m7i4ge6rw1] { transform: rotate(90deg); }

.waiter-table-group__name[b-m7i4ge6rw1] {
    margin: 0;
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 15px;
    color: var(--pt-ink-900);
}

.waiter-table-group__pills[b-m7i4ge6rw1] { display: flex; flex-wrap: wrap; gap: var(--pt-space-2); flex: 1; }

.waiter-table-group__alerts[b-m7i4ge6rw1] { margin-top: var(--pt-space-2); }

/* Same tone per kind as the cards below, so a collapsed table reads the same as an open one. */
.waiter-kind-pill[b-m7i4ge6rw1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--pt-radius-pill);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

.waiter-kind-pill--call[b-m7i4ge6rw1] { background: oklch(from var(--pt-warning) l c h / .22); color: var(--pt-on-warning); }
.waiter-kind-pill--ready[b-m7i4ge6rw1],
.waiter-kind-pill--drinks[b-m7i4ge6rw1] { background: oklch(from var(--pt-success) l c h / .2); color: var(--pt-forest-600); }
.waiter-kind-pill--bill[b-m7i4ge6rw1] { background: oklch(from var(--pt-danger) l c h / .2); color: var(--pt-danger); }

/* ── Alert card (Step 2) ────────────────────────────────────── */
.alert-card[b-m7i4ge6rw1] {
    display: flex;
    gap: var(--pt-space-3);
    padding: 14px 16px;
    border-radius: var(--pt-radius-lg);
    animation: waiter-rise-b-m7i4ge6rw1 var(--pt-dur-base) var(--pt-ease-soft) both;
}

@keyframes waiter-rise-b-m7i4ge6rw1 {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.alert-card__icon[b-m7i4ge6rw1] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 10px;
}

.alert-card__icon i[b-m7i4ge6rw1] { font-size: 17px; }

.alert-card__body[b-m7i4ge6rw1] { flex: 1; min-width: 0; }

.alert-card__title-row[b-m7i4ge6rw1] { display: flex; align-items: center; gap: var(--pt-space-2); flex-wrap: wrap; }

.alert-card__title[b-m7i4ge6rw1] {
    margin: 0;
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -.01em;
    color: var(--pt-ink-900);
}

.alert-card__detail[b-m7i4ge6rw1] {
    margin: 4px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--pt-text-muted);
}

/* The ready dish's chosen options — the waiter carries the plate, so "Shawarma" alone is not
   enough to know which one came up. */
.alert-card__detail--options[b-m7i4ge6rw1] {
    margin-top: 2px;
    font-weight: 600;
    color: var(--pt-ink-900);
    overflow-wrap: break-word;
}

.alert-card__detail--total[b-m7i4ge6rw1] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pt-space-3);
    flex-wrap: wrap;
}

.alert-card__detail--total strong[b-m7i4ge6rw1] {
    color: var(--pt-ink-900);
    font-family: var(--pt-font-display);
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

.alert-card__constraint[b-m7i4ge6rw1] {
    margin: var(--pt-space-2) 0 0;
    color: var(--pt-text-secondary);
    font-size: var(--pt-text-caption);
    line-height: var(--pt-leading-caption);
}

/* Age chip: the kitchen ticket timer's language (clock icon, display face, solid fill when overdue)
   at a smaller size, because ticket age matters less on the waiter screen. */
.age-chip[b-m7i4ge6rw1] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--pt-font-display);
    font-weight: 600;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    padding: 3px 8px;
    border-radius: var(--pt-radius-sm);
    background: var(--pt-cream-100);
    color: var(--pt-text-secondary);
    white-space: nowrap;
}

.age-chip__icon[b-m7i4ge6rw1] {
    width: 1em;
    height: 1em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .8;
}

.age-chip--danger[b-m7i4ge6rw1] {
    /* Solid fill so the overdue state does not rely on hue alone. */
    background: var(--pt-danger);
    color: var(--pt-danger-summary);
}

/* Tone per kind — the card itself is tinted (read from two metres away). */
.alert-card--call[b-m7i4ge6rw1] {
    background: oklch(from var(--pt-warning) l c h / .14);
    border: 1px solid oklch(from var(--pt-warning) l c h / .4);
}
.alert-card--call .alert-card__icon[b-m7i4ge6rw1] { background: oklch(from var(--pt-warning) l c h / .22); color: var(--pt-on-warning); }
.alert-card--call .alert-card__title[b-m7i4ge6rw1] { color: var(--pt-on-warning); }

/* A Drinks card is a Ready card in every visual respect except its icon and title (task brief) —
   same accent, one shared rule so a future tweak to the accent cannot apply to one and not the
   other. */
.alert-card--ready[b-m7i4ge6rw1],
.alert-card--drinks[b-m7i4ge6rw1] {
    background: oklch(from var(--pt-success) l c h / .12);
    border: 1px solid oklch(from var(--pt-success) l c h / .34);
}
.alert-card--ready .alert-card__icon[b-m7i4ge6rw1],
.alert-card--drinks .alert-card__icon[b-m7i4ge6rw1] { background: oklch(from var(--pt-success) l c h / .2); color: var(--pt-forest-600); }
.alert-card--ready .alert-card__title[b-m7i4ge6rw1],
.alert-card--drinks .alert-card__title[b-m7i4ge6rw1] { color: var(--pt-forest-600); }

.alert-card--bill[b-m7i4ge6rw1] {
    background: oklch(from var(--pt-danger) l c h / .12);
    border: 1px solid oklch(from var(--pt-danger) l c h / .34);
}
.alert-card--bill .alert-card__icon[b-m7i4ge6rw1] { background: oklch(from var(--pt-danger) l c h / .2); color: var(--pt-danger); }
.alert-card--bill .alert-card__title[b-m7i4ge6rw1] { color: var(--pt-danger); }


/* Owner row: only rendered when the Llamado kind is claimed. */
.alert-card__owner[b-m7i4ge6rw1] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--pt-text-secondary);
}

.owner-chip[b-m7i4ge6rw1] {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 50%;
    background: oklch(from var(--pt-olive-500) l c h / .18);
    color: var(--pt-olive-500);
    font-family: var(--pt-font-display);
    font-size: 10px;
    font-weight: 800;
}

.alert-card__actions[b-m7i4ge6rw1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.alert-card__actions--bill[b-m7i4ge6rw1] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
}

.alert-card__actions--bill .alert-card__action[b-m7i4ge6rw1] {
    min-width: 0;
    flex: 1 1 158px;
}

.alert-card__actions--bill .alert-card__action--primary[b-m7i4ge6rw1] {
    flex-basis: 220px;
}

/* Producto dress buttons (component reference §2), min 132x46 (touch, Step 2). */
.alert-card__action[b-m7i4ge6rw1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    min-height: 46px;
    box-sizing: border-box;
    padding: 9px 16px;
    border-radius: var(--pt-radius-md);
    font-family: var(--pt-font-body);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--pt-dur-hover) var(--pt-ease-soft);
}

.alert-card__action--primary[b-m7i4ge6rw1] {
    color: var(--pt-cream-50);
    background: var(--pt-forest-700);
    border: 1px solid var(--pt-forest-700);
}
.alert-card__action--primary:hover[b-m7i4ge6rw1] { background: var(--pt-forest-600); border-color: var(--pt-forest-600); box-shadow: 0 8px 15px oklch(from var(--pt-ink-900) l c h / .26); transform: translateY(-2px); }

.alert-card__action--secondary[b-m7i4ge6rw1] {
    color: var(--pt-text-strong);
    background: var(--pt-surface);
    border: var(--pt-border-card);
}
.alert-card__action--secondary:hover[b-m7i4ge6rw1] { color: var(--pt-ink-900); background: var(--pt-cream-100); box-shadow: 0 8px 15px oklch(from var(--pt-ink-900) l c h / .16); transform: translateY(-2px); }

.alert-card__action--destructive[b-m7i4ge6rw1] {
    color: var(--pt-danger);
    background: transparent;
    border: 1px solid var(--pt-danger);
}
.alert-card__action--destructive:hover[b-m7i4ge6rw1] { color: var(--pt-cream-50); background: var(--pt-danger); box-shadow: 0 8px 15px oklch(from var(--pt-danger) l c h / .28); transform: translateY(-2px); }

.alert-card__action:active[b-m7i4ge6rw1] { box-shadow: none; transform: none; }

.alert-card__action--disabled[b-m7i4ge6rw1],
.alert-card__action--disabled:hover[b-m7i4ge6rw1] {
    color: var(--pt-unavailable-icon);
    background: var(--pt-cream-100);
    border: var(--pt-border-card);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.alert-card__action:focus-visible[b-m7i4ge6rw1] {
    outline: var(--pt-focus-outline);
    outline-offset: 2px;
}

.alert-card__action:disabled[b-m7i4ge6rw1],
.alert-card__action:disabled:hover[b-m7i4ge6rw1] {
    opacity: .58;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

@media (max-width: 720px) {
    .alert-card__actions--bill .alert-card__action[b-m7i4ge6rw1] {
        flex-basis: 100%;
    }
}

/* ── Empty state (Step 5) ───────────────────────────────────── */
.waiter-empty[b-m7i4ge6rw1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pt-space-2);
    padding: 48px var(--pt-space-4);
    text-align: center;
    background: var(--pt-app-bg);
    border: 1px solid var(--pt-radio-card-border);
    border-radius: var(--pt-radius-lg);
}

.waiter-empty i[b-m7i4ge6rw1] { font-size: 28px; color: var(--pt-success); }
.waiter-empty p[b-m7i4ge6rw1] { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--pt-text-secondary); }

/* ── Loading skeleton (component reference §6) ─────────────── */
.waiter-skeleton[b-m7i4ge6rw1] { display: grid; gap: var(--pt-space-3); }

.waiter-skeleton__row[b-m7i4ge6rw1] {
    height: 74px;
    border-radius: var(--pt-radius-lg);
    background: linear-gradient(90deg, var(--pt-cream-200), var(--pt-cream-100) 50%, var(--pt-cream-200));
    background-size: 220% 100%;
    animation: waiter-sheen-b-m7i4ge6rw1 1.5s linear infinite;
}

@keyframes waiter-sheen-b-m7i4ge6rw1 {
    from { background-position: 0 0; }
    to { background-position: -220% 0; }
}

/* ── Right column: Mis mesas + Tu turno (Task 3) ───────────────── */
.waiter-side[b-m7i4ge6rw1] { display: flex; flex-direction: column; gap: var(--pt-space-6); }

.waiter-panel[b-m7i4ge6rw1] {
    background: var(--pt-surface);
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-lg);
    box-shadow: var(--pt-shadow-card);
    padding: 15px 18px;
}

.waiter-panel h2[b-m7i4ge6rw1] {
    margin: 0;
    font-family: var(--pt-font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--pt-ink-900);
}

.waiter-panel__head[b-m7i4ge6rw1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pt-space-2);
    margin-bottom: 14px;
}

/* Assigned-count meta (Mis mesas) and the tax note (Tu turno) share this tone. */
.waiter-panel__meta[b-m7i4ge6rw1] { font-size: 12px; color: var(--pt-unavailable-icon); }

.waiter-panel__empty[b-m7i4ge6rw1] {
    margin: 0;
    padding: 20px 0;
    text-align: center;
    font-size: 13px;
    color: var(--pt-text-muted);
}

/* ── Mis mesas rows ─────────────────────────────────────────── */
.waiter-table-list[b-m7i4ge6rw1] {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.waiter-table-row[b-m7i4ge6rw1] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    min-height: 52px;
    padding: 11px 13px;
    border: var(--pt-border-card);
    border-radius: 10px;
    background: var(--pt-app-bg);
}

.waiter-table-chip[b-m7i4ge6rw1] {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 8px;
    border-radius: 9px;
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 15px;
}

/* Same four tones as P3's floor grid (Home.razor.css .home-floor__chip--*) so a table reads
   identically on both screens — reused here rather than re-derived, per the task brief. */
.waiter-table-chip--available[b-m7i4ge6rw1] { background: var(--pt-app-bg); color: var(--pt-text-meta); border: var(--pt-border-card); }
.waiter-table-chip--occupied[b-m7i4ge6rw1] { background: var(--pt-olive-500); color: var(--pt-surface); border: 1px solid var(--pt-olive-500); }
.waiter-table-chip--waiting[b-m7i4ge6rw1] { background: var(--pt-gold-500); color: var(--pt-on-gold); border: 1px solid var(--pt-gold-500); }
.waiter-table-chip--reserved[b-m7i4ge6rw1] { background: var(--pt-reserved-tint); color: var(--pt-reserved-fg); border: 1px solid var(--pt-reserved-border); }
.waiter-table-chip--closed[b-m7i4ge6rw1] { background: var(--pt-cream-100); color: var(--pt-text-secondary); border: 1px solid var(--pt-cream-300); }

.waiter-table-body[b-m7i4ge6rw1] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.waiter-table-state[b-m7i4ge6rw1] { font-weight: 700; font-size: 14px; color: var(--pt-ink-900); }
.waiter-table-detail[b-m7i4ge6rw1] { margin-top: 2px; font-size: 12.5px; color: var(--pt-text-muted); }

.waiter-table-total[b-m7i4ge6rw1] {
    flex: none;
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    color: var(--pt-ink-900);
}

/* The quick "Cobrar" takes its own line under the chip/state/total row rather than squeezing a
   fourth column into a sidebar that is already narrow. It reuses .alert-card__action's Producto
   dress and its 46px touch height — a waiter taps this standing at the table. */
.waiter-table-collect[b-m7i4ge6rw1] {
    flex: 1 0 100%;
    min-width: 0;
}

/* ── Tu turno rows (same shape as Home.razor.css .home-stat, minus the delta) ── */
.waiter-shift-rows[b-m7i4ge6rw1] { display: grid; gap: var(--pt-space-3); margin-top: 13px; }

.waiter-shift-row[b-m7i4ge6rw1] {
    display: flex;
    align-items: baseline;
    gap: var(--pt-space-3);
    padding-bottom: 11px;
    border-bottom: 1px solid var(--pt-row-divider);
}

.waiter-shift-label[b-m7i4ge6rw1] { flex: 1; font-size: 13px; color: var(--pt-text-muted); }

.waiter-shift-value[b-m7i4ge6rw1] {
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--pt-ink-900);
}

.waiter-tax-note[b-m7i4ge6rw1] {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--pt-unavailable-icon);
}

/* ── Confirm dialog (Step 2): panel-weight shadow instead of the shared component's default ── */
[b-m7i4ge6rw1] #waiter-confirm { box-shadow: var(--pt-shadow-panel); }

@media (prefers-reduced-motion: reduce) {
    .waiter-free-pill__dot[b-m7i4ge6rw1] { animation: none; opacity: 1; }
    .alert-card[b-m7i4ge6rw1] { animation: none; }
    .alert-card__action[b-m7i4ge6rw1] { transition: none; }
    .alert-card__action--primary:hover[b-m7i4ge6rw1],
    .alert-card__action--secondary:hover[b-m7i4ge6rw1],
    .alert-card__action--destructive:hover[b-m7i4ge6rw1] { transform: none; }
    .waiter-skeleton__row[b-m7i4ge6rw1] { animation: none; }
}

/* "Algo del pedido está mal" is the one reason that sends the waiter somewhere else first —
   usually the kitchen — so it is the one that has to survive a two-metre glance. */
.alert-card__detail--issue[b-m7i4ge6rw1] {
    font-weight: 600;
    color: var(--pt-danger);
}
/* /Components/Shared/CollapsibleStats.razor.rz.scp.css */
/* Desktop: no toggle, never collapsed. The strip is what it always was. */
.stats-collapse__toggle[b-mz6lraanbn] { display: none; }

@media (max-width: 700px) {
    .stats-collapse[b-mz6lraanbn] { margin-bottom: var(--pt-space-4); }

    .stats-collapse__toggle[b-mz6lraanbn] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--pt-space-2);
        width: 100%;
        min-height: var(--pt-action-min-height);
        padding: 0 var(--pt-space-3);
        background: var(--pt-surface);
        border: var(--pt-border-card);
        border-radius: var(--pt-radius-lg);
        color: var(--pt-text-secondary);
        font: inherit;
        font-size: 13px;
        text-align: left;
        cursor: pointer;
    }

    .stats-collapse__chevron[b-mz6lraanbn] { transition: rotate 120ms ease; }
    .stats-collapse--open .stats-collapse__chevron[b-mz6lraanbn] { rotate: 180deg; }

    .stats-collapse:not(.stats-collapse--open) .stats-collapse__content[b-mz6lraanbn] { display: none; }
    .stats-collapse--open .stats-collapse__content[b-mz6lraanbn] { margin-top: var(--pt-space-3); }

    /* The strip itself lives in the host page's CSS scope, so reach it by position rather than
       by class — every host passes exactly one grid as its child. Two columns instead of
       auto-fit's one halves the strip's height without shrinking a single card's numbers, and
       the host's own margin-bottom is neutralised because the wrapper now owns that spacing. */
    .stats-collapse__content[b-mz6lraanbn]  > * {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 0;
    }
}

/* Touch sizing follows the device, not the viewport (Task 3's contract): a 44px target is for
   a finger, and a finger is what `pointer: coarse` reports. */
@media (hover: none) and (pointer: coarse) {
    .stats-collapse__toggle[b-mz6lraanbn] { min-height: var(--pt-action-min-height-touch); }
}

@media (prefers-reduced-motion: reduce) {
    .stats-collapse__chevron[b-mz6lraanbn] { transition: none; }
}
/* /Components/Shared/ConfirmDialog.razor.rz.scp.css */
/* Producto dress for the critical-operation confirmation. Scoped to this component and named
   .confirm__* rather than reusing the global .dialog-header/.dialog-body/.dialog-footer rules in
   app.css: those still dress the screens' own edit dialogs, which have not been migrated, and
   sharing class names with them is how a migrated surface gets silently overridden.

   Anatomy matches Kitchen/ItemUnavailableModal.razor.css — the newest modal in the dashboard —
   at this surface's own density: 38px controls (--pt-action-min-height) and 15px body, not the
   kitchen board's 46px/18px. No mascot, no pixel art, no Silkscreen. A caller that needs a larger
   touch target opts in via the LargeTouchTarget parameter (.confirm--touch), which does not
   change this default for any other caller. */

/* No `display` here on purpose. A native <dialog> is display:none until showModal() adds [open],
   and a bare `display: flex` on the element overrides that — which renders the closed dialog
   inline at the bottom of the page, permanently visible. The layout lives on .confirm[open]. */
.confirm[b-aeewz3ni5h] {
    flex-direction: column;
    width: min(480px, 92vw);
    /* dvh, not vh: a phone's dynamic toolbar and its virtual keyboard both shrink the visible
       area below 100vh, which put this panel's footer — and its primary action — out of reach. */
    max-height: calc(100dvh - 60px);
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--pt-radio-card-border);
    border-radius: 14px;
    background: var(--pt-app-bg);
    color: var(--pt-ink-900);
    box-shadow: var(--pt-shadow-panel);
    font-family: var(--pt-font-body);
}

.confirm[open][b-aeewz3ni5h] {
    display: flex;
    animation: confirm-rise-b-aeewz3ni5h var(--pt-dur-base) var(--pt-ease-soft);
}

.confirm[b-aeewz3ni5h]::backdrop { background: oklch(from var(--pt-ink-900) l c h / .55); }

@keyframes confirm-rise-b-aeewz3ni5h {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Head ─────────────────────────────────────────────────── */

.confirm__head[b-aeewz3ni5h] {
    display: flex;
    align-items: flex-start;
    gap: var(--pt-space-3);
    padding: var(--pt-space-6) var(--pt-space-6) var(--pt-space-4);
}

/* The tone lives in this square, not in the title colour: it is the one thing a person reads
   before deciding, and a tinted block carries "irreversible" further than a coloured glyph. */
.confirm__mark[b-aeewz3ni5h] {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--pt-radius-md);
    font-size: 19px;
}

.confirm--danger .confirm__mark[b-aeewz3ni5h] {
    background: var(--pt-danger-summary);
    border: 1px solid oklch(from var(--pt-danger) l c h / .28);
    color: var(--pt-danger);
}

.confirm--warning .confirm__mark[b-aeewz3ni5h] {
    background: var(--pt-occupied-tint);
    border: 1px solid var(--pt-occupied-border);
    color: var(--pt-on-warning);
}

.confirm__title[b-aeewz3ni5h] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: var(--pt-tracking-title);
    color: var(--pt-ink-900);
    text-wrap: pretty;
}

/* Deliberately 44px at every pointer type, not just touch — a dialog dismiss target stays
   generous on a mouse too. Intentionally NOT var(--pt-action-min-height-touch): that token
   means "44px because the device is touch," a device-conditional intent this rule doesn't
   have. Do not replace the literal with it — that would make the contract test fail, correctly,
   for a semantic mismatch. See task-3-report.md, item C. */
.confirm__close[b-aeewz3ni5h] {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--pt-radius-md);
    background: transparent;
    color: var(--pt-text-meta);
    font-size: 14px;
    cursor: pointer;
    transition: background var(--pt-dur-color) var(--pt-ease-soft),
                color var(--pt-dur-color) var(--pt-ease-soft);
}

.confirm__close:hover[b-aeewz3ni5h] {
    background: var(--pt-line-100);
    color: var(--pt-text-strong);
}

/* ── Body ─────────────────────────────────────────────────── */

.confirm__body[b-aeewz3ni5h] {
    display: flex;
    min-height: 0;
    flex-direction: column;
    gap: 14px;
    padding: 0 var(--pt-space-6) 20px;
    overflow-y: auto;
}

.confirm__message[b-aeewz3ni5h] {
    margin: 0;
    font-size: var(--pt-text-body);
    line-height: var(--pt-leading-body);
    color: var(--pt-text-secondary);
    text-wrap: pretty;
    white-space: pre-line; /* callers may separate paragraphs with a blank line */
}

.confirm__skip[b-aeewz3ni5h] {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: var(--pt-text-caption);
    line-height: var(--pt-leading-caption);
    color: var(--pt-text-meta);
    cursor: pointer;
}

.confirm__skip input[b-aeewz3ni5h] {
    width: 17px;
    height: 17px;
    margin: 0;
    flex: none;
    accent-color: var(--pt-forest-700);
    cursor: pointer;
}

.confirm__skip input:focus-visible[b-aeewz3ni5h] {
    outline: 0;
    box-shadow: var(--pt-focus-ring);
}

/* ── Foot ─────────────────────────────────────────────────── */

.confirm__foot[b-aeewz3ni5h] {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--pt-space-2);
    padding: var(--pt-space-4) var(--pt-space-6);
    background: var(--pt-tray-bg);
    border-top: 1px solid var(--pt-radio-card-border);
}

.confirm__action[b-aeewz3ni5h] {
    min-height: var(--pt-action-min-height);
    box-sizing: border-box;
    padding: 0 var(--pt-space-4);
    border-radius: var(--pt-radius-md);
    font-family: var(--pt-font-body);
    font-weight: 700;
    font-size: var(--pt-text-caption);
    cursor: pointer;
    transition: background var(--pt-dur-color) var(--pt-ease-soft),
                opacity var(--pt-dur-color) var(--pt-ease-soft);
}

/* Opt-in override for a caller that needs a larger touch target than this component's own
   default density (see the LargeTouchTarget parameter). */
.confirm--touch .confirm__action[b-aeewz3ni5h] {
    min-height: var(--pt-action-min-height-touch);
}

.confirm__action:focus-visible[b-aeewz3ni5h] {
    outline: 0;
    box-shadow: var(--pt-focus-ring);
}

.confirm__action--ghost[b-aeewz3ni5h] {
    border: 1px solid var(--pt-radio-card-border);
    background: var(--pt-surface);
    color: var(--pt-text-strong);
}

.confirm__action--ghost:hover[b-aeewz3ni5h] { background: var(--pt-app-bg); }

.confirm__action--danger[b-aeewz3ni5h] {
    border: 1px solid var(--pt-danger);
    background: var(--pt-danger);
    color: var(--pt-cream-50);
}

/* Gold needs dark text; --pt-on-gold is the token declared for exactly this pairing. */
.confirm__action--warning[b-aeewz3ni5h] {
    border: 1px solid var(--pt-gold-500);
    background: var(--pt-gold-500);
    color: var(--pt-on-gold);
}

.confirm__action--danger:hover[b-aeewz3ni5h],
.confirm__action--warning:hover[b-aeewz3ni5h] { opacity: .9; }

.confirm__action:disabled[b-aeewz3ni5h] {
    opacity: .5;
    cursor: not-allowed;
}

@media (max-width: 600px) {
    .confirm__foot[b-aeewz3ni5h] { justify-content: stretch; }
    .confirm__action[b-aeewz3ni5h] { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .confirm[open][b-aeewz3ni5h] { animation: none; }
    .confirm__close[b-aeewz3ni5h],
    .confirm__action[b-aeewz3ni5h] { transition: none; }
}

/* The LargeTouchTarget parameter stays: it is an opt-in for callers that want the bigger target
   on a mouse too. This block is the device-driven floor underneath it.
   No .confirm__close rule here: it is already 44px unconditionally above, so a copy of the same
   value under this query would be a no-op. */
@media (hover: none) and (pointer: coarse) {
    .confirm__action[b-aeewz3ni5h] { min-height: var(--pt-action-min-height-touch); }
}
/* /Components/Shared/CopyUrlButton.razor.rz.scp.css */
.share-copy[b-awrefamqsm] { gap: var(--pt-space-2); }

.share-copy--done[b-awrefamqsm],
.share-copy--done:hover[b-awrefamqsm] {
    border-color: var(--pt-success);
    background: oklch(from var(--pt-success) l c h / .12);
    color: var(--pt-on-success);
}

/* Clipboard and tick share one grid cell. The clipboard shrinks away and the tick draws itself
   left to right, so the confirmation reads as one motion. Going back is quicker and undelayed. */
.share-copy__icon[b-awrefamqsm] { display: inline-grid; place-items: center; }

.share-copy__icon > .bi[b-awrefamqsm] {
    grid-area: 1 / 1;
    transition:
        opacity var(--pt-dur-quick) var(--pt-ease-soft),
        transform var(--pt-dur-base) var(--pt-ease-glide),
        clip-path var(--pt-dur-base) var(--pt-ease-glide);
}

.share-copy__icon > .bi-check2[b-awrefamqsm] { opacity: 0; transform: scale(.6); clip-path: inset(0 100% 0 0); }

.share-copy--done .share-copy__icon > .bi-clipboard[b-awrefamqsm] { opacity: 0; transform: scale(.6) rotate(-12deg); }

.share-copy--done .share-copy__icon > .bi-check2[b-awrefamqsm] {
    opacity: 1;
    transform: none;
    clip-path: inset(0);
    transition-delay: 70ms;
}

/* visibility (not just opacity) keeps the hidden label out of aria-live and the a11y tree. */
.share-copy__label[b-awrefamqsm] { display: inline-grid; }

.share-copy__label > span[b-awrefamqsm] {
    grid-area: 1 / 1;
    transition: opacity var(--pt-dur-quick) var(--pt-ease-soft), visibility var(--pt-dur-quick);
}

.share-copy__copied[b-awrefamqsm],
.share-copy--done .share-copy__idle[b-awrefamqsm] { opacity: 0; visibility: hidden; }

.share-copy--done .share-copy__copied[b-awrefamqsm] { opacity: 1; visibility: visible; transition-delay: 70ms; }

@media (prefers-reduced-motion: reduce) {
    .share-copy__icon > .bi[b-awrefamqsm] { transition: opacity var(--pt-dur-quick) linear; transform: none !important; clip-path: none !important; }
}

.share-copy:focus-visible[b-awrefamqsm] { outline: none; box-shadow: var(--pt-focus-ring); }

@media (hover: none) and (pointer: coarse) { .share-copy[b-awrefamqsm] { min-height: var(--pt-action-min-height-touch); } }

/* Icon-only variant: a fixed square beside an inline URL. */
.share-copy--icon[b-awrefamqsm] { width: 32px; height: 32px; padding: 0; flex: none; justify-content: center; }
/* /Components/Shared/ErrorPanel.razor.rz.scp.css */
/* Management surface: brand lives in colour and type only. No illustration, no mascot,
   no pixel font here — Silkscreen stays reserved for nav group labels and section badges,
   so the URL chip below uses a plain monospace stack.
   Capy 404.dc.html is the LANDING site's 404 (3px border, hard shadow, Silkscreen stamp)
   and is deliberately not the authority for a page inside the management shell. */

.error-panel[b-pav97rtpd8] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pt-space-3);
    width: 100%;
    max-width: 560px;
    margin: var(--pt-space-12) auto;
    background: var(--pt-surface);
    border: var(--pt-border-card);
    border-radius: var(--pt-radius-lg);
    box-shadow: var(--pt-shadow-card);
    padding: var(--pt-space-6);
}

.error-panel__mark[b-pav97rtpd8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--pt-radius-md);
}

.error-panel__mark--neutral[b-pav97rtpd8] {
    background: var(--pt-cream-100);
    border: 1px solid var(--pt-cream-300);
    color: var(--pt-text-meta);
}

.error-panel__mark--warning[b-pav97rtpd8] {
    background: var(--pt-occupied-tint);
    border: 1px solid var(--pt-occupied-border);
    color: var(--pt-on-warning);
}

/* The icon is passed in as inline SVG; it inherits the square's colour. */
.error-panel__mark[b-pav97rtpd8]  svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    fill: none;
}

.error-panel__eyebrow[b-pav97rtpd8] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}

.error-panel__eyebrow--neutral[b-pav97rtpd8] { color: var(--pt-text-meta); }
.error-panel__eyebrow--warning[b-pav97rtpd8] { color: var(--pt-on-warning); }

.error-panel__title[b-pav97rtpd8] {
    font-family: var(--pt-font-display);
    font-weight: 800;
    font-size: var(--pt-text-title);
    line-height: var(--pt-leading-title);
    letter-spacing: var(--pt-tracking-title);
    color: var(--pt-text-strong);
    margin: 0;
}

.error-panel__body[b-pav97rtpd8] {
    font-size: var(--pt-text-body);
    line-height: var(--pt-leading-body);
    color: var(--pt-text-secondary);
    margin: 0;
    text-wrap: pretty;
}

.error-panel__code[b-pav97rtpd8] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--pt-text-secondary);
    background: var(--pt-tray-bg);
    border: 1px solid var(--pt-line-200);
    border-radius: var(--pt-radius-sm);
    padding: 6px 10px;
    /* A long URL must wrap inside the panel rather than widen it. */
    max-width: 100%;
    overflow-wrap: anywhere;
}

.error-panel__note[b-pav97rtpd8] {
    align-self: stretch;
    background: var(--pt-tray-bg);
    border: 1px solid var(--pt-line-200);
    border-radius: var(--pt-radius-md);
    padding: var(--pt-space-3) 14px;
    font-size: var(--pt-text-caption);
    line-height: var(--pt-leading-caption);
    color: var(--pt-text-secondary);
    margin: 0;
    text-wrap: pretty;
}

.error-panel__actions[b-pav97rtpd8] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--pt-space-4);
    margin-top: var(--pt-space-1);
}

.error-panel__action[b-pav97rtpd8] {
    display: inline-flex;
    align-items: center;
    min-height: var(--pt-action-min-height);
    font-family: var(--pt-font-body);
    font-weight: 700;
    font-size: var(--pt-text-caption);
    color: var(--pt-cream-50);
    background: var(--pt-forest-700);
    border-radius: var(--pt-radius-md);
    padding: var(--pt-space-2) var(--pt-space-4);
    text-decoration: none;
    transition: background var(--pt-dur-color) var(--pt-ease-soft);
}

.error-panel__action:hover[b-pav97rtpd8] { background: var(--pt-forest-600); color: var(--pt-cream-50); }

.error-panel__secondary[b-pav97rtpd8] {
    font-size: var(--pt-text-caption);
    font-weight: 600;
    color: var(--pt-text-secondary);
    text-decoration: none;
    border-bottom: 1px solid var(--pt-radio-mark-border);
    padding-bottom: 1px;
    transition: color var(--pt-dur-color) var(--pt-ease-soft);
}

.error-panel__secondary:hover[b-pav97rtpd8] { color: var(--pt-text-strong); }

.error-panel__detail[b-pav97rtpd8] {
    font-size: var(--pt-text-caption);
    color: var(--pt-text-meta);
    margin: var(--pt-space-1) 0 0;
}

.error-panel__detail[b-pav97rtpd8]  code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--pt-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .error-panel__action[b-pav97rtpd8],
    .error-panel__secondary[b-pav97rtpd8] { transition: none; }
}

@media (hover: none) and (pointer: coarse) {
    .error-panel__action[b-pav97rtpd8] { min-height: var(--pt-action-min-height-touch); }
}
/* /Components/Shared/InfoHint.razor.rz.scp.css */
.info-hint[b-nd9h6d84ku] { position: relative; display: inline-flex; align-items: center; vertical-align: middle; }

.info-hint__trigger[b-nd9h6d84ku] {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--pt-space-1);
    border: 0; border-radius: var(--pt-radius-pill); background: transparent; cursor: pointer;
    color: var(--pt-text-muted); font: inherit; font-size: 15px;
    width: 24px; height: 24px;
}
.info-hint--open .info-hint__trigger[b-nd9h6d84ku],
.info-hint__trigger:hover[b-nd9h6d84ku] { color: var(--pt-forest-700); }
.info-hint__trigger:focus-visible[b-nd9h6d84ku] { outline: none; box-shadow: var(--pt-focus-ring); }

/* Content trigger (ChildContent supplied): the trigger is the caller's own visible content, so
   it keeps the caller's inherited color instead of the icon's muted one. */
.info-hint--with-content .info-hint__trigger[b-nd9h6d84ku] {
    width: auto; height: auto; font-size: inherit; padding: 0 var(--pt-space-1); color: inherit;
}
.info-hint--with-content.info-hint--open .info-hint__trigger[b-nd9h6d84ku],
.info-hint--with-content .info-hint__trigger:hover[b-nd9h6d84ku] { color: inherit; }

/* Touch: expand the trigger to the platform's minimum comfortable target without pushing
   surrounding content, matching capy-forms.css's own touch-sizing pattern. */
@media (hover: none) and (pointer: coarse) {
    .info-hint__trigger[b-nd9h6d84ku] {
        width: var(--pt-action-min-height-touch); height: var(--pt-action-min-height-touch);
        margin: -10px -10px;
    }
    .info-hint--with-content .info-hint__trigger[b-nd9h6d84ku] {
        width: auto; height: auto; min-height: var(--pt-action-min-height-touch); margin: 0;
    }
}

.info-hint__bubble[b-nd9h6d84ku] {
    display: none; z-index: 30; box-sizing: border-box;
    padding: 10px var(--pt-space-3);
    border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-md);
    background: var(--pt-surface); box-shadow: var(--pt-shadow-popover);
    color: var(--pt-text-strong); font: 400 13px/1.45 var(--pt-font-body); text-align: left; white-space: normal;
}

/* CSS anchor positioning: the bubble anchors to the trigger it belongs to (anchor-name set inline
   per instance in InfoHint.razor, since it has to be unique per InfoHint) instead of relying on
   being the trigger's next sibling in normal flow. `position: fixed` with an anchor escapes every
   card's own overflow clipping and MainLayout.razor.css's overflow-x: hidden, so the bubble stays
   pinned to the (i) the user tapped at every width — no separate viewport-anchored rule needed
   below 600px the way the fallback still requires. */
@supports (anchor-name: --a) {
    .info-hint__bubble[b-nd9h6d84ku] {
        position: fixed;
        top: anchor(bottom);
        left: calc(anchor(left) - 8px);
        margin-top: var(--pt-space-1);
        width: max-content;
        max-width: min(260px, calc(100vw - 32px));
        position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
    }
    .info-hint--end .info-hint__bubble[b-nd9h6d84ku] { left: auto; right: calc(anchor(right) - 8px); }

    @media (max-width: 600px) {
        .info-hint__bubble[b-nd9h6d84ku], .info-hint--end .info-hint__bubble[b-nd9h6d84ku] {
            left: var(--pt-space-4); right: var(--pt-space-4); width: auto; max-width: none;
            position-try-fallbacks: flip-block;
        }
    }
}

/* Fallback for browsers without anchor positioning: the previous trigger-relative bubble,
   unchanged, including its own narrow-viewport escape below. */
@supports not (anchor-name: --a) {
    .info-hint__bubble[b-nd9h6d84ku] { position: absolute; top: calc(100% + var(--pt-space-1)); left: -8px; width: max-content; max-width: min(260px, calc(100vw - 32px)); }
    .info-hint--end .info-hint__bubble[b-nd9h6d84ku] { left: auto; right: -8px; }

    /* Narrow viewports (the Reservas stat strip's two columns, Reportes KPI tiles, the Menú
       header): the panel that hosts the trigger is too narrow for a 260px bubble anchored to the
       trigger's own edge, and MainLayout.razor.css's overflow-x: hidden clips whatever spills past
       it. Anchoring to the viewport instead sidesteps both. No InfoHint sits inside a transformed
       ancestor or a modal, so `position: fixed` is safe here. */
    @media (max-width: 600px) {
        /* .info-hint--end .info-hint__bubble (specificity 0,2,0) otherwise outranks this rule
           (0,1,0) and keeps its own `left: auto; right: -8px;` from the unqualified selector above,
           which is trigger-relative and gets clipped by the same overflow-x: hidden this fixed
           anchoring exists to sidestep. Naming both selectors here matches the fixed anchoring for
           every End-placed InfoHint too. */
        .info-hint__bubble[b-nd9h6d84ku], .info-hint--end .info-hint__bubble[b-nd9h6d84ku] { position: fixed; left: var(--pt-space-4); right: var(--pt-space-4); top: auto; bottom: var(--pt-space-4); width: auto; max-width: none; }
    }
}

.info-hint:hover .info-hint__bubble[b-nd9h6d84ku],
.info-hint:focus-within .info-hint__bubble[b-nd9h6d84ku],
.info-hint--open .info-hint__bubble[b-nd9h6d84ku] { display: block; }
.info-hint--dismissed .info-hint__bubble[b-nd9h6d84ku] { display: none; }
/* /Components/Shared/JoinTeamCodeForm.razor.rz.scp.css */
.join-code__submit:disabled[b-5veft3oaa1],
.join-code__submit:disabled:hover[b-5veft3oaa1] {
    border: var(--pt-border-card);
    background: var(--pt-cream-100);
    color: var(--pt-text-muted);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
/* /Components/Shared/PhoneInput.razor.rz.scp.css */
.phone-input[b-ejfi3pd3tf] {
    display: flex;
    gap: var(--pt-space-2);
    width: min(100%, 320px);
}

.phone-input__country[b-ejfi3pd3tf] {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    width: auto;
    white-space: nowrap;
}

.phone-input__country:focus-within[b-ejfi3pd3tf] {
    border-color: var(--pt-forest-600);
    box-shadow: var(--pt-focus-ring);
}

.phone-input__face .bi[b-ejfi3pd3tf] {
    color: var(--pt-text-meta);
    font-size: var(--pt-text-caption);
}

.phone-input__select[b-ejfi3pd3tf] {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    cursor: pointer;
    font: inherit;
}

.phone-input__number[b-ejfi3pd3tf] {
    flex: 1;
    min-width: 0;
}
/* /Components/Shared/RestaurantSwitcher.razor.rz.scp.css */
/* Renders inside NavMenu's user popover, on forest-800. */
.restaurant-switcher[b-5c2npm02eo] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.restaurant-switcher__toggle[b-5c2npm02eo] {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 10px; border: 0; border-radius: var(--pt-radius-md);
    background: transparent; color: var(--pt-sage-200);
    font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: all var(--pt-dur-glide) var(--pt-ease-glide);
}
.restaurant-switcher__toggle:hover[b-5c2npm02eo] { background: var(--pt-nav-fill-soft); }
.restaurant-switcher__toggle i:first-child[b-5c2npm02eo] { width: 17px; flex: none; color: var(--pt-sage-400); }
.restaurant-switcher__toggle-label[b-5c2npm02eo] { flex: 1; text-align: left; }
.restaurant-switcher__toggle i:last-child[b-5c2npm02eo] { font-size: 10px; color: var(--pt-moss-500); }

.restaurant-switcher__list[b-5c2npm02eo] {
    display: flex; flex-direction: column; gap: 2px;
    margin: 2px 0 4px; padding: 4px 0 4px 8px;
    border-left: 1px solid var(--pt-nav-line);
    /* The same entrance the outer popover uses. The keyframe was duplicated here because scoped
       CSS cannot share one; it lives in app.css now, so the local copy is gone. */
    animation: capy-rise 160ms var(--pt-ease-enter) both;
}

.restaurant-switcher form[b-5c2npm02eo] { margin: 0; }

.restaurant-switcher__choice[b-5c2npm02eo] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pt-space-2);
    min-height: 40px;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--pt-radius-md);
    background: transparent;
    color: var(--pt-sage-100);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    text-align: left;
    transition: all var(--pt-dur-glide) var(--pt-ease-glide);
}

.restaurant-switcher__name[b-5c2npm02eo] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.restaurant-switcher__mark[b-5c2npm02eo] {
    flex: none; width: 24px; height: 24px; border-radius: var(--pt-radius-chip);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800;
}
.restaurant-switcher__text[b-5c2npm02eo] { flex: 1; min-width: 0; text-align: left; }
.restaurant-switcher__meta[b-5c2npm02eo] { display: block; font-size: 10.5px; color: var(--pt-moss-500); }

.restaurant-switcher__choice:not(:disabled)[b-5c2npm02eo] { cursor: pointer; }

.restaurant-switcher__choice:not(:disabled):hover[b-5c2npm02eo] { background: var(--pt-nav-fill-soft); }

.restaurant-switcher__choice:focus-visible[b-5c2npm02eo] {
    outline: 2px solid var(--pt-gold-500);
    outline-offset: -2px;
}

/* The current restaurant carries a resting fill and the check icon, as the prototype has it —
   the row's own text stays the same colour as every other row. Colour alone never carries the
   state: the check is a shape, the row is disabled, and it renders aria-current="page". */
.restaurant-switcher__choice--current[b-5c2npm02eo] { background: var(--pt-nav-fill-soft); }
.restaurant-switcher__choice--current i[b-5c2npm02eo] { flex: none; font-size: 13px; color: var(--pt-nav-mark); }

.restaurant-switcher__add[b-5c2npm02eo] {
    display: flex; align-items: center; gap: 8px; padding: 8px 9px;
    border-radius: var(--pt-radius-md); font-size: 12px; font-weight: 700;
    color: var(--pt-sage-400); text-decoration: none;
    transition: all var(--pt-dur-glide) var(--pt-ease-glide);
}
.restaurant-switcher__add:hover[b-5c2npm02eo] { background: var(--pt-nav-fill-soft); }
.restaurant-switcher__add i[b-5c2npm02eo] { width: 17px; flex: none; font-size: 12px; }

/* Press, on the design system's dur-press / ease-press. These rows sit inside the rail's
   popover, so they take the same deeper fill the popover items do rather than a shadow. */
.restaurant-switcher__toggle:active[b-5c2npm02eo],
.restaurant-switcher__choice:not(:disabled):active[b-5c2npm02eo],
.restaurant-switcher__add:active[b-5c2npm02eo] {
    background: var(--pt-nav-fill-press);
    transition-duration: var(--pt-dur-press);
    transition-timing-function: var(--pt-ease-press);
}

/* Same policy as the rail that hosts this: the accordion's entrance goes, the fills still glide.
   None of these rows transitions a transform, so there is nothing else to suppress. */
@media (prefers-reduced-motion: reduce) {
    .restaurant-switcher__list[b-5c2npm02eo] { animation: none; }
}

/* /Components/Shared/ShareLinkRow.razor.rz.scp.css */
.share-row[b-2ccezx05ad] { display: flex; flex-direction: column; gap: var(--pt-space-3); min-width: 0; padding: var(--pt-space-4); background: var(--pt-surface); border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-lg); }
.share-row--muted[b-2ccezx05ad] { background: var(--pt-app-bg); }

.share-row__head[b-2ccezx05ad] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pt-space-2); }
.share-row__head h3[b-2ccezx05ad] { margin: 0; font: 700 16px var(--pt-font-display); color: var(--pt-ink-900); }
.share-row__description[b-2ccezx05ad] { margin: 0; color: var(--pt-text-secondary); font-size: 14px; }

.share-row__chip[b-2ccezx05ad] { padding: 3px 8px; border-radius: var(--pt-radius-chip); font-size: 12px; font-weight: 800; }
.share-row__chip--on[b-2ccezx05ad] { background: oklch(from var(--pt-success) l c h / .12); color: var(--pt-on-success); }
.share-row__chip--off[b-2ccezx05ad] { background: var(--pt-chrome-warn-tint); color: var(--pt-on-warning); }
.share-row__chip--neutral[b-2ccezx05ad] { background: var(--pt-line-100); color: var(--pt-text-secondary); }

.share-row__url[b-2ccezx05ad] { display: flex; flex-wrap: wrap; gap: var(--pt-space-2); min-width: 0; }
.share-row__url output[b-2ccezx05ad] { flex: 1 1 220px; min-width: 0; box-sizing: border-box; min-height: var(--pt-action-min-height); padding: 0 var(--pt-space-3); border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-md); background: var(--pt-app-bg); color: var(--pt-ink-900); font: 600 13.5px var(--pt-font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; line-height: calc(var(--pt-action-min-height) - 2px); }

.share-row__actions[b-2ccezx05ad] { display: flex; flex-wrap: wrap; gap: var(--pt-space-2); }
.share-row__actions .capy-form-action:focus-visible[b-2ccezx05ad],
.share-row__actions a:focus-visible[b-2ccezx05ad] { outline: none; box-shadow: var(--pt-focus-ring); }

.share-row__qr[b-2ccezx05ad] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pt-space-4); padding-top: var(--pt-space-3); border-top: 1px solid var(--pt-line-100); }
.share-row__qr[hidden][b-2ccezx05ad] { display: none; }
.share-row__qr p[b-2ccezx05ad] { margin: 0; max-width: 46ch; color: var(--pt-text-secondary); font-size: 14px; }
.share-row__qr-code[b-2ccezx05ad] { padding: 6px; background: var(--pt-surface); border: 1px solid var(--pt-line-200); border-radius: var(--pt-radius-md); line-height: 0; }

@media (hover: none) and (pointer: coarse) {
    .share-row__url output[b-2ccezx05ad] { min-height: var(--pt-action-min-height-touch); line-height: calc(var(--pt-action-min-height-touch) - 2px); }
    .share-row__actions .capy-form-action[b-2ccezx05ad] { min-height: var(--pt-action-min-height-touch); }
}

@media (max-width: 480px) {
    .share-row[b-2ccezx05ad] { padding: var(--pt-space-3); }
    .share-row__actions .capy-form-action[b-2ccezx05ad], .share-row__url[b-2ccezx05ad]  .capy-form-action { flex: 1 1 auto; }
}
/* /Components/Shared/SubscribePrompt.razor.rz.scp.css */
.subscribe-prompt[b-4jxi3ce0e2] { margin: 18px 4px 0; padding: 14px; border: 1px solid var(--pt-nav-line); border-radius: var(--pt-radius-lg);
    background: var(--pt-nav-fill-soft); display: flex; flex-direction: column; gap: var(--pt-space-2); }
.subscribe-prompt__title[b-4jxi3ce0e2] { display: flex; align-items: center; gap: var(--pt-space-2); color: var(--pt-sage-100); font-weight: 700; font-size: 13px; }
.subscribe-prompt__title i[b-4jxi3ce0e2] { font-size: 14px; color: var(--pt-gold-400); }
.subscribe-prompt__body[b-4jxi3ce0e2] { color: var(--pt-sage-300); font-size: 12px; line-height: 1.45; }
.subscribe-prompt__cta[b-4jxi3ce0e2] { align-self: flex-start; min-height: 32px; display: inline-flex; align-items: center; padding: 0 var(--pt-space-3);
    border-radius: var(--pt-radius-md); background: var(--pt-gold-500); color: var(--pt-ink-900); font-weight: 800; font-size: 12.5px; text-decoration: none; }
.subscribe-prompt__cta:focus-visible[b-4jxi3ce0e2] { outline: 2px solid var(--pt-gold-400); outline-offset: 2px; }
/* /Components/Shared/TimeTextInput.razor.rz.scp.css */
.time-input[b-djlzm333ix] { display:block; }
.time-input__box[b-djlzm333ix] { position:relative; display:block; }
.time-input__box--compact[b-djlzm333ix] { width:124px; max-width:100%; }
.time-input__text[b-djlzm333ix] { padding-right:42px; }
.time-input__clock[b-djlzm333ix] { position:absolute; top:50%; right:6px; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; max-height:calc(100% - 4px); padding:0; transform:translateY(-50%); border:0; border-radius:8px; background:transparent; color:var(--pt-text-meta); cursor:pointer; }
.time-input__clock:hover[b-djlzm333ix] { background:var(--pt-row-hover); color:var(--pt-text-strong); }
.time-input__native[b-djlzm333ix] { position:absolute; bottom:0; right:6px; width:32px; height:1px; padding:0; border:0; opacity:0; pointer-events:none; }
/* Same danger dress as .field--error .field__control, for boxes not wrapped in a .field--error. */
.time-input__text[aria-invalid="true"][b-djlzm333ix] { border-color:var(--pt-danger); background:var(--pt-danger-surface); box-shadow:0 0 0 3px oklch(from var(--pt-danger) l c h / .12); }
.time-input .field__error[b-djlzm333ix] { margin-top:6px; }