/* Revélatte — a tela de entrada.
   ────────────────────────────────────────────────────────────────────────
   AUTOSSUFICIENTE de propósito. Esta folha era só layout e importava cor,
   escala e componente de `tokens.css` e `componentes.css`. Os dois morreram
   quando o servidor passou a servir o bundle React (Etapa 5), e o login não
   podia morrer com eles: ele é a única tela que existe ANTES da sessão, então
   não pode ser servido pela SPA nem depender de nada dela.

   Os valores abaixo espelham `web/src/tema.css`. É a única duplicação de cor
   que sobrou no projeto, e ela é conferida: `web/conferir_tema.mjs` compara
   estes números com os de lá e reprova se divergirem. Duplicação vigiada é
   diferente de duplicação esquecida — e foi duplicação esquecida que fez a
   tela de entrada ter uma paleta própria (azul-marinho) e ser a primeira
   impressão de um produto que não era este. */

:root {
  --plano:  #faf8f5;   /* --n-50  */
  --card:   #ffffff;   /* --n-0   */
  --borda:  #e3ded6;   /* --n-200 */
  --tinta:  #1f1b17;   /* --n-900 */
  --tinta-2:#5a534b;   /* --n-600 */
  --muted:  #7b736a;   /* --n-500 */
  --acento: #b0512f;   /* --clay-600 */
  --foco:   #f4ddd0;   /* --clay-100 */
  --crim-50: #fbeaec;
  --crim-700:#a32235;
  --fonte: "Inter", "Inter var", system-ui, -apple-system, BlinkMacSystemFont,
           "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; }

body {
  font-family: var(--fonte); font-size: 13px; line-height: 1.55;
  color: var(--tinta); background: var(--plano);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
}

.entrada-caixa {
  background: var(--card); border: 1px solid var(--borda);
  border-radius: 8px; padding: 32px;
  width: 100%; max-width: 360px;
}

.entrada-marca { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.entrada-marca .logo {
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--acento); color: #fff;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600;
}
.entrada-marca h1 {
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
}
.entrada-marca p { color: var(--tinta-2); font-size: 11px; margin-top: 2px; }

.campo { display: block; margin-top: 16px; }
.rotulo-mini {
  display: block; font-size: 11px; letter-spacing: .03em;
  color: var(--muted); margin-bottom: 4px;
}
.campo input {
  width: 100%; height: 30px; padding: 0 8px;
  border: 1px solid var(--borda); border-radius: 6px;
  background: var(--card); color: var(--tinta);
  font-family: inherit; font-size: 13px;
}
.campo input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--foco); }

.btn {
  width: 100%; margin-top: 20px; height: 30px;
  border: 1px solid var(--tinta); border-radius: 6px;
  background: var(--tinta); color: #fff;
  font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.btn:hover { background: #000; }

.aviso {
  margin-top: 16px; padding: 8px 10px; border-radius: 6px;
  background: var(--crim-50); color: var(--crim-700); font-size: 12px;
}

.entrada-nota {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--borda);
  font-size: 11px; color: var(--muted);
}