/* estilo.css — o sistema visual do Administrador.
   Uma fonte só (Figtree), variando por peso — é assim que interface densa de
   verdade resolve hierarquia, sem misturar família de letra. A paleta é
   quente por herança da marca, mas mais profunda e com mais contraste do
   que a versão de post de Instagram: aqui é ferramenta de trabalho, não
   vitrine — pode ser mais sóbria e ainda parecer cara. */

/* Figtree guardada no próprio app (nada de depender da internet pra abrir bonito) */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url('/static/fontes/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url('/static/fontes/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --base: #1F1E1D;
  --painel: #262624;
  --cartao: #30302E;
  --borda: #42413D;
  --borda-fraca: #2F2E2B;
  --laranja: #E08462;
  --laranja-forte: #EC9377;
  --terracota: #C4573A;
  --terracota-fundo: #3A2A25;
  --verde: #3F6B57;
  --verde-claro: #86CBA6;
  --verde-fundo: #25342C;
  --creme: #ECEBE6;
  --creme-fraco: #B8B6AE;
  --creme-apagado: #A09E96;
  --azul-urgencia: #78A9EA;
  --amarelo-urgencia: #E6C25C;
  --vermelho-urgencia: #F0776D;
  --raio: 0;
  --lateral: 10px;
  /* Barras coloridas (tarefas e pintura) */
  --barra-verde: #6CC79C;     /* sem prazo — calmo */
  --barra-azul: #7BA7EC;      /* prazo longe */
  --barra-amarelo: #E6C15C;   /* faltam 1 a 3 dias */
  --barra-vermelho: #EA6A5E;  /* vence hoje */
  --barra-grafite: #737987;   /* vencida */
  --barra-cinza: #8D919B;     /* peça sem ninguém */
  --barra-laranja-apagado: #B8876A;  /* atribuída, não iniciada */
  --barra-laranja: #F0A04B;   /* iniciada */
  --barra-lilas: #B9A5F0;     /* pedido minizinho */
}

/* Modo claro: automático pela configuração do celular, ou forçado nas
   configurações do perfil (data-tema="claro"/"escuro" no <html>). */
@media (prefers-color-scheme: light) {
  :root:not([data-tema="escuro"]) {
    --base: #FAF9F5; --painel: #F0EEE6; --cartao: #FFFFFF;
    --borda: #E3E0D5; --borda-fraca: #EDEAE0;
    --laranja: #A9502D; --laranja-forte: #963F1F;
    --terracota: #B24A2A; --terracota-fundo: #F6E1D8;
    --verde: #2E7355; --verde-claro: #23794F; --verde-fundo: #E1F0E7;
    --creme: #1F1E1D; --creme-fraco: #5E5D59; --creme-apagado: #6B6963;
    --azul-urgencia: #2E6DB4; --amarelo-urgencia: #7F5E10; --vermelho-urgencia: #C0392F;
  }
}
html[data-tema="claro"] {
  --base: #FAF9F5; --painel: #F0EEE6; --cartao: #FFFFFF;
  --borda: #E3E0D5; --borda-fraca: #EDEAE0;
  --laranja: #A9502D; --laranja-forte: #963F1F;
  --terracota: #B24A2A; --terracota-fundo: #F6E1D8;
  --verde: #2E7355; --verde-claro: #23794F; --verde-fundo: #E1F0E7;
  --creme: #1F1E1D; --creme-fraco: #5E5D59; --creme-apagado: #6B6963;
  --azul-urgencia: #2E6DB4; --amarelo-urgencia: #7F5E10; --vermelho-urgencia: #C0392F;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Botão, campo e afins não herdam cor/fonte da página por padrão — o
   navegador usa uma cor própria dele (geralmente preta), ilegível no tema
   escuro. Isso garante que TODO controle novo já nasça na cor certa do
   tema, sem precisar lembrar de declarar de novo em cada lugar. */
button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* Segurar um botão não pode abrir o menu do navegador (copiar link, salvar
   imagem etc.) — só reagir ao que o próprio app faz com esse gesto. Isso
   fica só nos controles; texto de verdade (nome, título, observação)
   continua selecionável normalmente pra poder copiar. */
button, a.botao, .botao, .selo, .pilula-lote, .check, .check-secundario,
.arrastar-puxador, .dia, .avatar-toggle, .botao-icone, .botao-voz,
.botao-add, .remover-tarefa, nav.rodape a, .minha-conta, .folha-opcao,
.botao-anexar, .inicial, img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  /* Só aqui (raiz da página) e não em #app: overflow-x num elemento comum
     vira "contêiner de rolagem" pro CSS, e isso muda a referência de todo
     position:sticky lá dentro — foi exatamente isso que sumiu com a barra
     fixa debaixo (ela passou a "grudar" no fim da página inteira, não no
     fim da tela visível). No html/body isso não acontece: o navegador trata
     como parte da própria janela, sem criar esse efeito colateral. */
  overflow-x: hidden;
  background: var(--base);
  color: var(--creme);
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  letter-spacing: -.01em;
}

a { color: var(--laranja); text-decoration: none; }

#app {
  max-width: 480px;
  margin: 0 auto;
  /* 100vh é a altura com a barra do navegador escondida — quando ela some
     ou aparece (gesto de voltar/home no Android), o app ficava esticando e
     empurrando o rodapé. 100dvh acompanha a altura visível de verdade,
     então a barra passa a flutuar por cima em vez de empurrar a tela. */
  min-height: 100vh;
  min-height: var(--altura-max, 100dvh);
  display: flex;
  flex-direction: column;
  /* Reserva a área do notch/câmera em todo canto do app — nas telas que
     perderam o cabeçalho grande (Pedidos/Pintura/Orçamentos), a aba de
     cima ficava colada demais no topo e o notch cobria parte do texto. */
  padding-top: env(safe-area-inset-top);
}

/* ── Cabeçalho compacto da Hoje: só a data, arrastável ──────────────────── */

header.topo-data {
  /* Exceção: sobe até a área do notch/câmera; o resto da tela sobe junto */
  margin-top: calc(-1 * env(safe-area-inset-top, 0px));
  padding: 6px 10px 0 var(--lateral);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.minha-conta {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.minha-conta img { width: 100%; height: 100%; object-fit: cover; }
.data-atual {
  flex-grow: 1; text-align: left;
  font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--creme-fraco);
  touch-action: pan-y;
  user-select: none;
}
/* Só "Hoje" ganha destaque — os outros dias (ontem, amanhã, uma data
   qualquer) ficam neutros, pra não competir com o marco real. */
.data-atual.e-hoje { color: var(--laranja); }
/* ── Cabeçalho ───────────────────────────────────────────────────────── */

header.topo {
  padding: 22px 20px 14px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
header.topo .dia-extenso {
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--creme-fraco);
  font-weight: 600;
}
header.topo h1 {
  margin: 4px 0 0;
  font-family: 'Figtree', sans-serif; font-weight: 800; letter-spacing: -.02em;
  font-size: 30px;
  line-height: 1.1;
}
.botao-icone {
  width: 44px; height: 44px;
  border-radius: var(--raio);
  background: var(--cartao);
  border: 1px solid var(--borda);
  color: var(--creme);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}
.bolinha {
  position: absolute; top: 9px; right: 10px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--laranja);
  border: 2px solid var(--cartao);
}

main { flex-grow: 1; padding: 0 var(--lateral) 24px; }
/* Nas páginas com a barra inferior (position:fixed, fora do fluxo normal
   da página) — espaço reservado embaixo pra o último item da lista nunca
   ficar escondido atrás dela. */
main.espaco-barra-inferior { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

/* ── Resposta ao toque: todo botão "afunda" um pouco ao ser apertado ──── */

.botao, .botao-icone, .check, .check-secundario, .dia, .arrastar-puxador,
.botao-add, .botao-voz, .avatar-toggle, .botao-preco, .peca, .aba,
.check.a_fazer, .check.fazendo, .check.pausado {
  transition: transform .12s ease, opacity .12s ease;
}
.botao:active, .botao-icone:active, .check:active, .check-secundario:active,
.dia:active, .arrastar-puxador:active, .botao-add:active, .botao-voz:active,
.avatar-toggle:active, .botao-preco:active, .peca:active, .aba:active {
  transform: scale(.94);
  opacity: .88;
}

/* ── Entrada suave: cartões e linhas chegam com leveza, não seco ──────── */

@keyframes entrar-suave {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cartao, .pedido, .tarefa {
  animation: entrar-suave .32s cubic-bezier(.22,.9,.35,1) backwards;
}
.cartao:nth-of-type(2), .pedido:nth-of-type(2), .tarefa:nth-of-type(2) { animation-delay: .03s; }
.cartao:nth-of-type(3), .pedido:nth-of-type(3), .tarefa:nth-of-type(3) { animation-delay: .06s; }
.cartao:nth-of-type(4), .pedido:nth-of-type(4), .tarefa:nth-of-type(4) { animation-delay: .09s; }
.cartao:nth-of-type(5), .pedido:nth-of-type(5), .tarefa:nth-of-type(5) { animation-delay: .12s; }
.cartao:nth-of-type(n+6), .pedido:nth-of-type(n+6), .tarefa:nth-of-type(n+6) { animation-delay: .14s; }

/* ── Seções ──────────────────────────────────────────────────────────── */

.secao {
  display: flex; align-items: center; gap: 8px;
  margin: 18px 0 10px;
  font-size: 12px; letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--creme-fraco);
  font-weight: 700;
}
.secao .conta {
  background: var(--terracota);
  color: #FFF6F0;
  font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 4px;
}
.secao .direita { margin-left: auto; font-size: 13px; text-transform: none; letter-spacing: 0; }

/* ── Cartões de pendência ────────────────────────────────────────────── */

.cartao {
  display: block;
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px;
  margin-bottom: 10px;
  color: inherit;
  box-shadow: 0 1px 2px rgba(0,0,0,.22), 0 4px 14px rgba(0,0,0,.16),
              inset 0 1px 0 rgba(255,255,255,.025);
}
.cartao.urgente { border-color: var(--borda); }

.cartao.aprovar { border-color: var(--verde); }

.etiqueta {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.4px;
}
.etiqueta.laranja { color: var(--laranja-forte); }
.etiqueta.ambar { color: var(--laranja); }
.etiqueta.verde { color: var(--verde-claro); }

.cartao .titulo { margin-top: 7px; font-size: 16px; font-weight: 600; }
.cartao .apoio { margin-top: 3px; font-size: 13px; color: var(--creme-fraco); line-height: 1.45; }
.cartao .valor { font-family: 'Figtree', sans-serif; font-weight: 800; font-size: 18px; margin-left: auto; letter-spacing: -.01em; }

.acoes { display: flex; gap: 8px; margin-top: 12px; }
.botao {
  flex-grow: 1; height: 44px;
  border-radius: 4px; border: none;
  font-family: 'Figtree', sans-serif; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.botao.principal { background: var(--laranja); color: var(--base); }
.botao.verde { background: var(--verde); color: var(--creme); }
.botao.vazio { background: transparent; border: 1px solid var(--borda); color: var(--creme); font-weight: 600; }

/* ── Linhas de pedido ────────────────────────────────────────────────── */

.linha {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--borda-fraca);
  color: inherit;
}
.linha:last-child { border-bottom: none; }
.linha .numero {
  width: 40px; height: 40px; border-radius: 4px;
  background: var(--borda);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Figtree', sans-serif; font-weight: 800; font-size: 13px;
  color: var(--laranja);
  flex-shrink: 0;
}
.linha .corpo { flex-grow: 1; min-width: 0; }
.linha .corpo .nome { font-size: 14px; font-weight: 600; }
.linha .corpo .sub { font-size: 12px; color: var(--creme-fraco); margin-top: 2px; }

.selo {
  font-size: 11px; font-weight: 700;
  padding: 4px 8px; border-radius: 4px;
  white-space: nowrap;
}
.selo.ok { color: var(--verde-claro); background: var(--verde-fundo); }
.selo.atencao { color: var(--laranja-forte); background: var(--terracota-fundo); }

/* ── Vazio ───────────────────────────────────────────────────────────── */

.vazio {
  text-align: center;
  padding: 34px 20px;
  color: var(--creme-fraco);
  font-size: 14px;
  line-height: 1.6;
  border: 1px dashed var(--borda);
  border-radius: var(--raio);
}
.vazio strong { color: var(--creme); display: block; margin-bottom: 4px; font-size: 15px; }

/* ── Menu de baixo ───────────────────────────────────────────────────── */

nav.rodape {
  /* fixed, não sticky: sticky depende de qual ancestral "conta" como
     contêiner de rolagem, e isso mudou de comportamento entre aparelhos
     (voltou a sumir mesmo depois de corrigir o overflow do #app). fixed
     não depende de nada disso — gruda direto na tela, sempre, em
     qualquer navegador. Main ganhou o padding-bottom correspondente pra
     nada ficar escondido atrás dela. */
  position: fixed; left: 0; right: 0; bottom: 0;
  max-width: 480px;
  margin: 0 auto;
  z-index: 20;
  display: flex;
  padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--borda-fraca);
  background: color-mix(in srgb, var(--base) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
/* 3 destinos, sempre dividindo a barra em partes iguais — nunca amontoado
   nem torto, não importa o tamanho da tela. */
nav.rodape a {
  flex: 1 1 0;
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 7px 4px;
  border-radius: 12px;
  color: var(--creme-apagado);
  font-size: 11.5px; font-weight: 600;
  transition: color .15s ease, background .15s ease;
}
nav.rodape a.ativo {
  color: var(--laranja); font-weight: 700;
  background: var(--terracota-fundo);
}

/* ── Entrar ──────────────────────────────────────────────────────────── */

.entrada { margin: auto; width: 100%; padding: 32px 24px; }
.entrada h1 {
  font-family: 'Figtree', sans-serif; font-weight: 800; letter-spacing: -.02em;
  font-size: 28px; margin: 0 0 6px;
}
.logo-abertura { display: block; height: 68px; width: auto; margin: 0 auto 14px; }
.entrada p.sub { color: var(--creme-fraco); font-size: 14px; margin: 0 0 26px; line-height: 1.5; text-align: center; }
.campo { margin-bottom: 14px; }
.campo label {
  display: block; font-size: 12px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--creme-fraco); margin-bottom: 6px;
}
.campo input {
  width: 100%; height: 50px;
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 4px;
  padding: 0 14px;
  color: var(--creme);
  font-family: 'Figtree', sans-serif; font-size: 16px;
}
.campo input:focus { outline: none; border-color: var(--laranja); }
.mesas-sugeridas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mesa-sugerida {
  border: 1px solid var(--borda); background: var(--painel); color: var(--creme-fraco);
  border-radius: 20px; padding: 5px 12px; font-size: 12.5px; font-family: 'Figtree', sans-serif;
  cursor: pointer;
}
.mesa-sugerida:active { background: var(--cartao); }
.faixa-instalar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--laranja); color: var(--base);
  padding: 10px 14px; font-size: 13px; font-weight: 600;
}
/* O atributo "hidden" sozinho perdia pra regra de cima (mesma
   especificidade, e regra do autor sempre vence a folha do navegador) —
   por isso a faixa não sumia nunca, nem depois de instalado. */
.faixa-instalar[hidden] { display: none; }
.faixa-instalar button {
  flex-shrink: 0; border: none; background: var(--base); color: var(--creme);
  font-family: 'Figtree', sans-serif; font-weight: 700; font-size: 12.5px;
  padding: 7px 14px; border-radius: 4px; cursor: pointer;
}

.recado {
  background: var(--terracota-fundo);
  border: 1px solid var(--terracota);
  color: var(--laranja-forte);
  border-radius: 4px; padding: 11px 13px;
  font-size: 13px; margin-bottom: 16px; line-height: 1.45;
}

/* ── Pedido de ajuda: sempre no topo do app, até a pessoa decidir ─────── */
.avisos-ajuda { padding: 12px 16px 0; }
.aviso-ajuda {
  background: var(--terracota-fundo);
  border: 1px solid var(--terracota);
  border-radius: var(--raio);
  padding: 12px 13px;
  margin-bottom: 10px;
}
.aviso-ajuda-titulo { font-size: 13.5px; color: var(--creme); line-height: 1.4; }
.aviso-ajuda-titulo strong { color: var(--laranja-forte); }
.aviso-ajuda-etapas { font-size: 12px; color: var(--creme-fraco); margin-top: 4px; }
.aviso-ajuda-botoes { display: flex; gap: 8px; margin-top: 10px; }
.aviso-ajuda-botoes form { flex: 1; }
.aviso-ajuda-botoes .botao { width: 100%; padding: 8px; font-size: 13px; }
.perfil-foto {
  width: 96px; height: 96px; margin: 8px auto 0;
  border-radius: 50%; overflow: hidden;
  background: var(--terracota);
  display: flex; align-items: center; justify-content: center;
}
.perfil-foto img { width: 100%; height: 100%; object-fit: cover; }

code {
  background: var(--cartao); border: 1px solid var(--borda);
  border-radius: 4px; padding: 2px 7px;
  font-size: 13px; color: var(--laranja);
}

/* ── Ficha: etapas ───────────────────────────────────────────────────── */

.trilha-etapas { display: flex; align-items: center; gap: 5px; margin-bottom: 12px; }
.trilha-etapas .passo {
  flex-grow: 1; height: 6px; border-radius: 3px;
  background: var(--borda);
}
.trilha-etapas .passo.feito { background: var(--verde); }
.trilha-etapas .passo.atual { background: var(--laranja); }
.trilha-etapas .contagem {
  font-size: 11px; color: var(--creme-fraco); font-weight: 600;
  white-space: nowrap; margin-left: 4px;
}

.etapa-agora { font-size: 17px; font-weight: 700; }
.etapa-quando { font-size: 12px; color: var(--creme-fraco); margin-top: 3px; }

.arrastar {
  margin-top: 13px; height: 56px;
  border-radius: 5px;
  background: var(--painel);
  border: 1px dashed var(--borda);
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px;
  overflow: hidden;
  transition: border-color .15s ease;
}
.arrastar.completo { border-style: solid; border-color: var(--verde-claro); }
.arrastar-puxador {
  width: 46px; height: 44px; flex-shrink: 0;
  border: none; border-radius: 4px;
  background: var(--laranja); color: var(--base);
  display: flex; align-items: center; justify-content: center;
  cursor: grab; touch-action: none;
}
.arrastar-puxador:active { cursor: grabbing; }
.arrastar-texto {
  font-size: 13px; color: var(--creme-fraco);
  flex-grow: 1; min-width: 0; pointer-events: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arrastar-texto strong { color: var(--creme); }
.aviso-etapa {
  margin-top: 8px; font-size: 11.5px;
  color: var(--creme-apagado); line-height: 1.45;
}

.avisado {
  display: flex; align-items: center; gap: 5px;
  margin-top: 5px;
  font-size: 12px; font-weight: 600;
  color: var(--verde-claro);
}

/* ── Linha de pedido com a etapa na cara ─────────────────────────────── */

.pedido {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 13px 14px;
  margin-bottom: 11px;
  box-shadow: 0 1px 2px rgba(0,0,0,.22), 0 4px 14px rgba(0,0,0,.16),
              inset 0 1px 0 rgba(255,255,255,.025);
}
.pedido[data-href] { cursor: pointer; }
.pedido .cabeca {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 2px;
}
.pedido .codigo-pedido {
  flex-shrink: 0;
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
  color: var(--creme-apagado);
  background: var(--painel); border: 1px solid var(--borda);
  border-radius: 4px; padding: 2px 6px;
}
.pedido .nome {
  flex-grow: 1; min-width: 0;
  font-size: 16px; font-weight: 700;
  color: var(--creme);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pedido .etapa-atual {
  font-size: 13px; color: var(--creme-fraco);
  margin-bottom: 11px;
}
.arrastar.curto {
  height: 50px;
  margin-top: 0;
  gap: 10px;
  padding: 0 12px;
}
.arrastar.curto .arrastar-texto { font-size: 12.5px; }
.arrastar.curto .arrastar-puxador { width: 42px; height: 40px; }
.pedido .aviso-etapa { margin-top: 7px; }
.rodape-pedido {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--borda-fraca);
}
.tag-pedido {
  font-size: 11px; color: var(--creme-apagado);
  background: var(--painel); border: 1px solid var(--borda);
  border-radius: 4px; padding: 3px 7px;
}
.tag-pedido.atencao {
  color: var(--laranja-forte); background: var(--terracota-fundo);
  border-color: transparent;
}
.resp-pedido { margin-left: auto; }
.resp-pedido .opcoes-data { right: 0; left: auto; }

/* ── Ficha: itens e dinheiro ─────────────────────────────────────────── */

.marca-tipo {
  width: 5px; height: 28px; border-radius: 3px;
  background: var(--laranja); flex-shrink: 0;
}
.marca-tipo.minizinho { background: var(--verde); }
.marca-tipo.fora { background: var(--terracota); }

.registrar { margin-top: 18px; }
.registrar summary {
  height: 46px; border-radius: 4px;
  border: 1px solid var(--borda); background: var(--cartao);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: var(--creme);
  cursor: pointer; list-style: none;
}
.registrar summary::-webkit-details-marker { display: none; }
.registrar[open] summary { margin-bottom: 14px; color: var(--laranja); }

.barra-dinheiro {
  position: sticky; bottom: 0;
  display: flex; align-items: flex-end; gap: 12px;
  padding: 14px 20px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--borda-fraca);
  background: var(--painel);
}
.valor-grande {
  font-family: 'Figtree', sans-serif; font-weight: 800; letter-spacing: -.02em;
  font-size: 27px; color: var(--laranja);
  line-height: 1.15; margin-top: 3px;
}
.barra-dinheiro .apoio { font-size: 12px; color: var(--creme-fraco); margin-top: 2px; }
.barra-dinheiro .sugestao {
  text-align: right; font-size: 12px; color: var(--creme-fraco); line-height: 1.5;
}
.barra-dinheiro .sugestao strong { color: var(--creme); }

/* ── Escolher peça da Biblioteca ─────────────────────────────────────── */

.escondido {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
}

.busca {
  display: flex; align-items: center; gap: 9px;
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 4px;
  padding: 0 13px; height: 48px;
  margin-bottom: 4px;
}
.busca input {
  flex-grow: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  color: var(--creme);
  font-family: 'Figtree', sans-serif; font-size: 16px;
}
.busca .total {
  font-size: 11px; color: var(--creme-apagado);
  font-weight: 600; white-space: nowrap;
}

/* ── Galeria de peças ────────────────────────────────────────────────── */

.galeria {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  margin-top: 13px;
}
.peca { display: flex; flex-direction: column; color: inherit; }
.peca .moldura {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  overflow: hidden;
  background: var(--cartao);
  border: 1px solid var(--borda);
}
.peca img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.peca .tamanho {
  position: absolute; bottom: 7px; right: 7px;
  background: rgba(31, 30, 29, .82);
  color: var(--creme);
  font-size: 10.5px; font-weight: 700;
  padding: 3px 7px; border-radius: 4px;
}
.peca .nome {
  margin-top: 8px;
  font-size: 13.5px; font-weight: 600; line-height: 1.3;
  color: var(--creme);
}
.peca .meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 3px;
}
.peca .codigo {
  font-size: 11px; font-weight: 700;
  color: var(--creme-apagado); letter-spacing: .4px;
}
.peca .colecao {
  font-size: 11px; font-weight: 600;
  color: var(--laranja);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.peca-aberta {
  display: flex; gap: 14px;
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 13px;
  margin-bottom: 16px;
}
.peca-aberta img {
  width: 104px; height: 104px; flex-shrink: 0;
  border-radius: 4px; object-fit: cover;
  background: var(--painel);
}
.peca-aberta .dados { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.peca-aberta .nome { font-size: 17px; font-weight: 700; line-height: 1.25; }
.peca-aberta .codigo {
  margin-top: 4px; font-size: 12px; font-weight: 700;
  color: var(--laranja); letter-spacing: .5px;
}
.peca-aberta .meta {
  margin-top: 5px; font-size: 12px; color: var(--creme-fraco); line-height: 1.4;
}

.linha-escala {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 0;
  border-bottom: 1px solid var(--borda-fraca);
}
.linha-escala .nome-escala {
  width: 84px; flex-shrink: 0;
  font-size: 13px; font-weight: 600; color: var(--creme);
}
.linha-escala form { flex-grow: 1; display: flex; }

.botao-preco {
  flex-grow: 1; min-height: 46px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  border-radius: 4px;
  border: 1px solid var(--borda);
  background: var(--cartao);
  color: var(--creme);
  font-family: 'Figtree', sans-serif;
  cursor: pointer;
}
.botao-preco .rotulo { font-size: 10px; color: var(--creme-fraco); }
.botao-preco .valor { font-size: 14px; font-weight: 700; }
.botao-preco.pintado { border-color: var(--borda); }
.botao-preco.pintado .valor { color: var(--laranja); }

.dica {
  font-size: 11.5px; color: var(--creme-apagado);
  line-height: 1.5; margin-top: 8px;
}
.campo .dica { margin-top: 6px; }

.dupla { display: flex; gap: 10px; }
.dupla .campo { flex-grow: 1; }
.dupla .campo:last-child { max-width: 96px; }

.remover {
  width: 34px; height: 34px; flex-shrink: 0;
  border: none; background: transparent;
  color: var(--creme-apagado);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 5px;
}
.remover:hover { color: var(--laranja-forte); background: var(--terracota-fundo); }

/* ── Quadro de ideias ────────────────────────────────────────────────── */

.abas {
  display: flex; gap: 7px;
  padding: 2px 20px 12px;
}
.aba {
  height: 34px; padding: 0 13px;
  border-radius: 4px;
  border: 1px solid var(--borda);
  color: var(--creme-fraco);
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
}
.aba.ativa {
  background: var(--laranja); border-color: var(--laranja);
  color: var(--base); font-weight: 700;
}
.aba .n, .aba-principal .n { font-size: 11px; opacity: .8; }

/* ── Abas principais (Pedidos/Pintura/Orçamentos) — visual de aba de pasta,
   a ativa "grudada" no conteúdo abaixo dela, como abas do navegador ──── */
.abas-principais {
  display: flex; gap: 3px;
  padding: 14px 10px 0;
  background: var(--painel);
  border-bottom: 1px solid var(--borda);
}
.aba-principal {
  flex: 1 1 0;
  min-width: 0;
  height: 40px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid transparent;
  border-radius: 10px 10px 0 0;
  color: var(--creme-apagado);
  font-size: 13.5px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aba-principal.ativa {
  position: relative; top: 1px;
  background: var(--base);
  border-color: var(--borda);
  border-bottom-color: var(--base);
  color: var(--laranja);
}

/* ── Troca de aba principal deslizando, com o conteúdo novo cobrindo a
   tela igual troca de aba do navegador (ver static/abas_navegar.js) ──── */
#conteudo-abas-pedidos.aba-entra-prox { transform: translateX(100%); opacity: 0; }
#conteudo-abas-pedidos.aba-entra-ant  { transform: translateX(-100%); opacity: 0; }
#conteudo-abas-pedidos.aba-entra-ativa {
  transition: transform .24s cubic-bezier(.2,.7,.3,1), opacity .24s ease-out;
  transform: translateX(0); opacity: 1;
}

.autoria { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.inicial {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--verde); color: var(--creme);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.inicial.minha { background: var(--terracota); color: #FFF6F0; }
.inicial.pequena { width: 19px; height: 19px; font-size: 10px; }
.autoria .quem {
  font-size: 12px; color: var(--creme-fraco);
  font-weight: 600; flex-grow: 1;
}

.contribuicao {
  display: flex; align-items: flex-start; gap: 7px;
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid var(--borda-fraca);
  font-size: 13px; color: var(--creme-fraco); line-height: 1.45;
}

.contribuir {
  display: flex; align-items: center; gap: 7px;
  margin-top: 11px;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 4px;
  padding: 0 6px 0 12px; height: 42px;
}
.contribuir input {
  flex-grow: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  color: var(--creme); font-family: 'Figtree', sans-serif; font-size: 14px;
}
.contribuir button {
  width: 34px; height: 34px; flex-shrink: 0;
  border: none; border-radius: 5px;
  background: var(--laranja); color: var(--base);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}

.pe-do-cartao {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 11px; padding-top: 10px;
  border-top: 1px solid var(--borda-fraca);
}
.mover {
  border: none; background: transparent;
  color: var(--laranja); cursor: pointer;
  font-family: 'Figtree', sans-serif; font-size: 12px; font-weight: 600;
  padding: 6px 0;
}
.mover.apagar { color: var(--creme-apagado); }
.so-dono {
  margin-left: auto; font-size: 11px;
  color: var(--creme-apagado); text-align: right;
}

/* ── Convite pra ativar aviso no celular ─────────────────────────────── */

.aviso-notif {
  display: flex; align-items: center; gap: 11px;
  margin: 0 20px 4px;
  padding: 12px 14px;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 4px;
}
.aviso-notif span {
  flex-grow: 1; font-size: 12.5px;
  color: var(--creme-fraco); line-height: 1.4;
}
/* ── Tarefas ─────────────────────────────────────────────────────────── */


/* Carrossel controlado por JS — nunca rolagem livre do dedo, sempre
   exatamente um dia por gesto, sem depender de inércia do navegador.
   Largura do trilho e de cada painel vem inline do servidor (dias|length
   muda: uma tarefa com prazo largo abre mais dias pra rolar). */
.tira-dias {
  overflow: hidden;
  margin: 0 calc(-1 * var(--lateral));
  /* Sem isso, um arrasto na tela toda (não só na data) pode ser roubado
     pelo navegador como rolagem vertical antes de chegar no JavaScript
     que troca de dia — a data já tinha essa regra, faltava aqui. */
  touch-action: pan-y;
}

/* Conteúdo das abas Pedidos/Pintura/Mesas: mesma regra, pelo mesmo motivo
   — deixa o arrasto horizontal chegar no JS de trocar de aba sem o
   navegador roubar o gesto pra rolar a página. */
#conteudo-abas-pedidos { touch-action: pan-y; }
.tira-dias-trilho {
  display: flex;
  transition: transform .26s ease;
}
.dia-painel {
  flex: 0 0 auto;
  min-width: 0;
  padding: 0 var(--lateral);
}

.linha-add {
  display: flex; align-items: center; gap: 8px;
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 4px;
  padding: 0 6px 0 10px; height: 46px; flex: 1; min-width: 0;
  margin-bottom: 0;
}
.linha-add input[type="text"] {
  flex-grow: 1; min-width: 0;
  height: 100%; background: transparent; border: none; outline: none;
  color: var(--creme); font-family: 'Figtree', sans-serif; font-size: 15px;
  padding-left: 4px;
}
.avatar-toggle, .botao-voz, .botao-add {
  flex-shrink: 0; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.avatar-toggle {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--terracota); color: #FFF6F0;
  font-size: 13px; font-weight: 700;
}
.avatar-toggle.outro { background: var(--verde); color: var(--creme); }
.botao-voz {
  width: 36px; height: 36px; border-radius: 50%;
  background: transparent; color: var(--creme-fraco);
}
.botao-voz.ouvindo { color: var(--laranja-forte); animation: pulsar_tarefa 1s ease-in-out infinite; }
.botao-add {
  width: 38px; height: 38px; border-radius: 4px;
  background: var(--laranja); color: var(--base);
}
.botao-add.buscando { opacity: .7; pointer-events: none; }
.botao-add.buscando svg { animation: girar-suave .8s linear infinite; }
@keyframes girar-suave { to { transform: rotate(360deg); } }

.pill-data { position: relative; }
.pill-data summary { list-style: none; cursor: pointer; }
.pill-data summary::-webkit-details-marker { display: none; }
.opcoes-data {
  position: absolute; z-index: 5; top: calc(100% + 6px); left: 0;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--cartao); border: 1px solid var(--borda);
  border-radius: 4px; padding: 6px; min-width: 128px;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
.opcoes-data form { display: contents; }
.opcoes-data button, .campo-data-solta {
  border: none; background: transparent; color: var(--creme);
  font-family: 'Figtree', sans-serif; font-size: 13px; text-align: left;
  padding: 8px 9px; border-radius: 5px; cursor: pointer;
}
.opcoes-data button:hover, .campo-data-solta:hover { background: var(--painel); }
.campo-data-solta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.campo-data-solta input { accent-color: var(--laranja); }

/* ── Linha de resultado nas buscas ao vivo (peça, pedido) ────────────────
   Sem isso, o <button> pega a cor de texto padrão do navegador (preta),
   ilegível no tema escuro — precisa declarar a cor sempre, nunca herdar. */
.resultado-busca-catalogo {
  display: flex; align-items: center; gap: 8px; width: 100%;
  text-align: left; border: 1px solid var(--borda); background: var(--painel);
  color: var(--creme); border-radius: 6px; padding: 6px 8px;
  cursor: pointer; font-size: 12.5px; font-family: 'Figtree', sans-serif;
}
.resultado-busca-catalogo:hover { background: var(--cartao); }
.resultado-busca-catalogo img {
  width: 28px; height: 28px; border-radius: 4px; object-fit: cover; flex-shrink: 0;
}
.resultado-busca-catalogo .nome {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.resultado-busca-catalogo .codigo { color: var(--creme-apagado); }

.concluidas-recolhidas { margin-top: 6px; }
.concluidas-recolhidas summary {
  list-style: none; cursor: pointer;
  font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--creme-fraco); padding: 10px 4px;
}
.concluidas-recolhidas summary::-webkit-details-marker { display: none; }

/* Tarefa de outra pessoa: some dentro de um botão com nome e quantidade,
   pra cada um achar a própria lista sem rolar por cima da do outro. */
.grupo-outro { margin: 12px 0 4px; }
.grupo-outro summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 7px;
  width: 100%;
  padding: 6px 12px 6px 6px;
}
.grupo-outro summary::-webkit-details-marker { display: none; }
.grupo-outro-conta {
  margin-left: auto;
  background: var(--base); color: var(--creme-fraco);
  border-radius: 999px; min-width: 16px; padding: 1px 6px;
  font-size: 10.5px; font-weight: 700; text-align: center;
}
.grupo-outro[open] summary { border-radius: 20px 20px 0 0; }
.grupo-outro .tarefa:first-of-type { border-top: 1px solid var(--borda-fraca); }

.tarefa {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px 12px 27px;
  border-bottom: 1px solid var(--borda-fraca);
}
.tarefa:last-child { border-bottom: none; }
.tarefa.vencida { opacity: .55; }
/* Concluída não fica apagada — ela fica pra trás na lista como um troféu,
   não um erro: verde de propósito, sem desbotar, pra dar vontade de ver a
   lista de hoje inteirinha assim. */
.tarefa.feita { background: var(--verde-fundo); }
/* A barra é um elemento à parte, grudada na borda de verdade — não um
   border-left, que fica curvado (e "vazando") nas pontas por causa do
   raio do cartão. Sempre reta, sempre alinhada, de cima a baixo da linha. */
.tarefa::before {
  content: "";
  /* A barra cresce só pra ESQUERDA (a borda direita fica onde sempre esteve,
     a 4px do início da linha) e vai até a borda da tela. */
  position: absolute; left: calc(-1 * var(--lateral)); top: 0; bottom: 0;
  width: 24px;
  background: transparent;
}
.tarefa.cor-verde::before    { background: var(--barra-verde);    --luz: rgba(139,245,176,.85); box-shadow: inset 0 0 9px 0 rgba(255,255,255,.38); }
.tarefa.cor-azul::before     { background: var(--barra-azul);     --luz: rgba(141,187,255,.8);  box-shadow: inset 0 0 9px 0 rgba(255,255,255,.38); }
.tarefa.cor-amarelo::before  { background: var(--barra-amarelo);  --luz: rgba(255,230,138,.85); box-shadow: inset 0 0 9px 0 rgba(255,255,255,.38); }
.tarefa.cor-vermelho::before { background: var(--barra-vermelho); --luz: rgba(255,120,120,.9);  box-shadow: inset 0 0 9px 0 rgba(255,255,255,.38); }
.tarefa.cor-grafite::before  { background: var(--barra-grafite); }
.tarefa.feita::before        { background: var(--verde-claro); }

.inicial.foto { padding: 0; object-fit: cover; background: none; }
.inicial.grande { width: 88px; height: 88px; font-size: 32px; }

.cores-opcoes { display: flex; gap: 10px; flex-wrap: wrap; }
.opcao-cor {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid transparent; padding: 0; cursor: pointer;
}
.opcao-cor.ativa { border-color: var(--creme); }

/* ── Observações na tarefa ───────────────────────────────────────────── */

/* Expandir/recolher via grid-template-rows (0fr -> 1fr) em vez de
   max-height/margin: só anima propriedades baratas (grid-template-rows e
   opacity nunca disparam layout thrash), e nunca precisa de um valor
   máximo "chutado" tipo max-height:400px — acompanha a altura real do
   conteúdo, curto ou longo. */
.comentarios-tarefa {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .28s ease, opacity .2s ease;
}
.comentarios-tarefa.aberta {
  grid-template-rows: 1fr;
  opacity: 1;
}
.comentarios-tarefa-corpo {
  overflow: hidden;
  min-height: 0;
  margin: 0 0 8px 42px;
  padding-top: 8px;
}
.comentario-linha {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 5px 0;
  font-size: 12.5px; color: var(--creme-fraco); line-height: 1.4;
}
.linha-forms { display: flex; align-items: center; gap: 7px; margin-top: 4px; }
.linha-forms form:first-child { flex-grow: 1; min-width: 0; }
.form-comentario {
  display: flex; align-items: center; gap: 7px;
  background: var(--painel); border: 1px solid var(--borda); border-radius: 4px;
  padding: 0 5px 0 11px; height: 38px;
}
.form-comentario input {
  flex-grow: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  color: var(--creme); font-family: 'Figtree', sans-serif; font-size: 13px;
}
.form-comentario button {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 5px;
  border: none; background: var(--laranja); color: var(--base);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.botao-anexar {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 4px;
  background: var(--painel); border: 1px solid var(--borda); color: var(--creme-fraco);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.botao-anexar:hover { color: var(--laranja); border-color: var(--laranja); }

.anexos-tarefa { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.anexo-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--painel); border: 1px solid var(--borda); border-radius: 4px;
  padding: 5px 10px 5px 8px;
  font-size: 11.5px; color: var(--creme-fraco); max-width: 160px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.anexos-aviso { font-size: 10.5px; color: var(--creme-apagado); margin-bottom: 8px; }
.tarefa .corpo { flex-grow: 1; min-width: 0; }
.tarefa .titulo { font-size: 14.5px; font-weight: 600; }
.tarefa.feita .titulo { text-decoration: line-through; }
.tarefa .meta {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 3px;
}
.tarefa .tempo { font-size: 11.5px; color: var(--creme-apagado); }

.check {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--borda); background: transparent; color: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.check.a_fazer { border-color: var(--laranja); color: var(--laranja); }
.check.fazendo {
  border-color: var(--laranja); background: var(--laranja); color: var(--base);
  animation: pulsar_tarefa 1.6s ease-in-out infinite;
}
@keyframes pulsar_tarefa {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 87, .35); }
  50% { box-shadow: 0 0 0 6px rgba(217, 119, 87, 0); }
}
.check.feito { border-color: var(--verde-claro); background: var(--verde-claro); color: var(--base); }
.check.pausado { border-color: var(--laranja); background: transparent; color: var(--laranja); animation: none; }

.pilula-lote {
  flex-shrink: 0; height: 32px; padding: 0 10px; border-radius: 16px;
  border: 2px solid var(--laranja); background: transparent; color: var(--laranja);
  font-family: 'Figtree', sans-serif; font-size: 12.5px; font-weight: 700;
  cursor: pointer;
}
.icone-repete { color: var(--creme-apagado); font-size: 13px; }

.acoes-tempo { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.check-secundario {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  border: none; background: var(--painel); color: var(--laranja);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.check-secundario:hover { background: var(--laranja); color: var(--base); }

.linha-pintura {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--borda);
}
.linha-pintura .check { width: 26px; height: 26px; }
.linha-pintura-form {
  display: flex; align-items: center; gap: 10px;
  flex-grow: 1; min-width: 0;
}
.miniatura-pintura {
  width: 40px; height: 40px; border-radius: 6px; object-fit: cover;
  flex-shrink: 0; background: var(--painel); border: 1px solid var(--borda);
  cursor: pointer;
}
.selo-pintura {
  position: absolute; bottom: -4px; right: -4px;
  width: 17px; height: 17px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--cartao);
}
.selo-pintura.sim { background: var(--laranja); color: var(--base); }
.selo-pintura.nao { background: var(--painel); color: var(--creme-apagado); }

/* ── Visor de referência da pintura: tela cheia, zoom e troca de peça ──── */

.visor-pintura {
  position: fixed; inset: 0; height: 100dvh; background: #000; z-index: 40;
  display: none; flex-direction: column; overscroll-behavior: none; touch-action: none;
}
.visor-pintura.aberto { display: flex; }
.visor-pintura-topo {
  display: flex; align-items: center; gap: 10px; touch-action: none;
  padding: 14px 16px; background: rgba(0, 0, 0, .55); position: relative; z-index: 2;
}
.visor-pintura-fechar { font-size: 26px; color: #fff; cursor: pointer; line-height: 1; padding: 2px 8px; }
.visor-pintura-cod { color: var(--laranja-forte); font-weight: 700; font-size: 13px; }
.visor-pintura-nome {
  color: #fff; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.visor-pintura-contador { color: var(--creme-apagado); font-size: 12px; flex-shrink: 0; }
.visor-pintura-area {
  flex: 1; display: flex; align-items: center; justify-content: center;
  overflow: hidden; touch-action: none;
}
.visor-pintura-area img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  touch-action: none; will-change: transform;
}
.visor-pintura-baixo {
  background: rgba(0, 0, 0, .55); padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
  touch-action: none;
}
.botao-visor-check {
  width: 100%; border: none; border-radius: var(--raio); padding: 16px;
  font-size: 16px; font-weight: 700; cursor: pointer;
}
.botao-visor-check.marcar { background: var(--verde-claro); color: #0c1f16; }
.botao-visor-check.desfazer { background: var(--cartao); color: var(--creme-apagado); border: 1px solid var(--borda); }

/* ── Segurar uma tarefa: a folha que sobe (menu, ajuda ou editar) ──────── */

.folha {
  position: fixed; inset: 0; z-index: 30;
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
.folha.aberta { opacity: 1; pointer-events: auto; }
.folha-fundo {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.folha-conteudo {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--painel);
  border-top: 1px solid var(--borda);
  border-radius: 6px 6px 0 0;
  padding: 18px 20px calc(20px + env(safe-area-inset-bottom));
  max-width: 480px; margin: 0 auto;
  box-shadow: 0 -8px 30px rgba(0,0,0,.35);
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.32,.72,0,1);
}
.folha.aberta .folha-conteudo { transform: translateY(0); }
.folha-titulo { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.folha-titulo strong { color: var(--laranja); }
.folha-conteudo input[type="text"], .folha-conteudo input[type="date"],
.folha-conteudo input[type="number"], .folha-conteudo select {
  width: 100%; height: 46px; padding: 0 14px;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 4px;
  color: var(--creme); font-family: 'Figtree', sans-serif; font-size: 14px;
}
.folha-campo { margin-bottom: 12px; }
.folha-campo label {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--creme-apagado); margin-bottom: 6px;
}
.folha-botoes { display: flex; gap: 9px; margin-top: 12px; }
.folha-botoes .botao { flex-grow: 1; height: 46px; }
.folha-opcao {
  width: 100%; text-align: left; height: 52px; padding: 0 6px;
  background: transparent; border: none; border-bottom: 1px solid var(--borda-fraca);
  color: var(--creme); font-family: 'Figtree', sans-serif; font-size: 15px; font-weight: 500;
  display: flex; align-items: center; gap: 12px; cursor: pointer;
}
.folha-opcao:last-child { border-bottom: none; }
.folha-opcao svg { color: var(--laranja); flex-shrink: 0; }

.remover-tarefa {
  width: 30px; height: 30px; flex-shrink: 0;
  border: none; background: transparent; border-radius: 5px;
  color: var(--creme-apagado);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.remover-tarefa:hover { color: var(--laranja-forte); background: var(--terracota-fundo); }

.segmentado { display: flex; gap: 7px; margin-bottom: 14px; flex-wrap: wrap; }
.segmentado input { position: absolute; opacity: 0; width: 0; height: 0; }
.segmentado label {
  flex-grow: 1; text-align: center; padding: 11px 10px;
  border-radius: 4px; border: 1px solid var(--borda);
  font-size: 13px; font-weight: 600; color: var(--creme-fraco);
  cursor: pointer;
}
.segmentado input:checked + label {
  background: var(--laranja); border-color: var(--laranja); color: var(--base);
}
.segmentado input:focus-visible + label { outline: 2px solid var(--creme); }

.aviso-notif button {
  flex-shrink: 0;
  height: 36px; padding: 0 14px;
  border-radius: 4px; border: none;
  background: var(--laranja); color: var(--base);
  font-family: 'Figtree', sans-serif; font-size: 13px; font-weight: 700;
  cursor: pointer;
}

/* Quem pinta cada unidade: ícone + nome completo, numa linha própria
   abaixo da peça (alinhada com o texto, depois da miniatura). */
.atribuidos-pintura {
  flex-basis: 100%; padding-left: 50px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.atribuidos-pintura:empty { display: none; }
.opcoes-data.split { min-width: 240px; }
.opcoes-data .dividir-pintura { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; border-top: 1px solid var(--borda); }
.opcoes-data select {
  background: var(--painel); color: var(--creme); border: 1px solid var(--borda);
  border-radius: 5px; padding: 7px; font-family: 'Figtree', sans-serif; font-size: 13px;
}

/* Seleção em massa na fila de pintura */
.sel-massa, .sel-pedido { width: 18px; height: 18px; accent-color: var(--laranja); flex-shrink: 0; }
.sel-todas { display: flex; align-items: center; gap: 8px; margin-top: 8px; cursor: pointer; }
.barra-massa {
  position: fixed; left: 0; right: 0; max-width: 480px; margin: 0 auto; z-index: 19;
  bottom: var(--menu-h, 73px);
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px 12px 0 0;
  box-shadow: 0 -8px 24px rgba(0,0,0,.4);
}
.barra-massa[hidden] { display: none; }
.barra-massa-topo { display: flex; justify-content: space-between; align-items: center; }
.barra-massa-pessoas { display: flex; gap: 8px; }
.barra-massa select {
  flex: 1; min-width: 0; background: var(--painel); color: var(--creme);
  border: 1px solid var(--borda); border-radius: 6px; padding: 9px;
  font-family: 'Figtree', sans-serif; font-size: 14px;
}

/* Seleção em massa só depois de segurar 2s numa figura */
.sel-massa, .sel-todas { display: none; }
body.modo-selecao .sel-massa { display: block; }
body.modo-selecao .sel-todas { display: flex; }
.linha-gerencia { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.modo-selecao main { padding-bottom: calc(260px + env(safe-area-inset-bottom)); }

/* Cartão de peça na fila de pintura: foto ocupa 1/3 da lateral esquerda,
   check + nome (2 linhas) no alto, valor embaixo à esquerda e quem pinta
   embaixo à direita. */
.item-pintura {
  position: relative; display: grid; grid-template-columns: 33.333% 1fr;
  min-height: 116px; margin-top: 10px;
  background: var(--painel); border: 1px solid var(--borda); border-radius: 10px;
}
.item-pintura.de-outro { opacity: .7; }
.tarefa.dividida-outro { opacity: .62; }
.tarefa.dividida-outro .titulo { color: var(--creme-fraco); }
.item-pintura-foto {
  width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer;
  border-radius: 9px 0 0 9px; background: var(--cartao);
}
.item-pintura-corpo {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 8px; padding: 10px; min-width: 0;
}
.item-pintura-topo { display: flex; align-items: flex-start; gap: 8px; }
.item-pintura-topo form { flex-shrink: 0; margin: 0; }
.item-pintura .check { width: 26px; height: 26px; flex-shrink: 0; }
.check.fraco { opacity: .4; pointer-events: none; }
.item-pintura-nome {
  font-size: 14px; font-weight: 600; line-height: 1.25; cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.5em; min-width: 0;
}
.item-pintura-base { display: flex; justify-content: space-between; align-items: flex-end; gap: 4px 8px; flex-wrap: wrap; }
.item-pintura-valor { font-size: 13px; font-weight: 600; color: var(--creme); white-space: nowrap; }
.item-pintura .atribuidos-pintura { flex-basis: auto; padding-left: 0; justify-content: flex-end; }
.item-pintura .quem-pinta { display: inline-flex; align-items: center; gap: 4px; }
.item-pintura .selo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; }
.item-pintura .opcoes-data { top: auto; bottom: calc(100% + 6px); left: auto; right: 0; }
.item-pintura .sel-massa { position: absolute; top: 6px; left: 6px; z-index: 2; }


.abre-atribuicao { border: 0; font-family: inherit; cursor: pointer; text-align: right; }

.abre-atribuicao { color: inherit; }
.item-pintura .sel-massa { width: 24px; height: 24px; top: 8px; left: 8px; }
.item-pintura { cursor: pointer; }

/* botao "atribuir": o botao nativo vem com fundo claro; aqui fica escuro e legivel */
.abre-atribuicao { background: var(--cartao); color: var(--creme); border: 1px solid var(--borda); }
.abre-atribuicao.ok { border-color: transparent; }

/* Visor de imagem da pintura: a barra de baixo (menu) nunca some — o visor
   termina logo acima dela e só o botão de concluir fica sobre o menu. */
.visor-pintura { bottom: var(--menu-h, 0px); }
.visor-pintura-topo { padding-top: calc(14px + env(safe-area-inset-top)); }
.com-menu .visor-pintura-baixo { padding-bottom: 14px; }

/* Peça iniciada: botão do visor e etiqueta no cartão */
.botao-visor-check.iniciar { background: var(--laranja); color: #1F1E1D; }
.botao-visor-desfazer-inicio {
  width: 100%; margin-top: 8px; border: none; background: transparent;
  color: var(--creme-apagado); font-size: 13px; padding: 6px; cursor: pointer;
}
.pill-iniciada { font-size: 11px; font-weight: 700; color: var(--laranja-forte); margin-right: 8px; }
.pill-iniciada[hidden] { display: none; }

/* Tarefa dentro de tarefa: as subtarefas ficam recuadas logo abaixo da mãe */
.subtarefas { margin: 2px 0 10px 18px; display: flex; flex-direction: column; gap: 4px; }
.subtarefas .tarefa { font-size: .94em; }

/* ── Arrastar tarefa: reposicionar (linha) ou juntar em grupo (destaque) ── */
.tarefa .corpo { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; cursor: pointer; }
.tarefa.arrastando { opacity: .3; }
.fantasma-tarefa {
  position: fixed; z-index: 60; pointer-events: none; margin: 0;
  background: var(--cartao); border: 1px solid var(--laranja); border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0,0,0,.55); transform: scale(1.03) rotate(-1.2deg);
  opacity: .96;
}
.fantasma-tarefa::before { display: none; }
.marca-insercao {
  height: 5px; margin: 2px 0; border-radius: 3px; background: var(--laranja);
  box-shadow: 0 0 0 4px rgba(217, 119, 87, .22);
}
.tarefa.alvo-juntar {
  outline: 2px dashed var(--laranja); outline-offset: -2px; border-radius: 10px;
  background: rgba(217, 119, 87, .14);
}
.tarefa.alvo-juntar::after {
  content: "＋ juntar em grupo"; position: absolute; right: 10px; top: 6px;
  font-size: 11px; font-weight: 700; color: var(--base); background: var(--laranja);
  padding: 3px 8px; border-radius: 999px;
}
#dica-arrasto {
  position: fixed; left: 12px; right: 12px; z-index: 61;
  top: calc(10px + env(safe-area-inset-top)); max-width: 456px; margin: 0 auto;
  background: var(--cartao); color: var(--creme); border: 1px solid var(--laranja);
  border-radius: 12px; padding: 10px 14px; font-size: 13px; line-height: 1.35;
  box-shadow: 0 8px 24px rgba(0,0,0,.5); pointer-events: none;
}
#dica-arrasto[hidden] { display: none; }
body.arrastando-tarefa { touch-action: none; overscroll-behavior: contain; }

/* ── Tela da tarefa (estilo cartão) ───────────────────────────────────── */
.folha-cheia {
  top: calc(28px + env(safe-area-inset-top)); bottom: 0;
  overflow-y: auto; border-radius: 18px 18px 0 0; padding-top: 16px;
}
.det-topo { display: flex; gap: 10px; align-items: flex-start; }
.det-titulo { font-size: 21px; line-height: 1.25; margin: 2px 0 0; }
.det-migalha {
  border: none; background: transparent; color: var(--creme-apagado); font-size: 12px;
  padding: 0 0 4px; cursor: pointer; text-align: left; font-family: inherit;
}
.det-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.det-quem { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--creme-fraco); }
.det-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.det-acoes form { margin: 0; }
.det-cartao {
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px;
  padding: 14px; margin-bottom: 12px;
}
.det-cartao-titulo {
  display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--creme-apagado); margin-bottom: 10px;
}
.det-conta { font-size: 12px; font-weight: 700; color: var(--laranja); }
.det-progresso { height: 6px; border-radius: 3px; background: var(--painel); margin-bottom: 10px; overflow: hidden; }
.det-progresso span { display: block; width: 100%; height: 100%; background: var(--verde-claro); border-radius: 3px; transform-origin: left; transition: transform .3s ease; }
.det-sub { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--borda-fraca); }
.det-sub form { margin: 0; }
.det-sub .check { width: 26px; height: 26px; }
.det-sub-titulo {
  flex: 1; min-width: 0; text-align: left; border: none; background: transparent; color: var(--creme);
  font-family: inherit; font-size: 14.5px; font-weight: 600; padding: 0; cursor: pointer;
}
.det-sub.feita .det-sub-titulo { text-decoration: line-through; color: var(--creme-apagado); }
.det-add { display: flex; gap: 8px; margin-top: 10px; }
.det-add input { flex: 1; min-width: 0; }
.det-add .botao { width: 46px; height: 46px; padding: 0; font-size: 22px; }
.det-pecas summary { cursor: pointer; font-size: 14px; font-weight: 600; list-style: none; display: flex; gap: 8px; align-items: center; }
.det-pecas summary::-webkit-details-marker { display: none; }
.det-pecas summary::after { content: "▾"; margin-left: auto; color: var(--creme-apagado); }
.det-pecas[open] summary::after { content: "▴"; }
.det-pecas-lista { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.det-peca { display: flex; align-items: center; gap: 10px; }
.det-peca img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--painel); flex-shrink: 0; }
.det-peca-nome { flex: 1; min-width: 0; font-size: 13.5px; }
.det-add .botao { flex: 0 0 46px; width: 46px; }
.det-cartao .linha-forms { display: flex; gap: 8px; align-items: center; }
.det-cartao .form-comentario { flex: 1; min-width: 0; margin: 0; height: 46px; padding: 0 7px 0 12px; }
.det-cartao .form-comentario input[type="text"] { height: 36px; border: none; background: transparent; padding: 0; font-size: 14px; }
.det-cartao .form-comentario button { flex: 0 0 32px; width: 32px; height: 32px; }
.det-cartao .botao-anexar { width: 46px; height: 46px; }

/* Grupo de tarefas: a pílula com seta abre/fecha; recolhido por padrão */
.subtarefas.recolhido { display: none; }

/* Setinha do grupo: mora dentro da barra colorida, à esquerda */
.seta-grupo {
  position: absolute; left: calc(-1 * var(--lateral)); top: 0; bottom: 0; width: 24px; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; padding: 0; cursor: pointer;
  color: var(--creme); font-size: 17px; font-weight: 900;
}
.tarefa[class*="cor-"] .seta-grupo, .tarefa.feita .seta-grupo { color: var(--base); }
.seta-grupo .seta { display: inline-block; transition: transform .2s ease; line-height: 1; }
.seta-grupo.aberto .seta { transform: rotate(90deg); }
/* Dentro de um grupo a barra volta a ser fina (não cabe sair da tela) */
.subtarefas .tarefa::before { left: 0; width: 4px; }
.subtarefas .tarefa .seta-grupo { left: 4px; width: 24px; color: var(--creme); }
.subtarefas .tarefa:has(.seta-grupo) { padding-left: 42px; }

/* ── Calendário no meio da tela ───────────────────────────────────────── */
.botao-data { border: 0; background: transparent; color: inherit; font-family: inherit; cursor: pointer; }
#calendario {
  position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
#calendario.aberto { opacity: 1; pointer-events: auto; }
.cal-fundo { position: absolute; inset: 0; background: rgba(0, 0, 0, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cal-cartao {
  position: relative; width: min(340px, 92vw); padding: 16px 14px 14px;
  background: var(--painel); border: 1px solid var(--borda); border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  transform: scale(.94); transition: transform .22s cubic-bezier(.32,.72,0,1);
  touch-action: pan-y;
}
#calendario.aberto .cal-cartao { transform: scale(1); }
.cal-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-mes { font-size: 17px; font-weight: 700; letter-spacing: .01em; }
.cal-nav {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--borda);
  background: var(--cartao); color: var(--creme); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.cal-nav:disabled { opacity: .3; cursor: default; }
.cal-semana, .cal-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-semana span { text-align: center; font-size: 11px; font-weight: 700; color: var(--creme-apagado); padding: 4px 0 6px; }
.cal-semana .fim, .cal-dias .fim { opacity: .5; }
.cal-dias button {
  height: 42px; border: 0; border-radius: 12px; background: transparent; color: var(--creme);
  font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.cal-dias button:active { background: var(--cartao); }
.cal-dias button.hoje { box-shadow: inset 0 0 0 2px var(--laranja); }
.cal-dias button.sel { background: var(--laranja); color: var(--base); opacity: 1; }
.cal-dias.desliza-esq { animation: cal-esq .22s ease; }
.cal-dias.desliza-dir { animation: cal-dir .22s ease; }
@keyframes cal-esq { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cal-dir { from { transform: translateX(-28px); opacity: 0; } to { transform: none; opacity: 1; } }
.cal-limpar {
  display: block; margin: 10px auto 0; border: 0; background: transparent; color: var(--creme-apagado);
  font-family: inherit; font-size: 13px; padding: 6px 10px; cursor: pointer;
}
.cal-limpar[hidden] { display: none; }

/* O número dentro da pílula (0/2) fica no centro, também quando ela é um span */
.pilula-lote { display: inline-flex; align-items: center; justify-content: center; line-height: 1; box-sizing: border-box; }

/* ── Cartões quadrados, de cantos vivos e bem perto das laterais ──────── */
.cartao, .pedido, .peca-aberta, .item-pintura, .item-pintura-foto, .det-cartao, .cal-cartao,
.linha-add, .fantasma-tarefa, .aviso-notif, .barra-massa, .folha-conteudo, .folha-cheia,
.tarefa.alvo-juntar, .grupo-outro, .grupo-outro summary { border-radius: 0; }

/* Barra colorida encostada na esquerda também nos cartões (estado da peça) */
.item-pintura::before {
  content: ""; position: absolute; left: calc(-1 * var(--recuo, 0px)); top: 0; bottom: 0;
  width: calc(var(--recuo, 0px) + 6px); z-index: 1;
  background: transparent;
}
.item-pintura.st-livre::before { background: var(--barra-cinza); }
.item-pintura.st-atribuida::before { background: var(--barra-laranja-apagado); --luz: rgba(185,138,94,.6); box-shadow: inset 0 0 6px 0 rgba(255,255,255,.14); }
.item-pintura.st-iniciada::before { background: var(--barra-laranja); --luz: rgba(255,170,70,.95); box-shadow: inset 0 0 9px 0 rgba(255,255,255,.38); }
.item-pintura.st-feita::before { background: var(--barra-verde); --luz: rgba(139,245,176,.85); box-shadow: inset 0 0 9px 0 rgba(255,255,255,.38); }
/* Cartão de pedido urgente / minizinho: barra de cor encostada na borda da tela, como nas tarefas */
.cartao.urgente, .cartao.minizinho { position: relative; }
.cartao.urgente::before, .cartao.minizinho::before {
  content: ""; position: absolute; top: -1px; bottom: -1px; left: calc(-1 * var(--recuo, var(--lateral)) - 1px);
  width: calc(var(--recuo, var(--lateral)) + 7px); pointer-events: none;
}
.cartao.urgente::before { background: var(--barra-vermelho); }
.cartao.minizinho::before { background: var(--barra-lilas); }
.pedido-pintura { --recuo: calc(var(--lateral) + 1px + 8px); }

/* ── Pintura: grupos por etapa (cartão que abre) e pedidos que abrem ───── */
.etapa-pintura { margin: 10px 0 14px; }
.etapa-pintura > summary {
  position: relative; list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  padding: 16px 14px 16px 24px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 0;
}
.etapa-pintura > summary::-webkit-details-marker { display: none; }
.etapa-pintura > summary::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: var(--azul-urgencia);
}
.etapa-comecados > summary::before { background: var(--laranja); }
.etapa-finalizados > summary::before { background: var(--verde-claro); }
.etapa-icone {
  width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--painel); color: var(--azul-urgencia);
}
.etapa-comecados .etapa-icone { color: var(--laranja); }
.etapa-finalizados .etapa-icone { color: var(--verde-claro); }
.etapa-titulo { flex: 1; min-width: 0; font-size: 18px; font-weight: 700; display: flex; flex-direction: column; }
.etapa-titulo small { font-size: 12px; font-weight: 500; color: var(--creme-apagado); margin-top: 2px; }
.etapa-conta {
  min-width: 34px; height: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 800; background: var(--painel); color: var(--creme);
}
.etapa-seta, .pedido-seta { flex-shrink: 0; color: var(--creme-apagado); transition: transform .2s ease; }
.etapa-pintura[open] > summary .etapa-seta, .pedido-pintura[open] > summary .pedido-seta { transform: rotate(180deg); }
.etapa-corpo { padding: 8px; background: rgba(255,255,255,.025); border: 1px solid var(--borda); border-top: 0; }
.pedido-pintura { margin: 0 0 8px; padding: 0; }
.pedido-pintura:last-child { margin-bottom: 0; }
.pedido-pintura > summary { list-style: none; cursor: pointer; padding: 12px 12px 10px; }
.pedido-pintura > summary::-webkit-details-marker { display: none; }
.pedido-pintura-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 16px; font-weight: 700; }
.pedido-pintura-topo .quem { min-width: 0; overflow: hidden; white-space: nowrap; }
.pedido-pintura-topo .apoio { flex-shrink: 0; margin-left: auto; white-space: nowrap; font-weight: 400; }
.pedido-pintura-resumo { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; font-size: 12px; }
.pedido-pintura-resumo .cab-meio { text-align: center; }
.pedido-pintura-resumo .cab-dir { text-align: right; font-weight: 700; white-space: nowrap; color: var(--barra-laranja); }
.pedido-pintura-resumo .cab-dir.pronto { color: var(--barra-verde); }
.pedido-pintura-corpo { padding: 0 10px 12px; }

/* Recuo do cartão de peça até a borda da tela: lateral + bordas e recuos dos cartões de fora */
.pedido-pintura-corpo .item-pintura { --recuo: calc(var(--lateral) + 1px + 8px + 1px + 10px); }
.tarefa.cor-grafite .seta-grupo { color: var(--creme); }

/* Interface toda em cantos vivos: nada arredondado, avatares e marcadores incluídos */
*, *::before, *::after { border-radius: 0 !important; }

/* Botão de escolher arquivo no mesmo estilo do resto */
input[type="file"] { color: var(--creme-fraco); font-family: inherit; font-size: 13px; max-width: 100%; }
input[type="file"]::file-selector-button {
  margin-right: 10px; padding: 9px 14px; border: 1px solid var(--borda); background: var(--painel);
  color: var(--creme); font: inherit; font-weight: 700; cursor: pointer;
}

/* ── Barra de nova tarefa + lupa ───────────────────────────────────────── */
.linha-add-wrap { display: flex; gap: 8px; align-items: stretch; margin: 10px 0 14px; }
.botao-busca {
  width: 46px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--cartao); border: 1px solid var(--borda); color: var(--creme-fraco);
}

/* ── Faixa da outra pessoa: de ponta a ponta, claramente diferente de cartão ── */
.grupo-pessoa { margin: 20px calc(-1 * var(--lateral)) 8px; }
.grupo-pessoa > summary {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 18px;
  background: var(--creme); color: var(--base); list-style: none; cursor: pointer;
}
.grupo-pessoa > summary::-webkit-details-marker { display: none; }
.pessoa-nome { flex: 1; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.pessoa-conta {
  min-width: 34px; height: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--base); color: var(--creme); font-size: 16px; font-weight: 800;
}
.pessoa-seta { flex-shrink: 0; transition: transform .2s ease; }
.grupo-pessoa[open] .pessoa-seta { transform: rotate(180deg); }
.grupo-pessoa > .tarefa { margin-left: var(--lateral); margin-right: var(--lateral); }
.grupo-pessoa > .tarefa:first-of-type { border-top: 0; }

/* ── Barras de status: luz elegante — degradê dentro da forma + brilho suave na linha ── */
.tarefa.cor-verde, .item-pintura.st-feita     { --cor: var(--barra-verde); }
.tarefa.cor-azul                              { --cor: var(--barra-azul); }
.tarefa.cor-amarelo                           { --cor: var(--barra-amarelo); }
.tarefa.cor-vermelho                          { --cor: var(--barra-vermelho); }
.tarefa.cor-grafite                           { --cor: var(--barra-grafite); }
.item-pintura.st-livre                        { --cor: var(--barra-cinza); }
.item-pintura.st-atribuida                    { --cor: var(--barra-laranja-apagado); }
.item-pintura.st-iniciada                     { --cor: var(--barra-laranja); }
.tarefa.cor-verde::before, .tarefa.cor-azul::before, .tarefa.cor-amarelo::before, .tarefa.cor-vermelho::before,
.tarefa.cor-grafite::before, .item-pintura.st-livre::before, .item-pintura.st-atribuida::before,
.item-pintura.st-iniciada::before, .item-pintura.st-feita::before {
  background: linear-gradient(90deg, color-mix(in srgb, var(--cor) 86%, #000), var(--cor) 60%, color-mix(in srgb, var(--cor) 90%, #fff));
  box-shadow: none;
}
.tarefa.cor-verde, .tarefa.cor-azul, .tarefa.cor-amarelo, .tarefa.cor-vermelho,
.item-pintura.st-iniciada, .item-pintura.st-feita {
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--cor) 13%, transparent), transparent 48%);
}
.item-pintura.st-atribuida { background-image: linear-gradient(90deg, color-mix(in srgb, var(--cor) 7%, transparent), transparent 40%); }

/* ── Transição entre telas: sem animação de entrada, menu de baixo fixo ── */
@view-transition { navigation: auto; }
nav.rodape { view-transition-name: rodape; }
::view-transition-group(rodape) { animation: none; }
.cartao, .pedido, .tarefa { animation: none !important; }

/* ── Acabamento ── */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.valor, .item-pintura-valor, .cab-dir, .pessoa-conta, .etapa-conta, .cartao .valor, .valor-grande { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }

/* ── Exceções à regra de cantos vivos: progresso, contadores e a foto de perfil ── */
.det-progresso, .det-progresso span, .trilha-etapas .passo, .pilula-lote, .marca-insercao { border-radius: 999px !important; }
.minha-conta, .minha-conta img, .minha-conta .inicial, .perfil-foto img, .perfil-foto .inicial { border-radius: 50% !important; }
.minha-conta .inicial { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 12px; }

/* Barra do sistema por cima do app: o que fica preso embaixo não sobe quando ela aparece */
nav.rodape, .barra-massa { translate: 0 var(--delta, 0px); }

/* Passos concluídos ficam recolhidos dentro do pedido */
.feitas-grupo { margin-top: 4px; }
.feitas-grupo > summary {
  list-style: none; cursor: pointer; padding: 8px 4px 8px 12px; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--creme-apagado);
  display: flex; align-items: center; gap: 8px;
}
.feitas-grupo > summary::-webkit-details-marker { display: none; }
.feitas-grupo > summary::before { content: "✓"; color: var(--barra-verde); }
.feitas-grupo[open] > summary { color: var(--creme-fraco); }
.feitas-grupo > .tarefa { opacity: .8; }

/* Mesa com figuras que podem ter falhado */
.det-mesa { border-bottom: 1px solid var(--borda-fraca); }
.det-mesa:last-of-type { border-bottom: 0; }
.det-falhou { margin: 0 0 8px 44px; }
.det-falhou > summary { cursor: pointer; font-size: 12px; color: var(--creme-fraco); padding: 4px 0; list-style: none; }
.det-falhou > summary::-webkit-details-marker { display: none; }
.det-falhou > summary::after { content: " ▾"; }
.det-falhou-fig { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; }
.det-falhou .botao { margin-top: 6px; width: 100%; }

/* Área de toque de 44px+ mesmo nos controles pequenos (o desenho continua do mesmo tamanho) */
.check, .remover-tarefa, .botao-add, .botao-voz, .cal-nav, .minha-conta, .pilula-lote, .botao-data,
.botao-anexar, .form-comentario button, .botao-icone { position: relative; }
.check::after, .remover-tarefa::after, .botao-add::after, .botao-voz::after, .cal-nav::after, .minha-conta::after,
.pilula-lote::after, .botao-data::after, .botao-anexar::after, .form-comentario button::after {
  content: ""; position: absolute; inset: -8px;
}
.seta-grupo::after { content: ""; position: absolute; inset: 0 -10px; }
.form-comentario button { min-width: 40px; min-height: 40px; }
summary.selo { border: 1px solid var(--borda); min-height: 32px; display: inline-flex; align-items: center; padding: 4px 10px; }

/* Separar figura em duas partes (dentro do visor) */
.botao-visor-dupla {
  width: 100%; margin-top: 8px; min-height: 44px; background: transparent; color: var(--creme-fraco);
  border: 1px solid var(--borda); font-weight: 700; cursor: pointer;
}
.visor-dupla-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding: 12px; background: var(--cartao); border: 1px solid var(--borda); }
.visor-dupla-form[hidden] { display: none; }
.visor-dupla-linha { display: flex; gap: 10px; align-items: flex-end; }
.visor-dupla-linha label { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--creme-fraco); font-weight: 700; }
.visor-dupla-linha .visor-dupla-pct { flex: 0 0 96px; }
.visor-dupla-linha input { height: 44px; padding: 0 10px; background: var(--painel); color: var(--creme); border: 1px solid var(--borda); font-size: 16px; }
.visor-dupla-resto { flex: 0 0 96px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--creme-fraco); font-weight: 700; border: 1px dashed var(--borda); }
.botao[hidden], .visor-dupla-form [hidden] { display: none !important; }

.botao-visor-dupla-editar { width: 100%; margin-top: 6px; min-height: 40px; background: transparent; border: 0; color: var(--creme-apagado); text-decoration: underline; cursor: pointer; }
.botao-visor-dupla-editar[hidden] { display: none; }
form[hidden] { display: none; }
/* Nome da parte, bem evidente, logo depois do nome da figura */
.tag-parte {
  display: inline-block; margin-left: 4px; padding: 1px 8px; vertical-align: 1px;
  font-size: 12px; font-weight: 800; letter-spacing: .06em;
  background: var(--laranja); color: var(--base);
}

.item-pintura-nomecol { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; flex: 1; }
.item-pintura-nomecol .tag-parte { margin: 0; }

/* Tipo da tarefa (natureza): etiqueta discreta + filtro */
.tag-natureza {
  display: inline-block; padding: 1px 7px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  border: 1px solid currentColor;
}
.tag-natureza.n-pedido_externo { color: var(--barra-laranja); }
.tag-natureza.n-orcamento { color: var(--barra-azul); }
.tag-natureza.n-modelagem { color: var(--barra-lilas); }
.tag-natureza.n-compra { color: var(--barra-amarelo); }
.filtro-natureza { display: flex; gap: 6px; overflow-x: auto; padding: 0 0 10px; scrollbar-width: none; }
.filtro-natureza[hidden], .filtro-natureza button[hidden] { display: none; }
.filtro-natureza button {
  flex: 0 0 auto; min-height: 36px; padding: 0 14px; background: transparent; color: var(--creme-fraco);
  border: 1px solid var(--borda); font-weight: 700; font-size: 13px; cursor: pointer;
}
.filtro-natureza button.ativo { background: var(--creme); color: var(--base); border-color: var(--creme); }

/* Pedido externo */
.linha-dupla-externo { display: flex; gap: 10px; }
.linha-dupla-externo .campo { flex: 1; min-width: 0; }
.item-externo { padding: 12px; margin-bottom: 10px; }
.opcao-externo { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; }
.resultados-externo { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.det-peca-sem-foto { display: inline-block; width: 44px; height: 44px; background: var(--painel); flex-shrink: 0; }

/* Tipo na hora de criar a tarefa */
.tipos-rapidos { display: flex; gap: 6px; overflow-x: auto; margin: -6px 0 12px; scrollbar-width: none; }
.tipos-rapidos[hidden] { display: none; }
.tipos-rapidos button {
  flex: 0 0 auto; min-height: 36px; padding: 0 14px; background: transparent; color: var(--creme-fraco);
  border: 1px solid var(--borda); font-weight: 700; font-size: 13px; cursor: pointer;
}
.tipos-rapidos button.ativo { background: var(--creme); color: var(--base); border-color: var(--creme); }
.tag-natureza.pendente { color: var(--barra-vermelho); text-decoration: none; }
.det-precisa { border-color: var(--laranja); }

.cabeca-item-externo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.numero-item { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--creme-fraco); }
.remover-item { min-height: 36px; padding: 0 12px; background: transparent; color: var(--barra-vermelho); border: 1px solid var(--borda); font-weight: 700; cursor: pointer; }
.remover-item[hidden], .erro-externo[hidden] { display: none; }
.erro-externo { margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--barra-vermelho); color: var(--barra-vermelho); font-weight: 700; }

.fotos-externo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fotos-externo img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--painel); }

/* ── Peças por foto: cada imagem é sua peça, segurar e arrastar junta duas ── */
.pecas-foto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 6px; }
.peca-foto {
  position: relative; aspect-ratio: 1; border-radius: var(--raio); overflow: hidden;
  background: var(--painel); border: 1px solid var(--borda); touch-action: pan-y; cursor: grab;
}
.peca-foto img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-select: none; user-select: none; }
.peca-foto.arrastando { opacity: .35; }
.peca-foto.alvo-juntar-foto { outline: 3px solid var(--laranja); outline-offset: -3px; }
.peca-foto-conta {
  position: absolute; top: 5px; right: 5px; background: var(--laranja); color: var(--base);
  font-size: 11px; font-weight: 700; border-radius: 10px; padding: 1px 6px; pointer-events: none;
}
.peca-foto-remover {
  position: absolute; top: 5px; left: 5px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; border: none; display: flex; align-items: center;
  justify-content: center; font-size: 15px; line-height: 1; padding: 0;
}
.peca-foto-nome {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; font-size: 10.5px;
  color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.75)); pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.botao-add-foto {
  aspect-ratio: 1; border-radius: var(--raio); border: 2px dashed var(--borda);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; color: var(--creme-fraco); background: transparent; cursor: pointer;
}
.botao-add-foto.enviando { opacity: .6; pointer-events: none; }
.fantasma-foto {
  position: fixed; z-index: 9999; pointer-events: none; border-radius: var(--raio);
  overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.4); opacity: .92;
}

/* ── Estoque de material ─────────────────────────────────────────────── */
.material { padding: 13px 14px; margin-bottom: 11px; }
.material-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.material-saldo { font-size: 22px; font-weight: 800; }
.material-saldo small { font-size: 12px; font-weight: 600; color: var(--creme-fraco); }
.material-barra { height: 6px; background: var(--painel); margin: 9px 0 8px; overflow: hidden; }
.material-barra span { display: block; height: 100%; background: var(--barra-verde); }
.material-barra.amarelo span { background: var(--barra-amarelo); }
.material-barra.vermelho span { background: var(--barra-vermelho); min-width: 4px; }
.material-barra.neutro span { background: var(--borda); }
.registro-material { margin-top: 10px; }
.registro-material > summary { list-style: none; cursor: pointer; display: inline-flex; }
.registro-material > summary::-webkit-details-marker { display: none; }
.registro-material form { margin-top: 10px; }
.material-tipos { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.material-tipos label {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 14px;
  border: 1px solid var(--borda); cursor: pointer;
}
.material-mov { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--borda-fraca); flex-wrap: wrap; }
.material-mov:first-of-type { margin-top: 8px; }
.material-mov-q { font-weight: 700; min-width: 72px; }
.material-mov-q.mais { color: var(--barra-verde); }
.material-mov-q.menos { color: var(--barra-vermelho); }
.material-mov form { margin: 0 0 0 auto; }
.material-mov button.selo { background: var(--painel); color: var(--creme-fraco); border: 1px solid var(--borda); cursor: pointer; font-family: inherit; }

/* Estoque: depósitos por material e cadastro por tipo/cor */
.mesas-sugeridas[hidden] { display: none; }
.material-depositos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.material-depositos .selo strong { color: var(--creme); }
.material-qtd-deposito { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.material-qtd-deposito span { min-width: 64px; color: var(--creme-fraco); font-size: 13px; }
.material-qtd-deposito input { flex: 1; }
.material-remover { background: var(--painel); color: var(--creme-fraco); border: 1px solid var(--borda); cursor: pointer; font-family: inherit; }

.material-quantidade { display: flex; gap: 8px; }
.material-quantidade input { flex: 1; min-width: 0; }
.material-quantidade select { width: 78px; }

/* Lançamento de estoque numa linha só */
.lancar { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.lancar-linha { display: flex; gap: 8px; align-items: stretch; }
.lancar-linha input[type="text"] { flex: 1; min-width: 0; }
.lancar-linha .botao { padding-left: 18px; padding-right: 18px; }
.lancar-outros { display: flex; gap: 8px; flex-wrap: wrap; }
.lancar-outros .selo { background: var(--painel); color: var(--creme); border: 1px solid var(--borda); cursor: pointer; font-family: inherit; padding: 8px 12px; }
.pilulas { display: inline-flex; flex-wrap: wrap; gap: 0; align-self: center; }
.pilulas label { cursor: pointer; position: relative; }
.pilulas input { position: absolute; inset: 0; margin: 0; opacity: 0; pointer-events: none; }
.pilulas span { display: block; padding: 10px 13px; font-size: 14px; font-weight: 600; color: var(--creme-fraco); background: var(--painel); border: 1px solid var(--borda); margin-left: -1px; }
.pilulas label:first-child span { margin-left: 0; }
.pilulas input:checked + span { background: var(--laranja); color: var(--base); border-color: var(--laranja); position: relative; }
.pilulas[hidden] { display: none; }
.material-quantidade .pilulas { align-self: stretch; }
.lancar-linha input[type="text"] {
  width: 100%; height: 46px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 4px;
  padding: 0 12px; color: var(--creme); font-family: inherit; font-size: 16px;
}
.lancar-linha input[type="text"]:focus { outline: none; border-color: var(--laranja); }
.lancar-linha input[type="text"]::placeholder { color: var(--creme-fraco); }
.lancar-linha .pilulas { align-self: stretch; }
.lancar-linha .pilulas label, .lancar-linha .pilulas span { height: 100%; box-sizing: border-box; display: flex; align-items: center; }
.lancar > .pilulas { align-self: flex-start; }
.lancar-linha .botao { min-width: 84px; }

/* Biblioteca: filtro de categoria — grade de colunas sempre com a mesma largura.
   A ordem é sempre alfabética e fixa: essa lista nunca muda de lugar sozinha. */
.filtro-categoria { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.filtro-categoria button {
  min-height: 38px; padding: 0 6px; background: var(--cartao); color: var(--creme-fraco);
  border: 1px solid var(--borda); border-radius: 4px; font-weight: 700; font-size: 12.5px;
  font-family: 'Figtree', sans-serif; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease, transform .12s ease;
}
.filtro-categoria button:active { transform: scale(.95); }
.filtro-categoria button.ativo { background: var(--laranja); color: var(--base); border-color: var(--laranja); }

/* Ordenar as PEÇAS encontradas (A-Z ou a adicionada mais recente primeiro) — sempre
   abaixo da grade de categorias, e nunca mexe na posição das categorias em si. */
.ordenar-resultados { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.ordenar-resultados-rotulo { font-size: 12px; color: var(--creme-fraco); }
.pilulas-ordem { flex: 0 0 auto; }
.pilulas-ordem span { padding: 6px 11px; font-size: 11.5px; font-weight: 700; letter-spacing: .2px; }
.pilulas-ordem input:checked + span { background: var(--creme); color: var(--base); border-color: var(--creme); }

/* ── Biblioteca: ver a foto em tela cheia (dois toques numa peça) ─────── */
.visor-biblioteca {
  position: fixed; inset: 0; height: 100dvh; background: rgba(10, 8, 6, .96); z-index: 45;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px calc(20px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
  box-sizing: border-box; overscroll-behavior: none;
}
.visor-biblioteca.aberto { display: flex; }
.visor-biblioteca img { max-width: 100%; max-height: 82dvh; object-fit: contain; }
.visor-biblioteca-legenda { color: var(--creme-fraco); font-size: 14px; text-align: center; }

/* ── Peças e mesas de impressão ─────────────────────────────────────── */
.mesas-barra {
  z-index: 30; background: var(--base); border-bottom: 1px solid var(--borda);
  padding: 8px var(--lateral);
}
/* "fixed" (não sticky): ver a nota do menu de baixo — sticky some em certos aparelhos. O JS troca a
   classe quando o cabeçalho sai da tela e segura o lugar com um espaçador. */
.mesas-barra.fixa { position: fixed; top: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto; }
.mesas-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.mesas-chips::-webkit-scrollbar { display: none; }
.mesa-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  background: var(--cartao); color: var(--creme); border: 1px solid var(--borda); border-radius: 4px;
  font-family: 'Figtree', sans-serif; font-weight: 700; font-size: 14px; cursor: pointer;
}
.mesa-chip-conta { font-size: 12px; font-weight: 700; color: var(--laranja); }
.mesa-chip.aberta { border-color: var(--laranja); background: var(--terracota-fundo); }
.mesa-chip.nova { background: transparent; color: var(--creme-fraco); border-style: dashed; }
.mesa-chip:active { transform: scale(.97); }
.mesas-novo { display: flex; gap: 8px; margin-top: 8px; }
.mesas-novo[hidden] { display: none; }
.mesas-novo input {
  flex: 1; min-width: 0; height: 44px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 4px;
  padding: 0 12px; color: var(--creme); font-family: inherit; font-size: 16px;
}
.mesas-novo input:focus { outline: none; border-color: var(--laranja); }
.mesas-controles { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.mesas-controles .pilulas span { padding: 8px 14px; }
.mesas-estado { font-size: 12px; color: var(--creme-fraco); text-align: right; min-width: 0; }

.mesa-lista-linhas { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.mesa-peca {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; min-height: 52px; padding: 10px 12px;
  background: var(--cartao); color: var(--creme); border: 1px solid var(--borda); border-radius: 4px;
  font-family: inherit; font-size: 15px; cursor: pointer;
}
.mesa-peca.marcada { border-color: var(--laranja); background: var(--terracota-fundo); }
.mesa-peca-marca { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--borda); }
.mesa-peca.marcada .mesa-peca-marca { background: var(--laranja); border-color: var(--laranja); }
.mesa-peca-texto { min-width: 0; line-height: 1.35; }
.mesa-peca-cod { font-size: 13px; font-weight: 700; color: var(--laranja); letter-spacing: .4px; }
.mesa-peca-nome { font-weight: 600; }
.mesa-peca-extra { display: block; font-size: 12px; color: var(--creme-fraco); }
.mesa-cartao { border: none; background: transparent; padding: 0; text-align: left; cursor: pointer; font-family: inherit; }
.mesa-cartao.marcada .moldura { border-color: var(--laranja); outline: 2px solid var(--laranja); }
.mesa-selo { background: var(--laranja); color: var(--base); }
.mesas-acao { position: fixed; left: 0; right: 0; bottom: 0; max-width: 480px; margin: 0 auto; z-index: 25; padding: 10px var(--lateral) calc(10px + env(safe-area-inset-bottom)); background: var(--base); border-top: 1px solid var(--borda); }
.mesas-main-com-acao { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
.mesas-acao[hidden] { display: none; }
@media (min-width: 640px) { .mesa-lista-linhas.galeria, .galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mesas-novo .botao { width: auto; height: 44px; padding: 0 14px; margin: 0; flex: 0 0 auto; }
.mesas-controles .pilulas { flex-wrap: nowrap; flex: 0 0 auto; }
.mesas-controles .pilulas span { white-space: nowrap; }
.mesas-estado { flex: 1 1 auto; font-size: 11.5px; line-height: 1.3; }

.mesa-peca-parte { font-size: 13px; font-weight: 700; color: var(--creme); }
.mesas-folha { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .6); display: flex; align-items: flex-end; justify-content: center; }
.mesas-folha[hidden] { display: none; }
.mesas-folha-caixa { width: 100%; max-width: 480px; background: var(--painel); border-top: 1px solid var(--borda); padding: 16px var(--lateral) calc(16px + env(safe-area-inset-bottom)); }
.mesas-folha-caixa .campo { margin-top: 10px; }

.mesas-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.mesas-extra .botao { width: 100%; margin: 0; }
.mesas-extra .botao[hidden] { display: none; }

.det-impressas-lista { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.det-peca-imp {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; min-height: 56px; padding: 8px 10px;
  background: var(--cartao); color: var(--creme); border: 1px solid var(--borda); border-radius: 4px; font-family: inherit; font-size: 14px; cursor: pointer;
}
.det-peca-imp.feita { opacity: .6; }
.det-peca-imp img, .det-peca-imp .det-peca-sem-foto { width: 40px; height: 40px; flex: 0 0 40px; object-fit: cover; border-radius: 4px; background: var(--painel); }
.det-peca-imp-texto { min-width: 0; line-height: 1.35; }

/* Recado do mestre sobre a peça: selo no cartão e aviso no visor da pintura */
.selo-recado {
  position: absolute; left: 6px; bottom: 6px; z-index: 2; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--amarelo-urgencia); color: #1F1E1D; box-shadow: 0 0 0 2px var(--painel);
}
.selo-recado[hidden] { display: none; }
.visor-recado-chip {
  position: absolute; left: 12px; right: 12px; z-index: 3; display: flex; align-items: center; gap: 8px;
  top: calc(64px + env(safe-area-inset-top)); width: auto; border: none; cursor: pointer;
  padding: 11px 14px; background: var(--amarelo-urgencia); color: #1F1E1D; font-family: inherit; font-size: 14px; font-weight: 700;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.visor-recado-chip[hidden], .visor-recado-painel[hidden], .visor-recado-editor[hidden] { display: none; }
.visor-recado-painel {
  position: absolute; left: 12px; right: 12px; z-index: 4; top: calc(64px + env(safe-area-inset-top));
  background: #FFF6D6; color: #2A2412; padding: 16px; box-shadow: 0 6px 24px rgba(0, 0, 0, .6);
}
.visor-recado-titulo { font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; opacity: .7; }
.visor-recado-texto { margin-top: 8px; font-size: 18px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.visor-recado-ok {
  margin-top: 14px; width: 100%; border: none; padding: 13px; cursor: pointer; font-family: inherit;
  font-size: 15px; font-weight: 800; background: #2A2412; color: #FFF6D6;
}
.visor-recado-editor { margin-top: 10px; }
.visor-recado-editor textarea {
  width: 100%; box-sizing: border-box; background: var(--cartao); color: var(--creme); border: 1px solid var(--borda);
  padding: 10px 12px; font-family: inherit; font-size: 16px; resize: vertical;
}
.visor-recado-editor-botoes { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 8px; }
.visor-recado-editor-botoes { align-items: start; } .visor-recado-editor-botoes .botao { height: 46px; margin: 0; }

/* Pintura: botões do pedido lado a lado */
.acoes-pedido-pintura { display: flex; gap: 8px; margin-top: 8px; }
.acoes-pedido-pintura .acao-pedido-pintura { flex: 1 1 0; min-width: 0; }
.acoes-pedido-pintura .acao-pedido-pintura > summary.selo {
  display: flex; align-items: center; justify-content: center; text-align: center; box-sizing: border-box;
  width: 100%; min-height: 40px; padding: 8px 10px; font-size: 13px; white-space: normal; line-height: 1.2;
  background: var(--painel); border: 1px solid var(--borda);
}
.acoes-pedido-pintura .acao-pedido-pintura[open] > summary.selo { border-color: var(--laranja); color: var(--laranja); }
.acoes-pedido-pintura .acao-pedido-pintura.direita .opcoes-data { left: auto; right: 0; }
.acoes-pedido-pintura .acao-pedido-pintura > summary.selo { height: 48px; min-height: 48px; }

/* ── Estoque visual: um pote de resina e um rolo de filamento por cor ───── */
.est-pagina { padding-top: 14px; }
.est-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.est-coluna { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.est-coluna-titulo {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 6px;
  border-bottom: 1px solid var(--borda); font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--creme-fraco);
}
.est-conta { font-size: 12px; color: var(--laranja); }
.est-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px 12px;
  background: var(--cartao); border: 1px solid var(--borda); color: var(--creme); font-family: inherit; cursor: pointer;
  text-align: center; min-width: 0;
}
.est-tile:active { transform: scale(.98); }
.est-tile.vazio .est-arte { opacity: .5; }
.est-arte { display: block; width: min(100%, 118px); }
.est-svg { display: block; width: 100%; height: auto; }
.est-cor { font-size: 14px; font-weight: 800; line-height: 1.2; margin-top: 6px; overflow-wrap: anywhere; }
.est-tipo { font-size: 12px; color: var(--creme-fraco); min-height: 14px; }
.est-alerta { position: absolute; top: 8px; right: 8px; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 2px var(--cartao); }
.est-alerta.amarelo { background: var(--amarelo-urgencia); }
.est-alerta.vermelho { background: var(--vermelho-urgencia); }
.est-tile.novo { border-style: dashed; background: transparent; min-height: 96px; justify-content: center; color: var(--creme-fraco); }
.est-mais { font-size: 30px; line-height: 1; font-weight: 300; color: var(--laranja); }
.est-outros { margin-top: 22px; }
.est-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.est-grade .est-arte { width: min(100%, 84px); }
.est-dica { margin-top: 16px; text-align: center; }

.est-folha { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .62); display: flex; align-items: flex-end; justify-content: center; }
.est-folha[hidden], .est-toast[hidden], .est-outros[hidden] { display: none; }
.est-folha-caixa {
  position: relative; width: 100%; max-width: 480px; max-height: 92dvh; overflow-y: auto; box-sizing: border-box;
  background: var(--painel); border-top: 1px solid var(--borda); padding: 18px var(--lateral) calc(18px + env(safe-area-inset-bottom));
}
.est-fechar {
  position: absolute; top: 8px; right: 10px; width: 40px; height: 40px; border: none; background: transparent;
  color: var(--creme-fraco); font-size: 28px; line-height: 1; cursor: pointer;
}
.est-folha-topo { display: flex; gap: 14px; align-items: center; padding-right: 30px; }
.est-arte-g { width: 104px; flex: 0 0 104px; }
.est-folha-info { min-width: 0; }
.est-folha-nome { font-size: 20px; font-weight: 800; line-height: 1.2; }
.est-folha-saldo { font-size: 15px; margin-top: 6px; }
.est-qtd { display: flex; gap: 8px; margin-top: 16px; align-items: stretch; }
.est-qtd input[type="text"], .est-input {
  flex: 1; min-width: 0; height: 52px; box-sizing: border-box; background: var(--cartao); border: 1px solid var(--borda);
  padding: 0 14px; color: var(--creme); font-family: inherit; font-size: 20px; font-weight: 700;
}
.est-input { width: 100%; height: 46px; font-size: 16px; font-weight: 500; margin-top: 8px; flex: none; }
.est-qtd input[type="text"]:focus, .est-input:focus { outline: none; border-color: var(--laranja); }
.est-qtd .pilulas span { height: 52px; box-sizing: border-box; display: flex; align-items: center; padding: 0 16px; }
.est-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.est-chip {
  min-height: 44px; padding: 0 14px; background: var(--cartao); border: 1px solid var(--borda); color: var(--creme);
  font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.est-chip.sel { border-color: var(--laranja); color: var(--laranja); }
.est-acoes { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 8px; margin-top: 14px; }
.est-acao {
  min-height: 56px; border: none; font-family: inherit; font-size: 16px; font-weight: 800; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
}
.est-acao small { font-size: 11px; font-weight: 600; opacity: .8; }
.est-acao.usei { background: var(--laranja); color: #1f1e1d; }
.est-acao.chegou { background: var(--verde-claro); color: #0c1f16; }
.est-acao.contei { background: var(--cartao); color: var(--creme); border: 1px solid var(--borda); }
.est-acao:disabled { opacity: .5; }
.est-erro { min-height: 18px; margin-top: 8px; color: var(--vermelho-urgencia); font-size: 14px; }
.est-rotulo { margin-top: 16px; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--creme-fraco); }
.est-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.est-sw {
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--borda); background: var(--c); cursor: pointer; padding: 0;
  box-sizing: border-box; display: flex; align-items: center; justify-content: center; position: relative;
}
.est-sw.sel { border-color: var(--laranja); box-shadow: 0 0 0 2px var(--painel), 0 0 0 4px var(--laranja); }
.est-sw.outra { background: conic-gradient(#e33, #ec3, #3c5, #38e, #93e, #e33); color: #fff; font-weight: 800; overflow: hidden; }
.est-sw.outra input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.est-sw.outra span { text-shadow: 0 1px 2px rgba(0, 0, 0, .7); pointer-events: none; }
.est-cor-det { margin-top: 16px; }
.est-cor-det summary { cursor: pointer; font-size: 13px; color: var(--creme-fraco); padding: 6px 0; }
.est-cadastrar { width: 100%; margin-top: 8px; min-height: 52px; }
.est-toast {
  position: fixed; left: 12px; right: 12px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 70; max-width: 456px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px;
  background: #2b2a28; border: 1px solid var(--laranja); color: var(--creme); font-size: 15px; box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.est-toast button { border: none; background: transparent; color: var(--laranja); font-family: inherit; font-weight: 800; font-size: 15px; cursor: pointer; padding: 6px 4px; }

/* Estoque visual — refinos: topo, retângulos idênticos, gauge do pote */
.est-topo { align-items: center; gap: 12px; padding-bottom: 12px; }
.est-titulo { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.est-titulo h1 { margin: 0; font-size: 26px; line-height: 1.05; }
.est-subtitulo { margin-top: 3px; font-size: 12.5px; color: var(--creme-fraco); letter-spacing: .2px; }
.est-colunas, .est-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.est-tile {
  height: 226px; box-sizing: border-box; width: 100%; justify-content: flex-start; overflow: hidden;
  padding: 12px 8px; gap: 0;
}
.est-arte { width: 100%; height: 150px; flex: 0 0 150px; display: flex; align-items: center; justify-content: center; }
.est-arte .est-svg { width: auto; max-width: 100%; height: 100%; }
.est-cor, .est-tipo { display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.est-cor { margin-top: 10px; line-height: 20px; height: 20px; }
.est-tipo { line-height: 18px; height: 18px; }
.est-tile.novo { justify-content: center; align-items: center; min-height: 0; }
.est-grade { display: grid; margin-top: 10px; }
.est-grade .est-arte { width: 100%; }
.est-conta { letter-spacing: 0; text-transform: none; font-size: 13px; font-weight: 800; }
.est-arte-g { width: 96px; flex: 0 0 96px; height: 150px; display: flex; align-items: center; justify-content: center; }
.est-arte-g .est-svg { width: auto; max-width: 100%; height: 100%; }
.est-cor-outra { display: flex; gap: 8px; margin-top: 10px; align-items: flex-start; }
.est-cor-outra .est-input { margin-top: 0; }
.est-cor-outra .botao { height: 46px; margin: 0; flex: 0 0 auto; }
.est-cor-outra[hidden] { display: none; }

.est-potes {
  position: absolute; top: 8px; left: 8px; z-index: 1; padding: 2px 8px; font-size: 11px; font-weight: 800;
  background: var(--painel); border: 1px solid var(--borda); color: var(--creme);
}
.est-arte-g { width: 128px; flex: 0 0 128px; }

/* Estoque visual v3: azulejos maiores, gestos, folha de consumo rápida */
.est-tile { height: 246px; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.est-arte { height: 168px; flex: 0 0 168px; }
.est-arte-g { width: 112px; flex: 0 0 112px; height: 170px; }
.est-pergunta { margin-top: 18px; font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--creme-fraco); }
.est-baixas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.est-baixa {
  min-height: 60px; background: var(--cartao); border: 1px solid var(--borda); color: var(--creme); font-family: inherit;
  font-size: 19px; font-weight: 800; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.est-baixa:active { background: var(--laranja); color: #1f1e1d; border-color: var(--laranja); }
.est-baixa:disabled { opacity: .35; }
.est-baixa small { font-size: 11px; font-weight: 600; opacity: .8; }
.est-baixa.tudo { border-color: var(--vermelho-urgencia); color: var(--vermelho-urgencia); }
.est-usei-curto { min-height: 52px; padding: 0 20px; flex: 0 0 auto; }
.est-niveis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.est-nivel {
  min-height: 64px; background: var(--cartao); border: 2px solid var(--borda); color: var(--creme); font-family: inherit;
  font-size: 17px; font-weight: 800; cursor: pointer;
}
.est-nivel.atual.n-cheio { border-color: var(--verde-claro); color: var(--verde-claro); }
.est-nivel.atual.n-metade { border-color: var(--amarelo-urgencia); color: var(--amarelo-urgencia); }
.est-nivel.atual.n-acabando { border-color: var(--vermelho-urgencia); color: var(--vermelho-urgencia); }

/* Estoque: aba pessoal e escolha do pote que muda de cor */
.aba-principal svg { flex: 0 0 auto; }
.est-aviso-pessoal {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 9px 12px; font-size: 13px; font-weight: 700;
  color: var(--laranja); background: var(--terracota-fundo); border: 1px solid var(--laranja);
}
.est-aviso-pessoal[hidden] { display: none; }
.est-potes-escolha { display: flex; gap: 8px; overflow-x: auto; margin-top: 12px; padding-bottom: 4px; }
.est-pote-op {
  flex: 0 0 auto; min-width: 86px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 10px;
  background: var(--cartao); border: 2px solid var(--borda); color: var(--creme); font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
}
.est-pote-op small { font-size: 11px; font-weight: 600; color: var(--creme-fraco); }
.est-pote-op.sel { border-color: var(--laranja); }
.est-pote-mini { display: flex; align-items: center; justify-content: center; width: 40px; height: 62px; font-size: 18px; font-weight: 800; color: var(--laranja); }
.est-pote-mini svg { width: auto; height: 100%; }

.est-atualizado { margin: 0 0 12px; padding: 8px 12px; font-size: 13px; font-weight: 700; color: var(--creme-fraco); background: var(--painel); border: 1px solid var(--borda); }
.est-atualizado.velho { color: var(--amarelo-urgencia); border-color: var(--amarelo-urgencia); }
.est-atualizado[hidden] { display: none; }

/* Estoque: cadastro pela foto */
.est-foto-btn {
  display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 16px; cursor: pointer;
  background: var(--laranja); color: #1f1e1d; font-weight: 800; font-size: 17px;
}
.est-foto-btn span { display: flex; flex-direction: column; line-height: 1.2; }
.est-foto-btn small { font-size: 12px; font-weight: 600; opacity: .8; }
.est-lido { margin-top: 12px; padding: 12px; background: var(--cartao); border: 1px solid var(--borda); font-size: 14px; }
.est-lido[hidden] { display: none; }
.est-lido.ok { border-color: var(--verde-claro); }
.est-lido.duvida { border-color: var(--amarelo-urgencia); }
.est-lido.erro { border-color: var(--vermelho-urgencia); color: var(--vermelho-urgencia); }
.est-lido-linha { display: flex; align-items: center; gap: 12px; }
.est-lido-bolinha { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--borda); flex: 0 0 36px; }
.est-lido-aviso { margin-top: 8px; color: var(--amarelo-urgencia); font-weight: 700; }

/* Estoque: várias fotos em sequência e apagar */
.est-lote-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; margin: 0 0 12px; padding: 0 14px;
  background: var(--cartao); border: 1px dashed var(--laranja); color: var(--laranja); font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
}
.est-lote-conta { margin-left: 4px; padding: 2px 8px; font-size: 12px; background: var(--laranja); color: #1f1e1d; }
.est-lote-conta[hidden] { display: none; }
.est-lote-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.est-lote-item { display: flex; align-items: center; gap: 10px; padding: 8px; background: var(--cartao); border: 1px solid var(--borda); }
.est-lote-item img, .est-lote-semfoto { width: 48px; height: 48px; flex: 0 0 48px; object-fit: cover; background: var(--painel); }
.est-lote-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; font-size: 14px; }
.est-lote-txt span { font-size: 12px; color: var(--creme-fraco); }
.est-lote-acoes { display: flex; gap: 6px; flex: 0 0 auto; }
.est-lote-acoes .est-chip { min-height: 38px; padding: 0 10px; font-size: 13px; }
.est-lote-item.adicionado { border-color: var(--verde-claro); }
.est-lote-item.conferir { border-color: var(--amarelo-urgencia); }
.est-lote-item.erro { border-color: var(--vermelho-urgencia); }
.est-lote-item.lendo { opacity: .75; }
.est-lote-item.desfeito { opacity: .5; }
.est-apagar { width: 100%; margin-top: 18px; min-height: 48px; background: transparent; border: 1px solid var(--vermelho-urgencia); color: var(--vermelho-urgencia); font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }

/* Estoque v4: categorias, seções empilhadas em grade de 2, cartela Acrilex */
.est-cats {
  position: sticky; top: 0; z-index: 25; display: flex; gap: 6px; margin: 0 -10px 12px; padding: 8px 10px;
  background: var(--base); border-bottom: 1px solid var(--borda); overflow-x: auto; scrollbar-width: none;
}
.est-cats::-webkit-scrollbar { display: none; }
.est-cat {
  flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 76px; min-height: 48px; padding: 4px 12px;
  background: var(--cartao); border: 1px solid var(--borda); color: var(--creme-fraco); font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
}
.est-cat small { font-size: 11px; font-weight: 700; color: var(--laranja); }
.est-cat.ativa { border-color: var(--laranja); color: var(--creme); background: var(--terracota-fundo); }
.est-cat[hidden] { display: none; }
.est-colunas { display: block; }
.est-coluna { display: block; margin-bottom: 20px; }
.est-coluna[hidden], .est-outros[hidden] { display: none; }
.est-grade-sec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.est-coluna .est-coluna-titulo { margin-bottom: 0; }
.est-outros .est-coluna-titulo { margin-bottom: 0; }
.est-acrilex-res { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.est-acrilex-item {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 12px; background: var(--cartao); border: 1px solid var(--borda);
  color: var(--creme); font-family: inherit; font-size: 15px; cursor: pointer; text-align: left;
}
.est-acrilex-item .est-lido-bolinha { width: 30px; height: 30px; flex: 0 0 30px; }
.est-acrilex-nome { flex: 1; min-width: 0; }
.est-acrilex-acao { font-size: 12px; font-weight: 800; color: var(--laranja); white-space: nowrap; }
.est-acrilex-item.tem { opacity: .55; }
.est-acrilex-item.tem .est-acrilex-acao { color: var(--verde-claro); }
.est-acrilex-feitas { margin-top: 8px; color: var(--verde-claro); }

.est-acrilex-nome small { color: var(--creme-fraco); font-size: 12px; margin-left: 4px; }

/* Estoque: botões do topo lado a lado, busca de tinta, escolha do que cadastrar */
.est-topo-botoes { display: flex; gap: 8px; margin: 0 0 12px; }
.est-topo-botoes .est-lote-btn { width: auto; flex: 1 1 0; margin: 0; padding: 0 10px; min-width: 0; font-size: 14px; }
.est-topo-botoes .est-novo-btn { border-style: solid; background: var(--laranja); color: #1f1e1d; }
.est-busca-tinta { margin-top: 10px; }
.est-busca-tinta[hidden] { display: none; }
.est-sem-achado { grid-column: 1 / -1; padding: 12px 0; }
.est-escolhas { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.est-escolha {
  min-height: 56px; background: var(--cartao); border: 1px solid var(--borda); color: var(--creme);
  font-family: inherit; font-size: 17px; font-weight: 800; cursor: pointer;
}

/* Estoque: lista de compras de tintas e nível "acabou" */
.est-niveis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.est-nivel.atual.n-vazio { border-color: var(--creme-fraco); color: var(--creme-fraco); }
.est-compra-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin-top: 10px; padding: 0 12px;
  background: var(--cartao); border: 1px solid var(--borda); color: var(--creme); font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
}
.est-compra-btn[hidden], .est-compra-n[hidden] { display: none; }
.est-compra-n { min-width: 22px; padding: 1px 7px; text-align: center; font-size: 12px; background: var(--laranja); color: #1f1e1d; }
.est-compra-lista { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 14px; }
.est-compra-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--cartao); border: 1px solid var(--borda); }
.est-compra-item .est-lido-bolinha { width: 26px; height: 26px; flex: 0 0 26px; }
.est-compra-txt { flex: 1; min-width: 0; font-size: 15px; }
.est-compra-txt small { color: var(--creme-fraco); font-size: 12px; }
.est-compra-add { margin-top: 12px; width: 100%; min-height: 44px; }
#est-compra-texto { margin-top: 8px; width: 100%; box-sizing: border-box; }

/* Estoque: escolher entre "Usei" e "Mudar de cor", e suas cores primeiro */
.est-modos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.est-modo {
  min-height: 52px; background: var(--cartao); border: 2px solid var(--borda); color: var(--creme);
  font-family: inherit; font-size: 17px; font-weight: 800; cursor: pointer;
}
.est-modo.atual { border-color: var(--laranja); color: var(--laranja); background: var(--terracota-fundo); }
#est-modo-usei[hidden], #est-modo-cor[hidden] { display: none; }
.est-cores-pers { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.est-cor-pers {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px 0 8px;
  background: var(--cartao); border: 2px solid var(--borda); color: var(--creme); font-family: inherit; font-size: 16px; font-weight: 800; cursor: pointer;
}
.est-cor-pers.sel { border-color: var(--laranja); }
.est-cor-bola { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); flex: 0 0 30px; }
.est-baixa.tudo.confirmar { border-color: var(--vermelho-urgencia); color: var(--vermelho-urgencia); }

/* Estoque: botão de compras pequeno, ao lado dos outros dois */
.est-topo-botoes .est-compra-btn {
  position: relative; flex: 0 0 52px; width: 52px; min-height: 48px; margin: 0; padding: 0; justify-content: center; font-size: 12px;
}
.est-topo-botoes .est-compra-n { position: absolute; top: -6px; right: -6px; min-width: 20px; padding: 1px 5px; font-size: 12px; }