/* ============================================================================
   LIVELLI DI SUPERFICIE (2026-09-12)
   ----------------------------------------------------------------------------
   PERCHE' ESISTE QUESTO FILE

   Fino al 2026-09-11 il sito aveva un problema solo: era quasi tutto dello
   stesso bianco. Il fondo pagina era #ffffff o un grigio talmente chiaro
   (slate-50, #f8fafc) da non distinguersi, e sopra ci stavano 380 riquadri
   anch'essi bianchi. Il risultato e' che un pannello non si leggeva come un
   pannello: si vedeva solo il suo bordo grigio chiaro, e la pagina sembrava un
   foglio unico su cui qualcuno aveva disegnato dei rettangoli.

   Lo stesso errore si ripeteva dentro i moduli: il pannello del modulo era
   bianco e anche le caselle da compilare erano bianche, separate solo da un
   bordo slate-200 quasi invisibile. Chi arriva non capisce dove deve scrivere.

   LA REGOLA, UNA SOLA: ogni cosa sta su qualcosa di piu' scuro di se'.

     livello 0  fondo pagina      grigio freddo   .sfondo-pagina
     livello 1  pannello          bianco          .pannello (o bg-white)
     livello 2  incasso           grigio chiaro   .pannello-incasso
     campo      casella da compilare  bianco + bordo marcato   .campo

   Il campo da compilare e' SEMPRE il punto piu' chiaro di quello che ha
   intorno, piu' un bordo piu' scuro del bordo dei pannelli e un'ombra interna
   di un pixel: e' il segnale universale di "qui dentro si scrive". Per questo
   i pannelli dei moduli (il modale di segnalazione, quello di accesso) non
   sono bianchi ma grigio chiarissimo — se fossero bianchi le caselle non
   avrebbero da cosa staccarsi.

   PERCHE' E' CARICATO DOPO TAILWIND (vedi _Layout.cshtml e _AdminLayout.cshtml)

   Le classi qui dentro devono poter vincere su una utility Tailwind di pari
   specificita' gia' scritta nella view (bg-white, border-slate-300,
   focus:border-blue-500). A parita' di specificita' vince chi viene dopo,
   quindi questo foglio va caricato per ultimo. Non usare !important: se una
   regola non si applica, il motivo e' l'ordine di caricamento o una
   specificita' piu' alta, e vanno guardati quelli.

   .campo tocca SOLO colore di fondo, colore del bordo e ombra. Non tocca
   altezza, padding, raggio, font o spessore del bordo: quelli restano alle
   classi Tailwind gia' presenti sul controllo, che sono diverse da pagina a
   pagina (border-2 nei contatti, border nei filtri) e vanno lasciate stare.
   ========================================================================= */

:root {
  /* Livello 0 — il fondo su cui poggia tutto. Schiarito il 2026-09-12: la
     prima versione (#e9edf4) risultava troppo grigio-blu, la pagina sembrava
     spenta. Ora e' un grigio quasi impercettibile, con solo un'ombra di
     azzurro per non stonare con il blu del marchio: basta a far vedere il
     bordo dei pannelli bianchi senza pesare. La sfumatura serve solo a
     evitare l'effetto cartoncino piatto. */
  --sup-fondo: #f3f5f9;
  --sup-fondo-grad: linear-gradient(165deg, #f8fafc 0%, #f3f6fa 52%, #eef2f8 100%);

  /* Livello 1 — il pannello. Bianco pieno: e' quello che deve saltare fuori. */
  --sup-pannello: #ffffff;
  --sup-bordo: #d7dfeb;

  /* Livello 2 — l'incasso: un blocco secondario DENTRO un pannello bianco
     (una nota, un elenco di allegati, una riga di riepilogo). Piu' scuro del
     bianco che ha intorno, piu' chiaro del fondo pagina. */
  --sup-incasso: #f1f5f9;
  --sup-incasso-bordo: #e2e8f0;

  /* Pannello di un modulo: serve ai riquadri fatti quasi solo di caselle da
     compilare. Ora che il fondo pagina e' chiarissimo non puo' stare fra il
     bianco e il fondo — non ci sarebbe spazio — quindi scende di un gradino
     sotto al fondo: si legge come una zona incassata, e le caselle bianche
     restano la cosa piu' chiara della finestra. */
  --sup-modulo: #eaeff6;

  /* Il campo. Il bordo e' volutamente piu' scuro di --sup-bordo: e' quello che
     distingue "casella da riempire" da "riquadro da leggere". */
  --campo-fondo: #ffffff;
  --campo-bordo: #bfcadb;
  --campo-bordo-hover: #94a3b8;
  --campo-ombra: inset 0 1px 2px rgba(15, 23, 42, 0.07);
  --campo-focus: #2563eb;
  --campo-focus-alone: 0 0 0 3px rgba(37, 99, 235, 0.16);
  --campo-testo: #0f172a;
  --campo-segnaposto: #94a3b8;
}

/* --- Livello 0: il fondo pagina ----------------------------------------- */

.sfondo-pagina {
  background: var(--sup-fondo-grad);
  background-attachment: fixed;
}

/* Una fascia a tutta larghezza che riprende il fondo, per alternarsi alle
   fasce bianche dentro una pagina lunga (prezzi, come funziona, guide). */
.fascia-fondo {
  background-color: var(--sup-fondo);
}

/* --- Livello 1: il pannello --------------------------------------------- */

.pannello {
  background-color: var(--sup-pannello);
  border: 1px solid var(--sup-bordo);
}

/* --- Livello 2: l'incasso ----------------------------------------------- */

.pannello-incasso {
  background-color: var(--sup-incasso);
  border: 1px solid var(--sup-incasso-bordo);
}

/* --- Il pannello di un modulo ---------------------------------------------
   Un riquadro fatto quasi solo di caselle da compilare non puo' essere bianco:
   le caselle, che devono essere il punto piu' chiaro, non avrebbero da cosa
   staccarsi. Scende quindi di mezzo gradino. Vale per le schede di accesso e
   registrazione, per il modulo dei contatti e per quelli dei professionisti.
   Tocca solo il colore di fondo: bordo, raggio e ombra restano alla view. */

.pannello-modulo {
  background-color: var(--sup-modulo);
}

/* --- Il campo da compilare ---------------------------------------------- */

.campo {
  background-color: var(--campo-fondo);
  border-color: var(--campo-bordo);
  box-shadow: var(--campo-ombra);
  color: var(--campo-testo);
}

.campo::placeholder {
  color: var(--campo-segnaposto);
}

.campo:hover:not(:focus):not(:disabled) {
  border-color: var(--campo-bordo-hover);
}

.campo:focus {
  border-color: var(--campo-focus);
  box-shadow: var(--campo-focus-alone);
  background-color: #ffffff;
}

/* Un campo spento non e' un campo rotto: resta riconoscibile come casella, ma
   smette di invitare a scriverci dentro. */
.campo:disabled,
.campo[readonly] {
  background-color: var(--sup-incasso);
  border-color: var(--sup-incasso-bordo);
  box-shadow: none;
  color: #64748b;
}

/* Su fondo scuro la regola si ribalta: la' la casella e' gia' il punto piu'
   chiaro e un bordo grigio sarebbe l'unica cosa che stona. Non esiste una
   classe per spegnere .campo (revert cancellerebbe anche le classi Tailwind
   della view): su quei campi .campo non si mette, e basta. Oggi ce n'e' uno
   solo, la ricerca nell'intestazione blu di /guide. */

/* --- I moduli dentro le finestre ----------------------------------------
   Il pannello scende di un gradino cosi' le caselle bianche hanno da cosa
   staccarsi. Vale per il modale di segnalazione e per quello di accesso: sono
   gli unici due punti del sito in cui una finestra e' fatta quasi solo di
   caselle da compilare. */

.segnala-modale__pannello {
  background: var(--sup-modulo);
}

.auth-modal__dialog {
  background: linear-gradient(to bottom, #f7f9fc 0%, #eef2f8 100%);
}

.auth-field input {
  background-color: var(--campo-fondo);
  border-color: var(--campo-bordo);
  box-shadow: var(--campo-ombra);
}

.auth-field input:hover {
  border-color: var(--campo-bordo-hover);
}

.auth-field input:focus {
  border-color: var(--campo-focus);
  box-shadow: var(--campo-focus-alone);
}

/* Il pulsante "Entra con Google" e il divisore stavano su bianco: sul nuovo
   fondo del modale vanno riportati a bianco pieno, altrimenti spariscono. */
.auth-social__btn {
  background-color: #ffffff;
}

/* --- Punti singoli rimasti dello stesso colore del loro fondo ------------ */

/* "Mandala a chi decide con te" sulla scheda annuncio: era #f8fafc sul fondo
   pagina, cioe' lo stesso colore. Diventa un pannello vero. */
.condividi-asta {
  background: var(--sup-pannello);
  border-color: var(--sup-bordo);
}

/* Print: il fondo pagina non si stampa, altrimenti ogni foglio esce grigio e
   consuma inchiostro per niente. */
@media print {
  .sfondo-pagina,
  .fascia-fondo {
    background: #ffffff !important;
  }

  .campo {
    box-shadow: none !important;
  }
}