/* Login com Zoho (docs/specs/LOGIN_ZOHO.md, mockup docs/specs/login-zoho-mockup.html).
   Carregado pelas três telas que fazem login e pela página de retorno do Zoho.

   Botão do Zoho: fundo NEUTRO — o guia de marca do Zoho proíbe o logo sobre as cores dele — e o
   logo OFICIAL sem alteração (public/assets/zoho-logo.svg, do kit de zoho.com/branding). As quatro
   cores da marca ficam só no logo; o botão segue os tokens do produto, como o do Google segue os
   dele. */
.btn-zoho { gap: 0.625rem; height: 2.5rem; }
.btn-zoho .zoho-logo { height: 2rem; width: auto; flex: none; }
.btn-zoho:hover { border-color: var(--ring); }
/* Zoho como login PRINCIPAL: um pouco maior que o botão do Google, que é a alternativa. */
.btn-zoho--principal { height: 2.75rem; font-size: 0.9375rem; border-color: var(--ring); }

.auth-opcoes { display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem; width: 100%; max-width: 280px; }
.auth-ou { display: flex; align-items: center; gap: 0.75rem; color: var(--muted-foreground); font-size: 0.75rem; }
.auth-ou::before, .auth-ou::after { content: ""; flex: 1; height: 1px; background: var(--border); }
/* 🔴 Classe com `display` própria vence o `[hidden]` do navegador (CLAUDE.md) — override explícito. */
.auth-ou[hidden] { display: none; }

/* Faixa "Renovar sessão" (estado 4 do mockup): aparece 5 min antes de a sessão do Zoho vencer. */
.faixa-renovar-zoho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.faixa-renovar-zoho[hidden] { display: none; }

/* A página de retorno — vive segundos, só diz que está concluindo. */
.zoho-retorno {
  margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 16px;
  background: var(--background); color: var(--foreground);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 0.875rem;
}

.auth-titulo { margin: 0; font-size: 1rem; font-weight: 600; text-wrap: balance; }

/* Painel de TV: a capa é escura e larga; os botões ficam do tamanho do resto da capa. */
.tv-opcoes { margin: 0 auto; }