/* ===========================================================================
   Pagina di accesso. Stessa palette e stessi caratteri del builder: chi entra
   deve capire subito di essere nel posto giusto.
   =========================================================================== */

:root {
  --ui-ink:      #1d1d1b;
  --ui-ink-2:    #6b6b69;
  --ui-ink-3:    #9a9a97;
  --ui-bordo:    #e3e3e0;
  --ui-bordo-2:  #cfcfcb;
  --ui-fondo:    #f6f6f4;
  --ui-carta:    #ffffff;
  --ui-accento:  #1d4985;
  --ui-pericolo: #a3342a;
  --ui-r:        6px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  font-family: "Geist", system-ui, -apple-system, sans-serif;
  font-size: 13px; line-height: 1.45;
  color: var(--ui-ink); background: var(--ui-fondo);
  -webkit-font-smoothing: antialiased;
}

.accesso {
  min-height: 100%;
  display: grid; place-items: center;
  padding: 24px;
}

.riquadro {
  width: 100%; max-width: 320px;
  background: var(--ui-carta);
  border: 1px solid var(--ui-bordo);
  border-radius: var(--ui-r);
  padding: 28px 26px 26px;
}

.marchio {
  margin: 0;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
}
.marchio span { font-weight: 400; color: var(--ui-ink-3); }

.occhiello {
  margin: 2px 0 22px;
  font-size: 12px; color: var(--ui-ink-3);
}

.campo { display: block; margin-bottom: 14px; }
.campo span {
  display: block; margin-bottom: 5px;
  font-size: 12px; color: var(--ui-ink-2);
}
.campo input {
  width: 100%;
  font: inherit; color: inherit;
  border: 1px solid var(--ui-bordo-2); border-radius: var(--ui-r);
  background: var(--ui-carta);
  padding: 7px 9px;
}
.campo input:focus-visible { outline: 2px solid var(--ui-accento); outline-offset: 2px; }

.errore {
  margin: 0 0 14px;
  padding: 8px 10px;
  border: 1px solid #e8cdca; border-radius: var(--ui-r);
  background: #fbf1f0;
  color: var(--ui-pericolo);
  font-size: 12px;
}

.invia {
  width: 100%;
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--ui-ink); border-radius: var(--ui-r);
  background: var(--ui-ink); color: #fff;
  cursor: pointer;
}
.invia:hover:not(:disabled) { background: #000; }
.invia:disabled { opacity: 0.55; cursor: default; }
.invia:focus-visible { outline: 2px solid var(--ui-accento); outline-offset: 2px; }