/* Uorder design layer: tokens + refinements over Argon (panel) and Argon Design System (menu).
   Loaded after argon/custom CSS and before byadmin/*.css, so admin tweaks still win. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Bebas+Neue&display=swap');

:root {
    /* Tokens from mmmmenu-clone/DESIGN.md mapped onto the existing names */
    --paprika: #183510;            /* brand accent: forest green */
    --sand: #dfeb27;               /* brand accent: lime */
    --primary: #000;
    --primary-hover: #000;         /* hover is opacity .8 (see brand/motion.js) */
    --primary-soft: rgba(0, 0, 0, .05);
    --primary-soft-hover: rgba(0, 0, 0, .10);
    --primary-ring: rgba(0, 0, 0, .12);
    --ink: #000;
    --ink-2: #000;
    --muted: rgba(0, 0, 0, .6);    /* never lighter than /60 */
    --icon-muted: #737373;
    --line: rgba(0, 0, 0, .10);
    --line-strong: rgba(0, 0, 0, .2);
    --field-focus: rgba(0, 0, 0, .55);    /* borde del campo enfocado: fino, sin contorno */
    --field-halo: rgba(0, 0, 0, .06);
    --line-footer: #e4e4e7;
    --bg: #fff;
    --surface: #fff;
    --surface-2: #f7f7f7;
    --success: #15803d; --success-soft: #e8f6ed;
    --warning: #92400e; --warning-soft: #fef3c7;
    --danger: #b42318;  --danger-soft: #fdecea;
    --info: #1d4ed8;    --info-soft: #e8efff;
    --radius-sm: 8px; --radius: 12px; --radius-lg: 12px; --radius-xl: 24px; --radius-pill: 9999px;
    --ring: 0 0 0 1px rgba(0, 0, 0, .10);                 /* border = ring */
    --shadow-sm: var(--ring);
    --shadow: 0 4px 24px -6px rgba(0, 0, 0, .25);          /* floating card */
    --shadow-lg: 0 24px 64px 0 rgba(0, 0, 0, .15);         /* raised card / QR */
    --shadow-panel: 0 10px 16px -10px rgba(0, 0, 0, .25);  /* video / panel */
    --shadow-glass: 0 0 40px 0 rgba(0, 0, 0, .25);
    --ease: cubic-bezier(.2, .8, .2, 1);
    --font: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-bebas: 'Bebas Neue', sans-serif;
    /* GrainBackdrop layers: gradient (background-size 300% 100%) + feTurbulence grain (mix-blend overlay) */
    --grain-forest: radial-gradient(90% 120% at 18% 100%, #0f130e 0%, transparent 60%), radial-gradient(70% 90% at 85% 10%, #4b5146 0%, transparent 65%), linear-gradient(120deg, #1a1e18 0%, #2e332b 45%, #1c201a 100%);
    --grain-mono: radial-gradient(60% 100% at 18% 70%, #141414 0%, transparent 70%), radial-gradient(45% 80% at 40% 0%, #6b6b6b 0%, transparent 70%), linear-gradient(100deg, #1f1f1f 0%, #3a3a3a 28%, #a9a9a9 55%, #d6d6d6 78%, #bcbcbc 100%);
    --grain-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
body, .btn, .form-control, .custom-select, .navbar, .card, .dropdown-menu, .modal, .tooltip, .popover,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .display-1, .display-2, .display-3, .display-4 {
    font-family: var(--font);
}
body { color: var(--ink-2); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--ink); letter-spacing: -.025em; }
/* Type scale (DESIGN.md): h1 48/36, h2 36/30, h3 16 medium */
h1, h2, .display-1, .display-2, .display-3, .display-4 { font-weight: 600; letter-spacing: -.05em; }
h1, .h1 { font-size: 48px; line-height: 1; }
h2, .h2 { font-size: 36px; line-height: 1.1; }
@media (max-width: 991.98px) { h1, .h1 { font-size: 36px; } h2, .h2 { font-size: 30px; } }
h3, h4, h5, .card-title { font-weight: 500; line-height: 1.5; }
p { line-height: 1.625; }
small, .small { font-size: 12px; }
.text-muted { color: var(--muted) !important; }
::selection { background: var(--primary-soft); color: var(--ink); }
input, textarea, [contenteditable] { caret-color: var(--primary); }
a:hover { text-underline-offset: 3px; }
.table td, .res_mimimum, #modalPrice, .card-stats .h2, .badge { font-variant-numeric: tabular-nums; }
a { color: var(--primary); transition: color .15s var(--ease); }
a:hover { color: var(--primary-hover); }
hr { border-color: var(--line); }

/* Visible keyboard focus everywhere, no ring on mouse click */
:focus { outline: none; }
:focus-visible, .btn:focus-visible { outline: 2px solid #000 !important; outline-offset: 2px; }
/* Campos: sin contorno; el foco es un borde más oscuro con un halo suave (ver Forms) */
.form-control:focus, .form-control:focus-visible, .custom-select:focus-visible, .input-group .form-control:focus-visible { outline: 0 !important; }

/* ---------- Brand colour wherever Argon used its blue ---------- */
.text-primary, .text-info { color: var(--primary) !important; }
.bg-primary, .bg-gradient-primary, .bg-info, .bg-gradient-info { background: var(--primary) !important; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }

/* ---------- Buttons ---------- */
.btn {
    border-radius: var(--radius-pill); font-weight: 500; letter-spacing: -.025em; line-height: 1.5; text-transform: none;
    box-shadow: none; transition: background-color .1s ease-in-out, border-color .1s ease-in-out, color .1s ease-in-out;
}
/* Pill button: 7px 14px, 16px (14px small / header) */
.btn:not(.btn-sm):not(.btn-icon-only):not(.btn-link) { padding: 7px 14px; font-size: 16px; }
.btn-sm { padding: 5px 12px; font-size: 14px; }
.btn:hover { box-shadow: none; transform: none; }
@media (max-width: 767.98px) { .btn:not(.btn-icon-only) { min-height: 44px; } }
.btn-primary, .btn-info, .btn-success {
    background-color: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-info:hover, .btn-info:focus, .btn-success:hover, .btn-success:focus {
    background-color: var(--primary-hover) !important; border-color: var(--primary-hover) !important;
}
.btn-outline-primary, .btn-outline-secondary { color: var(--primary) !important; border-color: var(--line-strong) !important; background: var(--surface); }
.btn-outline-primary:hover, .btn-outline-secondary:hover { background: var(--primary-soft) !important; border-color: var(--primary) !important; color: var(--primary-hover) !important; }
/* Light pill: black/5, hover black/10 */
.btn-secondary, .btn-neutral, .btn-white, .btn-default {
    background: var(--primary-soft) !important; border: 1px solid transparent !important; color: var(--ink) !important;
}
.btn-secondary:hover, .btn-neutral:hover, .btn-white:hover, .btn-default:hover { background: var(--primary-soft-hover) !important; }
.btn-warning { background: var(--warning-soft) !important; border-color: transparent !important; color: var(--warning) !important; }
.btn-warning:hover { background: #fde68a !important; }
/* Destructive actions: deep red, clearly different from the black primary */
.btn-danger { background-color: var(--danger) !important; border-color: var(--danger) !important; color: #fff !important; }
.btn-danger:hover { background-color: #912018 !important; border-color: #912018 !important; }
.btn-outline-danger { color: var(--danger) !important; border-color: #f3c3bd !important; background: var(--surface); }
.btn-outline-danger:hover { background-color: var(--danger) !important; border-color: var(--danger) !important; color: #fff !important; }
.btn-link { color: var(--primary); font-weight: 600; }
/* Repeated actions (table rows, category toolbar) use tinted buttons so the page's main action stays the only solid one */
.table .btn-sm.btn-primary, .table .btn-sm.btn-info, .table .btn-sm.btn-success {
    background: var(--primary-soft) !important; border-color: transparent !important; color: var(--primary-hover) !important; box-shadow: none;
}
.table .btn-sm.btn-primary:hover, .table .btn-sm.btn-info:hover, .table .btn-sm.btn-success:hover { background: var(--primary-soft-hover) !important; }
.table .btn-sm.btn-danger { background: var(--danger-soft) !important; border-color: transparent !important; color: var(--danger) !important; }
.table .btn-sm.btn-danger:hover { background: var(--danger) !important; color: #fff !important; }
/* Native file picker button */
input[type="file"]::file-selector-button {
    margin-right: .75rem; padding: .5rem .9rem; border: 1px solid var(--line-strong); border-radius: 8px;
    background: var(--surface); color: var(--ink); font: 600 .8125rem var(--font); cursor: pointer; transition: background-color .15s var(--ease);
}
input[type="file"]::file-selector-button:hover { background: var(--surface-2); }
input[type="file"] { color: var(--muted); font-size: .875rem; }

/* ---------- Forms ---------- */
.form-control, .custom-select, .select2-container .select2-selection--single, .select2-container .select2-selection--multiple {
    min-height: 44px; border: 1px solid var(--line-strong); border-radius: 10px; background-color: var(--surface);
    color: var(--ink); font-size: .9375rem; box-shadow: none;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
textarea.form-control { min-height: 96px; }
.form-control-sm { min-height: 36px; font-size: .875rem; }
.form-control::placeholder { color: #6b6b6b; }
.form-control:hover, .custom-select:hover { border-color: rgba(0, 0, 0, .35); }
.form-control:focus, .custom-select:focus,
.select2-container--focus .select2-selection, .select2-container--open .select2-selection {
    border-color: var(--field-focus) !important; box-shadow: 0 0 0 4px var(--field-halo) !important;
}
/* Grupos con ícono: el recuadro entero se marca, no solo el input */
.input-group:focus-within:not(.input-group-alternative) .form-control,
.input-group:focus-within:not(.input-group-alternative) .input-group-text { border-color: var(--field-focus) !important; }
.input-group:focus-within { box-shadow: 0 0 0 4px var(--field-halo); }
.input-group:focus-within .form-control:focus { box-shadow: none !important; }
.input-group-alternative:focus-within { border-color: var(--field-focus); }
.form-control:disabled, .form-control[readonly] { background: var(--surface-2); color: var(--muted); }
.input-group { border-radius: 10px; }
.input-group .form-control, .input-group-alternative { box-shadow: none !important; }
.input-group-alternative:focus-within { box-shadow: 0 0 0 4px var(--field-halo) !important; }
.input-group-text { border-color: var(--line-strong); background: var(--surface); color: var(--muted); border-radius: 10px; }
.input-group-alternative { border: 1px solid var(--line-strong); border-radius: 10px; }
.input-group-alternative .form-control, .input-group-alternative .input-group-text { border: 0; }
.form-control-label, label { color: var(--ink); font-weight: 600; font-size: .875rem; margin-bottom: .4rem; }
.form-text, small.text-muted { color: var(--muted) !important; }
.select2-container .select2-selection--single .select2-selection__rendered { line-height: 42px; color: var(--ink); }
.select2-container .select2-selection--single .select2-selection__arrow { height: 42px; }
/* Select2 copies .form-control onto its wrapper and custom/js/select2.js strips the inner border:
   the wrapper is the visible box, the inner selection just fills it */
.select2-container.form-control { padding: 0; height: auto; }
.select2-container.form-control.select2-container--focus, .select2-container.form-control.select2-container--open { border-color: var(--field-focus); box-shadow: 0 0 0 4px var(--field-halo); }
.select2-container.form-control .select2-selection { min-height: 42px; border: 0 !important; box-shadow: none !important; background: transparent; }
.select2-container--default .select2-selection__rendered { color: var(--ink) !important; }
.select2-container--default .select2-selection__placeholder { color: #6b6b6b !important; }
.select2-container .select2-selection--multiple { display: flex; align-items: center; padding: 2px 8px; }
.select2-container .select2-selection--multiple .select2-search__field { margin-top: 0; }
.select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--primary-soft); border: 0; border-radius: 999px; color: var(--primary-hover); font-weight: 600; }
.select2-dropdown { border-color: var(--line-strong); border-radius: 10px; box-shadow: var(--shadow-lg); overflow: hidden; }
.select2-results__option--highlighted[aria-selected] { background-color: var(--primary) !important; }
.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.custom-radio .custom-control-input:checked ~ .custom-control-label::before,
.custom-toggle input:checked + .custom-toggle-slider { background-color: var(--primary); border-color: var(--primary); }
.custom-control-label::before { border-color: var(--line-strong); }
.custom-checkbox .custom-control-label::before { border-radius: 6px; }
.custom-toggle input:checked + .custom-toggle-slider:before { background-color: #fff; }
.custom-toggle input:not(:checked) + .custom-toggle-slider { border-color: var(--line-strong); }
.custom-toggle input:not(:checked) + .custom-toggle-slider:before { background-color: #a3a3a3; }
.invalid-feedback { color: var(--danger); font-weight: 500; }
.is-invalid, .has-danger .form-control { border-color: var(--danger) !important; }

/* ---------- Cards ---------- */
.card { border: 0; border-radius: var(--radius); box-shadow: var(--ring); background: var(--surface); }
.card.shadow, .card.shadow-lg { box-shadow: var(--shadow) !important; border-color: transparent; }
.card-header, .card-footer { background: transparent; border-color: var(--line); padding: 1.1rem 1.5rem; }
.card-header:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.card-header h3, .card-header .h3, .card-header h2 { font-size: 16px; font-weight: 500; letter-spacing: -.025em; margin-bottom: 0; }
.card-body { padding: 1.5rem; }
.card .table { margin-bottom: 0; }
.card-img-top { border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; }
.bg-secondary { background-color: var(--surface-2) !important; }
.card.bg-secondary, .card .card-body.bg-secondary, .card .card-header.bg-white { background-color: var(--surface) !important; }
.heading-small, .heading { color: var(--muted) !important; letter-spacing: .06em; font-weight: 600; }
/* Admin card headers: Spanish labels are longer, so let the button column size to its content
   instead of the fixed col-4 (buttons were stacking on top of each other). */
.card-header > .row > [class*="col"]:not(.text-right) { flex: 1 1 auto; width: auto; max-width: 100%; }
.card-header > .row > [class*="col"].text-right { flex: 0 0 auto; width: auto; max-width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .5rem; }
.card-header > .row > [class*="col"].text-right > * { margin: 0 !important; }

/* Dashboard stat cards: quiet tinted icon instead of loud coloured circles */
.card-stats .card-body { padding: 1.25rem 1.5rem; }
.card-stats .card-title { color: var(--muted) !important; font-size: .8125rem; letter-spacing: 0; font-weight: 600; text-transform: none !important; }
.card-stats .h2, .card-stats .font-weight-bold { color: var(--ink); font-weight: 600; letter-spacing: -.04em; font-size: 1.5rem; }
.card-stats .icon-shape { border-radius: 12px !important; box-shadow: none !important; background: var(--primary-soft) !important; color: var(--primary) !important; width: 44px; height: 44px; }
.card-stats .icon-shape i { color: var(--primary) !important; }
/* Dark chart card: GrainBackdrop "forest" (gradient + grain overlay) instead of Argon navy */
.bg-gradient-default, .bg-default { background: var(--grain-forest) !important; background-size: 300% 100% !important; background-position: center !important; position: relative; isolation: isolate; box-shadow: var(--shadow-panel); }
.bg-gradient-default::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; mix-blend-mode: overlay; background: var(--grain-image) repeat; background-size: 120px; }
.bg-gradient-default .card-header { border-color: rgba(255, 255, 255, .08); }
.bg-gradient-default .text-light, .main-content .bg-gradient-default .text-light, .bg-gradient-default .text-uppercase { color: rgba(255, 255, 255, .7) !important; }

/* ---------- Tables ---------- */
.table { color: var(--ink-2); }
.table thead th, .table .thead-light th, .table .thead-dark th {
    background: var(--surface-2) !important; color: var(--muted) !important; border-color: var(--line) !important;
    font-size: .6875rem; font-weight: 600; letter-spacing: .06em; padding-top: .8rem; padding-bottom: .8rem;
}
.table td, .table th { border-color: var(--line); vertical-align: middle; }
.table td { padding-top: .9rem; padding-bottom: .9rem; }
.table tbody tr { transition: background-color .12s var(--ease); }
.table tbody tr:hover { background: var(--surface-2); }
.table-flush thead th { border-top: 0; }

/* ---------- Badges & alerts ---------- */
/* Badge: 2px 6px, 14px, medium, black/5 */
.badge { border-radius: var(--radius-pill); font-weight: 500; font-size: 14px; letter-spacing: 0; text-transform: none; padding: 2px 6px; }
.badge-default, .badge-secondary, .badge-light { color: var(--ink) !important; background: var(--primary-soft) !important; }
.badge-primary, .badge-info { color: var(--primary-hover) !important; background-color: var(--primary-soft) !important; }
.badge-success { color: var(--success) !important; background: var(--success-soft) !important; }
.badge-warning { color: var(--warning) !important; background: var(--warning-soft) !important; }
.badge-danger { color: var(--danger) !important; background: var(--danger-soft) !important; }
.badge-dot i { width: .5rem; height: .5rem; }
.alert { border-radius: var(--radius); border: 1px solid transparent; font-weight: 500; }
.alert-success { background: var(--success-soft); color: var(--success); border-color: #c8ead3; }
.alert-danger { background: var(--danger-soft); color: var(--danger); border-color: #f6cdc8; }
.alert-warning { background: var(--warning-soft); color: var(--warning); border-color: #fbe3a0; }
.alert-info, .alert-primary { background: var(--primary-soft); color: var(--primary-hover); border-color: var(--line); }
.alert .close, .alert .close > span { color: currentColor; opacity: .6; }

/* ---------- Nav pills / tabs ---------- */
.nav-pills .nav-link {
    border-radius: 999px; box-shadow: none; border: 1px solid var(--line-strong); background: var(--surface);
    color: var(--ink-2); font-weight: 600; transition: all .15s var(--ease);
}
.nav-pills .nav-link:hover { border-color: var(--primary); color: var(--primary); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link, .page-item.active .page-link {
    background-color: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important;
}
.nav-tabs { border-color: var(--line); }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 600; }
.nav-tabs .nav-link.active { color: var(--primary); border-bottom-color: var(--primary); background: transparent; }
.page-link { border-radius: 8px !important; margin: 0 2px; border-color: var(--line); color: var(--ink-2); }

/* ---------- Dropdowns, modals, tooltips ---------- */
.dropdown-menu { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .4rem; }
.dropdown-item { border-radius: 8px; padding: .55rem .8rem; color: var(--ink-2); font-weight: 500; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-2); color: var(--ink); }
.dropdown-item i { color: var(--muted); }
.modal-content { border: 0; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.modal-header { border-color: var(--line); padding: 1.25rem 1.5rem; }
.modal-footer { border-color: var(--line); }
.modal-title { font-weight: 600; color: var(--ink); }
.modal-backdrop.show { opacity: .45; }
.modal.fade .modal-dialog { transition: transform .22s var(--ease), opacity .22s var(--ease); transform: translateY(12px) scale(.98); }
.modal.show .modal-dialog { transform: none; }
.tooltip-inner { background: var(--ink); border-radius: 8px; font-weight: 500; padding: .4rem .65rem; }

/* ---------- Panel shell ---------- */
body:has(.main-content), .main-content { background: var(--bg) !important; }
.main-content .header, .main-content .header.bg-gradient-primary, .main-content .header.bg-gradient-info { background: transparent !important; }
.main-content .header .text-white, .navbar-top .text-white, .navbar-top .h4 { color: var(--ink) !important; }
.main-content .header .display-2 { font-size: 2rem; }
.main-content .header { background-image: none !important; }
.main-content .header > .mask { display: none; }
.main-content .text-light { color: var(--muted) !important; }
/* Live orders: say so when a column is empty instead of showing a blank card */
.card .list-group.list:not(:has(li))::after { content: "Sin pedidos por ahora"; display: block; padding: 1.5rem 0; color: var(--muted); font-size: .875rem; text-align: center; }
.navbar-top { border-bottom: 1px solid transparent; }
@media (min-width: 768px) { .main-content .header.pt-md-8 { padding-top: 6rem !important; } }
.main-content .footer { background: transparent; color: var(--muted); }
.navbar-top.navbar-dark .nav-link { color: var(--ink) !important; }
.navbar-top .h4 { text-transform: none !important; font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; }
.navbar-top .avatar { box-shadow: none; }
/* Barra superior: "Ver menú" y la cuenta como dos píldoras de la misma altura */
.navbar-top .navbar-nav { gap: 8px; }
.navbar-top.navbar-dark .topbar-pill, .navbar-top.navbar-dark .topbar-account {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--radius-pill);
    font-size: 14px; font-weight: 500; line-height: 1; transition: background-color .15s var(--ease); }
.navbar-top.navbar-dark .topbar-pill { background: var(--primary-soft); }
.navbar-top.navbar-dark .topbar-pill .ni { font-size: 15px; top: 0; }
.topbar-pill__ext { font-size: 10px; color: var(--icon-muted); }
.navbar-top.navbar-dark .topbar-account { padding: 0 12px 0 4px; box-shadow: var(--ring); }
.navbar-top .topbar-account .avatar { width: 32px; height: 32px; }
.navbar-top .topbar-account .media-body { margin-left: 0 !important; }
.navbar-top .topbar-account .media { gap: 8px; }
.topbar-account__chev { font-size: 10px; color: var(--icon-muted); transition: transform .15s var(--ease); }
.topbar-account[aria-expanded="true"] .topbar-account__chev { transform: rotate(180deg); }
@media (hover: hover) {
    .navbar-top.navbar-dark .topbar-pill:hover { background: var(--primary-soft-hover); }
    .navbar-top.navbar-dark .topbar-account:hover { background: var(--primary-soft); }
}
.topbar-pill:focus-visible, .topbar-account:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

/* Sidebar */
.navbar-vertical.navbar-light.bg-white { border-right: 1px solid var(--line); box-shadow: none !important; }
.navbar-vertical .navbar-brand-img, .navbar-vertical .navbar-brand > img { max-height: 56px !important; width: auto !important; max-width: 190px !important; }   /* logo del negocio visible en el panel */
.navbar-vertical .navbar-nav .nav-link {
    margin: 1px .75rem; padding: .65rem .85rem !important; border-radius: 10px;
    color: var(--ink-2) !important; font-weight: 600; font-size: .9rem;
    transition: background-color .15s var(--ease), color .15s var(--ease);
}
.navbar-vertical .navbar-nav .nav-link > i { color: var(--muted) !important; min-width: 1.9rem; font-size: 1rem; transition: color .15s var(--ease); }
.navbar-vertical .navbar-nav .nav-link:hover { background: var(--surface-2); color: var(--ink) !important; }
.navbar-vertical .navbar-nav .nav-link.active, .navbar-vertical .navbar-nav .nav-link.active:hover {
    background: var(--primary-soft); color: var(--primary-hover) !important;
}
.navbar-vertical .navbar-nav .nav-link.active > i { color: var(--primary) !important; }
.navbar-vertical.navbar-expand-md .navbar-nav .nav-link.active:before { display: none; }
.navbar-vertical hr { border-color: var(--line); margin: 1rem 1.5rem !important; }
.navbar-vertical .navbar-heading { color: var(--muted); letter-spacing: .08em; font-weight: 600; padding: 0 1.6rem; }
/* Mobile sidebar menu: same compact logo as the desktop sidebar */
.navbar-collapse-header .collapse-brand img { height: 22px !important; width: auto !important; max-width: 120px !important; }
@media (max-width: 767.98px) {
    .navbar-vertical .navbar-collapse { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
}

/* ---------- Public menu (front) ---------- */
.wrapper { background: var(--surface); }
.navbar-main, .navbar-transparent { transition: background-color .2s var(--ease), box-shadow .2s var(--ease); }
.section-profile-cover { height: 380px !important; }
.section-profile-cover .bg-image { object-fit: cover; height: 100%; position: relative; }
/* Grain over the cover photo, under the rounded separator */
.section-profile-cover .grain-backdrop__grain { z-index: 1; }
.section-profile-cover::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .55) 100%);
}
.section-profile-cover .separator-skew { height: 32px; background: var(--surface); border-radius: 32px 32px 0 0; z-index: 2; }
/* Restaurant menu cover: straight edge with rounded corners instead of the diagonal cut */
.section-profile-cover .separator-skew svg { display: none; }
/* Bebas Neue only for accents: restaurant name and menu section titles */
#restaurant-content h1, .container-restorant h1 { font-family: var(--menu-title-font, var(--font-bebas)); font-weight: 400; font-size: 2.25rem; line-height: 1; letter-spacing: .01em; margin: 1.75rem 0 .25rem; }
.title h1.display-3 { font-family: var(--menu-title-font, var(--font-bebas)); font-weight: 400; font-size: 4rem; line-height: .9; letter-spacing: .01em; }
@media (max-width: 991.98px) { .title h1.display-3 { font-size: 3rem; } }
.container-restorant > div + .row { margin-top: .5rem; }
.title .display-4 { font-size: 1.05rem; font-weight: 500; color: var(--muted); text-transform: capitalize; }
.title p { color: var(--muted); }

/* Category chips: sticky, scrollable on phones, dark active chip */
.tabbable.sticky { background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); z-index: 20; }
.tabbable .nav-pills { gap: .5rem; padding: .6rem 0; scrollbar-width: none; background: transparent !important; }
.tabbable .nav-pills::-webkit-scrollbar { display: none; }
.nav-item-category { padding: 0; }
.tabbable .nav-pills .nav-link { margin: 0 !important; padding: .5rem 1rem; font-size: .875rem; }
@media (max-width: 767.98px) { .nav-pills .nav-link { min-height: 44px; display: inline-flex; align-items: center; } }
.tabbable .nav-pills .nav-link:not(.active) { color: var(--ink-2); }

/* Product cards */
.strip {
    background: var(--surface); border: 0; box-shadow: var(--ring); border-radius: var(--radius-lg); padding: .75rem .75rem 1rem;
    margin-bottom: 1.5rem; height: calc(100% - 1.5rem); display: flex; flex-direction: column;
    transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.strip:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.strip figure { height: auto; aspect-ratio: 4 / 3; border-radius: var(--radius); margin-bottom: .85rem; background: #f2f2f2; }
.strip figure img { height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.strip figure:hover img { transform: translate(-50%, -50%) scale(1.04); }
.strip .res_title { font-size: 1rem; line-height: 1.3; margin-bottom: .25rem; padding: 0 .25rem; }
.strip .res_title a { color: var(--ink); font-weight: 600; }
.strip .res_title a:hover { color: var(--primary); }
.strip .res_description { color: var(--muted); font-size: .85rem; line-height: 1.45; padding: 0 .25rem; margin-bottom: .75rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.strip > .row { margin-top: auto; padding: 0 .25rem; }
.strip .res_mimimum { color: var(--ink); font-weight: 600; font-size: 1rem; }
.strip .res_mimimum .text-muted { font-weight: 500; font-size: .85rem; margin-right: .25rem; }
/* Phones: compact rows (text left, photo right) so more dishes fit per screen */
@media (max-width: 575.98px) {
    .strip {
        display: grid; grid-template-columns: 1fr 104px; grid-template-rows: auto 1fr auto; column-gap: .9rem;
        height: auto; margin-bottom: .75rem; padding: .85rem;
    }
    .strip figure { grid-column: 2; grid-row: 1 / span 3; width: 104px; height: 104px; aspect-ratio: auto; margin: 0; }
    .strip .res_title, .strip .res_description, .strip > .row { grid-column: 1; padding: 0; }
    .strip > .row { margin: 0; align-self: end; }
    .strip > .row > [class*="col"] { padding: 0; }
    .strip:hover { transform: none; }
}

/* ---------- Restaurant menu page (restorants/show): mmmmenu-style single column ----------
   Colours are variables: these are the white defaults; show.blade.php overrides them inline from
   Restorant::menuDesign() (background colour, version and logo size picked in Diseño). */
body:has(.menu-hero) {
    --menu-bg: #fff;
    --menu-fg: #000;
    --menu-muted: var(--muted);
    --menu-line: var(--line);
    --menu-accent: #000;              /* cart, floating button, active category */
    --menu-accent-fg: #fff;
    --menu-chip: var(--primary-soft);
    --menu-chip-hover: var(--primary-soft-hover);
    --menu-hover: rgba(0, 0, 0, .02);
    --menu-photo: #f2f2f2;
    --menu-logo: 144px;
    background: var(--menu-bg) !important; color: var(--menu-fg);
}
.menu-hero :focus-visible, #restaurant-content :focus-visible, body:has(.menu-hero) .footer :focus-visible { outline-color: var(--menu-fg) !important; }
body:has(.menu-hero) .wrapper, #restaurant-content { background: transparent !important; }

/* No top bar on the menu: search and cart are floating buttons (.menu-fab) */
body:has(.menu-hero) #navbar-main { display: none !important; }

/* Header: logo centered, name in Bebas, one quiet line of details */
.menu-hero { position: relative; padding: 20px 0 8px; text-align: center; }
/* One side margin for the whole public menu (header, chips, dishes, sheets) */
:root { --menu-gutter: 20px; }
.menu-hero .container, #restaurant-content .container-restorant { max-width: 712px; padding: 0 var(--menu-gutter); }
/* Logo size = max height; wide logos are also capped in width so they fit a phone */
.menu-hero__logo { display: block; width: auto; max-width: min(calc(var(--menu-logo) * 2.2), 100vw - 136px); max-height: var(--menu-logo); height: auto; margin: 0 auto 16px; object-fit: contain; border-radius: var(--radius); }
.menu-hero h1 { margin: 0 0 8px; color: var(--menu-fg); font-family: var(--menu-title-font, var(--font-bebas)); font-weight: 400; font-size: 44px; line-height: .95; letter-spacing: .01em; }
.menu-hero .menu-hero__description { max-width: 480px; margin: 0 auto 8px; color: var(--menu-muted); font-size: 16px; line-height: 1.5; }
/* Status line under the name: coloured dot + "Abierto" in the page colour, the rest quieter */
.menu-hero .menu-status { display: block; margin: 0; color: var(--menu-muted); font-size: 15px; line-height: 1.4; }
.menu-status strong { color: var(--menu-fg); font-weight: 600; }
.menu-status__dot { display: inline-block; margin: 0 8px 1px 0; vertical-align: middle; width: 8px; height: 8px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .22); }
.menu-status--closed .menu-status__dot { background: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .22); }

/* Quick actions, like an app's contact card: round icon with its name under it */
.menu-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; margin: 0 auto 8px; padding: 0; list-style: none; }
.menu-action {
    display: flex; flex-direction: column; align-items: center; gap: 6px; width: 76px; padding: 4px 0; border-radius: var(--radius);
    color: var(--menu-fg) !important; text-decoration: none !important;
}
.menu-action__icon {
    display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%;
    background: var(--menu-chip); font-size: 21px; transition: background-color .15s var(--ease), transform .15s var(--ease);
}
.menu-action__label { max-width: 100%; overflow: hidden; color: var(--menu-muted); font-size: 13px; font-weight: 500; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.menu-action:hover .menu-action__icon { background: var(--menu-chip-hover); }
.menu-action:active .menu-action__icon { transform: scale(.94); }
.menu-action:focus-visible { outline: 2px solid var(--menu-fg) !important; outline-offset: 2px; }
.menu-hero .alert { text-align: left; }

/* Category chips: soft chip, active in the accent colour */
/* Full-bleed band in the page colour when it sticks */
#restaurant-content .tabbable.sticky { background: var(--menu-bg); box-shadow: 0 0 0 100vmax var(--menu-bg); clip-path: inset(0 -100vmax); -webkit-backdrop-filter: none; backdrop-filter: none; }
#restaurant-content .tabbable .nav-pills .nav-link { background: var(--menu-chip); border-color: transparent; color: var(--menu-fg); }
#restaurant-content .tabbable .nav-pills .nav-link:hover { background: var(--menu-chip-hover); color: var(--menu-fg); }
#restaurant-content .tabbable .nav-pills .nav-link.active { background: var(--menu-accent) !important; border-color: var(--menu-accent) !important; color: var(--menu-accent-fg) !important; }

/* Section titles */
#restaurant-content .container-restorant h1 { margin: 32px 0 8px; color: var(--menu-fg); font-size: 36px; }
#restaurant-content .container-restorant h1 + br { display: none; }
#restaurant-content .text-muted, #restaurant-content p { color: var(--menu-muted) !important; }

/* Dishes: one per row, text left and vertically centred, photo right at a fixed-ish width, hairline between rows, whole row clickable */
#restaurant-content .container-restorant > .row { margin: 0; }
#restaurant-content .container-restorant > .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; padding: 0; margin: 0; }
#restaurant-content .container-restorant > .row > [class*="col-"] + [class*="col-"] { border-top: 1px solid var(--menu-line); }
#restaurant-content .strip {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(96px, 28%, 132px); grid-template-rows: 1fr auto auto auto 1fr; column-gap: 16px;
    height: auto; margin: 0 calc(-1 * var(--menu-gutter)); padding: 16px var(--menu-gutter); border-radius: 0; background: transparent; box-shadow: none;
    transition: background-color .15s var(--ease);
}
#restaurant-content .strip:hover { background: var(--menu-hover); box-shadow: none; transform: none; }
#restaurant-content .strip figure {
    grid-column: 2; grid-row: 1 / -1; align-self: center; width: 100%; height: auto; aspect-ratio: 1; margin: 0;
    border-radius: 12px; background: var(--menu-photo);
}
#restaurant-content .strip figure:hover img { transform: translate(-50%, -50%); }
#restaurant-content .strip .res_title, #restaurant-content .strip .res_description, #restaurant-content .strip > .row { grid-column: 1; padding: 0; }
/* Text sits in the middle rows; the empty 1fr rows above and below take the photo's extra height */
#restaurant-content .strip .res_title { grid-row: 2; }
#restaurant-content .strip .res_description { grid-row: 3; }
#restaurant-content .strip > .row { grid-row: 4; }
#restaurant-content .strip .res_title { margin: 0 0 2px; font-size: 16px; line-height: 20px; color: var(--menu-fg); }
#restaurant-content .strip .res_title a { color: var(--menu-fg); font-weight: 600; }
#restaurant-content .strip .res_title a::after { content: ""; position: absolute; inset: 0; }
#restaurant-content .strip .res_title a:focus-visible { outline: 0 !important; }
#restaurant-content .strip:has(.res_title a:focus-visible) { outline: 2px solid var(--menu-fg); outline-offset: -2px; border-radius: 8px; }
#restaurant-content .strip .res_description { display: block; margin: 0; color: var(--menu-muted); font-size: 14px; line-height: 20px; -webkit-line-clamp: none; overflow: visible; }   /* lista: ingredientes completos */
#restaurant-content .strip > .row { margin: 8px 0 0; align-self: start; }
#restaurant-content .strip > .row > [class*="col"] { padding: 0; }
#restaurant-content .strip .res_mimimum { color: var(--menu-fg); font-size: 16px; font-weight: 500; }
#restaurant-content .strip .res_mimimum .text-muted { color: var(--menu-muted) !important; }
#restaurant-content .strip .allergens { position: relative; z-index: 1; }

/* Configurador de tema (Diseño): tipografías por nivel, tamaños, espaciado, botones, cabecera y redes.
   Cada var() lleva el valor de antes como respaldo: sin ajustes el menú queda igual (salvo la fuente de sistema). */
body:has(.menu-hero), body:has(.menu-hero) :is(.btn, .form-control, .custom-select, .modal, .dropdown-menu) { font-family: var(--font-system, var(--font)); }
.menu-hero { background: var(--menu-header-bg, transparent); }
.menu-hero h1 { font-size: calc(var(--size-title, 32px) * 1.375); }
#restaurant-content .container-restorant h1 { margin-top: calc(var(--menu-gap, 12px) * 2.667); }
#restaurant-content .strip .res_title, #restaurant-content .strip .res_title a { font-family: var(--font-subtitle, var(--font)); font-size: var(--size-subtitle, 16px); line-height: 1.25; }
#restaurant-content .strip .res_description { font-family: var(--font); font-size: var(--size-body, 14px); }
.menu-hero .menu-hero__description { font-family: var(--font); font-size: calc(var(--size-body, 14px) + 2px); }
.dish__desc { font-family: var(--font); font-size: calc(var(--size-body, 14px) + 1px); }
#restaurant-content .strip .res_mimimum, .dish__cta, .checkout-submit, .sidenav-cart a.cart-drawer__pay { font-size: calc(var(--size-system, 15px) + 1px); }
#restaurant-content .tabbable .nav-pills .nav-link { font-size: calc(var(--size-system, 15px) - 1px); }
#restaurant-content .strip { padding-top: var(--menu-pad, 16px); padding-bottom: var(--menu-pad, 16px); }
#restaurant-content .strip > .row { margin-top: calc(var(--menu-gap, 12px) * .667); }
@media (max-width: 575.98px) {
    html body:has(.menu-hero) .menu-hero h1 { font-size: calc(var(--size-title, 32px) * 1.1875); }
    .menu-hero__logo { max-height: var(--menu-logo-m, var(--menu-logo)); max-width: min(calc(var(--menu-logo-m, var(--menu-logo)) * 2.2), 100vw - 136px); }
}
/* Botones con el estilo elegido (relleno, borde o suave). Detalle, carrito y pago van sobre blanco: usan --cta (colores del tema claro) */
body:has(.menu-hero) .dish__cta, body:has(.menu-hero) .checkout-submit, body:has(.menu-hero) .sidenav-cart a.cart-drawer__pay {
    background: var(--cta-bg, #000); color: var(--cta-fg, #fff) !important; box-shadow: inset 0 0 0 2px var(--cta-border, transparent);
}
/* Botón flotante: el color elegido sobre el fondo del menú, para que "borde" y "suave" no queden transparentes sobre los platos */
body:has(.menu-hero) .menu-fab__btn { background: linear-gradient(var(--btn-bg, var(--menu-accent)), var(--btn-bg, var(--menu-accent))), var(--menu-bg); color: var(--btn-fg, var(--menu-accent-fg)); box-shadow: inset 0 0 0 2px var(--btn-border, transparent), 0 8px 24px rgba(0, 0, 0, .25); }
/* Redes: suave (fondo) o con borde */
.menu-action__icon { background: var(--social-bg, var(--menu-chip)); box-shadow: inset 0 0 0 1.5px var(--social-border, transparent); }

/* Barra superior del menú: al ancho del menú (no a las orillas en pantallas anchas) */
.menu-topbar:not(.menu-topbar--fixed) { max-width: 712px; margin: 0 auto; padding: 0 var(--menu-gutter); }
/* Barra superior del menú: redes a la izquierda (íconos pequeños), buscador y claro/oscuro a la derecha; logo centrado debajo */
.menu-topbar__social { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.menu-topbar:has(.menu-topbar__social) .menu-topbar__title { display: none; }   /* el título de la barra solo se usa en el pago */
.menu-topbar__social::-webkit-scrollbar { display: none; }
.menu-topbar__social .menu-actions { flex-wrap: nowrap; justify-content: flex-start; gap: 4px; margin: 0; }
.menu-topbar__social .menu-action { width: auto; padding: 0; }
.menu-topbar__social .menu-action__icon { width: 36px; height: 36px; font-size: 16px; }
.menu-topbar__end { display: flex; flex: none; gap: 4px; margin-left: auto; }
/* Buscar y claro/oscuro: mismo círculo e ícono que las redes (tamaño, fondo y borde según el estilo de redes) */
.menu-topbar:has(.menu-topbar__social) .menu-topbar__end .menu-top-btn { width: 36px; height: 36px; background: var(--social-bg, var(--menu-chip)); box-shadow: inset 0 0 0 1.5px var(--social-border, transparent); }
/* Logo protagonista: bajo la barra de íconos, con aire alrededor y ancho libre (ya no comparte fila con botones) */
.menu-hero:has(.menu-topbar__social) { padding-bottom: 12px; }
.menu-hero:has(.menu-topbar__social) .container { padding-top: 48px; }
/* Mismo logo en todas las páginas (menú, pago, /pago y gracias): el tamaño elegido en Diseño manda el alto; el ancho libre hasta 3,5 veces */
.menu-hero .menu-hero__logo { max-width: min(calc(var(--menu-logo) * 3.5), 100%); margin: 8px auto 20px; }
@media (max-width: 575.98px) { .menu-hero .menu-hero__logo { max-width: min(calc(var(--menu-logo-m, var(--menu-logo)) * 3.5), 100%); } }
/* Barra de categorías: píldoras y botones centrados en la misma línea */
#restaurant-content .tabbable.menu-bar .nav-pills { align-self: center; padding-top: 8px; padding-bottom: 8px; margin-bottom: 0 !important; }
#restaurant-content .tabbable.menu-bar .nav-pills > li { margin: 0 !important; }   /* Bootstrap les pone 16 px abajo en el celular */
@media (max-width: 575.98px) { #restaurant-content .container-restorant h1 { margin-top: calc(var(--menu-gap, 12px) * 1.25); } }

/* Barra de categorías: cambio de lista/cuadrícula al final, discreto */
#restaurant-content .tabbable.menu-bar { display: flex; align-items: center; gap: 4px; }
#restaurant-content .tabbable.menu-bar .nav-pills { flex: 1; min-width: 0; margin: 0 !important; padding-left: 0; padding-right: 0; }
/* Todos los íconos redondos del menú (redes arriba y en el pie, claro/oscuro, buscar, lista/cuadrícula): círculo de 36 px y dibujo de 16 px */
.menu-topbar__social .menu-action__icon, .menu-topbar__end .menu-top-btn, .menu-bar__btn, body:has(.menu-hero) .footer-front .social-links a { flex: none; width: 36px; height: 36px; }
.menu-topbar__social .menu-action__icon svg, .menu-topbar__end .menu-top-btn svg, .menu-bar__btn svg, body:has(.menu-hero) .footer-front .social-links a svg { width: 16px; height: 16px; }
.menu-topbar__social .menu-action__icon i, body:has(.menu-hero) .footer-front .social-links a i { font-size: 16px; }
/* Buscar y lista/cuadrícula: mismo círculo que las redes de arriba */
.menu-bar__btn { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
    background: var(--social-bg, var(--menu-chip)); box-shadow: inset 0 0 0 1.5px var(--social-border, transparent); color: var(--menu-fg); cursor: pointer; transition: background-color .15s var(--ease); }
.menu-bar__btn:hover { background: var(--menu-chip-hover); }
.menu-bar__btn:focus-visible { outline: 2px solid var(--menu-fg); outline-offset: 2px; }
.menu-bar__list, html[data-menu-view="grid"] .menu-bar__grid { display: none; }
html[data-menu-view="grid"] .menu-bar__list { display: block; }

/* Botón de pedido en cada plato (texto y estilo de Diseño) */
#restaurant-content .strip .menu-order { position: relative; z-index: 2; min-height: 40px; margin-top: 8px; padding: 0 18px; border-radius: var(--radius-pill);
    background: var(--btn-bg); color: var(--btn-fg); box-shadow: inset 0 0 0 2px var(--btn-border); border: 0; font: 600 calc(var(--size-system, 15px) - 1px) var(--font-system, var(--font)); cursor: pointer; }
#restaurant-content .strip .menu-order:disabled { opacity: .5; cursor: default; }
#restaurant-content .strip .menu-order:focus-visible { outline: 2px solid var(--menu-fg); outline-offset: 2px; }

/* Cuadrícula: 2 columnas en el celular, 3 desde 768 px; foto arriba, sin descripción */
html[data-menu-view="grid"] #restaurant-content .container-restorant > .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--menu-gap, 12px); }
@media (min-width: 768px) { html[data-menu-view="grid"] #restaurant-content .container-restorant > .row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
html[data-menu-view="grid"] #restaurant-content .container-restorant > .row > [class*="col-"] + [class*="col-"] { border-top: 0; }
html[data-menu-view="grid"] #restaurant-content .strip { display: flex; flex-direction: column; height: 100%; margin: 0; padding: 0 0 var(--menu-pad, 16px); border-radius: 16px; }
html[data-menu-view="grid"] #restaurant-content .strip figure { order: -1; width: 100%; margin-bottom: 8px; }
html[data-menu-view="grid"] #restaurant-content .strip .res_title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html[data-menu-view="grid"] #restaurant-content .strip .res_description { display: none; }
html[data-menu-view="grid"] #restaurant-content .strip > .row { margin-top: auto; }
html[data-menu-view="grid"] #restaurant-content .strip .menu-order { width: 100%; }
/* Tarjeta en cuadrícula: el texto y el botón con aire propio, para que el fondo al pasar el mouse no quede pegado */
html[data-menu-view="grid"] #restaurant-content .strip { padding: 0 0 12px; gap: 0; overflow: hidden; }
html[data-menu-view="grid"] #restaurant-content .strip .res_title, html[data-menu-view="grid"] #restaurant-content .strip > .row { padding: 0 10px; align-self: stretch; }
html[data-menu-view="grid"] #restaurant-content .strip figure { border-radius: 12px 12px 0 0; margin-bottom: 10px; }
/* Platos como tarjetas: esquinas de 16 px siempre (la curva no se anima) y al pasar el mouse
   fondo del menú, sombra suave y 2 px de subida. En cuadrícula, sin borde: una sombra ligera siempre para ordenar la grilla */
#restaurant-content .strip { border-radius: 16px; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .15s var(--ease); }
html[data-menu-view="grid"] #restaurant-content .strip { box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 4px 12px -6px rgba(0, 0, 0, .12); }
html[data-menu-view="grid"] #restaurant-content .strip figure { border-radius: 0; }
#restaurant-content .strip:has(.res_title a:focus-visible) { border-radius: 16px; }
/* Lista como tarjetas: sin líneas entre platos, cada plato en su tarjeta con la misma sombra ligera de la cuadrícula.
   Dentro del margen del menú (sin salirse a las orillas) para que la sombra no se corte en el celular */
html:not([data-menu-view="grid"]) #restaurant-content .container-restorant > .row { row-gap: var(--menu-gap, 12px); }
html:not([data-menu-view="grid"]) #restaurant-content .container-restorant > .row > [class*="col-"] + [class*="col-"] { border-top: 0; }
html:not([data-menu-view="grid"]) #restaurant-content .strip { margin: 0; padding-inline: 16px; background: var(--menu-bg); box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 4px 12px -6px rgba(0, 0, 0, .12); }
@media (hover: hover) {
    #restaurant-content .strip:hover, html[data-menu-view="grid"] #restaurant-content .strip:hover {
        background: var(--menu-bg); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 10px 24px -12px rgba(0, 0, 0, .22);
    }
    /* Lista: las líneas entre platos se esconden junto a la tarjeta levantada */
    #restaurant-content .container-restorant > .row > [class*="col-"]:has(.strip:hover),
    #restaurant-content .container-restorant > .row > [class*="col-"]:has(.strip:hover) + [class*="col-"] { border-top-color: transparent; }
}

/* Precio en Bs debajo del precio en $ (Diseño → Mostrar precios también en Bs) */
.price-bs { display: block; color: var(--menu-muted, var(--muted)); font-size: 12px; font-weight: 500; line-height: 1.3; font-variant-numeric: tabular-nums; }
.price-bs:empty { display: none; }
.dish__cta .price-bs { color: inherit; opacity: .8; }

/* Footer: room at the bottom so the floating search/cart buttons never cover the links */
body:has(.menu-hero) .footer { background: transparent !important; border-top: 1px solid var(--menu-line); color: var(--menu-muted); }
body:has(.menu-fab) .footer { padding-bottom: 160px; }

/* Phones: dish details open as a bottom sheet */
@media (max-width: 575.98px) {
    body:has(.menu-hero) .menu-hero { padding-top: 16px; }
    body:has(.menu-hero) .menu-hero h1 { font-size: 38px; }
    body:has(.menu-hero) #productModal .modal-dialog {
        position: fixed; top: auto; left: 0; right: 0; bottom: 0; display: block; width: 100%; height: auto; max-width: none; min-height: 0; margin: 0;
        transform: translateY(100%); transition: transform .3s cubic-bezier(.32, .72, 0, 1);
    }
    body:has(.menu-hero) #productModal.show .modal-dialog { transform: none; }
    body:has(.menu-hero) #productModal .modal-content { max-height: 92vh; overflow-y: auto; border-radius: 24px 24px 0 0; }
    body:has(.menu-hero) #productModal .modal-content::before {
        content: ""; display: block; flex: none; width: 40px; height: 5px; margin: 8px auto 0; border-radius: var(--radius-pill); background: #e5e5e5;
    }
}

/* Dish modal */
#modalImg { width: 100%; height: auto; max-height: 260px; object-fit: cover; border-radius: var(--radius); background: #f2f2f2; }
#modalPrice { display: block; color: var(--ink); font-size: 1.35rem; font-weight: 600; margin: .75rem 0 .25rem; }
#modalDescription { color: var(--muted); }
/* Variant options (order.js builds a wrapping .btn-group-toggle): separate pills with a gap,
   so a wrapped option never ends up as half a pill glued to the group */
.btn-group-toggle.flex-wrap { gap: 8px; }
.btn-group-toggle.flex-wrap > .btn { flex: 0 0 auto; margin: 0 !important; border-radius: var(--radius-pill) !important; }
.btn-group-toggle > .btn.active { background: #000 !important; border-color: #000 !important; color: #fff !important; }
.btn-group-toggle > .btn:has(input:focus-visible) { outline: 2px solid #000; outline-offset: 2px; }

.btn-cart, #desCartLink {
    height: 48px; display: inline-flex; align-items: center; gap: .5rem;
    padding: 0 22px; border: 0 !important; border-radius: 999px !important;
    background: var(--primary) !important; color: #fff !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    text-transform: none; font-weight: 600; font-size: 1rem; letter-spacing: 0;
}
.btn-cart:hover, #desCartLink:hover { background: var(--primary-hover) !important; }
.btn-cart .btn-inner--icon, .btn-cart i { color: #fff !important; margin: 0 !important; }
.btn-cart .badge { background: var(--sand) !important; color: var(--primary) !important; border-radius: 999px; }

/* Checkout: section cards get a card-sized heading, not a page-sized one */
.card-profile > .px-4 > .mt-5 { margin-top: 1.5rem !important; }
.card-profile > .px-4 > .mt-5 > h3 { font-size: 1.25rem; margin-bottom: .9rem; }
.card-profile .border-top { border-color: var(--line) !important; }

/* Cart drawer */
.sidenav-cart { background: var(--surface) !important; box-shadow: -12px 0 40px rgba(0, 0, 0, .16); }
/* cartSideMenu.js toggles display, so the drawer slides in with a keyframe instead of a transition */
.sidenav-cart-open { animation: cart-in .3s var(--ease); }
@keyframes cart-in { from { transform: translateX(100%); } to { transform: none; } }
/* custom.css sizes every drawer link at 25px; buttons keep the button scale */
.sidenav-cart a.btn { display: block; font-size: 1rem; padding: .75rem 1.1rem; text-align: center; }

/* ---------- Motion & small polish ---------- */
[onclick], [data-toggle], .nav-link, label[for], .custom-control-label, summary { cursor: pointer; }
* { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .3) transparent; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Design system primitives (mmmmenu-clone/DESIGN.md) ---------- */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.grain { background-image: var(--grain-image); background-repeat: repeat; background-size: 120px; }
/* <x-grain-backdrop>: put inside a `position: relative; overflow: hidden` box, content above with .z-content */
.grain-backdrop { position: relative; overflow: hidden; border-radius: var(--radius); }
.grain-backdrop__fill, .grain-backdrop__grain { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.grain-backdrop__fill { background-size: 300% 100%; background-position: center; }
.grain-backdrop__fill--forest { background-image: var(--grain-forest); }
.grain-backdrop__fill--mono { background-image: var(--grain-mono); }
.grain-backdrop__fill--left { background-position: left; }
.grain-backdrop__fill--right { background-position: right; }
.grain-backdrop__grain { z-index: 10; mix-blend-mode: overlay; }
.z-content { position: relative; z-index: 20; }

/* <x-pill>: rounded-full, 7px 14px, 16px (sm 14px), medium, -0.025em */
.btn-pill {
    display: inline-flex; align-items: center; justify-content: center; padding: 7px 14px; border: 1px solid transparent;
    border-radius: var(--radius-pill); font: 500 16px/1.5 var(--font); letter-spacing: -.025em; text-align: center; text-decoration: none;
}
.btn-pill--sm { font-size: 14px; }
.btn-pill--dark, .btn-pill--dark:hover { background: #000; color: #fff; }
.btn-pill--light, .btn-pill--light:hover { background: var(--primary-soft); color: #000; }
.btn-pill--light:hover { background: var(--primary-soft-hover); }
@media (max-width: 767.98px) { .btn-pill { min-height: 44px; } }

/* <x-badge> */
.badge-soft { display: inline-block; width: fit-content; padding: 2px 6px; border-radius: var(--radius-pill); background: var(--primary-soft); color: #000; font-size: 14px; font-weight: 500; }

/* <x-section-heading>: badge → h2 → subtitle, centered */
.section-heading { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.section-heading__top { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 450px; }
.section-heading__title { margin: 0; color: #000; font-size: 36px; font-weight: 600; line-height: 1.1; letter-spacing: -.05em; }
.section-heading__text { margin: 0; max-width: 540px; color: var(--muted); font-size: 18px; line-height: 1.5; letter-spacing: -.025em; }
@media (max-width: 991.98px) { .section-heading__title { font-size: 30px; } .section-heading__text { font-size: 16px; } }

/* ---------- Social links (hero, footer, drawer): 44px round buttons with a ring ---------- */
.social-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; list-style: none; }
.social-links a {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
    color: #000 !important; background: #fff; box-shadow: var(--ring);
    transition: background-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.social-links a i { font-size: 20px; line-height: 1; }
.social-links a:hover, .social-links a:focus-visible { background: #000; color: #fff !important; box-shadow: none; }
.social-links a:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

/* ---------- Front footer: centered stack (social, pages, copyright) ---------- */
.footer-front { padding-top: 40px; padding-bottom: 40px; text-align: center; }
.footer-front .container { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.footer-front__social:not(:has(li)) { display: none; }
.footer-front__links { justify-content: center; flex-wrap: wrap; gap: 4px 20px; margin: 0; }
.footer-front__links:not(:has(li:not([v-cloak]))) { display: none; }
.footer-front .footer-front__links .nav-item .nav-link { padding: 4px 0; color: var(--menu-muted, var(--muted)) !important; font-size: 14px; }
.footer-front .footer-front__links .nav-item .nav-link:hover { color: var(--menu-fg, #000) !important; }
.footer-front .copyright { color: var(--menu-muted, var(--muted)); font-size: 13px; }

/* ---------- Front header ---------- */
#navbar-main .navbar-brand--name {
    color: var(--menu-fg, #000); font-family: var(--menu-title-font, var(--font-bebas)); font-size: 28px; font-weight: 400; line-height: 1; letter-spacing: .01em;
    max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#navbar-main .navbar-toggler { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; }
#navbar-main .navbar-toggler:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

/* Phones/tablets: the menu is a card that slides in from the side chosen in Diseño (data-menu-side) */
.nav-drawer-backdrop { display: none; }
@media (max-width: 991.98px) {
    #navbar-main .navbar-collapse {
        position: fixed; top: 12px; right: 12px; bottom: 12px; left: auto; z-index: 2; display: flex !important; flex-direction: column; align-items: stretch;
        width: min(340px, calc(100vw - 64px)); height: auto !important; margin: 0; padding: 12px 16px 20px;
        overflow-y: auto; opacity: 1; animation: none !important; background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
        visibility: hidden; transform: translateX(calc(100% + 24px));
        transition: transform .3s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .3s;
    }
    #navbar-main[data-menu-side="left"] .navbar-collapse { right: auto; left: 12px; transform: translateX(calc(-100% - 24px)); }
    #navbar-main .navbar-collapse.show { visibility: visible; transform: none; transition: transform .3s cubic-bezier(.32, .72, 0, 1); }
    .nav-drawer-backdrop {
        display: block; position: fixed; inset: 0; z-index: 1; background: rgba(0, 0, 0, .4);
        opacity: 0; visibility: hidden; transition: opacity .2s var(--ease), visibility 0s linear .2s;
    }
    body.nav-drawer-open .nav-drawer-backdrop { opacity: 1; visibility: visible; transition: opacity .2s var(--ease); }
    body.nav-drawer-open { overflow: hidden; }

    #navbar-main .navbar-collapse-header { margin: 0 0 8px; padding: 0 0 12px; border-bottom: 1px solid var(--line); }
    #navbar-main .navbar-collapse-header .row { align-items: center; }
    #navbar-main .nav-drawer-title { display: block; color: #000; font-family: var(--menu-title-font, var(--font-bebas)); font-size: 28px; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #navbar-main .collapse-close { display: flex; justify-content: flex-end; }
    #navbar-main .collapse-close .navbar-toggler { position: relative; flex: none; width: 44px; height: 44px; background: var(--primary-soft); }
    #navbar-main .collapse-close .navbar-toggler span { position: absolute; top: 21px; left: 13px; width: 18px; height: 2px; margin: 0; background: #000; opacity: 1; }
    #navbar-main .collapse-close .navbar-toggler span:first-child { transform: rotate(45deg); }
    #navbar-main .collapse-close .navbar-toggler span:last-child { transform: rotate(-45deg); }

    #navbar-main .navbar-collapse .navbar-nav { gap: 4px; }
    #navbar-main .navbar-collapse .mobile-menu .nav-link {
        display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px !important; border-radius: var(--radius);
        color: #000 !important; font-size: 16px; font-weight: 500;
    }
    #navbar-main .navbar-collapse .mobile-menu .nav-link i { width: 20px; color: #000; text-align: center; }
    #navbar-main .navbar-collapse .mobile-menu .nav-link:hover { background: var(--primary-soft); }
    #navbar-main .nav-drawer-social { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
    #navbar-main .nav-drawer-social .social-links { justify-content: flex-start; }
    #navbar-main .nav-drawer-social:not(:has(li)) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    #navbar-main .navbar-collapse, #navbar-main .navbar-collapse.show, .nav-drawer-backdrop { transition: none !important; }
}

/* ---------- Panel: Diseño tab (menu side picker) ---------- */


/* ---------- Menu: floating search + cart buttons (side picked in Diseño) ---------- */
.menu-fab { position: fixed; right: 16px; bottom: 16px; z-index: 1030; display: flex; flex-direction: column; gap: 12px; }
.menu-fab[data-side="left"] { right: auto; left: 16px; }
.menu-fab__btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0;
    border: 0; border-radius: 50%; background: var(--menu-accent); color: var(--menu-accent-fg); box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    font-size: 20px; cursor: pointer; transition: transform .15s var(--ease);
}
.menu-fab__btn:active { transform: scale(.94); }
.menu-fab__btn:focus-visible { outline: 2px solid var(--menu-fg) !important; outline-offset: 3px; }
.menu-fab__count {
    position: absolute; top: -2px; right: -2px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-pill);
    background: var(--menu-accent-fg); color: var(--menu-accent); box-shadow: 0 0 0 2px var(--menu-accent); font-size: 12px; font-weight: 600; line-height: 22px;
}
/* Con platos: píldora "Pedido" + cantidad, más visible; salta un poco cada vez que se agrega algo */
.menu-fab__btn.is-full { width: auto; gap: 8px; padding: 0 10px 0 18px; border-radius: var(--radius-pill); animation: fab-in .3s var(--ease); }
.menu-fab__label { font: 600 16px/1 var(--font-system, var(--font)); letter-spacing: -.01em; }
.menu-fab__btn.is-full .menu-fab__count { position: static; min-width: 28px; height: 28px; padding: 0 8px; box-shadow: none; font-size: 14px; line-height: 28px; text-align: center; font-variant-numeric: tabular-nums; }
.menu-fab__btn.is-bump { animation: fab-bump .45s var(--ease); }
@keyframes fab-in { from { transform: scale(.85); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes fab-bump { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 70% { transform: scale(.97); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .menu-fab__btn.is-full, .menu-fab__btn.is-bump { animation: none; } }
[v-cloak] { display: none; }


/* Panel: Diseño tab (logo size) */
.design-logo { display: flex; align-items: center; gap: 16px; max-width: 420px; }
.design-logo input[type="range"] { flex: 1; accent-color: #000; min-height: 44px; }
.design-logo output { min-width: 56px; font-weight: 500; font-variant-numeric: tabular-nums; }


.checkout-body { padding-top: 24px; background: transparent; }
.checkout-body .container { max-width: 1040px; }

/* Category chips centred under the centred header (auto margins keep the start reachable when the row scrolls) */
/* Category bar: app-style tab strip. Left-aligned with the list, fades out at the right edge while it scrolls,
   and draws a hairline once it sticks to the top (.is-stuck, set in show.blade.php) */
#restaurant-content .tabbable.sticky { margin-top: 8px; transition: box-shadow .2s var(--ease); }
#restaurant-content .tabbable.sticky.is-stuck { box-shadow: 0 0 0 100vmax var(--menu-bg), 0 1px 0 100vmax var(--menu-line); clip-path: inset(0 -100vmax -1px); }
#restaurant-content .tabbable .nav-pills {
    margin: 0 calc(-1 * var(--menu-gutter)) !important; padding: 10px var(--menu-gutter); scroll-padding-inline: var(--menu-gutter); scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}
#restaurant-content .tabbable .nav-pills > li { flex: none; padding: 0; scroll-snap-align: start; }
#restaurant-content .tabbable .nav-pills > li:last-child { padding-right: 24px; }
#restaurant-content .tabbable .nav-pills .nav-link { min-height: 40px; display: inline-flex; align-items: center; padding: 0 16px; font-size: 14px; font-weight: 500; }

.qty-stepper { display: inline-flex; flex: none; align-items: center; height: 52px; padding: 4px; border-radius: var(--radius-pill); background: var(--surface-2); }
.qty-stepper__btn {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: #000; cursor: pointer; transition: background-color .15s var(--ease);
}
.qty-stepper__btn:hover { background: rgba(0, 0, 0, .06); }
.qty-stepper__btn:focus-visible { outline: 2px solid #000; outline-offset: 1px; }

.menu-top-btn:hover { background: var(--menu-chip-hover); }
.menu-top-btn:active { transform: scale(.94); }
.menu-top-btn:focus-visible { outline: 2px solid var(--menu-fg) !important; outline-offset: 2px; }
.menu-top-btn:focus:not(:focus-visible) { outline: 0 !important; box-shadow: none; }
.menu-top-btn__sun { display: none; }
html.menu-mode-dark .menu-top-btn__sun { display: block; }
html.menu-mode-dark .menu-top-btn__moon { display: none; }
body:has(.menu-hero) { transition: background-color .25s var(--ease), color .25s var(--ease); }
@media (prefers-reduced-motion: reduce) { body:has(.menu-hero) { transition: none; } }

/* ---------- Panel: Diseño — two theme cards, each with colours, logo and a live preview ---------- */
.design-theme__warning { margin: 8px 0 0; color: #b45309; }
/* Selector de color: muestra redonda + nombre + código, con sugeridos debajo (components/color-field) */
.color-field { display: flex; flex-direction: column; gap: 10px; min-width: 200px; max-width: 320px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: var(--ring); }
.color-field__main { display: flex; align-items: center; gap: 12px; margin: 0; cursor: pointer; }
.color-field input[type="color"] {
    flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
    -webkit-appearance: none; appearance: none; box-shadow: 0 0 0 1px var(--line-strong), 0 2px 6px rgba(0, 0, 0, .08);
}
.color-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.color-field input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.color-field input[type="color"]::-moz-color-swatch { border: 0; border-radius: 50%; }
.color-field input[type="color"]:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.color-field__text { display: flex; flex-direction: column; line-height: 1.2; }
.color-field__label { color: #000; font-size: 14px; font-weight: 500; }
.color-field__hex { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: .02em; }
.color-field__swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.color-field__swatch {
    width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: var(--swatch); cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.color-field__swatch:hover { transform: scale(1.12); }
.color-field__swatch[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), 0 0 0 2px #fff, 0 0 0 4px #000; }
.color-field__swatch:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
@media (hover: none) { .color-field__swatch { width: 32px; height: 32px; } }

/* ---------- Shared header (menu + checkout): icon bar over the logo ----------
   Menu: scrolls away with the page. Checkout (--fixed): stays, and picks up the page colour + the name once the logo is gone. */
.menu-top-btn {
    display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
    background: var(--menu-chip); color: var(--menu-fg) !important; cursor: pointer; transition: background-color .15s var(--ease), transform .15s var(--ease);
}
.menu-topbar {
    position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    height: 68px; padding: 0 max(12px, calc(var(--menu-gutter) - 4px)); pointer-events: none;
}
.menu-topbar > * { pointer-events: auto; }
.menu-topbar__title {
    min-width: 0; overflow: hidden; color: var(--menu-fg); font-family: var(--menu-title-font, var(--font-bebas)); font-size: 24px; line-height: 1; letter-spacing: .01em;
    text-overflow: ellipsis; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity .2s var(--ease), transform .2s var(--ease);
}
/* Volver (pago): mismo alto de 44 px, con la palabra "Atrás" al lado de la flecha */
.menu-top-btn--back { width: auto; gap: 2px; padding: 0 14px 0 8px; border-radius: var(--radius-pill); }
.menu-top-btn__label { font-size: 14px; font-weight: 600; line-height: 1; }
.menu-topbar--fixed { position: fixed; z-index: 1030; transition: background-color .2s var(--ease), box-shadow .2s var(--ease); }
.menu-topbar--fixed.is-scrolled { background: var(--menu-bg); box-shadow: 0 1px 0 var(--menu-line); pointer-events: auto; }
/* Logo de la barra fija centrado en la pantalla (el botón Atrás es más ancho que el de la derecha) */
.menu-topbar--fixed .menu-topbar__title { position: absolute; left: 50%; transform: translate(-50%, 4px); }
.menu-topbar--fixed.is-scrolled .menu-topbar__title { opacity: 1; transform: translate(-50%, 0); }
/* Título de la página de pago ("Revisa y confirma tu pedido"): como los títulos de las tarjetas, letra de títulos y en el color del texto */
.menu-hero__subtitle { margin: 0; color: var(--menu-fg); font-family: var(--menu-title-font, var(--font-bebas)); font-size: max(18px, calc(var(--size-title, 32px) * .6875)); line-height: 1.15; }
.menu-hero .menu-hero__subtitle { color: var(--menu-fg); }
@media (max-width: 575.98px) { .menu-hero__subtitle { font-size: max(16px, calc(var(--size-title, 32px) * .625)); } }
@media (prefers-reduced-motion: reduce) { .menu-topbar--fixed, .menu-topbar__title { transition: none; } }

/* ---------- Search: full-screen sheet on phones, centred palette on desktop ---------- */
.msearch { position: fixed; inset: 0; z-index: 1050; visibility: hidden; transition: visibility 0s linear .25s; }
.msearch.is-open { visibility: visible; transition: none; }
.msearch__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .2s var(--ease); }
.msearch.is-open .msearch__backdrop { opacity: 1; }
.msearch__panel {
    position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; color: #000;
    opacity: 0; transform: translateY(12px); transition: opacity .2s var(--ease), transform .25s cubic-bezier(.32, .72, 0, 1);
}
.msearch.is-open .msearch__panel { opacity: 1; transform: none; }
body.msearch-open { overflow: hidden; }
.msearch__bar { display: flex; flex: none; align-items: center; gap: 8px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--line); }
.msearch__field {
    position: relative; display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; height: 48px; margin: 0; padding: 0 8px 0 14px;
    border-radius: var(--radius-pill); background: var(--surface-2); color: var(--muted); cursor: text; transition: box-shadow .15s var(--ease);
}
.msearch__field:focus-within { box-shadow: 0 0 0 2px #000; color: #000; }
.msearch__field input {
    flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: #000; font-size: 16px; /* 16px: iOS no hace zoom */
}
.msearch__field input::placeholder { color: rgba(0, 0, 0, .5); }
.msearch__field input:focus-visible { outline: 0 !important; } /* the pill ring (:focus-within) is the focus indicator */
.msearch__field input::-webkit-search-cancel-button { display: none; }
.msearch__clear { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .08); color: #000; cursor: pointer; }
.msearch__clear[hidden] { display: none; }
.msearch__cancel { flex: none; min-height: 44px; padding: 0 8px; border: 0; background: none; color: #000; font-size: 15px; font-weight: 500; cursor: pointer; }
.msearch__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px calc(24px + env(safe-area-inset-bottom)); }
.msearch__label { margin: 12px 0 10px; color: var(--muted); font-size: 13px; font-weight: 500; }
.msearch__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.msearch__chip { min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--radius-pill); background: var(--primary-soft); color: #000; font-size: 14px; font-weight: 500; cursor: pointer; }
.msearch__chip:hover { background: var(--primary-soft-hover); }
.msearch__cats[hidden] { display: none; }
.msearch__results { margin: 0; padding: 0; list-style: none; }
.msearch__results li + li .msearch__item { border-top: 1px solid var(--line); }
.msearch__item {
    display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 12px 0; border: 0;
    background: none; color: #000; text-align: left; cursor: pointer;
}
.msearch__item:hover .msearch__name, .msearch__item:focus-visible .msearch__name { text-decoration: underline; text-underline-offset: 3px; }
.msearch__item:focus-visible { outline: 2px solid #000; outline-offset: 2px; border-radius: 8px; }
.msearch__item[disabled] { cursor: default; opacity: .5; }
.msearch__item img, .msearch__noimg { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: #f2f2f2; }
.msearch__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.msearch__name { font-size: 15px; font-weight: 600; line-height: 1.3; }
.msearch__desc { overflow: hidden; color: var(--muted); font-size: 13px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.msearch__meta { color: var(--muted); font-size: 12px; }
.msearch__price { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.msearch mark { padding: 0; border-radius: 3px; background: rgba(0, 0, 0, .1); color: inherit; font-weight: inherit; }
.msearch__empty { padding: 48px 16px; text-align: center; color: var(--muted); font-size: 14px; }
.msearch__empty-title { margin-bottom: 4px; color: #000; font-size: 16px; font-weight: 600; }
@media (min-width: 768px) {
    .msearch__panel { inset: 10vh auto auto 50%; width: min(640px, calc(100vw - 48px)); max-height: 76vh; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); transform: translate(-50%, 12px); }
    .msearch.is-open .msearch__panel { transform: translate(-50%, 0); }
    .msearch__cancel { display: none; }
}
@media (prefers-reduced-motion: reduce) { .msearch, .msearch__backdrop, .msearch__panel { transition: none; } }
/* Name hidden: the logo carries it, so give the status line a little air */
.menu-hero .title > h1.sr-only + .menu-status, .menu-hero .title > h1.sr-only + .menu-hero__description, .menu-hero .title > h1.sr-only + .menu-hero__subtitle { margin-top: 4px; }

/* ---------- Dish detail, step by step (public/brand/dish.js) ----------
   Fixed top (back · dish · progress · close), scrolling middle, fixed footer with the next action and the running total. */
.qty-stepper__value { min-width: 36px; font-size: 17px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.qty-stepper[hidden] { display: none; }
.dish-modal .modal-dialog { max-width: 560px; }
.dish-modal .modal-content { display: flex; flex-direction: column; max-height: min(92vh, 860px); overflow: hidden; border: 0; border-radius: var(--radius-xl); }
.dish__top { position: relative; display: flex; flex: none; align-items: center; gap: 8px; min-height: 64px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: #fff; }
.dish-modal.is-first .dish__top { border-bottom-color: transparent; }
.dish__iconbtn {
    display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
    background: var(--primary-soft); color: #000; cursor: pointer; transition: background-color .15s var(--ease);
}
.dish__iconbtn:hover { background: var(--primary-soft-hover); }
.dish__iconbtn[hidden] { display: none; }
.dish__close { margin-left: auto; }
/* Compact dish row in the top bar once you are past step 1 */
.dish__thumb { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; }
.dish-modal.is-first .dish__thumb { visibility: hidden; }
.dish__thumb-img { flex: none; width: 36px; height: 36px; border-radius: 8px; background: #f2f2f2 center / cover no-repeat; }
.dish__thumb-img:not([style*="url"]) { display: none; }
.dish__thumb-name { overflow: hidden; color: #000; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.dish__thumb-price { margin-left: auto; color: var(--muted); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dish__progress { position: absolute; left: 12px; right: 12px; bottom: -1px; display: flex; gap: 4px; height: 3px; }
.dish__progress span { flex: 1; border-radius: 2px; background: var(--line); transition: background-color .2s var(--ease); }
.dish__progress span.is-done, .dish__progress span.is-current { background: #000; }
.dish__scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 24px; }
/* Intro (photo, name, description) only on step 1 */
.dish__intro { padding-top: 4px; }
.dish-modal:not(.is-first) .dish__intro { display: none; }
.dish__img { display: block; width: min(100%, 300px); aspect-ratio: 1; margin: 0 auto 16px; border-radius: 16px; object-fit: cover; background: #f2f2f2; }
.dish__img[hidden] { display: none; }
.dish__name { margin: 0 0 6px; color: #000; font-family: var(--font-subtitle, var(--font)); font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.dish__desc { color: var(--muted); font-size: 15px; line-height: 1.5; }
.dish__desc p:last-child { margin-bottom: 0; }
.dish__step { padding-top: 20px; }
/* Cambio de paso: sale con fade corto y el nuevo entra subiendo 6 px */
.dish__step { transition: opacity .14s ease, transform .14s ease; }
.dish__step.is-leaving { opacity: 0; transform: translateY(-4px); }
.dish__step.is-entering { animation: dish-step-in .28s cubic-bezier(.2, .7, .2, 1); }
@keyframes dish-step-in { from { opacity: 0; transform: translateY(6px); } }
.dish__count { margin: 0 0 4px; color: var(--muted); font-size: 13px; font-weight: 500; }
.dish__title { margin: 0; color: #000; font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; outline: 0; }
.dish__hint { margin: 2px 0 16px; color: var(--muted); font-size: 14px; }
.dish__loading { color: var(--muted); font-size: 14px; }
/* Choices (one per option value) and extras: selectable cards */
.dish__choices, .dish__extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dish__choice, .dish__extra {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 76px; padding: 14px 40px 14px 14px;
    border: 0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); color: #000; text-align: left; cursor: pointer;
    transition: box-shadow .15s var(--ease), background-color .15s var(--ease), transform .1s var(--ease);
}
.dish__choice:hover:not([disabled]), .dish__extra:hover { background: var(--surface-2); }
.dish__choice:active:not([disabled]), .dish__extra:active { transform: scale(.98); }
.dish__choice[aria-checked="true"], .dish__extra[aria-checked="true"] { box-shadow: inset 0 0 0 2px #000; background: var(--primary-soft); }
.dish__choice[disabled] { cursor: not-allowed; opacity: .45; }
.dish__choice:focus-visible, .dish__extra:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.dish__choice-name, .dish__extra-name { font-size: 15px; font-weight: 600; line-height: 1.3; }
.dish__choice-price, .dish__extra-price { color: var(--muted); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.dish__check {
    position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong);
    transition: background-color .15s var(--ease), box-shadow .15s var(--ease);
}
.dish__extra .dish__check { border-radius: 6px; }
[aria-checked="true"] > .dish__check {
    background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
    box-shadow: none;
}
/* Summary */
.dish__summary { margin: 16px 0 0; padding: 0; list-style: none; }
.dish__summary li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.dish__summary-label { grid-column: 1; color: var(--muted); font-size: 13px; font-weight: 500; }
.dish__summary-value { grid-column: 1; color: #000; font-size: 15px; font-weight: 500; line-height: 1.35; }
.dish__change { grid-column: 2; grid-row: 1 / span 2; min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--radius-pill); background: var(--primary-soft); color: #000; font-size: 14px; font-weight: 500; cursor: pointer; }
.dish__change:hover { background: var(--primary-soft-hover); }
.dish__note { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: #fff7ed; color: #9a3412; font-size: 14px; line-height: 1.4; }
/* Footer */
.dish__footer { display: flex; flex: none; align-items: center; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; }
.dish__cta {
    display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; height: 52px; padding: 0 20px; border: 0; border-radius: var(--radius-pill);
    background: #000; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; transition: opacity .15s var(--ease), transform .1s var(--ease); white-space: nowrap;
}
.dish__cta:only-child, .dish__cta:not(:has(.dish__cta-price)) { justify-content: center; }
.dish__cta[hidden] { display: none; }
.dish__cta:disabled { opacity: .6; cursor: progress; }
.dish__cta:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.dish__cta-price { font-variant-numeric: tabular-nums; opacity: .85; }
@media (max-width: 575.98px) {
    body:has(.menu-hero) .dish-modal .modal-content { max-height: 94vh; overflow: hidden; border-radius: 24px 24px 0 0; }
    .dish__scroll { padding-inline: var(--menu-gutter); }
    .dish__choices, .dish__extras { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .dish__choice, .dish__extra, .dish__cta, .dish__progress span { transition: none; } }

/* ---------- Header meta: status + contact icons on one quiet line (visible, not the star) ---------- */
.menu-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 12px; margin: 4px 0 4px; }

/* ---------- Cart drawer: app-style panel (head · rows · fixed foot) ---------- */
.cart-drawer.sidenav-cart { display: flex; flex-direction: column; width: min(420px, 100vw); max-width: none; padding: 0; background: #fff !important; box-shadow: -16px 0 48px rgba(0, 0, 0, .18); }
.cart-drawer.sidenav-cart-close { display: none; }
.cart-drawer__backdrop { position: fixed; inset: 0; z-index: 9998; display: none; background: rgba(0, 0, 0, .4); }
body:has(#cartSideNav.sidenav-cart-open) .cart-drawer__backdrop { display: block; }
body:has(#cartSideNav.sidenav-cart-open) { overflow: hidden; }
.cart-drawer__head { display: flex; flex: none; align-items: center; justify-content: space-between; padding: 16px 16px 12px 20px; border-bottom: 1px solid var(--line); }
.sidenav-cart .cart-drawer__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--primary-soft); color: #000; cursor: pointer; }
.cart-drawer__close:hover { background: var(--primary-soft-hover); }
.cart-drawer__list { flex: 1; max-height: none !important; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px; }
.cart-drawer__foot { flex: none; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; }
.cart-drawer__total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; color: var(--muted); font-size: 15px; }
.cart-drawer__total strong { color: #000; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sidenav-cart a.cart-drawer__pay {
    display: flex; align-items: center; justify-content: center; height: 52px; padding: 0 20px; border-radius: var(--radius-pill);
    background: #000; color: #fff !important; font-size: 16px; font-weight: 600; text-decoration: none;
}
.cart-drawer__secondary { min-height: 44px; margin-top: 8px; padding: 0 20px; border: 0; border-radius: var(--radius-pill); background: var(--primary-soft); color: #000; font-size: 15px; font-weight: 500; cursor: pointer; }
.cart-empty { display: flex; flex-direction: column; align-items: center; padding: 24px 0 8px; color: var(--muted); text-align: center; }
.cart-empty__title { margin: 12px 0 2px; color: #000; font-size: 16px; font-weight: 600; }
.cart-empty__text { margin: 0; font-size: 14px; }
.cart-drawer:has(.cart-empty) .cart-drawer__list:empty { display: none; }

/* Cart row (drawer + checkout) */
/* Fila del pedido: foto | nombre, extras, cantidad y Editar/Quitar | precio arriba a la derecha (con Bs debajo) */
.cart-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; column-gap: 14px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cart-row:last-child { border-bottom: 0; }
.cart-row__img { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; background: #f2f2f2; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04); }
.cart-row__body { min-width: 0; }
.cart-row__name { margin: 2px 0 0; color: #000; font-size: 15px; font-weight: 600; line-height: 1.3; }
.cart-row__extras { margin: 3px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.cart-row__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; }
.cart-row__price { margin-top: 2px; color: #000; font-size: 15px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart-row__price .price-bs { margin-top: 2px; }
.cart-qty { display: inline-flex; align-items: center; height: 36px; padding: 2px; border-radius: var(--radius-pill); background: var(--surface-2); }
.cart-qty__btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #000; cursor: pointer; }
.cart-qty__btn:hover { background: rgba(0, 0, 0, .07); }
.cart-qty__btn:focus-visible, .cart-row__links button:focus-visible { outline: 2px solid #000; outline-offset: 1px; }
.cart-qty__value { min-width: 24px; color: #000; font-size: 14px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.cart-row__links { display: flex; gap: 14px; }
.cart-row__links button { min-height: 32px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cart-row__links button:hover { color: #000; }
@media (max-width: 575.98px) { .cart-row { grid-template-columns: 60px minmax(0, 1fr) auto; column-gap: 12px; } .cart-row__img { width: 60px; height: 60px; border-radius: 12px; } }
/* Checkout "Productos": same rows, no inner scroll box */
.cart-page-list { max-height: none !important; padding-top: 0; border-top: 0 !important; }
@media (max-width: 575.98px) { .cart-drawer__list { padding-inline: var(--menu-gutter); } .cart-drawer__foot { padding-inline: var(--menu-gutter); } }

/* ---------- Section titles: the menu's category voice (Bebas, like "SUSHI ROLLS") for cart, checkout and thanks ---------- */
.checkout-title, .cart-drawer__title, .thanks__title {
    margin: 0; color: var(--menu-fg, #000); font-family: var(--menu-title-font, var(--font-bebas)); font-size: 32px; font-weight: 400; line-height: 1; letter-spacing: .01em;
}
.cart-drawer__title { color: #000; }

/* ---------- Checkout (WhatsApp mode): order · delivery · your details | summary + pay ---------- */
.checkout-app { padding-top: 16px; padding-bottom: 64px; }
.checkout-app .container { max-width: 1040px; }
.checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.checkout-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.checkout-side { position: sticky; top: 80px; }
.checkout-card { padding: 20px; border-radius: var(--radius-xl); background: #fff; box-shadow: var(--ring), 0 2px 12px rgba(0, 0, 0, .04); color: #000; }
.checkout-card .checkout-title { color: #000; margin-bottom: 12px; }
.checkout-more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; color: #000 !important; font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.checkout-errors { margin-bottom: 16px; padding: 14px 16px; border-radius: 12px; background: var(--danger-soft); color: var(--danger); font-size: 14px; }
.checkout-errors ul { margin: 4px 0 0; padding-left: 18px; }
/* Delivery / pickup as two big options */
.checkout-segment { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.checkout-option {
    position: relative; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 14px 16px 14px 44px; border-radius: 14px;
    box-shadow: inset 0 0 0 1px var(--line-strong); cursor: pointer; transition: box-shadow .15s var(--ease), background-color .15s var(--ease);
}
.checkout-option input { position: absolute; top: 17px; left: 16px; width: 18px; height: 18px; margin: 0; accent-color: #000; }
.checkout-option:has(input:checked) { box-shadow: inset 0 0 0 2px #000; background: var(--primary-soft); }
.checkout-option:has(input:focus-visible) { outline: 2px solid #000; outline-offset: 2px; }
.checkout-option__title { font-size: 15px; font-weight: 600; }
.checkout-option__hint { color: var(--muted); font-size: 13px; }
/* Fields */
.checkout-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.checkout-field--full { grid-column: 1 / -1; }
.checkout-field label { display: block; margin: 0 0 6px; color: #000; font-size: 14px; font-weight: 500; }
.checkout-optional { color: var(--muted); font-weight: 400; }
.checkout-field .form-control { height: 48px; border-radius: 12px; font-size: 16px; }
.checkout-field textarea.form-control { height: auto; min-height: 72px; padding-top: 12px; }
body:has(#deliveryTypePickup:checked) #addressBox { display: none !important; }
/* Summary */
.checkout-breakdown { margin: 0; }
.checkout-breakdown > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; color: var(--muted); font-size: 15px; }
.checkout-breakdown dt { font-weight: 400; }
.checkout-breakdown dd { margin: 0; color: #000; font-variant-numeric: tabular-nums; }
.checkout-breakdown__total { margin-top: 6px; padding-top: 12px !important; border-top: 1px solid var(--line); }
.checkout-breakdown__total dt, .checkout-breakdown__total dd { color: #000; font-size: 18px; font-weight: 600; }
.checkout-summary:has(#deliveryTypePickup:checked) .checkout-breakdown__delivery,
body:has(#deliveryTypePickup:checked) .checkout-breakdown__delivery,
body:not(:has(#deliveryTypePickup:checked)) .checkout-breakdown__pickup { display: none !important; }
.checkout-rate { display: none; margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); color: #000; font-size: 14px; line-height: 1.45; }
.checkout-rate__amount { display: block; margin-top: 2px; font-size: 18px; font-variant-numeric: tabular-nums; }
.checkout-summary:has(input[name="paymentType"][data-bs="1"]:checked) .checkout-rate { display: block; }
.checkout-pay { margin: 20px 0 0; }
.checkout-pay legend { margin-bottom: 8px; color: #000; font-size: 15px; font-weight: 600; }
.checkout-paymethod {
    display: flex; align-items: center; gap: 12px; min-height: 52px; margin: 0 0 8px; padding: 0 16px; border-radius: 14px;
    box-shadow: inset 0 0 0 1px var(--line-strong); color: #000; font-size: 15px; font-weight: 500; cursor: pointer;
}
.checkout-paymethod input { width: 18px; height: 18px; margin: 0; accent-color: #000; }
.checkout-paymethod:has(input:checked) { box-shadow: inset 0 0 0 2px #000; background: var(--primary-soft); }
.checkout-paymethod:has(input:focus-visible) { outline: 2px solid #000; outline-offset: 2px; }
.checkout-paymethod__hint { margin-left: auto; color: var(--muted); font-size: 13px; font-weight: 400; }
.checkout-terms { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 12px; color: var(--muted); font-size: 13px; line-height: 1.45; cursor: pointer; }
.checkout-terms input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: #000; }
.checkout-terms a { color: #000; text-decoration: underline; text-underline-offset: 2px; }
/* Términos: línea discreta (texto normal, pequeño y gris, casilla chica) */
html body .checkout-terms { align-items: center; gap: 8px; font-weight: 400; font-size: 12px; color: var(--muted); }
html body .checkout-terms input { width: 16px; height: 16px; margin: 0; }
html body .checkout-terms a { color: var(--muted); font-weight: 400; text-decoration-color: currentColor; text-decoration-thickness: 1px; }
html body .checkout-terms a:hover { color: #000; }
.checkout-submit { width: 100%; height: 52px; border: 0; border-radius: var(--radius-pill); background: #000; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; transition: opacity .15s var(--ease); }
.checkout-submit:disabled { opacity: .35; cursor: not-allowed; }
.checkout-submit:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.checkout-after { margin: 8px 0 0; color: var(--muted); font-size: 13px; text-align: center; }
.checkout-error { margin: 8px 0 0; color: var(--danger); font-size: 14px; }
.checkout-empty { color: var(--muted); }
@media (max-width: 991.98px) {
    .checkout-grid { grid-template-columns: minmax(0, 1fr); }
    .checkout-side { position: static; }
}
@media (max-width: 575.98px) {
    .checkout-app .container { padding-inline: var(--menu-gutter); }
    .checkout-card { padding: 16px; border-radius: 20px; }
    .checkout-fields { grid-template-columns: minmax(0, 1fr); }
}
/* Resumen como ticket: bordes dentados arriba y abajo, líneas punteadas entre bloques.
   La máscara recorta la sombra propia, así que el borde y la sombra salen de un drop-shadow en el aside */
.checkout-side { filter: drop-shadow(0 0 .5px rgba(0, 0, 0, .4)) drop-shadow(0 6px 12px rgba(0, 0, 0, .05)); }
.checkout-side .checkout-summary {
    --tooth: 14px; --rule: linear-gradient(90deg, var(--line-strong) 50%, transparent 0) 0 0 / 8px 1px repeat-x;
    padding-block: 28px; border-radius: 0; box-shadow: none;
    -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--tooth) 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--tooth) 51% repeat-x;
            mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--tooth) 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--tooth) 51% repeat-x;
}
.checkout-summary .checkout-title { margin-bottom: 14px; padding-bottom: 14px; text-align: center; background: var(--rule); background-position: bottom; }
.checkout-summary .checkout-breakdown__total { margin-top: 8px; padding-top: 14px !important; border-top: 0; background: var(--rule); }
.checkout-summary #totalPrices:has(dl) { padding-bottom: 18px; background: var(--rule); background-position: bottom; }
.checkout-summary .checkout-pay { margin-top: 18px; }

/* Category bar: quieter, more useful pills (name + dish count); tapping scrolls to the section */
#restaurant-content .tabbable .nav-pills .nav-link { gap: 8px; min-height: 40px; padding: 0 14px 0 16px; background: transparent; box-shadow: inset 0 0 0 1px var(--menu-line); }
#restaurant-content .tabbable .nav-pills .nav-link:hover { background: var(--menu-chip); }
#restaurant-content .tabbable .nav-pills .nav-link:focus-visible { outline: 2px solid var(--menu-fg); outline-offset: 2px; }
#restaurant-content .tabbable .nav-pills .nav-link.active { box-shadow: none; }
.nav-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill);
    background: var(--menu-chip); color: var(--menu-muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.nav-link.active .nav-count { background: transparent; box-shadow: inset 0 0 0 1px currentColor; color: inherit; } /* works on light and dark accents */
/* Sections land just below the sticky bar */
#restaurant-content .container-restorant > div[id] { scroll-margin-top: 72px; }

/* ---------- Thanks (WhatsApp mode) ---------- */
.thanks { min-height: calc(100vh - 120px); padding: 32px 0 64px; }
.thanks__card { max-width: 440px; margin: 8px auto 0; padding: 28px 24px; border-radius: var(--radius-xl); background: #fff; box-shadow: var(--ring), 0 8px 32px rgba(0, 0, 0, .06); color: #000; }
.thanks__check { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 12px; border-radius: 50%; background: #16a34a; color: #fff; }
.thanks .thanks__title { color: #000; font-size: 40px; }
.thanks__order { margin: 6px 0 0; color: #000; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.thanks__text { margin: 8px 0 20px; color: var(--muted); font-size: 15px; line-height: 1.5; }
a.thanks__wa, a.thanks__wa:hover { display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; border-radius: var(--radius-pill); background: #25d366; color: #fff !important; font-size: 16px; font-weight: 600; text-decoration: none !important; }
.thanks__wa .fa { font-size: 22px; }
.thanks__back { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; color: #000 !important; font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Status: "Abierto" on a warm yellow pill, the rest smaller ---------- */
.menu-hero .menu-status { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; margin: 0; }
.menu-status__pill {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 10px; border-radius: var(--radius-pill);
    background: #ffe45c; color: #1a1400; font-size: 14px; font-weight: 600; line-height: 1;
}
.menu-status--closed .menu-status__pill { background: #eceae6; color: #3b3b3b; }
.menu-status__pill .menu-status__dot { margin: 0; box-shadow: 0 0 0 3px rgba(22, 163, 74, .2); }
.menu-status__more { color: var(--menu-muted); font-size: 13px; font-weight: 500; }
/* Estado sin fondo: punto de color + "Abierto" + horario, con aire respecto al logo.
   Punto "encendido" que late: verde si está abierto, rojo si está cerrado */
.menu-hero .menu-status { gap: 0 10px; }
.menu-status__pill, .menu-status--closed .menu-status__pill { height: auto; padding: 0; gap: 8px; background: none; color: var(--menu-fg); font-size: 14px; font-weight: 600; }
.menu-status__more { font-size: 14px; }
.menu-status__pill .menu-status__dot { position: relative; width: 8px; height: 8px; background: #22c55e; box-shadow: 0 0 6px 1px rgba(34, 197, 94, .7); }
.menu-status__pill .menu-status__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: status-on 2s var(--ease) infinite; }
.menu-status--closed .menu-status__pill .menu-status__dot { background: #ef4444; box-shadow: 0 0 6px 1px rgba(239, 68, 68, .7); }
@keyframes status-on { 0% { transform: scale(1); opacity: .6; } 80%, 100% { transform: scale(2.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .menu-status__pill .menu-status__dot::after { animation: none; opacity: 0; } }
.menu-hero .menu-meta { margin: 16px 0 0; }


/* ---------- Panel: font picker ---------- */
/* Diseño: vista y Bs en la vista previa */
/* Diseño: controles a la izquierda, vista previa fija a la derecha (arriba en el celular) */
.design-block { margin-bottom: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 0 16px; }
.design-block > summary { padding: 14px 0; color: #000; font-weight: 600; cursor: pointer; }
.design-block[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.design-block[open] { padding-bottom: 16px; }
.design-type { margin-bottom: 16px; }
.design-type__row { display: grid; grid-template-columns: minmax(0, 1fr) 140px 56px auto; gap: 8px; align-items: center; }
.design-type__row input[type="range"], .design-logo input[type="range"] { accent-color: #000; }
.design-type__row output { font-variant-numeric: tabular-nums; }
.design-btnstyle { position: relative; display: inline-flex; margin: 0 8px 8px 0; cursor: pointer; }
.design-btnstyle input { position: absolute; opacity: 0; }
.design-btnstyle__sample { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 9999px; border: 2px solid #000; color: #000; font-weight: 600; }
.design-btnstyle__sample--solid { background: #000; color: #fff; }
.design-btnstyle__sample--soft { background: #eee; border-color: transparent; }
.design-btnstyle input:checked + .design-btnstyle__sample { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #000; }
.design-btnstyle input:focus-visible + .design-btnstyle__sample { outline: 2px solid #000; outline-offset: 6px; }
@media (max-width: 575px) { .design-type__row { grid-template-columns: minmax(0, 1fr) 56px auto; } .design-type__row select { grid-column: 1 / -1; } }
.design-fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.design-font { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-strong); cursor: pointer; }
.design-font input { position: absolute; opacity: 0; }
.design-font:has(input:checked) { box-shadow: inset 0 0 0 2px #000; background: var(--primary-soft); }
.design-font:has(input:focus-visible) { outline: 2px solid #000; outline-offset: 2px; }
.design-font__sample { color: #000; font-size: 26px; line-height: 1.1; }
.design-font__sample--body { font-size: 15px; line-height: 1.4; }
.design-font__name { color: var(--muted); font-size: 12px; }

/* ---------- Footer: minimal — no card, just socials, pages and one quiet line ---------- */
body:has(.menu-hero) .footer.footer-front { max-width: 704px; margin: 24px auto 0; padding: 20px 16px 28px; border: 0; background: transparent !important; color: var(--menu-muted); text-align: center; }
body:has(.menu-fab) .footer.footer-front { padding-bottom: 104px; }
body:has(.menu-hero) .footer-front .container { gap: 8px; padding: 0; }
body:has(.menu-hero) .footer-front .social-links { gap: 4px; margin: 0; }
body:has(.menu-hero) .footer-front .social-links a { width: 36px; height: 36px; background: transparent; color: var(--menu-muted) !important; box-shadow: none; }
body:has(.menu-hero) .footer-front .social-links a i { font-size: 16px; }
body:has(.menu-hero) .footer-front .social-links a:hover { background: var(--menu-chip); color: var(--menu-fg) !important; }
body:has(.menu-hero) .footer-front .footer-front__links { gap: 0 16px; }
body:has(.menu-hero) .footer-front .footer-front__links .nav-item .nav-link { font-size: 12px; }
body:has(.menu-hero) .footer-front .copyright { color: var(--menu-muted); font-size: 12px; }
.menu-topbar__title { display: flex; align-items: center; justify-content: center; height: 44px; }
.menu-topbar__logo { display: block; max-width: min(180px, 100vw - 240px); max-height: 36px; width: auto; height: auto; object-fit: contain; }

/* Dish photos: square, swipeable when there are several (scroll-snap + dots) */
/* Fotos del plato completas (sin recortar), más bajas, una tras otra: se desliza si no caben y se ve el contenido debajo */
.dish__gallery { position: relative; margin: 0 calc(-1 * var(--menu-gutter)) 16px; }
.dish__gallery[hidden] { display: none; }
.dish__slides { display: flex; gap: 8px; padding: 0 var(--menu-gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--menu-gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.dish__slides::-webkit-scrollbar { display: none; }
.dish__slides .dish__img { flex: none; width: auto; max-width: 80%; height: 180px; aspect-ratio: auto; margin: 0; border-radius: 12px; object-fit: contain; background: transparent; scroll-snap-align: start; }
.dish__slides > :first-child { margin-left: auto; }   /* si todas caben, centradas */
.dish__slides > :last-child { margin-right: auto; }
/* Una sola foto: sin galería, centrada, completa y algo más grande */
.dish__gallery.is-single .dish__slides { overflow: visible; }
.dish__gallery.is-single .dish__img { height: 240px; max-width: 100%; }

/* ---------- /pago: amount, merchant data (copy), confirm ---------- */
.pay-page .container { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.pay-amount { text-align: center; }
.pay-amount .checkout-title { margin-bottom: 8px; }
.pay-amount__value { margin: 0; color: #000; font-size: 36px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pay-amount__rate { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.pay-amount__rate strong { color: #000; font-weight: 600; }
/* Celular: títulos y monto del pago más contenidos (las fuentes de título anchas, como Fredoka, ocupaban dos líneas) */
@media (max-width: 575.98px) {
    .pay-amount__value { font-size: 28px; }
}
.pay-data { margin: 0; padding: 0; list-style: none; }
.pay-data li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pay-data li:last-child { border-bottom: 0; }
.pay-data__text { display: flex; flex-direction: column; min-width: 0; }
.pay-data__text small { color: var(--muted); font-size: 13px; }
.pay-data__text strong { overflow-wrap: anywhere; color: #000; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pay-data__copy { flex: none; min-width: 84px; min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--radius-pill); background: var(--primary-soft); color: #000; font-size: 14px; font-weight: 500; cursor: pointer; }
.pay-data__copy:hover { background: var(--primary-soft-hover); }
.pay-data__copy:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.pay-qr { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 12px; color: var(--muted) !important; text-decoration: none !important; }
.pay-qr img { width: min(220px, 100%); border-radius: 16px; box-shadow: var(--ring); }
.pay-reference { letter-spacing: .3em; font-size: 22px !important; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.pay-help { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }
.pay-proof { display: flex !important; align-items: center; justify-content: center; gap: 10px; min-height: 56px; margin: 0 !important; border: 1.5px dashed var(--line-strong); border-radius: 14px; color: #000 !important; font-size: 15px !important; font-weight: 500; cursor: pointer; }
.pay-proof:hover { background: var(--surface-2); }
.pay-proof em { color: var(--muted); font-style: normal; font-weight: 400; }
#proof:focus-visible + .pay-help, .pay-proof:focus-within { outline: 2px solid #000; }
.pay-proof__preview { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; }
.pay-proof__preview[hidden] { display: none; }
.pay-proof__preview img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; }
.pay-proof__remove { margin-left: auto; min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: var(--primary-soft); font-size: 13px; cursor: pointer; }
.pay-toast { position: fixed; bottom: 24px; left: 50%; z-index: 1100; transform: translateX(-50%); padding: 10px 18px; border-radius: var(--radius-pill); background: #000; color: #fff; font-size: 14px; font-weight: 500; box-shadow: var(--shadow-lg); }
.pay-toast[hidden] { display: none; }
.thanks__count { margin: -8px 0 16px; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.thanks .thanks__title { font-size: 34px; }

/* ---------- Panel: validate an order from the WhatsApp link ---------- */
.validate { max-width: 520px; margin: 0 auto; }
.validate__card .card-body { padding: 28px; }
.validate__eyebrow { margin: 0 0 4px; color: var(--muted); font-size: 14px; }
.validate__total { margin: 0; color: #000; font-size: 40px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.validate__bs { margin: 2px 0 0; color: var(--muted); font-size: 15px; }
.validate__state { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.45; }
.validate__state--ok { background: #ecfdf3; color: #065f46; }
.validate__state--closed { background: var(--surface-2); color: #374151; }
.validate__data { margin: 20px 0 0; }
.validate__data > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.validate__data dt { color: var(--muted); font-weight: 400; }
.validate__data dd { margin: 0; color: #000; font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.validate__ref { font-size: 18px; font-weight: 600 !important; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.validate__proof { display: flex; align-items: center; gap: 12px; margin-top: 16px; color: #000 !important; font-weight: 500; }
.validate__proof img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; box-shadow: var(--ring); }
.validate__btn { height: 52px; margin-top: 20px; font-size: 16px; }
.validate__hint { margin: 8px 0 0; color: var(--muted); font-size: 13px; text-align: center; }
.validate__link { display: block; margin-top: 16px; color: #000 !important; font-size: 14px; text-align: center; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Panel: list toolbar (title left; search + actions right) ---------- */
.panel-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
/* Buscador y botones en una sola línea a la derecha: el buscador se encoge antes de que los botones bajen */
.panel-toolbar__actions { display: flex; flex: 1 1 auto; justify-content: flex-end; align-items: center; gap: 8px; min-width: 0; }
.panel-toolbar__actions .btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; margin: 0; padding: 0 16px; font-size: 14px; white-space: nowrap; }
.panel-toolbar__actions .btn .mr-1 { margin: 0 !important; }
.panel-toolbar__actions select.form-control { width: auto; max-width: 200px; height: 40px; border-radius: var(--radius-pill); }
.panel-search { flex: 0 1 320px; min-width: 160px; height: 40px; border-radius: var(--radius-pill); padding-inline: 16px; }
@media (max-width: 575.98px) { .panel-toolbar__actions { flex-wrap: wrap; justify-content: flex-start; } .panel-search { flex-basis: 100%; } }

/* ---------- Panel forms: grouped sections with a clear title and one primary action ---------- */
.panel-form .panel-section { margin-bottom: 20px; padding: 20px; border-radius: 16px; background: #fff; box-shadow: var(--ring); }
.panel-section__title { margin: 0 0 16px; color: #000; font-size: 16px; font-weight: 600; }
.panel-section__hint { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.panel-form__actions { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; padding: 12px 0; background: linear-gradient(to top, #fff 70%, rgba(255, 255, 255, 0)); }
.panel-form__actions .btn { min-width: 160px; height: 48px; }
.panel-section .heading-small { margin: 0 0 16px !important; color: #000 !important; font-size: 16px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.panel-section > br:first-child { display: none; }

/* Venezuelan mobile: operator prefix + 7 digits */
.ve-phone { display: flex; gap: 8px; }
.ve-phone__prefix { flex: 0 0 104px; }
.ve-phone__number { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.checkout-field .ve-phone .form-control { height: 48px; border-radius: 12px; font-size: 16px; }
.ve-phone.is-invalid .form-control { border-color: var(--danger); }

/* ---------- Panel: cabecera de página (título + ayuda + acciones) y pestañas ---------- */
.panel-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.panel-page-head__title { margin: 0; color: #000; font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
.panel-page-head__hint { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.panel-page-head__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.panel-page-head__actions .btn { margin: 0; }
.panel-tabs { gap: 8px; flex-wrap: nowrap; margin-bottom: 8px; overflow-x: auto; scrollbar-width: none; }
.panel-tabs::-webkit-scrollbar { display: none; }
.panel-tabs .nav-item { flex: none; }
.panel-tabs .nav-link { padding: 8px 18px; font-weight: 500; }

/* ---------- Menú lateral: grupos ---------- */
.navbar-vertical .navbar-heading { margin: 1.25rem 0 .35rem; font-size: 11px; text-transform: uppercase; }
.navbar-vertical .navbar-heading:first-of-type { margin-top: .5rem; }
.navbar-vertical .nav-link .blob { display: inline-block; margin-left: auto; }

/* ---------- Inicio del dueño ---------- */
.dash-period { display: inline-flex; padding: 4px; border-radius: var(--radius-pill); background: #fff; box-shadow: var(--ring); }
.dash-period a { padding: 6px 14px; border-radius: var(--radius-pill); color: var(--muted); font-size: 14px; font-weight: 500; }
.dash-period a:hover { color: #000; }
.dash-period a[aria-current] { background: #000; color: #fff; }
.dash-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 16px; }
@media (min-width: 1100px) { .dash-kpis { grid-template-columns: repeat(4, 1fr); } }
.dash-kpi { display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.dash-kpi__label { color: var(--muted); font-size: 13px; font-weight: 500; }
.dash-kpi__value { color: #000; font-size: 30px; font-weight: 600; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dash-kpi__note { color: var(--muted); font-size: 13px; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.dash-card { margin-bottom: 16px; padding: 20px; border-radius: 16px; background: #fff; box-shadow: var(--ring); }
.dash-card__title { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 16px; color: #000; font-size: 16px; font-weight: 600; }
.dash-card__link { color: var(--muted); font-size: 13px; font-weight: 500; }
.dash-card__link:hover { color: #000; }
.dash-bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; }
.dash-bars__bar { flex: 1; min-height: 3px; height: var(--h); border-radius: 4px 4px 0 0; background: #000; opacity: .85; transition: opacity .15s var(--ease); }
.dash-bars__bar:hover { opacity: 1; }
.dash-bars__axis { display: flex; justify-content: space-between; margin-top: 8px; color: var(--muted); font-size: 12px; }
.dash-row { display: grid; grid-template-columns: 24px 1fr auto auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.dash-row:first-of-type { border-top: 0; }
.dash-row__rank { color: var(--muted); font-variant-numeric: tabular-nums; }
.dash-row__name { overflow: hidden; color: #000; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.dash-row__meta { color: var(--muted); font-size: 13px; }
.dash-row__value { color: #000; font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-empty { margin: 0; color: var(--muted); font-size: 14px; }
/* Tooltip de Inicio: al pasar el mouse, tocar o enfocar con teclado una fila o barra */
[data-tip] { position: relative; cursor: default; }
[data-tip]:focus { outline: none; }
[data-tip]:focus-visible { box-shadow: 0 0 0 2px #000; border-radius: 6px; }
[data-tip]::after { content: attr(data-tip); position: absolute; z-index: 10; bottom: calc(100% + 6px); left: 50%; width: max-content; max-width: 220px; padding: 8px 10px; border-radius: 8px; background: #000; color: #fff; font-size: 12px; font-weight: 500; line-height: 1.4; white-space: pre-line; opacity: 0; transform: translate(-50%, 4px); transition: opacity .15s var(--ease), transform .15s var(--ease); pointer-events: none; }
[data-tip]:hover::after, [data-tip]:focus::after { opacity: 1; transform: translate(-50%, 0); }
.dash-bars__bar:nth-child(-n+4)::after { left: 0; transform: translate(0, 4px); }
.dash-bars__bar:nth-last-child(-n+4)::after { left: auto; right: 0; transform: translate(0, 4px); }
.dash-bars__bar:nth-child(-n+4):hover::after, .dash-bars__bar:nth-child(-n+4):focus::after, .dash-bars__bar:nth-last-child(-n+4):hover::after, .dash-bars__bar:nth-last-child(-n+4):focus::after { transform: none; }
.dash-bars__bar:focus { opacity: 1; }
@media (prefers-reduced-motion: reduce) { [data-tip]::after { transition: none; } }
@media (max-width: 575px) {
    .dash-row { grid-template-columns: 20px 1fr auto; }
    .dash-row__meta { display: none; }
    .dash-kpi__value { font-size: 24px; }
}

/* ---------- Pedidos en vivo: tres columnas por estado ---------- */
[v-cloak] { display: none; }
.live-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.live-col { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); --tone: #737373; }
.live-col.is-new { --tone: #e11d48; }
.live-col.is-accepted { --tone: #d97706; }
.live-col.is-done { --tone: #16a34a; }
.live-col__title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; color: #000; font-size: 16px; font-weight: 600; }
.live-col__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tone); }
.live-col.is-new .live-col__dot { box-shadow: 0 0 0 0 var(--tone); animation: live-pulse 1.6s infinite; }
.live-col__count { margin-left: auto; min-width: 28px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--surface-2); color: #000; font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; }
.live-col__empty { margin: 0; padding: 20px 8px; color: var(--muted); font-size: 14px; text-align: center; }
.live-order { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; border-left: 3px solid var(--tone); background: var(--surface-2); color: #000; }
.live-order__main { display: flex; flex-direction: column; gap: 4px; color: #000; border-radius: 8px; }
.live-order__main:hover { color: #000; }
.live-order__main:focus-visible { outline: 2px solid #000; outline-offset: 4px; }
.live-order__history { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; color: var(--muted); font-size: 12px; }
.live-order__history time { color: #000; font-variant-numeric: tabular-nums; }
.live-order__actions { display: flex; align-items: center; gap: 8px; }
.live-order__actions .btn-primary, .live-order__actions .btn-warning { flex: 1; min-height: 40px; }
.live-order__cancel { color: #b91c1c; }
.live-order__cancel:hover { color: #7f1d1d; }
.live-toast { position: fixed; z-index: 1050; left: 50%; bottom: 24px; margin: 0; padding: 10px 16px; border-radius: var(--radius-pill); background: #000; color: #fff; font-size: 14px; transform: translateX(-50%); box-shadow: var(--shadow-lg); }
.live-finished { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; padding: 16px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.live-finished__row { display: grid; grid-template-columns: 72px 1fr auto auto; gap: 12px; align-items: center; padding: 8px 4px; border-top: 1px solid var(--line); color: #000; font-size: 14px; }
.live-finished__row:hover { color: #000; background: var(--surface-2); }
.live-finished__row .is-ok { color: #16a34a; }
.live-finished__row .is-cancel { color: #b91c1c; }
.live-finished__price { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 575px) { .live-finished__row { grid-template-columns: 64px 1fr auto; } .live-finished__price { display: none; } }
.live-order__top { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; }
.live-order__price { font-weight: 600; font-variant-numeric: tabular-nums; }
.live-order__client { font-size: 14px; }
.live-order__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; color: var(--muted); font-size: 12px; }
.live-order__status { color: var(--tone); font-weight: 600; }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .live-col.is-new .live-col__dot { animation: none; } }
/* Pedidos en vivo, vista Cocina: pantalla completa con comandas grandes para leer desde lejos */
.kitchen-screen { --k-bg: var(--k-light-bg, #fff); --k-fg: var(--k-light-fg, #000); min-height: 100vh; padding: 16px 24px 32px; background: var(--k-bg); color: var(--k-fg); }
.kitchen-screen.is-dark { --k-bg: var(--k-dark-bg, #0a0a0a); --k-fg: var(--k-dark-fg, #fff); }
.kitchen-screen .kitchen-screen__logo[data-logo-for="dark"], .kitchen-screen.is-dark .kitchen-screen__logo[data-logo-for="light"] { display: none; }
.kitchen-screen.is-dark .kitchen-screen__logo[data-logo-for="dark"] { display: block; }
.kitchen-screen__actions { display: flex; align-items: center; gap: 8px; }
/* Botones con el color de texto del tema (la base usa !important) */
.kitchen-screen__actions .btn-secondary, .kitchen-screen__actions .btn-secondary:hover { background: color-mix(in srgb, var(--k-fg) 12%, transparent) !important; color: var(--k-fg) !important; }
.kitchen-screen__mode { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; }
.kitchen-screen__sun, .kitchen-screen.is-dark .kitchen-screen__moon { display: none; }
.kitchen-screen.is-dark .kitchen-screen__sun { display: block; }
.kitchen-screen__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.kitchen-screen__logo { max-height: 48px; max-width: 180px; object-fit: contain; }
.kitchen-screen__empty { margin: 18vh 0 0; color: color-mix(in srgb, var(--k-fg) 65%, transparent); font-size: 22px; text-align: center; }
/* --cols lo calcula liveorders.js: 3 → 3 columnas, 6 → 3×2, 8 → 4×2 */
.kitchen-grid { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 991px) { .kitchen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .kitchen-screen { padding: 12px 16px 24px; } .kitchen-grid { grid-template-columns: 1fr; } }
.kitchen-ticket { --tone: #e11d48; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: 12px; border-left: 6px solid var(--tone); background: #fff; color: #000; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.kitchen-ticket.is-accepted { --tone: #d97706; }
.kitchen-ticket__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.kitchen-ticket__id { font-size: 36px; font-weight: 700; line-height: 1; }
.kitchen-ticket__when { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.kitchen-ticket__status { color: var(--tone); font-size: 14px; font-weight: 600; }
.kitchen-ticket__time { font-size: 24px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.kitchen-ticket__type { align-self: flex-start; margin: 0; padding: 4px 12px; border-radius: var(--radius-pill); background: #000; color: #fff; font-size: 17px; font-weight: 600; }
.kitchen-ticket__type.is-delivery { background: #2563eb; }
.kitchen-ticket__items { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--line); list-style: none; }
.kitchen-ticket__items li { display: flex; gap: 12px; font-size: 28px; line-height: 1.25; }
.kitchen-ticket__qty { flex: none; min-width: 52px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kitchen-ticket__name { font-weight: 600; }
.kitchen-ticket__items small { display: block; margin-top: 2px; color: #404040; font-size: 20px; }
.kitchen-ticket__note { margin: 0; padding: 10px 12px; border-radius: 8px; background: #fef3c7; color: #000; font-size: 22px; line-height: 1.35; }

/* ---------- Todos los pedidos: número + cliente como enlace al detalle ---------- */
.order-link { display: inline-flex; flex-direction: column; gap: 2px; color: #000; line-height: 1.25; }
.order-link strong { font-weight: 600; }
.order-link span { color: var(--muted); font-size: 13px; }
.order-link:hover strong { text-decoration: underline; }

/* ---------- Detalle del pedido (página y ventana): editar todo + validación del pago ---------- */
.order-detail__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.order-detail__title { margin: 0; color: #000; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.order-detail__meta { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.order-detail__status { color: #000; font-weight: 500; }
.order-detail__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.order-detail__actions p { margin: 0; }
.order-detail__actions .btn { margin: 0; }
.order-detail__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
@media (max-width: 991px) { .order-detail__grid { grid-template-columns: 1fr; } }
/* Pedido: tarjeta de solo lectura; "Editar" cambia a formulario */
.order-main:not([data-editing]) .order-edit, .order-main[data-editing] .order-card { display: none; }
.order-card { padding: 20px; border-radius: var(--radius-lg, 16px); box-shadow: var(--ring); background: #fff; }
.order-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.order-card__head .order-edit__title { margin: 0; }
.order-card__edit { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--radius-pill); background: var(--surface, #f4f4f4); color: #000; font-size: 14px; font-weight: 500; cursor: pointer; }
.order-card__edit:hover { background: #ebebeb; }
.order-card__edit:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.order-card__tools { display: flex; align-items: center; gap: 8px; }
.order-card__tools form { margin: 0; }
.order-card__delete { color: #c62828; }
.order-card__delete:hover { background: #fdecea; }
.order-card__data, .order-card__totals { margin: 0; }
.order-card__data div, .order-card__totals div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: 14px; }
.order-card__data div + div { border-top: 1px solid var(--line); }
.order-card__data dt, .order-card__totals dt { flex: none; color: var(--muted); font-weight: 500; }
.order-card__data dd, .order-card__totals dd { margin: 0; color: #000; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.order-card__data a { color: #000; }
.order-card__items { margin: 12px 0; padding: 12px 0; border-block: 1px solid var(--line); list-style: none; }
.order-card__items li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 6px 0; }
.order-card__items .order-line__total { grid-column: 3; }
.order-card__qty { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.order-card__totals div { padding: 4px 0; }
.order-card__totals .is-total { padding-top: 8px; font-size: 18px; font-weight: 600; }
.order-card__totals .is-total dt { color: #000; }
.order-edit__buttons { display: flex; gap: 8px; }
.order-edit__buttons .btn { margin: 0; }
@media (max-width: 575px) { .order-card { padding: 16px; } .order-edit__buttons { width: 100%; } .order-edit__buttons .btn { flex: 1; } }
.order-edit__section { padding: 20px 0; border-top: 1px solid var(--line); }
.order-edit__section:first-child { padding-top: 0; border-top: 0; }
.order-edit__title { margin: 0 0 14px; color: #000; font-size: 16px; font-weight: 600; }
.order-edit__hint { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.order-edit__add { margin-top: 14px; }
.order-edit__choices { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.order-choice { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 10px 16px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--line-strong); font-weight: 500; cursor: pointer; }
.order-choice:has(input:checked) { box-shadow: inset 0 0 0 2px #000; }
.order-choice input { accent-color: #000; }
.order-line { display: grid; grid-template-columns: minmax(0, 1fr) 84px 90px; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.order-line__info { display: flex; flex-direction: column; min-width: 0; }
.order-line__name { color: #000; font-weight: 500; }
.order-line__extra { color: var(--muted); font-size: 13px; }
.order-line__qty { min-height: 40px; text-align: center; }
.order-line__total { color: #000; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.order-edit__footer { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0 4px; border-top: 1px solid var(--line); background: #fff; }
.order-edit__totals { display: flex; gap: 20px; margin: 0; }
.order-edit__totals div { display: flex; flex-direction: column; }
.order-edit__totals dt { color: var(--muted); font-size: 12px; font-weight: 500; }
.order-edit__totals dd { margin: 0; color: #000; font-weight: 600; font-variant-numeric: tabular-nums; }
.order-edit__totals .is-total dd { font-size: 20px; }
.order-side { display: flex; flex-direction: column; gap: 16px; }
.order-pay { padding: 18px; border-radius: 16px; background: #fff8e6; box-shadow: inset 0 0 0 1px #f2dca5; }
.order-pay.is-paid { background: #effaf2; box-shadow: inset 0 0 0 1px #bfe5ca; }
.order-pay__state { margin: -8px 0 12px; color: #92400e; font-size: 14px; font-weight: 600; }
.order-pay.is-paid .order-pay__state { color: #166534; }
.order-pay__data { margin: 0 0 14px; }
.order-pay__data div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(0, 0, 0, .06); font-size: 14px; }
.order-pay__data dt { color: var(--muted); font-weight: 500; }
.order-pay__data dd { margin: 0; color: #000; text-align: right; }
.order-pay__ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; letter-spacing: .04em; }
.order-pay__proof { display: block; margin-bottom: 14px; }
.order-pay__proof img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; }
.order-history { padding: 14px 18px; border-radius: 16px; box-shadow: var(--ring); }
.order-history summary { color: #000; font-weight: 600; cursor: pointer; }
.order-history .card-body { padding: 12px 0 0; }

/* Ventana del pedido en Todos los pedidos (<dialog> nativo) */
.order-modal { width: min(1040px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.order-modal::backdrop { background: rgba(0, 0, 0, .45); }
.order-modal[open] { animation: order-modal-in .2s var(--ease); }
.order-modal__bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 16px 0; background: #fff; }
.order-modal__full { color: var(--muted); font-size: 13px; font-weight: 500; }
.order-modal__close { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--surface-2); color: #000; font-size: 22px; line-height: 1; cursor: pointer; }
.order-modal__close:hover { background: #ececec; }
.order-modal__body { padding: 4px 24px 24px; }
.order-modal__loading { padding: 40px 0; color: var(--muted); text-align: center; }
/* Ventana del cliente: datos y resumen de compras */
.customer-modal { width: min(560px, calc(100vw - 32px)); }
.customer-modal__data { display: grid; grid-template-columns: 96px 1fr; gap: 8px 16px; margin: 0 0 20px; font-size: 14px; }
.customer-modal__data dt { color: var(--muted); font-weight: 500; }
.customer-modal__data dd { margin: 0; color: #000; overflow-wrap: anywhere; white-space: pre-line; }
.customer-modal__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.customer-modal__stats div { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; background: var(--surface-2); }
.customer-modal__stats span { color: var(--muted); font-size: 12px; }
.customer-modal__stats strong { color: #000; font-size: 15px; font-variant-numeric: tabular-nums; }
/* Alta corta de producto */
.item-modal { width: min(560px, calc(100vw - 32px)); }
.item-modal__newcat { margin: -4px 0 16px; padding: 12px; border-radius: 12px; background: var(--surface-2); }
.item-modal__newcat-row { display: flex; gap: 8px; }
/* Horario: semana con hasta dos tramos por día y calendario de fechas especiales */
.hours-day { display: grid; grid-template-columns: 160px 1fr; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); }
.hours-day:first-of-type { border-top: 0; }
.hours-day.is-invalid .hours-day__name { color: #b91c1c; }
.hours-day__toggle { display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 0; cursor: pointer; }
.hours-day__toggle input { width: 18px; height: 18px; accent-color: #000; }
.hours-day__name { color: #000; font-weight: 600; }
.hours-day__closed { display: none; color: var(--muted); font-size: 13px; }
.hours-day.is-closed .hours-day__closed { display: inline; }
.hours-day.is-closed .hours-day__ranges { display: none; }
.hours-day__ranges { display: flex; flex-direction: column; gap: 8px; }
.hours-range { display: flex; align-items: center; gap: 8px; }
.hours-range .form-control { width: 160px; }
.hours-range[hidden] { display: none; }
.hours-day__actions { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; }
.hours-special { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: 32px; }
.hours-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; color: #000; }
.hours-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.hours-cal__wd { color: var(--muted); font-size: 12px; text-align: center; }
.hours-cal__day { aspect-ratio: 1; min-height: 40px; border: 0; border-radius: 10px; background: var(--surface-2); color: #000; font-size: 14px; font-variant-numeric: tabular-nums; cursor: pointer; }
.hours-cal__day:hover { background: #ececec; }
.hours-cal__day:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.hours-cal__day.is-out { opacity: .4; }
.hours-cal__day.is-today { box-shadow: inset 0 0 0 2px #000; }
.hours-cal__day.is-off, .hours-cal__legend .is-off { background: #fee2e2; color: #991b1b; }
.hours-cal__day.is-special, .hours-cal__legend .is-special { background: #fef3c7; color: #92400e; }
.hours-cal__legend { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; color: var(--muted); font-size: 12px; }
.hours-cal__legend span { display: inline-block; width: 12px; height: 12px; margin-left: 8px; border-radius: 4px; }
.hours-cal__legend span:first-child { margin-left: 0; }
.hours-upcoming__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.hours-dialog { width: min(440px, calc(100vw - 32px)); }
.hours-dialog__choice { display: flex; gap: 16px; }
.hours-dialog__choice label { display: flex; align-items: center; gap: 6px; margin: 0; color: #000; }
.social-field__prefix { color: var(--muted); font-size: 13px; }
@media (max-width: 575px) {
    .hours-day { grid-template-columns: 1fr; gap: 6px; }
    .hours-range .form-control { width: auto; flex: 1; }
    .hours-special { grid-template-columns: 1fr; }
}
/* Pagos: el QR primero, grande, y los datos debajo */
.pay-qr > .form-control-label { display: block; text-align: left; }
.pay-qr__box { display: flex; align-items: center; gap: 20px; padding: 16px; border-radius: 12px; background: var(--surface-2); }
.pay-qr__img { width: 180px; height: 180px; object-fit: contain; border-radius: 8px; background: #fff; }
.pay-qr__empty { display: flex; align-items: center; justify-content: center; width: 180px; height: 180px; border: 2px dashed var(--line); border-radius: 8px; color: var(--muted); font-size: 14px; }
.pay-qr__actions { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
@media (max-width: 575px) { .pay-qr__box { flex-direction: column; align-items: stretch; } .pay-qr__img, .pay-qr__empty { width: 100%; height: auto; aspect-ratio: 1; } }
/* Zonas de entrega: cada fila se edita en su lugar */
.zone-list { display: flex; flex-direction: column; }
.zone-row { display: grid; grid-template-columns: minmax(0, 2fr) 120px minmax(0, 1.2fr) 160px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.zone-row--head { padding-top: 0; border-top: 0; color: var(--muted); font-size: 12px; font-weight: 500; }
.zone-row--new { padding-top: 16px; }
.zone-row__actions { display: flex; align-items: center; gap: 4px; }
@media (max-width: 767px) {
    .zone-row { grid-template-columns: 1fr 1fr; }
    .zone-row__name { grid-column: 1 / -1; }
    .zone-row__actions { grid-column: 1 / -1; }
    .zone-row--head { display: none; }
}
.customer-row { cursor: pointer; }
.customer-row:hover { background: var(--surface-2); }
@keyframes order-modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .order-modal[open] { animation: none; } }
@media (max-width: 575px) { .order-modal { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; } .order-modal__body { padding: 4px 16px 16px; } }
@media (max-width: 575px) {
    .order-detail__head { flex-direction: column; }
    .order-detail__actions .btn { flex: 1; }
    .order-line { grid-template-columns: minmax(0, 1fr) 72px; row-gap: 4px; }
    .order-line__total { grid-column: 2; }
    .order-line__qty { grid-row: 1; grid-column: 2; }
    .order-edit__footer { margin: 0 -16px; padding: 12px 16px; box-shadow: 0 -8px 16px -12px rgba(0, 0, 0, .25); }
    .order-edit__footer .btn { flex: 1; }
    .order-edit__totals { gap: 14px; }
    .panel-page-head__actions { width: 100%; }
}

/* Títulos de sección con un solo tamaño: categorías del menú, tarjetas del pago, carrito y gracias
   (siguen al tamaño de título de Diseño; con 25 px quedan en 18 px en escritorio y 16 px en el celular) */
html body #restaurant-content .container-restorant h1, html body .checkout-title, html body .cart-drawer__title, html body .thanks .thanks__title {
    font-size: max(18px, calc(var(--size-title, 32px) * .6875)); line-height: 1.15;
}
@media (max-width: 575.98px) {
    html body #restaurant-content .container-restorant h1, html body .checkout-title, html body .cart-drawer__title, html body .thanks .thanks__title { font-size: max(16px, calc(var(--size-title, 32px) * .625)); }
}
/* Categorías del menú: más aire entre el título y los platos */
html body #restaurant-content .container-restorant h1 { margin-bottom: 16px; }

/* Diseño (panel): pares claro/oscuro lado a lado, miniatura del logo sobre su fondo, letra + tamaño en una fila */
.design-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 12px; }
.design-file__thumb { display: flex; align-items: center; justify-content: center; height: 88px; margin-bottom: 8px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.design-file__thumb img { max-width: 80%; max-height: 64px; object-fit: contain; }
.menu-hero__home { display: block; width: fit-content; max-width: 100%; margin: 0 auto; }   /* el logo lleva al inicio; solo el logo es clicable */
.design-file__thumb--favicon { width: 88px; }
.design-file__thumb--favicon img { width: 48px; height: 48px; border-radius: 10px; }
.design-form .design-type__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: end; }
.design-form .design-type__size .design-logo { max-width: none; }
@media (max-width: 575px) { .design-form .design-type__row { grid-template-columns: 1fr; } }

/* Menú: colores por nivel (títulos, subtítulos) y de los botones redondos de la cabecera */
body:has(.menu-hero) .menu-hero h1, html body #restaurant-content .container-restorant h1, html body .menu-hero__subtitle { color: var(--menu-title-fg, var(--menu-fg)); }
#restaurant-content .strip .res_title, #restaurant-content .strip .res_title a { color: var(--menu-subtitle-fg, var(--menu-fg)); }
.menu-action__icon, .menu-topbar:has(.menu-topbar__social) .menu-topbar__end .menu-top-btn, .menu-bar__btn { color: var(--social-fg, var(--menu-fg)) !important; }
.menu-action:hover .menu-action__icon, .menu-topbar__end .menu-top-btn:hover, .menu-bar__btn:hover { background: var(--social-bg, var(--menu-chip)); filter: brightness(.94); }
/* Separación del logo (arriba y abajo) y tamaño del botón de pedido */
.menu-hero .menu-hero__logo { margin-top: var(--menu-logo-space, 16px); margin-bottom: var(--menu-logo-space, 16px); }
#restaurant-content .strip .menu-order { min-height: var(--cta-h, 40px); font-size: var(--cta-fs, 14px); }
/* Botón del carrito: su propio color, el número con los colores invertidos */
body:has(.menu-hero) .menu-fab__btn { background: var(--fab-bg, var(--menu-accent)); color: var(--fab-fg, var(--menu-accent-fg)); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
body:has(.menu-hero) .menu-fab__count { background: var(--fab-fg, var(--menu-accent-fg)); color: var(--fab-bg, var(--menu-accent)); }

/* ---------- Coherencia de la parte del cliente (menú, detalle, carrito, pago, gracias) ---------- */
/* Tocar o hacer clic no deja el anillo naranja del navegador; con teclado sigue el contorno de :focus-visible */
button:focus:not(:focus-visible), a:focus:not(:focus-visible), [role="button"]:focus:not(:focus-visible) { outline: 0; }
/* Botones principales en píldora: mismo hover (solo con mouse, en el celular no queda pegado) y misma presión */
#restaurant-content .strip .menu-order, .dish__cta, .checkout-submit, .sidenav-cart a.cart-drawer__pay, .thanks__wa { transition: opacity .15s var(--ease), transform .1s var(--ease); }
@media (hover: hover) {
    #restaurant-content .strip .menu-order:not(:disabled):hover, .dish__cta:not(:disabled):hover, .checkout-submit:not(:disabled):hover,
    .sidenav-cart a.cart-drawer__pay:hover, .thanks__wa:hover { opacity: .88; }
    .cart-drawer__secondary:hover, .pay-proof__remove:hover { background: var(--primary-soft-hover); }
}
#restaurant-content .strip .menu-order:not(:disabled):active, .dish__cta:not(:disabled):active, .checkout-submit:not(:disabled):active,
.sidenav-cart a.cart-drawer__pay:active, .thanks__wa:active { transform: scale(.98); }
.pay-proof__remove { color: #000; font-weight: 500; }
/* Pago: el logo va debajo de la barra (Atrás · claro/oscuro), como en el menú; en el celular chocaba con Atrás */
.menu-hero:has(.menu-topbar--fixed) .container { padding-top: 48px; }   /* como el menú */

/* Cuadrícula: descripción corta bajo el nombre (2 líneas, texto pequeño en el color secundario del tema);
   antes se ocultaba y la tarjeta solo mostraba foto, nombre y precio */
html[data-menu-view="grid"] #restaurant-content .strip .res_description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin: 2px 0 0; padding: 0 10px; color: var(--menu-muted); font-size: calc(var(--size-body, 14px) - 1px); line-height: 1.35; }
/* Pago con el local cerrado: aviso arriba (mismo estilo que los errores) y el botón de pagar queda deshabilitado */
.checkout-closed { margin: 0 0 16px; padding: 14px 16px; border-radius: 12px; background: var(--danger-soft); color: var(--danger); font-size: 15px; font-weight: 600; }
/* Detalle del plato: paso donde el cliente reparte unidades entre opciones (1 Tempura, 2 Frío), una fila con contador por opción */
.dish__split { display: flex; flex-direction: column; gap: 10px; }
.dish__split-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-strong); }
.qty-stepper--sm .qty-stepper__btn { font-size: 20px; line-height: 1; }
.qty-stepper--sm .qty-stepper__btn:disabled { opacity: .35; cursor: default; }
/* Detalle del plato, extras con reparto: un rótulo por parte ("Para 20 Frío") sobre sus extras */
.dish__extras-for { margin: 14px 0 8px; color: var(--muted); font-size: 13px; font-weight: 600; }
.dish__extra[disabled] { cursor: not-allowed; opacity: .45; }

/* Pago: el QR va antes que los datos; aire entre "Toca para ampliar" y la primera fila */
.pay-qr + .pay-data { margin-top: 12px; }

/* Panel · ficha del producto: secciones con el mismo título y espaciado, ayudas bajo el campo y fotos en rejilla 590×400
   (misma proporción que la tarjeta del menú) con acciones de 44 px y su estado a la vista antes de guardar */
.item-section { padding: 20px 0; border-top: 1px solid var(--line); }
.item-section:first-of-type { padding-top: 0; border-top: 0; }
.item-section__title { margin: 0 0 16px; color: #000; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.item-help { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.item-form .custom-toggle + br + small strong, .item-form small.text-muted strong { font-weight: 400; }
.item-form__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-top: 20px; border-top: 1px solid var(--line); }
.item-form__actions .btn { margin: 0; }
.item-fold summary { min-height: 44px; display: flex; align-items: center; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.item-photos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.item-photos__tile { position: relative; display: flex; flex-direction: column; margin: 0; border-radius: 12px; background: var(--surface-2); overflow: hidden; }
.item-photos__tile img { display: block; width: 100%; aspect-ratio: 590 / 400; object-fit: cover; background: var(--surface-2); transition: opacity .2s; }
.item-photos__tile img[hidden] { display: none; }
.item-photos__tile.is-empty::before { content: ""; display: block; aspect-ratio: 590 / 400; }
.item-photos__badge { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 999px; background: #000; color: #fff; font-size: 11px; font-weight: 600; }
.item-photos__badge--soon, .item-photos__note { display: none; }
.item-photos__badge--new { background: #fff; color: #000; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.item-photos__note { position: absolute; top: 8px; left: 8px; right: 8px; padding: 2px 8px; border-radius: 999px; background: #fff; color: #b91c1c; font-size: 11px; font-weight: 600; text-align: center; }
.item-photos__actions { display: flex; }
.item-photos__action { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 0 4px; white-space: nowrap; border: 0; background: transparent; color: #000; font-size: 12px; font-weight: 600; text-align: center; cursor: pointer; }
.item-photos__action + .item-photos__action { border-left: 1px solid var(--line); }
.item-photos__action--danger { color: #b91c1c; }
/* El input real queda oculto pero enfocable: el foco se ve en su botón */
.item-photos__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.item-photos__action:focus-within, .item-photos__add:focus-within { outline: 2px solid #000; outline-offset: -2px; }
.item-photos__action:has(:disabled) { opacity: .4; cursor: not-allowed; }
.item-photos__tile.is-main-soon { box-shadow: 0 0 0 2px #000; }
.item-photos__tile.is-main-soon .item-photos__badge--soon { display: block; }
.item-photos__tile.is-main-soon [data-make-main] + span { text-decoration: underline; }
.item-photos.has-new-main .item-photos__tile.is-main .item-photos__badge { display: none; }
.item-photos.has-new-main .item-photos__note--swap { display: block; color: #000; }
.item-photos__tile.is-removed img { opacity: .35; }
.item-photos__tile.is-removed .item-photos__note--remove { display: block; }
.item-photos__add { align-items: center; justify-content: center; gap: 2px; min-height: 120px; border: 1.5px dashed var(--line-strong); background: transparent; color: #000; font-size: 13px; font-weight: 600; cursor: pointer; }
.item-photos__add[hidden] { display: none; }
.item-photos__add small { color: var(--muted); font-weight: 400; }
.item-photos__plus { font-size: 24px; line-height: 1; }
.item-photos__error { margin: 6px 0 0; color: #b91c1c; font-size: 13px; }
@media (hover: hover) {
    .item-photos__action:hover { background: rgba(0, 0, 0, .05); }
    .item-photos__add:hover { border-color: #000; }
}
@media (max-width: 575.98px) {
    .item-photos__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .item-photos__tile img { transition: none; } }

/* Fotos de los platos completas: el cliente ve el plato entero, sin recorte ni zoom al pasar el mouse.
   El marco es 590x400 como las fotos que se suben para que la rejilla no se descuadre; una foto
   vieja de 590x400 queda completa y centrada, y el sobrante es transparente, del mismo fondo que la tarjeta */
#restaurant-content .strip figure { aspect-ratio: 590 / 400; background: transparent; }
#restaurant-content .strip figure img, #restaurant-content .strip figure:hover img {
    position: static; width: 100%; height: 100%; object-fit: contain; transform: none; transition: none; }
.item-extra-actions { display: flex; justify-content: flex-end; gap: 6px; }
.item-extra-actions form { margin: 0; }
.item-extra-actions .btn { margin: 0; }
.item-extras-table th, .item-extras-table td { padding-left: 16px; padding-right: 16px; }
.item-extra-name { white-space: normal !important; }   /* la condición ("Solo con …") va bajo el nombre, sin columna ni scroll lateral */
.item-fold summary { list-style: none; }
.item-fold summary::-webkit-details-marker { display: none; }
.item-fold summary::before { content: "+"; width: 1.2em; font-size: 16px; }
.item-fold[open] summary::before { content: "−"; }
/* Sin principal: toda la casilla abre el selector, con el mismo borde punteado que "Añadir fotos" */
.item-photos__tile.is-empty { border: 1.5px dashed var(--line-strong); background: transparent; }
.item-photos__tile.is-empty .item-photos__action::after { content: ""; position: absolute; inset: 0; }

/* Panel · ficha del producto, Opciones: cada opción en su fila ("Tamaño: Pequeño · Grande") con Editar/Borrar,
   y en la ventana los valores como etiquetas que se escriben con Enter o coma y se quitan con × */
.item-options { margin: 0; padding: 0; list-style: none; }
.item-options__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.item-options__row:first-child { border-top: 0; padding-top: 0; }
.item-options__text { min-width: 0; color: #000; font-size: 14px; overflow-wrap: anywhere; }
.item-options__text strong { font-weight: 600; }
.item-options__row .item-extra-actions .btn { display: inline-flex; align-items: center; }   /* Borrar es un enlace: mismo alto y texto centrado que Editar */
.item-option-values { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; height: auto; min-height: 46px; padding: 6px 8px; cursor: text; }
.item-option-values:focus-within { border-color: #000; }
.item-option-values .item-option-values__input:focus, .item-option-values .item-option-values__input:focus-visible { outline: 0; box-shadow: none; }   /* el foco lo marca la caja */
.item-option-values__input { flex: 1 1 120px; min-width: 120px; min-height: 32px; border: 0; outline: 0; background: transparent; color: inherit; font-size: 14px; }
.item-option-chip { display: inline-flex; align-items: center; gap: 2px; min-height: 36px; padding: 0 4px 0 12px; border: 0; border-radius: 999px; background: var(--surface-2); color: #000; font-size: 13px; font-weight: 500; }
.item-option-chip__x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.item-option-chip__x:focus-visible, .item-option-chip--suggest:focus-visible { outline: 2px solid #000; outline-offset: 1px; }
.item-option-suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.item-option-suggest[hidden] { display: none; }
.item-option-chip--suggest { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); background: transparent; cursor: pointer; }
@media (hover: hover) {
    .item-option-chip__x:hover { background: rgba(0, 0, 0, .08); color: #000; }
    .item-option-chip--suggest:hover { border-color: #000; }
}
@media (max-width: 575.98px) { .item-options__row { flex-wrap: wrap; } .item-options__row .item-extra-actions { width: 100%; justify-content: flex-start; } }

/* Combos · menú: insignia "Combo" junto al nombre de la tarjeta y, en el detalle, la lista de lo que incluye con la
   miniatura de cada plato del menú (los textos libres llevan un punto). Usa los colores del tema del menú */
.menu-combo-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--menu-fg, #000); color: var(--menu-bg, #fff); font-size: 11px; font-weight: 600; line-height: 18px; vertical-align: 2px; }
.dish__includes { margin-top: 12px; }
.dish__includes-title { margin: 0 0 6px; color: var(--menu-fg, #000); font-size: 13px; font-weight: 600; }
.dish__includes ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dish__includes li { display: flex; align-items: center; gap: 10px; color: var(--menu-fg, #000); font-size: 14px; }
.dish__includes img, .dish__includes-dot { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 8px; object-fit: cover; background: var(--surface-2); }
.dish__includes-dot { display: inline-block; }

/* Combos · panel: lista con foto, partes y estado; en la ficha, filas de "Incluye" y de cada grupo con foto o texto,
   cantidad o +$ y quitar (44 px), y el buscador de platos en <dialog> */
.combo-list { margin: 0; padding: 0; list-style: none; }
.combo-list li + li { border-top: 1px solid var(--line); }
.combo-list__row { display: flex; align-items: center; gap: 14px; padding: 12px 0; color: #000; }
.combo-list__img { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: var(--surface-2); }
.combo-list__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.combo-list__name { font-size: 15px; font-weight: 600; }
.combo-list__parts, .combo-list__meta { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.combo-list__price { font-weight: 600; white-space: nowrap; }
.combo-rows { margin: 0 0 8px; padding: 0; list-style: none; }
.combo-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.combo-row__img { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--surface-2); }
.combo-row__name { flex: 1; min-width: 0; font-size: 14px; color: #000; overflow-wrap: anywhere; }
.combo-row__text { flex: 1; min-width: 0; }
.combo-row__warn { color: #b91c1c; font-size: 12px; font-weight: 600; }
.combo-row__qty input { width: 72px; }
.combo-row__extra { display: flex; align-items: center; gap: 4px; margin: 0; color: var(--muted); font-size: 13px; }
.combo-row__extra input { width: 88px; }
.combo-row__remove { flex: 0 0 44px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.combo-add { display: flex; flex-wrap: wrap; gap: 8px; }
.combo-add .btn { margin: 0; }
.combo-group { margin-bottom: 16px; padding: 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.combo-group__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.combo-group__head .form-control { flex: 1; }
.combo-photo { display: flex; align-items: center; gap: 16px; }
.combo-photo__img { width: 120px; height: 81px; border-radius: 12px; object-fit: cover; background: var(--surface-2); }
.combo-photo__img[hidden] { display: none; }
.combo-picker { width: min(560px, calc(100vw - 32px)); }
.combo-picker__list { display: grid; gap: 4px; max-height: 60vh; overflow: auto; }
.combo-picker__item { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 8px; border: 0; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; }
.combo-row__remove:focus-visible, .combo-picker__item:focus-visible { outline: 2px solid #000; outline-offset: -2px; }
@media (hover: hover) {
    .combo-list__row:hover { color: #000; background: var(--surface-2); }
    .combo-row__remove:hover, .combo-picker__item:hover { background: var(--surface-2); color: #000; }
}
@media (max-width: 575.98px) {
    .combo-row:has(.combo-row__text) { flex-wrap: wrap; }   /* solo el texto libre baja a su propia línea */
    .combo-row__text { flex-basis: calc(100% - 54px); }
}

/* Productos (panel): lista compacta en filas en vez de tarjetas grandes, para ver el menú entero con poco scroll.
   Cabecera de categoría con contador y acciones con texto; secundarias en "⋯" (<details>). Móvil 1 columna, escritorio 2. */
.prod-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 16px; }
.prod-tools__search { flex: 1 1 260px; max-width: 420px; min-height: 44px; }
.prod-tools__count, .prod-noresults, .prod-cat__empty { color: var(--muted); font-size: 13px; }
.prod-noresults { margin: 8px 0 16px; }
.prod-cat + .prod-cat { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
.prod-cat__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; }
.prod-cat__toggle { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px 0 0; border: 0; background: none; color: #000; font-size: 18px; font-weight: 600; letter-spacing: -.01em; text-align: left; cursor: pointer; }
.prod-cat__chevron { width: 14px; color: var(--icon-muted); font-size: 12px; transition: transform .2s var(--ease); }
.prod-cat__toggle[aria-expanded="false"] .prod-cat__chevron { transform: rotate(-90deg); }
.prod-cat__count { min-width: 24px; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 600; text-align: center; }
.prod-cat.is-hidden .prod-cat__name { color: var(--muted); }
.prod-cat__actions { display: flex; align-items: center; gap: 4px; }
.prod-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: none; color: #000; font-size: 13px; font-weight: 500; cursor: pointer; list-style: none; }
.prod-action i { color: var(--icon-muted); }
.prod-action--icon { padding: 0; }
.prod-action::-webkit-details-marker { display: none; }
.prod-action:focus-visible, .prod-cat__toggle:focus-visible, .prod-row__main:focus-visible, .prod-add:focus-visible, .prod-chip:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.prod-badge { display: inline-block; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--surface-2); color: #000; font-size: 12px; font-weight: 500; }
.prod-badge--muted { color: var(--muted); }
.prod-more { position: relative; }
.prod-more__list { position: absolute; z-index: 20; top: calc(100% + 4px); right: 0; min-width: 170px; padding: 6px; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-lg), var(--ring); }
.prod-more__list a, .prod-more__list button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--radius-sm); background: none; color: #000; font-size: 14px; text-align: left; cursor: pointer; }
.prod-more__list i { width: 16px; color: var(--icon-muted); text-align: center; }
.prod-more__list .text-danger, .prod-more__list .text-danger i { color: var(--danger) !important; }
.prod-more__list form { margin: 0; }
.prod-rows { display: grid; grid-template-columns: 1fr; gap: 0 24px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 992px) { .prod-rows { grid-template-columns: 1fr 1fr; } }
.prod-row { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 6px 0; border-bottom: 1px solid var(--line); background: #fff; }
.prod-row__drag { display: flex; align-items: center; justify-content: center; width: 24px; align-self: stretch; color: var(--icon-muted); cursor: grab; touch-action: none; }
.prod-row__main { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; min-height: 49px; border-radius: var(--radius-sm); color: #000; }
.prod-row__img { flex: 0 0 72px; width: 72px; height: 49px; border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-2); }
.prod-row__img--none { display: flex; align-items: center; justify-content: center; color: var(--icon-muted); }
.prod-row__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prod-row__name { display: -webkit-box; overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.prod-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--muted); font-size: 13px; }
.prod-row__price { color: #000; font-weight: 500; }
.prod-switch { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; min-height: 44px; margin: 0; justify-content: center; cursor: pointer; }
.prod-switch input { position: absolute; opacity: 0; pointer-events: none; }
.prod-switch__track { position: relative; width: 36px; height: 20px; border-radius: var(--radius-pill); background: var(--line-strong); transition: background .2s var(--ease); }
.prod-switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .2s var(--ease); }
.prod-switch input:checked + .prod-switch__track { background: var(--success); }
.prod-switch input:checked + .prod-switch__track::after { transform: translateX(16px); }
.prod-switch input:focus-visible + .prod-switch__track { outline: 2px solid #000; outline-offset: 2px; }
.prod-switch__text { color: var(--muted); font-size: 11px; font-weight: 500; }
.prod-row.sortable-ghost { opacity: .4; }
.prod-cat__empty { margin: 4px 0 0; }
.prod-add { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 4px 0 8px; padding: 0 12px 0 0; border: 0; background: none; color: #000; font-size: 14px; font-weight: 600; cursor: pointer; }
.prod-add i { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); font-size: 12px; }
.prod-cat.is-searching .prod-add, .prod-cat.is-searching .prod-cat__empty { display: none; }
.prod-empty { max-width: 460px; margin: 24px auto; text-align: center; }
.prod-empty__title { margin: 0 0 6px; font-size: 20px; font-weight: 600; }
.prod-empty__text { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.prod-empty__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 20px; }
.prod-chip { min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: #fff; color: #000; font-size: 14px; cursor: pointer; }
@media (hover: hover) {
    .prod-action:hover, .prod-more__list a:hover, .prod-more__list button:hover, .prod-chip:hover { background: var(--surface-2); }
    .prod-row__main:hover .prod-row__name, .prod-add:hover { text-decoration: underline; }
}
@media (max-width: 575px) { .prod-admin > .card-body { padding: 16px; } .prod-switch { min-width: 56px; } .prod-row__img { flex-basis: 64px; width: 64px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .prod-cat__chevron, .prod-switch__track, .prod-switch__track::after { transition: none; } }

/* Productos: asa para arrastrar categorías (como la de los platos), acciones a la derecha y sin Subir/Bajar
   imposibles en la primera/última; las categorías que solo tienen combos salen como una cabecera compacta */
.prod-cat__head { justify-content: flex-start; }
.prod-cat__actions { margin-left: auto; }
.prod-cat__drag { display: flex; align-items: center; justify-content: center; width: 24px; min-height: 44px; margin-left: -6px; color: var(--icon-muted); cursor: grab; touch-action: none; }
.prod-cat.sortable-ghost { opacity: .4; }
[data-cat-list] > .prod-cat:first-child [data-cat-move="-1"],
[data-cat-list] > .prod-cat:last-child [data-cat-move="1"] { display: none; }
.prod-cat--combos .prod-cat__toggle { cursor: default; font-size: 16px; }

/* Combos: bloque "Dónde se ven en el menú" (radios + categoría) sobre la lista */
.combo-place { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.combo-place fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.combo-place__title { margin-bottom: 8px; font-size: 16px; font-weight: 600; color: #000; }
.combo-place__options { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-bottom: 6px; }
.combo-place__opt { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; color: #000; font-size: 14px; cursor: pointer; }
.combo-place__select { width: auto; max-width: 100%; }

/* Productos en el celular: la cabecera de cada categoría cabe en una línea (asa, flecha, nombre que envuelve
   hasta 2 líneas, contador y ⋯); Editar/Ocultar/Gestionar en Combos pasan al ⋯. Eliminar va en rojo tras una línea */
.prod-more__mobile { display: none !important; }
.prod-more__list form:has(> .text-danger) { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
@media (max-width: 575px) {
    .prod-cat__head { flex-wrap: nowrap; gap: 4px; }
    .prod-cat__toggle { flex: 1 1 auto; min-width: 0; gap: 8px; font-size: 16px; }
    .prod-cat__name { display: -webkit-box; overflow: hidden; line-height: 1.25; overflow-wrap: anywhere; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .prod-cat__count, .prod-cat__toggle .prod-badge { flex: none; }
    .prod-cat__actions { flex: none; }
    .prod-cat__actions > .prod-action:not(summary) { display: none; }
    .prod-more__mobile { display: flex !important; }
    .prod-row__drag { width: 20px; }
    .prod-row__main { gap: 10px; }
    .prod-row__img { flex-basis: 56px; width: 56px; height: 38px; }
    .prod-add { text-align: left; }
    .prod-switch { flex: none; }
    .prod-more { flex: none; }
}
@media (max-width: 374px) {
    .prod-admin > .card-body { padding: 12px; }
    .prod-row__main { gap: 8px; }
    .prod-row__img { flex-basis: 48px; width: 48px; height: 33px; }
}

/* Panel a 320 px: el logo del negocio (hasta 190 px) empujaba el avatar a una segunda línea en la barra superior */
@media (max-width: 399px) {
    .navbar-vertical .navbar-brand-img, .navbar-vertical .navbar-brand > img { max-width: 140px !important; }
    .navbar-vertical .navbar-brand { margin-right: 0; }
}

/* Ficha del producto en el celular: las tablas de Variantes y Extras caben sin scroll lateral
   (texto que envuelve y Editar/Borrar uno bajo otro) */
@media (max-width: 575.98px) {
    #variants-card .card-body { padding: 0; }
    #variants-card .table th, #variants-card .table td, .item-extras-table th, .item-extras-table td { padding-left: 12px; padding-right: 12px; white-space: normal; }
    #variants-card .table td { overflow-wrap: anywhere; }
    #variants-card .table td:last-child .btn { display: block; margin: 0 0 6px; }
    #variants-card .table td:last-child .btn:last-child { margin-bottom: 0; }
    .item-extras-table .item-extra-actions { flex-direction: column; align-items: flex-end; }
}

/* Ventanas nativas: la X de cerrar llega a 44 px de toque (antes 40) */
.order-modal__close { width: 44px; height: 44px; flex: none; }
.order-modal .modal-header { align-items: center; }   /* el título a la altura de la X */

/* Ventanas blancas del menú (armar el plato, carrito, buscador): siempre con la paleta clara. Con un diseño oscuro el
   cuerpo usa texto claro (--menu-fg) y, sin esto, los nombres de las opciones, las cantidades y los Bs se volvían invisibles */
body:has(.menu-hero) .dish-modal .modal-content, body:has(.menu-hero) .cart-drawer, body:has(.menu-hero) .msearch {
    --menu-bg: #fff; --menu-fg: #000; --menu-muted: var(--muted); --menu-line: var(--line);
    --menu-accent: #000; --menu-accent-fg: #fff; --menu-chip: var(--primary-soft); --menu-chip-hover: var(--primary-soft-hover);
    --menu-hover: rgba(0, 0, 0, .02); --menu-photo: #f2f2f2; --menu-title-fg: #000;
    color: #000;
}
/* Precio de arriba al armar el plato: el protagonista (las opciones solo lo muestran si cambia entre ellas) */
.dish__thumb-price { color: #000; font-size: 20px; font-weight: 700; line-height: 1.1; text-align: right; }
.dish__thumb-price .price-bs { font-size: 13px; font-weight: 500; }

/* Ficha del combo en el celular: plato y nombre en una línea, cantidad/precio y quitar debajo
   (antes el nombre del plato quedaba en una columna de una letra); "← Todos los combos" con 44 px de toque */
@media (max-width: 575.98px) {
    .combo-row { flex-wrap: wrap; }
    .combo-row__name { flex-basis: calc(100% - 50px); }
    .combo-row__remove { margin-left: auto; }
}
.panel-back { display: inline-flex; align-items: center; min-height: 44px; }
.dish__note--top { margin: 0 0 16px; }

/* Vista lista: la foto va pegada al lado derecho de la tarjeta, completa (sin recorte) y en su proporción 590x400,
   centrada en alto (en el celular la tarjeta es más alta que la foto y queda aire arriba y abajo) */
html:not([data-menu-view="grid"]) #restaurant-content .strip { grid-template-columns: minmax(0, 1fr) clamp(132px, 42%, 220px); padding-right: 0; overflow: hidden; }
html:not([data-menu-view="grid"]) #restaurant-content .strip figure {
    align-self: center; height: auto; aspect-ratio: 590 / 400; border-radius: 0; margin: calc(-1 * var(--menu-pad, 16px)) 0; }
html:not([data-menu-view="grid"]) #restaurant-content .strip figure img { object-fit: contain; }

/* Menú: los círculos de 36 px (redes, tema, buscar, lista/cuadrícula, redes del pie) siguen viéndose igual
   pero se tocan en 44 px con un área invisible alrededor */
.menu-topbar__social .menu-action, .menu-topbar__end .menu-top-btn, .menu-bar__btn, body:has(.menu-hero) .footer-front .social-links a { position: relative; }
.menu-topbar__social .menu-action::after, .menu-topbar__end .menu-top-btn::after, .menu-bar__btn::after, body:has(.menu-hero) .footer-front .social-links a::after { content: ""; position: absolute; inset: -4px; }

/* Armar el plato en celulares angostos: sin la miniatura y con el nombre en hasta 2 líneas,
   el precio grande de arriba ya no deja el nombre en "Megu…" */
@media (max-width: 399px) {
    .dish__thumb-img { display: none; }
    .dish__thumb-name { display: -webkit-box; font-size: 14px; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .dish__thumb-price { font-size: 18px; }
}

/* Carrito y pago: − / + y Editar / Quitar se ven igual pero se tocan en 44 px (antes 32) */
.cart-qty__btn, .cart-row__links button { position: relative; }
.cart-qty__btn::after { content: ""; position: absolute; inset: -6px; }
.cart-row__links button::after { content: ""; position: absolute; inset: -6px -7px; }
/* Lista en el celular: la tarjeta es más alta que la foto completa, así que la foto llena el lado derecho de borde a borde
   recortando un poco los lados (centrada en el plato) */
@media (max-width: 575px) {
    html:not([data-menu-view="grid"]) #restaurant-content .strip { grid-template-columns: minmax(0, 1fr) 50%; }
    html:not([data-menu-view="grid"]) #restaurant-content .strip figure { align-self: stretch; aspect-ratio: auto; min-height: 100%; }
    html:not([data-menu-view="grid"]) #restaurant-content .strip figure img { object-fit: cover; object-position: center; }
}
/* Fotos de los platos con las esquinas curvas en todas las vistas. En la lista de escritorio la foto (completa) va dentro
   de la tarjeta con su margen, para que sus cuatro esquinas se vean redondeadas */
html:not([data-menu-view="grid"]) #restaurant-content .strip figure, html[data-menu-view="grid"] #restaurant-content .strip figure { overflow: hidden; border-radius: 12px; }
@media (min-width: 576px) {
    html:not([data-menu-view="grid"]) #restaurant-content .strip { padding-right: 16px; }
    html:not([data-menu-view="grid"]) #restaurant-content .strip figure { margin: 0; }
}
/* Lista: descripción en 1 línea con "Ver más" (dish.js lo añade solo si no cabe) */
html:not([data-menu-view="grid"]) #restaurant-content .strip .res_description:not(.is-open) { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
#restaurant-content .strip .res_more { position: relative; z-index: 1; grid-column: 1; justify-self: start; min-height: 32px; margin: -4px 0 0; padding: 0; border: 0; background: none; color: var(--menu-fg); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
html[data-menu-view="grid"] #restaurant-content .strip .res_more { display: none; }
html:not([data-menu-view="grid"]) #restaurant-content .strip:has(.res_more) { grid-template-rows: 1fr auto auto auto auto 1fr; }
html:not([data-menu-view="grid"]) #restaurant-content .strip .res_more { grid-row: 4; }
html:not([data-menu-view="grid"]) #restaurant-content .strip:has(.res_more) > .row { grid-row: 5; }

/* Categorías: se difumina solo el borde donde quedan más píldoras, para que se entienda que se desliza */
#restaurant-content .tabbable.menu-bar .nav-pills {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
#restaurant-content .tabbable.menu-bar .nav-pills.at-start {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
#restaurant-content .tabbable.menu-bar .nav-pills.at-end {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 28px); mask-image: linear-gradient(to right, transparent, #000 28px);
}
#restaurant-content .tabbable.menu-bar .nav-pills.at-start.at-end { -webkit-mask-image: none; mask-image: none; }

/* ---------- Panel: menú lateral más claro (jerarquía, activo e indicador "en vivo") ---------- */
.navbar-vertical .navbar-heading { color: rgba(0, 0, 0, .45); letter-spacing: .1em; }
.navbar-vertical .navbar-nav .nav-link { display: flex; align-items: center; min-height: 44px; margin: 2px .75rem; padding: .55rem .85rem !important; color: rgba(0, 0, 0, .72) !important; font-weight: 500; }
.navbar-vertical .navbar-nav .nav-link > i { color: var(--icon-muted) !important; }
.navbar-vertical .navbar-nav .nav-link.active, .navbar-vertical .navbar-nav .nav-link.active:hover { background: rgba(0, 0, 0, .06); color: #000 !important; font-weight: 600; }
.navbar-vertical .navbar-nav .nav-link.active > i { color: #000 !important; }
.navbar-vertical .navbar-nav .nav-link:focus-visible { outline: 2px solid #000; outline-offset: -2px; }
@media (hover: hover) { .navbar-vertical .navbar-nav .nav-link:hover > i { color: #000 !important; } }
/* Punto de "Pedidos en vivo": pequeño, alineado a la derecha, con el latido de siempre */
.navbar-vertical .nav-link .blob { flex: none; width: 8px; height: 8px; margin: 0 2px 0 auto; background: #e11d48; }
@media (prefers-reduced-motion: reduce) { .navbar-vertical .nav-link .blob { animation: none; } }

/* ---------- Panel sin sombras: separaciones con línea fina en lugar de sombra (el menú público no se toca) ---------- */
.navbar-top, #sidenav-main { box-shadow: none !important; }
.main-content .card, .main-content .card.shadow, .main-content .card.shadow-lg, .dash-kpi, .live-col, .live-finished { box-shadow: var(--ring) !important; }
/* El título ya está en la página (h1): no se repite en la barra de arriba */
body:has(.panel-page-head__title) .navbar-top .h4 { visibility: hidden; }

/* ---------- Panel en el celular: el menú lateral es un cajón con fondo oscuro ---------- */
.sidenav-backdrop { display: none; }
@media (max-width: 767.98px) {
    #sidenav-main { z-index: 1050; }
    #sidenav-main .sidenav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: var(--surface-2); }
    #sidenav-main .sidenav-toggle:focus-visible, #sidenav-main .sidenav-close:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
    #sidenav-collapse-main {
        position: fixed; z-index: 1060; top: 0; bottom: 0; left: 0; right: auto; display: block !important;
        width: min(300px, 86vw); height: 100% !important; margin: 0; padding: 12px 0 24px; opacity: 1;
        overflow-y: auto; overscroll-behavior: contain; border-radius: 0 20px 20px 0; background: #fff; box-shadow: var(--shadow-lg);
        transform: translateX(-105%); visibility: hidden; animation: none !important;
        transition: transform .25s var(--ease), visibility 0s linear .25s;
    }
    #sidenav-collapse-main.show { transform: none; visibility: visible; transition: transform .25s var(--ease); }
    #sidenav-collapse-main .navbar-collapse-header { margin: 0 0 8px; padding: 0 12px 12px 20px; border-color: var(--line); }
    #sidenav-collapse-main .navbar-collapse-header .row { align-items: center; }
    #sidenav-collapse-main .collapse-brand img { height: 32px !important; max-width: 160px !important; }
    #sidenav-collapse-main .sidenav-close { width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); }
    #sidenav-collapse-main .sidenav-close span { top: 21px; left: 13px; width: 18px; }
    #sidenav-collapse-main .navbar-nav { margin: 0; }
    .sidenav-backdrop { display: block !important; position: fixed; inset: 0; z-index: 1055; background: rgba(0, 0, 0, .4); opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility 0s linear .25s; }
    body.sidenav-open .sidenav-backdrop { opacity: 1; visibility: visible; transition: opacity .25s var(--ease); }
    body.sidenav-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { #sidenav-collapse-main, .sidenav-backdrop { transition: none !important; } }

/* ---------- Compartir menú: póster con logo, QR enmarcado y enlace; acciones al lado ---------- */
.share-qr { display: grid; gap: 24px; align-items: start; margin-bottom: 32px; }
@media (min-width: 992px) { .share-qr { grid-template-columns: minmax(300px, 400px) 1fr; gap: 32px; } }
.share-qr__poster { display: flex; flex-direction: column; align-items: center; margin: 0; padding: 32px 24px 28px; border-radius: var(--radius-xl); background: #fff; box-shadow: var(--ring); text-align: center; }
.share-qr__logo { max-width: 200px; max-height: 72px; object-fit: contain; }
.share-qr__name { margin: 0; color: #000; font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.share-qr__code { margin: 24px 0 20px; padding: 20px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); }
.share-qr__code img { display: block; width: 220px; height: 220px; image-rendering: pixelated; }
.share-qr__cta { color: #000; font-size: 17px; font-weight: 600; }
.share-qr__url { margin: 4px 0 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.share-qr__side { display: flex; flex-direction: column; gap: 16px; }
.share-qr__block { padding: 24px; border-radius: var(--radius-xl); box-shadow: var(--ring); }
.share-qr__title { margin: 0 0 12px; color: #000; font-size: 16px; font-weight: 600; }
.share-qr__hint { margin: -4px 0 12px; color: var(--muted); font-size: 14px; }
.share-qr__link { display: flex; gap: 8px; margin-bottom: 12px; }
.share-qr__link .form-control { flex: 1; min-width: 0; height: 44px; background: var(--surface-2); }
.share-qr__link .btn { flex: none; min-width: 96px; height: 44px; margin: 0; }
.share-qr__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.share-qr__actions .btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; }
@media (max-width: 575.98px) {
    .share-qr__block { padding: 20px 16px; }
    .share-qr__actions .btn:not(.btn-link) { flex: 1 1 100%; justify-content: center; }
}