/* Acabamento visual · Compras Cantina do Délio
   Ideia: a folha de requisição de papel do chefe, em bom acabamento — lista pautada com marca-texto dourado
   e o pedido de cada fornecedor como uma comanda impressa (borda picotada). Carrega depois do estilo da página. */

/* ---------- tipografia e cabeçalho ---------- */
.mao{font-family:var(--mao)}
.barra{background:#3a0e11;-webkit-backdrop-filter:none;backdrop-filter:none}
.barra .titulo{font-size:1.55rem}
.barra .titulo small{font-family:var(--texto);font-style:italic;font-weight:400;font-size:.92rem;letter-spacing:0;text-transform:none;color:var(--ouro-2);margin-top:3px}
.barra .link{font-family:var(--texto);font-size:1rem;font-weight:400;letter-spacing:0;text-transform:none;text-decoration:none;color:var(--creme-2);
  border:1px solid rgba(246,239,226,.26);border-radius:99px;padding:.45em 1.05em;transition:border-color .25s,color .25s,background .25s}
.barra .link:hover{border-color:var(--ouro-2);color:var(--creme);background:rgba(214,180,110,.08)}

.saudacao{padding:20px 4px 6px}
.saudacao .mao{display:block;font-size:2rem;line-height:1.15;color:var(--creme)}
.saudacao small{display:block;font-family:var(--texto);font-style:italic;font-size:1rem;color:var(--creme-3);margin-top:4px}

/* ---------- Pedido | Cotação: chave com ouro deslizante ---------- */
#modo{position:relative;display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(214,180,110,.4);border-radius:99px;padding:3px;background:rgba(0,0,0,.22);overflow:hidden}
#modo::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:99px;
  background:linear-gradient(180deg,#e6c98a,#b48c45);box-shadow:0 2px 6px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,245,215,.6);transition:transform .38s var(--ease)}
#modo[data-m=cotacao]::before{transform:translateX(100%)}
#modo button{position:relative;z-index:1;background:none;border-radius:99px;min-height:44px;font-family:var(--texto);font-size:1.05rem;font-weight:500;letter-spacing:.01em;text-transform:none;color:var(--creme-2);transition:color .3s}
#modo button[aria-pressed=true]{background:none;color:#24140a;font-weight:600}

/* ---------- categorias: texto com traço dourado ---------- */
#abas,#cadastro .abas:not(.modo){border:0;border-bottom:0;border-radius:0;background:transparent;gap:2px;margin-bottom:8px}
#abas button,#cadastro .abas:not(.modo) button{flex:0 0 auto;position:relative;min-height:46px;padding:.4em 1em;font-family:var(--texto);font-size:1.05rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--creme-3);background:none;transition:color .25s}
#abas button::after,#cadastro .abas:not(.modo) button::after{content:"";position:absolute;left:.9em;right:.9em;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--ouro-2);transform:scaleX(0);transition:transform .35s var(--ease)}
#abas button[aria-pressed=true],#cadastro .abas:not(.modo) button[aria-pressed=true]{background:none;color:var(--creme);font-weight:500}
#abas button[aria-pressed=true]::after,#cadastro .abas:not(.modo) button[aria-pressed=true]::after{transform:scaleX(1)}
#abas button:hover,#cadastro .abas:not(.modo) button:hover{color:var(--creme)}
.bolha{background:var(--ouro-2);color:#24140a;font-family:var(--texto);font-weight:700;font-size:.74rem;min-width:1.45em;line-height:1.5}
/* faixa fixa: vinho escuro liso, igual à marca (sem degradê) */
.sel-topo{background-color:#4c1317;background-image:var(--linho);border-bottom:1px solid rgba(214,180,110,.38);box-shadow:0 10px 18px -12px rgba(0,0,0,.55)}
/* no computador não precisa ficar preso: some o bloco e a faixa fica direto sobre o linho */
@media (min-width:901px){
  .sel-topo{position:static;background:none;border:0;box-shadow:none;margin:0 0 14px;padding:0}
  .sel-topo #modo{background:rgba(0,0,0,.24)}
  #abas{border-bottom:1px solid rgba(214,180,110,.3)}
}
.sel-topo #modo{background:#3a0e11;border-color:rgba(214,180,110,.45)}
.sel-topo .abas{background:transparent}

/* ---------- a folha de pedido ---------- */
.pedido{padding:28px 28px 16px}
.pedido h2{font-size:1.9rem;line-height:1.1;margin-bottom:2px}
.pedido h2 .rot,.envio .rot.suave{font-family:var(--texto);font-style:italic;font-weight:400;font-size:1rem;letter-spacing:0;text-transform:none;color:#8a6a4a}
.pedido .sub{font-style:italic;color:#6b5a4d;margin-bottom:16px}
.busca{border-radius:99px;padding:.5em 1.2em;background:rgba(255,255,255,.72);border-color:rgba(107,30,35,.22)}

.item{grid-template-columns:minmax(0,1fr) auto;padding:13px 2px;background:none;border-bottom:1px dotted rgba(107,30,35,.38);box-shadow:none}
.item:nth-child(even),.item.on{background:none;box-shadow:none}
.item .n{display:none}
.item .nome{font-size:1.14rem;font-weight:500;line-height:1.25;width:fit-content;max-width:100%;color:var(--tinta)}
.item.on .nome{background:linear-gradient(transparent 56%,rgba(214,180,110,.62) 56%,rgba(214,180,110,.62) 90%,transparent 90%);padding:0 .3em;margin:0 -.3em;border-radius:2px}
.item.novo .nome{animation:marca .5s var(--ease) both}
@keyframes marca{from{background-size:0 100%;background-repeat:no-repeat}to{background-size:100% 100%;background-repeat:no-repeat}}
.item .quem{font-family:var(--texto);font-style:italic;font-size:.95rem;letter-spacing:0;text-transform:none;color:#8a6a4a}
.item select.quem{font-weight:600;color:var(--vinho);border-bottom:1px dashed rgba(107,30,35,.45);min-height:30px}

.qtd{gap:8px}
.qtd button{width:40px;height:40px;border-radius:50%;border:1px solid rgba(138,106,74,.55);background:linear-gradient(180deg,#fffdf8,#f1e6d0);
  color:var(--vinho);font-family:var(--texto);font-size:1.55rem;font-weight:400;box-shadow:0 1px 2px rgba(42,10,12,.18);transition:transform .15s var(--ease),background .2s,color .2s}
.qtd button:active{transform:scale(.92);background:var(--vinho);color:var(--creme)}
.qtd input{width:62px;border:0;border-bottom:1.5px solid rgba(107,30,35,.35);border-radius:0;background:transparent;font-family:var(--display);font-size:1.45rem;color:var(--vinho);box-shadow:none}
.qtd input:focus{border-bottom-color:var(--vinho);background:rgba(255,255,255,.5);box-shadow:none}
.qtd input::placeholder{color:rgba(107,30,35,.28)}
.qtd select{width:auto;max-width:104px;border:0;background:transparent;font-family:var(--texto);font-style:italic;font-size:1rem;letter-spacing:0;color:#8a6a4a;padding:0 .2em}

.chips{gap:8px;margin-top:6px}
.chip{min-height:40px;padding:.3em 1em;border-radius:99px;font-family:var(--texto);font-size:1rem;letter-spacing:0;border:1px solid rgba(107,30,35,.38);background:rgba(255,255,255,.65);transition:background .2s,color .2s,transform .15s var(--ease)}
.chip:active{transform:scale(.95)}
.chip[aria-pressed=true]{background:linear-gradient(180deg,#7d242a,#5e1a1f);color:var(--creme);border-color:var(--vinho)}
.chip[aria-pressed=true]::before{content:"✓ ";font-size:.85em}
.chip.todos{font-style:italic;border-style:dashed}

/* ---------- painel do pedido ---------- */
.envio{padding:26px 24px 20px}
.envio h2{font-size:1.75rem}
#dataTxt{display:none}
.contagem{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin:6px -24px 6px;padding:16px 24px}
.contagem .rot{flex:1 0 100%;font-family:var(--texto);font-style:italic;font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--ouro-2)}
.contagem .dinheiro{font-size:2.9rem;line-height:1}
.contagem .dinheiro small{font-style:italic;font-size:1.05rem}
.contagem #nForn{display:inline!important;margin:0!important;flex:0 0 auto;font-size:1rem}
.vazio-envio{padding:26px 6px 18px;text-align:center}
.vazio-envio .mao{display:block;font-size:1.9rem;color:var(--vinho);margin-bottom:6px}
.vazio-envio p{color:#6b5a4d;font-style:italic;max-width:30ch;margin:0 auto}

/* a comanda: um papel impresso por fornecedor */
.forn-card{border:0;padding:20px 0 6px}
.forn-card+.forn-card{border-top:1px solid rgba(107,30,35,.14)}
.fc-topo{align-items:baseline;margin-bottom:12px}
.fc-topo h3{font-size:1.4rem;line-height:1.1}
.fc-topo .rot{font-family:var(--texto);font-style:italic;font-size:.98rem;letter-spacing:0;text-transform:none;color:#8a6a4a}
.forn-card .msgbox{position:relative;max-height:none;overflow:visible;margin:0 0 22px;padding:18px 18px 16px;border:0;border-radius:2px 2px 0 0;
  background:#fffdf8;color:#2a1c1a;font-family:var(--maq);font-size:.92rem;line-height:1.6;
  background-image:repeating-linear-gradient(transparent 0 calc(1.6em - 1px),rgba(107,30,35,.07) calc(1.6em - 1px) 1.6em);
  filter:drop-shadow(0 6px 8px rgba(42,10,12,.22))}
.forn-card .msgbox::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:9px;
  background:linear-gradient(-45deg,transparent 6px,#fffdf8 0) 0 0/14px 9px,linear-gradient(45deg,transparent 6px,#fffdf8 0) 0 0/14px 9px}
.forn-card.nova{animation:imprime .55s var(--ease) both}
@keyframes imprime{from{clip-path:inset(0 0 100% 0);transform:translateY(-8px)}to{clip-path:inset(0 0 -20px 0);transform:none}}
.rot-c{margin:14px 0 6px;font-family:var(--texto);font-style:italic;font-size:.98rem;letter-spacing:0;text-transform:none;color:#6b5a4d}
.obs,.fone{border-radius:6px;background:rgba(255,255,255,.7)}
.fone-linha .rot{font-family:var(--texto);font-style:italic;font-size:.98rem;letter-spacing:0;text-transform:none;color:#6b5a4d}

.acoes .bt--ouro{min-height:58px;font-size:.9rem;border-radius:99px;gap:.7em}
.acoes .bt--ouro svg{width:1.25em;height:1.25em;flex:none}
.acoes .bt-limpar{background:none;border:0;box-shadow:none;min-height:44px;font-family:var(--texto);font-size:1rem;font-style:italic;letter-spacing:0;text-transform:none;text-decoration:underline;text-underline-offset:4px;color:#8a6a4a;border-radius:0}
.acoes .bt--linha:not(.bt-limpar){border-radius:99px}
#limpar{border-radius:99px;margin-top:6px}
.falta{font-style:italic}

.hist h3{font-size:1.4rem}
.hist .linha{border-top:1px dotted rgba(107,30,35,.3)}
.hist .linha small{font-family:var(--texto);font-style:italic;letter-spacing:0;text-transform:none;font-size:.9rem;color:#8a6a4a}
.hist .mini{font-family:var(--texto);font-size:1rem;font-weight:500;letter-spacing:0;text-transform:none;text-decoration:none;border:1px solid rgba(107,30,35,.35);border-radius:99px;padding:.45em 1em}

/* ---------- cadastro ---------- */
#cadastro h2{font-size:1.7rem}
#cadastro .cd-campo>span,#cadastro .cd-rot{font-family:var(--texto);font-style:italic;font-size:.98rem;letter-spacing:0;text-transform:none;color:#6b5a4d}
.cd-form{border-radius:10px}
.cd-mini{font-family:var(--texto);font-size:1rem;font-weight:500;letter-spacing:0;text-transform:none}
.cd-campo input,.cd-campo select{border-radius:6px}

/* ---------- entrada e carregamento ---------- */
.login form{padding:40px 28px 30px}
.login h1{font-size:2.3rem}
.login p{font-style:italic}
.pin{font-size:2.2rem}
.carregando{position:fixed;inset:0;display:grid;place-items:center;z-index:40}
.carregando .logo{width:150px;height:84px;background:url(img/logo-creme.webp) center/contain no-repeat;animation:respira 1.8s ease-in-out infinite}
@keyframes respira{0%,100%{opacity:.35}50%{opacity:1}}

/* ---------- avisos e barra do celular ---------- */
.aviso{border-radius:99px;padding:.85em 1.3em;font-family:var(--texto);font-size:1rem}
.aviso button{font-family:var(--texto);font-size:1rem;letter-spacing:0;text-transform:none;color:var(--ouro-2)}
.fixa .bt{border-radius:99px;min-height:54px}
.fixa .qt{font-family:var(--texto);font-style:italic;letter-spacing:0;text-transform:none;font-size:.9rem}

@media (max-width:900px){
  .saudacao .mao{font-size:1.75rem}
}
@media (max-width:520px){
  .barra .titulo{font-size:1.3rem}
  .barra .titulo small{font-size:.82rem;letter-spacing:0}
  .barra .link{font-size:.92rem;padding:.4em .8em}
  .pedido{padding:22px 16px 10px}
  .pedido h2{font-size:1.7rem}
  .item{grid-template-columns:minmax(0,1fr)}
  .qtd{justify-content:space-between}
  .envio,.hist{padding-left:16px;padding-right:16px}
  .contagem{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
  .contagem .dinheiro{font-size:2.5rem}
  #abas button,#cadastro .abas:not(.modo) button{padding:.4em .8em;font-size:1.02rem}
  .saudacao{padding:14px 2px 2px}
}