/* ============================================================================
   goCents — componentes
   ============================================================================
   Depende de base.css. Nenhum valor cru aqui: tudo sai dos tokens.
   ============================================================================ */

/* ---------------------------------------------------------------- botões */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 40px;
  padding: 0 var(--s-4);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r);
  background: var(--superficie);
  color: var(--texto);
  font-size: var(--t-base);
  font-weight: 550;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--rapido), border-color var(--rapido),
              color var(--rapido), box-shadow var(--rapido),
              transform var(--rapido), opacity var(--rapido);
}

.btn:hover:not(:disabled) { background: var(--superficie-2); box-shadow: var(--sombra-1); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn--principal {
  background: var(--marca);
  border-color: var(--marca);
  color: var(--marca-texto);
}
.btn--principal:hover:not(:disabled) {
  background: var(--marca-hover);
  border-color: var(--marca-hover);
  box-shadow: var(--sombra-2);
}

.btn--perigo { color: var(--perigo); border-color: var(--perigo); }
.btn--perigo:hover:not(:disabled) { background: var(--perigo-suave); }

.btn--fantasma { border-color: transparent; background: transparent; }
.btn--fantasma:hover:not(:disabled) { background: var(--superficie-2); }

.btn--bloco { width: 100%; }

/* No celular todo botão vira alvo de toque confortável. */
@media (max-width: 899px) {
  .btn { min-height: var(--toque); }
}

.btn--grande { min-height: 56px; font-size: var(--t-md); font-weight: 600; }

/* Ícone sozinho: quadrado, sem texto. */
.btn--icone {
  min-height: 40px;
  width: 40px;
  padding: 0;
  border-color: transparent;
  background: transparent;
}
.btn--icone:hover:not(:disabled) { background: var(--superficie-2); }

.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* Roda enquanto a ação está em voo. */
.girando {
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar 600ms linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- formulário */

.campo { display: flex; flex-direction: column; gap: var(--s-2); }

.campo > label {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--texto-2);
}

.campo input,
.campo select,
.campo textarea {
  min-height: 42px;
  padding: 0 var(--s-3);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r);
  background: var(--superficie);
  /* 16px é o limite abaixo do qual o Safari do iOS dá zoom ao focar, e o zoom
     desalinha a tela inteira num app. */
  font-size: max(16px, var(--t-base));
  transition: border-color var(--rapido), box-shadow var(--rapido);
}

.campo textarea { min-height: 88px; padding: var(--s-3); resize: vertical; line-height: 1.5; }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px var(--marca-suave);
}

.campo input::placeholder { color: var(--texto-3); }

.campo--invalido input,
.campo--invalido textarea,
input.invalido {
  border-color: var(--perigo);
}
.campo--invalido input:focus, input.invalido:focus {
  box-shadow: 0 0 0 3px var(--perigo-suave);
}

.campo__dica { font-size: var(--t-xs); color: var(--texto-3); }
.campo__erro { font-size: var(--t-xs); color: var(--perigo); font-weight: 550; }

@media (max-width: 899px) {
  .campo input, .campo select { min-height: var(--toque); }
}

/* Interruptor. Alvo grande porque no app ele liga e desliga o ganha-pão. */
.chave { display: inline-flex; align-items: center; gap: var(--s-3); cursor: pointer; user-select: none; }
.chave input { position: absolute; opacity: 0; pointer-events: none; }

.chave__trilho {
  position: relative;
  width: 46px; height: 28px;
  border-radius: var(--r-cheio);
  background: var(--superficie-3);
  border: 1px solid var(--borda-forte);
  transition: background var(--rapido), border-color var(--rapido);
}
.chave__trilho::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--cinza-0);
  box-shadow: var(--sombra-1);
  transition: transform var(--rapido);
}
.chave input:checked + .chave__trilho { background: var(--ok); border-color: var(--ok); }
.chave input:checked + .chave__trilho::after { transform: translateX(18px); }
.chave input:focus-visible + .chave__trilho { outline: 2px solid var(--marca); outline-offset: 2px; }

.chave__texto { font-size: var(--t-sm); font-weight: 600; color: var(--texto-2); min-width: 4em; }

.marcar { display: flex; align-items: center; gap: var(--s-3); cursor: pointer; }
.marcar input { width: 20px; height: 20px; accent-color: var(--marca); }

/* ---------------------------------------------------------------- superfícies */

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-1);
  transition: box-shadow var(--normal), border-color var(--normal),
              transform var(--normal);
}

/* Só o que é clicável se levanta. Cartão que reage sem ser clicável promete
   uma interação que não existe. */
.cartao--clicavel { cursor: pointer; }
.cartao--clicavel:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-2);
  border-color: var(--borda-forte);
}

.cartao--plano { box-shadow: none; }
.cartao__corpo { padding: var(--s-4); }
.cartao__cabeca {
  padding: var(--s-4);
  border-bottom: 1px solid var(--borda);
}

.aviso {
  animation: aparecer var(--normal) backwards;
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid;
  border-radius: var(--r);
  font-size: var(--t-sm);
}
.aviso--erro   { border-color: var(--perigo); background: var(--perigo-suave); color: var(--perigo); }
.aviso--ok     { border-color: var(--ok);     background: var(--ok-suave);     color: var(--ok); }
.aviso--atencao{ border-color: var(--aviso);  background: var(--aviso-suave);  color: var(--aviso); }
.aviso--info   { border-color: var(--info);   background: var(--info-suave);   color: var(--info); }

.vazio {
  animation: aparecer var(--lento) backwards;
  display: grid;
  place-items: center;
  gap: var(--s-3);
  padding: var(--s-7) var(--s-4);
  text-align: center;
  color: var(--texto-2);
  border: 1px dashed var(--borda-forte);
  border-radius: var(--r-lg);
}

.etiqueta {
  transition: background var(--normal), color var(--normal);
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 3px var(--s-2);
  border-radius: var(--r-cheio);
  font-size: var(--t-xs);
  font-weight: 600;
  white-space: nowrap;
}
.etiqueta--espera    { background: var(--marca-suave); color: var(--marca); }
.etiqueta--andamento { background: var(--info-suave);  color: var(--info); }
.etiqueta--atencao   { background: var(--aviso-suave); color: var(--aviso); }
.etiqueta--ok        { background: var(--ok-suave);    color: var(--ok); }
.etiqueta--neutro    { background: var(--superficie-2); color: var(--texto-2); }

/* Bolinha de estado da conexão em tempo real. Sem ela, "não chegou nada" e
   "estou sem conexão" ficam indistinguíveis. */
.conexao {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--texto-3);
  /* A mudança de estado da conexão precisa ser percebida sem piscar. */
  transition: background var(--normal);
}
.conexao--aberta { background: var(--ok); }
.conexao--conectando { background: var(--aviso); animation: pulsar 1s ease-in-out infinite; }
.conexao--fechada { background: var(--perigo); }
@keyframes pulsar { 50% { opacity: 0.25; } }

/* Aviso passageiro. Sobe acima da barra inferior para não ficar escondido. */
.torrada {
  position: fixed;
  left: 50%;
  bottom: calc(var(--inferior-altura) + var(--baixo-seguro) + var(--s-4));
  transform: translateX(-50%);
  z-index: 100;
  max-width: min(92vw, 420px);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r);
  background: var(--cinza-900);
  color: var(--cinza-0);
  font-size: var(--t-base);
  font-weight: 550;
  box-shadow: var(--sombra-3);
  animation: subir var(--normal);
}

.torrada--saindo { animation: descer var(--rapido) forwards; }
@media (min-width: 900px) { .torrada { bottom: var(--s-5); } }
@keyframes subir { from { opacity: 0; transform: translate(-50%, 14px) scale(0.96); } }
@keyframes descer { to { opacity: 0; transform: translate(-50%, 10px); } }

/* ---------------------------------------------------------------- shell */

.app {
  display: grid;
  min-height: 100dvh;
  grid-template-columns: var(--lateral-largura) 1fr;
  grid-template-areas: "lateral principal";
}

/* No celular a lateral vira barra inferior e o conteúdo ocupa tudo. */
@media (max-width: 899px) {
  .app { grid-template-columns: 1fr; grid-template-areas: "principal"; }
}

/* ---- barra lateral (web) ---- */

.lateral {
  grid-area: lateral;
  display: flex;
  flex-direction: column;
  background: var(--nav-fundo);
  color: var(--nav-texto);
  padding: var(--s-4) var(--s-3);
  gap: var(--s-4);
  position: sticky;
  top: 0;
  height: 100dvh;
}

@media (max-width: 899px) { .lateral { display: none; } }

.lateral__marca {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-2);
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--cinza-0);
  letter-spacing: -0.02em;
}
.lateral__marca svg { width: 26px; height: 26px; }

.lateral__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.lateral__rotulo {
  padding: var(--s-3) var(--s-2) var(--s-1);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cinza-500);
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r);
  color: var(--nav-texto);
  font-size: var(--t-base);
  font-weight: 550;
  text-decoration: none;
  transition: background var(--rapido), color var(--rapido);
}

/* Marca de seção ativa: cresce a partir do centro em vez de surgir inteira.
   O olho acompanha o movimento e entende que a seleção mudou de lugar. */
.nav-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: var(--r-cheio);
  background: var(--marca);
  transform: translateY(-50%);
  transition: height var(--normal);
}
.nav-item--ativo::before { height: 60%; }
.nav-item:hover { background: var(--nav-hover); color: var(--nav-texto-ativo); }
.nav-item--ativo { background: var(--nav-ativo); color: var(--nav-texto-ativo); }
.nav-item svg { width: 19px; height: 19px; flex: 0 0 auto; }
.nav-item__contagem {
  margin-left: auto;
  padding: 1px var(--s-2);
  border-radius: var(--r-cheio);
  background: var(--marca);
  color: var(--marca-texto);
  font-size: var(--t-xs);
  font-weight: 700;
}

.lateral__rodape {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-top: 1px solid rgb(255 255 255 / 8%);
}

.avatar {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--marca);
  color: var(--marca-texto);
  font-size: var(--t-sm);
  font-weight: 700;
}

.lateral__usuario { min-width: 0; line-height: 1.3; }
.lateral__usuario strong { display: block; color: var(--cinza-0); font-size: var(--t-sm); }
.lateral__usuario span { display: block; color: var(--cinza-500); font-size: var(--t-xs); }

/* ---- área principal ---- */

.principal {
  grid-area: principal;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--barra-altura);
  padding: var(--s-2) var(--s-4);
  padding-top: calc(var(--s-2) + var(--topo-seguro));
  background: color-mix(in srgb, var(--superficie) 88%, transparent);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--borda);
}

.barra__titulo { font-size: var(--t-lg); font-weight: 650; letter-spacing: -0.01em; }

/* O conteúdo se centraliza e para de crescer numa largura de leitura.
   Sem teto, um monitor de 27 polegadas estica a linha até o olho perder o
   caminho de volta; sem centralizar, tudo gruda na esquerda e a tela fica
   torta. A margem lateral é fluida: aperta no celular, abre no monitor. */
.conteudo {
  flex: 1;
  width: 100%;
  max-width: var(--largura-media);
  margin-inline: auto;
  padding: var(--s-entre-blocos) var(--s-borda-pagina);
  /* No celular o conteúdo não pode terminar embaixo da barra inferior. */
  padding-bottom: calc(var(--inferior-altura) + var(--baixo-seguro) + var(--s-6));
}

@media (min-width: 900px) {
  .conteudo { padding-bottom: var(--s-7); }
}

/* Formulário e leitura: coluna única, estreita. */
.conteudo--estreito { max-width: var(--largura-estreita); }

/* Listas e cartões: o padrão. */
.conteudo--medio { max-width: var(--largura-media); }

/* Quadro kanban: precisa de mais espaço que uma lista. */
.conteudo--largo { max-width: var(--largura-larga); }

/* ---- barra inferior (celular) ---- */

.inferior {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  /* Num tablet a barra ficaria com os ícones espalhados nas pontas; o teto
     mantém o grupo junto e alcançável pelo polegar. */
  justify-content: center;
  background: color-mix(in srgb, var(--superficie) 92%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  border-top: 1px solid var(--borda);
  /* A barra de gestos do iPhone come o rodapé; o padding devolve o espaço. */
  padding-bottom: var(--baixo-seguro);
}

@media (min-width: 900px) { .inferior { display: none; } }

.inferior__item {
  flex: 1 1 0;
  max-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--inferior-altura);
  padding: var(--s-2) var(--s-1);
  color: var(--texto-3);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--normal);
}
.inferior__item svg {
  width: 22px; height: 22px;
  transition: transform var(--normal);
}
.inferior__item--ativo { color: var(--marca); }
/* Um deslocamento pequeno: o suficiente para o polegar confirmar o toque sem
   fazer a barra parecer instável. */
.inferior__item--ativo svg { transform: translateY(-2px); }

/* Bolinha de pendência sobre o ícone. */
.inferior__item { position: relative; }
.inferior__ponto {
  position: absolute;
  top: 6px;
  left: calc(50% + 7px);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--marca);
  border: 2px solid var(--superficie);
}

/* ---------------------------------------------------------------- kanban */

/* Rola na horizontal em vez de espremer as colunas: coluna estreita demais
   deixa o cartão ilegível, que é o oposto do objetivo.
 
   `safe center` centraliza o quadro quando as colunas cabem e volta a alinhar
   à esquerda quando não cabem. Só `center` cortaria o começo do quadro no
   estouro, e o usuário perderia a primeira coluna sem ter como rolar até ela. */
.kanban {
  display: flex;
  justify-content: safe center;
  gap: var(--s-4);
  overflow-x: auto;
  padding-bottom: var(--s-3);
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
}

.kanban__coluna {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  /* Largura fluida: acompanha a tela sem passar do que dá para ler. */
  flex: 1 1 clamp(272px, 20vw, 340px);
  max-width: 380px;
  min-width: 0;
  scroll-snap-align: start;
}

.kanban__cabeca {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-1);
  position: sticky;
  top: 0;
  background: var(--fundo);
  z-index: 1;
}

.kanban__titulo { font-size: var(--t-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-2); }

.kanban__contagem {
  padding: 1px var(--s-2);
  border-radius: var(--r-cheio);
  background: var(--superficie-2);
  color: var(--texto-2);
  font-size: var(--t-xs);
  font-weight: 700;
}

/* Faixa de cor no topo da coluna: dá para saber onde está sem ler o título. */
.kanban__coluna::before {
  content: '';
  height: 3px;
  border-radius: var(--r-cheio);
  background: var(--cor-da-coluna, var(--borda-forte));
}

.kanban__lista {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-height: 80px;
}

.kanban__vazio {
  padding: var(--s-4);
  text-align: center;
  font-size: var(--t-sm);
  color: var(--texto-3);
  border: 1px dashed var(--borda);
  border-radius: var(--r);
}

/* ---------------------------------------------------------------- entrega */

.entrega {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  animation: entrar var(--normal) backwards;
}

/* Cascata curta: os primeiros cartões entram em sequência para o olho
   acompanhar a lista se formando. A partir do sexto todos entram juntos —
   esperar meio segundo para ver o item de baixo é atraso, não polimento. */
.entrega:nth-child(1) { animation-delay: 0ms; }
.entrega:nth-child(2) { animation-delay: 40ms; }
.entrega:nth-child(3) { animation-delay: 80ms; }
.entrega:nth-child(4) { animation-delay: 120ms; }
.entrega:nth-child(5) { animation-delay: 160ms; }

@keyframes entrar {
  from { opacity: 0; transform: translateY(-8px) scale(0.99); }
}

.entrega__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }

.entrega__valor {
  font-size: var(--t-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* No app do motoqueiro o valor é a única informação que decide o aceite:
   precisa ser lido a meio braço de distância. */
.entrega__valor--destaque { font-size: var(--t-3xl); color: var(--marca); }

.entrega__endereco { font-weight: 600; line-height: 1.4; }

.entrega__dados {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-1) var(--s-3);
  margin: 0;
  font-size: var(--t-sm);
}
.entrega__dados dt { color: var(--texto-3); }
.entrega__dados dd { margin: 0; min-width: 0; }
.entrega__dados a { font-weight: 600; }

.entrega__acoes {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--borda);
}
.entrega__acoes .btn { flex: 1; }
.entrega__tempo { font-size: var(--t-xs); color: var(--texto-3); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- login */

.login {
  display: grid;
  min-height: 100dvh;
  grid-template-columns: 1fr;
}

/* Na web vira duas colunas: a marca à esquerda, o formulário à direita. É o
   padrão que as pessoas já reconhecem como "entrada de sistema". */
@media (min-width: 900px) {
  .login { grid-template-columns: 1.1fr 1fr; }
}

.login__marca {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--s-borda-pagina);
  background: linear-gradient(150deg, var(--marca-700), var(--marca-500) 55%, var(--marca-400));
  color: var(--cinza-0);
}
@media (min-width: 900px) { .login__marca { display: flex; } }

.login__logo { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-xl); font-weight: 700; }
.login__logo svg { width: 32px; height: 32px; }

.login__frase { font-size: var(--t-3xl); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; max-width: 12em; }
.login__apoio { font-size: var(--t-md); opacity: 0.9; max-width: 26em; }

.login__area {
  display: grid;
  place-items: center;
  padding: var(--s-entre-blocos) var(--s-borda-pagina);
  padding-top: calc(var(--s-entre-blocos) + var(--topo-seguro));
}

.login__caixa { width: 100%; max-width: clamp(320px, 88vw, 400px); }

/* No celular a marca aparece em cima do formulário, compacta. */
.login__topo-celular {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-6);
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--marca);
}
.login__topo-celular svg { width: 28px; height: 28px; }
@media (min-width: 900px) { .login__topo-celular { display: none; } }

/* ---------------------------------------------------------------- código */

/* O código de ativação é o único dado que sai do sistema para uma pessoa,
   lido em voz alta ou colado no WhatsApp. Grande, monoespaçado, selecionável. */
.codigo {
  font-family: var(--fonte-mono);
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  padding: var(--s-3);
  border-radius: var(--r);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  user-select: all;
  -webkit-user-select: all;
}

.codigo--linha {
  font-family: var(--fonte-mono);
  font-weight: 600;
  letter-spacing: 0.06em;
  user-select: all;
  -webkit-user-select: all;
}

/* ---------------------------------------------------------------- carregando */

/* Estado inicial, antes de o módulo decidir o que mostrar. */
#app.carregando {
  display: grid;
  place-items: center;
  min-height: 100dvh;
}

/* ---------------------------------------------------------------- listas */

.definicoes {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-1) var(--s-3);
  margin: 0;
  font-size: var(--t-sm);
}
.definicoes dt { color: var(--texto-3); }
.definicoes dd { margin: 0; min-width: 0; }

/* Separador dentro de formulário: divide "para onde vai" de "quanto custa". */
.regua {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--borda);
}

/* ---------------------------------------------------------------- formulário em cartão */

/* Substitui o `style="max-width:640px"` que estava embutido no JS. Valor de
   layout dentro do JavaScript é exatamente o que o design system existe para
   evitar: some do CSS e ninguém acha na hora de mudar. */
.cartao--formulario {
  width: 100%;
  max-width: var(--largura-estreita);
  margin-inline: auto;
  padding: var(--s-5);
}

/* Centraliza um bloco solto dentro da área de conteúdo. */
.centrado { margin-inline: auto; }

@keyframes aparecer { from { opacity: 0; } }

/* Chave online/offline: o trilho e o botão andam juntos, com a curva padrão. */
.chave__trilho, .chave__trilho::after { transition-timing-function: var(--curva); }