:root {
  --navy: #07152f;
  --blue: #0753d4;
  --blue-dark: #082f91;
  --gold: #e5a000;
  --muted: #8493ae;
  --danger: #b42318;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #f7f9fc; font-family: Arial, Helvetica, sans-serif; }
body { min-height: 100vh; overflow-x: hidden; }
button, input { font: inherit; }

.stage {
  position: relative;
  width: min(100vw, calc(100vh * 1.5));
  aspect-ratio: 3 / 2;
  margin: 0 auto;
  background: #fff;
  overflow: hidden;
}
.stage > img.artwork {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* Login overlay: positions follow the 1536 x 1024 artwork coordinates. */
.login-input {
  position: absolute;
  left: 10.48%;
  width: 21.50%;
  height: 5.08%;
  border: 0;
  outline: 0;
  background: #fff;
  color: var(--navy);
  padding: 0 2.65% 0 .35%;
  font-size: clamp(10px, 1.04vw, 16px);
}
.login-input::placeholder { color: #98a7be; opacity: 1; }
.login-input:focus { box-shadow: inset 0 0 0 2px rgba(7,83,212,.22); border-radius: 7px; }
#username { top: 41.22%; }
#password { top: 51.66%; padding-right: 2.5%; }

.eye-toggle {
  position: absolute;
  left: 30.25%;
  top: 52.65%;
  width: 1.9%;
  height: 2.5%;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
}
.eye-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.remember-toggle {
  position: absolute;
  left: 6.31%;
  top: 58.90%;
  width: 10.4%;
  height: 2.8%;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.forgot-link {
  position: absolute;
  left: 24.42%;
  top: 58.88%;
  width: 8.8%;
  height: 2.8%;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.login-submit {
  position: absolute;
  left: 6.25%;
  top: 63.28%;
  width: 26.50%;
  height: 5.48%;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 9px;
}
.login-submit:focus-visible,
.sso-button:focus-visible,
.dashboard-hotspot:focus-visible { outline: 3px solid rgba(229,160,0,.85); outline-offset: 3px; }
.login-submit[aria-busy="true"] { cursor: progress; }

.sso-button {
  position: absolute;
  left: 6.25%;
  top: 74.90%;
  width: 26.50%;
  height: 5.55%;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 9px;
}

.login-message {
  position: absolute;
  left: 6.31%;
  top: 69.25%;
  width: 26.45%;
  margin: 0;
  color: var(--danger);
  font-size: clamp(9px, .83vw, 13px);
  font-weight: 700;
  text-align: center;
}

/* Dashboard interactive zones. */
.dashboard-hotspot {
  position: absolute;
  top: 79.78%;
  height: 5.57%;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 10px;
}
.dashboard-hotspot.daily { left: 12.63%; width: 22.01%; }
.dashboard-hotspot.monthly { left: 39.26%; width: 22.01%; }
.dashboard-hotspot.board { left: 65.89%; width: 22.01%; }

.dashboard-message {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) translateY(20px);
  width: min(92vw, 680px);
  padding: 13px 18px;
  border-radius: 10px;
  background: rgba(7,21,47,.95);
  color: #fff;
  text-align: center;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: .2s ease;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  z-index: 20;
}
.dashboard-message.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-aspect-ratio: 3/2) {
  .stage { width: 100vw; }
}

@media (max-width: 720px) {
  body { background: #fff; }
  .stage {
    width: 100vw;
    min-width: 720px;
    transform-origin: top left;
  }
  .viewport-mobile {
    width: 100vw;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
}

/* Saida discreta no canto superior direito do cabecalho. */
.logout-hotspot {
  position: absolute;
  right: 2.5%;
  top: 3.1%;
  width: 4.6%;
  height: 5.5%;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  cursor: pointer;
}
.logout-hotspot::before,
.logout-hotspot::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 36%; height: 2px;
  background: rgba(255,255,255,.9);
}
.logout-hotspot::before { transform: translate(-50%,-50%) rotate(45deg); }
.logout-hotspot::after { transform: translate(-50%,-50%) rotate(-45deg); }
.logout-hotspot:hover { background: rgba(255,255,255,.16); }
.logout-hotspot:focus-visible { outline: 3px solid rgba(229,160,0,.9); outline-offset: 2px; }

@media (max-width: 720px) {
  .stage { min-width: 0; width: 100vw; }
  .viewport-mobile { overflow: hidden; }
}

/* Atalho de administracao visivel apenas para administradores. */
.admin-users-link {
  position: absolute;
  right: 8.1%;
  top: 4.25%;
  z-index: 5;
  padding: .55% 1.1%;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 8px;
  background: rgba(255,255,255,.09);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(10px, .85vw, 13px);
}
.admin-users-link:hover { background: rgba(255,255,255,.17); }
.admin-users-link:focus-visible { outline: 3px solid rgba(229,160,0,.9); outline-offset: 2px; }