/* Contagem cega — identidade Light is Good.

   As duas cores saem do logotipo, medidas na paleta do arquivo: aubergine
   #680559 e magenta #F8005C. Cada uma tem um trabalho e nao invade o da outra.

     aubergine  estrutura — marca, titulo, foco, o que organiza a tela
     magenta    acao — o botao, o item que acabou de ser preenchido, a barra

   Magenta em uma coisa so e o que o mantem gritando. Espalhado, vira ruido e
   ela para de enxergar onde tocar.

   As cores de divergencia (a menos / a mais) sao propositalmente terrosas e
   dessaturadas, longe do magenta. Elas so aparecem na tela dos socios, e um
   vermelho vivo ali competiria com a cor de acao sem precisar.

   A hierarquia da lista de contagem esta invertida de proposito: o item JA
   contado recua, o que falta salta. Com 108 SKUs no RioMar, a pergunta que
   ela faz a cada dez segundos e "o que falta", nao "o que ja fiz". */

:root{
  --ground:#faf6f9; --surface:#fff; --surface-2:#f5edf2; --line:#e6d8e1;
  --ink:#1b0716; --ink-2:#5c4455; --ink-3:#8c7484;

  --marca:#680559; --marca-ink:#fff; --marca-soft:#f3e6f0;
  --acao:#f8005c; --acao-ink:#fff; --acao-soft:#ffe3ec;

  --falta:#93301f; --falta-soft:#f8e8e2; --sobra:#7a5a09; --sobra-soft:#f7efd8;
  --lock:#8c7484; --lock-bg:#efe6ec;
  --shadow:0 1px 2px rgba(27,7,22,.06), 0 8px 24px -12px rgba(104,5,89,.22);
  --anel:0 0 0 3px var(--acao-soft);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  /* Preto com fundo de ameixa, e nao cinza: e a marca continuando de noite,
     e e o que ela ve no corredor mal iluminado do shopping. */
  --ground:#14030f; --surface:#1f0819; --surface-2:#2b0f24; --line:#3f1a34;
  --ink:#f7eaf2; --ink-2:#c6a8bb; --ink-3:#9a7c8d;

  --marca:#d98cc4; --marca-ink:#1a0212; --marca-soft:#2e1028;
  --acao:#ff3d77; --acao-ink:#1a0210; --acao-soft:#3d0c23;

  --falta:#e8907a; --falta-soft:#3a1c13; --sobra:#d6ac3e; --sobra-soft:#332a12;
  --lock:#9a7c8d; --lock-bg:#2b0f24;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.8);
  --anel:0 0 0 3px rgba(255,61,119,.28);
}}

*{box-sizing:border-box}
html,body{margin:0;background:var(--ground);color:var(--ink)}
body{font-family:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.num{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
.rotulo{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:var(--ink-3)}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2px solid var(--acao);outline-offset:2px;border-radius:8px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.app{max-width:520px;margin:0 auto;padding:18px 16px 104px;display:flex;flex-direction:column;gap:16px}

/* A marca, em toda tela. Vem de /web/logo.png, servido pela propria VPS:
   no 4G do shopping, uma dependencia externa a menos e meio segundo a menos. */
.app::before{
  content:"";width:52px;height:52px;flex:none;
  background:url("/web/logo.png") center/contain no-repeat;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .app::before{
  /* O logo e roxo escuro sobre transparente: no fundo ameixa ele sumiria. */
  filter:brightness(0) saturate(100%) invert(85%) sepia(18%) saturate(700%) hue-rotate(280deg) brightness(105%);
}}

h1{margin:0;font-size:23px;font-weight:700;letter-spacing:-.025em;text-wrap:balance;color:var(--marca)}
h2{margin:0;font-size:18px;font-weight:700}
p{margin:0;color:var(--ink-2);font-size:15px}
.topo{display:flex;align-items:baseline;gap:10px;padding-bottom:12px;border-bottom:2px solid var(--marca-soft)}
.topo .quem{margin-left:auto;font-size:12.5px;color:var(--ink-3);font-weight:500}

.aviso{background:var(--marca-soft);border-left:3px solid var(--marca);border-radius:0 12px 12px 0;padding:13px 15px;font-size:15px;color:var(--ink)}
.erro{background:var(--falta-soft);border-left:3px solid var(--falta);border-radius:0 12px 12px 0;padding:13px 15px;font-size:15px;color:var(--ink)}

label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--ink-2)}
input[type=text],input[type=password],input[type=number],select{
  width:100%;padding:14px;font:inherit;border:1.5px solid var(--line);border-radius:12px;
  background:var(--surface);color:var(--ink)}
input:focus,select:focus{border-color:var(--acao);outline:none;box-shadow:var(--anel)}

.botao{background:var(--acao);color:var(--acao-ink);border-radius:14px;padding:17px;font-weight:700;
  width:100%;text-align:center;font-size:16px;letter-spacing:-.01em;
  box-shadow:0 6px 18px -8px var(--acao);transition:transform .12s ease, box-shadow .12s ease}
.botao:active{transform:translateY(1px);box-shadow:0 3px 10px -6px var(--acao)}
.botao[disabled]{background:var(--lock-bg);color:var(--ink-3);box-shadow:none;cursor:not-allowed;transform:none}
.botao-2{border:1.5px solid var(--marca);border-radius:14px;padding:14px;font-weight:600;color:var(--marca);
  width:100%;text-align:center;font-size:15px}
.rodape{position:fixed;left:0;right:0;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--ground) 70%,transparent)}
.rodape .dentro{max-width:520px;margin:0 auto}

.totem{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:14px;
  padding:16px;width:100%;text-align:left;background:var(--surface);transition:border-color .15s ease}
.totem[aria-pressed="true"]{border-color:var(--acao);background:var(--acao-soft);
  box-shadow:inset 0 0 0 1px var(--acao)}
.totem .n{font-weight:600}
.totem .s{font-size:13px;color:var(--ink-3);margin-left:auto;text-align:right}

.progresso{display:flex;align-items:center;gap:11px;font-size:13px;color:var(--ink-3);
  position:sticky;top:0;background:var(--ground);padding:10px 0;z-index:2}
.progresso .num{color:var(--marca);font-weight:500}
.barra{flex:1;height:7px;background:var(--lock-bg);border-radius:99px;overflow:hidden}
.barra i{display:block;height:100%;background:var(--acao);border-radius:99px;transition:width .25s cubic-bezier(.4,0,.2,1)}

.lista{display:flex;flex-direction:column;gap:4px}

/* Alvo de polegar: 56px de altura util, com o campo grande o bastante para
   ela acertar em pe, segurando o celular com uma mao so. */
.item{display:grid;grid-template-columns:1fr 100px;gap:12px;align-items:center;
  padding:12px 12px;border-radius:12px;border:1.5px solid transparent;
  background:var(--surface);transition:opacity .18s ease, border-color .18s ease}
.item:nth-child(odd){background:var(--surface-2)}

/* Contado recua, o que falta salta. */
.item.feito{opacity:.5;border-color:transparent}
.item.feito:focus-within{opacity:1}
.item.feito input{border-color:var(--acao);color:var(--acao);font-weight:600}
.item.recontar{background:var(--sobra-soft);border-color:var(--sobra);opacity:1}

.item .nome{font-size:16px;line-height:1.25;font-weight:500;letter-spacing:-.01em}
.item .meta{font-size:12px;color:var(--ink-3);margin-top:2px}
.item input{text-align:center;padding:14px 6px;font-family:"IBM Plex Mono",monospace;
  font-variant-numeric:tabular-nums;font-size:18px;font-weight:500}

/* Uma entrada escalonada, so na carga da lista. Da a medida do tamanho da
   tarefa antes dela comecar a rolar. */
@media (prefers-reduced-motion:no-preference){
  .lista .item{animation:sobe .32s cubic-bezier(.2,.7,.3,1) backwards}
  .lista .item:nth-child(1){animation-delay:.01s} .lista .item:nth-child(2){animation-delay:.03s}
  .lista .item:nth-child(3){animation-delay:.05s} .lista .item:nth-child(4){animation-delay:.07s}
  .lista .item:nth-child(5){animation-delay:.09s} .lista .item:nth-child(6){animation-delay:.11s}
  .lista .item:nth-child(7){animation-delay:.13s} .lista .item:nth-child(n+8){animation-delay:.15s}
}
@keyframes sobe{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

.fim{display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center;padding:52px 8px}
.selo{width:72px;height:72px;border-radius:50%;background:var(--acao);color:var(--acao-ink);
  display:grid;place-items:center;font-size:32px;font-weight:700;
  box-shadow:0 10px 30px -10px var(--acao)}

/* --------------------------------------------------------------- socios */
.largo{max-width:980px}
.cartao{background:var(--surface);border:1.5px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.cartao-topo{padding:14px 16px;border-bottom:1.5px solid var(--line);background:var(--surface-2);display:flex;align-items:center;gap:10px}
.cartao-topo h2{font-size:15px;color:var(--marca)}
.cartao-corpo{padding:16px}
.legenda{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;font-size:13px;color:var(--ink-2);
  border-left:2px solid var(--marca-soft);padding-left:12px}
.tabela{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th{text-align:left;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:700;padding:0 10px 8px;white-space:nowrap}
td{padding:10px;border-top:1px solid var(--line)}
td.n{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.cor-falta{color:var(--falta)} .cor-sobra{color:var(--sobra)}
tr.clicavel{cursor:pointer} tr.clicavel:hover td{background:var(--surface-2)}
tr.clicavel td:first-child::before{content:"▸ ";color:var(--marca)}
tr.clicavel[aria-expanded="true"] td:first-child::before{content:"▾ "}
tr.detalhe>td{padding:0 0 12px;border-top:0}
.det-caixa{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.pilula{display:inline-block;border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:700}
.p-ok{background:var(--marca-soft);color:var(--marca)}
.p-falta{background:var(--falta-soft);color:var(--falta)}
.p-neutro{background:var(--lock-bg);color:var(--lock)}
.nota{font-size:12.5px;color:var(--ink-3);border-top:1px dashed var(--line);padding-top:11px;margin-top:12px}
.vazio{color:var(--ink-3);font-style:italic}