.route-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.route-fallback__spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--accent-soft-strong);
  border-top-color: var(--accent);
  animation: route-fallback-spin 0.7s linear infinite;
}

@keyframes route-fallback-spin {
  to {
    transform: rotate(360deg);
  }
}
/* =============================================================
   Facilite — Tela de Login
   Fontes: "Leckerli One" (marca) · "Inter" (interface)
   Tokens de marca em src/styles/tokens.css (compartilhados com o resto do app).
   ============================================================= */

/* ---------- Fundo ---------- */
/* Foto cinemática (entardecer, laranja -> azul): mantém as cores originais,
   só escurece as bordas onde os cards se apoiam para garantir contraste.
   O fundo do .backdrop em si é a miniatura borrada (inline, via style) —
   aparece instantaneamente. A foto em tamanho real (.backdrop__full) some
   ao entrar, com fade, assim que termina de carregar. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.backdrop__full {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.backdrop__full--loaded {
  opacity: 1;
}

.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(200deg, rgba(6, 16, 40, .12) 0%, rgba(6, 16, 40, 0) 35%, rgba(4, 22, 56, .38) 100%),
    linear-gradient(to top, rgba(3, 14, 40, .55) 0%, rgba(3, 14, 40, 0) 30%);
}

/* ---------- Palco ---------- */
/* Flex em vez de posicionamento absoluto: o card de login entra no fluxo
   normal da página, então se o conteúdo precisar de mais altura do que a
   tela tem, é a PÁGINA que cresce e rola — nada de caixa com scroll
   escondida dentro do card. */
.screen {
  min-height: 100dvh;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 68px 26px 26px;
}

/* ---------- Cards ---------- */
/* Estilo "glass" (acrylic): fundo semi-transparente + blur, deixando a foto
   cinemática atrás transparecer em vez de um painel azul opaco. Blur/
   saturação usam os mesmos tokens do resto do app; a cor em si é mais
   transparente que --acrylic-accent (70%) porque aqui, diferente do
   cabeçalho/dock/modais (que ficam sobre um canvas neutro), o card fica
   sobre uma foto — com 70% de opacidade a cor quase engolia a imagem e o
   "vidro" ficava indistinguível do painel azul sólido antigo. */
.card {
  background: rgba(15, 68, 189, .38);
  backdrop-filter: blur(var(--acrylic-blur)) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(var(--acrylic-blur)) saturate(var(--acrylic-saturate));
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-8);
}

/* =============================================================
   Card de login (direita)
   ============================================================= */
.login {
  /* min() em vez de largura fixa: no espaço estreito, ocupa o que a
     faixa de padding do .screen deixar disponível. */
  width: min(476px, 100%);
  min-height: calc(100dvh - 94px);
  padding: 34px 52px 40px;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

.login__by {
  align-self: flex-end;
  line-height: 1.2;
  font-size: 12px;
  font-weight: 300;
  font-style: italic;
  letter-spacing: .2px;
  opacity: .95;
}

.login__by-brand {
  font-family: var(--font-brand);
  font-style: normal;
  font-size: 15px;
  letter-spacing: .3px;
}

/* ---------- Marca ---------- */
.brand {
  position: relative;
  align-self: center;
  margin-top: -14px;
}

.brand__word {
  font-family: var(--font-brand);
  font-size: 72px;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: .5px;
  white-space: nowrap;
}

.brand__ink    { color: var(--white); }
.brand__accent { color: var(--yellow); }

.swoosh {
  position: absolute;
  color: var(--white);
  pointer-events: none;
}

.brand__swoosh {
  left: 6%;
  bottom: -22px;
  width: 52%;
}

/* =============================================================
   Formulário
   ============================================================= */
.login__form {
  margin-top: 86px;
  display: flex;
  flex-direction: column;
}

.field + .field { margin-top: 44px; }

.field__label {
  display: block;
  padding-left: 26px;
  margin-bottom: 6px;
  line-height: 1.2;
  font-size: 23px;
  font-weight: 400;
  letter-spacing: .2px;
}

.field__input {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 26px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink);
  font-size: 21px;
  font-weight: 400;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}

.field__input::placeholder {
  color: var(--ink-placeholder);
  font-weight: 400;
}

.field__input:hover { box-shadow: 0 4px 14px rgba(3, 26, 74, .18); }

.field__input:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 4px rgba(255, 164, 20, .32);
}

.field__input[aria-invalid="true"] {
  border-color: #FF6B6B;
  box-shadow: 0 0 0 4px rgba(255, 107, 107, .3);
}

.field__input:-webkit-autofill,
.field__input:-webkit-autofill:hover,
.field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--white) inset;
  caret-color: var(--ink);
}

/* ---------- Campo de senha (com botão de mostrar/ocultar) ---------- */
.field__control {
  position: relative;
}

.field__input--with-toggle {
  padding-right: 54px;
}

.field__toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink-placeholder);
  cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}

.field__toggle:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.field__toggle svg {
  width: 22px;
  height: 22px;
}

.field__forgot {
  display: block;
  margin-top: 3px;
  padding-right: 22px;
  text-align: right;
  line-height: 1.2;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .1px;
  opacity: .96;
  transition: opacity .18s var(--ease);
}

.field__forgot:hover { opacity: 1; text-decoration: underline; }

.login__feedback {
  min-height: 18px;
  margin-top: 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: #FFE1E1;
}

/* =============================================================
   Botões
   ============================================================= */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--amber);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 2px;
  cursor: pointer;
  transition: background-color .18s var(--ease),
              transform .18s var(--ease),
              box-shadow .18s var(--ease);
}

.btn:hover {
  background: var(--amber-hover);
  box-shadow: 0 10px 24px rgba(255, 149, 0, .34);
  transform: translateY(-1px);
}

.btn:active { background: var(--amber-active); transform: translateY(0); }

.btn--submit { margin-top: 58px; }

.btn[data-loading="true"] {
  pointer-events: none;
  background: var(--amber-active);
}

.btn[data-loading="true"] .btn__label { opacity: .55; }

/* =============================================================
   Card de suporte (inferior esquerdo)
   ============================================================= */
.support {
  /* Fixo na janela (não no fluxo da página) — continua grudado no canto
     mesmo que o card de login cresça e a página role. */
  position: fixed;
  left: 10px;
  bottom: 0;
  width: 352px;
  padding: 22px 54px 34px;
  border-radius: 22px 22px 0 0;
  transition: max-width .2s var(--ease), padding .2s var(--ease);
  /* Em telas estreitas os dois cards podem se sobrepor na borda inferior —
     o Suporte (menor, recolhido) sempre fica por cima do login nesse caso. */
  z-index: 2;
}

/* Só vira botão de verdade (cursor, clique útil) na versão recolhida —
   ver media query mais abaixo. No tamanho normal o card já vem aberto. */
.support__toggle {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: default;
}

.support__body {
  display: block;
}

.support__heading {
  position: relative;
  display: block;
  width: max-content;
  margin: 0 auto 11px;
}

.support__title {
  font-family: var(--font-brand);
  font-size: 68px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .5px;
}

.swoosh--underline {
  left: -2px;
  bottom: -10px;
  width: 102%;
}

.support__text {
  max-width: 15ch;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.23;
  letter-spacing: .1px;
}

.support .btn {
  width: 100%;
  margin-top: 8px;
  letter-spacing: .2px;
}

/* Chat que substitui o conteúdo do card (não uma janela separada por cima
   dele) — mesma posição/tamanho do card, só o miolo troca de conteúdo. */
.support__chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

/* Fundo sólido (não-vidro) para a região do chat (mensagens + campo) —
   diferente do card em volta, este miolo precisa de contraste firme e
   consistente para o texto das mensagens, sem depender de quanto da foto
   de fundo aparece atrás do blur. */
.support__chat-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--blue-panel-edge);
  border: 1.5px solid rgba(255, 255, 255, .32);
  border-radius: 16px;
}

.support__chat-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 2px;
}

.support__chat-bubble {
  max-width: 90%;
  margin: 0;
  padding: 9px 13px;
  border-radius: 13px;
  font-size: 14px;
  line-height: 1.35;
}

.support__chat-bubble--bot {
  align-self: flex-start;
  background: rgba(255, 255, 255, .14);
  border-bottom-left-radius: 4px;
}

.support__chat-bubble--user {
  align-self: flex-end;
  background: var(--amber);
  color: var(--white);
  border-bottom-right-radius: 4px;
}

.support__chat-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.support__chat-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.support__chat-input {
  width: 100%;
  height: 44px;
  /* espaço à direita reservado pro ícone de anexo, pra não sobrepor o texto */
  padding: 0 40px 0 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-ui);
  /* Nunca abaixo de 16px: abaixo disso o Safari iOS dá zoom automático
     ao focar o campo. */
  font-size: var(--font-size-input);
}

.support__chat-input::placeholder {
  color: var(--ink-placeholder);
}

.support__chat-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 164, 20, .35);
}

.support__chat-attach {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink-placeholder);
  cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}

.support__chat-attach:hover {
  background: rgba(11, 86, 228, .1);
  color: var(--blue-panel);
}

.support__chat-attach svg {
  width: 16px;
  height: 16px;
}

.support__chat-send {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--amber);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .18s var(--ease);
}

.support__chat-send:hover {
  background: var(--amber-hover);
}

.support__chat-send svg {
  width: 18px;
  height: 18px;
}

.support__chat-back {
  align-self: center;
  margin-top: 2px;
  border: 0;
  background: none;
  color: var(--white);
  opacity: .8;
  font-family: var(--font-ui);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.support__chat-back:hover {
  opacity: 1;
}

/* =============================================================
   Responsivo
   Os dois cards ficam sempre ancorados no canto — nunca viram um bloco
   centralizado (isso é o que mudava de aparência com o zoom do navegador,
   já que zoom encolhe o viewport em pixels CSS do mesmo jeito que uma
   janela menor). Em vez de reorganizar tudo, cada card só encolhe:
   o de login fica fluido (nunca estoura a tela), e o de Suporte vira uma
   aba recolhida — clique para abrir — quando o espaço aperta.
   ============================================================= */
@media (max-width: 1180px) {
  .login  { width: min(430px, 100%); padding: 30px 44px 36px; }
  .brand__word    { font-size: 64px; }
  .login__form    { margin-top: 74px; }
  .btn--submit    { margin-top: 48px; }
  .field + .field { margin-top: 38px; }

  .support        { width: 322px; padding: 26px 44px 30px; }
  .support__title { font-size: 58px; }
  .support__text  { font-size: 20px; }
  .btn            { font-size: 28px; }
}

/* Aperta o espaço vertical do formulário — entra bem antes do card de
   Suporte recolher, para o conteúdo nunca depender de rolar dentro do card. */
@media (max-height: 620px) {
  .login          { padding-top: 22px; padding-bottom: 22px; }
  .brand          { margin-top: -4px; }
  .brand__word    { font-size: 52px; }
  .login__form    { margin-top: 40px; }
  .field + .field { margin-top: 22px; }
  .btn--submit    { margin-top: 26px; }
}

@media (max-height: 460px) {
  .brand         { margin-top: 0; }
  .brand__word   { font-size: 38px; }
  .login__form   { margin-top: 20px; }
  .field + .field { margin-top: 12px; }
  .field__label  { font-size: 16px; margin-bottom: 2px; }
  /* height/font-size nunca abaixo de --tap-target/--font-size-input,
     mesmo neste extremo de tela baixa (celular deitado): abaixo disso
     o campo vira alvo difícil de acertar e ainda dispara zoom no iOS. */
  .field__input  { height: var(--tap-target); font-size: var(--font-size-input); }
  .btn--submit   { margin-top: 14px; }
  .btn           { height: var(--tap-target); font-size: 20px; }
  .login__by     { font-size: 10px; }
}

/* Card de Suporte recolhido — vira uma aba com só o título; clicar abre
   o conteúdo por cima, sem empurrar o card de login nem mudar de layout. */
@media (max-width: 900px), (max-height: 620px) {
  .support {
    width: auto;
    max-width: 190px;
    padding: 14px 26px 14px;
  }

  .support__toggle { cursor: pointer; }
  .support__body { display: none; }
  .support__heading { margin-bottom: 0; }
  .support__title { font-size: 40px; }
  .support .swoosh--underline { display: none; }

  .support--expanded {
    max-width: min(320px, calc(100vw - 20px));
    padding: 22px 40px 26px;
  }

  .support--expanded .support__heading { margin-bottom: 11px; }
  .support--expanded .support__title { font-size: 56px; }
  .support--expanded .swoosh--underline { display: block; }
  .support--expanded .support__body { display: block; }
}

@media (max-width: 480px) {
  .field__label  { font-size: 19px; }
  .field__input  { height: 52px; font-size: 17px; }
  .btn           { height: 54px; font-size: 24px; }
  .support__text { font-size: 18px; }
  .login         { padding-left: 24px; padding-right: 24px; }
}
.error-boundary {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--blue-deep, #0b1d3d);
}

.error-boundary__card {
  width: min(420px, 100%);
  padding: 36px 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  background: var(--blue-panel, #16294f);
  border: 1px solid var(--blue-panel-edge, rgba(255, 255, 255, 0.15));
  border-radius: 24px;
  box-shadow: var(--shadow-card, 0 20px 40px rgba(0, 0, 0, 0.35));
  color: var(--white, #fff);
}

.error-boundary__title {
  margin: 0;
  font-family: var(--font-ui, inherit);
  font-size: 22px;
  font-weight: 700;
}

.error-boundary__message {
  margin: 0;
  font-size: 15px;
  opacity: 0.85;
}

.error-boundary__btn {
  margin-top: 14px;
  height: 50px;
  border: 0;
  border-radius: var(--radius-pill, 999px);
  background: var(--amber, #e4a637);
  color: var(--white, #fff);
  font-family: var(--font-ui, inherit);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.error-boundary__btn:hover {
  background: var(--amber-hover, #d4941f);
  transform: translateY(-1px);
}
/* =============================================================
   Tokens de marca — compartilhados por todas as telas e layouts
   (login, home, e os futuros layouts "Foco" e "Desktop").

   Estrutura, de cima para baixo:
     1. Tokens independentes de tema (tipografia, espaçamento,
        radius, breakpoints, motion) — não mudam entre claro/escuro.
     2. Tema claro (padrão, em :root) — cores, superfícies, sombras,
        acrylic.
     3. Tema escuro (:root[data-theme="dark"]) — só redefine as
        variáveis que precisam mudar; nenhum componente conhece a
        palavra "dark", eles só consomem os tokens.
   Quem decide qual tema está ativo é o ThemeProvider (ver
   src/theme/), que aplica o atributo data-theme na tag <html> — a
   troca de tema inteira acontece revalidando estas variáveis, sem
   duplicar CSS por componente.
   ============================================================= */
:root {
  /* ---------- Tipografia ----------
     Segoe UI Variable é a fonte "nativa" do Fluent, mas não é uma
     web font pública — Inter é o substituto mais próximo (mesma
     altura-x generosa, mesmos pesos), com a mesma pilha de fallback
     de sistema que o Windows usaria. */
  --font-ui:    "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --font-brand: "Leckerli One", "Brush Script MT", cursive;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* ==============================================================
     Breakpoints — referência única para todo o sistema.
     CSS custom properties não funcionam dentro de @media (sem
     plugin de "custom media"), então os valores abaixo são o
     contrato: todo @media do projeto deve usar exatamente estes
     números, não outros soltos.
       mobile:  até 640px
       tablet:  641px – 1024px
       desktop: a partir de 1025px
     Um breakpoint extra em 400px existe em alguns componentes só
     para reapertar texto/ícones em aparelhos muito estreitos — não
     é um nível novo do sistema, é ajuste fino dentro do "mobile".
     ============================================================== */

  /* ---------- Espaçamento ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ---------- Alvo de toque ---------- */
  /* Área mínima recomendada (Apple HIG / Material) para qualquer
     elemento tocável em campo — dedo, não cursor. */
  --tap-target: 44px;

  /* ---------- Cantos arredondados ----------
     Escala Fluent: controles pequenos (chips, linhas, inputs "sm")
     ficam nos primeiros degraus; painéis e cards sobem a escala;
     --radius-pill continua sendo o "infinito" para pílulas/botões
     redondos, como já era. --radius-card é mantido como alias de
     --radius-2xl — vários componentes fora do escopo desta reforma
     ainda apontam para o nome antigo. */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  18px;
  --radius-xl:  22px;
  --radius-2xl: 26px;
  --radius-card: var(--radius-2xl);
  --radius-pill: 999px;

  /* ---------- Motion ----------
     Curva "decelerate" do Fluent 2 (rápida no início, assentando
     suave no fim) — troca o cubic-bezier "standard" genérico que
     havia antes por algo que combina com o vocabulário de hover/
     expansão que já existe no app (dock, cabeçalho, linhas de
     tabela). --ease-accelerate fica disponível para quem precisar
     de uma saída mais abrupta (ex.: itens saindo de tela). */
  --ease:            cubic-bezier(.1, .9, .2, 1);
  --ease-accelerate: cubic-bezier(.7, 0, 1, .5);

  /* ---------- Acrylic ----------
     Blur/saturação usados em qualquer superfície "vidraça"
     (cabeçalho, dock, modais, dropdowns). A cor de fundo em si
     é definida por tema mais abaixo (--acrylic-accent /
     --acrylic-neutral), porque muda de tom entre claro e escuro. */
  --acrylic-blur:     20px;
  --acrylic-saturate: 1.6;

  /* ---------- Tipografia fluida ----------
     clamp() interpola entre o tamanho mobile e o desktop conforme a
     viewport, então não existe um "salto" nem risco de ficar
     minúsculo numa largura que nenhum breakpoint previu. Os valores
     mínimos já nascem legíveis sem zoom (>=13px) e os inputs usam
     --font-size-input separado, travado em 16px, para nunca disparar
     o zoom automático do Safari iOS. */
  --font-size-xs:    clamp(12px, 0.7rem + 0.15vw, 13px);
  --font-size-sm:    clamp(13px, 0.75rem + 0.2vw, 15px);
  --font-size-base:  clamp(15px, 0.85rem + 0.35vw, 17px);
  --font-size-md:    clamp(16px, 0.95rem + 0.5vw, 19px);
  --font-size-lg:    clamp(18px, 1rem + 0.9vw, 21px);
  --font-size-xl:    clamp(21px, 1.1rem + 1.6vw, 26px);
  --font-size-2xl:   clamp(24px, 1.2rem + 2.4vw, 32px);
  --font-size-brand: clamp(26px, 1.3rem + 3.2vw, 42px);
  /* Piso de qualquer input/select/textarea — abaixo de 16px o
     Safari iOS força zoom ao focar o campo. */
  --font-size-input: 16px;

  /* ---------- Folga para as abas flutuantes ----------
     Padrão do sistema: toda tela com AppShell precisa de espaço vazio
     no fim do conteúdo rolável, senão o último item da lista/formulário
     fica embaixo da aba Voltar, do Suporte, ou (quando há janelas
     abertas) do WindowDock — todos fixos no rodapé da viewport. Duas
     variantes porque os dois tipos de tela do AppShell terminam de
     jeitos diferentes:
       --content-bottom-clearance:     tela que rola normalmente (o
         conteúdo pode crescer além da viewport) — folga generosa
         porque é a PÁGINA que precisa "passar por baixo" das abas.
       --content-bottom-clearance-fit: tela travada na altura da janela
         (AppShell fillViewport) — quem rola é uma lista interna, então
         basta a folga mínima para as abas não cobrirem a borda do
         painel.
     Usados em AppShell.css; qualquer tela nova que role por conta
     própria (fora do AppShell) deve reservar o mesmo espaço se tiver
     algum elemento fixo no rodapé — ver LoginPage.css para um caso já
     tratado à parte (cards ancorados, sem lista para rolar).

     O valor "fit" foi medido com o WindowDock aberto (2+ janelas): o
     topo do dock fica a 96px do rodapé da viewport (16px de offset +
     ~80px de altura, já contando a folga do hover/toque) — é o maior
     dos três elementos fixos do rodapé nessa variante, então é ele
     quem define o mínimo. 108px dá uma margem de segurança de 12px
     sobre essa medida. */
  --content-bottom-clearance: 140px;
  --content-bottom-clearance-fit: 108px;
}

/* =============================================================
   Tema claro (padrão) — também serve de fallback caso o
   ThemeProvider ainda não tenha rodado (ex.: primeiro paint).
   ============================================================= */
:root,
:root[data-theme="light"] {
  /* ---------- Accent (marca) ----------
     Mantido igual ao azul histórico do Facilite — a auditoria
     considerou trocar para o azul "nativo" do Windows 11, mas a
     decisão foi preservar a cor de marca e organizar a escala ao
     redor dela. */
  --accent:        #0B56E4;
  --accent-hover:  #0A4CCB;
  --accent-active: #083FA3;
  --accent-soft:        rgba(11, 86, 228, .08);
  --accent-soft-strong: rgba(11, 86, 228, .16);

  /* Painéis "de marca" — o azul usado como superfície de cartão em
     quase todo módulo interno. Continua sendo o mesmo tom do
     --accent no claro; no escuro escurece para não competir com o
     canvas neutro. */
  --blue-panel:      #0B56E4;
  --blue-panel-edge: #0A4CCB;

  --amber:        #FFA414;
  --amber-hover:  #FF9500;
  --amber-active: #F08A00;
  --yellow:       #FFD62E;

  /* Ações destrutivas/de cancelamento (ex.: botão "Cancelar" em Notas emitidas). */
  --danger:       #D6281C;
  --danger-hover: #C22114;

  /* Indicador positivo (ex.: entrada de dinheiro no Financeiro) — não havia
     verde no sistema até então, só --danger para o lado negativo. */
  --positive:       #1E8E3E;
  --positive-hover: #167530;

  /* Grade de módulos (telas internas do ERP) */
  --tile-yellow:       #FFC331;
  --tile-yellow-hover: #FFB800;
  --badge-blue:        #0B56E4;

  /* ---------- Texto sobre superfícies claras/brancas ----------
     --ink é o texto escuro usado dentro de controles brancos
     (campo de busca, inputs) — não muda de tema porque esses
     controles continuam claros mesmo no escuro só quando fora do
     escopo desta reforma; onde a reforma chegou (--surface-control),
     o par certo é --text-on-control. */
  --ink:             #1F2733;
  --ink-placeholder: #9AA3AE;
  --white:           #FFFFFF;

  /* ---------- Canvas + superfícies neutras ----------
     Pilar que faltava: um fundo neutro por trás dos painéis de
     marca, no lugar do azul cobrindo a tela inteira. */
  --canvas:          #F3F3F6;
  --canvas-alt:       #E8EAF0;
  --surface-1:       #FFFFFF;
  --surface-2:       #F7F8FA;
  --surface-control:    #FFFFFF;
  --text-on-control:    var(--ink);

  --text-primary:    #1F2733;
  --text-secondary:  rgba(31, 39, 51, .64);
  --border-neutral:  rgba(15, 23, 42, .09);
  --border-strong:   rgba(15, 23, 42, .16);

  /* ---------- Acrylic ---------- */
  --acrylic-accent:  rgba(15, 68, 189, .70);
  --acrylic-neutral: rgba(255, 255, 255, .72);

  /* ---------- Elevação (sombras em camadas) ----------
     1: repouso (linha/tile em hover) · 2: card/painel · 4:
     dropdown/tooltip/dock · 8: modal/flyout — o nível mais alto. */
  --shadow-1: 0 1px 2px rgba(4, 30, 82, .07), 0 1px 1px rgba(4, 30, 82, .05);
  --shadow-2: 0 4px 12px rgba(4, 30, 82, .12), 0 1.5px 4px rgba(4, 30, 82, .08);
  --shadow-4: 0 10px 28px rgba(4, 30, 82, .18), 0 3px 8px rgba(4, 30, 82, .10);
  --shadow-8: 0 24px 60px rgba(4, 30, 82, .30), 0 8px 20px rgba(4, 30, 82, .16);
  /* Alias histórico — vários componentes fora do escopo desta
     reforma ainda apontam para --shadow-card diretamente. */
  --shadow-card: var(--shadow-8);
}

/* =============================================================
   Tema escuro — o ThemeProvider aplica data-theme="dark" na tag
   <html> (manualmente, ou resolvendo prefers-color-scheme na
   primeira visita). Só o necessário é redefinido; tudo que não
   aparece aqui herda o valor do tema claro.
   ============================================================= */
:root[data-theme="dark"] {
  --accent:        #5B9CFF;
  --accent-hover:  #7CB0FF;
  --accent-active: #3C82F0;
  --accent-soft:        rgba(91, 156, 255, .14);
  --accent-soft-strong: rgba(91, 156, 255, .24);

  /* O azul de marca vira uma superfície escura e dessaturada — lê
     como "card" sobre o canvas neutro escuro, em vez de competir
     com ele. */
  --blue-panel:      #17335E;
  --blue-panel-edge: #0F2748;

  --amber:        #FFB03D;
  --amber-hover:  #FFC15E;
  --amber-active: #F0A02E;
  --yellow:       #FFD62E;

  --danger:       #F0463A;
  --danger-hover: #FF5B4F;

  --positive:       #3DDC84;
  --positive-hover: #57E397;

  --tile-yellow:       #FFC331;
  --tile-yellow-hover: #FFD35C;
  --badge-blue:        #5B9CFF;

  --surface-control:    #2B2E36;
  --text-on-control:    #F3F4F6;

  --canvas:          #17181C;
  --canvas-alt:      #1E2026;
  --surface-1:       #202329;
  --surface-2:       #262A31;

  --text-primary:    #F3F4F6;
  --text-secondary:  rgba(243, 244, 246, .64);
  --border-neutral:  rgba(255, 255, 255, .09);
  --border-strong:   rgba(255, 255, 255, .16);

  --acrylic-accent:  rgba(10, 20, 40, .70);
  --acrylic-neutral: rgba(32, 35, 41, .74);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, .50);
  --shadow-4: 0 10px 30px rgba(0, 0, 0, .55);
  --shadow-8: 0 26px 64px rgba(0, 0, 0, .60);
  --shadow-card: var(--shadow-8);
}

/* ---------- Reset global ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  color: #fff;
  background-color: #0a4ccb;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, p { margin: 0; }

a { color: inherit; text-decoration: none; }

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

#root { min-height: 100dvh; }

:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .85);
  outline-offset: 3px;
}

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