/* Retaguarda — tema preto e branco. As cores vêm de --cor-primaria / --cor-secundaria (Configurações). */
:root {
  --cor-primaria: #000000;
  --cor-secundaria: #3a3a3a;
  --fundo: #f4f4f4;
  --borda: #dedede;
  --texto-suave: #6b6b6b;
}

html, body { font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; background: var(--fundo); color: #111; }
a { color: var(--cor-primaria); }

/* ---- Estrutura */
.app { display: flex; min-height: 100vh; }
.menu { width: 260px; flex-shrink: 0; background: var(--cor-primaria); color: #fff; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.menu-topo { padding: 20px 16px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.12); }
.menu-topo img { max-width: 120px; max-height: 120px; }
.menu-topo .nome { font-weight: 700; font-size: 1.2rem; margin-top: 8px; }
.menu nav { flex: 1; overflow-y: auto; padding: 8px 0; }
.menu .grupo { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 16px; background: none; border: 0; border-left: 3px solid transparent; color: rgba(255,255,255,.88); text-decoration: none; text-align: left; font-size: .97rem; border-bottom: 1px solid rgba(255,255,255,.08); cursor: pointer; }
.menu .grupo svg { width: 22px; height: 22px; flex-shrink: 0; }
.menu .grupo > span:not(.seta):not(.em-breve) { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu .grupo:hover { background: rgba(255,255,255,.08); color: #fff; }
.menu .grupo.ativo, .menu a.grupo.active { color: #fff; border-left-color: #fff; font-weight: 600; }
.menu a.grupo.active { background: rgba(255,255,255,.14); }
.menu .grupo.aberto { background: rgba(255,255,255,.10); color: #fff; }
.menu .grupo .seta { display: flex; transition: transform .2s; opacity: .7; }
.menu .grupo .seta svg { width: 16px; height: 16px; }
.menu .grupo.aberto .seta { transform: rotate(90deg); }
.menu .subitens { max-height: 0; overflow: hidden; transition: max-height .25s ease; background: rgba(0,0,0,.22); }
.menu .subitens.aberto { max-height: 600px; }
.menu .subitens a.item { display: block; padding: 8px 16px 8px 50px; color: rgba(255,255,255,.8); text-decoration: none; font-size: .9rem; border-left: 3px solid transparent; }
.menu .subitens a.item:hover { background: rgba(255,255,255,.08); color: #fff; }
.menu .subitens a.item.active { color: #fff; font-weight: 600; border-left-color: #fff; background: rgba(255,255,255,.10); }
.menu .em-breve { white-space: nowrap; font-size: .6rem; background: rgba(255,255,255,.2); border-radius: 8px; padding: 1px 6px; margin-left: 6px; }
.menu-rodape { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.12); font-size: .85rem; }
.menu-rodape button { width: 100%; margin-top: 8px; }
.conteudo { flex: 1; padding: 28px 32px; min-width: 0; }

/* ---- Componentes */
.titulo { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.titulo h1 { font-size: 1.6rem; font-weight: 700; margin: 0; }
.titulo .acoes { margin-left: auto; display: flex; gap: 8px; }
.cartao { background: #fff; border: 1px solid var(--borda); border-radius: 10px; padding: 20px; margin-bottom: 20px; }
.cartao h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 14px; }
.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 20px; }
.indicador { background: #fff; border: 1px solid var(--borda); border-radius: 10px; padding: 16px 18px; }
.indicador .rotulo { color: var(--texto-suave); font-size: .85rem; }
.indicador .valor { font-size: 1.7rem; font-weight: 700; margin-top: 4px; }
.indicador.destaque { background: var(--cor-primaria); color: #fff; border-color: var(--cor-primaria); }
.indicador.destaque .rotulo { color: rgba(255,255,255,.7); }

.btn-primario { background: var(--cor-primaria); border: 1px solid var(--cor-primaria); color: #fff; }
.btn-primario:hover, .btn-primario:focus { background: var(--cor-secundaria); border-color: var(--cor-secundaria); color: #fff; }
.btn-contorno { background: #fff; border: 1px solid var(--cor-primaria); color: var(--cor-primaria); }
.btn-contorno:hover { background: var(--cor-primaria); color: #fff; }

.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); border-bottom-width: 1px; }
.table td { vertical-align: middle; }
.linha-clicavel { cursor: pointer; }
.linha-clicavel:hover td { background: #f7f7f7; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.etiqueta { display: inline-block; font-size: .72rem; padding: 2px 8px; border-radius: 10px; background: #eee; color: #333; }
.etiqueta.escura { background: var(--cor-primaria); color: #fff; }
.etiqueta.alerta { background: #fde2e1; color: #9b1c1c; }
.bolinha { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; margin-right: 6px; border: 1px solid #ccc; }

.form-label { font-weight: 600; font-size: .85rem; margin-bottom: 4px; }
.form-text { font-size: .78rem; }
.grade-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; }
.grade-form .largo { grid-column: 1 / -1; }
.form-control:focus, .form-select:focus { border-color: var(--cor-primaria); box-shadow: 0 0 0 .2rem rgba(0,0,0,.1); }
.form-check-input:checked { background-color: var(--cor-primaria); border-color: var(--cor-primaria); }

.aviso-teste { background: #fff8db; border: 1px solid #f1d77a; border-radius: 8px; padding: 10px 14px; margin-bottom: 20px; font-size: .9rem; }

/* ---- Login */
.tela-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--cor-primaria); padding: 20px; }
.caixa-login { background: #fff; border-radius: 14px; padding: 36px; width: 100%; max-width: 400px; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.caixa-login .logo { text-align: center; margin-bottom: 18px; }
.caixa-login .logo img { max-width: 130px; max-height: 130px; }

/* ---- Erros do Blazor */
#blazor-error-ui { background: #fff3cd; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
.valid.modified:not([type=checkbox]) { outline: none; }

.aviso-licenca { background: #fff1c2; border: 1px solid #e8c95a; color: #5c4400; border-radius: 8px; padding: 10px 14px; margin-bottom: 20px; }
.aviso-licenca.bloqueada { background: #fde2e1; border-color: #f0a3a0; color: #8a1c1c; }
.etiqueta.aviso { background: #fff1c2; color: #7a5b00; }

/* Entrada de nota */
.painel-vinculo { background: #fafafa; border: 1px solid var(--borda); border-radius: 8px; padding: 14px; margin: 6px 0 4px; }
.painel-vinculo .resultado { max-height: 220px; overflow-y: auto; border: 1px solid var(--borda); border-radius: 6px; background: #fff; }
.painel-vinculo .resultado div { padding: 6px 10px; cursor: pointer; border-bottom: 1px solid #f0f0f0; }
.painel-vinculo .resultado div:hover, .painel-vinculo .resultado div.sel { background: var(--cor-primaria); color: #fff; }
.etiqueta.ok { background: #dff5e3; color: #1d6b2f; }
.totais-nota { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.totais-nota div { background: #f7f7f7; border-radius: 8px; padding: 8px 12px; }
.totais-nota small { display: block; color: var(--texto-suave); font-size: .75rem; }
.totais-nota strong { font-variant-numeric: tabular-nums; }
.custo-sobe { color: #9b1c1c; } .custo-desce { color: #1d6b2f; }
.area-xml { border: 2px dashed var(--borda); border-radius: 10px; padding: 18px; text-align: center; background: #fcfcfc; }
.table td.num { white-space: nowrap; }

/* Multi-loja */
.barra-loja { display: flex; align-items: center; gap: 10px; margin: -12px 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--borda); font-size: .9rem; }
.barra-loja .rotulo { color: var(--texto-suave); text-transform: uppercase; font-size: .72rem; letter-spacing: .06em; }
.barra-loja select { width: auto; min-width: 260px; font-weight: 600; }
.chave-gerada { font-family: monospace; font-size: 1.1rem; background: #111; color: #fff; padding: 10px 14px; border-radius: 8px; user-select: all; word-break: break-all; }
.input-preco { max-width: 130px; text-align: right; }

/* ---- Caixas e conferência */
.abas-caixa .nav-link { color: var(--texto-suave); }
.abas-caixa .nav-link.active { color: var(--cor-primaria); font-weight: 600; }
.grade-caixas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.linha-dia td { background: #f3f3f3; font-weight: 600; font-size: .85rem; }
.tabela-resumo tr.sep td { border-top: 2px solid var(--borda); }
.tabela-resumo td:first-child { color: var(--texto-suave); }
.tabela-conferencia td, .tabela-conferencia th { white-space: nowrap; }
.tabela-conferencia td:first-child { white-space: normal; }
.tabela-conferencia tfoot td { border-top: 2px solid var(--cor-primaria); }

/* ---- Equipamentos: editar terminal */
.grade-form .col-2x { grid-column: span 2; }
.grade-form .col-3x { grid-column: 1 / -1; }
@media (max-width: 900px) { .grade-form .col-2x { grid-column: 1 / -1; } }
.cfg-topo { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.cfg-secoes { display: flex; flex-wrap: wrap; gap: 6px; }
.cfg-secoes button { border: 1px solid var(--borda); background: #fff; border-radius: 18px; padding: 5px 14px; font-size: .88rem; color: #222; }
.cfg-secoes button:hover { border-color: #999; }
.cfg-secoes button.ativa { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; font-weight: 600; }
.cfg-secoes button.ativa .cfg-sel.uso { background: rgba(255,255,255,.25); color: #fff; }
.cfg-copiar { display: flex; gap: 6px; }
.cfg-copiar select { min-width: 0; width: 230px; max-width: 100%; }
.cfg-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 4px 24px; }
.cfg-item { padding: 6px 0; border-bottom: 1px dashed #ececec; }
.cfg-item .form-check-input { cursor: pointer; }
.cfg-item .form-check-input:checked { background-color: var(--cor-primaria); border-color: var(--cor-primaria); }
.cfg-ajuda { font-size: .78rem; color: var(--texto-suave); margin: 2px 0 0 2.5em; }
.cfg-sub { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); margin: 22px 0 8px; }
.cfg-sel { display: inline-block; font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 8px; margin-left: 6px; vertical-align: middle; }
.cfg-sel.uso { background: #dff5e3; color: #1d6b2f; }
.cfg-aviso { font-size: .82rem; background: #f6f6f6; border-left: 3px solid #bbb; padding: 6px 10px; margin-bottom: 14px; color: #555; }

/* ---- Cadastro de produto (abas no estilo do SQG) */
.prod-basicos { display: flex; gap: 20px; align-items: flex-start; }
.prod-foto { flex: 0 0 120px; height: 120px; border-radius: 50%; border: 2px dashed var(--borda); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #9a9a9a; gap: 4px; margin-top: 8px; }
@media (max-width: 700px) { .prod-basicos { flex-direction: column; } .prod-foto { align-self: center; } }
.prod-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.prod-chip { display: inline-flex; align-items: center; gap: 4px; font-family: monospace; font-size: .8rem; background: #f0f0f0; border-radius: 12px; padding: 2px 4px 2px 10px; }
.prod-chip button { border: 0; background: transparent; color: #9b1c1c; font-size: 1rem; line-height: 1; padding: 0 4px; }
.prod-venda { background: var(--cor-primaria) !important; color: #fff !important; font-weight: 700; }
.prod-tabela th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); font-weight: 600; }
.prod-tabela td { vertical-align: middle; }
.prod-bloco { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--borda); border-radius: 8px; padding: 10px 14px; margin: 10px 0 8px; background: #fafafa; }
.btn-preencher { background: #fff; border: 1px solid var(--cor-primaria); color: var(--cor-primaria); font-weight: 600; }
.btn-preencher:hover { background: var(--cor-primaria); color: #fff; }
.prod-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; text-align: center; }
.prod-presets .rotulo { font-weight: 700; margin-bottom: 6px; }
.prod-presets .btn { width: 100%; }
.prod-duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 0 18px; }
.prod-config { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.prod-totais { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: .9rem; border-top: 1px solid var(--borda); padding-top: 10px; }
.prod-rodape { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .78rem; color: var(--texto-suave); padding: 6px 2px 24px; }
.prod-busca { border: 1px solid var(--borda); border-radius: 8px; padding: 10px; margin: 10px 0; background: #fafafa; }
.prod-busca-lista { list-style: none; margin: 8px 0 0; padding: 0; max-height: 260px; overflow-y: auto; }
.prod-busca-lista li { padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.prod-busca-lista li:hover { background: #ececec; }
fieldset[disabled] .btn-preencher { opacity: .5; }
.cfg-sel:not(.uso) { background: #eee; color: #666; }

/* ---- Delivery */
.dlv-abas { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.dlv-abas button { border: 1px solid var(--borda); background: #fff; border-radius: 8px; padding: 7px 14px; font-weight: 600; font-size: .9rem; }
.dlv-abas button .n { display: inline-block; min-width: 22px; margin-left: 6px; padding: 0 6px; border-radius: 10px; background: #eee; font-size: .8rem; text-align: center; }
.dlv-abas button.ativa { background: var(--cor-primaria); color: #fff; border-color: var(--cor-primaria); }
.dlv-abas button.ativa .n { background: rgba(255,255,255,.25); color: #fff; }
.dlv-abas button .n.alerta { background: #d93025; color: #fff; }
.dlv-grade { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 18px; align-items: start; }
@media (max-width: 1250px) { .dlv-grade { grid-template-columns: 1fr; } }
.dlv-tabela td { padding-top: 7px; padding-bottom: 7px; }
.dlv-tabela tr.sel td { background: #fff4e5 !important; }
.dlv-tabela .itens { max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; }
.dlv-canal { display: inline-flex; align-items: center; justify-content: center; min-width: 74px; padding: 3px 8px; border-radius: 6px; font-size: .72rem; font-weight: 700; color: #fff; background: #555; }
.dlv-canal.c1 { background: #ef6c00; } .dlv-canal.c2 { background: #1fa855; } .dlv-canal.c3 { background: #455a64; }
.dlv-canal.c4 { background: #3949ab; } .dlv-canal.c5 { background: #ea1d2c; } .dlv-canal.c6 { background: #f6c000; color: #111; }
.dlv-etapa { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: .75rem; font-weight: 700; color: #fff; }
.dlv-etapa.e1 { background: #d93025; } .dlv-etapa.e2 { background: #ef6c00; } .dlv-etapa.e3 { background: #188038; }
.dlv-etapa.e4 { background: #1a73e8; } .dlv-etapa.e5 { background: #5f6368; } .dlv-etapa.e6 { background: #bdbdbd; color: #333; }
.dlv-tempo { font-variant-numeric: tabular-nums; font-weight: 600; }
.dlv-tempo.atrasado { color: #d93025; }
.dlv-painel { position: sticky; top: 16px; }
.dlv-painel .cab { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.dlv-painel .cab .numero { font-size: 1.6rem; font-weight: 800; }
.dlv-painel .bloco { border-top: 1px solid var(--borda); padding-top: 10px; margin-top: 10px; }
.dlv-painel .bloco .rotulo { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); margin-bottom: 4px; }
.dlv-painel .linha-item { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; }
.dlv-painel .linha-item .obs { font-size: .78rem; color: #b45309; }
.dlv-painel .total { display: flex; justify-content: space-between; font-size: 1.25rem; font-weight: 800; margin-top: 6px; }
.dlv-painel .acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.dlv-painel .acoes .largo { grid-column: 1 / -1; }
.dlv-historico { list-style: none; padding: 0; margin: 0; font-size: .85rem; }
.dlv-historico li { display: flex; gap: 10px; padding: 2px 0; }
.dlv-historico li span:first-child { color: var(--texto-suave); font-variant-numeric: tabular-nums; min-width: 42px; }
.btn-laranja { background: #ef6c00; border: 1px solid #ef6c00; color: #fff; font-weight: 600; }
.btn-laranja:hover { background: #d65f00; color: #fff; }
.btn-verde { background: #188038; border: 1px solid #188038; color: #fff; font-weight: 600; }
.btn-verde:hover { background: #136c2f; color: #fff; }
.dlv-modal-fundo { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 900; display: flex; align-items: center; justify-content: center; padding: 16px; }
.dlv-modal { background: #fff; border-radius: 12px; width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto; padding: 22px; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.dlv-modal h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 14px; }
.dlv-modal .rodape { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.dlv-formas { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.dlv-formas button { border: 2px solid var(--borda); background: #fff; border-radius: 8px; padding: 9px 6px; font-weight: 600; font-size: .88rem; }
.dlv-formas button.sel { border-color: #ef6c00; background: #fff4e5; }
/* PDV do delivery */
.dlv-pdv { display: grid; grid-template-columns: 360px minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
@media (max-width: 1350px) { .dlv-pdv { grid-template-columns: 1fr 1fr; } .dlv-pdv .col-resumo { grid-column: 1 / -1; } }
@media (max-width: 800px) { .dlv-pdv { grid-template-columns: 1fr; } }
.dlv-pdv .cartao { margin-bottom: 0; }
.dlv-tipo { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.dlv-tipo button { border: 2px solid var(--borda); background: #fff; border-radius: 8px; padding: 8px; font-weight: 700; }
.dlv-tipo button.sel { border-color: var(--cor-primaria); background: var(--cor-primaria); color: #fff; }
.dlv-sugestoes { border: 1px solid var(--borda); border-radius: 8px; margin-top: 4px; max-height: 240px; overflow-y: auto; background: #fff; }
.dlv-sugestoes div { padding: 7px 10px; cursor: pointer; border-bottom: 1px solid #f0f0f0; font-size: .9rem; }
.dlv-sugestoes div:hover, .dlv-sugestoes div.sel { background: var(--cor-primaria); color: #fff; }
.dlv-sugestoes div small { display: block; opacity: .75; }
.dlv-carrinho { width: 100%; }
.dlv-carrinho td { padding: 6px 4px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.dlv-carrinho input.qtd { width: 70px; text-align: right; }
.dlv-carrinho .obs { font-size: .78rem; }
.dlv-total-grande { font-size: 1.9rem; font-weight: 800; text-align: right; }
.dlv-linha { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 3px 0; }

/* ================================================================ MGM Flow Delivery (tela própria, tema escuro) */
.flow {
  --f-fundo: #0d0f13; --f-painel: #15181e; --f-painel2: #1b1f27; --f-borda: #262b35; --f-texto: #e9ebef; --f-suave: #9aa1ad;
  --f-laranja: #ff6a00; --f-laranja2: #ff8a2a; --f-verde: #1fa855; --f-vermelho: #e5383b; --f-azul: #2f7cf6; --f-amarelo: #f5b400;
  display: flex; min-height: 100vh; background: var(--f-fundo); color: var(--f-texto); font-family: "Segoe UI", system-ui, Roboto, Arial, sans-serif;
}
.flow a { color: var(--f-laranja2); }
.flow-menu { width: 230px; flex-shrink: 0; background: #0a0c10; border-right: 1px solid var(--f-borda); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.flow-logo { padding: 22px 18px 18px; text-align: center; }
.flow-logo .m { font-size: 2.1rem; font-weight: 900; font-style: italic; letter-spacing: -1px; line-height: 1; color: #fff; }
.flow-logo .f { font-size: 2.1rem; font-weight: 900; font-style: italic; line-height: 1; background: linear-gradient(90deg, #ff9a1f, #ff5a00); -webkit-background-clip: text; background-clip: text; color: transparent; }
.flow-logo .d { letter-spacing: .55em; font-size: .78rem; color: #cfd3da; margin-top: 6px; }
.flow-menu nav { flex: 1; padding: 6px 10px; overflow-y: auto; }
.flow-menu nav a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; margin-bottom: 4px; border-radius: 8px; color: #d6d9df; text-decoration: none; font-weight: 500; }
.flow-menu nav a svg { width: 20px; height: 20px; flex-shrink: 0; }
.flow-menu nav a:hover { background: var(--f-painel2); color: #fff; }
.flow-menu nav a.active { background: var(--f-laranja); color: #fff; font-weight: 700; }
.flow-menu nav .sep { height: 1px; background: var(--f-borda); margin: 10px 4px; }
.flow-rodape { padding: 12px; border-top: 1px solid var(--f-borda); }
.flow-rodape .caixa { display: flex; align-items: center; gap: 10px; background: var(--f-painel); border: 1px solid var(--f-borda); border-radius: 10px; padding: 10px; margin-bottom: 10px; }
.flow-rodape .caixa small { display: block; color: var(--f-suave); font-size: .72rem; }
.flow-rodape .avatar { width: 38px; height: 38px; border-radius: 50%; background: #2a2f3a; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.flow-rodape .sair { width: 100%; background: #3a1214; border: 1px solid #5c1d20; color: #ff6b6b; border-radius: 8px; padding: 9px; font-weight: 600; }
.flow-rodape .sair:hover { background: #4a1517; }
.flow-conteudo { flex: 1; min-width: 0; padding: 18px 20px; }
.flow-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.flow-topo h1 { font-size: 1.35rem; font-weight: 700; margin: 0; }
.flow-status { margin-left: auto; display: flex; align-items: center; gap: 10px; background: var(--f-painel); border: 1px solid var(--f-borda); border-radius: 10px; padding: 8px 14px; font-size: .85rem; }
.flow-status .ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--f-verde); box-shadow: 0 0 8px var(--f-verde); }
.flow-status .ponto.off { background: var(--f-vermelho); box-shadow: 0 0 8px var(--f-vermelho); }
.flow-status small { display: block; color: var(--f-suave); font-size: .72rem; }

/* componentes da retaguarda dentro do tema escuro */
.flow .cartao { background: var(--f-painel); border-color: var(--f-borda); color: var(--f-texto); border-radius: 12px; }
.flow .cartao h2 { color: #fff; }
.flow .titulo h1 { color: #fff; }
.flow .form-control, .flow .form-select { background-color: var(--f-painel2); border-color: #313744; color: var(--f-texto); }
.flow .form-control::placeholder { color: #6f7682; }
.flow .form-control:focus, .flow .form-select:focus { background-color: var(--f-painel2); color: #fff; border-color: var(--f-laranja); box-shadow: 0 0 0 .2rem rgba(255,106,0,.18); }
.flow .form-label { color: #c9ccd3; }
.flow .form-text, .flow .text-muted { color: var(--f-suave) !important; }
.flow .form-check-input { background-color: var(--f-painel2); border-color: #444b58; }
.flow .form-check-input:checked { background-color: var(--f-laranja); border-color: var(--f-laranja); }
.flow .table { --bs-table-bg: transparent; --bs-table-color: var(--f-texto); --bs-table-border-color: var(--f-borda); --bs-table-hover-bg: rgba(255,255,255,.03); --bs-table-hover-color: #fff; color: var(--f-texto); }
.flow .table thead th { color: var(--f-suave); }
.flow .btn-primario { background: var(--f-laranja); border-color: var(--f-laranja); color: #fff; }
.flow .btn-primario:hover { background: var(--f-laranja2); border-color: var(--f-laranja2); }
.flow .btn-contorno { background: var(--f-painel2); border: 1px solid #343a46; color: #e6e8ec; }
.flow .btn-contorno:hover { background: #262b35; color: #fff; }
.flow .btn-outline-secondary { color: #cfd3da; border-color: #3a404c; }
.flow .btn-link { color: var(--f-laranja2); }
.flow .indicador { background: var(--f-painel); border-color: var(--f-borda); }
.flow .indicador.destaque { background: var(--f-laranja); border-color: var(--f-laranja); }
.flow .alert-danger { background: #3a1214; border-color: #5c1d20; color: #ffb4b4; }
.flow .alert-success { background: #10301c; border-color: #1d5532; color: #a6f0c0; }
.flow .aviso-teste, .flow .aviso-licenca { background: #2e2410; border-color: #5a4515; color: #f5d68a; }
.flow .etiqueta { background: #2a2f3a; color: #d6d9df; }
.flow .etiqueta.ok { background: #10301c; color: #6fe39b; }
.flow .etiqueta.alerta { background: #3a1214; color: #ff8a8a; }
.flow .etiqueta.escura { background: var(--f-laranja); color: #fff; }
.flow .dlv-sugestoes { background: var(--f-painel2); border-color: #313744; }
.flow .dlv-sugestoes div { border-bottom-color: #262b35; }
.flow .dlv-sugestoes div:hover, .flow .dlv-sugestoes div.sel { background: var(--f-laranja); color: #fff; }
.flow .dlv-carrinho td { border-bottom-color: #262b35; }
.flow .dlv-tipo button, .flow .dlv-formas button { background: var(--f-painel2); border-color: #313744; color: #e6e8ec; }
.flow .dlv-tipo button.sel { background: var(--f-laranja); border-color: var(--f-laranja); color: #fff; }
.flow .dlv-formas button.sel { border-color: var(--f-laranja); background: rgba(255,106,0,.15); color: #fff; }
.flow .dlv-modal { background: var(--f-painel); color: var(--f-texto); border: 1px solid var(--f-borda); }
.flow .dlv-modal h3 { color: #fff; }

/* cartões dos canais */
.flow-canais { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
@media (max-width: 1100px) { .flow-canais { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.flow-canal { position: relative; background: var(--f-painel); border: 1px solid var(--f-borda); border-radius: 12px; padding: 12px 8px 10px; text-align: center; cursor: pointer; }
.flow-canal.sel { border-color: var(--f-laranja); }
.flow-canal .icone { width: 46px; height: 46px; border-radius: 12px; margin: 0 auto 6px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.05rem; color: #fff; }
.flow-canal .icone svg { width: 26px; height: 26px; }
.flow-canal .nome { font-weight: 700; font-size: .92rem; }
.flow-canal .qtd { color: var(--f-suave); font-size: .78rem; }
.flow-canal .on { font-size: .72rem; color: #4cd07d; }
.flow-canal .on.off { color: var(--f-suave); }
.flow-canal .on::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 5px; vertical-align: middle; }
.flow-canal .bolha { position: absolute; top: 6px; right: 10px; background: var(--f-vermelho); color: #fff; font-size: .72rem; font-weight: 700; min-width: 20px; height: 20px; border-radius: 10px; padding: 0 5px; line-height: 20px; }
.cor-c1 { background: #ff7a1a; } .cor-c2 { background: #1fb556; } .cor-c3 { background: #4a5568; } .cor-c4 { background: #3d4452; }
.cor-c5 { background: #ea1d2c; } .cor-c6 { background: #ffc400; color: #111 !important; } .cor-c9 { background: #3d4452; }

/* painel de pedidos */
.flow-grade { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; }
@media (max-width: 1250px) { .flow-grade { grid-template-columns: 1fr; } }
.flow-caixa { background: var(--f-painel); border: 1px solid var(--f-borda); border-radius: 12px; }
.flow-abas { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px; border-bottom: 1px solid var(--f-borda); align-items: center; }
.flow-abas button { background: var(--f-painel2); border: 1px solid #2c323d; color: #e6e8ec; border-radius: 8px; padding: 8px 14px; font-weight: 600; font-size: .9rem; }
.flow-abas button .n { display: inline-block; min-width: 22px; margin-left: 8px; padding: 0 6px; border-radius: 6px; font-size: .78rem; text-align: center; background: #343a46; }
.flow-abas button .n.vermelho { background: var(--f-vermelho); } .flow-abas button .n.laranja { background: var(--f-laranja); }
.flow-abas button .n.verde { background: var(--f-verde); } .flow-abas button .n.azul { background: var(--f-azul); }
.flow-abas button.ativa { background: var(--f-laranja); border-color: var(--f-laranja); color: #fff; }
.flow-abas button.ativa .n { background: rgba(0,0,0,.25); }
.flow-tabela { width: 100%; border-collapse: separate; border-spacing: 0; }
.flow-tabela th { color: var(--f-suave); font-weight: 500; font-size: .82rem; padding: 10px 12px; border-bottom: 1px solid var(--f-borda); }
.flow-tabela td { padding: 9px 12px; border-bottom: 1px solid #1f242d; vertical-align: middle; }
.flow-tabela tr { cursor: pointer; }
.flow-tabela tr:hover td { background: rgba(255,255,255,.025); }
.flow-tabela tr.sel td { background: rgba(255,106,0,.08); border-top: 1px solid var(--f-laranja); border-bottom: 1px solid var(--f-laranja); }
.flow-tabela tr.sel td:first-child { border-left: 1px solid var(--f-laranja); border-radius: 10px 0 0 10px; }
.flow-tabela tr.sel td:last-child { border-right: 1px solid var(--f-laranja); border-radius: 0 10px 10px 0; }
.flow-tabela .num { font-weight: 700; }
.flow-tabela .itens { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #cfd3da; }
.flow-icone-canal { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: .75rem; color: #fff; }
.flow-icone-canal svg { width: 18px; height: 18px; }
.flow-situacao { display: inline-block; min-width: 92px; text-align: center; padding: 5px 10px; border-radius: 6px; font-size: .82rem; font-weight: 600; color: #fff; }
.flow-situacao.e1 { background: var(--f-vermelho); } .flow-situacao.e2 { background: var(--f-laranja); } .flow-situacao.e3 { background: var(--f-verde); }
.flow-situacao.e4 { background: var(--f-azul); } .flow-situacao.e5 { background: #3d4452; } .flow-situacao.e6 { background: #2a2f3a; color: #9aa1ad; }
.flow-tempo { font-variant-numeric: tabular-nums; font-weight: 600; }
.flow-tempo.vermelho { color: #ff5c5f; } .flow-tempo.laranja { color: var(--f-laranja2); }
.flow-abrir { background: #232833; border: 1px solid #343a46; color: #e6e8ec; border-radius: 8px; padding: 6px 18px; font-weight: 600; }
.flow-abrir:hover { background: #2c323d; color: #fff; }
.flow-det { padding: 16px; position: sticky; top: 12px; }
.flow-det .cab { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.flow-det .cab .numero { font-size: 1.9rem; font-weight: 800; color: #fff; }
.flow-det .cab .tempo { margin-left: auto; background: #3a1214; color: #ff6b6b; border-radius: 8px; padding: 5px 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.flow-det-abas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; background: var(--f-painel2); border-radius: 10px; padding: 4px; margin-bottom: 12px; }
.flow-det-abas button { background: transparent; border: 0; color: #cfd3da; padding: 8px 4px; border-radius: 8px; font-weight: 600; font-size: .88rem; }
.flow-det-abas button.ativa { background: var(--f-laranja); color: #fff; }
.flow-bloco { background: var(--f-painel2); border: 1px solid #262b35; border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.flow-bloco .rotulo { font-weight: 700; margin-bottom: 8px; color: #fff; }
.flow-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #262b35; }
.flow-item:last-child { border-bottom: 0; }
.flow-item .qtd { color: var(--f-suave); font-size: .82rem; }
.flow-item .obs { color: var(--f-laranja2); font-size: .8rem; }
.flow-item .valor { margin-left: auto; text-align: right; white-space: nowrap; font-weight: 700; }
.flow-item .valor small { display: block; color: var(--f-suave); font-weight: 400; }
.flow-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.15rem; font-weight: 700; margin: 6px 2px 12px; }
.flow-total strong { font-size: 1.5rem; color: #fff; }
.flow-botao { display: block; width: 100%; border-radius: 10px; padding: 12px; font-weight: 700; font-size: 1rem; margin-bottom: 8px; border: 1px solid transparent; }
.flow-botao.laranja { background: var(--f-laranja); color: #fff; } .flow-botao.laranja:hover { background: var(--f-laranja2); }
.flow-botao.verde { background: var(--f-verde); color: #fff; } .flow-botao.verde:hover { filter: brightness(1.1); }
.flow-botao.azul { background: var(--f-azul); color: #fff; }
.flow-botao.escuro { background: var(--f-painel2); border-color: #343a46; color: #e6e8ec; } .flow-botao.escuro:hover { background: #262b35; }
.flow-botao.perigo { background: #3a1214; border-color: #5c1d20; color: #ff6b6b; } .flow-botao.perigo:hover { background: #4a1517; }
.flow-botao:disabled { opacity: .5; }
.flow-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.flow-historico { list-style: none; padding: 0; margin: 0; }
.flow-historico li { position: relative; padding: 0 0 12px 22px; font-size: .9rem; }
.flow-historico li::before { content: ""; position: absolute; left: 4px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--f-verde); }
.flow-historico li::after { content: ""; position: absolute; left: 8px; top: 16px; bottom: 0; width: 1px; background: #2c323d; }
.flow-historico li:last-child::after { display: none; }
.flow-historico li span { color: var(--f-suave); margin-right: 8px; font-variant-numeric: tabular-nums; }
.flow-busca { position: relative; flex: 1; max-width: 420px; }
.flow-busca input { padding-left: 36px; }
.flow-busca svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--f-suave); }

.flow-botao svg, .flow-rodape .sair svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; }
.flow-rodape .caixa > svg { width: 22px; height: 22px; color: var(--f-suave); flex-shrink: 0; }
.flow .titulo { margin-bottom: 14px; }
.flow-tabela { font-size: .9rem; }
.flow-tabela td, .flow-tabela th { padding: 8px 10px; }
.flow-tabela td:nth-child(3) { white-space: nowrap; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.flow-situacao { white-space: nowrap; min-width: 0; font-size: .78rem; padding: 5px 9px; }
.flow-abrir { padding: 5px 12px; }
.flow-abas button { padding: 7px 11px; font-size: .85rem; }
.flow-abas button .n { margin-left: 6px; }

/* ---------------------------------------------------------------- Importação de planilha */
.imp-totais { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.imp-totais > div { border: 1px solid #e3e3e3; border-radius: 8px; padding: 10px 16px; min-width: 170px; background: #fafafa; }
.imp-totais span { display: block; font-size: .78rem; color: #666; }
.imp-totais strong { font-size: 1.6rem; line-height: 1.2; }
.imp-totais .ok { border-color: #b9e3c3; background: #f1fbf3; } .imp-totais .ok strong { color: #1d6b2f; }
.imp-totais .erro { border-color: #f3c2c0; background: #fdf3f2; } .imp-totais .erro strong { color: #9b1c1c; }
.imp-novos { border: 1px dashed #ccc; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; font-size: .9rem; }
.imp-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; }
.imp-chips .prod-chip { padding: 2px 10px; }
.imp-tabela { max-height: 560px; overflow: auto; border: 1px solid #eee; border-radius: 6px; }
.imp-tabela thead th { position: sticky; top: 0; background: #fff; z-index: 1; }
.imp-linha-erro td { background: #fffafa; }
.imp-aviso { color: #7a5b00; }
.imp-layout td { vertical-align: top; font-size: .88rem; }
.imp-layout .imp-grupo td { background: #f3f3f3; font-weight: 600; text-transform: uppercase; font-size: .75rem; letter-spacing: .04em; }

/* ================================================================ MGM Flow Delivery — tema claro (Configurações → Aparência da tela) */
.flow.claro {
  --f-fundo: #f3f4f7; --f-painel: #ffffff; --f-painel2: #f5f6f9; --f-borda: #e1e4ea; --f-texto: #1d222b; --f-suave: #6b7280;
  --f-laranja2: #e85d00;
}
.flow.claro .flow-menu { background: #ffffff; }
.flow.claro .flow-logo .m { color: #111; }
.flow.claro .flow-logo .d { color: #4b5260; }
.flow.claro .flow-menu nav a { color: #353b47; }
.flow.claro .flow-menu nav a:hover { background: #f1f2f5; color: #111; }
.flow.claro .flow-menu nav a.active { color: #fff; }
.flow.claro .flow-rodape .avatar { background: #e8eaef; color: #1d222b; }
.flow.claro .flow-rodape .sair, .flow.claro .flow-botao.perigo { background: #fdecec; border-color: #f5c2c2; color: #c62828; }
.flow.claro .flow-rodape .sair:hover, .flow.claro .flow-botao.perigo:hover { background: #fbdcdc; }
.flow.claro .cartao h2, .flow.claro .titulo h1, .flow.claro .flow-det .cab .numero, .flow.claro .flow-bloco .rotulo,
.flow.claro .flow-total strong, .flow.claro .dlv-modal h3 { color: #111; }
.flow.claro .form-control, .flow.claro .form-select { background-color: #fff; border-color: #d4d8e0; color: #1d222b; }
.flow.claro .form-control::placeholder { color: #9aa1ad; }
.flow.claro .form-control:focus, .flow.claro .form-select:focus { background-color: #fff; color: #111; }
.flow.claro .form-label { color: #3a404c; }
.flow.claro .form-check-input { background-color: #fff; border-color: #c3c8d2; }
.flow.claro .form-check-input:checked { background-color: var(--f-laranja); border-color: var(--f-laranja); }
.flow.claro .table { --bs-table-hover-bg: rgba(0,0,0,.03); --bs-table-hover-color: #111; }
.flow.claro .btn-contorno, .flow.claro .flow-abrir, .flow.claro .flow-botao.escuro { background: #fff; border-color: #d4d8e0; color: #2b313c; }
.flow.claro .btn-contorno:hover, .flow.claro .flow-abrir:hover, .flow.claro .flow-botao.escuro:hover { background: #f1f2f5; color: #111; }
.flow.claro .btn-outline-secondary { color: #4b5260; border-color: #c9ced8; }
.flow.claro .alert-danger { background: #fdecec; border-color: #f5c2c2; color: #a61b1b; }
.flow.claro .alert-success { background: #e8f7ee; border-color: #b9e3c3; color: #1d6b2f; }
.flow.claro .aviso-teste, .flow.claro .aviso-licenca { background: #fff6dd; border-color: #f1d98a; color: #7a5b00; }
.flow.claro .etiqueta { background: #eceef2; color: #3a404c; }
.flow.claro .etiqueta.ok { background: #e3f6e9; color: #1d6b2f; }
.flow.claro .etiqueta.alerta { background: #fdecec; color: #b71c1c; }
.flow.claro .dlv-sugestoes { background: #fff; border-color: #d4d8e0; }
.flow.claro .dlv-sugestoes div { border-bottom-color: #eceef2; }
.flow.claro .dlv-carrinho td { border-bottom-color: #eceef2; }
.flow.claro .dlv-tipo button, .flow.claro .dlv-formas button { background: #fff; border-color: #d4d8e0; color: #2b313c; }
.flow.claro .dlv-tipo button.sel { color: #fff; }
.flow.claro .dlv-formas button.sel { color: #111; }
.flow.claro .flow-abas button { background: #fff; border-color: #dde0e6; color: #2b313c; }
.flow.claro .flow-abas button .n { background: #e3e6ec; color: #2b313c; }
.flow.claro .flow-abas button .n.vermelho, .flow.claro .flow-abas button .n.laranja,
.flow.claro .flow-abas button .n.verde, .flow.claro .flow-abas button .n.azul { color: #fff; }
.flow.claro .flow-abas button.ativa { color: #fff; }
.flow.claro .flow-abas button.ativa .n { background: rgba(255,255,255,.3); color: #fff; }
.flow.claro .flow-tabela td { border-bottom-color: #eceef2; }
.flow.claro .flow-tabela tr:hover td { background: rgba(0,0,0,.025); }
.flow.claro .flow-tabela .itens { color: #4b5260; }
.flow.claro .flow-situacao.e5 { background: #8a93a3; } .flow.claro .flow-situacao.e6 { background: #e3e6ec; color: #4b5260; }
.flow.claro .flow-tempo.vermelho { color: #d32f2f; }
.flow.claro .flow-det .cab .tempo { background: #fdecec; color: #c62828; }
.flow.claro .flow-det-abas button { color: #4b5260; }
.flow.claro .flow-det-abas button.ativa { color: #fff; }
.flow.claro .flow-bloco { border-color: #e1e4ea; }
.flow.claro .flow-item { border-bottom-color: #e7e9ee; }
.flow.claro .flow-historico li::after { background: #dde0e6; }
.flow.claro .flow-canal .on { color: #1d8a47; }

/* Seleções do tema claro (mais específico que os botões brancos acima) */
.flow.claro .flow-abas button.ativa, .flow.claro .dlv-tipo button.sel { background: var(--f-laranja); border-color: var(--f-laranja); color: #fff; }
.flow.claro .flow-abas button .n.vermelho { background: var(--f-vermelho); } .flow.claro .flow-abas button .n.laranja { background: var(--f-laranja); }
.flow.claro .flow-abas button .n.verde { background: var(--f-verde); } .flow.claro .flow-abas button .n.azul { background: var(--f-azul); }
.flow.claro .dlv-formas button.sel { border-color: var(--f-laranja); background: rgba(255,106,0,.12); }
.flow.claro .flow-det-abas button.ativa { background: var(--f-laranja); color: #fff; }

/* Escolha do tema (Configurações) */
.flow-tema { display: flex; gap: 12px; flex-wrap: wrap; }
.flow-tema button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 200px; padding: 12px; border-radius: 10px;
  border: 2px solid var(--f-borda); background: var(--f-painel2); color: var(--f-texto); text-align: left; }
.flow-tema button.sel { border-color: var(--f-laranja); }
.flow-tema small { color: var(--f-suave); }
.flow-tema .amostra { display: flex; gap: 4px; width: 100%; height: 46px; border-radius: 6px; padding: 6px; margin-bottom: 6px; border: 1px solid rgba(128,128,128,.35); }
.flow-tema .amostra i { display: block; border-radius: 4px; }
.flow-tema .amostra i:first-child { width: 30%; } .flow-tema .amostra i:last-child { flex: 1; }
.flow-tema .amostra.escuro { background: #0d0f13; } .flow-tema .amostra.escuro i:first-child { background: #ff6a00; } .flow-tema .amostra.escuro i:last-child { background: #1b1f27; }
.flow-tema .amostra.claro { background: #f3f4f7; } .flow-tema .amostra.claro i:first-child { background: #ff6a00; } .flow-tema .amostra.claro i:last-child { background: #fff; border: 1px solid #e1e4ea; }

/* ===== Estoque (inventário e entrada/saída) ===== */
.est-lanc { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.est-busca { flex: 1 1 420px; position: relative; }
.est-qtd { flex: 0 1 300px; }
.est-campo-busca { position: relative; }
.est-campo-busca .form-control { padding-left: 2.2rem; background: #eef4fb; }
.est-lupa { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); opacity: .55; pointer-events: none; }
.est-sugestoes { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; background: #fff; border: 1px solid #ccd; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.12); max-height: 320px; overflow-y: auto; }
.est-sugestao { padding: .45rem .75rem; cursor: pointer; border-bottom: 1px solid #f0f0f0; }
.est-sugestao:hover { background: #f3f6fa; }
.form-control.est-negativo { color: #b42318; font-weight: 600; }
.est-ok { min-width: 46px; font-size: 1.1rem; }
.est-tabela { max-height: 62vh; overflow-y: auto; }
.est-tabela thead th { position: sticky; top: 0; background: #fff; z-index: 1; }
.est-contado { background: #f6fbf6; }
.est-rodape { position: sticky; bottom: 0; z-index: 5; }

/* ===== Manutenção em massa ===== */
.mm-passos { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 0 0 18px; color: var(--texto-suave, #888); }
.mm-passo { display: flex; align-items: center; gap: 8px; font-size: .85rem; line-height: 1.15; opacity: .55; }
.mm-passo .num { font-size: 2rem; font-weight: 300; }
.mm-passo.atual { opacity: 1; color: var(--cor-primaria); font-weight: 600; }
.mm-passo.feito { opacity: .8; }
.mm-pontos { letter-spacing: 2px; opacity: .5; }
.mm-opcao { display: flex; align-items: center; gap: 22px; width: 100%; text-align: left; border: 0; border-radius: 6px; background: #e8e8e8; padding: 18px 26px; margin-bottom: 12px; color: #222; transition: background .15s; }
.mm-opcao:hover { background: #fcd3a8; }
.mm-icone { flex-shrink: 0; width: 42px; height: 42px; display: flex; }
.mm-icone svg { width: 100%; height: 100%; }
.mm-titulo { display: block; font-size: 1.45rem; font-weight: 500; }
.mm-desc { display: block; font-size: .92rem; color: #555; margin-top: 2px; }
.mm-editado { background: #fff6c8 !important; font-weight: 600; }
.mm-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 18px; }
.mm-campo label { display: flex; align-items: center; font-size: .88rem; font-weight: 600; margin-bottom: 4px; cursor: pointer; }
.mm-grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 14px; }
.mm-loja { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.mm-loja select { min-width: 320px; max-width: 100%; }
.mm-grupo { display: flex; align-items: center; padding: 8px 10px; border: 1px solid #e3e3e3; border-radius: 6px; cursor: pointer; background: #fff; }
.mm-grupo.sub { margin-left: 18px; font-size: .92rem; }
.mm-grupo.marcado { border-color: var(--cor-primaria); background: #f6f6f6; }

/* ===== Etiquetas ===== */
.etq-previa { width: 100%; display: block; background: #ececec; border-radius: 6px; padding: 4px; }
.etq-elementos tr { cursor: pointer; }
.etq-elementos tr.etq-sel > td { background: #fff4e6; }

/* ===== Relatórios ===== */
.rel-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.rel-kpi { background: #fff; border: 1px solid #e4e4e4; border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; }
.rel-kpi span { font-size: .82rem; color: #666; }
.rel-kpi strong { font-size: clamp(1.05rem, 1.6vw, 1.4rem); white-space: nowrap; font-weight: 700; color: #111; }
.rel-kpi small { color: #777; font-size: .78rem; }
.rel-kpi.destaque { background: var(--cor-primaria); border-color: var(--cor-primaria); }
.rel-kpi.destaque span, .rel-kpi.destaque strong { color: #fff; }
.rel-grafico { display: flex; align-items: flex-end; gap: 2px; height: 180px; padding: 0 2px 22px; border-bottom: 1px solid #ddd; margin-bottom: 14px; }
.rel-barra { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; min-width: 6px; }
.rel-coluna { width: 100%; max-width: 38px; background: var(--cor-primaria); border-radius: 4px 4px 0 0; min-height: 1px; opacity: .85; }
.rel-barra:hover .rel-coluna { opacity: 1; }
.rel-rotulo { position: absolute; bottom: -20px; font-size: .68rem; color: #777; white-space: nowrap; }
.rel-pct { display: flex; align-items: center; gap: 6px; }
.rel-pct-barra { height: 8px; background: var(--cor-primaria); border-radius: 0 4px 4px 0; min-width: 1px; opacity: .8; }
.rel-pct span { font-size: .8rem; color: #555; min-width: 44px; }
.rel-tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 14px; }
.rel-tipo { text-align: left; background: #fff; border: 1px solid #e4e4e4; border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.rel-tipo strong { font-size: .95rem; color: #111; }
.rel-tipo span { font-size: .76rem; color: #777; }
.rel-tipo:hover { border-color: #bbb; }
.rel-tipo.ativo { border-color: var(--cor-primaria); box-shadow: inset 0 0 0 1px var(--cor-primaria); }
.abc-classe { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 6px; font-size: .75rem; font-weight: 700; }
.abc-a { background: var(--cor-primaria); color: #fff; }
.abc-b { background: #8a8a8a; color: #fff; }
.abc-c { background: #e2e2e2; color: #333; }
.abc-barras { display: flex; flex-direction: column; gap: 8px; }
.abc-linha { display: flex; align-items: center; gap: 10px; }
.abc-titulo { width: 92px; font-size: .8rem; color: #555; flex-shrink: 0; }
.abc-pilha { flex: 1; display: flex; gap: 2px; height: 26px; }
.abc-seg { display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 600; white-space: nowrap; overflow: hidden; min-width: 2px; }
.abc-seg:first-child { border-radius: 4px 0 0 4px; }
.abc-seg:last-child { border-radius: 0 4px 4px 0; }
.abc-seg:only-child { border-radius: 4px; }
.rel-nowrap td, .rel-nowrap th { white-space: nowrap; }
.rel-nowrap td.quebra { white-space: normal; min-width: 140px; }
/* ===== Escolha da loja depois do login ===== */
.escolha-loja { max-width: 500px; }
.lista-lojas { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; }
.item-loja { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: #fff; border: 1px solid #e2e2e2; border-radius: 8px; padding: 10px 14px; cursor: pointer; }
.item-loja:hover, .item-loja:focus { border-color: var(--cor-primaria); background: #f6f6f6; outline: none; }
.item-loja.atual { border-color: var(--cor-primaria); box-shadow: inset 0 0 0 1px var(--cor-primaria); }
.item-loja .codigo { font-size: 1.35rem; font-weight: 700; min-width: 64px; color: #111; }
.item-loja .dados { display: flex; flex-direction: column; min-width: 0; }
.item-loja .dados strong { font-weight: 600; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-loja .dados small { color: #777; font-size: .78rem; }
/* ===== Paginação (lista de produtos) ===== */
.paginacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.paginas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.paginas .btn { min-width: 36px; }
.paginas .reticencias { padding: 0 4px; color: #888; }

/* Conta assinada do cliente */
.conta-resumo { display: flex; gap: 12px; flex-wrap: wrap; }
.conta-resumo > div { border: 1px solid #e3e3e3; border-radius: 8px; padding: 8px 16px; min-width: 150px; background: #fff; }
.conta-resumo span { display: block; font-size: .8rem; color: var(--texto-suave, #666); }
.conta-resumo strong { font-size: 1.3rem; }
.conta-resumo .deve strong { color: #c62828; }
.conta-painel { background: #f8fbff; }
tr.conta-pagamento td { background: #f1f8e9; }
tr.conta-estornado td { color: #999; text-decoration: line-through; }
tr.conta-estornado td .text-danger { text-decoration: none; }

/* Painel → Comandas e mesas em uso */
.pc-cartao { padding: 0; overflow: hidden; margin-bottom: 1rem; }
.pc-topo { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #e6e6e6; flex-wrap: wrap; }
.pc-filtros { display: inline-flex; background: #f1f3f6; border-radius: 8px; padding: 3px; }
.pc-filtros button { border: 0; background: transparent; padding: 6px 14px; border-radius: 6px; font-size: .9rem; color: #444; }
.pc-filtros button.ativo { background: #1e40af; color: #fff; }
.pc-tabela th { background: #f8f9fb; font-weight: 600; padding: 12px 16px; }
.pc-tabela td { padding: 12px 16px; vertical-align: middle; }
.pc-btn { width: 40px; height: 40px; border: 0; border-radius: 8px; color: #fff; font-size: 1.05rem; margin-right: 4px; line-height: 1; }
.pc-btn:disabled { opacity: .4; }
.pc-verde { background: #10b981; }
.pc-amarelo { background: #f59e0b; }
.pc-vermelho { background: #ef4444; }
.pc-ocio { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: .85rem; }
.pc-ocio.ok { background: #dcfce7; color: #166534; }
.pc-ocio.medio { background: #fef9c3; color: #854d0e; }
.pc-ocio.alto { background: #fee2e2; color: #b91c1c; }