/*
 * A PORTA E O "TROCAR PESSOA" — a mesma cara em todos os sites do chão, no
 * desenho da entrada da gestão: fundo de tinta, cartão claro, botão amarelo.
 *
 * A fonte é compartilhado/porta.css; cada site leva uma cópia (e as etiquetas
 * embutem). Mude aqui e rode `node compartilhado/copiar.mjs`. As cores são as
 * do Mflow, aqui dentro, para não depender dos nomes de variável de cada site.
 */
.porta {
  --porta-tinta: #16150F; --porta-claro: #DEDAD0; --porta-amarelo: #FFD400; --porta-amarelo-2: #F2C900;
  --porta-linha: #B9B5A8; --porta-fraca: #615E55; --porta-ruim: #B3271B; --porta-ruim-claro: #FBEAE8;
  position: fixed; inset: 0; z-index: 90; overflow-y: auto;
  min-height: 100vh; min-height: 100dvh; display: grid; place-content: center; gap: 20px;
  padding: 32px 16px; background: var(--porta-tinta); color: var(--porta-tinta);
  font-family: "Barlow", system-ui, sans-serif;
}
.porta[hidden] { display: none; }
.porta-marca {
  justify-self: center; font: 700 1.5rem/1 "Barlow Condensed", system-ui, sans-serif; letter-spacing: .18em;
  text-transform: uppercase; color: var(--porta-amarelo); white-space: nowrap;
}
.porta-marca span { color: var(--porta-claro); }
.porta-cartao {
  width: min(400px, calc(100vw - 32px)); margin: 0; padding: 32px; display: grid; gap: 16px;
  background: #fff; border: 0; border-radius: 14px; box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
}
.porta-cartao h1 { margin: 0; font: 700 1.9rem/1.1 "Barlow Condensed", system-ui, sans-serif; color: var(--porta-tinta); }
.porta-campo { display: grid; gap: 6px; margin: 0; font-weight: 600; font-size: 1rem; color: var(--porta-tinta); }
.porta .porta-pin {
  width: 100%; box-sizing: border-box; min-height: 52px; margin: 0; padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--porta-linha); background: #fff; color: var(--porta-tinta);
  font: 600 1.5rem/1 "Barlow", system-ui, sans-serif; letter-spacing: .3em;
}
.porta .porta-pin:hover { border-color: var(--porta-fraca); }
.porta .porta-pin:focus-visible { outline: 2px solid #1C5FB8; outline-offset: 2px; }
.porta .porta-entrar {
  width: 100%; min-height: 48px; margin: 0; padding: 8px 16px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--porta-amarelo); background: var(--porta-amarelo); color: var(--porta-tinta);
  font: 700 1.05rem/1 "Barlow", system-ui, sans-serif; box-shadow: none; text-transform: none; letter-spacing: 0;
  transition: background-color .15s cubic-bezier(.25, 1, .5, 1);
}
.porta .porta-entrar:hover { background: var(--porta-amarelo-2); border-color: var(--porta-amarelo-2); }
.porta .porta-entrar:disabled { opacity: .6; cursor: progress; }
.porta-erro {
  margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--porta-ruim-claro); color: var(--porta-ruim);
  font-weight: 600; font-size: .95rem;
}
.porta-erro:empty { display: none; }
.porta .porta-link {
  justify-self: start; margin: 0; padding: 4px 0; border: 0; background: none; min-height: 0; cursor: pointer;
  color: #6E5500; font: 600 .95rem/1.3 "Barlow", system-ui, sans-serif; text-decoration: underline; text-underline-offset: 3px;
}

/* "Nome · trocar pessoa", no alto à direita, igual nos quatro sites. */
.pessoa-botao {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin: 0; padding: 6px 12px;
  border: 1px solid #3A362C; border-radius: 8px; background: transparent; color: #DEDAD0; cursor: pointer;
  font: 600 .92rem/1.1 "Barlow", system-ui, sans-serif; white-space: nowrap; box-shadow: none;
  transition: border-color .15s cubic-bezier(.25, 1, .5, 1);
}
.pessoa-botao:hover { border-color: #DEDAD0; }
.pessoa-botao b { color: #fff; font-weight: 700; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) {
  .porta-cartao { padding: 24px; }
  .pessoa-botao .pessoa-larga { display: none; }
}