/* Comparatore Stampa — pagina di accesso (stile Flyerbox).
   Perché un foglio a sé e non app.css: il contratto (SPEC-ACCESSI) mette index.html
   «e i suoi assets» dietro la sessione, quindi la pagina d'accesso non può dipendere
   da app.css senza aprire un buco nella guardia. Qui le variabili --fb-* sono
   ridichiarate identiche a quelle di app.css: se là cambia la palette, va riportata
   anche qui (poche righe, in cambio di una pagina che sta in piedi da sola).
   Da servire senza sessione: login.html, login.css, login.js, img/logo-white.png,
   img/favicon.png. */

:root {
  --fb-orange: #ff4d01;
  --fb-orange-dark: #d84100;
  --fb-orange-soft: #fff1ea;
  --fb-dark: #232323;
  --fb-grey: #5a5a5a;
  --fb-grey-2: #8a8a8a;
  --fb-line: #e6e6e6;
  --fb-bg: #f4f4f2;
  --fb-white: #ffffff;
  --fb-red: #dc2626;
  --fb-radius: 12px;
  --fb-shadow: 0 6px 24px rgba(0, 0, 0, .14);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font); color: var(--fb-dark); background: var(--fb-bg); font-size: 14px; line-height: 1.45; }
button, input { font-family: inherit; font-size: inherit; }
/* i passi si mostrano e si nascondono con la proprietà .hidden: nessuna regola
   di layout deve poter vincere sull'attributo */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- topbar */
.topbar {
  height: 56px; background: var(--fb-dark); color: #fff;
  display: flex; align-items: center; gap: 12px; padding: 0 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}
.topbar .logo { height: 44px; display: block; margin: 0 -6px; }
.topbar .title {
  font-weight: 800; letter-spacing: .02em; font-size: 15px; color: #fff; opacity: .9;
  border-left: 1px solid rgba(255, 255, 255, .25); padding-left: 12px; white-space: nowrap;
}

/* ---------------------------------------------------------------- carta */
.accesso {
  min-height: calc(100vh - 56px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 28px 16px 48px;
}
.carta {
  background: var(--fb-white); border-radius: 16px; box-shadow: var(--fb-shadow);
  width: 100%; max-width: 400px; padding: 26px 26px 22px;
}
.carta h1 { margin: 0 0 4px; font-size: 19px; letter-spacing: -.01em; }
.sottotitolo { margin: 0 0 18px; color: var(--fb-grey-2); font-size: 13px; }
.pie { margin: 16px 0 0; color: var(--fb-grey-2); font-size: 12px; text-align: center; }

.avviso {
  background: #fdeeee; color: var(--fb-red); border: 1px solid #f6d6d6;
  padding: 9px 11px; border-radius: 9px; margin-bottom: 14px; font-weight: 600; font-size: 13px;
}
.avviso.informativo { background: var(--fb-orange-soft); border-color: #ffd9c6; color: var(--fb-orange-dark); }

/* ---------------------------------------------------------------- campi */
label { display: block; font-size: 12.5px; font-weight: 600; color: var(--fb-grey); margin: 0 0 12px; }
label input {
  display: block; width: 100%; margin-top: 5px; padding: 10px 11px;
  border: 1px solid var(--fb-line); border-radius: 9px; font-size: 15px; background: #fff;
  font-weight: 500; color: var(--fb-dark); outline: none;
}
label input:focus { border-color: var(--fb-orange); box-shadow: 0 0 0 3px var(--fb-orange-soft); }
/* il codice si legge una cifra alla volta: spaziatura larga e cifre tabellari */
#codice { letter-spacing: .38em; font-size: 19px; text-align: center; font-variant-numeric: tabular-nums; }

.nota { font-size: 13px; color: var(--fb-grey); margin: 0 0 12px; }
.segreto {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; text-align: center;
  background: #f6f6f5; border-radius: 8px; padding: 9px; margin-bottom: 12px;
  word-break: break-all; user-select: all;
}
.qr { display: flex; justify-content: center; margin: 4px 0 12px; }
.qr svg { width: 190px; height: 190px; border: 1px solid var(--fb-line); border-radius: 10px; }

/* ---------------------------------------------------------------- bottoni */
button.primario {
  width: 100%; padding: 11px 14px; border: 0; border-radius: 10px; cursor: pointer;
  font-weight: 700; font-size: 15px; background: var(--fb-orange); color: #fff;
  box-shadow: 0 2px 8px rgba(255, 77, 1, .35);
}
button.primario:hover { background: var(--fb-orange-dark); }
button.primario:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
button.terziario {
  display: block; margin: 10px auto 0; background: none; border: 0; color: var(--fb-grey);
  cursor: pointer; font-size: 13px; font-weight: 600; padding: 4px;
}
button.terziario:hover { color: var(--fb-dark); text-decoration: underline; }

/* ---------------------------------------------------------------- telefono */
@media screen and (max-width: 720px) {
  /* con la tastiera aperta lo spazio si dimezza: si parte dall'alto, così
     l'intestazione della carta non finisce sopra il bordo dello schermo */
  .accesso { justify-content: flex-start; padding: 20px 14px 32px; min-height: 0; }
  .carta { padding: 22px 18px 20px; border-radius: 14px; }
  /* sotto i 16px iOS ingrandisce da solo la pagina quando il campo prende il fuoco */
  label input { font-size: 16px; padding: 11px 12px; }
  button.primario { padding: 13px 14px; font-size: 16px; }
}