/* Tela do caixa. So componentes desta tela — cor sempre por token, nunca
   cravada, senao a marca deixa de ser trocavel num arquivo so. */

.oculto{display:none !important}

/* ── Marca ────────────────────────────────────────────────────────────────
   A logo e branca e amarela sobre PRETO. Como a barra tambem e preta, o
   arquivo original entra aqui sem recorte nenhum. */
.barra-marca{background:var(--preto);border-bottom:0;backdrop-filter:none}
/* Arquivo vetorial da marca. O fundo preto ja vem nela e a barra tambem e
   preta, entao encaixa sem recorte. width/height no HTML reservam o espaco
   para o topo nao "pular" enquanto carrega. */
.marca-img{display:block;height:40px;width:auto}
.marca-img.grande{height:110px}

.menu{display:flex;gap:2px;margin-left:14px;flex:1;overflow-x:auto}
.menu button{background:none;border:0;border-radius:8px;color:rgba(255,255,255,.62);
  padding:8px 12px;font:600 13px 'Inter',sans-serif;cursor:pointer;white-space:nowrap}
.menu button:hover{color:#fff}
/* Aba ativa: amarelo PREENCHIDO com preto por cima — 14,6 de contraste. */
.menu button.ativa{background:var(--marca);color:var(--sobre-marca)}
.barra-marca .vr{background:rgba(255,255,255,.16)}
.barra-marca .icon-btn{color:rgba(255,255,255,.72)}
.barra-marca .icon-btn:hover{color:#fff;background:rgba(255,255,255,.10)}
/* O base.css da `width:100%` a todo select. Sem largura propria aqui, este
   engole a barra inteira e espreme o menu ate zero — bug que so o dono via,
   porque so ele tem seletor de loja. */
.sel-loja{flex:0 0 auto;width:auto;max-width:190px;margin-bottom:0;
  background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.20);
  border-radius:9px;padding:7px 10px;font:600 12.5px 'Inter',sans-serif}

/* ── Cabecalho do dia ─────────────────────────────────────────────────────── */
.total-dia{text-align:right}
.total-rot{display:block;font-size:11.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:.6px}
.total-num{font-size:28px;font-weight:600;color:var(--purple-num)}

/* ── Meta ─────────────────────────────────────────────────────────────────── */
.meta-card{padding:16px 20px}
.meta-topo{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px;gap:12px}
.meta-rot{font-size:13px;font-weight:600}
.meta-val{font-size:12.5px;color:var(--text-2)}
.meta-trilho{height:16px;background:var(--bg3);border-radius:var(--r-sm);overflow:hidden}
/* Barra amarela: preenchimento, com a porcentagem em preto por cima. */
.meta-barra{height:100%;background:var(--marca);border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:flex-end;padding-right:7px;
  font:600 11px 'Inter',sans-serif;color:var(--sobre-marca);transition:width .3s}
.meta-card .hint{margin:8px 0 0}

/* ── Tabela ───────────────────────────────────────────────────────────────── */
.sem-pad{padding:0;overflow:hidden}
.rolagem{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{background:var(--preto);color:var(--marca);text-align:left;padding:9px 12px;
  font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.tbl td{padding:9px 12px;border-top:1px solid var(--border);vertical-align:middle}
.c-hora{width:62px}
.c-un{width:44px}
.c-valor{width:104px;text-align:right}
.c-origem{width:96px}
.c-acao{width:44px}
.tbl td.c-valor{text-align:right;font-weight:600;color:var(--valor)}
.hora{color:var(--text-3);font-size:12px}
.cliente{color:var(--text-3);font-size:12px}
.avulso{color:var(--text-2);font-style:italic}

/* As tres origens ficam nas cores que elas ja leem no Google Sheets. */
.o-pix{color:var(--pix)}
.o-dinheiro{color:var(--dinheiro)}
.o-cartao{color:var(--cartao)}
.tbl .o-pix,.tbl .o-dinheiro,.tbl .o-cartao{font-weight:600;font-size:12.5px}

.vazio{padding:34px 16px;text-align:center;color:var(--text-3);font-size:13px}

/* ── Lancar ───────────────────────────────────────────────────────────────── */
/* O base.css veste os campos com `input:not([type=checkbox]):not([type=radio])`,
   que vale (0,2,1) de especificidade — mais que uma classe sozinha. Por isso os
   seletores abaixo levam classe+classe+elemento: sem isso o `width:100%` dele
   vence, o campo de valor toma a linha inteira e a busca colapsa. O
   `margin-bottom:14px` dele tambem precisa ser zerado aqui, senao a linha do
   formulario ganha um degrau que nao existe no desenho. */
.lancar-grade{display:flex;gap:10px;margin-bottom:12px;align-items:stretch}
.campo-busca{position:relative;flex:1 1 auto;min-width:0}
.busca-ic{position:absolute;left:12px;top:21px;transform:translateY(-50%);color:var(--text-3);pointer-events:none;z-index:1}
.lancar-grade .campo-busca input{width:100%;padding-left:34px;margin-bottom:0}
.lancar-grade input.campo-valor{flex:0 0 140px;width:140px;text-align:right;font-weight:600;margin-bottom:0}
.sugestoes{position:absolute;z-index:20;top:calc(100% + 4px);left:0;right:0;max-height:264px;overflow-y:auto;
  background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r-md);box-shadow:var(--flutua)}
.sugestoes button{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;
  background:none;border:0;border-bottom:1px solid var(--border);padding:11px 13px;cursor:pointer;
  font:400 13.5px 'Inter',sans-serif;color:var(--text);text-align:left;min-height:44px}
.sugestoes button:last-child{border-bottom:0}
.sugestoes button:hover,.sugestoes button.marcada{background:var(--purple-bg)}
.sug-preco{color:var(--valor);font-weight:600;white-space:nowrap}
.sug-cat{color:var(--text-3);font-size:11.5px}

.origens{display:flex;gap:8px;flex-wrap:wrap;max-width:560px}
.orig{flex:1;min-width:96px;min-height:44px;border:1px solid var(--border);background:var(--bg3);
  border-radius:10px;padding:11px 12px;cursor:pointer;font:600 13px 'Inter',sans-serif;color:var(--text-2)}
.orig:hover{border-color:var(--border2);color:var(--text)}
/* Selecionada: amarelo preenchido, preto por cima. */
.orig.ativa{background:var(--marca);border-color:var(--marca-d);color:var(--sobre-marca)}

.aviso{display:flex;align-items:center;gap:9px;padding:11px 14px;border-radius:var(--r-md);
  font-size:12.5px;margin-bottom:14px;background:var(--red-bg);border:1px solid var(--red-bd);color:var(--red)}

/* ── Entrar ───────────────────────────────────────────────────────────────── */
/* position/z-index pelo mesmo motivo que o .container do base.css os tem: a
   grade de fundo e um ::before fixo em z-index 0 e, sem contexto de empilhamento
   proprio, ela aparece POR CIMA do card branco. */
.entrar{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:20px;padding:24px 16px;background:var(--preto)}
.marca-bloco{text-align:center}
.marca-bloco{display:flex;justify-content:center}
.entrar-card{width:100%;max-width:380px;margin:0}
.lista-usuarios{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.lista-usuarios button{display:flex;justify-content:space-between;align-items:center;gap:10px;
  min-height:52px;padding:13px 16px;border:1px solid var(--border);background:var(--bg3);
  border-radius:var(--r-md);cursor:pointer;font:600 14.5px 'Inter',sans-serif;color:var(--text);text-align:left}
.lista-usuarios button:hover{background:var(--purple-bg);border-color:var(--purple-bd)}
.lista-usuarios .onde{font-size:11.5px;font-weight:400;color:var(--text-3)}

.pin-quem{text-align:center;font-size:15px;font-weight:600;margin:14px 0 12px}
.pin-pontos{display:flex;justify-content:center;gap:12px;margin-bottom:18px}
.pin-pontos i{width:14px;height:14px;border-radius:50%;background:var(--bg4);border:1px solid var(--border2)}
.pin-pontos i.cheio{background:var(--marca);border-color:var(--marca-d)}
.teclado{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.teclado button{min-height:56px;border:1px solid var(--border);background:var(--bg3);border-radius:var(--r-md);
  cursor:pointer;font:600 20px 'Inter',sans-serif;color:var(--text)}
.teclado button:hover{background:var(--bg4)}
.teclado button:active{background:var(--marca);color:var(--sobre-marca)}
.teclado .apagar{font-size:14px}
.pin-erro{min-height:20px;text-align:center;color:var(--red);font-size:12.5px;margin:12px 0 4px}
#pin-voltar{width:100%}

/* ── Celular ──────────────────────────────────────────────────────────────
   A regra do DESIGN.md e que o celular funcione igual ao desktop, com alvo de
   toque >= 44px. Aqui a tabela perde as colunas de menos peso e o formulario
   de lancamento empilha. */
@media (max-width:640px){
  .container{padding:14px 12px 90px}
  /* A 390px nao cabe logo + 4 abas + sair numa linha so: "Clientes" cortava e
     "Produtos" ficava inalcancavel. A barra passa a ter duas linhas, e o menu
     rola na horizontal na segunda. */
  .topbar{padding:0 12px;height:auto;flex-wrap:wrap}
  .logo{margin-right:auto;padding:11px 0}
  .marca-img{height:36px}
  .barra-marca .vr{display:none}
  .menu{order:5;flex-basis:100%;margin-left:-4px;padding:0 0 7px;
    overflow-x:auto;scrollbar-width:none}
  .menu::-webkit-scrollbar{display:none}
  .menu button{min-height:40px}
  .sel-loja{order:4}
  .head-row{flex-direction:row;align-items:flex-end;gap:10px}
  .total-num{font-size:23px}
  .c-un,.tbl td.c-un{display:none}
  .c-hora{width:52px}
  .c-origem{width:78px}
  .tbl th,.tbl td{padding:10px 9px}
  .lancar-grade{flex-direction:column}
  .lancar-grade input.campo-valor{flex:1 1 auto;width:100%;text-align:left}
  .origens{max-width:none}
  .orig{min-width:0}
  .card-foot{flex-direction:column-reverse;align-items:stretch}
  .card-foot .btn{width:100%;min-height:46px}
  .card-foot .esq{margin-right:0}
}

/* ── Produtos ─────────────────────────────────────────────────────────────── */
.c-gar{width:96px;white-space:nowrap}
.tbl td.custo{color:var(--text-3);font-weight:400}
#csv{font-family:var(--mono);font-size:12.5px;min-height:132px}
#resumo-import{margin:-4px 0 4px}