/* =============================================================
   HOJE — presença e captura do valor de entrada
   ============================================================= */

.dia-laje{
  background:var(--go);
  color:var(--sobre-go);
  border-radius:var(--r);
  padding:var(--s4) var(--s5);
  margin-bottom:var(--s4);
  box-shadow:0 1px 2px rgba(15,118,110,.2), 0 8px 22px -10px rgba(15,118,110,.55);
}
/* Sem `opacity` nestes dois. O rótulo da cidade em 10px com
   opacity .8 sobre o verde dava 4.12:1 — abaixo de AA, e é o nome da
   cidade onde ele está atendendo. A hierarquia aqui já vem do
   tamanho, do peso e da caixa alta; transparência só tirava
   contraste sem acrescentar leitura. */
.dia-laje .l{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--fs-micro);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
}
.dia-laje h2{font-size:var(--fs-xl);letter-spacing:var(--ls-tight);margin:3px 0}
.dia-laje p{font-size:var(--fs-sm)}

/* ---------- uma pessoa da lista ----------
   Grid de 3 colunas: hora · nome · botões. O bloco de resposta
   (fechou pacote, captura de valor, resultado) cai numa segunda
   linha e ocupa da coluna do nome até a borda. */
.att{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  column-gap:var(--s3);
  row-gap:var(--s2);
  align-items:start;
  padding:var(--s3) var(--s5);
  border-bottom:1px solid var(--edge-2);
  transition:background var(--t2) var(--ease), opacity var(--t2) var(--ease);
}
.att .hr   {grid-column:1;grid-row:1}
.att .nf   {grid-column:2;grid-row:1}
.att .bt   {grid-column:3;grid-row:1}
.att .extra{grid-column:2 / -1;grid-row:2;min-width:0}
.att:last-child{border-bottom:none}

/* Linha já resolvida: recua, mas continua legível.
   Era `opacity:.62` com a hora em `--fg-3`. Duas coisas erradas
   juntas: `--fg-3` é cor de traço e borda, nunca de texto (3.1:1), e
   a opacidade no contêiner ainda multiplicava tudo por cima —
   deixava a hora perto de 2:1 num painel que é usado no sol.
   Recuo agora é cor, não transparência: dá pra medir e passa em AA. */
.att.pronta .hr{color:var(--fg-2)}
.att.pronta .nn{color:var(--fg-2);font-weight:500}
.att.pronta .np{color:var(--fg-2)}

/* Ficou em branco e alguém depois dela já foi marcado: passou batido.
   Tinta leve + traço na lateral. Chapar o --warn-soft aqui faz a
   linha gritar mais que o resto da lista e vira ruído. */
.att.pulada{background:color-mix(in srgb, var(--warn) 9%, transparent)}
.att.pulada .hr{color:var(--warn-fg);font-weight:700}
.att.pulada::before{
  content:'';
  position:absolute;
  left:0;
  width:3px;height:100%;
  background:var(--warn);
}
.att{position:relative}

.att .hr{
  font-size:var(--fs-sm);
  font-weight:600;
  padding-top:3px;
}
.att .nf{min-width:0;display:flex;flex-direction:column;gap:2px}
.att .nn{font-weight:600;font-size:var(--fs-md)}
.att .np{font-size:var(--fs-sm);color:var(--fg-2)}
.att .bt{display:flex;gap:var(--s2);align-items:center;padding-top:1px}

/* ---------- marcar ---------- */
.mk{
  font:inherit;
  font-size:var(--fs-sm);
  font-weight:600;
  min-height:var(--tap);
  min-width:var(--tap);
  padding:0 var(--s3);
  border-radius:var(--r-sm);
  cursor:pointer;
  border:1px solid var(--edge);
  background:var(--card);
  color:var(--fg-2);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  transition:transform var(--t1) var(--ease), background var(--t1) var(--ease),
             border-color var(--t1) var(--ease), color var(--t1) var(--ease);
}
.mk:active{transform:scale(.92)}
.mk.y{color:var(--go-fg);border-color:var(--go-edge)}
.mk.y:hover{background:var(--go-soft)}
.mk.n{color:var(--fg-2)}
.mk.n:hover{background:var(--bg-sunk);color:var(--fg)}
.mk.ok{background:var(--go);color:var(--sobre-go);border-color:var(--go);min-width:42px;padding:0 var(--s2)}
.mk svg{width:17px;height:17px}

.res{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--fs-micro);
  font-weight:500;
  letter-spacing:var(--ls-mono);
  text-transform:uppercase;
  padding:7px var(--s3);
  border-radius:var(--r-xs);
  flex:none;
  border:1px solid transparent;
}
.res.y{background:var(--go-soft);color:var(--go-fg);border-color:var(--go-edge)}
.res.n{background:var(--warn-soft);color:var(--warn-fg);border-color:var(--warn-edge)}

/* ---------- fechou pacote? ---------- */
.fechou{
  display:flex;
  gap:var(--s2);
  align-items:center;
  flex-wrap:wrap;
}
.fechou .perg{
  font-size:var(--fs-sm);
  color:var(--fg-2);
}

/* ---------- captura do valor de entrada ----------
   Regra 5 do CLAUDE.md: é aqui que o dinheiro entra no sistema.
   Se for difícil de digitar com uma mão só, ele não preenche. */
.captura{
  display:flex;
  flex-direction:column;
  gap:var(--s2);
  animation:captura-abre var(--t2) var(--ease-out) both;
}
@keyframes captura-abre{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.moeda{
  display:flex;
  align-items:center;
  gap:var(--s2);
}
.moeda .pre{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--fs-md);
  font-weight:600;
  color:var(--fg-2);
  flex:none;
}
.vin{
  width:110px;
  min-height:var(--tap);
  padding:0 var(--s3);
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-variant-numeric:tabular-nums;
  font-size:17px;
  font-weight:600;
  border-radius:var(--r-sm);
  flex:none;
}
/* tira as setinhas: no celular só atrapalham */
.vin::-webkit-outer-spin-button,
.vin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.vin{-moz-appearance:textfield;appearance:textfield}

.atalhos{display:flex;gap:var(--s2);flex-wrap:wrap}
.vchip{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-variant-numeric:tabular-nums;
  font-size:var(--fs-xs);
  font-weight:500;
  min-height:var(--tap);
  padding:0 var(--s3);   /* os três precisam caber numa linha em 380px */
  border-radius:var(--r-full);
  border:1px dashed var(--edge);
  background:transparent;
  color:var(--fg-2);
  cursor:pointer;
  transition:all var(--t1) var(--ease);
}
.vchip:hover{border-style:solid;border-color:var(--go);color:var(--go-fg);background:var(--go-soft)}
.vchip:active{transform:scale(.94)}

/* ---------- já respondido ---------- */
.marcado{
  font-size:var(--fs-sm);
  color:var(--fg-2);
  display:inline-flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
}
.marcado.ganho{color:var(--go-fg);font-weight:600}

.desfaz{
  background:none;
  border:none;
  font:inherit;
  font-size:var(--fs-xs);
  color:var(--fg-2);
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
  /* 44px de alvo sem mudar o desenho: o padding é compensado pela margem */
  padding:14px var(--s2);
  margin:-14px calc(var(--s2) * -1);
}
.desfaz:hover{color:var(--fg)}

/* =============================================================
   CONFIRMAÇÃO DO AGENDAMENTO

   A pergunta da véspera à noite: com quantas eu posso contar
   amanhã? A faixa some assim que a presença é marcada — depois
   disso saber quem tinha confirmado não muda mais nada.
   ============================================================= */

.att .conf{
  display:flex;
  align-items:center;
  gap:var(--s2);
  flex-wrap:wrap;
  font-size:var(--fs-sm);
}
.att .conf svg{width:15px;height:15px;flex:none}
.att .conf.ok{color:var(--go-fg);font-weight:600}
.att .conf .txt{font-weight:500}

/* Quem desistiu continua na lista. Sumir com a linha faz ele achar
   que perdeu o horário de vista, e a agenda do dia deixa de bater
   com a que ele decorou de manhã.

   O sinal de "não vem" é o traço no nome, NÃO opacidade. A linha já
   ganha `.pronta` (opacity .62) por ser resolvida; uma segunda
   camada de transparência multiplicava as duas e levava o motivo do
   cancelamento — que é a informação que ele precisa ler — para
   perto de 2:1. Cor e traço dizem a mesma coisa sem apagar texto. */
.att.fora .nn{
  text-decoration:line-through;
  text-decoration-thickness:1px;
  color:var(--fg-2);
}
/* A hora precisa continuar legível: é por ela que ele acha o buraco
   na agenda pra encaixar outra pessoa da fila. */
.att.fora .hr,
.att.pronta.fora .hr{color:var(--fg-2)}
.marcado.desistente b{color:var(--fg)}

/* ---------- por que desistiu ---------- */
.motivos{
  display:flex;
  flex-direction:column;
  gap:var(--s2);
  padding:var(--s2) 0 var(--s1);
}
.motivos .perg{font-size:var(--fs-sm);font-weight:600}
.motivos .chips{display:flex;gap:var(--s2);flex-wrap:wrap}
.motivos .vchip{font-family:inherit;font-size:var(--fs-xs)}
.motivos .moeda.livre{display:flex;gap:var(--s2);align-items:center}
.motivos .moeda.livre .vin{
  flex:1;
  min-width:0;      /* sem isto o input estoura a coluna em 380px */
  padding-left:var(--s3);
}
/* O `.ok` herda largura do contexto de captura de valor, onde ele é
   estreito de propósito. Aqui ele é o único jeito de salvar o motivo
   escrito à mão e precisa dos 44px cheios. */
.motivos .moeda.livre .mk.ok{min-width:var(--tap);flex:none}
.motivos .desfaz{align-self:flex-start}

/* =============================================================
   CHAMAR NO WHATSAPP

   Link, não botão: precisa abrir em aba nova e aguentar
   toque-e-segura no celular. O raciocínio de LGPD por trás está
   em `linkWhatsApp`, no js/dominio.js.
   ============================================================= */

.zap-bt{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:var(--tap);
  padding:0 var(--s3);
  border-radius:var(--r-full);
  border:1px solid var(--go-edge);
  background:var(--go-soft);
  color:var(--go-fg);
  font-size:var(--fs-sm);
  font-weight:600;
  text-decoration:none;
  transition:all var(--t1) var(--ease);
}
.zap-bt svg{width:16px;height:16px;flex:none}
.zap-bt:hover{background:var(--go);color:var(--sobre-go);border-color:var(--go)}
.zap-bt:active{transform:scale(.96)}

/* Dentro de uma linha da agenda o botão concorre com Veio/Faltou:
   ali ele é discreto, e o alvo de 44px vem do padding compensado. */
.zap-bt.mini{
  border:none;
  background:none;
  color:var(--go-fg);
  padding:14px var(--s2);
  margin:-14px calc(var(--s2) * -1);
  font-size:var(--fs-xs);
  text-decoration:underline;
  text-underline-offset:2px;
}
.zap-bt.mini:hover{background:none;color:var(--go);transform:none}