/*
  Central Wefox - componentes.css
  Depende dos tokens de base.css. Cada bloco abaixo e um componente
  reutilizavel do painel. Comentario no topo de cada um explica a
  decisao de design quando ela nao estava especificada no plano.
*/

/* ==========================================================================
   1. Bloco de destaque - contagem de tarefas atrasadas no Meu Dia
   Unico bloco da tela com raio 26px. Zero e um numero diferente, entao o
   bloco muda de FORMA entre os dois estados, nao so de cor:
   - com atraso: cartao cheio, numero gigante em acento, cantos 26px so
     no canto que "aponta" pra cima (assimetrico, como uma flâmula)
   - zero: recolhe para uma pilula estreita, raio total, sem numero
     grande - o formato inteiro muda de bloco pesado para faixa leve
   ========================================================================== */

.destaque {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  /* --grad-superficie por cima da cor solida: um sheen sutil, nao uma
     segunda cor - e o "elemento de destaque" que a rodada de 24/08 pediu
     pra ganhar degrade. O numero (.destaque__numero) continua solido:
     gradiente em texto/titulo segue proibido. */
  background: var(--grad-superficie), var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-hero) var(--raio-hero) var(--raio-md) var(--raio-hero);
  box-shadow: var(--sombra-1);
  transition: border-radius var(--duracao-media) var(--easing-padrao),
              padding var(--duracao-media) var(--easing-padrao),
              background var(--duracao-media) var(--easing-padrao);
}

.destaque__numero {
  font-family: var(--font-display);
  font-size: var(--fs-6);
  font-weight: var(--fw-black);
  line-height: var(--lh-dado);
  letter-spacing: var(--tracking-titulo);
  color: var(--cor-acento);
}

.destaque__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-05);
}

/* Sem caixa alta: no AgencyFlow medido, text-transform e "none" em toda
   amostra do app. O rotulo continua se distinguindo do corpo por tamanho
   (--fs-1, 12px) e peso (--fw-media, 500), nao por SHOUT. */
.destaque__rotulo {
  font-size: var(--fs-1);
  font-weight: var(--fw-media);
  color: var(--cor-texto-secundario);
}

.destaque__legenda {
  font-size: var(--fs-2);
  color: var(--cor-texto-secundario);
}

/* estado zero: bloco vira faixa leve, sem numero heroi */
.destaque--zero {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--raio-pilula);
  background: var(--cor-superficie-clara);
  border-color: var(--cor-borda);
}

.destaque--zero .destaque__numero {
  display: none;
}

.destaque--zero .destaque__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--cor-superficie-clara);
  border: 1px solid var(--cor-borda-forte);
  color: var(--cor-texto);
}

.destaque--zero .destaque__icone svg {
  width: 14px;
  height: 14px;
}

.destaque--zero .destaque__rotulo {
  color: var(--cor-texto);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-3);
  font-weight: var(--fw-forte);
}

.destaque--zero .destaque__legenda {
  color: var(--cor-texto-secundario);
}

.destaque__icone {
  display: none;
}

/* ==========================================================================
   2. Linha de tarefa - o componente mais usado do sistema
   Atraso se anuncia por tres sinais somados: posicao (o grupo "Atrasado"
   fica no topo, isso e responsabilidade do HTML/backend, nao do CSS),
   rotulo ATRASADO (sem caixa alta desde 24/08, ver base.css) e borda
   esquerda solida em acento.
   Ao concluir, a borda recua ate a cor neutra em ~200ms via transicao
   de border-left-color e opacidade - nunca fade generico do bloco inteiro.
   ========================================================================== */

.linha-tarefa {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-2);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-left: 3px solid transparent;
  border-radius: var(--raio-md);
  /* repouso: --easing-saida (voltando do hover). A regra :hover abaixo
     troca pra --easing-entrada - mesmo idioma do resto do sistema. */
  transition: border-left-color var(--duracao-media) var(--easing-padrao),
              opacity var(--duracao-media) var(--easing-padrao),
              background var(--duracao-rapida) var(--easing-saida),
              border-color var(--duracao-rapida) var(--easing-saida);
}

.linha-tarefa + .linha-tarefa {
  margin-top: var(--sp-1);
}

/* Hover: e a linha mais vista do sistema (Meu Dia inteiro e uma lista
   dela). Fundo sobe um degrau pra --cor-superficie-clara e a borda
   marca presenca - feedback puro, sem mover layout. */
.linha-tarefa:hover {
  background: var(--cor-superficie-clara);
  border-color: var(--cor-borda-forte);
  transition-timing-function: var(--easing-entrada);
}

.linha-tarefa--concluida:hover {
  background: var(--cor-superficie);
  border-color: var(--cor-borda);
}

.linha-tarefa__conteudo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.linha-tarefa__cliente {
  font-size: var(--fs-1);
  font-weight: var(--fw-media);
  color: var(--cor-texto-secundario);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.linha-tarefa__titulo {
  font-size: var(--fs-3);
  font-weight: var(--fw-regular);
  line-height: var(--lh-dado);
  color: var(--cor-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.linha-tarefa__meta {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.linha-tarefa__hora {
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto-secundario);
}

.linha-tarefa__pessoas {
  display: flex;
  align-items: center;
  flex: none;
}

/* rotulo ATRASADO - um dos tres sinais somados */
.linha-tarefa__badge-atraso {
  display: none;
  font-size: var(--fs-1);
  font-weight: var(--fw-forte);
  color: var(--cor-acento);
  padding: 3px var(--sp-1);
  border: 1px solid var(--cor-acento);
  border-radius: var(--raio-sm);
  white-space: nowrap;
}

.linha-tarefa--atrasada {
  border-left-color: var(--cor-acento);
}

.linha-tarefa--atrasada .linha-tarefa__badge-atraso {
  display: inline-block;
}

.linha-tarefa--concluida {
  border-left-color: var(--cor-borda);
  opacity: .55;
}

.linha-tarefa--concluida .linha-tarefa__titulo {
  text-decoration: line-through;
  text-decoration-color: var(--cor-texto-apagado);
  text-decoration-thickness: 1px;
}

.linha-tarefa--concluida .linha-tarefa__badge-atraso {
  display: none;
}

/* Alerta antes de vencer. Diferente do badge de atraso pela FORMA, nao so
   pela cor: aquele e retangulo vazado (grita), este e pilula preenchida
   (avisa). E o texto sempre diz quanto
   falta, porque cor sozinha nao pode ser o unico sinal. */
.linha-tarefa__badge-vence {
  font-size: var(--fs-1);
  font-weight: var(--fw-forte);
  color: var(--cor-acento);
  background: var(--cor-acento-fraco);
  padding: 3px var(--sp-1);
  border-radius: var(--raio-pilula);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.linha-tarefa--concluida .linha-tarefa__badge-vence {
  display: none;
}

/* Segunda linha do bloco de destaque: menor e mais apagada que a
   primeira, porque atraso continua mandando na hierarquia. */
.destaque__legenda--vence {
  color: var(--cor-acento);
  margin-top: var(--sp-05);
}

.linha-tarefa__checkbox {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: var(--raio-sm);
  border: 1px solid var(--cor-borda-forte);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duracao-rapida) var(--easing-padrao),
              border-color var(--duracao-rapida) var(--easing-padrao);
}

.linha-tarefa__checkbox svg {
  width: 12px;
  height: 12px;
  opacity: 0;
  transition: opacity var(--duracao-rapida) var(--easing-padrao);
}

.linha-tarefa--concluida .linha-tarefa__checkbox {
  background: var(--cor-superficie-clara);
  border-color: var(--cor-texto-apagado);
}

.linha-tarefa--concluida .linha-tarefa__checkbox svg {
  opacity: 1;
}

/* ==========================================================================
   3. Grupos da fila - cabecalhos Atrasado / Hoje / Esta semana / Depois / Sem data
   Rotulo pequeno sem caixa alta (padrao AgencyFlow, 24/08), lido como
   etiqueta pelo tamanho e peso, nao por SHOUT.
   Espaco entre grupos maior que o espaco entre linhas dentro do grupo.
   ========================================================================== */

.grupo-fila {
  margin-top: var(--sp-4);
}

.grupo-fila:first-child {
  margin-top: 0;
}

.grupo-fila__cabecalho {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-bottom: var(--sp-1);
  padding: 0 var(--sp-05);
}

.grupo-fila__titulo {
  font-size: var(--fs-1);
  font-weight: var(--fw-forte);
  color: var(--cor-texto-secundario);
}

.grupo-fila__contagem {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  color: var(--cor-texto-apagado);
}

/* grupo Atrasado usa o acento no rotulo - unico grupo com esse peso,
   porque e o unico que exige acao imediata */
.grupo-fila--atrasado .grupo-fila__titulo {
  color: var(--cor-acento);
}

/* ==========================================================================
   4. Chip de pessoa - avatar de iniciais
   Quem esta com a bola tem anel solido em acento (2px). Quem acompanha
   tem anel neutro fino (1px) e opacidade levemente menor. A diferenca e
   de forma (espessura do anel) somada a cor, nunca so cor.
   ========================================================================== */

.chip-pessoa {
  --chip-tam: 28px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--chip-tam);
  height: var(--chip-tam);
  border-radius: 50%;
  background: var(--cor-superficie-clara);
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto);
  font-size: var(--fs-2);
  font-weight: var(--fw-forte);
  flex: none;
}

.chip-pessoa--sm {
  --chip-tam: 22px;
  font-size: var(--fs-1);
}

.chip-pessoa-grupo .chip-pessoa + .chip-pessoa {
  margin-left: -8px;
}

.chip-pessoa--bola {
  border: 2px solid var(--cor-acento);
}

.chip-pessoa--acompanha {
  opacity: .7;
}

/* ==========================================================================
   5. Timeline de eventos da tarefa
   nota, mudanca de status, passagem de bola, aprovacao. Cada tipo se
   distingue por forma do marcador e rotulo de texto, nunca por cor
   sozinha - todos os marcadores usam a mesma paleta neutra.
   ========================================================================== */

.timeline {
  display: flex;
  flex-direction: column;
}

.timeline-item {
  display: flex;
  gap: var(--sp-2);
  position: relative;
  padding-bottom: var(--sp-3);
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-item:last-child .timeline-item__linha {
  display: none;
}

.timeline-item__marcador {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cor-superficie-clara);
  border: 1px solid var(--cor-borda-forte);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.timeline-item__marcador svg {
  width: 14px;
  height: 14px;
  color: var(--cor-texto);
}

.timeline-item__linha {
  position: absolute;
  top: 28px;
  left: 13px;
  bottom: 0;
  width: 1px;
  background: var(--cor-borda);
}

.timeline-item__corpo {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 4px;
}

.timeline-item__cabecalho {
  display: flex;
  align-items: baseline;
  gap: var(--sp-1);
  flex-wrap: wrap;
}

.timeline-item__rotulo {
  font-size: var(--fs-1);
  font-weight: var(--fw-media);
  color: var(--cor-texto-secundario);
}

.timeline-item__autor {
  font-size: var(--fs-2);
  color: var(--cor-texto);
  font-weight: var(--fw-forte);
}

.timeline-item__quando {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  color: var(--cor-texto-apagado);
  margin-left: auto;
}

.timeline-item__texto {
  margin-top: 2px;
  font-size: var(--fs-3);
  line-height: var(--lh-texto);
  color: var(--cor-texto);
}

/* aprovacao ganha um marcador levemente destacado - continua neutro,
   so a borda fica mais forte, porque e o unico evento que fecha etapa */
.timeline-item--aprovou .timeline-item__marcador {
  border-color: var(--cor-texto);
}

/* ==========================================================================
   6. Estado vazio - nunca uma caixa branca
   ========================================================================== */

.estado-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-1);
  padding: var(--sp-5) var(--sp-3);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
}

.estado-vazio__icone {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cor-superficie-clara);
  border: 1px solid var(--cor-borda-forte);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-1);
}

.estado-vazio__icone svg {
  width: 18px;
  height: 18px;
  color: var(--cor-texto-secundario);
}

.estado-vazio__titulo {
  font-size: var(--fs-4);
  font-weight: var(--fw-forte);
  color: var(--cor-texto);
}

.estado-vazio__legenda {
  font-size: var(--fs-3);
  color: var(--cor-texto-secundario);
  max-width: 34em;
}

/* ==========================================================================
   7. Aba (Meu Dia / Acompanhando)
   ========================================================================== */

.abas {
  display: flex;
  gap: var(--sp-3);
  border-bottom: 1px solid var(--cor-borda);
}

.aba {
  position: relative;
  padding: var(--sp-1) var(--sp-05);
  font-size: var(--fs-3);
  font-weight: var(--fw-forte);
  color: var(--cor-texto-secundario);
  transition: color var(--duracao-rapida) var(--easing-padrao);
}

.aba::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: transparent;
  border-radius: var(--raio-sm) var(--raio-sm) 0 0;
  transition: background var(--duracao-rapida) var(--easing-padrao);
}

.aba:hover {
  color: var(--cor-texto);
}

.aba[aria-selected="true"] {
  color: var(--cor-texto);
}

.aba[aria-selected="true"]::after {
  background: var(--cor-acento);
}

.aba__contagem {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  color: var(--cor-texto-apagado);
  margin-left: var(--sp-05);
}

/* ==========================================================================
   8. Botao primario e secundario
   ========================================================================== */

.botao {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  height: 40px;
  padding: 0 var(--sp-2);
  border: 1px solid transparent;
  /* botao e cartao/modal: 16px medido no AgencyFlow, --raio-md */
  border-radius: var(--raio-md);
  font-size: var(--fs-3);
  font-weight: var(--fw-forte);
  white-space: nowrap;
  cursor: pointer;
  isolation: isolate;
  transition: transform var(--duracao-rapida) var(--easing-saida),
              box-shadow var(--duracao-rapida) var(--easing-saida),
              background var(--duracao-rapida) var(--easing-saida),
              border-color var(--duracao-rapida) var(--easing-saida),
              opacity var(--duracao-rapida) var(--easing-padrao);
}

/* Um botao so afunda se ele estiver levantado. O deslocamento e de 1px:
   o suficiente pra maozinha sentir, pouco o bastante pra nao empurrar o
   layout em volta. */
.botao:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(1px);
}

.botao:disabled,
.botao[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ---- primario: a acao que a tela quer que voce faca ----
   O degrade e a luz caindo de cima, nao decoracao: 3 paradas dentro da
   mesma familia do laranja da marca, variacao de ~10%. O brilho interno
   na aresta de cima e o que faz a peca parecer solida em vez de pintada.
   A sombra e da propria cor do botao, nunca cinza -- sombra cinza sobre
   fundo escuro some, e sombra colorida devolve o material. */
.botao--primario {
  background: var(--grad-acento);
  color: var(--cor-fundo);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .30),
    inset 0 -1px 0 rgba(16, 11, 24, .18),
    0 1px 2px rgba(16, 11, 24, .45),
    0 6px 16px -6px rgba(255, 124, 3, .55);
}

.botao--primario:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--grad-acento-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -1px 0 rgba(16, 11, 24, .18),
    0 2px 4px rgba(16, 11, 24, .45),
    0 10px 24px -8px rgba(255, 124, 3, .68);
  transform: translateY(-1px);
  transition-timing-function: var(--easing-entrada);
}

.botao--primario:active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--grad-acento-ativo);
  box-shadow:
    inset 0 2px 4px rgba(16, 11, 24, .32),
    0 1px 1px rgba(16, 11, 24, .4);
  transition-timing-function: var(--easing-saida);
}

/* ---- secundario: presente, sem competir ----
   Mesma gramatica de material, uma oitava abaixo: degrade quase imperceptivel
   sobre a superficie, o mesmo brilho de aresta, sombra curta. */
.botao--secundario {
  background:
    linear-gradient(180deg, rgba(245, 243, 239, .085) 0%, rgba(245, 243, 239, .042) 100%);
  color: var(--cor-texto);
  border-color: var(--cor-borda-forte);
  box-shadow:
    inset 0 1px 0 rgba(245, 243, 239, .10),
    0 1px 2px rgba(16, 11, 24, .35);
}

.botao--secundario:hover:not(:disabled):not([aria-disabled="true"]) {
  background:
    linear-gradient(180deg, rgba(245, 243, 239, .14) 0%, rgba(245, 243, 239, .075) 100%);
  border-color: var(--cor-texto-secundario);
  box-shadow:
    inset 0 1px 0 rgba(245, 243, 239, .16),
    0 3px 10px -3px rgba(16, 11, 24, .55);
  transform: translateY(-1px);
}

.botao--secundario:active:not(:disabled):not([aria-disabled="true"]) {
  background: rgba(245, 243, 239, .05);
  box-shadow: inset 0 2px 4px rgba(16, 11, 24, .3);
}

.botao--fantasma:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--cor-superficie-clara);
  color: var(--cor-texto);
}

/* botao--sm fica no bucket "elemento pequeno" (--raio-sm, 12px), nao no de
   botao padrao (16px): em 32px de altura o raio-md deixaria a ponta quase
   em pilula, e essa variante compacta e sempre companheira de um controle
   pequeno (campo, chip), nao a acao principal da tela. */
.botao--sm {
  height: 32px;
  padding: 0 12px;
  font-size: var(--fs-2);
  border-radius: var(--raio-sm);
}

/* ==========================================================================
   9. Campo de texto
   ========================================================================== */

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-05);
}

.campo__rotulo {
  font-size: var(--fs-1);
  font-weight: var(--fw-media);
  color: var(--cor-texto-secundario);
}

.campo__input {
  height: 40px;
  padding: 0 var(--sp-2);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  color: var(--cor-texto);
  transition: border-color var(--duracao-rapida) var(--easing-padrao);
}

.campo__input::placeholder {
  color: var(--cor-texto-apagado);
}

.campo__input:focus {
  outline: none;
  border-color: var(--cor-acento);
}

textarea.campo__input {
  height: auto;
  min-height: 88px;
  padding: var(--sp-1) var(--sp-2);
  line-height: var(--lh-texto);
  resize: vertical;
}

/* ==========================================================================
   10. Linha de criacao rapida - uma linha, Enter cria
   ========================================================================== */

.criacao-rapida {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  background: transparent;
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio-md);
  transition: border-color var(--duracao-rapida) var(--easing-padrao),
              background var(--duracao-rapida) var(--easing-padrao);
}

.criacao-rapida:focus-within {
  border-color: var(--cor-acento);
  border-style: solid;
  background: var(--cor-superficie);
}

.criacao-rapida__icone {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--cor-texto-apagado);
}

.criacao-rapida__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 24px;
  background: none;
  border: 0;
  color: var(--cor-texto);
  font-size: var(--fs-3);
}

.criacao-rapida__input::placeholder {
  color: var(--cor-texto-apagado);
}

.criacao-rapida__input:focus {
  outline: none;
}

.criacao-rapida__dica {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  color: var(--cor-texto-apagado);
  padding: 2px 6px;
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
}

@keyframes realce-criacao {
  0% { background: var(--cor-acento-fraco); }
  100% { background: var(--cor-superficie); }
}

@media (prefers-reduced-motion: reduce) {
  .linha-tarefa--recem-criada {
    animation: none;
  }
}

/* ==========================================================================
   12. Quadro (Kanban) - colunas por status, cartao arrastavel
   O quadro e a segunda leitura da mesma tarefa: o Meu Dia ordena por
   QUANDO, o quadro agrupa por ESTADO. Nenhum dado novo, so outra pergunta.

   Regra de cor mantida: nenhuma coluna tem cor propria de sinal (nada de
   verde "pronto" ou vermelho "parado"). O estado se le pelo lugar da
   coluna e pelo rotulo, nunca por uma segunda cor. So a coluna com o
   cartao sendo arrastado por cima recebe o acento, e e um estado
   momentaneo, nao uma categoria.
   ========================================================================== */

.quadro {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: var(--sp-2);
  align-items: start;
  overflow-x: auto;
  padding-bottom: var(--sp-2);
}

/* A coluna e a raia (lane), o cartao e o objeto dentro dela - por isso a
   coluna recua pro tom do FUNDO da pagina (nao da superficie) e o cartao
   e quem usa --cor-superficie mais abaixo. Antes do redesenho de 24/08 era
   o contrario (coluna clara, cartao == --cor-fundo, ou seja o mesmo tom da
   pagina): o cartao literalmente sumia dentro da coluna, o pior caso do
   "cartao afunda" que motivou toda a rodada. */
.quadro__coluna {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-height: 120px;
  padding: var(--sp-1);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  transition: border-color var(--duracao-rapida) var(--easing-padrao),
              background var(--duracao-rapida) var(--easing-padrao);
}

/* alvo de soltura: o unico momento em que uma coluna ganha o acento */
.quadro__coluna--alvo {
  border-color: var(--cor-acento);
  background: var(--grad-acento-fraco);
}

.quadro__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1);
  padding: var(--sp-05) var(--sp-1);
}

.quadro__titulo {
  font-size: var(--fs-1);
  font-weight: var(--fw-forte);
  color: var(--cor-texto-secundario);
}

.quadro__contagem {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  color: var(--cor-texto-apagado);
}

.quadro__vazio {
  padding: var(--sp-2) var(--sp-1);
  text-align: center;
  font-size: var(--fs-2);
  color: var(--cor-texto-apagado);
}

/* ---------- Cartao ---------- */

.cartao {
  display: flex;
  flex-direction: column;
  gap: var(--sp-05);
  padding: var(--sp-1) var(--sp-2);
  /* levanta sobre a coluna (--cor-fundo, mais escura) - ver comentario
     acima de .quadro__coluna. Raio 16 (--raio-md): e um cartao, mesma
     gramatica do resto do sistema. */
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-left: 2px solid var(--cor-borda);
  border-radius: var(--raio-md);
  transition: border-color var(--duracao-rapida) var(--easing-saida),
              background var(--duracao-rapida) var(--easing-saida),
              transform var(--duracao-rapida) var(--easing-saida),
              box-shadow var(--duracao-rapida) var(--easing-saida),
              opacity var(--duracao-media) var(--easing-padrao);
}

/* Segundo componente mais visto (todo quadro e feito de cartao). Levanta
   1px com sheen de --grad-superficie por cima - o mesmo material que o
   botao primario ja usa, so muito mais discreto porque aqui nao e a
   acao principal da tela. */
.cartao:hover {
  border-color: var(--cor-borda-forte);
  background: var(--grad-superficie), var(--cor-superficie);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .35);
  transition-timing-function: var(--easing-entrada);
}

.cartao--concluido:hover,
.cartao--arrastando:hover {
  transform: none;
  box-shadow: none;
}

/* atraso: mesma gramatica da linha do Meu Dia, borda esquerda no acento */
.cartao--atrasado {
  border-left-color: var(--cor-acento);
}

.cartao--concluido {
  opacity: .55;
}

.cartao--concluido .cartao__titulo {
  text-decoration: line-through;
  text-decoration-color: var(--cor-texto-apagado);
  text-decoration-thickness: 1px;
}

/* cartao sendo arrastado: fantasma, pra origem nao parecer que sumiu */
.cartao--arrastando {
  opacity: .4;
}

.cartao__cliente {
  font-size: var(--fs-1);
  font-weight: var(--fw-media);
  color: var(--cor-texto-apagado);
}

a.cartao__titulo {
  font-size: var(--fs-3);
  line-height: var(--lh-texto);
  color: var(--cor-texto);
  text-decoration: none;
}

a.cartao__titulo:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cartao__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1);
  margin-top: var(--sp-05);
}

.cartao__quando {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto-secundario);
}

.cartao__quando--atrasado {
  color: var(--cor-acento);
}

/* Seletor de coluna: o caminho que funciona sem JS, no teclado e no
   toque. O arrastar e enfeite por cima disso, nunca o unico caminho. */
.cartao__mover {
  display: flex;
  align-items: center;
  gap: var(--sp-05);
  margin-left: auto;
}

.cartao__mover-campo {
  height: 26px;
  padding: 0 var(--sp-05);
  background: var(--cor-superficie-clara);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  color: var(--cor-texto-secundario);
  font-family: inherit;
  font-size: var(--fs-1);
}

.cartao__mover-campo:hover {
  color: var(--cor-texto);
  border-color: var(--cor-borda-forte);
}

/* com JS o select ja envia sozinho no change, entao o botao sai de cena.
   A classe 'js' entra no <html> pelo ui.js: sem JS ela nunca existe e o
   botao continua ali, que e o comportamento correto. */
.js .cartao__mover-botao {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .cartao,
  .quadro__coluna {
    transition: none;
  }
}

/* ==========================================================================
   14. Quadro dos tres lado a lado - Plano v2, Fatia 1.1
   O quadro de uma pessoa (bloco 12) nao muda. Isto e so o agrupador que
   empilha ate tres desses quadros, um por pessoa, cada um com cabecalho
   de identificacao. So socio ve mais de uma pessoa - quem faz esse
   corte e a query (listarQuadro() em laco), nunca esta folha de estilo.

   Decisao de layout (documentada porque nao estava no pedido): as tres
   pessoas EMPILHAM (uma acima da outra), nao lado a lado em colunas.
   Motivo: cada quadro de pessoa ja tem 4 colunas de >=240px (bloco 12).
   Tres pessoas lado a lado seriam 12 colunas simultaneas - em 1440px
   isso da ~110px por coluna, abaixo do minimo que o proprio bloco 12
   define como legivel. Empilhado e o padrao de "swimlane por
   responsavel" que ferramenta de kanban com esse recurso costuma usar
   (ex.: agrupar por responsavel no Jira): cada pessoa fica com as
   quatro colunas inteiras, e "lado a lado" vira "uma sob a outra, sem
   troca de tela", que e o pedido real (ver as tres pessoas sem sair
   do quadro.php). Nome da classe ficou "quadro-multi" e nao
   "quadro-lado-a-lado" para nao prometer um layout que a legibilidade
   das colunas nao deixa entregar.

   A 375px (ver media query abaixo), nem empilhado cabe confortavel:
   3 pessoas x 4 colunas empilhadas = 12 blocos de rolagem vertical
   antes de ver a segunda pessoa. Por isso o celular usa o componente
   de aba que ja existe (bloco 7, .abas), sem JS novo: o
   document.querySelectorAll('[role="tablist"]') do ui.js ja liga
   qualquer .abas da pagina. Contrato de markup:

     <div class="quadro-multi">
       <div role="tablist" class="abas quadro-multi__abas" aria-label="Pessoa">
         <button role="tab" aria-selected="true"  aria-controls="pessoa-1" id="tab-1">
           Joao <span class="aba__contagem">7</span>
         </button>
         <button role="tab" aria-selected="false" aria-controls="pessoa-2" id="tab-2">
           Matheus <span class="aba__contagem">4</span>
         </button>
       </div>

       <section class="quadro-multi__pessoa" id="pessoa-1" role="tabpanel">
         <header class="quadro-multi__cabecalho">
           <span class="chip-pessoa chip-pessoa--sm">JL</span>
           <span class="quadro-multi__nome">Joao Lamim</span>
           <span class="quadro-multi__contagem num">7</span>
         </header>
         <div class="quadro" data-quadro data-pessoa="1"> ...4 colunas... </div>
       </section>

       <section class="quadro-multi__pessoa" id="pessoa-2" role="tabpanel" hidden>
         ...
       </section>
     </div>

   Regra do atributo `hidden` nos paineis: SO faz sentido pro celular.
   No desktop a media query abaixo forca `display` de volta, ignorando
   o atributo - por isso o primeiro painel pode nascer visivel e os
   outros com `hidden` direto no HTML (o estado inicial sem depender de
   JS rodar primeiro), sem que isso afete quem ve a tela em 1440px.
   Sem JS: os tres paineis renderizam abertos (o `hidden` so existe se
   o servidor mandar), entao o fallback sem script continua mostrando
   tudo - so fica mais comprido, nunca escondido.
   ========================================================================== */

.quadro-multi {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.quadro-multi__pessoa {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.quadro-multi__cabecalho {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--cor-borda);
}

.quadro-multi__nome {
  font-size: var(--fs-4);
  font-weight: var(--fw-forte);
  color: var(--cor-texto);
}

.quadro-multi__contagem {
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  color: var(--cor-texto-apagado);
  margin-left: auto;
}

/* seletor de pessoa por aba: existe so pra estreitar pro celular.
   Escondido por padrao; a media query de 720px liga ele e desliga o
   empilhamento simultaneo. */
.quadro-multi__abas {
  display: none;
}

@media (max-width: 720px) {
  .quadro-multi__abas {
    display: flex;
    margin-bottom: var(--sp-1);
  }

  .quadro-multi__pessoa[hidden] {
    display: none;
  }
}

/* acima de 720px as tres pessoas ficam sempre visiveis, mesmo que o
   painel tenha nascido com `hidden` no HTML pro celular. */
@media (min-width: 721px) {
  .quadro-multi__pessoa[hidden] {
    display: flex;
  }
}

/* input[type=time] herda .campo__input (altura, borda, fundo) do bloco
   9 sem precisar de classe extra. So o icone do relogio nativo, que o
   navegador desenha preto, precisa de ajuste pra nao sumir no fundo
   #100B18. */
.campo__input[type="time"] {
  font-variant-numeric: tabular-nums;
}

.campo__input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: .6;
  cursor: pointer;
  transition: opacity var(--duracao-rapida) var(--easing-padrao);
}

.campo__input[type="time"]:hover::-webkit-calendar-picker-indicator,
.campo__input[type="time"]:focus::-webkit-calendar-picker-indicator {
  opacity: 1;
}

/* ==========================================================================
   17. Etiqueta (Plano v2, Fatia 1.4)
   Texto com borda, nunca bolinha nem fundo colorido (regra explicita
   do brief: "legivel e distinguir-se sem depender de matiz"). Por isso
   toda etiqueta usa o MESMO par de cores, seja qual for o nome - quem
   diferencia uma etiqueta da outra e a palavra escrita nela, nunca uma
   cor propria. Isso tambem e o que mantem a paleta do projeto em cinco
   cores mesmo com etiqueta livre (o usuario pode criar quantas
   etiquetas quiser, nenhuma delas abre uma cor nova).
   ========================================================================== */

.etiqueta {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--sp-1);
  background: transparent;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-sm);
  font-size: var(--fs-1);
  font-weight: var(--fw-forte);
  color: var(--cor-texto-secundario);
  white-space: nowrap;
}

/* Etiqueta: o "x" de remover. A etiqueta em si e texto com borda (nunca
   bolinha colorida), entao o remover acompanha o mesmo peso. */
.etiqueta__form-remover {
  display: contents;
}

.etiqueta__remover {
  margin-left: var(--sp-05);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cor-texto-apagado);
  font-size: var(--fs-1);
  line-height: 1;
  cursor: pointer;
  transition: color var(--duracao-rapida) var(--easing-padrao);
}

.etiqueta__remover:hover {
  color: var(--cor-texto);
}

/* ------------------------------------------------------------------
   Campos de formulario: select, input e textarea com a mesma pele

   O <select> nativo entrega a aparencia do sistema operacional, que nao
   pertence a design system nenhum. No quadro isso ficava visivel: cada
   cartao carregava uma caixa cinza do macOS no meio da identidade da
   marca. A seta e desenhada, nao e glifo unicode.
   ------------------------------------------------------------------ */

select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="number"],
input[type="search"],
textarea {
  background: var(--cor-superficie-clara);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  color: var(--cor-texto);
  padding: 6px var(--sp-1);
  font-size: var(--fs-2);
  line-height: 1.4;
  transition: border-color var(--duracao-rapida) var(--easing-padrao),
              background var(--duracao-rapida) var(--easing-padrao);
}

select:hover,
input:hover:not([disabled]),
textarea:hover:not([disabled]) {
  border-color: var(--cor-borda-forte);
}

/* Foco: nenhum destes tinha reacao propria antes (so .campo__input tinha).
   Confirmacao de "gravou o foco aqui" usando a mesma transicao rapida que
   ja existe na regra acima, so trocando a cor pro acento. */
select:focus,
input:focus:not([disabled]):not([type="checkbox"]):not([type="radio"]),
textarea:focus:not([disabled]) {
  outline: none;
  border-color: var(--cor-acento);
}

select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 26px;
  cursor: pointer;
  /* seta desenhada em SVG inline, na cor do texto secundario */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23A79FB5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px 12px;
}

select:disabled,
input:disabled,
textarea:disabled {
  opacity: .5;
  cursor: default;
}

/* As opcoes do menu aberto sao desenhadas pelo sistema operacional, e so
   respeitam cor quando a pagina declara o esquema. base.css ja declara
   color-scheme: dark no :root, entao o menu abre escuro. */
option {
  background: var(--cor-superficie-clara);
  color: var(--cor-texto);
}

::placeholder {
  color: var(--cor-texto-apagado);
  opacity: 1;
}

/* ==========================================================================
   18. Abertura de <details> - o "que se edita fica atras de um clique"
   Vale pro rail__grupo (shell.css) E pra todo <details class="editor">,
   "linha-*__form", "*__detalhe" espalhado pelas telas de cliente/tarefa/
   financeiro. Em vez de duplicar isto arquivo por tela, um mecanismo so:
   ui.js escuta o evento nativo 'toggle' de QUALQUER <details> da pagina e,
   so quando ele abriu por interacao (nunca no carregamento da pagina - o listener so
   dispara em resposta a um toggle real, o estado inicial do HTML nunca
   passa por 'toggle'), poe esta classe por um instante. Handshake:
   JS decide QUANDO anima (interacao, nunca carregamento), CSS decide COMO.
   ========================================================================== */

.abrindo > :not(summary) {
  animation: detalhe-abrir var(--duracao-media) var(--easing-entrada);
}

@keyframes detalhe-abrir {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .abrindo > :not(summary) {
    animation: none;
  }
}