/* =============================================================================
   AFsignage v2 — O QUE VALE PARA TODAS AS TELAS

   Cores, durações, a barra de rolagem, o botão, o campo e o aviso. Tudo que
   aparece em mais de uma tela mora aqui.

   POR QUE ISTO EXISTE: as variáveis de cor e de duração são a definição do
   sistema. Duplicadas em dois arquivos, um dia uma cor muda num e não no outro,
   e o sistema passa a ter dois tons de azul — que é exatamente a colcha de
   retalhos que o PADRAO_VISUAL.md existe para evitar.

   Segue o PADRAO_VISUAL.md, na raiz do projeto:
     · nada acende contorno — o que responde ao mouse CRESCE (seção 1)
     · botão cresce o FUNDO, nunca o texto (seção 2b)
     · a camada de vídeo é permanente, senão o texto salta 1px (seção 2b)
     · barra de rolagem é peça do sistema (seção 2f)
     · variável que não existe apaga a regra inteira (seção 2g)
     · quem pediu menos movimento recebe menos movimento (seção 6)
   ============================================================================= */

:root{
  /* ---------- Cor ---------- */
  --bg:#0d1117;      /* o fundo da página */
  --sup:#151b23;     /* a folha por cima do fundo */
  --sup2:#1c232e;    /* um degrau acima da folha */
  --bd:#28313d;      /* borda */
  --bd2:#39424f;     /* borda de destaque */
  --tx:#e6edf3;      /* texto */
  --tx2:#8b949e;     /* texto secundário */

  /* Cor tem significado — seção 9 do padrão visual.
     verde = está no ar · amarelo = atenção · vermelho = erro ou destruição
     sob o mouse · azul = ação principal e coisa do sistema. */
  --ac:#2f81f7;
  --ok:#3fb950;
  --al:#d29922;
  --er:#f85149;

  /* ---------- Movimento ---------- */
  --mov-rapido:.13s;   /* cor, borda — o que só muda de tom */
  --mov-medio:.2s;     /* troca de estado dentro de uma janela */
  --mov-lento:.26s;    /* troca de página ou de aba */

  /* O crescimento é o movimento mais demorado do sistema, por dois motivos: ele
     responde ao mouse (depressa demais nem é visto), e enquanto cresce o texto
     é uma imagem esticada — o instante em que o navegador o redesenha nítido é
     seco, e num movimento rápido salta aos olhos. A curva chega quase freando,
     deixando esse instante acontecer com o elemento já quase parado. */
  --mov-cresce:.46s;
  --mov-cresce-curva:cubic-bezier(.13,.86,.2,1);

  /* Sai depressa e chega devagar: o fim do movimento é o que o olho lê. */
  --mov-suave:cubic-bezier(.22,.72,.28,1);

  /* A piscada de resposta é o único movimento mais longo que o crescimento. Ela
     não acompanha o mouse: ela DIZ uma coisa, e uma vez só. */
  --mov-piscada:.92s;
}


/* =============================================================================
   A BARRA DE ROLAGEM

   NÃO USAR `scrollbar-color` NEM `scrollbar-width`. São o padrão novo e parecem
   a escolha certa, mas basta um dos dois estar presente para o Chrome desenhar
   a barra do jeito dele e ignorar tudo abaixo — inclusive a regra que tira as
   setinhas, que o padrão novo não sabe tirar.
   ============================================================================= */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
/* A borda transparente com `background-clip` afina o traço sem afinar a área de
   pegar: fica discreto de ver e continua fácil de acertar com o mouse. */
::-webkit-scrollbar-thumb{background:#4a5566;border-radius:7px;
  border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#5f6b7d;background-clip:padding-box}
::-webkit-scrollbar-button{display:none;width:0;height:0}


/* =============================================================================
   O CHÃO
   ============================================================================= */
*{margin:0;padding:0;box-sizing:border-box}

/* `clip`, nunca `hidden`: hidden cria contexto de rolagem e quebra o
   `position:sticky` do cabeçalho, que deixa de grudar no topo. */
html,body{overflow-x:clip}

body{background:var(--bg);color:var(--tx);
  font:14px/1.55 -apple-system,"Segoe UI",Roboto,Arial,sans-serif}
button{font-family:inherit}


/* =============================================================================
   CAMPOS
   ============================================================================= */
/* O rótulo é o da v1: miúdo, em maiúsculas e espaçado. É ele que separa o nome
   do campo do que está escrito dentro dele, sem precisar de linha nem de cor. */
label{display:block;font-size:11px;color:var(--tx2);margin:14px 0 5px;
  text-transform:uppercase;letter-spacing:.6px;font-weight:600}

input,select,textarea{width:100%;background:var(--bg);border:1px solid var(--bd);
  border-radius:9px;padding:11px 13px;color:var(--tx);
  font:14px inherit;font-family:inherit;
  transition:border-color var(--mov-rapido) var(--mov-suave)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ac)}
input::placeholder,textarea::placeholder{color:#5b6673}

/* Campo que o servidor recusou. A borda basta: uma frase por campo repetiria o
   que o aviso do topo já diz. */
input.errado,select.errado{border-color:var(--er)}

/* A setinha do input[type=number] não existe neste sistema: tem outro desenho
   em cada máquina, só aparece sob o mouse, e os dois alvos juntos são menores
   que um dedo. A regra é GERAL, e não presa a uma classe — assim campo
   numérico novo já nasce sem ela. */
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}


/* =============================================================================
   O BOTÃO

   O fundo mora no ::after e é ELE que cresce; o texto não se mexe um pixel,
   então não tem como tremer. Seção 2b do padrão visual.

   O rótulo mora sempre dentro de um <span>: a barra de espera é um ::before
   que passaria por cima do texto.
   ============================================================================= */
.btn{position:relative;isolation:isolate;
  background:transparent;border:0;border-radius:10px;
  padding:12px 16px;color:#fff;font-size:14px;font-weight:600;cursor:pointer;
  /* Sem isto o rótulo quebra no meio quando o botão divide a linha com outro —
     "Cancelar" virava "Cancel/ar". */
  white-space:nowrap;
  will-change:transform;backface-visibility:hidden;
  --fundo:var(--ac);--borda:transparent}

.btn::after{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;
  background:var(--fundo);
  /* Borda por sombra: `border` aumentaria a caixa e mexeria no alinhamento. */
  box-shadow:inset 0 0 0 1px var(--borda);
  transition:transform var(--mov-cresce) var(--mov-cresce-curva),
             background var(--mov-rapido) var(--mov-suave)}

.btn:hover:not(:disabled)::after{transform:scale(1.055)}
.btn:active:not(:disabled)::after{transform:scale(.96);transition:transform .08s}
.btn:disabled{cursor:default;opacity:.55}
.btn:focus-visible{outline:2px solid var(--ac);outline-offset:3px}

.btn.full{width:100%}
.btn.sm{padding:8px 13px;font-size:12.5px;border-radius:8px}

/* Só contorno: para a ação que não é a principal da tela.

   CHAMAVA-SE `.vazio` e colidiu com o `.vazio` do painel, que marca uma lista
   sem itens. As duas regras têm a mesma especificidade, a do painel vem depois,
   e o botão "Cancelar" acabou herdando `padding:34px 0` e `font-size:13px` —
   virou um retângulo alto e estreito com o texto transbordando pelas laterais.

   Nome de classe genérico é assim: some por baixo de outro sem avisar, e o
   navegador não reclama. Classe de componente vale mais quando descreve a
   aparência dele — "contorno" — do que quando descreve um estado que qualquer
   outra coisa também pode ter. */
.btn.contorno{color:var(--tx);--fundo:transparent;--borda:var(--bd2)}
.btn.contorno:hover:not(:disabled){color:var(--tx)}

/* Ação de saída fica DISCRETA até a mão chegar nela — seção 9. Vermelho o tempo
   todo puxa o olho para a coisa errada: o que importa num card é o conteúdo,
   não o botão de remover. */
.btn.perigo{color:var(--tx2);--fundo:transparent;--borda:var(--bd)}
.btn.perigo:hover:not(:disabled){color:var(--er);--borda:var(--er)}

/* A ESPERA É O BOTÃO INTEIRO

   Era uma barra de 2 px encostada na borda de baixo. O André olhou e viu
   coisa solta EMBAIXO do botão, não o botão trabalhando — e pediu, em
   30/08/2026, que o carregamento acontecesse DENTRO dele.

   Então o mesmo movimento, na caixa toda: o preenchimento varre da esquerda
   para a direita e escorre de volta, atrás do rótulo. Nada mais mudou — nem o
   ritmo (1,1 s), nem a curva, nem os três verbos.

   `z-index:-1` põe a varredura ATRÁS do texto e À FRENTE do fundo, que desceu
   para -2. Os dois vivem dentro do `isolation:isolate` do botão, então nenhum
   deles escapa para trás da página. */
.btn.esperando span{opacity:.35}
.btn.esperando::before{content:"";position:absolute;inset:0;z-index:-1;
  border-radius:inherit;background:rgba(255,255,255,.22);
  animation:esperando 1.1s var(--mov-suave) infinite}
@keyframes esperando{
  0%  {transform:scaleX(0);transform-origin:left}
  50% {transform:scaleX(1);transform-origin:left}
  51% {transform:scaleX(1);transform-origin:right}
  100%{transform:scaleX(0);transform-origin:right}
}

/* -----------------------------------------------------------------------------
   A PISCADA DE RESPOSTA — seção 9 do padrão visual

   Botão que terminou uma ação responde piscando: verde deu certo, vermelho não
   deu. Pisca a camada de FUNDO, nunca o botão inteiro — o texto tremeria.

   Uma piscada só. Duas seguidas viram tremelique e o olho não lê nenhuma. O
   trecho que cresce dura exatamente `--mov-cresce`, daí o pico ficar em 40% de
   0,92s: com a curva do sistema, um trecho mais curto faz o botão pipocar em
   vez de crescer.
   -------------------------------------------------------------------------- */
.btn.piscou-ok::after   {animation:piscadaOk  var(--mov-piscada) var(--mov-cresce-curva)}
.btn.piscou-mal::after  {animation:piscadaMal var(--mov-piscada) var(--mov-cresce-curva)}

@keyframes piscadaOk{
  0%  {transform:scale(1);     background:var(--fundo)}
  40% {transform:scale(1.055); background:var(--ok)}
  75% {transform:scale(1.055); background:var(--ok)}
  100%{transform:scale(1);     background:var(--fundo)}
}
@keyframes piscadaMal{
  0%  {transform:scale(1);     background:var(--fundo)}
  40% {transform:scale(1.055); background:var(--er)}
  75% {transform:scale(1.055); background:var(--er)}
  100%{transform:scale(1);     background:var(--fundo)}
}


/* =============================================================================
   AVISOS
   ============================================================================= */
.aviso{display:none;border-radius:9px;padding:11px 13px;font-size:13px;
  line-height:1.5}
.aviso.on{display:block}
.aviso.ruim{background:rgba(248,81,73,.12);border:1px solid rgba(248,81,73,.35);color:#ffb3ae}
.aviso.bom {background:rgba(63,185,80,.12);border:1px solid rgba(63,185,80,.35);color:#7ee787}
.aviso.atencao{background:rgba(210,153,34,.1);border:1px solid rgba(210,153,34,.32);color:#e3b341}


/* =============================================================================
   QUEM NÃO QUER MOVIMENTO — seção 6

   Há quem sinta enjoo com movimento na tela, e o sistema operacional tem uma
   opção para avisar isso.

   COM UMA EXCEÇÃO, que não está aqui: onde o `transform` é o mecanismo e não o
   enfeite, ele não entra na regra — desliga-se a decoração, nunca a função.
   ============================================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  /* Aqui o sinal não é enfeite, é a resposta: some o pulso e FICA a cor. */
  .btn.piscou-ok::after {background:var(--ok)}
  .btn.piscou-mal::after{background:var(--er)}
}

/* O seletor de arquivo do navegador é feio e não se desenha. Fica escondido, e
   quem o abre é um botão do sistema. */
.escondido{display:none}