/* CRM Agevola PMI - foglio unico.
   Registro: strumento, non vetrina. Una sola famiglia (Public Sans, gia' self-hosted
   sul sito), palette dell'identita' Agevola PMI (inchiostro blu + ottone) portata su
   una superficie da applicazione. Mobile-first: Mossuto lavora dal telefono, spesso
   con il sole sullo schermo, quindi contrasto alto e bersagli grandi. */

/* Public Sans e' un font VARIABILE (asse wght 100-900, istanza di default 100).
   I quattro file del sito sono lo stesso file: dichiararlo quattro volte a peso fisso
   fa rendere tutto in Thin e simulare il grassetto. Qui si dichiara una volta sola
   con l'intervallo, che e' il modo corretto di usarlo. */
@font-face {
  font-family: "Public Sans";
  src: url("fonts/public-sans-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --sfondo:        oklch(0.985 0.003 250);
  --pannello:      oklch(1 0 0);
  --pannello-alt:  oklch(0.965 0.006 250);
  --riga:          oklch(0.898 0.008 250);
  --riga-forte:    oklch(0.82 0.012 250);
  --inchiostro:    oklch(0.205 0.04 250);
  --testo:         oklch(0.28 0.045 250);
  --tenue:         oklch(0.455 0.022 250);
  --su-inchiostro: oklch(0.965 0.008 250);
  --su-inchiostro-tenue: oklch(0.80 0.018 250);
  --ottone:        oklch(0.74 0.125 73);
  --ottone-testo:  oklch(0.50 0.105 66);
  --errore:        oklch(0.50 0.16 25);
  --errore-fondo:  oklch(0.965 0.025 25);
  --ok-testo:      oklch(0.46 0.10 155);
  --ok-fondo:      oklch(0.965 0.03 155);

  --r-1: 6px;
  --r-2: 10px;
  --ombra-1: 0 1px 2px oklch(0.205 0.04 250 / 0.06);
  --ombra-2: 0 6px 24px oklch(0.205 0.04 250 / 0.09);

  --z-barra: 100;
  --z-sopra: 200;

  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --tempo: 180ms;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400; /* esplicito: l'istanza di default del font variabile e' Thin 100 */
  line-height: 1.55;
  color: var(--testo);
  background: var(--sfondo);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.011em; text-wrap: balance; }
h1 { font-size: 1.5rem; line-height: 1.25; }
h2 { font-size: 1.125rem; line-height: 1.35; }
p  { margin: 0 0 1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--ottone-testo); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--inchiostro); }

:focus-visible {
  outline: 2px solid var(--ottone);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ------------------------------------------------------------ barra */
.barra {
  position: sticky;
  top: 0;
  z-index: var(--z-barra);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  background: var(--inchiostro);
  color: var(--su-inchiostro);
}
.barra__marchio { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.barra__marchio svg { display: block; flex: none; }
.barra__nome { font-weight: 600; font-size: 0.95rem; letter-spacing: -0.005em; }
.barra__tenant {
  font-size: 0.78rem;
  color: var(--su-inchiostro-tenue);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.barra__spazio { flex: 1 1 auto; }
.barra__esci { margin: 0; display: flex; }
.barra__uscita {
  font-family: inherit;
  color: var(--su-inchiostro-tenue);
  background: transparent;
  font-size: 0.85rem;
  text-decoration: none;
  padding: 0.45rem 0.7rem;
  min-height: 36px;
  border-radius: var(--r-1);
  border: 1px solid oklch(1 0 0 / 0.16);
  cursor: pointer;
  transition: background var(--tempo) var(--curva), color var(--tempo) var(--curva);
}
.barra__uscita:hover { background: oklch(1 0 0 / 0.1); color: var(--su-inchiostro); }

/* ------------------------------------------------------------ impianto */
.pagina {
  flex: 1 1 auto;
  width: 100%;
  max-width: 56rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}
.pagina--stretta { max-width: 27rem; padding-top: 2.5rem; }

.piede {
  padding: 1rem;
  font-size: 0.78rem;
  color: var(--tenue);
  text-align: center;
}

/* ------------------------------------------------------------ accesso */
.accesso__insegna { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 2rem; }
.accesso__insegna svg { display: block; flex: none; }
.accesso__titolo { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
.accesso__sotto { font-size: 0.85rem; color: var(--tenue); }

.riquadro {
  background: var(--pannello);
  border: 1px solid var(--riga);
  border-radius: var(--r-2);
  padding: 1.25rem;
  box-shadow: var(--ombra-1);
}
@media (max-width: 30rem) {
  .riquadro { border-left: none; border-right: none; border-radius: 0; margin-inline: -1rem; padding-inline: 1rem; }
}

/* ------------------------------------------------------------ campi */
.campo { display: block; margin-bottom: 1.1rem; }
.campo__etichetta {
  display: block;
  font-size: 0.88rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
  color: var(--testo);
}
.campo__aiuto { display: block; font-size: 0.8rem; color: var(--tenue); margin-top: 0.35rem; }

input[type="text"], input[type="email"], input[type="password"] {
  width: 100%;
  min-height: 46px;
  padding: 0.6rem 0.75rem;
  font: inherit;
  font-size: 1rem; /* sotto i 16px iOS ingrandisce la pagina da solo */
  color: var(--testo);
  background: var(--pannello);
  border: 1px solid var(--riga-forte);
  border-radius: var(--r-1);
  transition: border-color var(--tempo) var(--curva), box-shadow var(--tempo) var(--curva);
}
input::placeholder { color: oklch(0.60 0.02 250); }
input:hover { border-color: oklch(0.72 0.02 250); }
input:focus {
  outline: none;
  border-color: var(--ottone);
  box-shadow: 0 0 0 3px oklch(0.74 0.125 73 / 0.24);
}
input:disabled { background: var(--pannello-alt); color: var(--tenue); cursor: not-allowed; }

/* ------------------------------------------------------------ bottoni */
.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.7rem 1.1rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--su-inchiostro);
  background: var(--inchiostro);
  border: 1px solid var(--inchiostro);
  border-radius: var(--r-1);
  cursor: pointer;
  transition: background var(--tempo) var(--curva), transform var(--tempo) var(--curva), opacity var(--tempo) var(--curva);
}
.bottone--largo { width: 100%; }
.bottone:hover { background: oklch(0.26 0.045 250); }
.bottone:active { transform: translateY(1px); }
.bottone:disabled, .bottone[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.bottone--quieto {
  color: var(--testo);
  background: var(--pannello);
  border-color: var(--riga-forte);
}
.bottone--quieto:hover { background: var(--pannello-alt); }

/* ------------------------------------------------------------ messaggi */
.messaggio {
  display: flex;
  gap: 0.6rem;
  padding: 0.75rem 0.85rem;
  border-radius: var(--r-1);
  border: 1px solid var(--riga);
  background: var(--pannello-alt);
  font-size: 0.9rem;
  margin-bottom: 1.1rem;
}
.messaggio--errore { color: var(--errore); background: var(--errore-fondo); border-color: oklch(0.85 0.06 25); }
.messaggio--ok     { color: var(--ok-testo); background: var(--ok-fondo); border-color: oklch(0.85 0.06 155); }
.messaggio p { margin: 0; }

/* ------------------------------------------------------------ home */
.saluto { margin-bottom: 0.35rem; }
.saluto__sotto { color: var(--tenue); font-size: 0.95rem; margin-bottom: 2rem; }

.menu { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--riga); }
.menu__voce { border-bottom: 1px solid var(--riga); }
.menu__link {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 1rem 0.25rem;
  color: var(--testo);
  text-decoration: none;
  min-height: 56px;
}
.menu__nome { font-weight: 600; font-size: 1rem; }
.menu__desc { color: var(--tenue); font-size: 0.87rem; flex: 1 1 auto; }
.menu__stato {
  flex: none;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ottone-testo);
  border: 1px solid oklch(0.80 0.06 73);
  background: oklch(0.975 0.02 73);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  white-space: nowrap;
}
.menu__voce--spenta .menu__link { cursor: not-allowed; }
.menu__voce--spenta .menu__nome { color: var(--tenue); }
@media (min-width: 34rem) {
  .menu__link { padding-inline: 0.5rem; border-radius: var(--r-1); }
}

.nota-tappa {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--riga);
  font-size: 0.87rem;
  color: var(--tenue);
}
/* Subito sotto un riquadro il filo sopra sarebbe la seconda riga orizzontale
   a poche decine di pixel dalla prima: due separatori per una sola separazione. */
.nota-tappa--liscia { border-top: none; padding-top: 0; margin-top: 1.5rem; }
.nota-tappa code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85em;
  background: var(--pannello-alt);
  border: 1px solid var(--riga);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
}

/* ------------------------------------------------------------ errore */
.errore-num { font-size: 0.85rem; font-weight: 600; color: var(--tenue); margin-bottom: 0.4rem; }

/* ------------------------------------------------------------ movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .bottone:active { transform: none; }
}