/*
 * Login / cadastro central — padrão Binisoft (auth hub).
 *
 * VARIÁVEL por app (definir em :root do site): --bg, --bg-spot, --surface, --input-bg,
 * --text, --muted, --accent, --danger, --radius, --font, --btn-primary-bg; logo no header.
 *
 * FIXO neste arquivo: dimensões do hub, OTP, feedback ✓/✕, popover ?, links, tentativas.
 */
.auth-hub {
  max-width: 20rem;
  margin: 0 auto;
  padding: 1.25rem 1.1rem 1rem;
}

.auth-hub__title {
  margin: 0 0 1rem;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
}

.auth-hub--password .auth-hub__title {
  margin-bottom: 0.25rem;
  font-size: 1.55rem;
  font-weight: 800;
}

.auth-hub__mark {
  display: block;
  width: 5.5rem;
  height: 5.5rem;
  margin: 0 auto 0.85rem;
  border-radius: 50%;
  object-fit: cover;
  background: #0a0a0a;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px #0b6e84, 0 12px 28px #002e5d22;
}

.auth-hub--password .auth-hub__sub {
  margin-bottom: 1.1rem;
}

.auth-hub__email-hint {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
  word-break: break-word;
}

.auth-hub__sub {
  margin: 0 0 1rem;
  font-size: 0.88rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.4;
}

.auth-hub__sender {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 0 0 1rem;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.35;
}

.auth-hub__sender-text {
  margin: 0;
}

.auth-hub__code-wrap {
  margin: 0.25rem 0 0.5rem;
}

.auth-hub__code-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.auth-hub__code-field {
  flex: 1;
  min-width: 0;
  margin-top: 0;
}

.auth-hub__feedback {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  pointer-events: none;
}

.auth-hub__feedback[hidden] {
  display: none !important;
}

.auth-hub__feedback-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  font-size: 1.35rem;
  font-weight: 800;
  opacity: 0;
  transform: scale(0.6);
  animation: auth-hub-pop 0.45s ease forwards;
}

.auth-hub__feedback--ok .auth-hub__feedback-icon {
  background: rgba(34, 197, 94, 0.2);
  border: 2px solid #22c55e;
  color: #4ade80;
}

.auth-hub__feedback--ok .auth-hub__feedback-icon::before {
  content: "✓";
}

.auth-hub__feedback--err .auth-hub__feedback-icon {
  background: rgba(244, 113, 116, 0.18);
  border: 2px solid var(--danger);
  color: #fca5a5;
}

.auth-hub__feedback--err .auth-hub__feedback-icon::before {
  content: "✕";
}

@keyframes auth-hub-pop {
  0% { opacity: 0; transform: scale(0.55); }
  70% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

.auth-hub__code-input--shake {
  animation: auth-hub-shake 0.42s ease;
}

@keyframes auth-hub-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.auth-hub__code-wrap .field {
  margin-top: 0;
}

.auth-hub__code-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-size: clamp(2rem, 10vw, 2.35rem);
  font-weight: 700;
  letter-spacing: 0.42em;
  text-align: center;
  text-transform: uppercase;
  padding: 0.65rem 0.85rem;
  height: 71px;
  min-height: 71px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--input-bg);
  color: var(--text);
  font-family: inherit;
}

.auth-hub__code-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: transparent;
}

.auth-hub__code-input::placeholder {
  letter-spacing: 0.2em;
  color: rgba(139, 156, 179, 0.45);
  font-weight: 600;
}

.auth-hub__attempts {
  margin: 0 0 0.65rem;
  font-size: 0.8rem;
  color: var(--danger);
  text-align: center;
}

.auth-hub__error {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.35;
  color: #ffc9cb;
  background: rgba(244, 113, 116, 0.12);
  border: 1px solid rgba(244, 113, 116, 0.35);
  text-align: center;
}

.auth-hub__flash {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  font-size: 0.85rem;
  text-align: center;
  color: #dce9ff;
  background: rgba(61, 139, 253, 0.15);
  border: 1px solid rgba(61, 139, 253, 0.35);
}

.auth-hub__btn {
  width: 100%;
  margin-top: 0.75rem;
}

.auth-hub__btn--resend {
  margin-top: 0.5rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text);
  font-weight: 600;
}

.auth-hub__btn--resend:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.auth-hub__links {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.65rem;
  font-size: 0.85rem;
}

.auth-hub__links a,
.auth-hub__links .auth-hub__link-btn {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 0.85rem;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}
.auth-hub__links form { display: inline; margin: 0; }

.auth-hub__links a:hover,
.auth-hub__links .auth-hub__link-btn:hover {
  text-decoration: underline;
}

.auth-hub__links .sep {
  color: var(--muted);
  user-select: none;
}

.auth-hub__help-btn {
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 1px solid rgba(61, 139, 253, 0.55);
  background: rgba(61, 139, 253, 0.12);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.auth-hub__help-btn[aria-expanded="true"] {
  background: var(--accent);
  color: #fff;
}

.auth-hub__popover {
  margin: -0.35rem 0 0.85rem;
  padding: 0.65rem 0.75rem;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--muted);
}

.auth-hub__popover[hidden] {
  display: none !important;
}

.auth-hub__popover p {
  margin: 0 0 0.5rem;
}

.auth-hub__popover-close {
  font-size: 0.8rem;
  background: transparent;
  border: none;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.auth-hub .auth-form .field label {
  font-size: 0.88rem;
  margin-bottom: 0.35rem;
}

.auth-hub--register {
  max-width: 21rem;
}

/* Padrão Binisoft c4789c5 — «E-mail não chega», separadores e aviso de reenvio */
.auth-hub__links-sep { color: var(--muted); margin: 0 0.25rem; }
.auth-hub__links a.auth-hub__link-btn { text-decoration: none; }
.auth-hub__notice { color: var(--muted) !important; }
.auth-hub__ticket { margin-top: 0.75rem; }
.auth-hub textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font: inherit;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius, 8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--input-bg, var(--surface));
  color: var(--text);
}
.auth-hub input[readonly] { opacity: 0.8; cursor: default; }
.auth-hub input[type="file"] { font-size: 0.8rem; color: var(--muted); }

/* Luz da borda do card de login. Obrigatório em todas as apps.
   A cor é padrão por estado, em --login-light-1 e --login-light-2:
   azul no e-mail, amarelo no código, verde no sucesso.
   E-mail e código giram só em :focus-within. O verde liga no sucesso,
   cerca de 1 s, antes do redirect. prefers-reduced-motion deixa a borda parada.
   Os pseudo-elementos são absolutos: a caixa do card não muda. */

@property --login-glow-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@keyframes login-card-glow {
  to { --login-glow-angle: 360deg; }
}

.auth-hub {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

.auth-hub[data-login-state="email"] {
  --login-light-1: #1d4ed8;
  --login-light-2: #38bdf8;
}

.auth-hub[data-login-state="code"] {
  --login-light-1: #eab308;
  --login-light-2: #fde047;
}

.auth-hub[data-login-state="success"] {
  --login-light-1: #16a34a;
  --login-light-2: #4ade80;
}

.auth-hub[data-login-state="email"]:focus-within,
.auth-hub[data-login-state="code"]:focus-within,
.auth-hub[data-login-state="success"] {
  animation: login-card-glow 5s linear infinite;
}

.auth-hub::before,
.auth-hub::after {
  content: none;
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--login-glow-angle),
    transparent 0deg,
    transparent 268deg,
    var(--login-light-1) 314deg,
    color-mix(in srgb, var(--login-light-1) 35%, white) 332deg,
    var(--login-light-2) 348deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.auth-hub[data-login-state="email"]:focus-within::before,
.auth-hub[data-login-state="email"]:focus-within::after,
.auth-hub[data-login-state="code"]:focus-within::before,
.auth-hub[data-login-state="code"]:focus-within::after,
.auth-hub[data-login-state="success"]::before,
.auth-hub[data-login-state="success"]::after { content: ""; }

.auth-hub::before { z-index: 1; }

.auth-hub::after {
  z-index: -1;
  inset: -3px;
  padding: 3px;
  filter: blur(6px);
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  .auth-hub[data-login-state="email"]:focus-within,
  .auth-hub[data-login-state="code"]:focus-within,
  .auth-hub[data-login-state="success"] { animation: none; }
  .auth-hub[data-login-state="email"]:focus-within::before,
  .auth-hub[data-login-state="email"]:focus-within::after,
  .auth-hub[data-login-state="code"]:focus-within::before,
  .auth-hub[data-login-state="code"]:focus-within::after,
  .auth-hub[data-login-state="success"]::before,
  .auth-hub[data-login-state="success"]::after { content: none; }
}

:root {
  --bg: #f4f7fb;
  --surface: #ffffff;
  --input-bg: #ffffff;
  --text: #1c2430;
  --muted: #5c6b7a;
  --accent: #1d4ed8;
  --danger: #b42318;
  --radius: 10px;
  --radius-sm: 10px;
  --border: #d5dde6;
  --font: "Segoe UI", system-ui, sans-serif;
  --btn-primary-bg: #1d4ed8;
  --btn-primary-hover: #1e40af;
}
.auth-body { margin: 0; overflow-x: clip; min-height: 100vh; display: flex; flex-direction: column; font: 16px/1.4 var(--font); color: var(--text); background: var(--bg); }
.site-header { height: 62px; display: flex; align-items: center; padding: 0 24px; background: #fff; border-bottom: 1px solid var(--border); }
@media (max-width: 767px) { .site-header { height: 59px; padding: 0 16px; } }
.site-header__logo { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; font-weight: 650; }
.site-header__logo img,
.auth-body .ebv-brand-mark {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  background: #0a0a0a; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #0b6e84; flex-shrink: 0;
}
@media (max-width: 767px) {
  .site-header__logo img, .auth-body .ebv-brand-mark { width: 32px; height: 32px; }
}
.auth-shell { flex: 1; display: flex; justify-content: center; padding: 1.75rem 24px 2rem; box-sizing: border-box; }
@media (max-width: 767px) { .auth-shell { padding: 1.5rem 16px 2rem; } }
.auth-hub { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; color: var(--text); }
.auth-hub .btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 42px; margin-top: 12px; padding: 12px 16px; border: 0; border-radius: 10px; background: var(--btn-primary-bg); color: #fff; font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; }
.auth-hub .btn.auth-hub__btn--resend { height: auto; min-height: 44px; margin-top: 16px; background: transparent; color: var(--text); border: 1px solid var(--border); font-weight: 600; }
.auth-hub .field label { display: block; margin: 0 0 0.35rem; color: var(--muted); }
.auth-hub .field input[type="email"],
.auth-hub .field input[type="text"],
.auth-hub .field input[type="password"],
.auth-hub .field select { width: 100%; box-sizing: border-box; padding: 10.4px 13.6px; border-radius: 10px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font: inherit; min-height: 44px; }
.auth-hub .pw-wrap { position: relative; }
.auth-hub .pw-wrap input { padding-right: 5.6rem; }
.auth-hub .pw-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 650; cursor: pointer; min-height: 36px; }
.pw-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.35rem 0 0.15rem; }
.pw-action-btn { border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 0.82rem; font-weight: 650; cursor: pointer; padding: 0.2rem 0; text-decoration: underline; text-underline-offset: 2px; }
.pw-action-btn:hover { color: var(--text); }
.auth-hub__spam { margin: 0.4rem 0 0; font-size: 0.8rem; line-height: 1.45; color: var(--muted); }
.auth-hub__link-quiet { font-size: 0.82rem; color: var(--muted); font-weight: 600; }
.auth-hub__link-quiet:hover { color: var(--accent); }
.site-footer { padding: 56px 16px 32px; text-align: center; font-size: 13.6px; color: var(--muted); }
.site-footer a { color: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

.google-complete{width:min(960px,100%);align-self:center;display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid #e3ebe8;border-radius:24px;overflow:hidden;box-shadow:0 22px 65px #10382b18}
.google-complete__intro{background:#113f38;color:#fff;padding:52px 44px;display:flex;flex-direction:column;justify-content:center}
.google-complete__eyebrow,.google-complete__step{font-size:.72rem;letter-spacing:.14em;font-weight:800;color:#86d6bc}
.google-complete__intro h1{font-size:clamp(2.2rem,4vw,3.3rem);line-height:1.08;letter-spacing:-.045em;margin:16px 0}
.google-complete__intro h1 em{color:#a3dfc7;font-style:normal}.google-complete__intro>p{color:#d0e6df;line-height:1.65;max-width:340px}
.google-complete__verified{display:flex;align-items:center;gap:12px;background:#ffffff14;border:1px solid #ffffff25;border-radius:14px;padding:14px;margin-top:30px}.google-complete__verified img{background:#fff;border-radius:50%;padding:5px;box-sizing:content-box}.google-complete__verified span:nth-child(2){flex:1;min-width:0}.google-complete__verified small,.google-complete__verified strong{display:block;overflow-wrap:anywhere}.google-complete__verified small{font-size:.62rem;letter-spacing:.09em;color:#b3d5ca}.google-complete__verified strong{font-size:.87rem}.google-complete__verified span:last-child{color:#9be0bd}
.google-complete__form{padding:52px 44px}.google-complete__step{color:#168776}.google-complete__form h2{font-size:1.7rem;letter-spacing:-.035em;margin:9px 0}.google-complete__form>p{color:#667b75;line-height:1.5;font-size:.9rem;margin-bottom:28px}
.google-complete__form form{display:flex;flex-direction:column}.google-complete__form label{font-weight:700;font-size:.87rem;margin:16px 0 7px;color:#263e36}.google-complete__form input,.google-complete__form select{width:100%;min-height:52px;box-sizing:border-box;padding:12px 15px;border:1px solid #cfded7;border-radius:12px;background:#fbfdfc;color:#183b30;font:inherit;outline:none}.google-complete__form input:focus,.google-complete__form select:focus{border-color:#168776;box-shadow:0 0 0 3px #16877624}.google-complete__hint{color:#71837d;font-size:.78rem;line-height:1.45;margin:14px 0 24px}.google-complete__form button{min-height:52px;border:0;border-radius:12px;background:#117b69;color:white;font:inherit;font-weight:750;cursor:pointer;display:flex;justify-content:center;align-items:center;gap:10px}.google-complete__form button:hover{background:#0c6657}
@media(max-width:700px){.google-complete{grid-template-columns:1fr;border-radius:19px;align-self:start}.google-complete__intro{padding:28px 24px}.google-complete__intro h1{font-size:2.1rem;margin:10px 0}.google-complete__intro>p{font-size:.88rem;margin:0}.google-complete__verified{margin-top:20px}.google-complete__form{padding:27px 24px 30px}.google-complete__form>p{margin-bottom:12px}}

.auth-submit-busy { display: none; }
.auth-form.htmx-request .auth-submit-idle { display: none; }
.auth-form.htmx-request .auth-submit-busy { display: inline; }
.auth-form.htmx-request button[type="submit"] { cursor: wait; opacity: 0.75; }


/* Cadastro: dados de acesso e unidade opcional */
.auth-hub--register { width: min(100%, 520px); max-width: 520px; }
.signup-eyebrow { margin: 0 0 8px; color: #126c82; font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.signup-intro { margin: 0 0 24px; color: #5c6b7a; font-size: .94rem; line-height: 1.5; }
.signup-optional { margin: 20px 0 8px; padding: 16px; border: 1px solid #dce7eb; border-radius: 12px; background: #f7fafb; }
.signup-optional-heading { display: flex; justify-content: space-between; gap: 12px; color: #153c4e; }
.signup-optional-heading span { color: #647a82; font-size: .8rem; }
.signup-optional > p { margin: 4px 0 14px; color: #647a82; font-size: .83rem; }
.signup-unit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.signup-unit-grid .field { margin: 0; min-width: 0; }
.signup-unit-grid label span { font-weight: 400; }
@media (max-width: 520px) { .signup-unit-grid { grid-template-columns: 1fr; } }

@media (min-width: 768px) {
  .auth-hub:not(.auth-hub--register) {
    width: min(100%, 32rem);
    max-width: 32rem;
    box-sizing: border-box;
    padding: 2rem 2.25rem 1.75rem;
  }
}
.google-auth-form{margin-top:14px}.google-auth-button{width:100%;display:flex;align-items:center;justify-content:center;gap:11px;min-height:46px;margin-top:14px;border:1px solid #d7dce4;border-radius:9px;background:#fff;color:#243345;font:600 14px inherit;cursor:pointer}.google-auth-button img{width:20px;height:20px;object-fit:contain}