/* Fechamento de caixa · visual da tela do caixa (27/10)
   Linguagem aprovada da Cantina: vinho com linho e monograma, papel creme, borda dourada com LED,
   Délio saindo do cartão, Gloock nos títulos, Archivo nos números (leitura rápida), letra à mão no "bom serviço".
   A "comanda" do lado direito é o resumo do turno: cresce a cada conta, como um cupom de caixa. */

:root{
  --r:14px; --r-campo:10px;
  --num:"Archivo","Helvetica Neue",Arial,sans-serif;
  --led:0 0 0 1.5px rgba(246,239,226,.95),0 0 0 6px rgba(232,196,110,.30),0 0 40px rgba(232,196,110,.22),0 24px 60px rgba(8,1,2,.55);
  --led-leve:0 0 0 1px rgba(246,239,226,.85),0 0 0 5px rgba(232,196,110,.16),0 0 30px rgba(232,196,110,.10),0 2px 3px rgba(10,2,3,.25),0 18px 40px rgba(10,2,3,.35);
  --c-dinheiro:#3f7a4c; --c-credito:#2f5a86; --c-debito:#5a606b; --c-voucher:#7a4f93; --c-pix:#2a8a78; --c-pessoas:#6b1e23; --c-cortesia:#a8682f;
  --verde-1:#24804a; --verde-2:#145a32;
  --ink-2:#5f4c40; --ink-3:#8a6a4a; --linha:rgba(107,30,35,.13);
}

/* monograma da marca no alto da página, sumindo em degradê */
body{position:relative;overflow-x:hidden}
body::before{content:"";position:absolute;left:0;right:0;top:0;height:520px;z-index:0;pointer-events:none;
  background:url(img/padrao-vinho.svg) center top/280px;opacity:.42;
  -webkit-mask:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 45%,transparent 100%);mask:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 45%,transparent 100%)}
body>:not(dialog):not(.aviso){position:relative;z-index:1}
.papel{border-radius:var(--r);box-shadow:var(--led-leve)}
.num-tab,.tabela,.li b{font-variant-numeric:tabular-nums}

/* ---------- botões ---------- */
.bt{border-radius:999px;position:relative;overflow:hidden;font-family:var(--num);font-weight:700;letter-spacing:.06em;font-size:.86rem;text-transform:uppercase;
  transition:transform .25s var(--ease),box-shadow .3s,filter .3s}
.bt::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,240,210,.35) 48%,transparent 66%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.bt:not(:disabled):hover::after{transform:translateX(120%)}
.bt:not(:disabled):hover{transform:translateY(-1px)}
.bt:disabled{filter:grayscale(.5) brightness(.85) opacity(.6);cursor:not-allowed}
.bt--ouro{background:linear-gradient(180deg,#e6c77f 0%,#c9a258 55%,#a8823f 100%);color:#2a1608}
.bt--linha{background:transparent}
.papel .bt--linha,.janela .bt--linha{color:var(--vinho)!important;border:1.5px solid rgba(107,30,35,.35)!important;background:rgba(255,255,255,.35)}
.bt kbd{font-family:var(--num);font-size:.7rem;font-weight:600;letter-spacing:0;text-transform:none;padding:.15em .55em;border-radius:6px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);margin-left:.3em}
.bt svg{width:18px;height:18px;flex:none}

/* ---------- entrar: Délio saindo do cartão ---------- */
.login{position:relative}
.login form{max-width:420px;padding:44px 30px 30px;border-radius:20px;box-shadow:var(--led);overflow:visible;isolation:isolate}
.login form::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:url(img/padrao-cantina.svg) center/150px;opacity:.35;-webkit-mask:radial-gradient(ellipse 70% 60% at 50% 55%,transparent 30%,#000 100%);mask:radial-gradient(ellipse 70% 60% at 50% 55%,transparent 30%,#000 100%)}
.cartao-login{position:relative;width:100%;max-width:420px;margin-top:110px}
.cartao-login form{position:relative;z-index:1;max-width:none}
/* o Délio sai de TRÁS do cartão: só o busto aparece acima da borda */
.login .delio{position:absolute;right:14px;top:-178px;height:236px;width:auto;z-index:0;pointer-events:none;filter:drop-shadow(0 18px 24px rgba(10,2,3,.5))}
.login .logo{width:140px;height:78px;margin-bottom:12px}
.login h1{font-size:2.3rem}
.login .mao{font-family:var(--mao);color:#9a7430;font-size:1.5rem;line-height:1;margin:2px 0 18px;transform:rotate(-3deg)}
.login p{margin-bottom:20px}
.seg{border:0;gap:6px;background:rgba(107,30,35,.08);padding:5px;border-radius:999px}
.seg span{border-radius:999px;font-family:var(--num);font-weight:700;letter-spacing:.08em;transition:background .3s,color .3s}
.seg input:checked+span{box-shadow:0 4px 12px rgba(107,30,35,.3)}
.pin{font-family:var(--num);font-weight:700;letter-spacing:.5em;font-size:2rem;border:0;border-radius:12px;background:rgba(255,255,255,.6);
  box-shadow:inset 0 1px 3px rgba(42,10,12,.12);padding:.45em 0 .45em .5em;margin-bottom:14px;transition:box-shadow .25s}
.pin:focus{box-shadow:inset 0 1px 3px rgba(42,10,12,.12),0 0 0 3px rgba(201,162,88,.55)}

/* ---------- barra do topo ---------- */
.barra{background:linear-gradient(180deg,rgba(32,7,9,.94),rgba(42,10,12,.88));box-shadow:0 10px 30px rgba(0,0,0,.25)}
.barra .wrap{min-height:76px}
.barra .marca{width:84px;height:48px}
.barra .titulo{font-size:1.55rem}
.barra .titulo small{font-family:var(--mao);font-size:1.15rem;letter-spacing:0;text-transform:none;color:var(--ouro-2);margin-top:2px}
.ctrl{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.campo-esc span{color:rgba(246,239,226,.55)}
.campo-esc select{appearance:none;-webkit-appearance:none;border-radius:999px;padding:.5em 2.4em .5em 1.1em;min-height:46px;font-family:var(--num);font-weight:600;font-size:.95rem;
  background:rgba(246,239,226,.07) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%23d6b46e' stroke-width='1.8' fill='none'/></svg>") right 1em center no-repeat;border:1px solid rgba(214,180,110,.35)}
.campo-esc select:focus{outline:none;box-shadow:0 0 0 3px rgba(214,180,110,.45)}
/* turno: pílula com indicador dourado que desliza */
.turnos{position:relative;display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(214,180,110,.35);border-radius:999px;padding:4px;background:rgba(246,239,226,.06);overflow:hidden}
.turnos::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;
  background:linear-gradient(180deg,#f6efe2,#e6d8bf);box-shadow:0 4px 14px rgba(0,0,0,.3);transition:transform .45s var(--ease)}
.turnos:has([data-turno=jantar][aria-pressed=true])::before{transform:translateX(100%)}
.turnos button{position:relative;z-index:1;min-height:38px;padding:.3em 1.2em;border-radius:999px;font-family:var(--num);font-weight:700;font-size:.82rem;letter-spacing:.08em;transition:color .35s}
.turnos button[aria-pressed=true]{background:none;color:var(--vinho)}
.link{font-family:var(--num);font-weight:600;letter-spacing:.08em}

/* ---------- grade ---------- */
.grade{gap:24px;padding-top:28px;grid-template-columns:minmax(0,1fr) 370px}
.lado{top:100px}

/* ---------- nova conta ---------- */
.nova{padding:24px 24px 20px}
.nova h2{font-size:1.75rem;margin-bottom:16px}
.nova h2 .rot{font-family:var(--num);font-weight:700;letter-spacing:.06em;font-size:.72rem;color:#7a5f35;background:linear-gradient(180deg,#f3e3bd,#e5cc93);padding:.35em .8em;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(168,130,63,.35)}
.nova h2 .rot:empty{display:none}
.campos{gap:12px}
.campo span{display:flex;align-items:center;gap:7px;font-family:var(--num);font-weight:700;font-size:.66rem;letter-spacing:.12em;color:var(--ink-2)}
.campo:has(input[name]) span::before,.campo:has(.ifd) span::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--cor,#b8924a);flex:none}
.campo:has(input[name=dinheiro]){--cor:var(--c-dinheiro)}
.campo:has(input[name=credito]),.campo:has(.ifd[data-k=credito]){--cor:var(--c-credito)}
.campo:has(input[name=debito]),.campo:has(.ifd[data-k=debito]){--cor:var(--c-debito)}
.campo:has(input[name=voucher]),.campo:has(.ifd[data-k=voucher]){--cor:var(--c-voucher)}
.campo:has(input[name=pix]),.campo:has(.ifd[data-k=pix]){--cor:var(--c-pix)}
.campo:has(input[name=pessoas]){--cor:var(--c-pessoas)}
.campo:has(input[name=cortesia]){--cor:var(--c-cortesia)}
.campo:has(.ifd[data-k=desconto]){--cor:#c9b9a0}
.janela .campo span::before{display:none}
.campo input,.itu .tabela input,.itu .soma-lista input,.ifood input{
  font-family:var(--num)!important;font-weight:600;font-size:1.3rem;letter-spacing:-.01em;color:var(--tinta);
  border:1.5px solid rgba(107,30,35,.16)!important;border-radius:var(--r-campo)!important;background:rgba(255,253,248,.82)!important;
  box-shadow:inset 0 1px 2px rgba(42,10,12,.08);transition:border-color .2s,box-shadow .25s,background .2s,transform .2s}
.campo input{min-height:58px;padding:.45em .7em}
.campo input::placeholder,.itu input::placeholder,.ifood input::placeholder{color:rgba(42,10,12,.22)}
.campo input:hover:not(:disabled){border-color:rgba(107,30,35,.3)!important}
.campo input:focus,.itu .tabela input:focus,.itu .soma-lista input:focus,.ifood input:focus{
  border-color:var(--cor,#b8924a)!important;background:#fff!important;transform:translateY(-1px);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--cor,#c9a258) 22%,transparent),0 8px 18px rgba(42,10,12,.1)!important}
.campo input.ruim,.itu input.ruim{border-color:#b3343b!important;background:#fdeeee!important;animation:treme .35s}
@keyframes treme{25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
.acoes-nova{margin-top:18px;padding-top:16px;border-top:1px dashed rgba(107,30,35,.2)}
.acoes-nova .soma{font-family:var(--num);font-weight:700;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:baseline;gap:10px}
.acoes-nova .soma b{font-family:var(--display);font-size:2rem;letter-spacing:-.01em;color:var(--tinta);margin:0}
.acoes-nova .bt{min-width:230px;min-height:58px}
.dica{font-size:.85rem;color:var(--ink-3);margin-top:12px}
.dica kbd{font-family:var(--num);font-weight:600;border-radius:6px;background:#fff;box-shadow:0 1px 0 rgba(107,30,35,.25)}
.travado{border-radius:10px;border-left-width:4px}
.nova.editando{box-shadow:0 0 0 2px #f6efe2,0 0 0 6px rgba(232,196,110,.55),0 0 40px rgba(232,196,110,.3),0 18px 40px rgba(10,2,3,.35)}

/* ---------- contas do turno ---------- */
.contas{padding:22px 22px 16px}
.contas h3{font-size:1.5rem;margin-bottom:12px}
.contas h3 .rot,.itu h3 .rot{font-family:var(--num);font-weight:700;font-size:.7rem;letter-spacing:.1em;color:var(--ink-3)}
.tabela th{font-family:var(--num);font-weight:700;font-size:.62rem;letter-spacing:.1em;color:var(--ink-3);border-bottom:1.5px solid rgba(107,30,35,.22);padding:.7em .38em;white-space:nowrap}
.tabela td{font-family:var(--num);font-weight:500;font-size:1rem;padding:.7em .45em;border-bottom:1px solid var(--linha);transition:background .2s}
.tabela tbody tr:nth-child(even) td{background:rgba(107,30,35,.028)}
.tabela tbody tr:hover td{background:rgba(214,180,110,.12)}
.tabela td.tot{font-family:var(--num);font-weight:800;font-size:1.06rem}
.tabela td.zero{color:rgba(42,10,12,.2)}
.tabela td:first-child{white-space:nowrap}
.tabela td .n:first-child{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:999px;background:rgba(107,30,35,.08);color:var(--vinho);font-family:var(--num);font-weight:700;font-size:.78rem}
.tabela td .n+.n{font-family:var(--num);font-size:.78rem;color:var(--ink-3)}
.tabela tfoot td{font-weight:800;background:linear-gradient(180deg,rgba(107,30,35,.07),rgba(107,30,35,.04));border-top:2px solid rgba(107,30,35,.3)}
.tabela tfoot td:first-child{border-radius:0 0 0 10px}
.tabela tfoot td:last-child{border-radius:0 0 10px 0}
/* corrigir / apagar: botões redondos com ícone */
.tabela td:last-child:has(.mini){white-space:nowrap;width:1%;padding-left:.3em}
.tabela .mini{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;margin-left:2px;border-radius:50%;text-decoration:none;color:var(--ink-2);background:rgba(107,30,35,.06);transition:background .2s,color .2s,transform .2s}
.tabela .mini svg{width:17px;height:17px}
.tabela .mini:hover{background:var(--vinho);color:var(--creme);transform:scale(1.06)}
.tabela .mini[data-acao=apagar]:hover{background:#a3282e}
.tabela tr.sel td{background:rgba(214,180,110,.25)!important}
/* conta recém-lançada: brilho dourado que entra e some */
.tabela tr.chegou td{animation:chegou 1.6s var(--ease)}
@keyframes chegou{0%{background:rgba(232,196,110,.55);transform:translateY(-6px)}40%{background:rgba(232,196,110,.35)}100%{transform:none}}
.vazio{border-radius:12px;padding:40px 16px;display:grid;justify-items:center;gap:8px;font-size:1rem}
.vazio svg{width:40px;height:40px;color:#c9a258}

/* ---------- comanda (resumo) ---------- */
.resumo{padding:26px 24px 30px;border-radius:var(--r) var(--r) 0 0;
  -webkit-mask:radial-gradient(10px 7px at 50% 100%,transparent 98%,#000) 50% 100%/20px 100% repeat-x;
  mask:radial-gradient(10px 7px at 50% 100%,transparent 98%,#000) 50% 100%/20px 100% repeat-x;filter:drop-shadow(0 18px 26px rgba(10,2,3,.45));box-shadow:none}
.lado .resumo{background-image:var(--papel),var(--fibra),linear-gradient(175deg,#fdf9f1,#f1e6d1)}
.resumo .topo{align-items:center}
.resumo .topo h2{font-size:1.65rem}
.estado{font-family:var(--num);font-weight:700;font-size:.62rem;letter-spacing:.12em;border-radius:999px;padding:.45em .85em;display:inline-flex;align-items:center;gap:6px}
.estado:not(.fechado)::before{content:"";width:7px;height:7px;border-radius:50%;background:#3d8a33;animation:pulsa 1.8s infinite}
@keyframes pulsa{50%{opacity:.25}}
.resumo .data{margin-bottom:16px}
.bloco{border-top:1.5px dashed rgba(107,30,35,.2);padding:12px 0 8px}
.bloco .rot{font-family:var(--num);font-weight:700;font-size:.64rem;letter-spacing:.14em;color:var(--ink-3);margin-bottom:6px}
.li{align-items:baseline;gap:8px;padding:4px 0}
.li>span{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.li>span::after{content:"";flex:1;border-bottom:1.5px dotted rgba(107,30,35,.25);transform:translateY(-4px);min-width:16px}
.li b{font-family:var(--num);font-weight:700;font-size:1.04rem}
.li small{color:var(--ink-3)}
.ifood input{width:150px;min-height:44px;font-size:1.05rem;text-align:right}
.ifood>span::after{display:none}
.total{margin:16px -24px 0;padding:20px 24px 18px;background:linear-gradient(170deg,var(--verde-1),var(--verde-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -12px 30px rgba(0,0,0,.18);position:relative;overflow:hidden}
.total::before{content:"";position:absolute;right:-60px;top:-80px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,240,200,.18),transparent 70%)}
.total .rot{color:#f1d89a;font-family:var(--num);font-weight:700;letter-spacing:.14em}
.total .dinheiro{font-size:2.8rem;background:linear-gradient(180deg,#fff3d0,#f1d89a 55%,#d6b46e);-webkit-background-clip:text;background-clip:text}
.total .sub{color:#e4f1e6;font-family:var(--num)}
.total .comp{font-family:var(--num);font-weight:700;font-size:.82rem;letter-spacing:0;display:inline-flex;gap:6px;align-items:center;margin-top:10px;padding:.35em .8em;border-radius:999px;background:rgba(0,0,0,.18);color:#e4f1e6}
.papel .esc .sobe{color:#d9f7c9}.papel .esc .desce{color:#ffc9c2}
.fechar{margin-top:22px;min-height:62px;font-size:.95rem}
.fechado-box{margin-top:20px}
.fechado-box p{display:flex;gap:8px;align-items:flex-start}

/* ---------- Itupava ---------- */
.itu .papel{padding:24px 24px 20px}
.itu h3{font-size:1.5rem}
.itu .tabela input{min-height:48px;font-size:1.08rem;text-align:right;padding:.3em .6em}
.itu .tabela td.nome{font-family:var(--num);font-weight:700;font-size:.8rem;letter-spacing:.04em;color:var(--ink-2)}
.itu .soma-lista input{min-height:52px;font-size:1.15rem;min-width:0;width:100%;flex:1 1 120px}
.itu .soma-lista .bt{width:auto;min-height:52px;padding:.6em 1.4em}
.itu .chips span{font-family:var(--num);font-weight:600;border-radius:999px;background:#fff;border-color:rgba(107,30,35,.18);box-shadow:0 2px 6px rgba(42,10,12,.06)}
.itu .tot-lista{font-family:var(--num);font-weight:800}
.itu .travado{border-radius:10px}

/* ---------- janelas: borda dourada com LED ---------- */
dialog{max-width:min(580px,calc(100% - 24px))}
dialog[open]{animation:sobe .45s var(--ease)}
dialog::backdrop{background:rgba(12,3,4,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@keyframes sobe{from{opacity:0;transform:translateY(16px) scale(.98)}}
.janela{border-radius:20px;box-shadow:var(--led);padding:30px 28px 26px}
.janela h2{font-size:2rem}
.janela .conf{border-radius:12px;padding:14px 16px;background:rgba(107,30,35,.05);box-shadow:inset 0 0 0 1px rgba(107,30,35,.1)}
.janela .conf .li:last-child{margin-top:4px;padding-top:8px;border-top:1.5px solid rgba(107,30,35,.18)}
.janela .conf .li:last-child b{font-size:1.25rem}
.janela .campo textarea{border-radius:var(--r-campo)!important;font-family:var(--texto)!important}
.janela .campo input:not(.din){font-family:var(--texto)!important;font-weight:400;font-size:1.1rem}
.foto{border-radius:12px;box-shadow:0 0 0 1px rgba(107,30,35,.15),0 18px 40px rgba(10,2,3,.35)}

/* ---------- aviso flutuante ---------- */
.aviso{border-radius:999px;padding:.85em 1.3em;font-family:var(--num);font-weight:600;font-size:.92rem;background:linear-gradient(180deg,#2c0b0e,#1c0708);
  box-shadow:0 0 0 1px rgba(246,239,226,.5),0 0 0 5px rgba(232,196,110,.18),0 18px 40px rgba(0,0,0,.45)}
.aviso::before{content:"✓";display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--verde-1);color:#fff;font-size:.75rem;flex:none}

/* ---------- celular ---------- */
@media (max-width:980px){
  .grade{grid-template-columns:1fr}
  .resumo{filter:drop-shadow(0 12px 18px rgba(10,2,3,.4))}
}
@media (max-width:520px){
  .barra .wrap{min-height:64px}
  .barra .titulo{font-size:1.3rem}
  .nova,.contas,.itu .papel{padding:18px 16px 16px}
  .acoes-nova .bt{min-width:0}
  .acoes-nova .soma b{font-size:1.7rem}
  .resumo{padding:22px 18px 28px}
  .total{margin:14px -18px 0;padding:18px}
  .login .delio{right:8px;top:-150px;height:200px}
  .cartao-login{margin-top:96px}
  .tabela .mini{width:34px;height:34px}
  .campo-esc select{padding:.5em 2em .5em .9em;font-size:.9rem}
  .turnos button{padding:.3em .8em;font-size:.76rem}
}
/* celular e tablet sem teclado: a dica do Enter não faz sentido */
@media (hover:none){.bt kbd,.dica{display:none}}
@media (prefers-reduced-motion:reduce){.turnos::before,.bt::after{transition:none}}