/* * Pixel Food — o painel do restaurante e a tela de entrada. * * Painel: proposta A escolhida pelo Kayo em 19/10/2026, o "mapa do salão", na * família do Tribus — cartão branco sobre fundo cinza, trilha escura de ícones. * As cores são as do restaurante (--t-*, src/themes.ts): a trilha na cor funda * da casa e o item ativo na cor de ação com letra branca, pedido dele. * * A marca do Pixel Food (laranja) aparece só na entrada, onde ainda não se * sabe de que casa é a pessoa. Os tons --pf-* são os mesmos do * public/brand/theme.json, e o teste do tema confere (tests/theme.test.ts). * * Vermelho, verde e âmbar são estado: chamando, deu certo, pediu a conta. * Cheios, com letra branca; nunca viram cor de restaurante. */ @font-face { font-family: "Manrope"; src: url("fonts/manrope.woff2") format("woff2"); font-weight: 200 800; font-display: swap; } @font-face { font-family: "Figtree"; src: url("fonts/figtree.woff2") format("woff2"); font-weight: 300 900; font-display: swap; } @font-face { font-family: "Alfa Slab One"; src: url("fonts/alfa-slab-one.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Archivo Black"; src: url("fonts/archivo-black.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Playfair Display"; src: url("fonts/playfair-display-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; } :root { /* A marca do Pixel Food (theme.json). */ --pf-orange: #fc7a00; /* Letra branca no laranja, sempre (pedido do Kayo, 19/10/2026). */ --pf-on-orange: #ffffff; --pf-ink: #1b2230; --pf-soft: #5d6676; --pf-subtle: #f2f3f5; --pf-card: #ffffff; /* Estado. */ --ok: #2b8a3e; --bad: #e03131; --bad-deep: #c92a2a; --bill: #b86400; /* Neutros do painel. */ --ink: #1d2739; --soft: #6d7789; --line: #e9edf2; --sunken: #f4f6f9; --card: #ffffff; /* Sem restaurante (entrada), a paleta Grafite. */ --t-primary: #2a2f36; --t-deep: #171a1f; --t-action: #c55a00; --t-hi: #fcb045; --t-hi-ink: #2b1700; --t-bg: #ffffff; --t-sand: #f1f2f4; --t-ink: #1b1f24; --t-soft: #5f6670; --t-line: #e3e6ea; --t-panel: #e8eaed; --t-logo-bg: #fc7a00; --t-logo-fg: #1b1f24; --t-display: "Figtree", sans-serif; --t-dw: 800; --t-ds: normal; } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { margin: 0; } body { font-family: "Manrope", "Segoe UI", system-ui, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; } h1, h2, h3, p { margin: 0; } a { color: inherit; } button { font: inherit; color: inherit; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible, select:focus-visible { outline: 3px solid var(--t-action); outline-offset: 2px; } svg.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; } .tnum { font-variant-numeric: tabular-nums; } .disp { font-family: var(--t-display); font-weight: var(--t-dw); font-style: var(--t-ds); } /* Aviso cheio, letra branca. */ .notice { border-radius: 12px; padding: 11px 14px; font-size: 13.5px; font-weight: 700; color: #fff; } .notice-ok { background: var(--ok); } .notice-error { background: var(--bad); } /* ------------------------------------------------------------ entrada */ .e-page { min-height: 100vh; background: #e8eaed; display: grid; place-items: center; padding: 24px 16px; } .e-frame { width: min(980px, 100%); min-height: 600px; background: var(--pf-card); border-radius: 30px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; box-shadow: 0 1px 2px rgb(22 32 50 / 5%), 0 18px 50px rgb(22 32 50 / 12%); } .e-side { padding: 44px 48px; display: flex; flex-direction: column; gap: 16px; } .e-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; color: var(--pf-ink); } .e-mark { width: 38px; height: 38px; border-radius: 11px; background: var(--pf-orange); display: grid; place-items: center; } .e-mark svg { width: 24px; height: 24px; fill: #fff; } .e-title { font-size: 30px; line-height: 1.12; font-weight: 500; color: var(--pf-ink); margin-top: 28px; text-wrap: balance; } .e-title b { font-weight: 800; } .e-lead { color: var(--pf-soft); font-size: 15px; line-height: 1.5; } .e-form { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; } .e-button { display: block; width: 100%; text-align: center; text-decoration: none; border: 0; border-radius: 14px; padding: 14px 18px; font-weight: 800; font-size: 15px; background: var(--pf-orange); color: var(--pf-on-orange); margin-top: 4px; } .e-button.e-flat { background: var(--pf-subtle); color: var(--pf-ink); } .e-side form + form, .e-side a + form { margin-top: 0; } .e-foot { margin-top: auto; padding-top: 24px; font-size: 12.5px; color: var(--pf-soft); line-height: 1.6; } .e-foot b { color: var(--pf-ink); } .e-art { position: relative; background: #1b1f24; overflow: hidden; } .e-p { position: absolute; width: 520px; height: 470px; right: -120px; bottom: -80px; fill: var(--pf-orange); opacity: .95; } .e-card { position: absolute; background: #fff; border-radius: 18px; padding: 14px 16px; width: 250px; box-shadow: 0 18px 40px rgb(0 0 0 / .3); display: flex; flex-direction: column; gap: 4px; } .e-card small { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #c55a00; } .e-card b { font-size: 14.5px; line-height: 1.35; color: var(--pf-ink); } .e-card-1 { left: 36px; top: 54px; } .e-card-2 { left: 70px; top: 170px; } .e-card-3 { left: 30px; top: 286px; } @media (max-width: 820px) { .e-frame { grid-template-columns: minmax(0, 1fr); min-height: 0; } .e-art { display: none; } .e-side { padding: 32px 24px; } } /* O rótulo mora dentro do campo e sobe quando se digita. */ .field-float { position: relative; } .field-float input { width: 100%; height: 58px; border: 1.5px solid #dfe3e9; border-radius: 14px; padding: 22px 16px 6px; font-size: 15.5px; background: #fff; outline: 0; } .field-float input:focus { border-color: var(--pf-orange); } .field-float label { position: absolute; left: 17px; top: 19px; font-size: 15px; color: var(--pf-soft); pointer-events: none; transition: top .12s ease, font-size .12s ease; } .field-float input:focus + label, .field-float input:not(:placeholder-shown) + label { top: 8px; font-size: 11.5px; font-weight: 700; } .field-float .eye { position: absolute; right: 8px; top: 9px; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--pf-soft); display: grid; place-items: center; } .field-float input[type="password"]::-ms-reveal { display: none; } .field-hint { font-size: 12.5px; color: var(--soft); } .field-error { font-size: 12.5px; color: var(--bad); font-weight: 700; } /* ------------------------------------------------------------- painel */ .p-page { background: var(--t-panel); min-height: 100vh; } .p { padding: 14px; height: 100vh; display: flex; } .p-card { flex: 1; min-width: 0; background: var(--card); border-radius: 26px; display: flex; overflow: hidden; position: relative; box-shadow: 0 1px 2px rgb(22 32 50 / 5%), 0 10px 30px rgb(22 32 50 / 7%); } .p-rail { width: 92px; background: var(--t-deep); color: rgb(255 255 255 / .74); display: flex; flex-direction: column; align-items: center; padding: 16px 0; gap: 3px; flex: none; overflow-y: auto; scrollbar-width: none; } .p-rail::-webkit-scrollbar { display: none; } .logo { width: 48px; height: 48px; border-radius: 50%; background: var(--t-logo-bg); color: var(--t-logo-fg); display: grid; place-items: center; flex: none; overflow: hidden; } .logo svg { width: 58%; height: 58%; fill: currentColor; } .logo b { font: var(--t-ds) var(--t-dw) 16px/1 var(--t-display); } .logo.has-img { background: #fff; } .logo img { width: 100%; height: 100%; object-fit: cover; display: block; } .p-rail > .logo { margin-bottom: 12px; box-shadow: 0 0 0 3px rgb(255 255 255 / .14); } .p-nav { border: 0; background: transparent; color: inherit; text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 700 10.5px "Manrope", sans-serif; padding: 9px 2px; width: 76px; border-radius: 15px; position: relative; flex: none; text-align: center; } .p-nav:hover { color: #fff; background: rgb(255 255 255 / .08); } .p-nav.on { background: var(--t-action); color: #fff; } /* No item selecionado o aviso inverte: bola branca, número na cor da casa. */ .p-nav.on .count { background: #fff; color: var(--t-action); } .p-nav .count { position: absolute; top: 4px; right: 10px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--bad); color: #fff; font: 800 10.5px/18px "Manrope", sans-serif; padding: 0 5px; } .p-rail .spacer { flex: 1; min-height: 8px; } .p-out { margin: 0; } .p-made { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 700 9px "Manrope", sans-serif; color: rgb(255 255 255 / .55); letter-spacing: .04em; margin-top: 6px; } .p-made svg { width: 18px; height: 18px; fill: var(--pf-orange); } .p-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } /* A aba no meio da borda da trilha, na cor do próprio menu, como se saísse dele (opção A, escolhida pelo Kayo): recolhe o menu para só os ícones e expande de volta. Tudo corre junto e devagar, sem pulo: a faixa estreita, os nomes somem antes (e voltam depois, na volta), a logo encolhe e a aba anda com a borda. Com mouse, a aba só aparece com ele em cima do menu ou dela; em tela de toque (o tablet do salão) não há "em cima", e ela fica sempre. */ .p-rail-toggle { position: absolute; top: 50%; left: 92px; z-index: 5; transform: translateY(-50%); width: 14px; height: 44px; padding: 0; border: 0; border-radius: 0 9px 9px 0; background: var(--t-deep); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: left .32s cubic-bezier(.4, 0, .2, 1), transform .2s ease, opacity .2s ease, background-color .15s; } .p-rail-toggle:hover { background: var(--t-primary); } .p-rail-toggle svg.i { width: 14px; height: 14px; stroke-width: 2.6; transform: rotate(-90deg); } @media (hover: hover) { .p-rail-toggle { opacity: 0; transform: translate(-6px, -50%); } .p-rail:hover ~ .p-rail-toggle, .p-rail-toggle:hover, .p-rail-toggle:focus-visible { opacity: 1; transform: translateY(-50%); } } .p-rail, .p-nav, .p-rail > .logo, .p-rail-toggle svg.i, .p-nav .count { transition: width .32s cubic-bezier(.4, 0, .2, 1), height .32s cubic-bezier(.4, 0, .2, 1), gap .32s cubic-bezier(.4, 0, .2, 1), left .32s cubic-bezier(.4, 0, .2, 1), right .32s cubic-bezier(.4, 0, .2, 1), transform .32s cubic-bezier(.4, 0, .2, 1), background-color .15s; } /* O nome se corta dentro dele mesmo, e não o item inteiro: a bola do aviso passa da quina arredondada do item e não pode sair cortada. */ .p-nav .lbl, .p-made .lbl { display: block; max-width: 100%; max-height: 16px; overflow: hidden; white-space: nowrap; transition: opacity .2s ease .14s, max-height .32s cubic-bezier(.4, 0, .2, 1); } @media (min-width: 861px) { .rail-closed .p-rail { width: 64px; } .rail-closed .p-nav { width: 48px; gap: 0; } .rail-closed .p-nav .lbl, .rail-closed .p-made .lbl { opacity: 0; max-height: 0; transition: opacity .12s ease, max-height .32s cubic-bezier(.4, 0, .2, 1); } .rail-closed .p-nav .count { right: 1px; top: 1px; } .rail-closed .p-rail > .logo { width: 40px; height: 40px; } .rail-closed .p-rail-toggle { left: 64px; } .rail-closed .p-rail-toggle svg.i { transform: rotate(90deg); } } .p-band { background: var(--bill); color: #fff; font-weight: 700; font-size: 13.5px; padding: 10px 22px; } .p-band a { color: #fff; font-weight: 800; } .p-head { display: flex; align-items: center; gap: 18px; padding: 16px 22px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .p-head h1 { font-size: 21px; font-weight: 800; } .p-head p { font-size: 12.5px; color: var(--soft); margin-top: 2px; } .p-stats { display: flex; gap: 8px; flex-wrap: wrap; } .p-stat { background: var(--sunken); border-radius: 13px; padding: 7px 13px; } .p-stat span { display: block; font-size: 11px; font-weight: 600; color: var(--soft); } .p-stat b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; } .p-stat.red { background: var(--bad); color: #fff; } .p-stat.red span { color: #fff; } .p-user { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; } .p-user small { display: block; font-weight: 500; color: var(--soft); font-size: 11.5px; } .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--t-deep); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 12.5px; flex: none; } .p-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; position: relative; } .p-body > .notice { margin: 14px 22px 0; } .p-pad { padding: 16px 22px 26px; display: flex; flex-direction: column; gap: 14px; } .p-pad.narrow { max-width: 760px; } .p-btn { border: 0; border-radius: 10px; padding: 8px 12px; font: 800 12.5px "Manrope", sans-serif; background: var(--t-primary); color: #fff; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .p-btn svg.i { width: 16px; height: 16px; } .p-btn.ghost { background: var(--sunken); color: var(--ink); } .p-btn.big { padding: 11px 16px; font-size: 13.5px; border-radius: 12px; } .p-btn.danger { background: var(--bad); color: #fff; } .p-btn.danger-text { color: var(--bad-deep); } .p-btn:disabled { opacity: .6; cursor: default; } .icon-btn { width: 34px; height: 34px; border-radius: 10px; border: 0; background: var(--sunken); color: var(--ink); display: inline-grid; place-items: center; text-decoration: none; flex: none; } .icon-btn svg.i { width: 17px; height: 17px; } .p-h4 { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); font-weight: 800; margin-top: 4px; } .p-title { font-size: 14px; font-weight: 800; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .p-title small { font-size: 11.5px; font-weight: 600; color: var(--soft); } .p-soft { color: var(--soft); font-size: 12.5px; } .p-note { background: var(--sunken); border-radius: 14px; padding: 12px 14px; font-size: 13px; line-height: 1.5; color: #3b4556; } .p-empty { background: #fff; border: 1px dashed #d8dee6; border-radius: 16px; padding: 16px; text-align: center; font-size: 13px; color: var(--soft); font-weight: 600; } .p-empty a { font-weight: 800; } .pill { display: inline-block; font-size: 10.5px; font-weight: 800; border-radius: 6px; padding: 2px 7px; background: var(--t-primary); color: #fff; vertical-align: 2px; margin-left: 4px; } .pill.soft { background: var(--sunken); color: var(--soft); } .pill.yes { background: var(--ok); color: #fff; } .pill.no { background: var(--sunken); color: var(--soft); } .p-row-end { display: flex; justify-content: flex-end; } /* Salão */ .p-salon { display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: 100%; } .p-floor { padding: 16px 22px 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0; } .p-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; font-weight: 600; color: var(--soft); } .p-legend span { display: flex; align-items: center; gap: 6px; } .p-legend i { width: 12px; height: 12px; border-radius: 4px; display: block; } .lg-free { border: 1.5px solid #dfe5ec; } .lg-busy { background: #e6ebf1; } .lg-call { background: var(--bad); } .lg-bill { background: var(--bill); } .lg-new { background: var(--t-primary); } .p-tables { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; } .tb { min-height: 104px; border-radius: 16px; border: 1.5px solid #e3e8ef; padding: 10px 12px 12px; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; background: #fff; text-decoration: none; color: var(--ink); } .tb:hover { border-color: #c6cfdb; } .tb-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .tb b { font-size: 25px; font-weight: 800; line-height: 1; } .tb-top svg.i { color: var(--soft); } .tb-st { font-size: 14px; font-weight: 700; color: var(--soft); line-height: 1.25; } .tb.busy { background: #f1f4f8; border-color: #f1f4f8; } .tb.call { background: var(--bad); border-color: var(--bad); color: #fff; } .tb.bill { background: var(--bill); border-color: var(--bill); color: #fff; } .tb.call .tb-st, .tb.bill .tb-st, .tb.call svg.i, .tb.bill svg.i { color: #fff; } .tb .flag { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: var(--t-primary); color: #fff; padding: 3px 7px; border-radius: 6px; } .p-side { background: #f7f8fa; border-left: 1px solid var(--line); padding: 16px 16px 22px; display: flex; flex-direction: column; gap: 10px; } .p-side > .p-title:not(:first-child) { margin-top: 6px; } .q { background: #fff; border-radius: 16px; padding: 11px 12px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 11px; align-items: center; box-shadow: 0 1px 2px rgb(22 32 50 / 6%); } .q-num { width: 42px; height: 42px; border-radius: 12px; background: #f1f4f8; display: grid; place-items: center; font-weight: 800; font-size: 17px; } .q > div:not(.q-time) b { font-size: 13.5px; display: block; } .q > div:not(.q-time) span { font-size: 11.5px; color: var(--soft); font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .q-time { font-weight: 800; font-size: 13px; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; } .q-time form { margin: 0; } .q.crit { background: var(--bad); color: #fff; } .q.crit .q-num { background: #fff; color: var(--bad); } .q.crit > div span { color: #fff; } .q.crit .p-btn { background: #fff; color: var(--bad-deep); } .q.billq .q-num { background: var(--bill); color: #fff; } .out { display: flex; flex-direction: column; background: #fff; border-radius: 16px; padding: 4px 12px; box-shadow: 0 1px 2px rgb(22 32 50 / 6%); } .out-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 13px; font-weight: 600; margin: 0; } .out-row + .out-row { border-top: 1px solid var(--line); } .out-row em, .mi-state em { font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--bad); text-transform: uppercase; letter-spacing: .04em; } .out-row .right { display: flex; align-items: center; gap: 8px; } .switch { width: 40px; height: 23px; border-radius: 999px; background: #d5dbe4; position: relative; flex: none; border: 0; padding: 0; } .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: left .15s ease; } .switch.on { background: var(--bad); } .switch.on::after { left: 20px; } /* Gaveta da mesa */ .p-drawer-bg { position: absolute; inset: 0; background: rgb(20 26 36 / .28); z-index: 5; } .p-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(400px, 100%); background: #fff; z-index: 6; box-shadow: -10px 0 30px rgb(20 26 36 / .15); display: flex; flex-direction: column; } .p-drawer-head { padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; } .p-drawer-head .q-num { width: 50px; height: 50px; font-size: 21px; background: var(--t-primary); color: #fff; } .p-drawer-head h2 { font-size: 18px; font-weight: 800; } .p-drawer-head p { font-size: 12.5px; color: var(--soft); } .p-drawer-x { margin-left: auto; width: 36px; height: 36px; border-radius: 10px; background: #f1f4f8; display: grid; place-items: center; } .p-drawer-body { flex: 1; overflow-y: auto; padding: 14px 20px; display: flex; flex-direction: column; gap: 10px; } .p-drawer-foot { padding: 14px 20px 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; } .p-drawer-foot .p-btn { justify-content: center; } .p-line { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; padding: 7px 0; border-bottom: 1px solid #f1f4f8; font-variant-numeric: tabular-nums; } .p-line.total { font-weight: 800; font-size: 16px; border: 0; } .p-confirm { background: #fff3f3; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; font-weight: 600; } .p-confirm div { display: flex; gap: 8px; } .p-confirm form { margin: 0; flex: 1; display: flex; } .p-confirm .p-btn { flex: 1; justify-content: center; } /* Pedidos */ .p-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 16px 22px 22px; align-items: start; } .p-col { background: var(--sunken); border-radius: 18px; padding: 10px; display: flex; flex-direction: column; gap: 9px; min-width: 0; } .p-col h2 { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 800; padding: 4px 4px 2px; } .p-col h2 span { background: #fff; border-radius: 8px; padding: 2px 9px; font-size: 12px; } .tk { background: #fff; border-radius: 14px; padding: 11px 12px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 1px 2px rgb(22 32 50 / 6%); } .tk-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .tk-head b { font-size: 15.5px; font-weight: 800; } .tk-head span { font-size: 12.5px; font-weight: 800; color: var(--soft); } .tk ul { margin: 0; padding: 0; list-style: none; font-size: 12.5px; line-height: 1.45; color: #3b4556; } .tk ul small { color: #9a6608; font-weight: 700; } .tk-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--soft); font-weight: 700; flex-wrap: wrap; } .tk-actions { display: flex; gap: 6px; } .tk-actions form { margin: 0; } .chip-src { align-self: flex-start; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; border-radius: 6px; padding: 3px 7px; background: var(--ok); color: #fff; } .chip-src.staff { background: var(--t-primary); } .tk.late .tk-head span { color: var(--bad); } /* Cardápio, mesas e equipe: linhas de cadastro */ .p-mgroup { display: flex; flex-direction: column; gap: 8px; } .mg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .mi { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto auto auto; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 8px 12px 8px 8px; } .mi-ph { width: 54px; height: 54px; border-radius: 12px; overflow: hidden; background: var(--t-sand); display: grid; place-items: center; color: var(--t-primary); font: 800 15px "Manrope", sans-serif; } .mi-ph img { width: 100%; height: 100%; object-fit: cover; display: block; } .mi-ph svg.i { width: 22px; height: 22px; } .mi-text { min-width: 0; } .mi-text b { font-size: 14px; display: block; } .mi-text > span { font-size: 12px; color: var(--soft); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mi .money { font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; } .mi.off { background: #fff6f6; border-color: #ffd8d8; } .mi.off .mi-ph img { filter: grayscale(1); opacity: .55; } .mi.archived { background: var(--sunken); } .mi.archived .mi-ph img { filter: grayscale(1); opacity: .5; } .mi-state { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; justify-content: flex-end; margin: 0; } .mi-state em { color: var(--ok); } .mi.off .mi-state em { color: var(--bad); } .mi-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; } .mi-actions form { margin: 0; } .avatar-ph { border-radius: 50%; background: var(--t-sand); color: var(--t-deep); } .archived-zone { margin-top: 10px; padding-top: 14px; border-top: 1px dashed #d8dee6; } .qty { display: inline-flex; align-items: center; gap: 4px; } /* O pedido lançado pelo garçom: a barra de cima fica presa ao rolar (busca, observação, total e o botão), e as categorias ficam lado a lado quando a tela cabe. */ .order { display: flex; flex-direction: column; gap: 14px; padding: 0 22px 26px; } .order-bar { position: sticky; top: 0; z-index: 3; background: #fff; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); } .order-search { flex: 1 1 280px; display: flex; align-items: center; gap: 8px; border: 1.5px solid #dfe3e9; border-radius: 12px; padding: 0 12px; background: #fff; color: var(--soft); } .order-search:focus-within { border-color: var(--t-primary); } .order-search input { border: 0; outline: 0; flex: 1; min-width: 0; padding: 11px 0; font-size: 15px; background: transparent; color: var(--ink); } .order-note { flex: 1 1 220px; border: 1.5px solid #dfe3e9; border-radius: 12px; padding: 11px 13px; font-size: 14px; outline: 0; } .order-note:focus { border-color: var(--t-primary); } .order-sum { font-weight: 800; font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; } .order-sum.empty { color: var(--soft); font-weight: 600; } /* Colunas de jornal, e não grade: categoria curta não deixa buraco ao lado da comprida. */ .order-cats { columns: 340px; column-gap: 16px; } .order-cat { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0 0 18px; break-inside: avoid; } .oi { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 7px 10px 7px 7px; } .oi .mi-ph { width: 48px; height: 48px; } .oi-text { min-width: 0; } .oi-text b { display: block; font-size: 13.5px; } .oi-text span { font-size: 12px; color: var(--soft); font-variant-numeric: tabular-nums; } .oi.picked { border-color: var(--t-primary); box-shadow: 0 0 0 1px var(--t-primary) inset; } .oi.off { background: #fff6f6; border-color: #ffd8d8; } .oi.off .mi-ph img { filter: grayscale(1); opacity: .55; } .oi.hide, .order-cat.hide { display: none; } .qty input { width: 44px; height: 34px; border: 1.5px solid #dfe3e9; border-radius: 10px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; } /* Formulários */ .p-form { display: flex; flex-direction: column; gap: 14px; } .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .field label, .field-label-static { font-size: 12.5px; font-weight: 800; color: var(--ink); } .field input, .field textarea, .field select, .p-inline input, .p-inline select, .copy-line input, .p-search input { width: 100%; border: 1.5px solid #dfe3e9; border-radius: 12px; padding: 11px 13px; font-size: 14.5px; background: #fff; outline: 0; } .field input:focus, .field textarea:focus, .p-inline input:focus, .p-search input:focus { border-color: var(--t-primary); } .field textarea { resize: vertical; min-height: 80px; line-height: 1.45; } .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .field-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .form-actions { display: flex; gap: 10px; flex-wrap: wrap; } .form-actions.sticky { position: sticky; bottom: 0; background: #fff; padding: 12px 0; border-top: 1px solid var(--line); } .p-inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; background: var(--sunken); border-radius: 16px; padding: 10px; margin: 0; } .p-inline input, .p-inline select { flex: 1 1 160px; width: auto; padding: 9px 12px; font-size: 13.5px; } .p-search { margin: 0; } .p-search label { display: flex; align-items: center; gap: 8px; max-width: 420px; border: 1.5px solid #dfe3e9; border-radius: 12px; padding: 0 12px; background: #fff; color: var(--soft); } .p-search input { border: 0; padding: 10px 0; } .p-search input::-webkit-search-cancel-button { display: none; } .check-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; position: relative; font-size: 13px; color: var(--soft); cursor: pointer; } .check-row b { display: block; color: var(--ink); font-size: 13.5px; } .check-row input { position: absolute; left: 0; top: 0; width: 24px; height: 24px; opacity: 0; margin: 0; cursor: pointer; } .check-row i { width: 24px; height: 24px; border-radius: 7px; border: 2px solid #d5dbe4; display: grid; place-items: center; color: #fff; } .check-row i svg { width: 15px; height: 15px; stroke-width: 3; opacity: 0; } .check-row input:checked + i { background: var(--t-primary); border-color: var(--t-primary); } .check-row input:checked + i svg { opacity: 1; } .check-row input:focus-visible + i { outline: 3px solid var(--t-action); outline-offset: 2px; } .check-row.slim { align-items: center; margin-top: 4px; } .p-danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid #ffd8d8; background: #fff8f8; border-radius: 16px; padding: 14px 16px; margin: 6px 0 0; } .p-danger-zone.flat { margin: 0; } .p-danger-zone b { display: block; font-size: 13.5px; } .p-danger-zone span { font-size: 12.5px; color: var(--soft); } .p-box { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; } .p-created { background: var(--ok); color: #fff; border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; } .p-created code { background: #fff; color: var(--ink); border-radius: 8px; padding: 3px 8px; font-size: 15px; font-weight: 800; letter-spacing: .04em; } .p-created .p-btn { vertical-align: middle; } .copy-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .copy-line input { flex: 1 1 260px; width: auto; background: var(--sunken); font-variant-numeric: tabular-nums; } .p-links { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; } .p-links b { display: block; font-size: 14px; } .p-links > div > span { font-size: 12.5px; color: var(--soft); } .p-links .copy-line { flex: 1 1 380px; } /* Área de soltar a foto: o campo de arquivo de verdade fica por cima, transparente, e é ele que o formulário envia. */ .drop { position: relative; display: flex; align-items: center; gap: 14px; border: 2px dashed #d5dbe4; border-radius: 16px; padding: 14px; background: #fafbfc; cursor: pointer; min-height: 86px; } .drop.over { border-color: var(--t-primary); background: #f3f6f9; } .drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; } .drop-current { width: 80px; height: 80px; border-radius: 12px; object-fit: cover; flex: none; } .drop-current.round { border-radius: 50%; width: 64px; height: 64px; } .drop-current.wide { width: 160px; height: 90px; } .drop-text { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--soft); } .drop-text b { color: var(--ink); font-size: 14px; } .drop-text svg.i { color: var(--t-primary); } .drop.small { min-height: 72px; } /* Escolher a cara da casa */ .picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .pick { position: relative; cursor: pointer; } .pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .pick-card { display: flex; flex-direction: column; gap: 8px; border: 2px solid var(--line); border-radius: 16px; padding: 12px; height: 100%; background: #fff; } .pick input:checked + .pick-card { border-color: var(--t-action); box-shadow: 0 0 0 2px var(--t-action) inset; } .pick input:focus-visible + .pick-card { outline: 3px solid var(--t-action); outline-offset: 2px; } .pick-card b { font-size: 13px; } .swatches { display: flex; gap: 4px; } .swatches i { width: 26px; height: 26px; border-radius: 8px; display: block; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06); } .pick-button { color: #fff; font-weight: 800; font-size: 12px; border-radius: 9px; padding: 7px 10px; text-align: center; } .font-sample { font-size: 19px; line-height: 1.1; color: var(--ink); min-height: 42px; display: flex; align-items: center; } .pick.small .pick-card { align-items: center; text-align: center; } .picks:has(.pick.small) { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } /* Mesas e QR */ .p-qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .qr { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; } .qr.wide { flex-direction: row; text-align: left; gap: 16px; } .qr-box { width: 112px; height: 112px; display: grid; place-items: center; } .qr-box svg { width: 100%; height: 100%; display: block; } .qr b { font-size: 15px; } .qr-actions { display: flex; gap: 6px; margin-top: 2px; } /* Avaliações e relatórios */ .p-rev-top { display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr); gap: 14px; } .p-big { font-size: 40px; font-weight: 800; line-height: 1; } .p-stars { display: inline-flex; gap: 2px; color: var(--t-action); } .p-stars svg { width: 16px; height: 16px; fill: currentColor; stroke: none; } .p-stars svg.off { color: #d5dbe4; } .bar-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 34px; gap: 10px; align-items: center; font-size: 12px; font-weight: 700; color: var(--soft); } .bar-row > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bar-row > span:last-child { text-align: right; font-variant-numeric: tabular-nums; } .bar { height: 8px; border-radius: 99px; background: #eef1f5; overflow: hidden; } .bar i { display: block; height: 100%; border-radius: 99px; background: var(--t-primary); } .rv { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 7px; } .rv-head { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; flex-wrap: wrap; } .rv-head span { color: var(--soft); font-weight: 600; } .rv p { font-size: 13.5px; line-height: 1.5; color: #2b3445; } .rv-tags { display: flex; gap: 6px; flex-wrap: wrap; } .rv-tags span { font-size: 11px; font-weight: 700; background: #f1f4f8; border-radius: 6px; padding: 3px 8px; color: #3b4556; } .gs { display: grid; grid-template-columns: 40px minmax(0, 1.4fr) minmax(0, 1fr) 70px 110px 80px; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 10px 14px; font-size: 13px; } .gs.head { background: transparent; border: 0; padding-block: 0; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); } .gs b { display: block; font-size: 14px; } .gs small { color: var(--soft); font-size: 12px; } .gs .avatar { width: 40px; height: 40px; background: var(--t-sand); color: var(--t-deep); } .p-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .kpi { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; } .kpi span { display: block; font-size: 12px; font-weight: 600; color: var(--soft); } .kpi b { display: block; font-size: 24px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; } .kpi small { font-size: 12px; color: var(--soft); font-weight: 600; } .p-two { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; } .chart svg { width: 100%; height: auto; display: block; } .ch-grid { stroke: #e8ecf1; stroke-width: 1; } .ch-label { font: 600 11px "Manrope", sans-serif; fill: var(--soft); } .ch-bar { fill: var(--t-primary); } .ch-now { fill: var(--t-action); } /* Lista que substitui a do