/**
 * base.css — o vocabulário visual do produto inteiro.
 *
 * Antes deste arquivo, cada tela declarava o próprio `:root` com as mesmas
 * catorze variáveis. Dez cópias da mesma ideia derivaram como toda cópia
 * deriva: `--suave` tinha dois valores, `--fundo` tinha três, e o mesmo estado
 * "pendente" se chamava `--alerta` numa tela e `--andamento` na vizinha. Aqui
 * cada valor existe uma vez.
 *
 * Três decisões atravessam o arquivo:
 *
 * 1) O VOCABULÁRIO CANÔNICO É O DO CMV (--carvao, --papel, --fraco, --linha),
 *    porque foi ele que nasceu com modo escuro e com a cor de status separada
 *    da cor da marca. Os nomes antigos das telas de checklist (--texto,
 *    --suave, --borda…) continuam existindo como APELIDOS logo abaixo: eles
 *    apontam para o mesmo valor, então a tela antiga não precisou ser
 *    reescrita para parar de derivar. Código novo usa os canônicos.
 *
 * 2) EXISTE UM TOM PARA ESCREVER SOBRE PREENCHIMENTO SATURADO (--sobre-cor).
 *    Botão índigo e selo vermelho com `color:#fff` estavam escritos à mão em
 *    nove telas, e no escuro isso vira branco sobre lilás claro ou sobre
 *    vermelho claro — cerca de 2:1, ilegível. O token vira tinta escura
 *    quando o tema vira, e vale para a marca e para os status.
 *
 * 3) O PRIMITIVO MORA AQUI, O TAMANHO MORA NA TELA. `.btn` define forma, cor,
 *    foco e estado desabilitado; a tela que precisa de um botão largo de
 *    dedo (o checklist no salão) ou miúdo (a barra de filtro do painel)
 *    sobrescreve só padding e font-size. Sem isso as duas definições brigam e
 *    ganha a que estiver por último, que é acidente e não decisão.
 */

:root {
  /* Superfícies e tinta */
  --carvao:      #1b1d24;   /* texto principal */
  --tinta:       #24262f;   /* texto secundário com peso */
  --papel:       #ffffff;   /* superfície de card, cabeçalho, campo */
  --aco:         #f2f3f7;   /* fundo da página */
  --linha:       #e1e3eb;   /* borda padrão */
  --linha-forte: #c8cbd6;   /* borda de campo, divisor de total */
  --fraco:       #6b7183;   /* texto apagado, label, legenda */

  /* Marca. `--marca` é reescrita em tempo de execução por marca.js quando o
     restaurante tem cor própria, e é por isso que ela não tem valor derivado
     escrito aqui: os tons vêm de lá juntos. */
  --marca:        #4f46e5;
  --marca-escura: #4338ca;
  --marca-fundo:  #eeecfd;
  --sobre-cor:    #ffffff;   /* tinta sobre preenchimento saturado */

  /* Status. Escala separada da marca de propósito: índigo diz "clicável",
     verde diz "dinheiro que entrou". Misturar as duas mente para o usuário. */
  --ok:   #0d7a63;  --ok-fundo:   #e6f4f0;  --ok-linha:   #9dd3c6;
  --aten: #a86a00;  --aten-fundo: #fbf1de;  --aten-linha: #e8ca8a;
  --ruim: #b3261e;  --ruim-fundo: #fbeceb;  --ruim-linha: #eab5b1;

  /* A faixa que NÃO vira com o tema. O topo do admin e o rodapé da landing são
     escuros por decisão de composição — são moldura, não conteúdo. Se virassem
     junto com o resto, no escuro o topo da página ficaria mais claro que o
     miolo e a moldura passaria a chamar mais atenção que o que ela emoldura. */
  --faixa:          #1b1d24;
  --sobre-faixa:    #cbd5e1;
  --marca-na-faixa: #a5b4fc;

  /* Véu de modal e sombra de elevação. O cheio é do visor de foto, que é
     escuro nos dois temas: uma foto se olha contra o preto. */
  --veu-cheio: rgba(11, 12, 16, .92);

  /* Véu de modal e sombra de elevação */
  --veu:    rgba(15, 23, 42, .45);
  --sombra: 0 1px 2px rgba(27, 29, 36, .05), 0 6px 20px -12px rgba(27, 29, 36, .18);
  --sombra-alta: 0 20px 60px -12px rgba(27, 29, 36, .28);

  /* Tipografia. Uma face de corpo e uma de display, com papéis fixos: título
     de tela e número de destaque usam a expandida, todo o resto usa a normal.
     É o que separa "valor importante" de "célula de planilha". */
  --fonte: Archivo, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* A largura expandida NÃO é uma família separada: "Archivo Expanded" devolve
     404 no Google Fonts, e o CMV vinha pedindo esse nome desde sempre — a face
     de display do sistema nunca chegou a carregar, caía em Archivo normal sem
     ninguém notar. Archivo é variável no eixo `wdth`, então a expandida vem
     pela mesma família com `font-stretch`, e é isso que --alarga faz. */
  --alarga: 125%;

  --raio:   10px;   /* card, botão, campo */
  --raio-p: 7px;    /* célula, selo quadrado */
  --raio-g: 14px;   /* card de destaque, caixa de login */

  /* --------------------------------------------------------------------
     Apelidos do vocabulário antigo das telas de checklist. Mesmo valor,
     outro nome. Existem para a migração não precisar tocar em 390
     referências de uma vez; ao editar uma dessas telas, prefira o nome
     canônico de cima.
     -------------------------------------------------------------------- */
  --texto:       var(--carvao);
  --suave:       var(--fraco);
  --borda:       var(--linha);
  --marca-clara: var(--marca-fundo);

  --alerta:       var(--aten);
  --alerta-fundo: var(--aten-fundo);
  --alerta-borda: var(--aten-linha);
  --andamento:       var(--aten);
  --andamento-fundo: var(--aten-fundo);
  --andamento-borda: var(--aten-linha);

  --ok-borda:   var(--ok-linha);
  --erro:       var(--ruim);
  --erro-fundo: var(--ruim-fundo);
  --erro-borda: var(--ruim-linha);
}

/* O escuro segue a preferência do sistema. Não há botão de tema: um produto
   que roda no salão e no escritório não ganha nada com mais um controle, e a
   preferência do sistema operacional já é a resposta que a pessoa deu uma vez.
   `[data-theme]` existe para forçar um dos dois em teste e em captura. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --carvao: #eceef4; --tinta: #d7dae4; --papel: #1d1f27; --aco: #14151b;
    --linha: #2c2f3a; --linha-forte: #454a5b; --fraco: #9aa0b2;
    --marca: #9d97ff; --marca-escura: #b3aeff; --marca-fundo: #272544;
    --sobre-cor: #1b1d24;
    --ok:   #4bc4a4; --ok-fundo:   #16302b; --ok-linha:   #2e6a5b;
    --aten: #e0a13a; --aten-fundo: #33280f; --aten-linha: #7a5c1c;
    --ruim: #ef8279; --ruim-fundo: #37191a; --ruim-linha: #7d3733;
    --veu: rgba(0, 0, 0, .62);
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px -12px rgba(0, 0, 0, .6);
    --sombra-alta: 0 20px 60px -12px rgba(0, 0, 0, .7);
  }
}
:root[data-theme="dark"] {
  --carvao: #eceef4; --tinta: #d7dae4; --papel: #1d1f27; --aco: #14151b;
  --linha: #2c2f3a; --linha-forte: #454a5b; --fraco: #9aa0b2;
  --marca: #9d97ff; --marca-escura: #b3aeff; --marca-fundo: #272544;
  --sobre-cor: #1b1d24;
  --ok:   #4bc4a4; --ok-fundo:   #16302b; --ok-linha:   #2e6a5b;
  --aten: #e0a13a; --aten-fundo: #33280f; --aten-linha: #7a5c1c;
  --ruim: #ef8279; --ruim-fundo: #37191a; --ruim-linha: #7d3733;
  --veu: rgba(0, 0, 0, .62);
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px -12px rgba(0, 0, 0, .6);
  --sombra-alta: 0 20px 60px -12px rgba(0, 0, 0, .7);
}

/* ---------------------------------------------------------------------------
   Base e acessibilidade
   --------------------------------------------------------------------------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--aco);
  color: var(--carvao);
  font: 400 16px/1.55 var(--fonte);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

input, select, button, textarea { font: inherit; color: inherit; }

/* Um anel de foco visível em tudo que recebe teclado. Nenhuma das dez telas
   tinha: quem navega por Tab ficava sem saber onde estava. */
:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

a { color: var(--marca); }

/* ---------------------------------------------------------------------------
   Escala tipográfica

   Os títulos mediam 22, 23, 25, 26, 27, 30 e 32px — um valor por arquivo,
   nenhum por decisão. Aqui são três degraus. A tela que precisa de outro
   tamanho (o herói da landing) sobrescreve e fica evidente que é exceção.
   --------------------------------------------------------------------------- */
h1 {
  font: 800 25px/1.15 var(--fonte);
  font-stretch: var(--alarga);
  letter-spacing: -.02em;
  margin: 0 0 4px;
}
h2 {
  font: 700 19px/1.25 var(--fonte);
  font-stretch: var(--alarga);
  letter-spacing: -.015em;
  margin: 0 0 8px;
}
h3 {
  font: 700 16px/1.3 var(--fonte);
  margin: 0 0 6px;
}

/* O ar em volta do conteúdo é do produto, não da tela: seis páginas tinham
   seis padding-top diferentes (18, 26, 28, 34, 48px), nenhum por decisão, e
   nenhuma delas começava na mesma altura que a vizinha. Quem precisa de outro
   — a landing, o documento legal, o PWA do salão — sobrescreve e diz por quê. */
main { padding: 28px 0 60px; }

/* A linha abaixo do título: o que a tela faz, em uma frase. */
.sub {
  color: var(--fraco);
  margin: 0 0 22px;
  max-width: 66ch;
}

/* Número que a pessoa abriu a tela para ver. */
.cifra {
  font: 800 30px/1 var(--fonte);
  font-stretch: var(--alarga);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Botões

   Hierarquia antes de cor: uma ação principal por tela em `.btn`, as demais em
   `.btn.linha`. `.btn-linha` é o nome antigo da mesma coisa e continua valendo.
   --------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  background: var(--marca);
  color: var(--sobre-cor);
  text-decoration: none;
  border: 0;
  border-radius: var(--raio);
  padding: 12px 22px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition: background .15s, filter .15s;
}
.btn:hover { background: var(--marca-escura); }
.btn:disabled, .btn[disabled] { opacity: .6; cursor: default; }
.btn:disabled:hover { background: var(--marca); }

.btn.linha, .btn-linha {
  background: var(--papel);
  color: var(--marca);
  border: 1.5px solid var(--marca);
}
.btn.linha:hover, .btn-linha:hover { background: var(--marca-fundo); }

.btn.perigo {
  background: var(--papel);
  color: var(--ruim);
  border: 1.5px solid var(--ruim-linha);
}
.btn.perigo:hover { background: var(--ruim-fundo); }

.btn.ok { background: var(--ok); color: var(--sobre-cor); }
.btn.ok:hover { background: var(--ok); filter: brightness(1.08); }

.btn.pequeno { padding: 9px 16px; font-size: 14px; }

/* ---------------------------------------------------------------------------
   Campos
   --------------------------------------------------------------------------- */
/* Só o campo que recebe texto ganha moldura. `input` sem qualificar alcançava
   também as onze caixas de seleção, o seletor de cor e os dois de arquivo —
   todos ficariam com borda, fundo branco e canto arredondado por cima do
   controle nativo, que já tem forma própria. */
.campo-texto,
textarea, select,
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]) {
  background: var(--papel);
  border: 1.5px solid var(--linha);
  border-radius: var(--raio);
  color: var(--carvao);
}
textarea:focus, select:focus,
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]):focus {
  outline: 0;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 22%, transparent);
}

/* A caixa de seleção só precisa da cor da marca. */
input[type=checkbox], input[type=radio] { accent-color: var(--marca); }

/* O rótulo de formulário ocupa a própria linha. Dentro de uma linha flex —
   o subitem do checklist, o seletor da barra do CMV — ele é um item ao lado
   do controle, e a margem de bloco desalinharia a linha. */
label { display: block; font-size: 14px; font-weight: 600; margin: 14px 0 6px; }
.subitem label, .barra label, label.em-linha { margin: 0; font-weight: 400; }

/* ---------------------------------------------------------------------------
   Superfícies e recados
   --------------------------------------------------------------------------- */
.cartao, .card {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  padding: 20px;
}

/* `.aviso` define APARÊNCIA, nunca visibilidade. O CMV desenha o aviso só
   quando tem o que dizer e usa o atributo `hidden`; as telas de checklist
   deixam a caixa no HTML e acendem com `.mostrar`. São duas formas legítimas
   de resolver a mesma coisa, e foi por não separar aparência de visibilidade
   que a mesma classe significava dois estados opostos em telas vizinhas. */
.aviso {
  padding: 12px 15px;
  border-radius: var(--raio);
  font-size: 14.5px;
  background: var(--aten-fundo);
  color: var(--aten);
  border: 1px solid var(--aten-linha);
}
.aviso.erro, .aviso.mostrar {
  background: var(--ruim-fundo); color: var(--ruim); border-color: var(--ruim-linha);
}
.aviso.ok { background: var(--ok-fundo); color: var(--ok); border-color: var(--ok-linha); }
.aviso[hidden] { display: none; }

.oculto { display: none !important; }

/* ---------------------------------------------------------------------------
   Carregando e vazio

   São duas coisas diferentes e viviam sendo a mesma: `<div class="vazio">
   Carregando…</div>` abria a tela com uma caixa centralizada de 72px que
   sumia quando os dados chegavam, e a página inteira pulava. O esqueleto
   ocupa o formato do conteúdo final, então nada se move na troca.
   --------------------------------------------------------------------------- */
.esqueleto {
  background: var(--linha);
  border-radius: var(--raio-p);
  animation: pulsar 1.4s ease-in-out infinite;
}
@keyframes pulsar { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* Uma linha de esqueleto com a altura de uma linha de texto. */
.esqueleto.linha-txt { height: 12px; margin: 8px 0; }
.esqueleto.titulo    { height: 20px; width: 40%; margin-bottom: 14px; }

.vazio {
  text-align: center;
  color: var(--fraco);
  padding: 56px 20px;
}