/* Gruppo CORIME – stili di colore alternativi
   ------------------------------------------------
   Lo stile si sceglie nella prima riga utile di index.html:
     <html lang="it" data-tema="b">
   Valori possibili:
     a = bianco placca e grafite (stile di base, definito in style.css)
     b = bianco istituzionale, pulsanti rossi
     c = antracite, tutto scuro
     d = fasce istituzionali: mappa su verde, invito ad aderire su rosso
   Per provarne uno senza cambiare il sito: aggiungi ?tema=c all'indirizzo
   (es. https://www.gruppocorime.it/?tema=c).
*/

/* ---------- B · Bianco istituzionale ---------- */
html[data-tema="b"] {
  --placca: #FFFFFF; --carta: #F4F6F8; --grafite: #1B2431; --ardesia: #596577; --linea: #E2E6EB;
  --notte: #18222E; --notte-2: #1F2B39; --notte-testo: #C6CFDA;
}
html[data-tema="b"] .bottone { background: var(--rosso); border-color: var(--rosso); color: #fff; }
html[data-tema="b"] .bottone:hover { background: #A81C16; border-color: #A81C16; }
html[data-tema="b"] .bottone-chiaro { background: transparent; color: var(--grafite); border-color: #C9D0D8; }
html[data-tema="b"] .bottone-chiaro:hover { background: var(--carta); border-color: var(--grafite); }
html[data-tema="b"] .bottone-chiaro-scuro { background: #fff; color: var(--notte); border-color: #fff; }
html[data-tema="b"] .bottone-chiaro-scuro:hover { background: var(--carta); border-color: var(--carta); }
html[data-tema="b"] .rete .costa { fill: #EEF1F4; stroke: #D5DBE2; }
html[data-tema="b"] .nomi-muro { --spento: #A3ADB9; }
/* filo rosso-verde sotto la testata, come il piede della pagina */
html[data-tema="b"] .testata::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--rosso) 50%, var(--verde) 50%);
}

/* ---------- C · Antracite ---------- */
html[data-tema="c"] {
  --placca: #121719; --carta: #1A2124; --grafite: #ECEFED; --ardesia: #A3AEA9; --linea: #2C3538;
  --notte: #0B0F11; --notte-2: #141A1D; --notte-testo: #AEB9B4; --rosso: #E0453D; --verde: #4FAE4C;
  color-scheme: dark;
}
html[data-tema="c"] .bottone { background: #ECEFED; color: #121719; border-color: #ECEFED; }
html[data-tema="c"] .bottone:hover { background: #fff; border-color: #fff; }
html[data-tema="c"] .bottone-chiaro { background: transparent; color: var(--grafite); border-color: #3A4447; }
html[data-tema="c"] .bottone-chiaro:hover { background: var(--carta); border-color: var(--grafite); }
html[data-tema="c"] .bottone-chiaro-scuro { background: #ECEFED; color: #121719; border-color: #ECEFED; }
html[data-tema="c"] .rete .costa { fill: #1B2326; stroke: #2E383C; }
html[data-tema="c"] .rete .reg { fill: #6F7C77; }
html[data-tema="c"] .rete .nodo { fill: #121719; }
html[data-tema="c"] .rete .nodo-g:hover .nodo, html[data-tema="c"] .rete .nodo.attivo { fill: var(--grafite); }
html[data-tema="c"] .rete-etichetta { color: #121719; }
html[data-tema="c"] .rete-etichetta small { color: #4F5A56; }
html[data-tema="c"] .rete::before { background-image: radial-gradient(circle, rgba(255,255,255,.09) 1px, transparent 1.3px); }
html[data-tema="c"] .nomi-muro { --spento: #4A5558; }
html[data-tema="c"] .nome.sfuma { color: #7B8783; }
html[data-tema="c"] .nomi-muro:hover .nome { color: #3A4447; }
html[data-tema="c"] .linea-tempo:not(.accesa) li::before { border-color: #3A4447; }
html[data-tema="c"] .menu-mobile { border-color: #3A4447; }
html[data-tema="c"] .piede { background: #0E1214; }
html[data-tema="c"] .associati { border-top: 1px solid #222A2D; }
html[data-tema="c"] .salta { background: #ECEFED; color: #121719; }

/* ---------- D · Fasce istituzionali ---------- */
html[data-tema="d"] {
  --placca: #FFFFFF; --carta: #F3F4F2; --grafite: #1E2428; --ardesia: #58626A; --linea: #E2E5E2;
  --notte: #123B27; --notte-2: #184A31; --notte-testo: #CFE3D5;
}
html[data-tema="d"] .insieme {
  max-width: none; background: var(--carta);
  margin-top: var(--spazio-sezione); padding-top: var(--spazio-sezione); padding-bottom: var(--spazio-sezione);
  padding-left: max(var(--margine), calc((100% - var(--larghezza)) / 2 + var(--margine)));
  padding-right: max(var(--margine), calc((100% - var(--larghezza)) / 2 + var(--margine)));
}
html[data-tema="d"] .entra { background: #9E1D17; border-top: 0; }
html[data-tema="d"] .entra p { color: #F4D6D3; }
html[data-tema="d"] .bottone-chiaro-scuro { color: #9E1D17; }
html[data-tema="d"] .rete .costa { fill: #EEF1EE; stroke: #D2D8D3; }
html[data-tema="d"] .filtri input, html[data-tema="d"] .filtri select, html[data-tema="d"] .bottone-vicino { border-color: rgba(255,255,255,.22); }

/* scritta del logo più luminosa sul fondo scuro */
html[data-tema="c"] .m-r { color: #E8423A; }
html[data-tema="c"] .m-v { color: #4FAE4C; }
html[data-tema="c"] .marchio-sotto { color: #9DB2E8; }