/* Pagina di accesso Orion Hub davanti ad Authelia. Token del design system BC R.01/2026 (Graphic/02_For_Web/tokens),
   marchio Orion AI da GRX-012 (Graphic/00_Sources/logos/orion-ai/). */
@font-face { font-family: Inter; src: url("/authelia/bc/inter-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --bc-pink: #DB6689; --bc-teal: #08627E; --bc-teal-deep: #064E66;
  --bc-mist: #E7E8EE; --bc-paper: #FFFFFF; --bc-ink: #1A2530; --bc-muted: rgba(26, 37, 48, 0.62);
  --bc-night: #16202B;
  --bc-radius-md: 10px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 400 16px/1.5 Inter, system-ui, sans-serif; color: var(--bc-ink); background: var(--bc-paper);
  -webkit-font-smoothing: antialiased;
}

.pagina { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(440px, 1fr); }

/* Lato sinistro: marchio Orion su fondo neutro, niente effetti. */
.visual {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  background: var(--bc-mist); border-right: 1px solid rgba(26, 37, 48, 0.08);
}
.visual-mark { width: 112px; height: 112px; }
.firma { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bc-muted); }

/* Lato destro: il form. */
.lato-form { display: grid; place-items: center; padding: 48px 40px; background: var(--bc-paper); }
.scheda { width: min(380px, 100%); display: grid; gap: 26px; }
.testa { display: flex; align-items: center; gap: 14px; }
.marchio { display: none; width: 44px; height: 44px; }
h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.sotto { margin: 4px 0 0; font-size: 14px; color: var(--bc-muted); }

.passo { display: grid; gap: 18px; }
.campo { display: grid; gap: 7px; }
.campo span { font-size: 13px; font-weight: 600; }
input {
  font: inherit; color: inherit; width: 100%; padding: 13px 14px; border: 1px solid rgba(26, 37, 48, 0.18);
  border-radius: var(--bc-radius-md); background: #F7F8FA; transition: border-color .15s, background .15s, box-shadow .15s;
}
input:hover { border-color: rgba(26, 37, 48, 0.32); }
input:focus { outline: none; background: var(--bc-paper); border-color: var(--bc-teal); box-shadow: 0 0 0 4px rgba(8, 98, 126, 0.14); }
.codice { font-size: 26px; font-weight: 600; letter-spacing: 0.4em; text-align: center; font-variant-numeric: tabular-nums; }

.primario {
  font: inherit; font-weight: 600; display: block; text-align: center; text-decoration: none; cursor: pointer;
  padding: 14px 16px; border: 0; border-radius: var(--bc-radius-md); background: var(--bc-teal); color: #fff;
  transition: background .15s, transform .05s;
}
.primario:hover { background: var(--bc-teal-deep); }
.primario:active { transform: translateY(1px); }
.primario:focus-visible, .secondario:focus-visible { outline: 2px solid var(--bc-pink); outline-offset: 3px; }
.primario[disabled] { opacity: 0.6; cursor: progress; }
.secondario { font-size: 14px; color: var(--bc-teal); text-align: center; text-underline-offset: 3px; }

.spiega { margin: 0; font-size: 15px; color: var(--bc-muted); }
.spiega strong { color: var(--bc-ink); }
.avviso {
  margin: 0; padding: 11px 14px; border-radius: var(--bc-radius-md); font-size: 14px;
  background: rgba(219, 102, 137, 0.10); border-left: 3px solid var(--bc-pink);
}
.piede { margin: 0; padding-top: 18px; border-top: 1px solid var(--bc-mist); font-size: 12px; color: var(--bc-muted); }
[hidden] { display: none !important; }

/* Telefono e finestre strette: solo il form, marchio piccolo nella testata. */
@media (max-width: 900px) {
  .pagina { grid-template-columns: 1fr; }
  .visual { display: none; }
  .marchio { display: block; }
  .lato-form { place-items: start center; padding: 48px 16px 40px; }
}