/* Cores extraídas dos logos fornecidos. Point Burguer: marrom, caramelo e ouro.
   Point na Brasa: carvão, chama e amarelo. */
:root {
    --tf-tomate: #6B1D05;
    --tf-tomate-escuro: #591E0E;
    --tf-tomate-profundo: #310C06;
    --tf-forno: #F5A527;
    --tf-manteiga: #EFD5A5;
    --tf-manteiga-claro: #FFF0D1;
    --tf-creme: #FDFCFB;
    --tf-papel: #FFFFFF;
    --tf-marrom: #310C06;
    --tf-marrom-suave: #79553D;
    --tf-borda: #E1A361;
    --tf-borda-suave: #EBD8C1;
    --tf-sombra: 49 12 6;
    --pizza-molho-claro: #A65113;
    --pizza-massa-escura: #A65113;
    --pizza-massa-torrada: #6B1D05;
    --brasa-carvao: #1B0B09;
    --brasa-marrom: #591E0E;
    --brasa-chama: #E95F0A;
    --brasa-ouro: #F39C0D;
    --brasa-amarelo: #FAD713;
    --bs-link-color: #6B1D05;
    --bs-link-color-rgb: 107, 29, 5;
    --bs-link-hover-color: #A65113;
    --bs-link-hover-color-rgb: 166, 81, 19;
}

body, .bg-massa { background: var(--tf-creme); }
.tf-sidebar { background: linear-gradient(180deg, #310C06 0%, #6B1D05 72%, #591E0E 100%); }
.tf-sidebar-brand { min-height: 112px; }
.tf-sidebar-brand .point-brand-lockup { gap: 8px; }
.tf-sidebar-brand .point-brand-lockup img { width: 72px; height: 72px; max-height: none; object-fit: cover; border-radius: 13px; background: #fff; border: 2px solid rgb(255 255 255 / .5); }
.tf-nav-heading { color: #F5A527; }
.tf-nav-link.active, .tf-nav-link[aria-current="page"] { color: #6B1D05; box-shadow: inset 4px 0 #F5A527; }
.tf-mobile-bar strong { color: #6B1D05; font-size: 1.02rem; }
.tf-mobile-bar strong span { color: #E95F0A; }

.btn-pizza { background: #6B1D05; box-shadow: 0 4px 0 #310C06, 0 8px 18px rgb(107 29 5 / .2); }
.btn-pizza:hover, .btn-pizza:focus-visible { background: #A65113; box-shadow: 0 5px 0 #6B1D05, 0 12px 22px rgb(107 29 5 / .25); }
.btn-pizza:active { background: #6B1D05 !important; box-shadow: 0 1px 0 #310C06; }
.btn-massa { background: #F5A527; color: #310C06; box-shadow: 0 4px 0 #A65113; }
.btn-massa:hover { background: #E1A361; color: #310C06; }
.btn-pizza-outline { color: #6B1D05; border-color: #6B1D05; }
.btn-pizza-outline:hover { background: #6B1D05; border-color: #6B1D05; }

/* O style.css base põe overflow:hidden no body desta tela, o que trava a rolagem
   no celular (login, instalação e a página do celular). "clip" só corta as faixas
   decorativas que passam da lateral, sem impedir de rolar para baixo. */
.tela-marca { background: linear-gradient(145deg, #FFF0D1, #FDFCFB 58%, #EFD5A5); overflow: visible; overflow-x: clip; }
.faixas span { background: linear-gradient(135deg, #F5A527, #E95F0A); opacity: .22; }
.login-card { border-top-color: #6B1D05; }
.point-login-logos { display: flex; justify-content: center; gap: 12px; }
.point-login-logos img { display: block; width: min(45%, 162px); aspect-ratio: 1; object-fit: contain; border-radius: 18px; background: #fff; box-shadow: 0 8px 22px rgb(49 12 6 / .12); }
.slogan-mao { font-family: var(--tf-fonte); font-size: 1.15rem; }

.point-brand-switch { display: flex; gap: 10px; margin-bottom: 14px; }
.point-brand-switch button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid #EBD8C1; background: #fff; color: #6B1D05; border-radius: 14px; padding: 10px; font-weight: 900; }
.point-brand-switch button[data-brand="point_na_brasa"] { color: #591E0E; }
.point-brand-switch button.active { border-color: #F5A527; background: #FFF0D1; }
.point-brand-switch button[data-brand="point_na_brasa"].active { border-color: #E95F0A; background: #FFF0DE; }
.point-brand-switch img { width: 34px; height: 34px; object-fit: cover; border-radius: 7px; }
.point-categoria-brand { display: block; font-size: .65rem; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.pdv-item { border-left: 5px solid #A65113; }
.pdv-item[data-linha="caseiro"] { border-left-color: #A65113; }
.pdv-item[data-linha="industrial"] { border-left-color: #F5A527; }
.pdv-item[data-linha="brasa"] { border-left-color: #E95F0A; }
.pdv-item[data-linha="pastel"] { border-left-color: #E1A361; }
.pdv-item[data-linha="bebida"] { border-left-color: #79553D; }
.point-item-description { display: block; font-size: .73rem; font-weight: 600; color: #79553D; line-height: 1.25; margin-top: 4px; }
.point-line-label { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: .7rem; font-weight: 900; line-height: 1.5; white-space: nowrap; }
.point-line-label.linha-brasa { background: #FFF0DE; color: #9C260B; border: 1px solid #E95F0A; }
.point-line-label.linha-caseiro { background: #F6E5D4; color: #6B1D05; border: 1px solid #A65113; }
.point-line-label.linha-industrial { background: #FFF0D1; color: #6B1D05; border: 1px solid #F5A527; }
.point-line-label.linha-pastel { background: #F9EDD9; color: #6B1D05; border: 1px solid #E1A361; }
.point-line-label.linha-bebida { background: #F1ECE7; color: #591E0E; border: 1px solid #79553D; }

.fila-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.fila-tabs a { padding: 9px 13px; border-radius: 10px; color: #591E0E; font-weight: 800; text-decoration: none; background: #fff; border: 1px solid #EBD8C1; }
.fila-tabs a.active { background: #6B1D05; color: #fff; border-color: #6B1D05; }
.fila-card { height: 100%; border: 1px solid #EBD8C1; border-left: 6px solid #79553D; border-radius: 16px; background: #fff; padding: 16px; box-shadow: 0 8px 20px rgb(49 12 6 / .07); }
.fila-card.linha-brasa { border-left-color: #E95F0A; }
.fila-card.linha-caseiro { border-left-color: #A65113; }
.fila-card.linha-industrial { border-left-color: #F5A527; }
.fila-card.linha-misto { border-left-color: #79553D; }
.fila-card .fila-item { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; padding: 8px 0; border-top: 1px solid #F1E9DF; }
.fila-card .fila-item:first-child { border-top: 0; }
.fila-card .fila-item-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fila-card .fila-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.fila-card .fila-actions form { flex: 1; }
.fila-card .fila-actions button { width: 100%; }
.fila-summary { border-radius: 12px; background: #FFF0D1; padding: 10px 12px; }

@media (max-width: 640px) {
    .point-brand-switch { flex-direction: column; }
    .tf-sidebar-brand .point-brand-lockup img { width: 64px; height: 64px; }
}

/* ---------- Bloco da conta (ADM) num lugar só, recolhível ---------- */
.tf-conta { flex: none; }
.tf-conta > summary { list-style: none; cursor: pointer; border-radius: 11px; padding: 8px 11px; }
.tf-conta > summary::-webkit-details-marker { display: none; }
.tf-conta > summary:hover, .tf-conta > summary:focus-visible { background: rgb(255 255 255 / .12); }
.tf-conta .tf-user-details { flex: 1; }
.tf-conta-seta { width: 16px; height: 16px; transition: transform .16s; }
.tf-conta:not([open]) .tf-conta-seta { transform: rotate(180deg); }
.tf-conta-links { padding-top: 4px; }

/* ---------- Programas em janela própria (?janela=1) ---------- */
.pb-janela .tf-main { margin-left: 0; }
.pb-janela-bar { position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 6px 14px; background: linear-gradient(90deg, #310C06, #6B1D05); color: #fff; }
.pb-janela-bar strong { font-size: 1rem; white-space: nowrap; }
.pb-janela-extra { flex: 1; min-width: 0; display: flex; justify-content: flex-end; gap: 8px; }
.pb-janela-conta { position: relative; }
.pb-janela-conta > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px; font-weight: 800; font-size: .85rem; }
.pb-janela-conta > summary::-webkit-details-marker { display: none; }
.pb-janela-conta > summary:hover { background: rgb(255 255 255 / .14); }
.pb-janela-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; padding: 6px; background: #fff; border-radius: 12px; box-shadow: 0 14px 34px rgb(49 12 6 / .25); }
.pb-janela-menu a { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; color: #310C06; font-weight: 700; text-decoration: none; }
.pb-janela-menu a:hover { background: #FFF0D1; }
.pb-janela-bar .btn { --bs-btn-padding-y: .3rem; }

/* ---------- PDV estendido: só os itens e a comanda ---------- */
.pdv-topo { display: flex; gap: 10px; align-items: flex-start; }
.pdv-topo > .position-relative { flex: 1; }
.btn-estender { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; height: 48px; }
body.pdv-estendido .tf-sidebar, body.pdv-estendido .tf-mobile-bar, body.pdv-estendido .pb-janela-bar,
body.pdv-estendido footer, body.pdv-estendido .pdv-link-fila { display: none !important; }
body.pdv-estendido .tf-main { margin-left: 0; }
body.pdv-estendido #conteudo { padding: 10px 12px !important; }
body.pdv-estendido .pdv-area { height: calc(100vh - 82px) !important; }
body.pdv-estendido .pdv-area > .col-md-7 { max-height: calc(100vh - 82px) !important; }
body.pdv-estendido .col-comanda .comanda-panel { max-height: calc(100vh - 82px); }
body.pdv-estendido .point-brand-switch { margin-bottom: 8px; }
body.pdv-estendido .point-brand-switch button { padding: 6px; }

/* ---------- Conversas (chat estilo WhatsApp) ---------- */
.chat-app { display: grid; grid-template-columns: 340px minmax(0, 1fr) 290px; height: calc(100vh - 150px); min-height: 480px; background: #fff; border: 1px solid #EBD8C1; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 20px rgb(49 12 6 / .07); }
.pb-janela .chat-app { height: calc(100vh - 76px); }
.pb-janela #conteudo { padding-top: 12px !important; padding-bottom: 12px !important; }
.chat-app:not(.com-conversa) { grid-template-columns: 340px minmax(0, 1fr); }
.chat-lista { display: flex; flex-direction: column; border-right: 1px solid #EBD8C1; min-height: 0; }
.chat-busca { padding: 10px; border-bottom: 1px solid #F1E9DF; background: #FFF8EC; }
.chat-conversas { flex: 1; overflow-y: auto; }
.chat-conversa { display: flex; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid #F6EFE6; background: none; text-align: left; color: inherit; }
.chat-conversa:hover { background: #FFF8EC; }
.chat-conversa.ativa { background: #FFF0D1; box-shadow: inset 4px 0 #F5A527; }
.chat-avatar { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: #6B1D05; color: #EFD5A5; font-weight: 900; }
.chat-conversa-info { flex: 1; min-width: 0; }
.chat-conversa-topo { display: flex; justify-content: space-between; gap: 6px; }
.chat-conversa-topo strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat-conversa-topo small { color: #79553D; flex: none; }
.chat-previa { display: flex; justify-content: space-between; gap: 6px; color: #79553D; font-size: .82rem; }
.chat-previa span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat-nao-lidas { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #E95F0A; color: #fff; font-size: .72rem; font-weight: 900; display: grid; place-items: center; }
.chat-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chat-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: #FFF0D1; border: 1px solid #F5A527; color: #6B1D05; font-size: .7rem; font-weight: 800; }
.chat-tag button { border: 0; background: none; padding: 0; line-height: 1; color: #9C260B; font-weight: 900; }
.chat-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #F7EFE3; }
.chat-thread-topo { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border-bottom: 1px solid #EBD8C1; }
.chat-mensagens { flex: 1; overflow-y: auto; padding: 16px 6%; display: flex; flex-direction: column; gap: 6px; }
.chat-balao { max-width: min(75%, 560px); padding: 7px 10px 4px; border-radius: 10px; background: #fff; box-shadow: 0 1px 1px rgb(49 12 6 / .12); align-self: flex-start; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-balao.eu { align-self: flex-end; background: #FFE3B0; }
.chat-balao small { display: block; text-align: right; color: #79553D; font-size: .68rem; }
.chat-balao img { display: block; max-width: 100%; max-height: 280px; border-radius: 8px; margin-bottom: 4px; }
.chat-balao audio { max-width: 260px; }
.chat-citacao { border-left: 3px solid #F5A527; background: rgb(245 165 39 / .12); padding: 3px 7px; border-radius: 6px; margin-bottom: 4px; font-size: .78rem; color: #79553D; }
.chat-dia { align-self: center; padding: 3px 10px; border-radius: 8px; background: #fff; color: #79553D; font-size: .72rem; font-weight: 800; }
.chat-compor { display: flex; gap: 8px; padding: 10px; background: #fff; border-top: 1px solid #EBD8C1; }
.chat-compor textarea { resize: none; }
.chat-vazio { margin: auto; text-align: center; color: #79553D; padding: 20px; }
.chat-cliente { border-left: 1px solid #EBD8C1; padding: 14px; overflow-y: auto; min-height: 0; }
.chat-cliente h6 { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #A65113; font-weight: 900; margin: 16px 0 6px; }
.chat-rascunho { border: 1px solid #F5A527; border-radius: 10px; padding: 8px; margin-bottom: 8px; background: #FFF8EC; font-size: .82rem; }
.chat-app { position: relative; }
.chat-btn-cliente { display: none; }
@media (max-width: 1199.98px) {
    .chat-app { grid-template-columns: 300px minmax(0, 1fr); }
    .chat-btn-cliente { display: inline-flex; }
    .chat-cliente { display: none; position: absolute; z-index: 5; top: 0; right: 0; bottom: 0; width: min(300px, 90%); background: #fff; box-shadow: -8px 0 24px rgb(49 12 6 / .15); }
    .chat-app.mostra-cliente .chat-cliente { display: block; }
}
@media (max-width: 767.98px) {
    .chat-app { grid-template-columns: 1fr; }
    .chat-app .chat-thread { display: none; }
    .chat-app.aberta .chat-lista { display: none; }
    .chat-app.aberta .chat-thread { display: flex; }
}

/* Janela de programa: a barra de cima já tem o título; esconde o cabeçalho grande. */
.pb-janela .page-header { border-bottom: 0; margin-bottom: 8px; padding-bottom: 0; }
.pb-janela .page-header h2, .pb-janela .page-header p, .pb-janela .page-header .eyebrow { display: none; }

/* Menu lateral mais compacto: cabe inteiro numa tela de notebook sem rolar. */
.tf-sidebar-brand { min-height: 0; padding-top: 12px; padding-bottom: 10px; }
.tf-sidebar-brand .point-brand-lockup img { width: 56px; height: 56px; }
.tf-sidebar-nav { padding-top: 8px; padding-bottom: 8px; }
.tf-nav-group + .tf-nav-group { margin-top: 10px; }
.tf-nav-heading { padding-bottom: 4px; }
.tf-nav-link { min-height: 34px; padding-top: 6px; padding-bottom: 6px; margin: 1px 0; }
.tf-conta { padding: 6px 10px; }
.tf-programas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 4px; }
.tf-programas a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px; border-radius: 10px; background: rgb(255 255 255 / .1); color: #fff; text-decoration: none; font-size: .7rem; font-weight: 800; }
.tf-programas a:hover, .tf-programas a:focus-visible { background: #F5A527; color: #310C06; }
.tf-programas .tf-icon { width: 18px; height: 18px; }

/* ---------- Montar pedido no chat ---------- */
.pc-itens { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; max-height: 58vh; overflow-y: auto; }
.pc-item { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid #EBD8C1; border-left: 4px solid #A65113; border-radius: 10px; background: #fff; text-align: left; font-size: .85rem; }
.pc-item:hover, .pc-item:focus-visible { background: #FFF0D1; border-color: #F5A527; }
.pc-item small { display: block; color: #79553D; font-size: .72rem; }
.pc-item > span:last-child { font-weight: 900; white-space: nowrap; color: #6B1D05; }
.pc-carrinho { min-height: 80px; max-height: 30vh; overflow-y: auto; border: 1px dashed #E1A361; border-radius: 12px; padding: 8px; background: #FFF8EC; }
.pc-linha { display: flex; align-items: center; gap: 4px; padding: 4px 0; border-bottom: 1px solid #F1E9DF; font-size: .85rem; }
.pc-linha:last-child { border-bottom: 0; }
.pc-sub { min-width: 78px; text-align: right; font-weight: 800; }

/* ---------- Canais (dois números de WhatsApp) ---------- */
.canal-selo { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: .68rem; font-weight: 900; line-height: 1.5; white-space: nowrap; background: #F6E5D4; color: #6B1D05; border: 1px solid #A65113; }
.canal-selo.canal-brasa { background: #FFF0DE; color: #9C260B; border-color: #E95F0A; }
.chat-canais { display: flex; flex-wrap: wrap; gap: 4px; }
.chat-canais button { border: 1px solid #EBD8C1; background: #fff; color: #591E0E; border-radius: 999px; padding: 3px 10px; font-size: .75rem; font-weight: 800; }
.chat-canais button.ativo { background: #6B1D05; border-color: #6B1D05; color: #fff; }

/* ---------- Sessões dos números (tela WhatsApp) ---------- */
.sessao-card { display: flex; flex-direction: column; }
.sessao-estado { font-size: .8rem; white-space: nowrap; }
.sessao-qr { margin-top: 8px; }
.sessao-qr img { display: block; width: 240px; max-width: 100%; height: auto; aspect-ratio: 1; margin-bottom: 6px; border-radius: 8px; background: #fff; }

/* ---------- Observações (item e pedido) ---------- */
.comanda-item { flex-wrap: wrap; }
.comanda-item .item-obs, .obs-item { display: inline-block; margin-top: 2px; padding: 1px 7px; border-radius: 6px; background: #FFF3C4; color: #7A4B00; font-size: .76rem; font-weight: 800; border-left: 3px solid #F5A527; overflow-wrap: anywhere; }
.item-obs-btn { margin: 0 4px; padding: 2px 7px; border: 1px solid #E1A361; border-radius: 7px; background: #fff; color: #6B1D05; font-size: .72rem; font-weight: 900; }
.item-obs-btn.tem-obs { background: #F5A527; border-color: #F5A527; color: #310C06; }
.item-obs-campo { flex: 1 0 100%; margin-top: 6px; }
.pdv-obs-pedido { resize: vertical; min-height: 31px; border-radius: 8px; }
.obs-pedido { margin: 6px 0; padding: 7px 9px; border-radius: 10px; background: #FFF3C4; border: 1px dashed #F5A527; font-size: .85rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.obs-alterada { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: #E95F0A; color: #fff; font-size: .7rem; font-weight: 900; animation: obs-pisca 1.2s ease-in-out 3; }
@keyframes obs-pisca { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .obs-alterada { animation: none; } }
.pc-linha { flex-wrap: wrap; }
.pc-linha .pc-obs { flex: 1 0 100%; margin-top: 3px; }

/* ---------- Pedidos em quadro (Kanban) ---------- */
.kb-quadro { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; height: calc(100vh - 190px); min-height: 420px; scroll-snap-type: x proximity; }
.pb-janela .kb-quadro { height: calc(100vh - 118px); }
.kb-col { display: flex; flex-direction: column; min-height: 0; background: #F6EEE3; border: 1px solid #EBD8C1; border-radius: 14px; scroll-snap-align: start; transition: background .15s, box-shadow .15s; }
.kb-col-topo { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 3px solid #A65113; border-radius: 14px 14px 0 0; background: #fff; }
.kb-conferencia .kb-col-topo { border-bottom-color: #79553D; }
.kb-producao .kb-col-topo { border-bottom-color: #E95F0A; }
.kb-pronto .kb-col-topo { border-bottom-color: #F5A527; }
.kb-entrega .kb-col-topo { border-bottom-color: #6B1D05; }
.kb-entregue .kb-col-topo { border-bottom-color: #2E7D32; }
.kb-contador { min-width: 26px; padding: 1px 8px; border-radius: 999px; background: #6B1D05; color: #fff; font-size: .78rem; font-weight: 900; text-align: center; }
.kb-col-nota { padding: 4px 12px 0; font-size: .7rem; color: #79553D; }
.kb-lista { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.kb-vazio { display: none; margin: 18px 0; text-align: center; color: #A08670; font-size: .85rem; }
.kb-col.vazia .kb-vazio { display: block; }
.kb-col.kb-alvo { background: #FFE9C2; box-shadow: inset 0 0 0 3px #F5A527; }
.kb-card.fila-card { height: auto; padding: 10px 11px; border-radius: 12px; cursor: grab; user-select: none; touch-action: pan-y; }
.kb-card:focus-visible { outline: 3px solid #F5A527; outline-offset: 2px; }
.kb-card-topo { display: flex; align-items: center; gap: 6px; }
.kb-alca { color: #A65113; font-size: 1.1rem; line-height: 1; padding: 4px 4px 4px 0; cursor: grab; touch-action: none; }
.kb-meta { font-size: .74rem; color: #79553D; margin: 2px 0 6px; }
.kb-itens { list-style: none; margin: 0 0 6px; padding: 0; font-size: .86rem; }
.kb-itens li { padding: 2px 0; border-top: 1px dashed #F1E9DF; }
.kb-itens li:first-child { border-top: 0; }
.kb-itens .obs-item { display: block; width: fit-content; }
.kb-linha { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #79553D; vertical-align: middle; }
.kb-linha.linha-brasa { background: #E95F0A; } .kb-linha.linha-caseiro { background: #A65113; } .kb-linha.linha-industrial { background: #F5A527; }
.kb-card .obs-pedido { margin: 4px 0; padding: 5px 8px; font-size: .8rem; }
.kb-rodape { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 6px; }
.kb-setas { display: flex; gap: 4px; }
.kb-setas .btn { min-width: 38px; font-weight: 900; }
.kb-mais { margin-top: 6px; }
.kb-mais > summary { cursor: pointer; font-size: .78rem; font-weight: 800; color: #6B1D05; list-style: none; }
.kb-mais > summary::-webkit-details-marker { display: none; }
.kb-mais > summary::before { content: '▸ '; }
.kb-mais[open] > summary::before { content: '▾ '; }
.kb-mais[open] { cursor: default; user-select: text; }
.kb-card.kb-atrasado { box-shadow: 0 0 0 2px #D32F2F, 0 8px 20px rgb(49 12 6 / .07); }
.kb-card.kb-atrasado [data-tempo] { color: #D32F2F; font-weight: 900; }
.kb-card.kb-arrastando { opacity: .35; }
.kb-card.kb-chegou { animation: kb-chegou .6s ease-out; }
@keyframes kb-chegou { from { box-shadow: 0 0 0 4px #F5A527; } }
.kb-fantasma { position: fixed; left: 0; top: 0; z-index: 2000; pointer-events: none; box-shadow: 0 18px 40px rgb(49 12 6 / .3); opacity: .95; }
body.kb-arrastando-body, body.kb-arrastando-body * { cursor: grabbing !important; user-select: none !important; }
@media (prefers-reduced-motion: reduce) { .kb-card.kb-chegou { animation: none; } .kb-col { transition: none; } }
@media (max-width: 767.98px) { .kb-quadro { grid-auto-columns: 85%; } }

/* ---------- Painel lateral do pedido (quadro) ---------- */
.kb-painel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1045; width: min(420px, 100vw); display: flex; flex-direction: column; background: #fff; border-left: 1px solid #EBD8C1; box-shadow: -12px 0 32px rgb(49 12 6 / .18); animation: kb-painel-entra .18s ease-out; }
.kb-painel[hidden] { display: none; }
@keyframes kb-painel-entra { from { transform: translateX(24px); opacity: 0; } }
.kb-painel-barra { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: linear-gradient(90deg, #310C06, #6B1D05); color: #fff; }
.kb-painel-barra .btn { color: #fff; border-color: rgb(255 255 255 / .5); }
.kb-painel-corpo { flex: 1; overflow-y: auto; padding: 14px 16px 24px; }
.kb-painel-corpo h6 { margin: 16px 0 6px; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #A65113; font-weight: 900; }
.kb-p-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.kb-p-numero { font-size: 1.35rem; font-weight: 900; color: #310C06; line-height: 1.1; }
.kb-p-nome { font-weight: 800; color: #6B1D05; }
.kb-p-etapa { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding: 8px; border-radius: 12px; background: #FFF0D1; }
.kb-p-etapa strong { flex: 1; text-align: center; color: #6B1D05; }
.kb-p-etapa .btn { min-width: 42px; font-weight: 900; }
.kb-p-lista { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.kb-p-lista li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0 5px 14px; border-bottom: 1px dashed #F1E9DF; position: relative; }
.kb-p-lista li::before { content: '•'; position: absolute; left: 0; color: #F5A527; font-weight: 900; }
.kb-p-lista li > span:first-child { color: #79553D; }
.kb-p-lista li { text-align: right; }
.kb-p-lista li > span:first-child { text-align: left; }
.kb-p-itens { list-style: none; margin: 0; padding: 0; }
.kb-p-itens li { padding: 7px 0 7px 16px; border-bottom: 1px solid #F1E9DF; position: relative; font-size: .9rem; }
.kb-p-itens li::before { content: '•'; position: absolute; left: 2px; top: 7px; color: #E95F0A; font-weight: 900; }
.kb-p-item-linha { display: flex; justify-content: space-between; gap: 8px; }
.kb-p-totais { margin-top: 8px; }
.kb-p-total { font-size: 1.05rem; font-weight: 900; color: #310C06; }
.kb-painel-corpo .obs-pedido { margin-top: 10px; }
.kb-card.kb-selecionado { box-shadow: 0 0 0 3px #F5A527, 0 8px 20px rgb(49 12 6 / .1); }
@media (min-width: 1200px) { body.kb-painel-aberto .kb-quadro { margin-right: 430px; } }
@media (prefers-reduced-motion: reduce) { .kb-painel { animation: none; } }

/* ---------- App do celular (PWA): início e modo garçom ---------- */
body.app-celular #conteudo { padding: 12px !important; }
.cel-inicio { max-width: 520px; margin: 0 auto; }
.cel-ola { font-size: 1.05rem; margin: 4px 0 14px; }
.cel-bloco { display: flex; align-items: center; gap: 14px; padding: 18px; margin-bottom: 12px; border-radius: 18px; background: #fff; border: 1px solid #EBD8C1; color: #310C06; text-decoration: none; box-shadow: 0 6px 16px rgb(49 12 6 / .07); }
.cel-bloco .tf-icon { width: 34px; height: 34px; flex: none; color: #A65113; }
.cel-bloco strong { display: block; font-size: 1.15rem; }
.cel-bloco small { color: #79553D; }
.cel-bloco-principal { background: #6B1D05; color: #fff; border-color: #6B1D05; }
.cel-bloco-principal .tf-icon, .cel-bloco-principal small { color: #EFD5A5; }
.cel-rodape { margin-top: 18px; text-align: center; font-size: .8rem; color: #A08670; }

.gc { max-width: 720px; margin: 0 auto; padding-bottom: 90px; }
.gc-filtros { position: sticky; top: 50px; z-index: 5; background: var(--tf-creme); padding: 4px 0 8px; display: flex; flex-direction: column; gap: 8px; }
.gc-marcas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gc-marcas button, .gc-categorias button { border: 1px solid #EBD8C1; background: #fff; color: #6B1D05; border-radius: 999px; padding: 8px 12px; font-weight: 800; font-size: .9rem; white-space: nowrap; }
.gc-marcas button.ativo, .gc-categorias button.ativo { background: #6B1D05; border-color: #6B1D05; color: #fff; }
.gc-categorias { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.gc-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gc-item { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px; border: 1px solid #EBD8C1; border-left: 5px solid #A65113; border-radius: 14px; background: #fff; text-align: left; color: #310C06; min-height: 64px; }
.gc-item:active { background: #FFF0D1; }
.gc-item.linha-brasa { border-left-color: #E95F0A; } .gc-item.linha-industrial { border-left-color: #F5A527; } .gc-item.linha-bebida { border-left-color: #79553D; }
.gc-item-info small { display: block; color: #79553D; font-size: .78rem; line-height: 1.25; margin-top: 2px; }
.gc-item-preco { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-weight: 900; color: #6B1D05; white-space: nowrap; }
.gc-qtd { min-width: 26px; padding: 1px 8px; border-radius: 999px; background: #E95F0A; color: #fff; text-align: center; font-size: .8rem; }
.gc-vazio { text-align: center; color: #A08670; padding: 24px 0; }
.gc-barra { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 1040; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 16px 18px; border: 0; border-radius: 16px; background: #6B1D05; color: #fff; font-size: 1rem; box-shadow: 0 10px 28px rgb(49 12 6 / .35); max-width: 696px; margin: 0 auto; }
.gc-pedido { max-width: 720px; margin: 0 auto; }
.gc-pedido-topo { position: sticky; top: 50px; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; background: var(--tf-creme); font-size: 1.05rem; }
.gc-carrinho { list-style: none; margin: 0 0 14px; padding: 0; }
.gc-carrinho > li { padding: 10px 0; border-bottom: 1px solid #F1E9DF; }
.gc-linha { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.gc-linha small { display: block; color: #79553D; font-size: .78rem; }
.gc-linha .btn { width: 44px; height: 44px; font-size: 1.3rem; font-weight: 900; padding: 0; }
.gc-linha-qtd { min-width: 24px; text-align: center; font-size: 1.1rem; }
.gc-ok { position: fixed; inset: 50px 0 0; z-index: 1030; display: grid; place-items: center; padding: 24px; background: #FFF0D1; text-align: center; }
.gc-ok > div { width: 100%; max-width: 360px; }
.gc-ok-numero { font-size: 2rem; font-weight: 900; color: #6B1D05; }
@media (max-width: 575.98px) {
    .pb-janela-bar { min-height: 50px; padding-top: calc(6px + env(safe-area-inset-top)); }
    .pb-janela-bar strong { font-size: .95rem; }
    .kb-painel { width: 100vw; }
}