/* ===== Lanches do Juá: PDV em 3 colunas (contas | cardápio | pedido) ===== */
.lj { --lj-laranja: #E8830C; --lj-borda: #e6e8ec; --lj-fundo: #f6f7f9; --lj-tinta-2: #6b7280;
      display: grid; grid-template-columns: 240px minmax(0, 1fr) 360px; gap: 12px; height: calc(100dvh - 64px - 32px); min-height: 520px; }
.lj > * { min-height: 0; }
.lj button { font: inherit; color: inherit; cursor: pointer; }

/* Contas */
.lj-contas { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--lj-borda); border-radius: 12px; padding: 10px; }
.lj-contas-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; margin-bottom: 8px; }
.lj-titulo { font-family: Outfit, Roboto, sans-serif; font-weight: 700; font-size: 1.15rem; line-height: 1.2; }
.lj-caixa { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; margin-top: 4px; text-decoration: none; }
.lj-caixa.ok { background: #e8f6ea; color: #1b7a2e; }
.lj-caixa.fechado { background: #fff4e5; color: #b45309; }
.lj-nova { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px; border: 0; border-radius: 10px;
           background: var(--lj-laranja); color: #fff !important; font-weight: 700; letter-spacing: .02em; }
.lj-nova:hover { filter: brightness(1.06); }
.lj-lista { flex: 1; overflow-y: auto; margin-top: 8px; display: flex; flex-direction: column; gap: 6px; padding-right: 2px; }
.lj-conta { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; text-align: left; padding: 9px 10px; border: 1px solid var(--lj-borda);
            border-radius: 10px; background: #fff; }
.lj-conta:hover { border-color: #f3b56b; }
.lj-conta.ativa { border: 2px solid var(--lj-laranja); background: #fff8f0; padding: 8px 9px; }
.lj-conta-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lj-conta-valor { font-variant-numeric: tabular-nums; }
.lj-conta-info { grid-column: 1 / -1; font-size: .75rem; color: var(--lj-tinta-2); }
.lj-tag { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: #e8f0fe; color: #1d4ed8; font-size: .68rem; font-weight: 600; }
.lj-vazio-p { color: var(--lj-tinta-2); font-size: .85rem; padding: 10px 4px; }

/* Cardápio */
.lj-cardapio { display: flex; flex-direction: column; min-width: 0; }
.lj-busca { display: flex; align-items: center; gap: 8px; padding: 0 6px 0 12px; height: 44px; background: #fff; border: 1px solid var(--lj-borda); border-radius: 12px; color: var(--lj-tinta-2); flex: none; }
.lj-busca:focus-within { border-color: var(--lj-laranja); box-shadow: 0 0 0 3px rgba(232, 131, 12, .15); }
.lj-busca input { flex: 1; border: 0; outline: 0; font: inherit; font-size: .95rem; background: transparent; color: #111827; min-width: 0; }
.lj-cats { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0 8px; scrollbar-width: thin; flex: none; }
.lj-cat { flex: none; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--lj-borda); background: #fff; font-size: .85rem; font-weight: 500; white-space: nowrap; }
.lj-cat:hover { border-color: #f3b56b; }
.lj-cat.lets { border-color: #f3b56b; color: #b45309; }
.lj-cat.ativa { background: #17151A; border-color: #17151A; color: #fff !important; }
.lj-produtos { flex: 1; overflow-y: auto; padding: 2px 2px 12px; }
.lj-secao { font-family: Outfit, Roboto, sans-serif; font-weight: 700; font-size: .95rem; margin: 14px 0 8px; }
.lj-secao:first-child { margin-top: 0; }
.lj-aviso-pizza { font-size: .78rem; color: var(--lj-tinta-2); margin-bottom: 8px; }
.lj-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.lj-prod { display: flex; flex-direction: column; align-items: stretch; width: 100%; text-align: left; padding: 0; border: 1px solid var(--lj-borda); border-radius: 12px; background: #fff;
           overflow: hidden; transition: transform .08s, box-shadow .15s, border-color .15s; }
.lj-prod:hover { border-color: #f3b56b; box-shadow: 0 4px 14px rgba(17, 24, 39, .08); }
.lj-prod:active { transform: scale(.97); }
.lj-prod.no-pedido { border: 2px solid var(--lj-laranja); }
.lj-foto { position: relative; width: 100%; align-self: stretch; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #fde7cc, #f6f7f9); display: block; }
.lj-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lj-letra { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: Outfit, Roboto, sans-serif;
            font-size: 2rem; font-weight: 700; color: #e9a55a; }
.lj-qtd-badge { position: absolute; top: 6px; right: 6px; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--lj-laranja);
                color: #fff; font-weight: 700; font-size: .85rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.lj-opcoes { position: absolute; left: 6px; bottom: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(23, 21, 26, .78); color: #fff; font-size: .68rem; font-weight: 600; }
.lj-prod-nome { padding: 8px 10px 0; font-weight: 600; font-size: .88rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; }
.lj-prod-cat { padding: 2px 10px 0; font-size: .7rem; color: var(--lj-tinta-2); }
.lj-preco { padding: 4px 10px 10px; margin-top: auto; color: var(--lj-laranja); font-weight: 700; font-size: .92rem; }
.lj-preco s { color: #9ca3af; font-weight: 400; font-size: .75rem; margin-left: 4px; }
.lj-preco small { display: block; color: var(--lj-tinta-2); font-weight: 400; font-size: .7rem; }
/* Sem foto no Juá: faixa baixa com a inicial, para não gastar espaço */
.lj-prod.sem-foto .lj-foto { aspect-ratio: auto; height: 44px; }
.lj-prod.sem-foto .lj-letra { font-size: 1.2rem; }

/* Pedido */
.lj-pedido { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--lj-borda); border-radius: 12px; overflow: hidden; }
.lj-pedido-fechar { display: none; }
.lj-cab { display: flex; justify-content: space-between; gap: 8px; padding: 12px 14px 8px; background: #17151A; color: #fff; }
.lj-cab-nome { min-width: 0; }
.lj-cab-nome b { display: block; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lj-cab-nome small, .lj-cab-total small { color: #b8b5bd; font-size: .72rem; }
.lj-cab-total { text-align: right; flex: none; }
.lj-cab-total b { display: block; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.lj-cab-acoes { display: flex; gap: 8px; padding: 0 14px 12px; background: #17151A; }
.lj-cab-acoes .mud-button-outlined { color: #fff; border-color: rgba(255, 255, 255, .45); }
.lj-cab-acoes .mud-button-root { flex: 1; }
.lj-ja { display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 14px; border: 0; border-bottom: 1px solid var(--lj-borda); background: var(--lj-fundo); font-size: .82rem; font-weight: 600; text-align: left; flex: none; }
.lj-ja span { flex: 1; }
.lj-ja-lista { max-height: 30%; overflow-y: auto; border-bottom: 1px solid var(--lj-borda); background: var(--lj-fundo); padding: 0 14px 6px; flex: none; }
.lj-ja-item { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: baseline; font-size: .8rem; padding: 4px 0; border-top: 1px dashed #dfe2e7; }
.lj-ja-item small { color: var(--lj-tinta-2); }
.lj-ja-item span small { display: block; }
.lj-ja-item.cancelado { opacity: .5; text-decoration: line-through; }
.lj-sem-conta { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; padding: 14px; background: #fff8f0; border-bottom: 1px solid #f6d7b0; color: #92400e; flex: none; }
.lj-sem-conta small { display: block; color: #a16207; font-size: .78rem; }
.lj-sem-conta .mud-button-root { grid-column: 2; justify-self: start; }
.lj-novo-titulo { padding: 12px 14px 4px; font-family: Outfit, Roboto, sans-serif; font-weight: 700; font-size: .95rem; flex: none; }
.lj-carrinho { flex: 1; overflow-y: auto; padding: 0 14px; min-height: 60px; }
.lj-item { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid #f1f2f4; }
.lj-item-nome { min-width: 0; font-size: .88rem; }
.lj-item-nome b { display: block; font-weight: 600; }
.lj-item-nome small { display: block; color: var(--lj-tinta-2); font-size: .74rem; }
.lj-obs-link { border: 0; background: none; padding: 0; color: #2563eb !important; font-size: .74rem; text-align: left; }
.lj-obs { width: 100%; margin-top: 3px; padding: 4px 8px; border: 1px solid var(--lj-laranja); border-radius: 6px; font: inherit; font-size: .8rem; outline: 0; }
.lj-qtd { display: flex; align-items: center; gap: 2px; background: var(--lj-fundo); border-radius: 999px; padding: 2px; }
.lj-qtd button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.lj-qtd b { min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.lj-item-total { min-width: 70px; text-align: right; font-variant-numeric: tabular-nums; font-size: .88rem; }
.lj-enviar { padding: 10px 14px 12px; border-top: 1px solid var(--lj-borda); display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; flex: none; }
.lj-enviar > .mud-button-root, .lj-enviar > small { grid-column: 1 / -1; }
.lj-enviar > small { color: var(--lj-tinta-2); font-size: .7rem; line-height: 1.3; }
.lj-enviar-total { display: flex; align-items: baseline; gap: 10px; }
.lj-enviar-total span { color: var(--lj-tinta-2); font-size: .85rem; }
.lj-enviar-total b { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.lj-limpar { border: 0; background: none; color: #b91c1c !important; font-size: .8rem; }
.lj-barra { display: none; }

/* Janela de opções do lanche */
.lj-dlg-topo { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.lj-dlg-topo img { width: 84px; height: 84px; border-radius: 12px; object-fit: cover; flex: none; }
.lj-dlg-topo b { display: block; font-size: 1.05rem; }
.lj-dlg-topo small { display: block; color: #6b7280; font-size: .78rem; line-height: 1.3; }
.lj-dlg-preco { display: block; color: #E8830C; font-weight: 700; margin-top: 2px; }
.lj-grupo { border: 1px solid #e6e8ec; border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.lj-grupo.falta { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
.lj-grupo-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; background: #f6f7f9; }
.lj-grupo-regra { display: inline-flex; align-items: center; gap: 2px; font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.lj-grupo-regra.obrig { background: #fff4e5; color: #b45309; }
.lj-grupo-regra.ok { background: #e8f6ea; color: #1b7a2e; }
.lj-opcao { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid #f1f2f4; cursor: pointer; user-select: none; }
.lj-opcao:hover { background: #fffaf3; }
.lj-opcao.marcada { background: #fff8f0; }
.lj-opcao.cheia { opacity: .45; cursor: default; }
.lj-opcao-nome { flex: 1; }
.lj-opcao-preco { color: #6b7280; font-size: .85rem; }
.lj-radio, .lj-check { width: 22px; height: 22px; flex: none; border: 2px solid #c4c8cf; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; color: #fff; }
.lj-radio { border-radius: 50%; }
.lj-check { border-radius: 6px; }
.marcada .lj-radio { border: 7px solid #E8830C; }
.marcada .lj-check { background: #E8830C; border-color: #E8830C; }
.marcada .lj-check:empty::after { content: "✓"; font-size: .8rem; }
.lj-menos { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* Telas médias: as contas viram uma faixa no alto */
@media (max-width: 1279px) {
    .lj { grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto minmax(0, 1fr); }
    .lj-contas { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 10px; padding: 8px 10px; }
    .lj-contas-topo { margin: 0; flex: none; }
    .lj-nova { width: auto; flex: none; padding: 8px 14px; }
    .lj-lista { flex-direction: row; overflow-x: auto; overflow-y: hidden; margin: 0; padding-bottom: 2px; }
    .lj-conta { flex: none; min-width: 170px; max-width: 220px; }
}

/* Celular: uma coluna; o pedido abre por cima pela barra de baixo */
@media (max-width: 899px) {
    .lj { display: flex; flex-direction: column; height: auto; min-height: 0; padding-bottom: 72px; }
    .lj-contas { flex-wrap: wrap; }
    .lj-contas-topo { flex: 1; }
    .lj-lista { flex-basis: 100%; }
    .lj-cats { position: sticky; top: 56px; z-index: 2; background: var(--mud-palette-background, #fff); margin: 0 -8px; padding: 8px; }
    .lj-produtos { overflow: visible; }
    .lj-grade { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
    .lj-pedido { display: none; position: fixed; inset: 56px 0 0 0; z-index: 1300; border-radius: 0; border: 0; }
    .lj-pedido.aberto { display: flex; }
    .lj-pedido-fechar { display: block; padding: 4px 6px; border-bottom: 1px solid var(--lj-borda); flex: none; }
    .lj-barra { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; align-items: center; justify-content: space-between; gap: 10px;
                padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border: 0; background: #17151A; color: #fff !important; text-align: left; }
    .lj-barra b { display: block; font-size: .9rem; }
    .lj-barra small { color: #c9c6cc; font-size: .78rem; }
    .lj-barra-ver { display: flex; align-items: center; gap: 2px; padding: 8px 12px; border-radius: 999px; background: #E8830C; font-weight: 700; font-size: .85rem; flex: none; }
}

/* ---------- Relatório do fechamento do Caixa Let's (impressora térmica 80 mm) ---------- */
.fl-barra { display: flex; align-items: center; gap: 8px; max-width: 360px; margin: 0 auto 8px; }
.fl {
    max-width: 320px; margin: 0 auto 24px; padding: 14px 12px; background: #fff; color: #000;
    font-family: "Roboto Mono", Consolas, "Courier New", monospace; font-size: 12px; line-height: 1.35;
    box-shadow: 0 1px 6px rgba(0,0,0,.18);
}
.fl-c { text-align: center; }
.fl-g { font-weight: 700; font-size: 13px; }
.fl-p { font-size: 10px; }
.fl-sep { border-top: 1px dashed #000; margin: 6px 0; }
.fl-t { font-weight: 700; border-top: 1px dashed #000; margin-top: 8px; padding-top: 4px; }
.fl-l { display: flex; justify-content: space-between; gap: 8px; }
.fl-l > span:last-child { white-space: nowrap; text-align: right; }
.fl-n { font-weight: 700; }
.fl-i { padding-left: 10px; }
.fl-obs { padding-left: 10px; font-size: 11px; }
.fl-ass { margin-top: 34px; border-top: 1px solid #000; text-align: center; font-size: 11px; }
@media print {
    .fl { max-width: none; width: 100%; margin: 0; padding: 0; box-shadow: none; }
    .mud-main-content .mud-container { padding: 0 !important; max-width: none !important; }
}