:root {
    --cor-primaria: #6F4E37;
    --cor-secundaria: #C8A27A;
    --cor-fundo: #F7F3EE;
    --cor-texto: #2B2118;
    --branco: #fff;
    --borda: rgba(0, 0, 0, .1);
    --sutil: rgba(0, 0, 0, .55);
    --ok: #1f7a4d;
    --erro: #b3261e;
    --aviso: #9a6700;
    --info: #1d5fa8;
    --raio: 10px;
    --sombra: 0 1px 3px rgba(0, 0, 0, .08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--cor-texto);
    background: var(--cor-fundo);
}

a { color: var(--cor-primaria); }
code { background: rgba(0, 0, 0, .06); padding: 1px 5px; border-radius: 4px; font-size: .9em; word-break: break-all; }
h1 { font-size: 1.6rem; margin: 0 0 18px; }
h2 { font-size: 1.15rem; margin: 0 0 12px; }
.sutil { color: var(--sutil); }

/* ---------- estrutura ---------- */
.topo {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 12px;
    height: 58px; padding: 0 16px;
    background: var(--cor-primaria); color: var(--branco);
}
.marca { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 600; font-size: 1.05rem; }
.marca img { height: 36px; width: auto; border-radius: 6px; background: var(--branco); padding: 2px; }
.topo-usuario { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.topo-usuario small { opacity: .75; margin-left: 4px; }
.topo-usuario form { margin: 0; }
.topo .btn-link { color: var(--branco); }
.menu-toggle { display: none; background: none; border: 0; color: inherit; font-size: 1.4rem; cursor: pointer; }

.estrutura { display: flex; min-height: calc(100vh - 58px); }
.lateral {
    width: 230px; flex-shrink: 0; padding: 16px 10px;
    background: var(--branco); border-right: 1px solid var(--borda);
}
.lateral a {
    display: block; padding: 9px 12px; margin-bottom: 2px;
    border-radius: 8px; color: var(--cor-texto); text-decoration: none;
}
.lateral a:hover { background: var(--cor-fundo); }
.lateral a.ativo { background: var(--cor-primaria); color: var(--branco); }
.conteudo { flex: 1; min-width: 0; padding: 24px; max-width: 1100px; }

@media (max-width: 800px) {
    .menu-toggle { display: block; }
    .topo-usuario span { display: none; }
    .lateral { position: fixed; top: 58px; bottom: 0; left: -240px; z-index: 15; transition: left .2s; box-shadow: var(--sombra); }
    body.menu-aberto .lateral { left: 0; }
    .conteudo { padding: 16px; }
}

/* ---------- componentes ---------- */
.cartao {
    background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio);
    padding: 20px; margin-bottom: 18px; box-shadow: var(--sombra);
}
.cartao.info { background: transparent; box-shadow: none; }
.cartao-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cartao-topo h2 { margin: 0; }
.subtitulo { font-size: 1rem; margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--borda); }
.subtitulo:first-child { margin-top: 0; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 16px; border-radius: 8px; border: 1px solid var(--borda);
    background: var(--branco); color: var(--cor-texto); font: inherit; font-weight: 500;
    cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { filter: brightness(.96); }
.btn-primario { background: var(--cor-primaria); border-color: var(--cor-primaria); color: var(--branco); }
.btn-perigo { color: var(--erro); border-color: rgba(179, 38, 30, .35); }
.btn-pequeno { padding: 5px 10px; font-size: .85rem; }
.btn-bloco { width: 100%; }
.btn-link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; text-decoration: underline; }
.botoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

.alerta { padding: 11px 14px; border-radius: 8px; margin-bottom: 14px; border: 1px solid; }
.alerta-ok { background: #e8f5ee; border-color: #b6dfc8; color: var(--ok); }
.alerta-erro { background: #fdecea; border-color: #f3c0bc; color: var(--erro); }
.alerta-aviso { background: #fff6e0; border-color: #f0d79a; color: var(--aviso); }
.alerta-info { background: #eaf2fb; border-color: #bcd5ef; color: var(--info); margin-top: 16px; }

.selo { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: .8rem; font-weight: 600; }
.selo-ok { background: #e8f5ee; color: var(--ok); }
.selo-off { background: #eee; color: #666; }
.selo-alerta { background: #fdecea; color: var(--erro); }

/* ---------- formulários ---------- */
.grade-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px 18px; }
.campo-largo { grid-column: 1 / -1; }
.campo label, label { display: block; font-weight: 500; margin-bottom: 4px; }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input:not([type]), select, textarea {
    width: 100%; padding: 9px 11px; font: inherit; color: inherit;
    border: 1px solid rgba(0, 0, 0, .2); border-radius: 8px; background: var(--branco);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--cor-secundaria); outline-offset: 0; border-color: var(--cor-primaria); }
input:disabled { background: #f2f2f2; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 6px 0; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--cor-primaria); }
.check.pequeno { font-size: .85rem; color: var(--sutil); }
.ajuda { display: block; color: var(--sutil); font-size: .82rem; margin-top: 3px; }
.cor-linha { display: flex; align-items: center; gap: 10px; }
.cor-linha input[type=color] { width: 54px; height: 40px; padding: 2px; border: 1px solid rgba(0, 0, 0, .2); border-radius: 8px; cursor: pointer; }
.chave-linha { display: flex; gap: 8px; }
.chave-linha input { font-family: ui-monospace, Consolas, monospace; }

.grupos-permissoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 16px; }
.grupos-permissoes fieldset { border: 1px solid var(--borda); border-radius: 8px; padding: 10px 14px; margin: 0; }
.grupos-permissoes legend { font-weight: 600; padding: 0 6px; }

/* ---------- abas ---------- */
.abas { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 18px; border-bottom: 1px solid var(--borda); }
.abas a {
    padding: 10px 16px; text-decoration: none; color: var(--sutil); white-space: nowrap;
    border-bottom: 3px solid transparent; margin-bottom: -1px; font-weight: 500;
}
.abas a.ativa { color: var(--cor-primaria); border-color: var(--cor-primaria); }

/* ---------- tabelas ---------- */
.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th, .tabela td { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela th { font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--sutil); font-weight: 600; }
.acoes { white-space: nowrap; text-align: right; }
.acoes form { display: inline; margin: 0; }

/* ---------- aparência ---------- */
.logo-bloco { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.logo-previa { max-height: 90px; max-width: 220px; border: 1px solid var(--borda); border-radius: 8px; padding: 6px; background: var(--branco); }
.previa-tema { margin-top: 20px; max-width: 340px; border-radius: 14px; overflow: hidden; border: 1px solid var(--borda); background: var(--cor-fundo); color: var(--cor-texto); }
.previa-topo { background: var(--cor-primaria); color: var(--branco); padding: 12px 16px; font-weight: 600; }
.previa-corpo { padding: 14px 16px; }
.previa-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--borda); }
.previa-botao { margin-top: 14px; width: 100%; padding: 10px; border: 0; border-radius: 8px; background: var(--cor-primaria); color: var(--branco); font: inherit; font-weight: 600; }
.previa-destaque { display: inline-block; margin-top: 10px; padding: 2px 10px; border-radius: 99px; background: var(--cor-secundaria); color: var(--cor-texto); font-size: .8rem; font-weight: 600; }

.atalhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 18px; }
.atalho { display: flex; flex-direction: column; gap: 2px; margin: 0; text-decoration: none; color: var(--cor-texto); border-left: 4px solid var(--cor-primaria); }
.atalho:hover { filter: brightness(.98); }
.atalho strong { font-size: 1.05rem; }
.lista-passos { margin: 0; padding-left: 20px; }
.lista-passos li { margin: 6px 0; }
.info-lista { margin: 0; padding-left: 20px; }

.lateral .grupo { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--sutil); padding: 14px 12px 4px; }
.botoes.centro { justify-content: center; margin-top: 8px; }
.erro-texto { color: var(--erro); }

/* ---------- produtos / mesas ---------- */
.prod-thumb { width: 44px; height: 44px; border-radius: 8px; background: var(--cor-secundaria); display: inline-block; object-fit: cover; vertical-align: middle; }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.filtros input, .filtros select { width: auto; flex: 1; min-width: 160px; }
.grade-qr { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.qr-cartao { background: var(--branco); border: 1px solid var(--borda); border-radius: 12px; padding: 14px; text-align: center; }
.qr-cartao.inativa { opacity: .5; }
.qr-cartao .num { font-size: 1.3rem; font-weight: 700; }
.qr-cartao [data-qr] svg { width: 120px; height: 120px; display: block; margin: 8px auto; }
.qr-cartao form { display: inline; }

/* ---------- painel de mesas ---------- */
.barra-painel { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: .85rem; margin-bottom: 14px; }
.legenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; background: var(--c); }
.grade-mesas { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.mesa {
    border-radius: 12px; padding: 14px; background: var(--branco); border: 2px solid var(--borda);
    min-height: 116px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.mesa .num { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.mesa .st { font-size: .8rem; font-weight: 600; }
.mesa .val { margin-top: auto; font-weight: 600; }
.mesa.livre { opacity: .6; }
.mesa.aguardando { border-color: #3b82f6; } .mesa.aguardando .st { color: #1d5fa8; }
.mesa.preparo { border-color: #7c3aed; } .mesa.preparo .st { color: #6d28d9; }
.mesa.pronto { border-color: #1f7a4d; } .mesa.pronto .st { color: #1f7a4d; }
.mesa.chamando { border-color: #d97706; background: #fff6e0; animation: pulsa 1.2s infinite; } .mesa.chamando .st { color: #9a6700; }
@keyframes pulsa { 50% { box-shadow: 0 0 0 6px rgba(217, 119, 6, .25); } }
.chamados { display: flex; flex-direction: column; gap: 8px; }
.chamado { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; background: #fff6e0; border: 1px solid #f0d79a; flex-wrap: wrap; }
.chamado.a-caminho { background: #eef4fd; border-color: #bcd5ef; }
.chamado strong { font-size: 1.1rem; }
.chamado .acoes { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

.modal { border: 0; border-radius: 14px; padding: 0; width: min(560px, calc(100% - 24px)); box-shadow: 0 10px 40px rgba(0, 0, 0, .25); }
.modal::backdrop { background: rgba(0, 0, 0, .4); }
.modal-conteudo { padding: 20px; }
.modal-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.modal-topo h2 { margin: 0; }
.pedido-bloco { border: 1px solid var(--borda); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.pedido-cab { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pedido-cab .direita { margin-left: auto; }
.itens { margin: 8px 0; padding-left: 18px; }
.pedido-bloco .botoes { margin-top: 8px; }
.selo-aguardando_pagamento { background: #eaf2fb; color: var(--info); }
.selo-em_preparo { background: #f1eafd; color: #6d28d9; }
.selo-pronto, .selo-entregue { background: #e8f5ee; color: var(--ok); }
.selo-cancelado { background: #fdecea; color: var(--erro); }

.resumo-dia { display: flex; gap: 24px; flex-wrap: wrap; }
.resumo-dia div { display: flex; flex-direction: column; }
.resumo-dia strong { font-size: 1.2rem; }
input[type=date] { padding: 9px 11px; font: inherit; border: 1px solid rgba(0, 0, 0, .2); border-radius: 8px; }

/* ---------- cozinha ---------- */
.kds { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ticket { background: var(--branco); border-radius: 10px; border-top: 6px solid var(--k); box-shadow: var(--sombra); padding: 12px 14px; display: flex; flex-direction: column; }
.ticket.pronto { opacity: .75; }
.ticket header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; gap: 8px; }
.ticket header strong { font-size: 1.2rem; }
.ticket ul { margin: 10px 0 12px; padding: 0; list-style: none; font-size: 1.05rem; }
.ticket li { padding: 6px 0; border-bottom: 1px dashed var(--borda); }
.ticket li small { display: block; color: var(--erro); font-weight: 600; }
.ticket .obs { color: var(--erro); font-weight: 600; margin: 0 0 10px; }
.ticket .btn { margin-top: auto; }
.origem { font-size: .72rem; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: #eee; }
.origem.ifood { background: #ea1d2c; color: #fff; }
.origem.site { background: #1d5fa8; color: #fff; }

/* ---------- manual ---------- */
.manual-indice { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.manual-secao { scroll-margin-top: 70px; }
.manual-secao ol { padding-left: 20px; }
.manual-secao li { margin: 5px 0; }
.manual-imagens { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; align-items: flex-start; }
.manual-imagens figure { margin: 0; flex: 1 1 360px; max-width: 760px; }
.manual-imagens figure.celular { flex: 0 1 230px; }
.manual-imagens img { width: 100%; display: block; border: 1px solid var(--borda); border-radius: 8px; }
.manual-imagens figcaption { font-size: .82rem; color: var(--sutil); margin-top: 4px; }

/* ---------- crédito do desenvolvedor ---------- */
.credito { text-align: center; font-size: .78rem; color: var(--sutil); padding: 24px 16px 8px; }
.credito a { color: inherit; font-weight: 600; }
.credito.no-login { padding: 18px 0 0; }
.credito.no-caixa { padding: 0 16px 10px; }
/* Nas páginas do cliente, fica acima da barra fixa de botões. */
.credito.cliente { padding-bottom: 170px; }

/* ---------- login ---------- */
.pagina-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px; }
.caixa-login {
    width: 100%; max-width: 380px; background: var(--branco); padding: 28px;
    border-radius: 14px; box-shadow: 0 6px 30px rgba(0, 0, 0, .08); text-align: left;
}
.caixa-login h1 { margin-bottom: 4px; text-align: center; }
.caixa-login .sutil { text-align: center; margin-top: 0; }
.caixa-login label { margin-bottom: 14px; }
.caixa-login label input { margin-top: 4px; }
.logo-login { display: block; max-height: 80px; max-width: 200px; margin: 0 auto 12px; }