/* Versão web: login, topo com a unidade e ajustes da tela do caixa (o resto vem de styles.css, o mesmo do programa). */
:root { --altura-topo: 60px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Entrar */
.entrar { min-height: calc(100vh - 32px); display: grid; place-items: center; }
.entrar-card { width: min(380px, 100%); padding: 24px; display: grid; gap: 14px; box-sizing: border-box; }
.entrar-card form { display: grid; gap: 12px; }
.entrar-card h1 { font-family: var(--fonte-titulo); font-size: 20px; font-weight: 600; margin: 0; }
.entrar-marca { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; color: var(--texto-2); }
.entrar-card .campo { display: grid; gap: 4px; }
.entrar-card input { width: 100%; box-sizing: border-box; }
.botao-link { background: none; border: none; padding: 0; color: var(--texto-2); text-decoration: underline; cursor: pointer; justify-self: start; font: inherit; font-size: 13px; }

/* Topo */
.web-topo {
  position: fixed; top: 8px; left: 16px; right: 16px; z-index: 20;
  height: calc(var(--altura-topo) - 16px); box-sizing: border-box;
  display: flex; align-items: center; gap: 10px; padding: 0 12px; min-width: 0;
}
.web-marca { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.web-unidade { font-family: var(--fonte-titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.web-unidade-escolha select { max-width: 220px; }
.web-espaco { flex: 1; }
.web-email { color: var(--texto-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.web-vazio { margin-top: calc(var(--altura-topo) + 24px); text-align: center; color: var(--texto-2); }

/* Telas abaixo do topo; o caixa é a tela principal: sem botão de fechar */
.web .tela { top: var(--altura-topo); }
.web #caixa-fechar { display: none; }
/* Só o ADM abre a planilha no Google Sheets (as unidades não têm acesso a ela) */
.web:not(.papel-adm) #caixa-sheets { display: none; }

/* Usuários */
.convite { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 14px; }
.convite .rotulo { flex-basis: 100%; margin: 0; }
.convite .campo { display: grid; gap: 4px; }
.convite .erro { flex-basis: 100%; margin: 0; }
.usuario-desligado td { color: var(--texto-3); }

@media (max-width: 640px) {
  .web-marca-nome, .web-email, #web-usuarios span { display: none; }
  .web-unidade-escolha select { max-width: 150px; }
}