.texto-suave { color: var(--texto-suave); }

/* Box / card */
.box, .card {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--sp-5);
  margin: 0 auto var(--sp-4);
  max-width: 960px;
}
.card-login { max-width: 420px; margin-top: var(--sp-6); }
@media (max-width: 900px) { .box, .card { padding: var(--sp-4); } }

/* Formularios */
.campo { margin-bottom: var(--sp-4); }
.campo label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-1); }
.input {
  width: 100%; height: 44px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--borda); border-radius: var(--raio-sm);
  font-size: var(--fs-lg); background: var(--branco); color: var(--texto);
}
.input:focus, .btn:focus-visible, .btn-icone:focus-visible, .nav-item:focus-visible,
.grupo-cab:focus-visible, .tab:focus-visible { outline: 2px solid var(--cor-primaria-texto); outline-offset: 2px; }
.check { width: 22px; height: 22px; accent-color: var(--cor-primaria-texto); }

/* Botoes */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-5);
  border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--branco); color: var(--texto);
  font-size: var(--fs-sm); font-weight: 500; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--fundo); }
.btn-sm { min-height: 40px; padding: 0 var(--sp-4); }
.btn-primary { background: var(--cor-primaria); border-color: var(--cor-primaria); color: var(--texto-sobre-cor-primaria); font-weight: 600; }
.btn-primary:hover { background: var(--cor-primaria-hover); border-color: var(--cor-primaria-hover); color: var(--branco); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-icone {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid transparent; border-radius: var(--raio-sm);
  background: transparent; color: var(--texto-suave); cursor: pointer; font-size: 18px;
}
.btn-icone:hover { background: var(--fundo); color: var(--texto); }

/* Avisos */
.alerta {
  max-width: 960px; margin: 0 auto var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--raio-sm); border: 1px solid var(--borda); background: var(--branco);
}
.alerta-erro { border-color: var(--cor-erro); color: var(--cor-erro); }
.alerta-ok { border-color: var(--cor-primaria); background: var(--cor-primaria-suave); }

/* Tabela */
.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; margin-bottom: var(--sp-4); }
.tabela th {
  text-align: left; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave);
  padding: var(--sp-2); border-bottom: 1px solid var(--borda); white-space: nowrap;
}
.tabela td { padding: var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--borda); font-size: 14px; }

/* Abas */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--borda); margin-bottom: var(--sp-4); overflow-x: auto; }
.tab {
  min-height: 44px; padding: 0 var(--sp-4);
  background: transparent; border: none; border-bottom: 3px solid transparent;
  color: var(--texto-suave); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; white-space: nowrap;
}
.tab:hover { color: var(--texto); }
.tab.ativa { color: var(--cor-primaria-texto); border-bottom-color: var(--cor-primaria); font-weight: 600; }

/* Modal: so fecha pelos botoes (ESC e clique fora nao fecham) */
.modal {
  width: 92%; max-width: 520px; max-height: 90vh;
  padding: 0; border: 1px solid var(--borda); border-radius: var(--raio-lg);
  background: var(--branco); color: var(--texto);
}
.modal::backdrop { background: var(--fundo-modal); }
.modal-cab { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--borda); }
.modal-cab h2 { margin: 0; font-size: var(--fs-xl); }
.modal-corpo { padding: var(--sp-5); overflow-y: auto; }
.modal-rodape { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--borda); }

/* Estado vazio */
.estado-vazio { text-align: center; padding: var(--sp-6) var(--sp-4); }
.estado-vazio-icone { font-size: 48px; color: var(--cor-primaria-texto); }
.estado-vazio h2 { margin: var(--sp-3) 0 var(--sp-2); }
.estado-vazio p { max-width: 420px; margin: 0 auto; }

/* Carregando */
.carregando { display: flex; align-items: center; gap: var(--sp-3); color: var(--texto-suave); padding: var(--sp-4); }
.carregando::before {
  content: ""; width: 18px; height: 18px; border-radius: var(--raio-full);
  border: 3px solid var(--borda); border-top-color: var(--cor-primaria);
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .carregando::before { animation: none; } }

/* Listagens: barra de filtros, ordenacao, paginacao */
.box-larga { max-width: 1200px; }
.barra-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.busca { position: relative; flex: 1 1 240px; min-width: 200px; }
.busca i { position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%); color: var(--texto-fraco); }
.input-filtro { height: 40px; font-size: var(--fs-sm); padding-left: 36px; }
.menu-filtro { position: relative; }
.menu-filtro summary { list-style: none; }
.menu-filtro summary::-webkit-details-marker { display: none; }
.menu-filtro-lista {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 220px; max-height: 320px; overflow-y: auto;
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: var(--sp-1);
}
.menu-filtro-lista a { display: block; padding: 10px var(--sp-3); border-radius: var(--raio-sm); color: var(--texto); text-decoration: none; font-size: var(--fs-sm); }
.menu-filtro-lista a:hover { background: var(--fundo); }
.menu-filtro-lista a.ativo { background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); font-weight: 600; }
.segmentos, .paginacao-tamanhos { display: inline-flex; border: 1px solid var(--borda); border-radius: var(--raio-sm); overflow: hidden; }
.segmento { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--sp-3); color: var(--texto-suave); text-decoration: none; font-size: var(--fs-sm); }
.segmento + .segmento { border-left: 1px solid var(--borda); }
.segmento:hover { background: var(--fundo); }
.segmento.ativo { background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); font-weight: 600; }
.th-ordem { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; }
.tabela .num, .tabela th.num { text-align: right; white-space: nowrap; }
.tabela .acoes { white-space: nowrap; text-align: right; }
.form-linha { display: inline; }
.linha-inativa td { color: var(--texto-fraco); }
.selo { display: inline-block; padding: 1px 8px; border-radius: var(--raio-full); background: var(--fundo); border: 1px solid var(--borda); font-size: 11px; font-weight: 600; }
.estoque-baixo { color: var(--cor-erro); font-weight: 700; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 480px) { .grade-2 { grid-template-columns: 1fr; } }
.paginacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.paginacao-setas { display: inline-flex; align-items: center; gap: var(--sp-1); }
.paginacao-pagina { font-size: var(--fs-sm); padding: 0 var(--sp-2); }
.btn-icone.desabilitado { opacity: .4; cursor: not-allowed; }
.paginacao-contador { font-size: var(--fs-sm); color: var(--texto-suave); }

/* Venda rapida */
.venda-titulo { font-size: var(--fs-lg); margin: 0 0 var(--sp-3); }
.venda-aviso { max-width: 1200px; }
.resultados { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.prod-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
  min-height: 56px; padding: var(--sp-2) var(--sp-3); text-align: left; cursor: pointer;
  border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--branco); color: var(--texto);
}
.prod-item:hover { background: var(--cor-primaria-suave); border-color: var(--cor-primaria); }
.prod-nome { font-weight: 600; font-size: var(--fs-sm); }
.prod-meta { font-size: 12px; color: var(--texto-suave); }
.estado-vazio-pequeno { padding: var(--sp-4); }
.estado-vazio-pequeno .estado-vazio-icone { font-size: 32px; }
.item { display: grid; grid-template-columns: 1fr auto 110px 100px auto; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--borda); }
.qtd { display: inline-flex; align-items: center; gap: var(--sp-1); }
.qtd-valor { min-width: 28px; text-align: center; font-weight: 700; }
.input-preco { height: 44px; text-align: right; }
.item-sub { text-align: right; font-weight: 700; white-space: nowrap; }
@media (max-width: 700px) {
  .item { grid-template-columns: 1fr auto; }
  .item-info { grid-column: 1 / -1; }
}
.cliente-linha { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.cliente-nome { font-weight: 600; flex: 1 1 160px; }
.formas { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--sp-2); }
.forma {
  min-height: 52px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--branco);
  color: var(--texto); font-size: var(--fs-lg); font-weight: 600; cursor: pointer;
}
.forma:hover { background: var(--fundo); }
.forma.ativa { background: var(--cor-primaria); border-color: var(--cor-primaria); color: var(--texto-sobre-cor-primaria); }
.venda-rodape {
  position: sticky; bottom: 0; z-index: 10; max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio);
}
.venda-total strong { font-size: 24px; margin-left: var(--sp-2); font-family: var(--font-titulo); }
.venda-erro { color: var(--cor-erro); margin: 0; flex: 1 1 100%; font-size: var(--fs-sm); }
.btn-grande { min-height: 56px; padding: 0 var(--sp-6); font-size: var(--fs-lg); }
.lista-faltas { padding-left: var(--sp-5); }
.input-dia { width: auto; }
.pago { color: var(--cor-primaria-texto); font-weight: 600; }

/* Estoque */
.abas-estoque { margin-bottom: var(--sp-4); }
button.segmento { background: transparent; border: none; cursor: pointer; font-family: inherit; }
.campo-topo { margin-top: var(--sp-4); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.chip { min-height: 36px; padding: 0 var(--sp-3); border: 1px solid var(--borda); border-radius: var(--raio-full);
  background: var(--branco); color: var(--texto); font-size: var(--fs-sm); cursor: pointer; }
.chip:hover { background: var(--cor-primaria-suave); border-color: var(--cor-primaria); }

/* Usuarios: escolha de perfil (radio em segmentos) */
.campo .rotulo { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-1); }
.segmento-opcao { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.segmento-opcao + .segmento-opcao { border-left: 1px solid var(--borda); }
.segmento-opcao input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmento-opcao span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-3); color: var(--texto-suave); font-size: var(--fs-sm); font-weight: 400; }
.segmento-opcao input:checked + span { background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); font-weight: 600; }
.segmento-opcao input:focus-visible + span { outline: 2px solid var(--cor-primaria); outline-offset: -2px; }

/* Lousa: um cartao por cliente */
.lousa-resumo { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.pilula { background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); border-radius: var(--raio-full);
  padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); font-weight: 600; }
.lousa-grade { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); margin-top: var(--sp-4); }
.cartao { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); background: var(--branco);
  border: 1px solid var(--borda); border-radius: var(--raio); }
.cartao-zerado { background: transparent; border-style: dashed; }
.cartao-cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
.cartao-cab h2 { margin: 0; font-size: var(--fs-lg); }
.cartao-dias { display: flex; flex-direction: column; gap: var(--sp-3); max-height: 260px; overflow: auto; }
.cartao-dia-titulo { display: flex; justify-content: space-between; font-size: var(--fs-xs); font-weight: 700;
  color: var(--texto-suave); border-bottom: 1px solid var(--borda); padding-bottom: 2px; }
.cartao-anotacao { margin-top: var(--sp-1); }
.cartao-anotacao-cab { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-xs); color: var(--texto-suave); }
.cartao-anotacao ul { list-style: none; margin: 0; padding: 0; }
.cartao-anotacao li { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-sm); }
.cartao-total { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-xl);
  font-weight: 700; font-family: var(--font-titulo); }
.cartao-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.btn-fechar { background: var(--cor-laranja); border: 1px solid var(--cor-laranja); color: var(--texto-sobre-laranja);
  font-family: var(--font-fechar); font-weight: 600; }
.btn-fechar:hover:not(:disabled) { background: var(--cor-laranja-hover); border-color: var(--cor-laranja-hover); }
.btn-fechar:disabled { opacity: .45; cursor: not-allowed; }
.btn-sem-borda { border: 0; background: none; min-height: 32px; padding: 0 var(--sp-2); color: var(--texto-suave); cursor: pointer; }
.modal-lousa-itens { max-height: 32vh; overflow: auto; }

/* Balcao: abas Vender na hora / Lousa */
.abas { display: flex; max-width: 1200px; margin: 0 auto var(--sp-4); border: 1px solid var(--borda); border-radius: var(--raio);
  overflow: hidden; background: var(--branco); }
.aba { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 48px;
  color: var(--texto-suave); text-decoration: none; font-weight: 600; font-size: var(--fs-lg); }
.aba + .aba { border-left: 1px solid var(--borda); }
.aba i { font-size: 20px; }
.aba.ativa { background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); box-shadow: inset 0 -3px 0 var(--cor-primaria); }
.cliente-icone { font-size: 24px; color: var(--texto-suave); }
@media (max-width: 700px) {
  .formas { grid-template-columns: repeat(3, 1fr); }
  .forma { min-height: 56px; font-size: var(--fs-base); }
  .venda { padding-bottom: 96px; }
  .venda .item, .modal .item { grid-template-columns: auto 1fr auto; grid-template-areas: "info info sub" "qtd preco tira"; row-gap: var(--sp-2); padding: var(--sp-3) 0; }
  .venda .item-info, .modal .item-info { grid-area: info; }
  .venda .item .qtd, .modal .item .qtd { grid-area: qtd; }
  .venda .item .input-preco, .modal .item .input-preco { grid-area: preco; }
  .venda .item .item-sub, .modal .item .item-sub { grid-area: sub; align-self: start; font-size: var(--fs-lg); }
  .venda .item > .btn-icone, .modal .item > .btn-icone { grid-area: tira; }
  .venda .estado-vazio-pequeno { padding: var(--sp-2) 0; }
  .venda .estado-vazio-pequeno .estado-vazio-icone { display: none; }
  .venda .estado-vazio-pequeno p { max-width: none; text-align: left; }
  .venda-busca .texto-suave { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); }
  .venda-rodape { position: fixed; left: 0; right: 0; bottom: 0; max-width: none; border-radius: 0; border-width: 1px 0 0;
    flex-wrap: nowrap; padding: var(--sp-3); gap: var(--sp-3); box-shadow: 0 -4px 16px var(--cor-primaria-sombra); }
  .venda-rodape .venda-erro { position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: 100%; margin-bottom: var(--sp-2);
    padding: var(--sp-2) var(--sp-3); background: var(--branco); border: 1px solid var(--cor-erro); border-radius: var(--raio-sm); }
  .venda-total { display: flex; flex-direction: column; line-height: 1.1; }
  .venda-total strong { margin-left: 0; font-size: 22px; }
  .btn-grande { flex: 1; padding: 0 var(--sp-4); }
}

/* Links dentro de tabelas e cartoes seguem a cor do sistema */
.tabela a:not(.btn), .cartao a:not(.btn) { color: var(--texto); text-decoration: none; }
.tabela a:not(.btn):hover { text-decoration: underline; }

/* Celular: tabela vira lista de cartoes, o valor importante nunca fica fora da tela */
@media (max-width: 700px) {
  .tabela:not(.tabela-fixa), .tabela:not(.tabela-fixa) tbody, .tabela:not(.tabela-fixa) tr, .tabela:not(.tabela-fixa) td, .tabela:not(.tabela-fixa) tfoot { display: block; }
  .tabela:not(.tabela-fixa) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela-rolagem { overflow-x: visible; }
  .tabela:not(.tabela-fixa) tbody tr { margin-bottom: var(--sp-3); padding: var(--sp-2) var(--sp-4); border: 1px solid var(--borda);
    border-radius: var(--raio); background: var(--branco); }
  .tabela:not(.tabela-fixa) td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
    padding: 6px 0; border-bottom: 1px solid var(--fundo); text-align: right; }
  .tabela:not(.tabela-fixa) td:last-child { border-bottom: 0; }
  .tabela:not(.tabela-fixa) td::before { content: attr(data-label); flex: none; font-size: var(--fs-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); text-align: left; }
  .tabela:not(.tabela-fixa) td:first-child { display: block; text-align: left; font-size: var(--fs-lg); padding-top: var(--sp-2); }
  .tabela:not(.tabela-fixa) td:first-child::before { display: none; }
  .tabela:not(.tabela-fixa) td.acoes { justify-content: flex-end; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-2) 0 0; }
  .tabela:not(.tabela-fixa) td.acoes::before { display: none; }
  .tabela:not(.tabela-fixa) td.num { font-size: var(--fs-lg); }
  .tabela:not(.tabela-fixa) tfoot tr { display: flex; justify-content: space-between; align-items: baseline; padding: var(--sp-3) var(--sp-4);
    background: var(--cor-primaria-suave); border-radius: var(--raio); }
  .tabela:not(.tabela-fixa) tfoot th { display: block; border: 0; padding: 0; font-size: var(--fs-sm); color: var(--cor-primaria-escura); }
  .tabela:not(.tabela-fixa) tfoot th:empty { display: none; }
  .tabela:not(.tabela-fixa) tfoot th.num { font-size: var(--fs-xl); }
  .tabela:not(.tabela-fixa) .input-preco { width: 110px; }
}
@media (max-width: 700px) { .barra-filtros .busca { flex-basis: 160px; min-width: 0; } }

/* Inicio: resumo do dia */
.inicio { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-4); }
.inicio-ola { margin: 0; font-size: var(--fs-xl); }
.inicio-acoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 220px)); gap: var(--sp-3); }
.resumo-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); }
.resumo { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4); background: var(--branco);
  border: 1px solid var(--borda); border-radius: var(--raio); color: var(--texto); text-decoration: none; }
a.resumo:hover { border-color: var(--cor-primaria); background: var(--cor-primaria-suave); }
.resumo-rotulo { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); }
.resumo-valor { font-family: var(--font-titulo); font-size: 22px; }
.resumo-sub { font-size: var(--fs-sm); color: var(--texto-suave); }
.inicio-baixo { width: 100%; }
.inicio-baixo-cab { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.inicio-baixo-cab .venda-titulo { margin: 0; display: flex; align-items: center; gap: var(--sp-2); }
.lista-baixo { list-style: none; margin: 0; padding: 0; }
.lista-baixo li { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--borda); }
.lista-baixo li:last-child { border-bottom: 0; }
.lista-baixo .neg { color: var(--cor-erro); }
@media (max-width: 700px) { .inicio-acoes { grid-template-columns: 1fr 1fr; } .resumo-grade { grid-template-columns: 1fr 1fr; } .resumo-valor { font-size: 20px; } }

/* Lousa no celular */
.cartao-zerado .cartao-dias, .cartao-zerado .cartao-total { display: none; }
@media (max-width: 700px) {
  .modal-rodape { flex-wrap: wrap; }
  .modal-rodape .venda-total { flex: 1 1 100%; display: flex; justify-content: space-between; align-items: baseline; }
  .modal-rodape .venda-total strong { margin-left: 0; }
  .modal-rodape .btn { flex: 1 1 120px; min-height: 48px; }
  .modal .formas { grid-template-columns: repeat(3, 1fr); }
}
/* Fechar cartao: pagar e a acao principal; passar para o fiado fica separado e discreto */
#form-fechar .modal-rodape { flex-wrap: wrap; }
#fechar-confirmar { order: 2; }
#fechar-fiado { order: 3; flex: 1 1 100%; border: 0; background: none; color: var(--texto-suave); text-decoration: underline; min-height: 44px; }

/* Estoque no celular: linha compacta, saldo grande na direita */
@media (max-width: 700px) {
  .tabela-estoque.tabela:not(.tabela-fixa) tbody tr { display: grid; grid-template-columns: 1fr auto; column-gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
  .tabela-estoque.tabela:not(.tabela-fixa) td { border: 0; padding: 0; display: block; text-align: left; }
  .tabela-estoque.tabela:not(.tabela-fixa) td::before { display: none; }
  .tabela-estoque.tabela:not(.tabela-fixa) td:nth-child(2) { grid-column: 1; grid-row: 1; font-weight: 600; font-size: var(--fs-lg); padding: 0; }
  .tabela-estoque.tabela:not(.tabela-fixa) td:nth-child(1) { grid-column: 1; grid-row: 2; font-size: var(--fs-sm); color: var(--texto-suave); padding: 0; }
  .tabela-estoque.tabela:not(.tabela-fixa) td:nth-child(3) { display: none; }
  .tabela-estoque.tabela:not(.tabela-fixa) td:nth-child(4) { grid-column: 2; grid-row: 1 / 3; align-self: center; text-align: right; font-family: var(--font-titulo); font-size: 24px; font-weight: 700; }
  .tabela-estoque.tabela:not(.tabela-fixa) td:nth-child(5) { grid-column: 1; grid-row: 3; font-size: var(--fs-xs); color: var(--texto-suave); padding-top: var(--sp-1); }
  .tabela-estoque.tabela:not(.tabela-fixa) td:nth-child(5)::before { display: inline; content: "Mínimo "; }
  .tabela-estoque.tabela:not(.tabela-fixa) td.acoes { grid-column: 2; grid-row: 3; padding-top: var(--sp-2); }
}

/* Movimentos no celular: data e quantidade no topo, produto em destaque, resto em letra pequena */
@media (max-width: 700px) {
  .tabela-mov.tabela:not(.tabela-fixa) tbody tr { display: grid; grid-template-columns: 1fr auto; column-gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
  .tabela-mov.tabela:not(.tabela-fixa) td { border: 0; padding: 0; display: block; text-align: left; font-size: var(--fs-sm); color: var(--texto-suave); }
  .tabela-mov.tabela:not(.tabela-fixa) td::before { display: none; }
  .tabela-mov.tabela:not(.tabela-fixa) td:nth-child(1) { grid-column: 1; grid-row: 1; font-size: var(--fs-xs); padding: 0; }
  .tabela-mov.tabela:not(.tabela-fixa) td:nth-child(2) { grid-column: 1; grid-row: 2; font-size: var(--fs-base); color: var(--texto); padding: 0; }
  .tabela-mov.tabela:not(.tabela-fixa) td:nth-child(4) { grid-column: 2; grid-row: 1 / 3; align-self: center; text-align: right; font-family: var(--font-titulo); font-size: 24px; font-weight: 700; }
  .tabela-mov.tabela:not(.tabela-fixa) td:nth-child(3) { grid-column: 1 / -1; grid-row: 3; padding-top: var(--sp-1); }
  .tabela-mov.tabela:not(.tabela-fixa) td:nth-child(5) { grid-column: 1 / -1; grid-row: 4; }
  .tabela-mov.tabela:not(.tabela-fixa) td:nth-child(6) { grid-column: 1 / -1; grid-row: 5; }
  .tabela-mov.tabela:not(.tabela-fixa) td:nth-child(3)::before, .tabela-mov.tabela:not(.tabela-fixa) td:nth-child(5)::before, .tabela-mov.tabela:not(.tabela-fixa) td:nth-child(6)::before { display: inline; margin-right: var(--sp-2); }
}

/* Contagem no celular: nome e saldo do sistema a esquerda, campo para digitar a direita */
@media (max-width: 700px) {
  #form-contagem { padding-bottom: 96px; }
  .tabela-contagem.tabela:not(.tabela-fixa) tbody tr { display: grid; grid-template-columns: 1fr 100px; column-gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); }
  .tabela-contagem.tabela:not(.tabela-fixa) td { border: 0; padding: 0; display: block; text-align: left; }
  .tabela-contagem.tabela:not(.tabela-fixa) td::before { display: none; }
  .tabela-contagem.tabela:not(.tabela-fixa) td:nth-child(2) { grid-column: 1; grid-row: 1; font-weight: 600; font-size: var(--fs-base); }
  .tabela-contagem.tabela:not(.tabela-fixa) td:nth-child(1) { grid-column: 1; grid-row: 2; font-size: var(--fs-sm); color: var(--texto-suave); }
  .tabela-contagem.tabela:not(.tabela-fixa) td:nth-child(3) { display: none; }
  .tabela-contagem.tabela:not(.tabela-fixa) td:nth-child(4) { grid-column: 1; grid-row: 3; font-size: var(--fs-xs); color: var(--texto-suave); font-weight: 400; }
  .tabela-contagem.tabela:not(.tabela-fixa) td:nth-child(4)::before { display: inline; content: "No sistema: "; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); }
  .tabela-contagem.tabela:not(.tabela-fixa) td:nth-child(5) { grid-column: 2; grid-row: 1 / 4; }
  .tabela-contagem.tabela:not(.tabela-fixa) .input-preco { width: 100%; height: 52px; font-size: var(--fs-xl); }
}

/* Financeiro */
.fin-periodo { margin-bottom: var(--sp-2); }
.fin-intervalo { margin: 0 0 var(--sp-3); }
.fin-titulo { font-size: var(--fs-lg); margin: var(--sp-5) 0 var(--sp-2); }
.fin-grafico { display: block; width: 100%; height: 140px; background: var(--fundo); border-radius: var(--raio-sm); }
.fin-barra { fill: var(--cor-primaria); }
.fin-eixo { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--texto-suave); margin-top: var(--sp-1); }
.fin-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.fin-linha { display: flex; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-1); }
.fin-meter { display: block; width: 100%; height: 10px; appearance: none; border: 0; border-radius: 5px; background: var(--fundo); }
.fin-meter::-webkit-meter-bar { height: 10px; border: 0; border-radius: 5px; background: var(--fundo); }
.fin-meter::-webkit-meter-optimum-value, .fin-meter::-webkit-meter-suboptimum-value, .fin-meter::-webkit-meter-even-less-good-value { background: var(--cor-primaria); border-radius: 5px; }
.fin-meter::-moz-meter-bar { background: var(--cor-primaria); border-radius: 5px; }
@media (max-width: 700px) {
  .tabela-fin.tabela:not(.tabela-fixa) tbody tr { display: grid; grid-template-columns: 1fr auto; column-gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
  .tabela-fin.tabela:not(.tabela-fixa) td { border: 0; padding: 0; display: block; text-align: left; }
  .tabela-fin.tabela:not(.tabela-fixa) td::before { display: none; }
  .tabela-fin.tabela:not(.tabela-fixa) td:nth-child(2) { grid-column: 1; grid-row: 1; font-weight: 600; font-size: var(--fs-base); }
  .tabela-fin.tabela:not(.tabela-fixa) td:nth-child(1) { grid-column: 1; grid-row: 2; font-size: var(--fs-sm); color: var(--texto-suave); }
  .tabela-fin.tabela:not(.tabela-fixa) td:nth-child(3) { grid-column: 1; grid-row: 3; font-size: var(--fs-xs); color: var(--texto-suave); }
  .tabela-fin.tabela:not(.tabela-fixa) td:nth-child(3)::after { content: " un."; }
  .tabela-fin.tabela:not(.tabela-fixa) td:nth-child(4) { grid-column: 2; grid-row: 1 / 4; align-self: center; text-align: right; font-family: var(--font-titulo); font-size: var(--fs-lg); font-weight: 700; }
}
.fin-linha strong { white-space: nowrap; }
.fin-periodo .input-dia { flex: 1 1 130px; min-width: 0; }
.fin-titulo { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.fin-csv { font-weight: 400; }
@media (max-width: 700px) { .resumo-grade .resumo:nth-child(5) { grid-column: 1 / -1; } }

/* ===== Padrao iOS: fundo agrupado, cartoes sem borda, controles segmentados, folhas, vidro ===== */
body { -webkit-font-smoothing: antialiased; }
.box, .card, .cartao, .resumo { border: 0; box-shadow: var(--sombra-card); }
.cartao-zerado { background: var(--trilho); box-shadow: none; }
.resumo-valor, .cartao-total, .venda-total strong { font-weight: 700; letter-spacing: -.02em; }
.input { background: var(--fundo); border-color: var(--borda-campo); border-radius: var(--raio-sm); }
.input:focus { background: var(--branco); outline: 2px solid var(--cor-primaria); outline-offset: 0; border-color: transparent; }
.btn { background: var(--trilho); border-color: transparent; font-weight: 600; transition: opacity var(--transicao); }
.btn:hover { background: var(--trilho); }
.btn:active, .btn-icone:active, .forma:active, .prod-item:active, .nav-item:active, .aba:active { opacity: .55; }
.btn-primary, .btn-laranja, .btn-home-side { background: var(--cor-laranja); border-color: transparent; color: var(--texto-sobre-laranja); font-weight: 600; }
.btn-primary:hover, .btn-laranja:hover, .btn-home-side:hover { background: var(--cor-laranja-hover); border-color: transparent; color: var(--texto-sobre-laranja); }
.btn-home-side { box-shadow: none; transform: none; border-radius: var(--raio-sm); }
.btn-home-side:hover { transform: none; }
.btn-home-side.ativo { box-shadow: inset 0 0 0 2px var(--cor-laranja-hover); }
.btn-fechar { border-color: transparent; }
.btn-icone { border-radius: var(--raio-full); }
.prod-item, .forma { border-color: transparent; background: var(--fundo); border-radius: var(--raio-sm); }
.forma.ativa { background: var(--cor-primaria); }
.prod-item:hover { background: var(--cor-primaria-suave); border-color: transparent; }
.chip { background: var(--trilho); border-color: transparent; }

/* controle segmentado (filtros, abas Vender/Lousa, perfil) */
.segmentos, .paginacao-tamanhos { border: 0; background: var(--trilho); padding: 2px; border-radius: 9px; gap: 2px; }
.segmento { border-radius: 7px; min-height: 36px; font-weight: 500; }
.segmento + .segmento, .segmento-opcao + .segmento-opcao { border-left: 0; }
.segmento:hover { background: transparent; }
.segmento.ativo { background: var(--branco); color: var(--texto); font-weight: 600; box-shadow: var(--sombra-seg); }
.segmento-opcao span { border-radius: 7px; min-height: 40px; }
.segmento-opcao input:checked + span { background: var(--branco); color: var(--texto); box-shadow: var(--sombra-seg); }
.abas { border: 0; background: var(--trilho); padding: 3px; border-radius: 12px; gap: 3px; }
.aba + .aba { border-left: 0; }
.aba { border-radius: 9px; min-height: 44px; }
.aba.ativa { background: var(--branco); color: var(--texto); box-shadow: var(--sombra-seg); }
.tab.ativa { color: var(--cor-primaria-texto); }
.pilula { background: var(--trilho); color: var(--texto); }

/* listas e tabelas: separador fino, cabecalho discreto */
.tabela th { font-size: var(--fs-xs); letter-spacing: .04em; border-bottom-color: var(--borda); }
.tabela td, .item, .cartao-dia-titulo, .modal-cab, .modal-rodape { border-color: var(--borda); }
.nav-item.ativo { background: var(--cor-primaria-suave); }
.menu-filtro-lista { border: 0; box-shadow: var(--sombra-folha); border-radius: var(--raio); }

/* barra do topo e menu lateral em vidro */
.topbar { background: var(--vidro); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.titulo-pagina { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.sidebar { background: var(--vidro); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.sidebar-nav { padding-top: var(--sp-2); }
.grupo-label { letter-spacing: .04em; font-weight: 600; }

/* janelas: folha que sobe do rodape no celular */
.modal { border: 0; box-shadow: var(--sombra-folha); }
.modal-cab h2 { font-size: 17px; font-weight: 600; }
@media (max-width: 700px) {
  .modal { width: 100%; max-width: none; margin: auto 0 0; border-radius: var(--raio-lg) var(--raio-lg) 0 0; max-height: 92vh; }
  .modal-cab::before { content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 5px; margin-left: -18px;
    border-radius: 3px; background: var(--trilho); }
  .modal-cab { position: relative; padding-top: var(--sp-5); }
  .venda-rodape { background: var(--vidro); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    box-shadow: none; border-top: 1px solid var(--borda); }
  .tabela:not(.tabela-fixa) tbody tr { border: 0; box-shadow: var(--sombra-card); }
  .tabela:not(.tabela-fixa) td { border-bottom-color: var(--fundo); }
}
.btn-fechar { background: var(--cor-laranja); color: var(--texto-sobre-laranja); }
.btn-fechar:hover:not(:disabled) { background: var(--cor-laranja-hover); }
.btn-fechar:disabled:hover { background: var(--cor-laranja); }
.lousa-novo { display: none; }
@media (max-width: 900px) { .lousa-novo { display: flex; width: 100%; margin-bottom: var(--sp-3); } }
@media (max-width: 900px) { .lousa-novo-topo { display: none; } }

/* laranja: forma de pagamento escolhida; cabecalhos de ordenacao cinza; colunas centralizadas */
.forma.ativa { background: var(--cor-laranja); border-color: var(--cor-laranja); color: var(--texto-sobre-laranja); }
.tabela a.th-ordem { color: var(--texto-suave); }
.tabela a.th-ordem:hover { text-decoration: none; color: var(--texto); }
@media (min-width: 701px) { .tabela td.centro, .tabela th.centro { text-align: center; white-space: nowrap; } .tabela th.centro .th-ordem { justify-content: center; } }
@media (min-width: 701px) { .tabela td.acoes.centro { text-align: center; } }

/* revisao do Chato: busca a 16px no celular (iPhone nao da zoom), alvos de toque maiores, estoque baixo com icone, sem animacao se o aparelho pedir */
@media (max-width: 700px) {
  .input-filtro { font-size: var(--fs-lg); }
  .segmento { min-height: 40px; }
  .chip { min-height: 40px; }
}
.btn-sem-borda { min-height: 44px; min-width: 44px; }
.estoque-baixo i { margin-right: var(--sp-1); }
.fin-resumo-grafico { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--texto-suave); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }