/* Famiglia ABV — MODELLO della pagina d'accesso e delle pagine fuori dal guscio
   (BRAND-ABV.md § 6; ADOZIONE.md § 2). Indipendente dal framework: classi
   «abv-accesso-…», solo token (token.css va caricato prima). Riproduce la pagina
   d'accesso di ABV RE Monitor, prodotto madre (fotografata il 07/10/2026).
   Non si modifica nel prodotto: è una copia verificata della cartella comune. */

body.abv-accesso { margin: 0; min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; background: var(--abv-fondo-accesso); color: var(--abv-testo);
  font-family: var(--abv-font); font-size: 1rem; line-height: 1.5; }
.abv-accesso-box { width: 380px; max-width: 92vw; margin: 2rem 0 1rem; }

/* marchio sopra la scheda: logo 52px + nome + sottotitolo (§ 2, in chiaro) */
.abv-accesso-marchio { display: flex; align-items: flex-end; justify-content: center; gap: 14px; margin: 0 0 1rem;
  text-decoration: none; }
.abv-accesso-marchio img { height: var(--abv-logo-accesso); width: auto; display: block; }
.abv-accesso-marchio-testo { display: flex; flex-direction: column; justify-content: center; text-align: left; }
.abv-accesso-nome { color: var(--abv-nero); font-size: 1.4rem; font-weight: 700; letter-spacing: .5px; line-height: 1.2; }
.abv-accesso-sottotitolo { color: var(--abv-rosso); font-size: .9rem; line-height: 1.2; }

/* scheda: bianca, filetto oro di 3px in alto, ombra della famiglia */
.abv-accesso-scheda { background: var(--abv-bianco); border-top: 3px solid var(--abv-oro); border-radius: 0 0 var(--abv-raggio) var(--abv-raggio);
  box-shadow: var(--abv-ombra-scheda); padding: 20px; }
.abv-accesso-invito { margin: 0 0 1rem; text-align: center; color: var(--abv-attenuato); }
.abv-accesso-titolo { margin: 0 0 .75rem; font-size: 1.15rem; font-weight: 700; color: var(--abv-blu); text-align: center; }
.abv-accesso-testo { margin: 0 0 1rem; }

/* messaggi */
.abv-accesso-messaggio { margin: 0 0 1rem; padding: .6rem .9rem; border-radius: var(--abv-raggio); font-size: .92rem;
  border: 1px solid transparent; }
.abv-accesso-messaggio--errore { color: var(--abv-errore); background: var(--abv-errore-fondo); }
.abv-accesso-messaggio--attenzione { color: var(--abv-attenzione); background: var(--abv-attenzione-fondo); }
.abv-accesso-messaggio--successo { color: var(--abv-successo); background: var(--abv-successo-fondo); }
.abv-accesso-messaggio--info { color: var(--abv-testo); background: var(--abv-azzurro-chiaro); }

/* campi con l'icona a destra */
.abv-accesso-campo { display: flex; margin: 0 0 1rem; }
.abv-accesso-campo input { flex: 1; min-width: 0; height: calc(2.25rem + 2px); padding: .375rem .75rem; font: inherit;
  color: var(--abv-testo); background: var(--abv-bianco); border: 1px solid var(--abv-bordo-campo);
  border-right: 0; border-radius: var(--abv-raggio) 0 0 var(--abv-raggio); }
.abv-accesso-campo input:focus { outline: 0; border-color: var(--abv-blu); box-shadow: var(--abv-anello-fuoco); }
.abv-accesso-icona { display: flex; align-items: center; justify-content: center; width: 2.6rem; color: var(--abv-attenuato);
  background: var(--abv-bianco); border: 1px solid var(--abv-bordo-campo); border-radius: 0 var(--abv-raggio) var(--abv-raggio) 0; }
button.abv-accesso-icona { cursor: pointer; border-color: var(--abv-attenuato); font: inherit; padding: 0; }
button.abv-accesso-icona:hover { color: var(--abv-bianco); background: var(--abv-attenuato); }
.abv-accesso-icona svg { width: 1rem; height: 1rem; fill: currentColor; }
.abv-accesso-campo--pieno input { border-right: 1px solid var(--abv-bordo-campo); border-radius: var(--abv-raggio); }
.abv-accesso-campo--codice input { text-align: center; letter-spacing: .3em; font-size: 1.2rem; }
.abv-accesso-etichetta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* riga: «Ricordami» a sinistra, «Password dimenticata?» a destra */
.abv-accesso-riga { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap;
  margin: -.5rem 0 1rem; font-size: .82rem; color: var(--abv-attenuato); }
.abv-accesso-ricordami { display: flex; align-items: center; gap: .4rem; cursor: pointer; }
.abv-accesso-ricordami input { margin: 0; accent-color: var(--abv-blu); }
.abv-accesso-dimenticata { margin-left: auto; text-align: right; }
.abv-accesso-dimenticata a, .abv-accesso-dimenticata summary { color: var(--abv-attenuato); cursor: pointer; text-decoration: none; }
.abv-accesso-dimenticata a:hover, .abv-accesso-dimenticata summary:hover { color: var(--abv-blu); text-decoration: underline; }
.abv-accesso-dimenticata summary { list-style: none; }
.abv-accesso-dimenticata summary::-webkit-details-marker { display: none; }
.abv-accesso-dimenticata details p { margin: .4rem 0 0; text-align: left; color: var(--abv-testo); }

/* pulsante «Accedi»: blu, a tutta larghezza, con l'icona */
.abv-accesso-pulsante { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
  padding: .375rem .75rem; font: inherit; color: var(--abv-bianco); background: var(--abv-blu); border: 1px solid var(--abv-blu);
  border-radius: var(--abv-raggio); cursor: pointer; text-decoration: none; min-height: 38px; }
.abv-accesso-pulsante:hover, .abv-accesso-pulsante:focus { background: var(--abv-blu-scuro); border-color: var(--abv-blu-scuro); color: var(--abv-bianco); }
.abv-accesso-pulsante svg { width: 1rem; height: 1rem; fill: currentColor; }
.abv-accesso-nota { margin: 1rem 0 0; font-size: .82rem; color: var(--abv-attenuato); }

/* piè: nome del prodotto e versione */
.abv-accesso-piede { margin: 0 0 1.5rem; font-size: .75rem; color: var(--abv-attenuato); text-align: center; }

@media (max-width: 420px) { .abv-accesso-box { width: 92vw; } }
@media (max-width: 767.98px) { .abv-accesso-campo input { font-size: 16px; } }