/* Sistema da loja (/app) e administração da Blocko (/admin). */
.carregando { padding: 40px; color: var(--apoio); }
.grow { flex: 1; min-width: 0; }
.vazio { padding: 32px; text-align: center; color: var(--apoio); }
.nada { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; }
.nada h1 { font-size: 28px; }
.nada p { color: var(--apoio); max-width: 340px; }

/* Entrada */
.entrada { min-height: 100vh; display: flex; flex-wrap: wrap; }
.entrada-form { flex: 1 1 420px; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 48px clamp(20px, 6vw, 80px); max-width: 560px; margin: 0 auto; }
.entrada-form h1 { font-size: 36px; letter-spacing: -0.03em; }
.entrada-form p.sub { color: var(--apoio); }
.entrada-lado { flex: 1 1 380px; min-height: 280px; background: var(--marinho); color: #fff; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 48px clamp(20px, 6vw, 80px); }
.entrada-lado h2 { font-size: 40px; letter-spacing: -0.03em; }
.entrada-lado h2 em { font-style: normal; color: var(--coral); }
.entrada-lado p { color: var(--nav-texto); max-width: 440px; }
.passos { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.passos li { display: flex; align-items: center; gap: 12px; }
.passos b { width: 30px; height: 30px; border-radius: 9px; background: var(--indigo); display: grid; place-items: center; font-family: var(--titulo); }

/* Casca do sistema: menu lateral marinho + conteúdo */
.casca { min-height: 100vh; display: flex; }
.nav { flex: 0 0 240px; background: var(--marinho); color: var(--nav-texto); padding: 22px 14px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.nav .marca { padding: 0 8px 18px; color: #fff; }
.nav-loja { padding: 0 10px 10px; font-size: 13px; color: var(--apoio-escuro); }
.nav-item { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border-radius: 10px; color: var(--nav-texto); font-weight: 600; text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.nav-item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-item[aria-current='page'] { background: var(--indigo); color: #fff; }
.nav-fim { flex: 1; min-height: 24px; }
button.nav-item { border: 0; background: transparent; font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.nav-conta .quem span { white-space: nowrap; }
.nav-conta { display: flex; align-items: center; gap: 10px; padding: 12px 8px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.avatar { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: var(--coral); color: var(--marinho); font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.nav-conta .quem { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nav-conta .quem b { font-size: 14px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-conta .quem span { font-size: 12px; }
.nav-ico { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; border: 0; background: transparent; color: var(--nav-texto); cursor: pointer; text-decoration: none; }
.nav-ico:hover, .nav-ico[aria-current='page'] { background: rgba(255, 255, 255, .08); color: #fff; }
.miolo { flex: 1; min-width: 0; padding: 28px 32px 40px; display: flex; flex-direction: column; gap: 18px; }
.cab { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.cab > div { flex: 1 1 280px; min-width: 0; }
.cab h1 { font-size: 34px; letter-spacing: -0.03em; line-height: 1.1; }
.cab p { color: var(--apoio); margin-top: 4px; }

/* Celular: o menu vira uma barra no topo que rola para o lado */
@media (max-width: 760px) {
  .casca { flex-direction: column; }
  .nav { flex: none; position: sticky; top: 0; z-index: 10; height: auto; flex-direction: row; align-items: center; gap: 4px; padding: 10px 12px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .nav .marca { padding: 0 8px 0 0; }
  .nav .marca-nome, .nav-loja, .nav-fim, .nav-conta .quem, .nav-conta .avatar { display: none; }
  .nav-item { flex-shrink: 0; min-height: 40px; white-space: nowrap; }
  .nav-conta { padding: 0 0 0 4px; border-top: 0; gap: 4px; }
  .miolo { padding: 20px 16px 32px; }
  .cab h1 { font-size: 28px; }
}

/* Administração da Blocko */
.topo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 14px clamp(16px, 3vw, 32px); background: var(--marinho); color: #fff; }
.topo .grow { flex: 1; }
.topo .conta { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.topo .conta b { display: block; font-size: 14px; }
.topo .conta span { color: var(--nav-texto); }
.admin { padding: 24px clamp(16px, 3vw, 32px) 48px; display: flex; flex-direction: column; gap: 18px; max-width: 1200px; }
.loja-lista { display: flex; flex-direction: column; gap: 12px; }
.loja { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 18px; padding: 18px 20px; }
.loja.suspensa { opacity: .75; }
.loja-info { flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px; }
.loja-info h3 { font-size: 19px; font-weight: 600; }
.loja-num { font-size: 13px; color: var(--apoio); }
.loja-contas { flex: 1 1 340px; display: flex; flex-direction: column; gap: 6px; }
.loja-conta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; padding: 8px 10px; border-radius: 10px; background: var(--fundo); }
.loja-acoes { display: flex; flex-wrap: wrap; gap: 6px; }

/* Senha de uso único */
.senha-unica { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--marinho); color: #fff; }
.senha-unica code { flex: 1; font-family: var(--mono); font-size: 20px; letter-spacing: .06em; overflow-wrap: anywhere; }

.em-breve { padding: 40px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--apoio); }
.em-breve b { font-family: var(--titulo); font-size: 20px; color: var(--marinho); }

/* Peças das telas */
.apoio { color: var(--apoio); font-size: 14px; }
.nowrap { white-space: nowrap; }
.erros { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--erro-fundo); color: var(--erro); font-weight: 600; font-size: 14px; }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.grade2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--borda-campo); background: #fff; font-weight: 600; font-size: 14px; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--marinho); border-color: var(--marinho); color: #fff; }
.chip-n { font-family: var(--mono); font-size: 13px; opacity: .8; }
.barra-busca { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.busca { flex: 1 1 280px; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--borda-campo); background: #fff; color: var(--apoio); }
.busca:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(79, 70, 229, .18); }
.busca .in { border: 0; height: 44px; padding: 0; box-shadow: none; }
.btn-ico { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--borda-campo); background: #fff; color: var(--erro); cursor: pointer; }
.btn-ico:disabled { color: var(--borda-campo); cursor: not-allowed; }
.duas { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
.duas > .tabela { flex: 3 1 520px; }
.lado { flex: 2 1 340px; min-width: 0; padding: 22px; display: flex; flex-direction: column; gap: 16px; animation: entra .35s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes entra { from { opacity: 0; transform: translateX(16px); } }
.lado h2 { font-size: 24px; font-weight: 600; }
.sobre { font-size: 13px; font-weight: 600; color: var(--indigo-texto); font-family: var(--mono); }

/* Tabela (divs com role=table) */
.tabela { min-width: 0; overflow-x: auto; }
.tabela [role="table"] { min-width: 520px; }
.tab-cab, .tab-linha { display: grid; align-items: center; gap: 12px; padding: 0 20px; }
.c5 .tab-cab, .c5 .tab-linha { grid-template-columns: minmax(180px, 3fr) 1.2fr 1fr 1fr .8fr; }
.c3 .tab-cab, .c3 .tab-linha { grid-template-columns: minmax(180px, 3fr) 1.2fr 1fr; }
.tab-cab { padding-top: 14px; padding-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--apoio); border-bottom: 1px solid var(--borda); }
.tab-linha { min-height: 62px; border-bottom: 1px solid var(--linha); transition: background-color .15s ease; }
.tab-linha:hover { background: var(--fundo); }
.tab-linha.sel { background: var(--indigo-fundo); }
.tab-vazia { padding: 28px 20px; color: var(--apoio); }
.linha-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 0; border: 0; background: transparent; text-align: left; cursor: pointer; width: 100%; }
.linha-btn b { font-weight: 600; }
.linha-btn span { font-size: 13px; color: var(--apoio); font-family: var(--mono); }

/* Detalhe do produto */
.saldo-box { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 14px; background: var(--indigo-fundo); }
.saldo-box.ambar { background: var(--ambar-fundo); }
.saldo-box.erro { background: var(--erro-fundo); }
.saldo-box.neutro { background: var(--linha); }
.saldo-box > div { display: flex; align-items: baseline; gap: 10px; }
.saldo-box b { font-size: 36px; font-weight: 600; line-height: 1; }
.saldo-box > div span { color: var(--apoio); }
.saldo-aviso { font-weight: 600; font-size: 14px; color: var(--indigo-texto); }
.ambar .saldo-aviso { color: var(--ambar); }
.erro .saldo-aviso { color: var(--erro); }
.neutro .saldo-aviso { color: var(--apoio); }
.barra { display: block; height: 8px; border-radius: 4px; background: rgba(30, 27, 75, .1); overflow: hidden; }
.barra span { display: block; height: 100%; border-radius: 4px; background: var(--indigo); transition: width .4s ease; }
.barra.ambar span { background: var(--ambar-barra); }
.barra.erro span { background: var(--erro-barra); }
.barra.neutro span { background: var(--apoio); }
.trio { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; }
.trio dt { font-size: 13px; color: var(--apoio); }
.trio dd { margin: 0; font-size: 17px; font-weight: 600; }
.forn-box { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--borda); color: var(--indigo-texto); }
.forn-box > span { display: flex; flex-direction: column; color: var(--marinho); }
.forn-box > span span { font-size: 13px; color: var(--apoio); }
.movs { display: flex; flex-direction: column; }
.movs h3 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.mov { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--linha); font-size: 14px; }
.mov .mono { font-size: 13px; color: var(--apoio); }
.mov b.mono { font-size: 15px; color: var(--marinho); }
.mov b.pos { color: var(--indigo-texto); }

/* Formulário do produto */
.form-produto { display: flex; flex-direction: column; gap: 14px; }
.form-cab { display: flex; align-items: center; gap: 10px; }
.form-cab h2 { flex: 1; }
.margem-prev { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 14px; border-radius: 12px; background: var(--indigo-fundo); }
.margem-prev b { font-size: 20px; color: var(--indigo-texto); }
.in:disabled { background: var(--fundo); color: var(--apoio); }

/* Configurações */
.status-salvo { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--indigo-texto); }
.status-salvo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-salvo.pendente { color: var(--ambar); }
.cfg { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
.abas { flex: 0 1 230px; display: flex; flex-direction: column; gap: 4px; }
.aba { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 10px; border: 0; background: transparent; font-weight: 600; text-align: left; cursor: pointer; }
.aba:hover { background: #fff; }
.aba[aria-pressed="true"] { background: #fff; color: var(--indigo-texto); box-shadow: inset 3px 0 0 var(--indigo); }
.cfg-painel { flex: 1 1 520px; min-width: 0; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.cfg-tit h2 { font-size: 22px; font-weight: 600; }
.cfg-tit p { color: var(--apoio); margin-top: 2px; }
.sub-tit { font-size: 16px; font-weight: 600; margin-top: 6px; }
.linha-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.linha-add .campo { flex: 1 1 220px; }
.cores { display: flex; gap: 6px; padding-bottom: 6px; }
.cor { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--borda-campo); cursor: pointer; flex-shrink: 0; }
.cor[aria-checked="true"] { box-shadow: 0 0 0 3px var(--marinho); }
.lista-cfg { display: flex; flex-direction: column; gap: 8px; }
.item-cfg { display: flex; align-items: center; gap: 12px; }
.item-cfg .in { flex: 1; }
.rolagem { overflow-x: auto; }
.tab-forn { min-width: 620px; display: flex; flex-direction: column; gap: 6px; }
.tab-forn [role="row"] { display: grid; grid-template-columns: 2fr 110px 1.4fr 1.2fr 40px; gap: 8px; align-items: center; }
.tab-forn .tab-cab { padding: 0 0 4px; border: 0; }
.toggle { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--linha); }
.toggle > span { flex: 1; display: flex; flex-direction: column; }
.toggle > span span { font-size: 14px; color: var(--apoio); }
.chave { width: 48px; height: 28px; flex-shrink: 0; border-radius: 999px; border: 0; background: #A3A6BF; padding: 3px; cursor: pointer; display: flex; justify-content: flex-start; transition: background-color .15s ease; }
.chave span { width: 22px; height: 22px; border-radius: 50%; background: #fff; }
.chave[aria-checked="true"] { background: var(--indigo); justify-content: flex-end; }
@media (max-width: 760px) {
  .abas { flex-direction: row; flex-basis: 100%; overflow-x: auto; }
  .aba { flex-shrink: 0; }
  .aba[aria-pressed="true"] { box-shadow: inset 0 -3px 0 var(--indigo); }
}

/* Movimentações */
.form-mov { flex: 3 1 480px; min-width: 0; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.form-mov fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.form-mov legend { font-family: var(--titulo); font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.tipo-mov { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border-radius: 14px; border: 1.5px solid var(--borda); background: #fff; text-align: left; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.tipo-mov span:last-child { font-size: 13px; color: var(--apoio); }
.tipo-mov[aria-pressed="true"] { border-color: var(--indigo); background: #F5F6FD; }
.tipo-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--indigo-claro); color: var(--indigo-texto); }
.tipo-ic.ambar { background: var(--ambar-fundo); color: var(--ambar); }
.tipo-ic.erro { background: var(--erro-fundo); color: var(--erro); }
.passo { display: flex; align-items: center; gap: 8px; }
.btn-passo { width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--borda-campo); background: #fff; font-size: 20px; cursor: pointer; }
.qtd-in { text-align: center; font-size: 18px; font-weight: 600; max-width: 120px; }
.lado-mov { flex: 2 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.previa { padding: 22px; border-radius: 18px; background: var(--marinho); color: #E7E8F8; display: flex; flex-direction: column; gap: 12px; animation: entra .35s cubic-bezier(.2, .8, .2, 1) both; }
.previa h2 { font-size: 13px; font-family: var(--texto); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #A5B4FC; }
.previa-nome { font-family: var(--titulo); font-size: 20px; font-weight: 600; color: #fff; }
.antes-depois { display: flex; align-items: center; gap: 14px; color: var(--apoio-escuro); }
.antes-depois > div { display: flex; flex-direction: column; }
.antes-depois span { font-size: 13px; }
.antes-depois b { font-size: 34px; color: #fff; line-height: 1.1; }
.antes-depois b.ambar { color: #F2C987; }
.antes-depois b.erro { color: #FF9C8A; }
.previa .barra { background: rgba(255, 255, 255, .12); }
.previa .barra span { background: var(--coral); }
.previa-aviso { font-weight: 600; color: #A5B4FC; }
.previa-aviso.ambar { color: #F2C987; }
.previa-aviso.erro { color: #FF9C8A; }
.previa dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12); }
.previa dt { font-size: 13px; color: var(--apoio-escuro); }
.previa dd { margin: 0; font-size: 17px; font-weight: 600; color: #fff; }
.feitas { padding: 20px; display: flex; flex-direction: column; gap: 4px; }
.feitas h2 { font-size: 17px; font-weight: 600; margin-bottom: 6px; }

/* Caixa (PDV) em tela cheia */
.pdv-casca { min-height: 100vh; }
.pdv { min-height: 100vh; display: flex; flex-direction: column; }
.pdv-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px 24px; background: var(--marinho); color: #fff; }
.pdv-topo .marca { color: #fff; }
.pdv-topo a { text-decoration: none; }
.pdv-status { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(165, 180, 252, .16); color: #A5B4FC; font-size: 14px; font-weight: 700; }
.pdv-status .ponto { animation: pisca 2s ease-in-out infinite; }
.pdv-status.fechado { background: rgba(255, 255, 255, .08); color: var(--nav-texto); }
.pdv-status.fechado .ponto { animation: none; }
@keyframes pisca { 50% { opacity: .35; } }
.pdv-quem { font-size: 14px; color: var(--nav-texto); }
.pdv-dia { font-size: 14px; color: var(--nav-texto); }
.btn.claro { background: transparent; border-color: rgba(255, 255, 255, .25); color: #fff; }
.btn.grande { min-height: 54px; font-size: 16px; }
.pdv-centro { flex: 1; display: grid; place-items: center; padding: 24px 16px; }
.abrir-caixa { width: min(440px, 100%); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.abrir-caixa h1 { font-size: 30px; }
.abrir-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--indigo-claro); color: var(--indigo-texto); }
.pdv-corpo { flex: 1; display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; min-height: 0; }
.pdv-prods { flex: 3 1 520px; min-width: 0; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.rot-busca { font-weight: 600; font-size: 14px; }
.busca.grande { flex: none; height: 56px; border-width: 2px; }
.busca.grande .in { height: 52px; font-size: 17px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 128px; padding: 14px; border-radius: 14px; border: 1px solid var(--borda); background: #fff; text-align: left; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.tile:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--indigo); box-shadow: 0 10px 22px rgba(30, 27, 75, .08); }
.tile:active:not(:disabled) { transform: scale(.98); }
.tile:disabled { opacity: .55; cursor: not-allowed; background: #F8F9FD; }
.tile b { font-weight: 600; line-height: 1.25; }
.tile-cod { font-size: 12px; color: var(--apoio); }
.tile-pe { margin-top: auto; width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tile-pe b { white-space: nowrap; }
.tile-pe span { font-size: 12px; color: var(--apoio); text-align: right; }
.tile-pe .ambar { color: var(--ambar); font-weight: 600; }
.tile-pe .erro { color: var(--erro); font-weight: 600; }
.pdv-venda { flex: 2 1 380px; min-width: 0; display: flex; flex-direction: column; background: #fff; border-left: 1px solid var(--borda); }
.venda-cab { display: flex; align-items: baseline; gap: 12px; padding: 20px 22px 12px; }
.venda-cab h2 { flex: 1; font-size: 22px; font-weight: 600; }
.link { border: 0; background: transparent; color: var(--indigo-texto); font-weight: 600; cursor: pointer; padding: 4px; }
.itens { flex: 1; list-style: none; margin: 0; padding: 0 22px; overflow-y: auto; min-height: 120px; }
.itens li { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.itens li > span { display: flex; flex-direction: column; }
.itens li > span .apoio { font-size: 13px; }
.itens li.novo { animation: novo-item .6s ease; }
@keyframes novo-item { from { background: var(--indigo-fundo); } }
.itens .sub { min-width: 92px; text-align: right; }
.vazio-venda { flex-direction: column; justify-content: center; text-align: center; color: var(--apoio); padding: 36px 0 !important; border: 0 !important; gap: 10px !important; }
.passo.peq .btn-passo { width: 34px; height: 34px; font-size: 18px; }
.passo.peq output { min-width: 26px; text-align: center; font-weight: 600; }
.btn-passo:disabled { opacity: .4; cursor: not-allowed; }
.pdv-pagar { display: flex; flex-direction: column; gap: 12px; padding: 16px 22px 22px; border-top: 1px solid var(--borda); background: var(--fundo); }
.desc { display: flex; gap: 8px; }
.seg { display: flex; padding: 3px; border-radius: 10px; background: var(--linha); }
.seg button { min-width: 44px; height: 38px; border: 0; border-radius: 8px; background: transparent; font-weight: 700; cursor: pointer; }
.seg button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 2px rgba(30, 27, 75, .15); }
.totais { display: flex; flex-direction: column; gap: 4px; }
.totais div { display: flex; justify-content: space-between; color: var(--apoio); }
.totais .total { color: var(--marinho); font-family: var(--titulo); font-size: 20px; font-weight: 600; padding-top: 6px; border-top: 1px solid var(--borda); }
.totais .total b { font-size: 26px; }
.pags { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.pag { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; border-radius: 12px; border: 1.5px solid var(--borda); background: #fff; font-weight: 600; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.pag[aria-pressed="true"] { background: var(--indigo-claro); border-color: var(--indigo); color: var(--indigo-texto); }
.receb { display: flex; align-items: center; gap: 12px; }
.troco { white-space: nowrap; font-weight: 600; color: var(--indigo-texto); }
.troco.falta { color: var(--erro); }
.finalizar { width: 100%; }
dialog.concluida { width: min(440px, calc(100vw - 32px)); }
.ok-cab { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 22px 4px; text-align: center; }
.ok-ic { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo); color: #fff; animation: pop .35s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.ok-cab h2 { font-size: 22px; font-weight: 600; }
.ok-cab b { font-size: 32px; }
.ok-troco { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px; border-radius: 12px; background: var(--ambar-fundo); color: var(--ambar); font-weight: 600; }
.ok-troco b { font-size: 24px; }
@media (max-width: 760px) {
  .pdv-topo { padding: 10px 16px; }
  .pdv-quem, .pdv-dia { display: none; }
  .pdv-prods { padding: 16px; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .pdv-venda { border-left: 0; border-top: 1px solid var(--borda); }
}
@media (prefers-reduced-motion: reduce) { .pdv-status .ponto, .itens li.novo, .ok-ic, .tile { animation: none; transition: none; } }

/* Vendas */
.c4 .tab-cab, .c4 .tab-linha { grid-template-columns: minmax(170px, 2.4fr) 1fr 1.2fr 1.2fr; }
.tab-linha.cancelada .linha-btn b, .tab-linha.cancelada .total-cel b { text-decoration: line-through; color: var(--apoio); }
.total-cel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.venda-tit { display: flex; align-items: flex-start; gap: 12px; }
.venda-tit > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.venda-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.venda-itens li { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-top: 1px solid var(--linha); }
.venda-itens li .mono:first-child { color: var(--apoio); min-width: 30px; }
.cancelar-box { width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; background: var(--erro-fundo); }
.btn.perigo-cheio { background: var(--erro); border-color: var(--erro); color: #fff; }
.cancelada-txt { padding: 12px 14px; border-radius: 12px; background: var(--erro-fundo); color: var(--erro); font-weight: 600; font-size: 14px; }
.nfce { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--linha); }

/* Fechamento do caixa */
.fech { flex: 1; padding: 22px 24px 40px; display: flex; flex-direction: column; gap: 18px; max-width: 1280px; width: 100%; margin: 0 auto; }
.link.voltar { display: inline-flex; align-items: center; gap: 6px; padding: 0; margin-bottom: 4px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.kpi { display: flex; flex-direction: column; gap: 4px; padding: 18px; }
.kpi > span:first-child { font-size: 13px; font-weight: 600; color: var(--apoio); }
.kpi b { font-size: 26px; font-weight: 600; }
.formas { flex: 3 1 440px; min-width: 0; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.formas h2, .gaveta h2 { font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.forma { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--linha); }
.forma > div { display: flex; align-items: baseline; gap: 10px; }
.forma .mono { min-width: 110px; text-align: right; }
.forma-total { display: flex; align-items: baseline; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--borda); font-family: var(--titulo); font-size: 18px; font-weight: 600; }
.forma-total b { font-size: 24px; }
.gaveta { flex: 2 1 340px; min-width: 0; padding: 22px; border-radius: 18px; background: var(--marinho); color: #E7E8F8; display: flex; flex-direction: column; gap: 12px; }
.gaveta h2 { color: #fff; }
.gaveta dl { margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.gaveta dl div { display: flex; gap: 10px; }
.gaveta dt { flex: 1; color: var(--apoio-escuro); }
.gaveta dd { margin: 0; }
.gaveta .esperado { padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .12); }
.gaveta .esperado dt { color: #fff; font-weight: 600; }
.gaveta .esperado dd { color: #fff; font-size: 18px; font-weight: 600; }
.gaveta label { font-weight: 600; color: #fff; }
.gaveta label span { font-weight: 400; color: var(--apoio-escuro); }
.contado { height: 54px; border: 0; font-size: 22px; text-align: right; color: var(--marinho); background: #fff; }
.trio.duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trio.duo dd { white-space: nowrap; }
.in.escuro { background: rgba(255, 255, 255, .08); border: 0; color: #fff; }
.in.escuro::placeholder { color: var(--apoio-escuro); }
.dif { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; animation: pop .3s cubic-bezier(.2, .8, .2, 1) both; }
.dif .mono { font-size: 18px; }
.dif.ok { background: rgba(165, 180, 252, .18); color: #A5B4FC; }
.dif.sobra { background: rgba(217, 119, 6, .2); color: #F2C987; }
.dif.falta { background: rgba(192, 65, 43, .22); color: #FF9C8A; }
.erro-claro { color: #FF9C8A; font-weight: 600; }
.gaveta .btn.claro { background: transparent; border-color: rgba(255, 255, 255, .2); color: #E7E8F8; }
.gaveta .acoes .grow { flex: 1; }
.fechado-box { width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; background: rgba(165, 180, 252, .16); }
.fechado-box b { color: #A5B4FC; }
.btn.coral:hover { filter: brightness(1.05); }

/* Painel */
.busca.curta { flex: 0 1 260px; height: 44px; }
.busca.curta .in { height: 42px; }
.kpi-rot { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--apoio); }
.kpi-nota { font-size: 13px; color: var(--apoio); }
.kpi.escuro { background: var(--marinho); border-color: var(--marinho); color: #fff; }
.kpi.escuro .kpi-rot, .kpi.escuro .kpi-nota { color: var(--nav-texto); }
.kpi.alerta { border-color: #F5C77E; background: #FFFBEB; }
.kpi.alerta b { color: var(--ambar); }
.kpi.indigo b { color: var(--indigo-texto); }
.ping { width: 8px; height: 8px; border-radius: 50%; background: var(--ambar-barra); margin-left: auto; animation: ping 1.6s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(217, 119, 6, .5); } 100% { box-shadow: 0 0 0 10px rgba(217, 119, 6, 0); } }
.graf { flex: 3 1 480px; min-width: 0; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.graf-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.graf-cab h2 { flex: 1; font-size: 20px; font-weight: 600; }
.leg { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--apoio); }
.leg span { width: 10px; height: 10px; border-radius: 3px; }
.leg.ent span { background: var(--indigo); }
.leg.sai span { background: var(--coral); }
.barras { height: 190px; display: flex; align-items: flex-end; gap: 14px; padding: 0 4px; border-bottom: 1px solid var(--borda); }
.par { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.par span { width: 42%; max-width: 26px; border-radius: 6px 6px 0 0; transform-origin: bottom; animation: cresce .6s cubic-bezier(.2, .8, .2, 1) backwards; }
.b-ent { background: var(--indigo); }
.b-sai { background: var(--coral); }
@keyframes cresce { from { transform: scaleY(0); } }
.rotulos { display: flex; gap: 14px; padding: 0 4px; }
.rotulos span { flex: 1; text-align: center; font-size: 12px; color: var(--apoio); font-family: var(--mono); }
.cats-margem { flex: 2 1 320px; min-width: 0; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.cats-margem h2, .hoje h2 { font-size: 20px; font-weight: 600; }
.cat-m { display: flex; flex-direction: column; gap: 6px; }
.cat-m > div { display: flex; align-items: baseline; gap: 10px; }
.repor { flex: 3 1 480px; min-width: 0; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.tab-repor { min-width: 560px; }
.tab-repor .tab-cab, .tab-repor .tab-linha { grid-template-columns: minmax(170px, 2fr) 1.3fr 1.3fr 130px; padding: 0; }
.saldo-cel { display: flex; align-items: center; gap: 10px; }
.saldo-cel .barra { flex: 1; max-width: 90px; }
.saldo-cel .erro { color: var(--erro); font-weight: 600; }
.hoje { flex: 2 1 320px; min-width: 0; padding: 22px; display: flex; flex-direction: column; gap: 4px; }
.hoje-mov { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linha); }
.hoje-mov .grow { display: flex; flex-direction: column; }
.hoje-mov .apoio { font-size: 13px; }
.hoje-ic { width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center; background: var(--indigo-claro); color: var(--indigo-texto); }
.hoje-ic.ambar { background: var(--ambar-fundo); color: var(--ambar); }
.hoje-ic.erro { background: var(--erro-fundo); color: var(--erro); }
.hoje-mov b.pos { color: var(--indigo-texto); }

/* Fornecedores */
.forn-grade { flex: 3 1 520px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; align-content: start; }
.forn-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-width: 1.5px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.forn-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(30, 27, 75, .09); }
.forn-card.sel { border-color: var(--indigo); }
.forn-topo { display: flex; align-items: center; gap: 12px; }
.forn-topo .grow { display: flex; flex-direction: column; }
.forn-topo b { font-family: var(--titulo); font-size: 18px; font-weight: 600; }
.forn-topo .apoio { font-size: 13px; }
.forn-sigla { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; color: #fff; font-family: var(--titulo); font-size: 16px; font-weight: 700; display: grid; place-items: center; }
.forn-contato { display: flex; flex-direction: column; gap: 2px; }
.forn-pe { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--linha); }
.repor-txt { flex: 1; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--indigo-texto); }
.repor-txt.ambar { color: var(--ambar); }
.ped-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--linha); }
.ped-item .grow { display: flex; flex-direction: column; }
.ped-item .apoio { font-size: 13px; }
.ped-item output { width: 40px; text-align: center; font-size: 17px; font-weight: 600; }
.ped-item .btn-passo { width: 36px; height: 36px; font-size: 18px; }
.nada-repor { padding: 18px; border-radius: 12px; background: var(--fundo); color: var(--apoio); }
.acoes .grow { flex: 1; }
@media (prefers-reduced-motion: reduce) { .ping, .par span { animation: none; } .forn-card:hover { transform: none; } }

/* Equipe e permissões */
.equipe { display: flex; flex-direction: column; gap: 16px; }
.equipe > .seg { align-self: flex-start; }
.contas { display: flex; flex-direction: column; gap: 8px; }
.conta-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--borda); }
.conta-linha.bloqueada { background: var(--fundo); opacity: .8; }
.conta-linha .grow { flex: 1 1 200px; display: flex; flex-direction: column; }
.conta-linha .grow b { display: flex; align-items: center; gap: 8px; }
.conta-linha .grow .apoio { font-size: 13px; }
.conta-linha select { width: auto; min-width: 140px; }
.conta-st { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 130px; }
.conta-st .apoio { font-size: 12px; }
.matriz { min-width: 560px; display: flex; flex-direction: column; }
.matriz [role="row"] { display: grid; grid-template-columns: minmax(220px, 2.4fr) repeat(3, 1fr); gap: 8px; align-items: center; }
.matriz .tab-cab { padding: 0 0 8px; }
.matriz .tab-cab span:not(:first-child) { text-align: center; }
.grupo-perm { padding: 14px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--indigo-texto); }
.linha-perm { padding: 10px 0; border-top: 1px solid var(--linha); }
.linha-perm [role="rowheader"] { display: flex; flex-direction: column; }
.linha-perm .apoio { font-size: 13px; }
.cel-perm { text-align: center; }
.cel-perm input { width: 20px; height: 20px; accent-color: var(--indigo); cursor: pointer; }
.cel-perm input:disabled { cursor: not-allowed; }