/* ===========================================================
   anotafácil — identidade visual. 2026-09-05.

   Tirada da referência que o dono mandou: fundo azul-quase-preto, azul
   vivo como único acento, cantos médios (não pílula), rótulos em caixa
   alta espaçada, e títulos em peso pesado.

   O azul volta a ser a cor do produto — é a cor de selo e verificação, e
   separa limpo das paletas quentes (laranja e vermelho) que dominam o
   setor de comida. O anotafácil senta DENTRO do painel de outra marca;
   ele precisa parecer procedência, não competir.
   =========================================================== */

:root{
  color-scheme: dark;

  /* ---------- profundidade ---------- */
  --fundo:      #080B14;   /* a página */
  --superficie: #10141F;   /* campo, botão secundário */
  --elevado:    #161B29;   /* degrau acima da superfície */
  --linha:      rgba(255,255,255,.08);
  --linha-2:    rgba(255,255,255,.14);

  /* ---------- o acento, único ---------- */
  --azul:       #1D63F0;
  --azul-claro: #3B7BFF;   /* hover do botão */
  --azul-link:  #4D8BFF;   /* texto que é link */
  --azul-fraco: rgba(29,99,240,.14);

  /* O painel lateral do desktop. Dois tons para o gradiente não ficar
     chapado numa área daquele tamanho. */
  --painel-a:   #1B62F5;
  --painel-b:   #0E47C8;

  /* ---------- tinta ---------- */
  --branco:  #FFFFFF;
  --cinza:   #8B94A8;   /* texto de apoio */
  --cinza-2: #5A6377;   /* rótulo, texto legal */

  --alarme:  #FF6B6B;

  /* ---------- as cores de STATUS ----------
     São o único lugar onde outra cor além do azul aparece, e existem
     para comunicar estado de pedido — nunca para decorar.

     A rampa é semântica, não decorativa: amarelo espera, azul anda,
     verde terminou o preparo, roxo saiu, cinza acabou, vermelho morreu.
     As duas referências que o dono mandou discordavam entre si (numa
     "em entrega" era amarelo, na outra roxo); esta é a versão única. */
  --st-aguardando: #F5B93C;
  --st-preparo:    #1D63F0;
  --st-pronto:     #22C55E;
  --st-entrega:    #A78BFA;
  --st-entregue:   #5A6377;
  --st-cancelado:  #FF6B6B;

  --verde:   #22C55E;   /* variação positiva: "+12% em relação a ontem" */

  /* ---------- as quebras ----------
     Só para consulta: media query não lê variável de CSS. Se mudar aqui,
     mude também nos @media de painel.css.
       celular  < 768        tablet  768–1023        desktop  >= 1024  */
  --q-tablet:  768px;
  --q-desktop: 1024px;

  /* ---------- forma ----------
     Cantos médios. A referência não usa pílula em lugar nenhum: o botão
     principal tem o mesmo raio dos campos, e é isso que dá a cara de
     ferramenta em vez de aplicativo de consumo. */
  --r-campo:  10px;
  --r-bloco:  14px;
  --r-cartao: 18px;

  --sans:    'Inter', system-ui, -apple-system, sans-serif;
  --display: 'Archivo', 'Inter', system-ui, sans-serif;

  --toque: 44px;
}

*{ box-sizing:border-box; }
html{ height:100%; }

body{
  margin:0; min-height:100dvh;
  background:var(--fundo); color:var(--branco);
  font-family:var(--sans); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

[hidden]{ display:none !important; }

/* ===========================================================
   TIPOGRAFIA
   =========================================================== */
h1, h2{
  font-family:var(--display); font-weight:700;
  letter-spacing:-.02em; margin:0;
}

/* Rótulo de campo e de seção: caixa alta, pequeno, espaçado. É o que
   dá o ar técnico da referência sem precisar de mais nenhuma cor. */
.rotulo{
  display:block;
  font-size:11px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--cinza);
  margin-bottom:8px;
}

.apoio{ color:var(--cinza); font-size:14px; }
.legal{ color:var(--cinza-2); font-size:11.5px; line-height:1.6; }

a{ color:var(--azul-link); text-decoration:none; font-weight:600; }
a:hover{ text-decoration:underline; }
a:focus-visible{ outline:2px solid var(--azul-link); outline-offset:2px; border-radius:3px; }

/* ===========================================================
   CAMPOS
   =========================================================== */
.campo{ margin-bottom:18px; }

.campo-topo{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px;
}
.campo-topo .rotulo{ margin-bottom:8px; }
.campo-topo a{ font-size:12.5px; }

.caixa{ position:relative; }

.campo input{
  width:100%; height:52px; padding:0 16px;
  background:var(--superficie); color:var(--branco);
  border:1px solid var(--linha); border-radius:var(--r-campo);
  font-family:var(--sans); font-size:15px;
  transition:border-color .16s, box-shadow .16s;
  -webkit-appearance:none; appearance:none;
}
.campo input::placeholder{ color:var(--cinza-2); }
.campo input:focus{
  outline:none; border-color:var(--azul);
  box-shadow:0 0 0 3px var(--azul-fraco);
}
.campo input[aria-invalid="true"]{ border-color:var(--alarme); }
.campo input:disabled{ opacity:.55; }

/* o olho de mostrar/ocultar senha, dentro do campo */
.olho{
  position:absolute; right:4px; top:4px;
  width:44px; height:44px; padding:0;
  display:grid; place-items:center;
  background:none; border:0; cursor:pointer;
  color:var(--cinza); border-radius:8px;
}
.olho:hover{ color:var(--branco); }
.olho:focus-visible{ outline:2px solid var(--azul); outline-offset:-2px; }
.olho svg{ width:20px; height:20px; }
#senha{ padding-right:52px; }

/* ===========================================================
   BOTÕES
   =========================================================== */
.botao{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:54px; padding:0 20px;
  border:0; border-radius:var(--r-campo);
  background:var(--azul); color:var(--branco);
  font-family:var(--sans); font-size:14px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background .16s, transform 90ms ease-out;
}
.botao:hover:not(:disabled){ background:var(--azul-claro); }
.botao:active:not(:disabled){ transform:scale(.99); }
.botao:focus-visible{ outline:2px solid var(--branco); outline-offset:3px; }
.botao:disabled{ opacity:.55; cursor:default; }

.botao-fora{
  display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:50px; padding:0 16px;
  background:var(--superficie); color:var(--branco);
  border:1px solid var(--linha); border-radius:var(--r-campo);
  font-family:var(--sans); font-size:14px; font-weight:600;
  cursor:pointer; transition:background .16s, border-color .16s;
}
.botao-fora:hover{ background:var(--elevado); border-color:var(--linha-2); }
.botao-fora:focus-visible{ outline:2px solid var(--azul); outline-offset:2px; }
.botao-fora svg, .botao-fora img{ width:18px; height:18px; }

/* ===========================================================
   O DIVISOR "ou continue com"
   =========================================================== */
.divisor{
  display:flex; align-items:center; gap:14px;
  margin:22px 0 16px;
  color:var(--cinza-2); font-size:12px;
}
.divisor::before, .divisor::after{
  content:''; flex:1; height:1px; background:var(--linha);
}

/* ===========================================================
   AVISO
   =========================================================== */
.aviso{
  display:none; margin:0 0 18px; padding:12px 15px;
  background:rgba(255,107,107,.1); border:1px solid rgba(255,107,107,.3);
  border-radius:var(--r-campo);
  color:#FFB4B4; font-size:13.5px; line-height:1.5;
}
.aviso.ver{ display:block; }

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; transition-duration:.001ms !important;
  }
}