.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; }
}
.fade-image {
  display: inline-flex;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.fade-image__img {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.fade-image__img--loaded {
  opacity: 1;
}
/* Abas azuis encostadas na borda inferior da tela — mesmo recurso visual
   já usado no card "Suporte" do login (bottom: 0, cantos retos embaixo). */
.floating-tab {
  position: fixed;
  /* Fica parcialmente escondido abaixo da borda da tela — quando a animação
     de subida existir, vai parecer que a aba está sendo puxada para cima. */
  bottom: -16px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--acrylic-accent);
  backdrop-filter: blur(var(--acrylic-blur)) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(var(--acrylic-blur)) saturate(var(--acrylic-saturate));
  border: 1px solid var(--blue-panel-edge);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-4);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.18s var(--ease), transform 0.18s var(--ease);
}

.floating-tab:hover {
  transform: translateY(-2px);
}

.floating-tab--back {
  left: 16px;
  width: 72px;
  height: 60px;
  padding: 0;
}

.floating-tab--back img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

/* A aba do Suporte herda o mesmo "peek" (bottom: -16px) das outras abas —
   e o painel que ela abre usa exatamente a mesma posição/largura, para
   manter a continuidade visual entre os dois estados (recolhido/estendido). */
.floating-tab--support {
  right: 24px;
  width: 340px;
  padding: 18px 16px 16px;
  font-family: var(--font-brand);
  font-size: 42px;
  text-decoration: none;
}

@media (max-width: 640px) {
  .floating-tab {
    bottom: -10px;
  }

  .floating-tab--support {
    right: 12px;
    width: min(340px, calc(100vw - 24px));
    padding: 14px 12px 12px;
    font-size: 32px;
  }

  .floating-tab--back {
    left: 12px;
    width: 60px;
    height: 50px;
  }

  .floating-tab--back img {
    width: 26px;
    height: 26px;
  }
}
/* Mesma posição/largura/"peek" da aba "Suporte" que ele substitui — os dois
   estados (recolhido/estendido) ficam alinhados e igualmente "para fora"
   da tela, então a troca entre eles não salta de tamanho nem de posição. */
@keyframes support-menu-in {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes support-menu-out {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(60px);
    opacity: 0;
  }
}

.support-menu {
  position: fixed;
  right: 24px;
  bottom: -16px;
  z-index: 60;
  width: 340px;
  padding: 26px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--acrylic-accent);
  backdrop-filter: blur(var(--acrylic-blur)) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(var(--acrylic-blur)) saturate(var(--acrylic-saturate));
  border: 1px solid var(--blue-panel-edge);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-4);
  animation: support-menu-in 0.22s var(--ease);
}

/* Arrastada para baixo ao fechar — a mesma ideia da entrada, invertida. */
.support-menu--closing {
  animation: support-menu-out 0.22s var(--ease) forwards;
  pointer-events: none;
}

.support-menu__close {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: var(--white);
  opacity: 0.75;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.support-menu__close:hover {
  opacity: 1;
}

.support-menu__title {
  align-self: center;
  margin: 0;
  font-family: var(--font-brand);
  font-size: 40px;
  color: var(--white);
}

.support-menu__actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.support-menu__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  background: var(--amber);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.18s var(--ease), transform 0.18s var(--ease);
}

.support-menu__btn:hover {
  background: var(--amber-hover);
  transform: translateY(-1px);
}

.support-menu__phone {
  margin: 2px 0 0;
  text-align: center;
  font-size: 17px;
  font-weight: 500;
  color: var(--white);
}

@media (max-width: 640px) {
  .support-menu {
    right: 12px;
    bottom: -10px;
    width: min(340px, calc(100vw - 24px));
    padding: 22px 22px 22px;
  }

  .support-menu__title {
    font-size: 34px;
  }

  .support-menu__btn {
    height: 52px;
    font-size: 17px;
  }

  .support-menu__phone {
    font-size: 16px;
  }
}
/* Barra de vidro flutuando acima da borda inferior, centralizada entre as
   abas "Voltar" (esquerda) e "Suporte" (direita). Diferente das abas, o dock
   não fica "pendurado": ele flutua, com todos os cantos arredondados. */
.window-dock {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  /* Acima da faixa azul (10) e das abas flutuantes (5); ainda abaixo dos
     popups de Suporte (60) e dos modais (70/80), que devem cobrir o dock. */
  z-index: 30;
  padding: 8px 10px;
  border-radius: var(--radius-xl);
  /* Nada de overflow/clip aqui: o ícone cresce para FORA da barra (como no
     dock do macOS), junto com o rótulo e o "x". Qualquer recorte nesta
     cadeia corta a animação pela metade. */
  overflow: visible;
  /* Vidro azulado: legível tanto sobre o canvas neutro da tela inicial
     quanto sobre o azul dos módulos internos. */
  background: var(--acrylic-accent);
  border: 1px solid rgba(255, 255, 255, .3);
  box-shadow: var(--shadow-4);
  backdrop-filter: blur(var(--acrylic-blur)) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(var(--acrylic-blur)) saturate(var(--acrylic-saturate));
  transition: background-color .2s var(--ease);
}

.window-dock__list {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: visible;
}

.window-dock__slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  overflow: visible;
}

/* O item sob o cursor/foco sobe na pilha para nunca passar por baixo do
   vizinho enquanto cresce. */
.window-dock__slot:hover,
.window-dock__slot:focus-within {
  z-index: 2;
}

/* ---------- Ícone ---------- */
.window-dock__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--tile-yellow);
  color: var(--white);
  cursor: pointer;
  /* cresce a partir da base, como no dock do macOS */
  transform-origin: bottom center;
  transition: transform .2s cubic-bezier(.2, .8, .3, 1.25), background-color .15s var(--ease);
}

.window-dock__item svg {
  width: 28px;
  height: 28px;
}

/* Mesma proporção do ícone-imagem da tela inicial (60px numa base de
   84px), só que reduzida para a base de 52px do dock. */
.window-dock__icon-image {
  width: calc(37px * var(--module-icon-scale, 1));
  height: calc(37px * var(--module-icon-scale, 1));
}

.window-dock__icon-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.window-dock__initial {
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 700;
}

.window-dock__slot:hover .window-dock__item,
.window-dock__slot:focus-within .window-dock__item {
  background: var(--tile-yellow-hover);
  transform: scale(1.45) translateY(-6px);
}

/* Vizinhos crescem um pouco menos — o efeito de "onda" do dock.
   Vale para hover e para foco, para quem navega pelo teclado ver o mesmo. */
.window-dock__slot:hover + .window-dock__slot .window-dock__item,
.window-dock__slot:focus-within + .window-dock__slot .window-dock__item,
.window-dock__slot:has(+ .window-dock__slot:hover) .window-dock__item,
.window-dock__slot:has(+ .window-dock__slot:focus-within) .window-dock__item {
  transform: scale(1.18) translateY(-2px);
}

/* ---------- Rótulo (fora do ícone, para não esticar junto) ---------- */
.window-dock__label {
  position: absolute;
  /* O ícone ampliado sobe ~32px acima do slot (escala 1.45 a partir da base
     + deslocamento). O rótulo precisa ficar acima disso, senão o próprio
     ícone passa por cima dele durante a animação. */
  bottom: calc(100% + 46px);
  left: 50%;
  /* acima do ícone dentro do slot */
  z-index: 5;
  transform: translateX(-50%) translateY(6px);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: rgba(6, 20, 46, .92);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: var(--shadow-4);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 13px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}

.window-dock__slot:hover .window-dock__label,
.window-dock__slot:focus-within .window-dock__label {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ---------- Fechar ---------- */
.window-dock__close {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background: #d6281c;
  color: var(--white);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s var(--ease), visibility .16s, transform .16s var(--ease);
}

.window-dock__slot:hover .window-dock__close,
.window-dock__slot:focus-within .window-dock__close {
  opacity: 1;
  visibility: visible;
}

.window-dock__close:hover {
  transform: scale(1.15);
}

.window-dock__close svg {
  width: 10px;
  height: 10px;
}

/* ---------- Ponto de janela ativa ---------- */
.window-dock__dot {
  width: 5px;
  height: 5px;
  margin-top: 5px;
  border-radius: 50%;
  background: transparent;
  transition: background-color .15s var(--ease);
}

.window-dock__dot--on {
  background: var(--white);
}

@media (prefers-reduced-motion: reduce) {
  .window-dock__item,
  .window-dock__label,
  .window-dock__close {
    transition: none;
  }

  .window-dock__slot:hover .window-dock__item,
  .window-dock__slot:focus-within .window-dock__item,
  .window-dock__slot:hover + .window-dock__slot .window-dock__item,
  .window-dock__slot:has(+ .window-dock__slot:hover) .window-dock__item {
    transform: none;
  }
}

/* Em telas estreitas as abas de baixo ocupam quase toda a largura, então o
   dock sobe para acima delas em vez de disputar o mesmo espaço. */
@media (max-width: 900px) {
  .window-dock {
    bottom: 96px;
  }
}

@media (max-width: 640px) {
  .window-dock {
    bottom: 86px;
    padding: 6px 8px;
    border-radius: 18px;
  }

  .window-dock__list {
    gap: 6px;
    /* Muitas janelas abertas em tela estreita: rola por dentro do dock
       em vez de estourar a largura ou espremer os ícones a ponto de
       perder a área de toque. */
    max-width: calc(100vw - 32px);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .window-dock__list::-webkit-scrollbar { display: none; }

  .window-dock__item { width: 44px; height: 44px; border-radius: 13px; }
  .window-dock__item svg { width: 24px; height: 24px; }
}

/* ---------- Touch: sem hover, o botão de fechar precisa ser visível
   e tocável direto — antes dependia de :hover/:focus-within, que não
   existe em touch, e não havia como fechar uma janela pelo dock. */
@media (hover: none) {
  .window-dock__item,
  .window-dock__slot:hover .window-dock__item,
  .window-dock__slot:focus-within .window-dock__item,
  .window-dock__slot:hover + .window-dock__slot .window-dock__item,
  .window-dock__slot:focus-within + .window-dock__slot .window-dock__item,
  .window-dock__slot:has(+ .window-dock__slot:hover) .window-dock__item,
  .window-dock__slot:has(+ .window-dock__slot:focus-within) .window-dock__item {
    /* Sem gesto de hover para "crescer", o dock fica com o tamanho
       final o tempo todo — nada de animação que nunca dispara. */
    transform: none;
  }

  .window-dock__close {
    /* Continua sobre o canto do ícone (não empurra o layout), só que
       agora sempre visível e com uma área de toque bem maior que os
       10x10 do desenho original — 30px é o melhor que cabe encostado
       no ícone de 44px sem os dois se atropelarem. */
    top: -8px;
    right: -8px;
    width: 30px;
    height: 30px;
    opacity: 1;
    visibility: visible;
  }

  .window-dock__close svg {
    width: 13px;
    height: 13px;
  }

  .window-dock__label {
    display: none;
  }
}
.app-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  font-family: var(--font-ui);
  color: var(--text-primary);
  overflow-anchor: none;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}

.app-shell--scroll-reserve {
  min-height: calc(100dvh + 220px);
}

/* ---------- Cabeçalho ---------- */
/* Cantos de baixo arredondados — a faixa azul fica "pendurada" no topo,
   no mesmo estilo das abas flutuantes que ficam penduradas embaixo.
   Fixa (sticky) para continuar visível quando o conteúdo abaixo rolar. */
.app-header {
  --header-padding-top: 18px;
  --brand-size: 38px;
  --brand-padding-bottom: 6px;
  --brand-swoosh-opacity: 1;
  --brand-module-width: 90px;
  --brand-module-opacity: .9;
  --nav-padding-top: 12px;
  --nav-gap: 26px;
  --nav-font-size: 16px;
  --nav-icon-size: 20px;
  --nav-item-gap: 6px;
  --nav-label-width: 132px;
  --nav-label-opacity: 1;
  --search-label-height: 17px;
  --search-label-opacity: 1;
  --search-placeholder-opacity: 1;
  --search-gap: 6px;
  --search-width: min(340px, 46vw);
  --search-padding-y: 10px;
  --search-padding-x: 18px;
  --branch-max-height: 60px;
  --branch-opacity: 1;
  --branch-margin-top: 14px;
  --branch-padding-top: 8px;
  --branch-padding-bottom: 14px;
  background: var(--acrylic-accent);
  backdrop-filter: blur(var(--acrylic-blur)) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(var(--acrylic-blur)) saturate(var(--acrylic-saturate));
  color: var(--white);
  padding: var(--header-padding-top) 32px 0;
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
  box-shadow: var(--shadow-4);
  position: sticky;
  top: 0;
  z-index: 10;
  transition: padding .25s var(--ease), background-color .2s var(--ease);
  /* A altura da faixa muda durante a animação; sem isto o navegador tenta
     "corrigir" o scroll sozinho pra compensar (scroll anchoring), o que
     brigava com o nosso próprio controle e bugava a animação no meio. */
  overflow-anchor: none;
}

.app-header__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  transition: align-items .25s var(--ease);
}

.app-brand {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: var(--brand-padding-bottom);
  transition: padding-bottom .25s var(--ease);
}

.app-brand__word {
  font-family: var(--font-brand);
  font-size: var(--brand-size);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  transition: font-size .25s var(--ease);
}

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

.app-brand__swoosh {
  position: absolute;
  left: 4%;
  bottom: -6px;
  width: 46%;
  color: var(--white);
  pointer-events: none;
  opacity: var(--brand-swoosh-opacity);
  transition: opacity .2s var(--ease);
}

.app-brand__module {
  font-size: 13px;
  text-decoration: underline;
  max-width: var(--brand-module-width);
  overflow: hidden;
  opacity: var(--brand-module-opacity);
  white-space: nowrap;
}

.app-nav {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  padding-top: var(--nav-padding-top);
  flex-wrap: wrap;
  transition: padding-top .25s var(--ease), gap .25s var(--ease);
}

.app-nav__item {
  display: flex;
  align-items: center;
  gap: var(--nav-item-gap);
  color: var(--white);
  font-size: var(--nav-font-size);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1.5px solid transparent;
  white-space: nowrap;
  transition: font-size .2s var(--ease);
}

.app-nav__item svg {
  width: var(--nav-icon-size);
  height: var(--nav-icon-size);
  flex-shrink: 0;
  transition: width .2s var(--ease), height .2s var(--ease);
}

.app-nav__item-label {
  max-width: var(--nav-label-width);
  overflow: hidden;
  opacity: var(--nav-label-opacity);
  white-space: nowrap;
}

.app-nav__item:hover,
.app-nav__item--active {
  border-bottom-color: var(--white);
}

.app-search {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--search-gap);
  padding-top: 2px;
  transition: padding-top .25s var(--ease);
}

.app-search__label {
  font-size: 14px;
  height: var(--search-label-height);
  max-height: var(--search-label-height);
  overflow: hidden;
  opacity: var(--search-label-opacity);
}

.app-search__box {
  display: flex;
  align-items: center;
  gap: 8px;
  width: var(--search-width);
  padding: var(--search-padding-y) var(--search-padding-x);
  border-radius: var(--radius-pill);
  background: var(--surface-control);
  color: var(--ink-placeholder);
  box-shadow: var(--shadow-1);
  transition: padding .2s var(--ease), background-color .2s var(--ease), box-shadow .15s var(--ease);
}

/* Clicar/focar a busca aumenta a largura dela — mais espaço para ler o
   que foi digitado, sem ficar ocupando isso o tempo todo enquanto não
   está em uso. Especificidade de :focus-within já é maior que a do
   reset "transition: none" mais abaixo, então a transição funciona
   aqui sem precisar mexer naquele bloco. */
.app-search__box:focus-within {
  width: min(420px, 70vw);
  box-shadow: 0 0 0 3px var(--accent-soft-strong), var(--shadow-2);
  transition: width .2s var(--ease), box-shadow .15s var(--ease);
}

.app-search__box svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.app-search__box input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-on-control);
  font-family: var(--font-ui);
  font-size: 14px;
}

.app-search__box input::placeholder {
  color: rgb(from var(--ink-placeholder) r g b / var(--search-placeholder-opacity));
}

/* ---------- Toggle de tema ---------- */
.app-theme-toggle {
  flex-shrink: 0;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: 2px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: var(--white);
  cursor: pointer;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}

.app-theme-toggle:hover {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .4);
}

.app-theme-toggle:active {
  transform: scale(.94);
}

.app-theme-toggle svg {
  width: 19px;
  height: 19px;
}

.app-header__branch {
  max-height: var(--branch-max-height);
  overflow: hidden;
  margin: var(--branch-margin-top) 0 0;
  padding: var(--branch-padding-top) 0 var(--branch-padding-bottom);
  text-align: center;
  font-size: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  opacity: var(--branch-opacity);
}

/* As dimensões abaixo são atualizadas a cada frame pela posição do scroll.
   Uma transição CSS aqui tentaria alcançar um novo alvo em toda rolagem e
   criaria o efeito de tremor. O próprio scroll já fornece a suavidade. */
.app-header,
.app-header__row,
.app-brand,
.app-brand__word,
.app-brand__swoosh,
.app-nav,
.app-nav__item,
.app-nav__item svg,
.app-search,
.app-search__box {
  transition: none;
}

/* ---------- Cabeçalho compacto em viewport baixo ----------
   O encolhimento do cabeçalho só reage ao SCROLL (ver o JS acima) — em
   viewport curto (zoom do navegador acima de 100%, notebook com pouca
   altura, celular deitado) o cabeçalho continua no tamanho cheio
   mesmo na posição de rolagem 0, e pode sozinho empurrar o conteúdo
   para dentro da zona das abas flutuantes antes mesmo de existir
   scroll pra "resolver" isso rolando até o fim. Como max-height é
   sobre a VIEWPORT, não sobre a largura, cobre zoom e proporção baixa
   em qualquer breakpoint de largura.
   !important porque o JS do scroll escreve estas mesmas variáveis via
   style inline a cada frame — sem isso, o inline sempre ganharia da
   media query. */
@media (max-height: 700px) {
  .app-header {
    --header-padding-top: 10px !important;
    --brand-size: 26px !important;
    --brand-padding-bottom: 0px !important;
    --nav-padding-top: 4px !important;
    --nav-gap: 18px !important;
    --nav-font-size: 14px !important;
    --nav-icon-size: 18px !important;
    --nav-item-gap: 4px !important;
    --search-label-height: 0px !important;
    --search-label-opacity: 0 !important;
    --search-gap: 2px !important;
    --search-padding-y: 6px !important;
    --branch-max-height: 32px !important;
    --branch-margin-top: 6px !important;
    --branch-padding-top: 4px !important;
    --branch-padding-bottom: 6px !important;
  }
}

/* ---------- Conteúdo ---------- */
.app-content {
  flex: 1;
  /* --content-bottom-clearance: espaço para o conteúdo não terminar
     embaixo da aba Voltar/Suporte/WindowDock, todos fixos no rodapé
     da viewport — ver tokens.css para a explicação completa do
     padrão. */
  padding: 32px 36px var(--content-bottom-clearance);
}

/* Canvas neutro dos módulos internos (Registry). O azul de marca não é
   mais o fundo da tela inteira — vira a superfície dos painéis
   (RegistryActions/Table/Details, que já definem o próprio
   background/color), flutuando com profundidade sobre este canvas.
   --canvas-alt fica um tom mais escuro que o canvas padrão da home,
   pela mesma razão que os cards de um app Fluent normalmente diferem
   um degrau do "Layer 0": ajuda o painel a se destacar sem depender só
   da sombra. */
.app-content--blue {
  background: var(--canvas-alt);
  color: var(--text-primary);
}

/* Tela travada na altura da janela em QUALQUER largura — inclusive
   quando o RegistryLayout empilha as colunas (ver RegistryLayout.css,
   breakpoint próprio em 1024px). Colunas laterais ficam fixas e o
   cabeçalho não recolhe.

   Isto já foi "página rola normalmente quando empilha" (com
   .app-shell--fill virando altura automática abaixo de 1100px), mas
   isso reabria exatamente o bug que --content-bottom-clearance tenta
   fechar: rolagem de PÁGINA só garante a folga depois de rolar até o
   fim — na posição inicial (scroll 0), se o conteúdo natural (cabeçalho
   + ações/tabela/ficha empilhados) já for alto o bastante pra viewport
   curta (zoom do navegador acima de 100%, notebook baixo, celular
   deitado), as abas fixas cobrem conteúdo mesmo sem ninguém ter rolado
   ainda. Prender a altura e rolar por DENTRO de .app-content--fit
   (abaixo) resolve isso de vez: o container nunca renderiza além do
   próprio limite, então a folga vale em qualquer posição de rolagem,
   não só na última. */
.app-shell--fill {
  height: 100dvh;
  overflow: hidden;
}

.app-content--fit {
  min-height: 0;
  /* "auto" no eixo vertical: sem conteúdo suficiente pra rolar (a
     maioria das telas em resolução normal), não faz nada — quando o
     conteúdo empilhado precisa de mais espaço que a viewport tem
     (viewport curta e/ou empilhado), rola por dentro em vez de a
     página inteira crescer. */
  overflow-x: hidden;
  overflow-y: auto;
  /* menos folga embaixo que o padrão: aqui não há rolagem de página para
     "passar por baixo" das abas flutuantes, então só o necessário para
     não cobri-las — e essa garantia agora vale em qualquer altura de
     viewport, não só quando a tela é alta o bastante para nunca
     precisar rolar. */
  padding-bottom: var(--content-bottom-clearance-fit);
}

@media (max-width: 900px) {
  .app-header { padding: 14px 20px 0; }
  /* 190px, mais que a --content-bottom-clearance de 140px — ao
     contrário do que parece, o WindowDock precisa de MAIS espaço aqui,
     não menos: ele sobe (bottom:96px, ver WindowDock.css) pra não
     disputar a faixa de baixo com as abas Voltar/Suporte, que nessa
     largura ficam quase largura total. Medido na prática (768px, dock
     aberto): o topo do dock fica a 176px do rodapé da viewport; 190px
     dá uma margem de 14px sobre isso. */
  .app-content { padding: 26px 20px 190px; }

  /* Tela de tablet: sem espaço para nome + ícone em cada item, então some
     o texto e sobra só o ícone (nome ainda acessível via title/leitor de
     tela). Isso também evita que a busca quebre linha e passe a disputar
     altura com o nome/nav de forma instável durante a animação de scroll. */
  .app-header__row {
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;
  }

  .app-brand { flex-shrink: 0; padding-bottom: 0; }
  .app-brand__word { font-size: 30px; }
  .app-brand__module { display: none; }

  .app-nav {
    flex-shrink: 0;
    flex-wrap: nowrap;
    gap: 4px;
    padding-top: 0;
  }

  /* Ícone sozinho vira o alvo de toque inteiro — o padding garante os
     44px mínimos mesmo com o SVG visual bem menor que isso. */
  .app-nav__item {
    gap: 0;
    justify-content: center;
    min-width: var(--tap-target);
    min-height: var(--tap-target);
    padding: 10px;
    border-bottom-width: 2px;
    margin-bottom: -2px;
  }

  .app-nav__item svg {
    width: 24px;
    height: 24px;
  }

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

  /* Com o texto fora, o rótulo "O que você busca?" também pode sumir —
     sobra só o campo, que já é autoexplicativo pelo ícone de lupa. */
  .app-search__label { display: none; }

  .app-search {
    flex: 1 1 140px;
    min-width: 0;
    padding-top: 0;
  }

  .app-search__box {
    width: 100%;
    max-width: 240px;
    margin-left: auto;
  }

  /* Focada, cresce além do teto de 240px — ainda sem estourar a linha,
     porque o item já é o único flexível dela (marca e nav são fixos). */
  .app-search__box:focus-within {
    width: 100%;
    max-width: min(360px, 60vw);
  }

  /* O rabisco decorativo poderia "vazar" para a linha de baixo quando o
     cabeçalho quebra em várias linhas nessa largura. */
  .app-brand__swoosh { display: none; }
}

@media (max-width: 640px) {
  .app-header { padding: 10px 12px 0; }
  .app-header__row { gap: 10px; }
  .app-brand__word { font-size: 22px; }
  .app-nav { gap: 2px; }
  .app-nav__item { padding: 10px 8px; }
  .app-nav__item svg { width: 20px; height: 20px; }
  .app-search__box { padding: 8px 10px; }
  .app-search__box svg { width: 16px; height: 16px; flex-shrink: 0; }
  .app-theme-toggle { width: 34px; height: 34px; }
  .app-theme-toggle svg { width: 16px; height: 16px; }
  /* Nunca abaixo de 16px: abaixo disso o Safari iOS dá zoom automático
     ao focar o campo — pior ainda em quem já está com dificuldade de
     leitura sob sol. */
  .app-search__box input { font-size: var(--font-size-input); }

  /* Focar a busca quebra a linha do cabeçalho e ela desce para baixo da
     marca+navegação, ocupando a largura toda da tela — bem mais fácil
     de mirar e ler com o polegar do que a caixa comprimida de sempre.
     Some assim que o foco sai (sem resultado/lista pendurada nela hoje,
     então não há razão para ficar expandida depois de usada). */
  .app-header__row:has(.app-search__box:focus-within) {
    flex-wrap: wrap;
  }

  .app-header__row:has(.app-search__box:focus-within) .app-search {
    flex: 1 1 100%;
    padding-top: 6px;
  }

  .app-header__row:has(.app-search__box:focus-within) .app-search__box {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 400px) {
  .app-header__row { gap: 8px; }
  .app-brand__word { font-size: 19px; }
  .app-nav { gap: 0; }
  .app-nav__item { padding: 10px 6px; }
  .app-nav__item svg { width: 18px; height: 18px; }
  /* Reduz a caixa, não a fonte — some o rótulo por cima do campo
     (sobra só a lupa) em vez de encolher o texto abaixo do limiar de
     zoom do iOS. */
  .app-search { flex: 1 1 90px; }
  .app-search__box { padding: 8px; gap: 5px; }
}
@keyframes confirm-dialog-in {
  from { transform: translateY(14px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.confirm-dialog__overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 20, 46, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.confirm-dialog {
  width: min(380px, 100%);
  padding: 32px 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  background: var(--acrylic-accent);
  backdrop-filter: blur(var(--acrylic-blur)) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(var(--acrylic-blur)) saturate(var(--acrylic-saturate));
  border: 1px solid var(--blue-panel-edge);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-8);
  color: var(--white);
  animation: confirm-dialog-in 0.2s var(--ease);
}

.confirm-dialog:focus-visible {
  outline: none;
}

.confirm-dialog__title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 21px;
  font-weight: 700;
}

.confirm-dialog__message {
  margin: 0;
  font-size: 15px;
  opacity: 0.85;
}

.confirm-dialog__actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.confirm-dialog__btn {
  flex: 1;
  height: 50px;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s var(--ease), transform 0.15s var(--ease), border-color 0.15s var(--ease);
}

.confirm-dialog__btn--cancel {
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  color: var(--white);
}

.confirm-dialog__btn--cancel:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}

.confirm-dialog__btn--confirm {
  border: 0;
  background: var(--amber);
  color: var(--white);
}

.confirm-dialog__btn--confirm:hover {
  background: var(--amber-hover);
  transform: translateY(-1px);
}

/* Em mobile o diálogo ancora embaixo em vez de centralizar — com uma mão
   só ocupada, o polegar alcança o rodapé da tela muito mais fácil que o
   meio dela. */
@media (max-width: 640px) {
  @keyframes confirm-dialog-in-mobile {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  .confirm-dialog__overlay {
    align-items: flex-end;
    padding: 0;
  }

  .confirm-dialog {
    width: 100%;
    padding: 28px 22px calc(22px + env(safe-area-inset-bottom, 0px));
    border-radius: 24px 24px 0 0;
    animation: confirm-dialog-in-mobile .22s var(--ease);
  }

  .confirm-dialog__btn {
    height: var(--tap-target);
  }
}
/* Três colunas: ações | tabela | ficha do selecionado. */
.registry {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: stretch;
  height: 100%;
  min-height: 0;
}

/* Duas colunas: tabela | controles — sem a coluna de ações à esquerda. */
.registry--table-controls {
  grid-template-columns: minmax(0, 1fr) 260px;
}

/* Uma coluna só: a tabela ocupa a largura toda (Tributações). */
.registry--single {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1024px) {
  /* Empilhado não faz sentido prender a altura na janela: cada bloco assume
     seu tamanho natural e quem rola é a página. */
  .registry {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
  }

  /* A ficha (com o campo de busca) fica por último na ordem natural do
     código — nesta largura a página rola, e as abas "Voltar"/"Suporte"
     ficam fixas no rodapé da tela. Se a busca ficasse mesmo por último,
     ela cairia bem na faixa onde essas abas ficam, sendo tampada por elas
     ao carregar a página. Reordenar para logo após as ações resolve os
     dois problemas: a busca não fica escondida, e ainda aparece antes da
     tabela, que é o bloco mais longo.
     Em mobile (<640px) RegistryActions e a ficha de RegistryDetails já
     encolhem para um botão-gatilho de uma linha cada (ver os respectivos
     CSS) — então mesmo aparecendo antes da tabela, o custo vertical real
     é mínimo; quem domina a tela é a lista, que é o que importa em campo. */
  .registry > .registry-details {
    order: -1;
  }

  .registry > .registry-actions {
    order: -2;
  }
}
.registry-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  border-radius: var(--radius-md);
  background: var(--blue-panel);
  min-height: 0;
  /* Contorno sutil + sombra de elevação: o painel agora flutua sobre um
     canvas neutro, não sobre um fundo da mesma cor. */
  border: 1.5px solid rgba(255, 255, 255, .28);
  box-shadow: var(--shadow-2);
  color: var(--white);
  transition: background-color .2s var(--ease), box-shadow .2s var(--ease);
}

/* O painel é item de grid (altura definida pelo `.registry`), então numa
   janela baixa ele pode ter menos altura do que os botões precisam — sem
   isto o conteúdo simplesmente vazava por cima do rodapé da página. Rola
   por dentro em vez de perder botão. Só no painel de desktop: a folha
   mobile já tem seu próprio overflow-y (ver `.registry-actions--sheet`). */
.registry-actions--panel {
  overflow-y: auto;
}

.registry-actions__title {
  margin: 0 0 6px;
  text-align: center;
  font-size: 21px;
  line-height: 1.25;
}

.registry-actions__title--brand {
  font-family: var(--font-brand);
  font-size: 32px;
  font-weight: 400;
}

.registry-actions__search-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
}

.registry-actions__search-label {
  font-size: 15px;
  font-weight: 600;
}

.registry-actions__search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px 5px 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-control);
  box-shadow: var(--shadow-1);
  transition: box-shadow .15s var(--ease);
}

.registry-actions__search:focus-within {
  box-shadow: 0 0 0 3px var(--accent-soft-strong);
}

.registry-actions__search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--tile-yellow);
}

.registry-actions__search-icon svg {
  width: 19px;
  height: 19px;
}

.registry-actions__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-on-control);
  font-family: var(--font-ui);
  font-size: 15px;
}

.registry-actions__fields {
  margin: -6px 0 0;
  font-size: 14px;
  line-height: 1.4;
}

.registry-actions__fields-title {
  margin: 0;
}

.registry-actions__field {
  display: flex;
  gap: 4px;
}

.registry-actions__field dt {
  flex-shrink: 0;
}

.registry-actions__field dd {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.registry-actions__actions-title {
  margin: 4px 0 -4px;
  font-size: 15px;
  font-weight: 600;
}

.registry-actions__btn {
  flex-shrink: 0;
  height: 52px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--amber);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 18px;
  cursor: pointer;
  transition: background-color .15s var(--ease), transform .15s var(--ease);
}

.registry-actions__btn--detached {
  margin-top: 34px;
}

.registry-actions__btn:hover:not(:disabled) {
  background: var(--amber-hover);
  transform: translateY(-1px);
}

.registry-actions__btn--danger {
  background: var(--danger);
}

.registry-actions__btn--danger:hover:not(:disabled) {
  background: var(--danger-hover);
}

.registry-actions__btn:disabled {
  opacity: .55;
  cursor: default;
}

/* ---------- Mobile: gatilho + folha ----------
   Escondidos por padrão (desktop/tablet mostram .registry-actions--panel
   normalmente); trocam de lugar abaixo do breakpoint mobile. */
.registry-actions--trigger-slot {
  display: none;
}

.registry-actions__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: var(--tap-target);
  padding: 0 18px;
  border: 1.5px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius-md);
  background: var(--blue-panel);
  box-shadow: var(--shadow-1);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: var(--font-size-md);
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s var(--ease);
}

.registry-actions__trigger::after {
  content: "▾";
  font-size: 13px;
  opacity: .8;
}

.registry-actions__trigger:active {
  background: var(--blue-panel-edge);
}

@keyframes registry-actions-sheet-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes registry-actions-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.registry-actions__sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-end;
  background: rgba(6, 20, 46, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: registry-actions-overlay-in .18s var(--ease);
}

.registry-actions--sheet {
  position: relative;
  width: 100%;
  max-height: min(80vh, 640px);
  overflow-y: auto;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  border: 1px solid var(--blue-panel-edge);
  border-bottom: 0;
  box-shadow: var(--shadow-8);
  padding: 10px 22px calc(22px + env(safe-area-inset-bottom, 0px));
  animation: registry-actions-sheet-in .22s var(--ease);
}

.registry-actions__sheet-handle {
  align-self: center;
  width: 40px;
  height: 4px;
  margin: 4px auto 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .35);
}

.registry-actions__sheet-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: var(--white);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 640px) {
  .registry-actions--panel {
    display: none;
  }

  .registry-actions--trigger-slot {
    display: block;
  }
}
/* min-height: 0 em toda a cadeia (table -> panel -> rows) é o que permite a
   lista rolar por dentro; sem isso um filho flex nunca encolhe abaixo do
   próprio conteúdo e o scroll simplesmente não acontece. */
.registry-table {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.registry-table__title {
  margin: 0 0 12px;
  text-align: center;
  font-family: var(--font-brand);
  font-size: 32px;
  font-weight: 400;
  color: var(--white);
}

.registry-table__title--plain {
  text-align: left;
  font-family: var(--font-ui);
  font-size: 26px;
  font-weight: 600;
}

.registry-table__tabs {
  display: flex;
  gap: 4px;
}

.registry-table__tab {
  flex: 1;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--blue-panel-edge);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 21px;
  cursor: pointer;
  transition: background-color .15s var(--ease);
}

.registry-table__tab--active {
  background: var(--blue-panel);
}

.registry-table__tab:not(.registry-table__tab--active):hover {
  background: color-mix(in srgb, var(--blue-panel-edge), white 8%);
}

.registry-table__panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 20px 18px;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--blue-panel);
  border: 1.5px solid rgba(255, 255, 255, .28);
  border-top: 0;
  box-shadow: var(--shadow-2);
}

/* Sem abas em cima, o painel fecha os quatro cantos. */
.registry-table__panel--solo {
  border-radius: var(--radius-md);
  border-top: 1.5px solid rgba(255, 255, 255, .28);
}

/* Envolve header + linhas: rola na horizontal como unidade só (os dois
   filhos têm o mesmo min-width calculado a partir da soma das colunas),
   então nunca fica o cabeçalho fora de sincronia com as linhas embaixo.
   É a rede de segurança para tablets estreitos ou módulos com muitas
   colunas — em mobile este bloco inteiro cede lugar aos cards. */
.registry-table__summary {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.registry-table__summary-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 130px;
  padding: 5px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .1);
}

.registry-table__summary-label {
  font-size: var(--font-size-xs);
  color: var(--white);
  opacity: .8;
}

.registry-table__summary-value {
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--white);
}

.registry-table__summary-item--positive .registry-table__summary-value {
  color: var(--positive);
}

.registry-table__summary-item--negative .registry-table__summary-value {
  color: var(--danger);
}

.registry-table__scroll {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  overflow-y: hidden;
}

.registry-table__header,
.registry-table__row {
  display: grid;
  gap: 2px;
  align-items: center;
}

.registry-table__header {
  flex-shrink: 0;
  padding: 0 6px 6px;
  color: var(--white);
  font-size: 20px;
}

.registry-table__header > span {
  padding: 0 8px;
}

.registry-table__rows {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 6px;
  scrollbar-color: rgba(255, 255, 255, .55) rgba(255, 255, 255, .15);
  scrollbar-width: thin;
}

.registry-table__rows::-webkit-scrollbar {
  width: 8px;
}

.registry-table__rows::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .15);
  border-radius: 4px;
}

.registry-table__rows::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .55);
  border-radius: 4px;
}

.registry-table__rows::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, .75);
}

.registry-table__row {
  min-height: 40px;
  /* sem isto as linhas encolheriam para caber, em vez de gerar rolagem */
  flex-shrink: 0;
  padding: 4px 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--blue-panel-edge);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 17px;
  text-align: left;
  cursor: pointer;
  /* A linha inteira é um <button> (clicar seleciona o registro), e por
     padrão navegadores bloqueiam seleção de texto dentro de botões. Isso
     reabilita — arrastar sobre o texto seleciona normalmente, e um clique
     simples (sem arrastar) continua dando `onClick`, porque um clique que
     produz seleção não dispara o evento `click`. */
  user-select: text;
  -webkit-user-select: text;
  /* Barra de seleção via box-shadow (não border): não consome espaço de
     layout, então as colunas continuam alinhadas com o cabeçalho mesmo
     quando a linha entra/sai do estado selecionado. */
  box-shadow: inset 3px 0 0 transparent;
  transition: background-color .15s var(--ease), box-shadow .15s var(--ease);
}

.registry-table__row > span {
  padding: 0 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Cursor de texto só em cima do valor em si — o resto da linha (o
     respiro ao redor) continua com o ponteiro de "clicável". */
  cursor: text;
}

/* Colunas separadas por linhas finas, como no desenho de referência. */
.registry-table__row > span + span {
  border-left: 1.5px solid rgba(255, 255, 255, .3);
}

/* Feedback sutil: um leve clareamento, não uma troca de cor abrupta. */
.registry-table__row:not(.registry-table__row--empty):hover {
  background: color-mix(in srgb, var(--blue-panel-edge), white 10%);
}

/* Seleção: tingimento suave do accent + barra à esquerda, em vez de um
   bloco sólido de cor — a linha continua legível ao lado das vizinhas. */
.registry-table__row--selected,
.registry-table__row--selected:hover {
  background: color-mix(in srgb, var(--blue-panel-edge), var(--tile-yellow) 24%);
  box-shadow: inset 3px 0 0 var(--tile-yellow);
}

.registry-table__row--empty {
  cursor: default;
}

.registry-table__footer {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 18px;
}

.registry-table__footer-btn {
  min-width: 160px;
  height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--amber);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 16px;
  cursor: pointer;
  transition: background-color .15s var(--ease), transform .15s var(--ease);
}

.registry-table__footer-btn:hover:not(:disabled) {
  background: var(--amber-hover);
  transform: translateY(-1px);
}

.registry-table__footer-btn--danger {
  background: var(--danger);
}

.registry-table__footer-btn--danger:hover:not(:disabled) {
  background: var(--danger-hover);
}

.registry-table__footer-btn:disabled {
  opacity: .55;
  cursor: default;
}

/* ---------- Cards (mobile) ----------
   Escondidos por padrão — só aparecem abaixo do breakpoint mobile
   (ver bloco @media (max-width: 640px) mais abaixo), trocando de
   lugar com .registry-table__scroll. */
.registry-table__cards {
  display: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  flex-direction: column;
  gap: 10px;
  padding-right: 2px;
  scrollbar-color: rgba(255, 255, 255, .55) rgba(255, 255, 255, .15);
  scrollbar-width: thin;
}

.registry-table__card {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: var(--tap-target);
  padding: 14px 16px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--blue-panel-edge);
  color: var(--white);
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
  /* Mesma liberação de seleção de texto da linha desktop (ver
     .registry-table__row) — o card também é um <button>. */
  user-select: text;
  -webkit-user-select: text;
  box-shadow: inset 3px 0 0 transparent;
  transition: background-color .15s var(--ease), box-shadow .15s var(--ease);
}

.registry-table__card:active {
  background: color-mix(in srgb, var(--blue-panel-edge), white 10%);
}

.registry-table__card--selected {
  background: color-mix(in srgb, var(--blue-panel-edge), var(--tile-yellow) 24%);
  box-shadow: inset 3px 0 0 var(--tile-yellow);
}

.registry-table__card-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.registry-table__card-code {
  flex-shrink: 0;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .18);
  font-size: var(--font-size-xs);
  font-weight: 600;
  cursor: text;
}

.registry-table__card-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-md);
  font-weight: 600;
  cursor: text;
}

.registry-table__card-meta {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
}

.registry-table__card-meta-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.registry-table__card-meta-item dt {
  font-size: var(--font-size-xs);
  opacity: .75;
}

.registry-table__card-meta-item dd {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: text;
}

.registry-table__cards-empty {
  margin: 0;
  padding: 24px 12px;
  text-align: center;
  opacity: .75;
  font-size: var(--font-size-sm);
}

@media (max-width: 1024px) {
  .registry-table__tab { font-size: 17px; padding: 10px 12px; }
  .registry-table__panel { padding: 14px 14px 16px; }
  .registry-table__header { font-size: 16px; }
  .registry-table__row { font-size: 15px; }
  .registry-table__row > span { padding: 0 10px; }
}

/* Mobile: a grade (com sua rolagem horizontal) cede lugar aos cards —
   4-7 colunas lado a lado não cabem numa tela de celular de forma
   legível, e nenhum destes módulos precisa comparar colunas entre si. */
@media (max-width: 640px) {
  .registry-table__scroll { display: none; }
  .registry-table__cards { display: flex; }
  .registry-table__panel { padding: 12px; }
}
.photo-dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 88px;
  border-radius: var(--radius-md);
  border: 1.5px dashed rgba(255, 255, 255, 0.4);
  color: var(--white);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}

.photo-dropzone:hover,
.photo-dropzone:focus-visible {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}

.photo-dropzone--dragover {
  border-color: var(--amber);
  background: rgba(255, 255, 255, 0.1);
}

.photo-dropzone--disabled {
  cursor: default;
  opacity: 0.6;
}

.photo-dropzone__placeholder {
  width: 64px;
  height: auto;
}

.photo-dropzone__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-dropzone__hint {
  position: absolute;
  bottom: 4px;
  padding: 2px 8px;
  background: var(--blue-panel-edge);
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
}

.photo-dropzone__uploading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 20, 46, 0.55);
  font-size: 13px;
  font-weight: 600;
}
.registry-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.registry-details__search-label {
  align-self: center;
  font-size: 19px;
  color: var(--text-primary);
}

.registry-details__search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px 5px 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-control);
  box-shadow: var(--shadow-1);
  transition: box-shadow .15s var(--ease);
}

.registry-details__search:focus-within {
  box-shadow: 0 0 0 3px var(--accent-soft-strong);
}

.registry-details__search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--tile-yellow);
}

.registry-details__search-icon svg {
  width: 19px;
  height: 19px;
}

.registry-details__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-on-control);
  font-family: var(--font-ui);
  font-size: 15px;
}

.registry-details__card {
  flex: 1;
  min-height: 0;
  margin-top: 8px;
  padding: 14px 18px 20px;
  border-radius: var(--radius-lg);
  background: var(--blue-panel-edge);
  box-shadow: var(--shadow-1);
  color: var(--white);
  overflow-y: auto;
}

.registry-details__status-title {
  margin: 0;
  text-align: center;
  font-size: 16px;
}

.registry-details__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 4px;
}

.registry-details__status-side {
  font-size: 15px;
}

/* Interruptor Ativo/Inativo — o "botão" branco desliza sobre o trilho, que
   fica verde quando ativo e vermelho quando inativo. */
.registry-details__switch {
  position: relative;
  width: 74px;
  height: 40px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--danger);
  cursor: pointer;
  transition: background-color .18s var(--ease);
}

.registry-details__switch--on {
  background: #A8E063;
}

.registry-details__switch:disabled {
  opacity: .5;
  cursor: default;
}

.registry-details__switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 2px 6px rgba(4, 30, 82, .3);
  transition: transform .18s var(--ease);
}

/* Ativo: botão fica à esquerda, perto do rótulo "Ativo". Inativo (padrão):
   desliza para a direita, perto do rótulo "Inativo". */
.registry-details__switch:not(.registry-details__switch--on) .registry-details__switch-knob {
  transform: translateX(34px);
}

.registry-details__fields {
  margin: 22px 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.registry-details__field {
  display: flex;
  gap: 6px;
  font-size: 15px;
}

.registry-details__field dt {
  flex-shrink: 0;
}

.registry-details__field dd {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Área de imagem ---------- */
.registry-details__media-label {
  margin: 6px 0 0;
  font-size: 15px;
}

.registry-details__media-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}

.registry-details__media-frame svg {
  width: 108px;
  height: auto;
}

.registry-details__media-hint {
  position: absolute;
  padding: 2px 8px;
  background: var(--blue-panel-edge);
  font-size: 13px;
  white-space: nowrap;
}

.registry-details__media--stacked {
  display: flex;
  justify-content: center;
  margin-top: 2px;
}

/* Rótulo ao lado da imagem, como no desenho de Produtos. */
.registry-details__media--inline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.registry-details__media--inline .registry-details__media-label {
  margin: 0;
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .registry-details__card { flex: none; }
}

/* ---------- Mobile: gatilho + folha ----------
   O slot com a ficha inline e o gatilho trocam de lugar no breakpoint
   mobile — a busca (acima) continua sempre visível nos dois casos. */
.registry-details__trigger {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap-target);
  padding: 0 18px;
  margin-top: 4px;
  border: 1.5px dashed rgba(255, 255, 255, .35);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--white);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
}

.registry-details__trigger::after {
  content: "▾";
  font-size: 12px;
  opacity: .8;
}

.registry-details__trigger:active {
  background: rgba(255, 255, 255, .08);
}

@keyframes registry-details-sheet-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes registry-details-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.registry-details__sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-end;
  background: rgba(6, 20, 46, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: registry-details-overlay-in .18s var(--ease);
}

.registry-details__sheet {
  position: relative;
  width: 100%;
  max-height: min(80vh, 640px);
  overflow-y: auto;
  padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  border: 1px solid var(--blue-panel-edge);
  border-bottom: 0;
  background: var(--blue-panel);
  box-shadow: var(--shadow-8);
  animation: registry-details-sheet-in .22s var(--ease);
}

.registry-details__sheet .registry-details__card {
  margin-top: 24px;
}

.registry-details__sheet-handle {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 40px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .35);
}

.registry-details__sheet-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: var(--white);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 640px) {
  .registry-details__card-slot--panel {
    display: none;
  }

  .registry-details__trigger {
    display: flex;
  }
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.form-field__hint {
  margin: -2px 0 0;
  padding-left: 6px;
  color: var(--white);
  opacity: 0.65;
  font-size: 12px;
  line-height: 1.35;
}

.form-field__label {
  padding-left: 6px;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  color: var(--white);
}

.form-field__control {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap-target);
  height: 54px;
  padding: 0 10px 0 22px;
  border-radius: var(--radius-pill);
  background: var(--surface-control);
  box-shadow: var(--shadow-1);
  transition: background-color .15s var(--ease), box-shadow .15s var(--ease);
}

/* Campo preenchido por outro cadastro — cinza enquanto não houver origem. */
.form-field__control--disabled {
  background: var(--border-strong);
  box-shadow: none;
}

/* Glow em âmbar (não no accent azul): o campo já fica sobre um painel
   azul — um anel na mesma cor do fundo praticamente sumiria. O âmbar é
   a cor de "atenção/ação" já usada em todo o resto do sistema. */
.form-field__control:focus-within {
  box-shadow: 0 0 0 3px rgba(255, 164, 20, .45), var(--shadow-2);
}

.form-field__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-on-control);
  font-family: var(--font-ui);
  /* Nunca abaixo de 16px (--font-size-input): é o piso que impede o
     zoom automático do Safari iOS ao focar o campo. */
  font-size: var(--font-size-input);
}

.form-field__input:disabled {
  cursor: not-allowed;
}

.form-field__lookup {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--tile-yellow);
  cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}

.form-field__lookup:hover:not(:disabled) {
  background: var(--accent-soft);
  color: var(--tile-yellow-hover);
}

.form-field__lookup:disabled {
  cursor: not-allowed;
  opacity: .8;
}

.form-field__lookup svg {
  width: 30px;
  height: 30px;
  /* traço encorpado como no desenho — o padrão do ícone é fino demais aqui */
  stroke-width: 2.8;
}

@media (max-width: 900px) {
  /* --font-size-lg (clamp) já encolhe o rótulo sozinho nesta largura. */
  .form-field__control { height: 48px; padding-left: 18px; }
  .form-field__lookup svg { width: 22px; height: 22px; }
}
@keyframes lookup-modal-in {
  from { transform: translateY(14px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.lookup-modal__overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 20, 46, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.lookup-modal {
  width: min(460px, 100%);
  max-height: min(560px, 90vh);
  padding: 28px 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--acrylic-accent);
  backdrop-filter: blur(var(--acrylic-blur)) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(var(--acrylic-blur)) saturate(var(--acrylic-saturate));
  border: 1px solid var(--blue-panel-edge);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-8);
  color: var(--white);
  animation: lookup-modal-in 0.2s var(--ease);
}

.lookup-modal:focus-visible {
  outline: none;
}

.lookup-modal__title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: 700;
}

.lookup-modal__search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.lookup-modal__search svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.8;
}

.lookup-modal__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 15px;
}

.lookup-modal__search input:focus {
  outline: none;
}

.lookup-modal__results {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lookup-modal__hint {
  margin: 20px 0;
  text-align: center;
  font-size: 14px;
  opacity: 0.7;
}

.lookup-modal__hint--error {
  color: var(--danger);
  opacity: 1;
}

.lookup-modal__result {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--white);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s var(--ease);
}

.lookup-modal__result:hover,
.lookup-modal__result:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}

.lookup-modal__result-primary {
  font-size: 15px;
  font-weight: 600;
}

.lookup-modal__result-secondary {
  font-size: 13px;
  opacity: 0.75;
}

.lookup-modal__cancel {
  align-self: center;
  height: 40px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.lookup-modal__cancel:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 640px) {
  .lookup-modal__overlay {
    align-items: flex-end;
    padding: 0;
  }

  .lookup-modal {
    width: 100%;
    max-height: 85vh;
    border-radius: 24px 24px 0 0;
  }
}
@keyframes registry-form-modal-in {
  from { transform: translateY(14px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.registry-form-modal__overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 20, 46, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.registry-form-modal {
  width: min(460px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 32px 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--acrylic-accent);
  backdrop-filter: blur(var(--acrylic-blur)) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(var(--acrylic-blur)) saturate(var(--acrylic-saturate));
  border: 1px solid var(--blue-panel-edge);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-8);
  color: var(--white);
  animation: registry-form-modal-in 0.2s var(--ease);
}

.registry-form-modal:focus-visible {
  outline: none;
}

.registry-form-modal__title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 21px;
  font-weight: 700;
}

.registry-form-modal__media {
  display: flex;
  align-items: center;
  gap: 14px;
}

.registry-form-modal__media-label {
  font-size: 15px;
}

.registry-form-modal__error {
  margin: 0;
  font-size: 14px;
  color: var(--amber);
}

.registry-form-modal__fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.registry-form-modal__actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.registry-form-modal__btn {
  flex: 1;
  height: 50px;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s var(--ease), transform 0.15s var(--ease), border-color 0.15s var(--ease);
}

.registry-form-modal__btn--cancel {
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  color: var(--white);
}

.registry-form-modal__btn--cancel:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}

.registry-form-modal__btn--confirm {
  border: 0;
  background: var(--amber);
  color: var(--white);
}

.registry-form-modal__btn--confirm:hover {
  background: var(--amber-hover);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  @keyframes registry-form-modal-in-mobile {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  .registry-form-modal__overlay {
    align-items: flex-end;
    padding: 0;
  }

  .registry-form-modal {
    width: 100%;
    max-height: calc(100vh - 24px);
    padding: 28px 22px calc(22px + env(safe-area-inset-bottom, 0px));
    border-radius: 24px 24px 0 0;
    animation: registry-form-modal-in-mobile .22s var(--ease);
  }

  .registry-form-modal__btn {
    height: var(--tap-target);
  }
}
.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;
  }
}