/* Tema chiaro (07/11/2026), approvato da Riccardo («Sì, procedi»). Vale solo con <html data-tema="chiaro">.
   Fondo del portale dell'osservatorio (#f5f6f8), blu del marchio (#0057ff), vetro bianco latteo con bordo blu tenue.
   Per toglierlo: cancellare questo file e il suo <link>. */
html[data-tema="chiaro"]{
  --fondo:#eef1f7;
  --blu-testo:#0050e6;
  --testo:#12131a;
  --corpo:#535a6b;
  --chiaro:#2c3242;
  color-scheme:light;
}
html[data-tema="chiaro"] body{background:var(--fondo)}

/* sfere: blu leggero, il vetro bianco le attraversa */
html[data-tema="chiaro"] .s1{background:radial-gradient(circle,rgba(0,87,255,.20),rgba(0,87,255,0) 68%)}
html[data-tema="chiaro"] .s2{background:radial-gradient(circle,rgba(70,130,255,.18),rgba(70,130,255,0) 68%)}
html[data-tema="chiaro"] .s3{background:radial-gradient(circle,rgba(0,170,255,.14),rgba(0,170,255,0) 70%)}
html[data-tema="chiaro"] .avviso{background:rgba(10,20,60,.05);border-bottom-color:rgba(10,20,60,.08)}

/* vetro bianco */
html[data-tema="chiaro"] .vetro{
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.6));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 24px 50px -30px rgba(20,40,110,.35)}
html[data-tema="chiaro"] .vetro::before{background:linear-gradient(135deg,rgba(0,87,255,.35),rgba(10,20,60,.08) 38%,rgba(10,20,60,.06) 62%,rgba(0,87,255,.28))}

/* testi e segni che erano bianchi fissi */
html[data-tema="chiaro"] .marchio .d,
html[data-tema="chiaro"] .chiusura .d-grande,
html[data-tema="chiaro"] .piede-vetro .marchio,
html[data-tema="chiaro"] .indice-linee button.acceso,
html[data-tema="chiaro"] .conta b,
html[data-tema="chiaro"] .in24 b,
html[data-tema="chiaro"] .prezzo b,
html[data-tema="chiaro"] .listino b,
html[data-tema="chiaro"] .da-prezzo b,
html[data-tema="chiaro"] .ecommerce .testo-ecom b,
html[data-tema="chiaro"] .voci .tendina a,
html[data-tema="chiaro"] .foglio .sotto-voci a[aria-current]{color:var(--testo)}
html[data-tema="chiaro"] .voci a:hover,
html[data-tema="chiaro"] .indietro a:hover,
html[data-tema="chiaro"] .piede-vetro nav a:hover{color:var(--testo);background:rgba(10,20,60,.05)}
html[data-tema="chiaro"] .filigrana{color:rgba(0,87,255,.2)}
html[data-tema="chiaro"] .indice-linee button{color:rgba(10,20,60,.25)}
html[data-tema="chiaro"] .indice-linee button:hover{color:rgba(10,20,60,.55)}

/* pulsanti, frecce e menu */
html[data-tema="chiaro"] .vetro-btn,
html[data-tema="chiaro"] .freccia,
html[data-tema="chiaro"] .burger{color:var(--testo);background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(10,20,60,.14),0 6px 18px -10px rgba(20,40,110,.35)}
html[data-tema="chiaro"] .vetro-btn:hover{background:#fff}
html[data-tema="chiaro"] .burger span{background:var(--testo)}
html[data-tema="chiaro"] .tendina{background:rgba(255,255,255,.98);box-shadow:inset 0 0 0 1px rgba(0,87,255,.2),0 30px 60px -24px rgba(20,40,110,.4)}
html[data-tema="chiaro"] .voci .tendina a:hover,
html[data-tema="chiaro"] .voci .tendina a[aria-current]{background:rgba(0,87,255,.07)}
html[data-tema="chiaro"] .foglio.vetro{background:rgba(255,255,255,.97)}
html[data-tema="chiaro"] .foglio .sotto-voci{border-left-color:rgba(10,20,60,.14)}

/* schede, passi, liste */
html[data-tema="chiaro"] .schema li,
html[data-tema="chiaro"] .passi li{background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px rgba(10,20,60,.09)}
html[data-tema="chiaro"] .schema li.acceso,
html[data-tema="chiaro"] .passi li:first-child{background:linear-gradient(180deg,#3a7bff,#0057ff);box-shadow:0 14px 30px -14px rgba(0,87,255,.7)}
html[data-tema="chiaro"] .schema li.acceso b,
html[data-tema="chiaro"] .passi li:first-child b{color:#fff}
html[data-tema="chiaro"] .nota{background:rgba(0,87,255,.05)}
html[data-tema="chiaro"] .incluso,
html[data-tema="chiaro"] .listino{border-top-color:rgba(10,20,60,.1)}
html[data-tema="chiaro"] .riquadro.evidenza,
html[data-tema="chiaro"] .evidenza{background:linear-gradient(180deg,rgba(0,87,255,.12),rgba(255,255,255,.7))}
html[data-tema="chiaro"] .lettera{-webkit-text-stroke-color:rgba(0,87,255,.6)}
/* la fascia blu della missione resta blu: è il punto che spezza la pagina anche sul chiaro */

/* selettore del tema sul chiaro */
html[data-tema="chiaro"] .tema{background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px rgba(10,20,60,.14)}
/* passaggio morbido tra i due temi */
html{transition:background-color .35s}
body{transition:background-color .35s,color .35s}

/* sul blu pieno testi e icone sempre bianchi (Riccardo, 07/11/2026: «nero su blu non va bene») */
html[data-tema="chiaro"] .fascia,
html[data-tema="chiaro"] .fascia h2,
html[data-tema="chiaro"] .fascia .mv-voce p{color:#fff}
html[data-tema="chiaro"] #avanti:not(:disabled),
html[data-tema="chiaro"] .freccia.succ:not(:disabled){color:#fff}

/* campi dei moduli sul chiaro */
html[data-tema="chiaro"] .campo input,
html[data-tema="chiaro"] .campo select{background-color:#fff;box-shadow:inset 0 0 0 1px rgba(10,20,60,.16)}
html[data-tema="chiaro"] .campo input:focus,
html[data-tema="chiaro"] .campo select:focus{box-shadow:inset 0 0 0 2px var(--blu-testo)}
html[data-tema="chiaro"] .esito{background:rgba(0,87,255,.08)}

html[data-tema="chiaro"] .loghi-partner li{border-color:rgba(0,87,255,.3);background:rgba(255,255,255,.6)}