/* Base visual compartilhada. A marca do restaurante entra por --cor / --cor2 (definidas em JS). */
:root {
  --cor: #E4572E; --cor-txt: #fff; --cor-suave: #fdeee9; --cor2: #1F2937; --cor2-txt: #fff;
  --fundo: #f6f5f3; --sup: #ffffff; --sup2: #f1efec; --borda: #e7e3de; --txt: #1d1b19; --txt2: #6b655f; --txt3: #9a938c;
  --ok: #16a34a; --ok-s: #dcfce7; --alerta: #d97706; --alerta-s: #fef3c7; --erro: #dc2626; --erro-s: #fee2e2; --info: #2563eb; --info-s: #dbeafe;
  --r: 14px; --r2: 20px; --sombra: 0 1px 2px rgba(20,16,12,.06), 0 4px 16px rgba(20,16,12,.06); --sombra2: 0 12px 40px rgba(20,16,12,.18);
  --fonte: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { --fundo: #141210; --sup: #1d1a17; --sup2: #26221e; --borda: #34302b; --txt: #f4f1ed; --txt2: #b5aea6; --txt3: #857d75; --cor-suave: color-mix(in srgb, var(--cor) 18%, #1d1a17); --ok-s: #12301e; --alerta-s: #3a2a0c; --erro-s: #3b1515; --info-s: #13233f; --sombra: 0 1px 2px rgba(0,0,0,.4); color-scheme: dark; }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body { font-family: var(--fonte); background: var(--fundo); color: var(--txt); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; font-weight: 800; } h2 { font-size: 1.25rem; font-weight: 800; } h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0; }
.mut { color: var(--txt2); } .mut2 { color: var(--txt3); } .peq { font-size: .85rem; } .mini { font-size: .76rem; }
.forte { font-weight: 700; } .riscado { text-decoration: line-through; color: var(--txt3); font-weight: 500; }
.linha { display: flex; align-items: center; gap: 10px; } .linha.topo { align-items: flex-start; } .entre { justify-content: space-between; } .quebra { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 10px; } .g4 { gap: 4px; } .g6 { gap: 6px; } .g16 { gap: 16px; } .g20 { gap: 20px; }
.cresce { flex: 1; min-width: 0; } .direita { margin-left: auto; } .centro { text-align: center; } .oculto { display: none !important; }
.grade { display: grid; gap: 14px; } .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4c { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
@media (max-width: 720px) { .g2, .g3, .g4c { grid-template-columns: 1fr; } .g4c.k { grid-template-columns: 1fr 1fr; } }
.elip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* botoes */
.btn { appearance: none; border: 0; border-radius: 12px; padding: 11px 16px; font: inherit; font-weight: 700; font-size: .93rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--sup2); color: var(--txt); transition: transform .08s, filter .15s, background .15s; white-space: nowrap; text-decoration: none; }
.btn:active { transform: scale(.97); } .btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.pri { background: var(--cor); color: var(--cor-txt); } .btn.pri:hover { filter: brightness(1.06); }
.btn.sec { background: var(--cor2); color: var(--cor2-txt); }
.btn.cont { background: transparent; border: 1.5px solid var(--borda); }
.btn.fant { background: transparent; } .btn.fant:hover { background: var(--sup2); }
.btn.ok { background: var(--ok); color: #fff; } .btn.perigo { background: var(--erro-s); color: var(--erro); }
.btn.pq { padding: 7px 11px; font-size: .84rem; border-radius: 10px; } .btn.gd { padding: 15px 20px; font-size: 1rem; border-radius: 16px; } .btn.bloco { width: 100%; }
.btn.ico { padding: 9px; border-radius: 50%; width: 38px; height: 38px; }
.btn .carrega { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* formularios */
label.campo { display: flex; flex-direction: column; gap: 5px; font-size: .82rem; font-weight: 600; color: var(--txt2); }
input, select, textarea { font: inherit; color: var(--txt); background: var(--sup); border: 1.5px solid var(--borda); border-radius: 12px; padding: 10px 12px; width: 100%; outline: none; transition: border .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { border-color: var(--cor); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor) 18%, transparent); }
textarea { resize: vertical; min-height: 70px; }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; accent-color: var(--cor); flex: none; }
input[type=color] { padding: 3px; height: 42px; cursor: pointer; }
.chave { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: .9rem; }
.chave input { position: absolute; opacity: 0; width: 0; height: 0; }
.chave i { width: 42px; height: 24px; background: var(--borda); border-radius: 99px; position: relative; transition: background .2s; flex: none; }
.chave i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .2s; }
.chave input:checked + i { background: var(--ok); } .chave input:checked + i::after { left: 21px; }
.dica { font-size: .8rem; color: var(--txt3); font-weight: 500; }

/* superficies */
.cartao { background: var(--sup); border-radius: var(--r2); box-shadow: var(--sombra); padding: 18px; }
.cartao.pl { padding: 0; overflow: hidden; } .cartao.borda { box-shadow: none; border: 1px solid var(--borda); }
.selo { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-size: .74rem; font-weight: 700; background: var(--sup2); color: var(--txt2); white-space: nowrap; }
.selo.ok { background: var(--ok-s); color: var(--ok); } .selo.alerta { background: var(--alerta-s); color: var(--alerta); } .selo.erro { background: var(--erro-s); color: var(--erro); } .selo.info { background: var(--info-s); color: var(--info); } .selo.cor { background: var(--cor-suave); color: var(--cor); }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }
.vazio { text-align: center; padding: 40px 16px; color: var(--txt3); }
.vazio .emo { font-size: 2.4rem; margin-bottom: 8px; }
hr { border: 0; border-top: 1px solid var(--borda); margin: 14px 0; }
.kpi { background: var(--sup); border-radius: var(--r2); padding: 16px; box-shadow: var(--sombra); }
.kpi .v { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; } .kpi .r { font-size: .8rem; color: var(--txt2); font-weight: 600; }
table.tab { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tab th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--txt3); font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--borda); }
.tab td { padding: 11px 12px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tab tr.clic { cursor: pointer; } .tab tr.clic:hover td { background: var(--sup2); }
.rola-x { overflow-x: auto; }
.barra { height: 8px; background: var(--sup2); border-radius: 99px; overflow: hidden; } .barra i { display: block; height: 100%; background: var(--cor); border-radius: 99px; }

/* abas */
.abas { display: flex; gap: 4px; background: var(--sup2); padding: 4px; border-radius: 14px; overflow-x: auto; scrollbar-width: none; }
.abas button { border: 0; background: transparent; font: inherit; font-weight: 700; font-size: .86rem; color: var(--txt2); padding: 8px 14px; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.abas button.on { background: var(--sup); color: var(--txt); box-shadow: var(--sombra); }

/* modal e gaveta */
.veu { position: fixed; inset: 0; background: rgba(15,12,10,.5); z-index: 100; display: flex; align-items: flex-end; justify-content: center; animation: aparece .2s; backdrop-filter: blur(2px); }
@media (min-width: 760px) { .veu { align-items: center; padding: 20px; } }
.modal { background: var(--sup); width: 100%; max-width: 560px; max-height: 92vh; border-radius: 24px 24px 0 0; display: flex; flex-direction: column; animation: sobe .28s cubic-bezier(.2,.9,.3,1.1); overflow: hidden; }
@media (min-width: 760px) { .modal { border-radius: 24px; } .modal.largo { max-width: 860px; } }
.modal .cab { padding: 18px 20px 12px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--borda); }
.modal .corpo { padding: 18px 20px; overflow-y: auto; flex: 1; }
.modal .rod { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--borda); display: flex; gap: 10px; }
.gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--sup); z-index: 101; box-shadow: var(--sombra2); display: flex; flex-direction: column; animation: entra .25s ease-out; }
.gaveta .cab { padding: 16px 20px; border-bottom: 1px solid var(--borda); display: flex; align-items: center; gap: 12px; }
.gaveta .corpo { padding: 18px 20px; overflow-y: auto; flex: 1; }
.gaveta .rod { padding: 12px 20px; border-top: 1px solid var(--borda); display: flex; gap: 8px; flex-wrap: wrap; }
@keyframes aparece { from { opacity: 0; } } @keyframes sobe { from { transform: translateY(40px); opacity: 0; } } @keyframes entra { from { transform: translateX(40px); opacity: 0; } }

/* avisos */
#avisos { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: calc(100% - 32px); max-width: 440px; }
.aviso { background: var(--txt); color: var(--fundo); padding: 12px 18px; border-radius: 14px; font-weight: 600; font-size: .9rem; box-shadow: var(--sombra2); animation: sobe .25s; pointer-events: auto; }
.aviso.erro { background: var(--erro); color: #fff; } .aviso.ok { background: var(--ok); color: #fff; }

/* passos (contador) */
.contador { display: inline-flex; align-items: center; border: 1.5px solid var(--borda); border-radius: 12px; overflow: hidden; background: var(--sup); }
.contador button { border: 0; background: transparent; width: 36px; height: 36px; font-size: 1.2rem; font-weight: 700; color: var(--cor); cursor: pointer; }
.contador button:disabled { color: var(--txt3); }
.contador span { min-width: 26px; text-align: center; font-weight: 800; }

/* imagem com placeholder */
.foto { background: var(--sup2) center/cover no-repeat; border-radius: 14px; flex: none; display: grid; place-items: center; color: var(--txt3); font-size: 1.6rem; overflow: hidden; }
.esqueleto { background: linear-gradient(90deg, var(--sup2), var(--borda), var(--sup2)); background-size: 200% 100%; animation: brilho 1.2s infinite; border-radius: 12px; }
@keyframes brilho { to { background-position: -200% 0; } }
.gaveta ~ .veu { z-index: 110; }