/* Blu su Blu · correzioni comuni alle tre vesti (bosco, cockpit, anni80), misurate sul sito vivo il 2026-09-28.
   Servono dove il CSS del template "classico" assegna fondi chiari o colori scuri con selettori di classe,
   che battono la neutralizzazione a specificità zero delle vesti. Si carica solo in modalità vesti,
   dopo i tre tema.css. Usa i token --t-* che ogni veste definisce. */

/* 1. Home: la fascia "blu su blu" dell'hero classico resta come blocco piatto sopra il fondo della veste */
html[data-tema="bosco"] .hero::after,
html[data-tema="cockpit"] .hero::after,
html[data-tema="anni80"] .hero::after { display: none; }

/* 2. Anni '80: la barra-titolo della finestra finiva a metà del titolo del banner AI Act (h2 su due righe di griglia) */
@media (min-width: 761px) {
	html[data-tema="anni80"] section.ai-act-banner::before { grid-row: 1; }
	html[data-tema="anni80"] section.ai-act-banner h2 { grid-row: 2 / span 2; }
}

/* 3. Barra dei filtri progetti: con 11 settori e 22 tecnologie le tre colonne diventavano elenchi verticali alti 1200 px */
html[data-tema="bosco"] .filtri-progetti,
html[data-tema="cockpit"] .filtri-progetti,
html[data-tema="anni80"] .filtri-progetti { display: block; }
html[data-tema="bosco"] .filtri-progetti .filtri-riga + .filtri-riga,
html[data-tema="cockpit"] .filtri-progetti .filtri-riga + .filtri-riga,
html[data-tema="anni80"] .filtri-progetti .filtri-riga + .filtri-riga { margin-top: 14px; }
html[data-tema="bosco"] .filtri-progetti .filtri-riga,
html[data-tema="cockpit"] .filtri-progetti .filtri-riga,
html[data-tema="anni80"] .filtri-progetti .filtri-riga { grid-template-columns: 140px minmax(0, 1fr); }
@media (max-width: 640px) {
	html[data-tema="bosco"] .filtri-progetti .filtri-riga,
	html[data-tema="cockpit"] .filtri-progetti .filtri-riga,
	html[data-tema="anni80"] .filtri-progetti .filtri-riga { grid-template-columns: 1fr; }
}

/* 4. Tabelle calendario (Corsi) e scadenze (AI Act): righe alterne chiare e testo grigio scuro */
html[data-tema="bosco"] :is(table.calendario, table.scadenze) td,
html[data-tema="cockpit"] :is(table.calendario, table.scadenze) td,
html[data-tema="anni80"] :is(table.calendario, table.scadenze) td { color: var(--t-testo); background: transparent; border-top-color: var(--t-linea); }
html[data-tema="bosco"] table.calendario tbody tr:nth-child(even) td,
html[data-tema="cockpit"] table.calendario tbody tr:nth-child(even) td,
html[data-tema="anni80"] table.calendario tbody tr:nth-child(even) td,
html[data-tema="bosco"] table.scadenze tbody tr:first-child td,
html[data-tema="cockpit"] table.scadenze tbody tr:first-child td,
html[data-tema="anni80"] table.scadenze tbody tr:first-child td { background: var(--t-sotto-bg); }
html[data-tema="bosco"] table.calendario td:nth-child(2),
html[data-tema="cockpit"] table.calendario td:nth-child(2),
html[data-tema="anni80"] table.calendario td:nth-child(2),
html[data-tema="bosco"] :is(table.calendario, table.scadenze) td strong,
html[data-tema="cockpit"] :is(table.calendario, table.scadenze) td strong,
html[data-tema="anni80"] :is(table.calendario, table.scadenze) td strong { color: var(--t-testo-forte); }
html[data-tema="bosco"] :is(table.calendario td:first-child, table.scadenze td:first-child),
html[data-tema="cockpit"] :is(table.calendario td:first-child, table.scadenze td:first-child),
html[data-tema="anni80"] :is(table.calendario td:first-child, table.scadenze td:first-child) { color: var(--t-kicker); }
html[data-tema="bosco"] table.calendario td:last-child,
html[data-tema="cockpit"] table.calendario td:last-child,
html[data-tema="anni80"] table.calendario td:last-child { color: var(--t-testo-2); }
@media (max-width: 720px) {
	html[data-tema="bosco"] :is(table.calendario, table.scadenze) tr,
	html[data-tema="cockpit"] :is(table.calendario, table.scadenze) tr,
	html[data-tema="anni80"] :is(table.calendario, table.scadenze) tr { background: var(--t-pannello); border-color: var(--t-linea); }
}

/* 5. Schede chiare del template: percorsi e corsi (Corsi), passi (Autoanalisi), aree e nota ADS (Cosa offro) */
html[data-tema="bosco"] :is(.corso, .percorso, ol.passi > li, .aree li, .ads .nota, .corso .strumenti),
html[data-tema="cockpit"] :is(.corso, .percorso, ol.passi > li, .aree li, .ads .nota, .corso .strumenti),
html[data-tema="anni80"] :is(.corso, .percorso, ol.passi > li, .aree li, .ads .nota, .corso .strumenti) {
	background: var(--t-sotto-bg); border-color: var(--t-linea); color: var(--t-testo);
}
html[data-tema="bosco"] :is(.corso, .percorso, ol.passi > li, .aree li) :is(h3, strong),
html[data-tema="cockpit"] :is(.corso, .percorso, ol.passi > li, .aree li) :is(h3, strong),
html[data-tema="anni80"] :is(.corso, .percorso, ol.passi > li, .aree li) :is(h3, strong) { color: var(--t-testo-forte); }
html[data-tema="bosco"] :is(.corso .meta, .percorso p:nth-of-type(1), .percorso::before),
html[data-tema="cockpit"] :is(.corso .meta, .percorso p:nth-of-type(1), .percorso::before),
html[data-tema="anni80"] :is(.corso .meta, .percorso p:nth-of-type(1), .percorso::before) { color: var(--t-kicker); border-bottom-color: var(--t-linea); }
html[data-tema="bosco"] :is(.percorso p, .percorso p em, .corso .strumenti, .ads .nota),
html[data-tema="cockpit"] :is(.percorso p, .percorso p em, .corso .strumenti, .ads .nota),
html[data-tema="anni80"] :is(.percorso p, .percorso p em, .corso .strumenti, .ads .nota) { color: var(--t-testo-2); }
html[data-tema="bosco"] .ads .loghi-piattaforme a,
html[data-tema="cockpit"] .ads .loghi-piattaforme a,
html[data-tema="anni80"] .ads .loghi-piattaforme a { color: #13202f; } /* i loghi stanno su tasselli bianchi */

/* 6. Strumento di autoanalisi: i suoi colori vengono da variabili proprie (--aa-*), qui portate al buio */
html[data-tema="bosco"] .aa-app,
html[data-tema="cockpit"] .aa-app,
html[data-tema="anni80"] .aa-app {
	--aa-colore-primario: #2f6db5;
	--aa-colore-primario-scuro: #1f4f86;
	--aa-colore-testo: var(--t-testo-forte);
	--aa-colore-testo-chiaro: var(--t-testo-2);
	--aa-colore-sfondo: var(--t-pannello-solido);
	--aa-colore-sfondo-alt: var(--t-sotto-bg);
	--aa-colore-bordo: var(--t-linea);
	color: var(--t-testo-forte);
}
html[data-tema="bosco"] .aa-app :is(label, legend, .aa-titolo, h2, h3),
html[data-tema="cockpit"] .aa-app :is(label, legend, .aa-titolo, h2, h3),
html[data-tema="anni80"] .aa-app :is(label, legend, .aa-titolo, h2, h3) { color: var(--t-testo-forte); }
html[data-tema="bosco"] .aa-app :is(.aa-link, .aa-btn-testo),
html[data-tema="cockpit"] .aa-app :is(.aa-link, .aa-btn-testo),
html[data-tema="anni80"] .aa-app :is(.aa-link, .aa-btn-testo) { color: var(--t-link); }

/* 7. Cosa offro: il cerchietto numerato del classico (.numero::before, assoluto) copriva l'etichetta
      "Livello N" delle vesti su telefono; le vesti numerano già i livelli a modo loro. Misurato a 375 px il 2026-09-28. */
html[data-tema="bosco"] .livello .numero::before,
html[data-tema="cockpit"] .livello .numero::before,
html[data-tema="anni80"] .livello .numero::before { display: none; }

/* 8. Pulsante sempre visibile per cambiare veste (il riquadro compare solo alla prima visita e il link nel
      piè di pagina è in fondo alla pagina: Fadege non trovava il passaggio agli altri temi). Vale anche in Classico. */
.bsb-veste-fluttuante {
	position: fixed; left: 16px; bottom: 16px; z-index: 60;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 10px 16px; min-height: 44px;
	font: 600 15px/1 system-ui, sans-serif; color: #fff;
	background: rgba(12, 35, 64, .92); border: 1px solid rgba(169, 198, 230, .6); border-radius: 999px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .35); cursor: pointer;
}
.bsb-veste-fluttuante:hover { background: #143a66; }
.bsb-veste-fluttuante:focus-visible { outline: 3px solid #f08a4b; outline-offset: 2px; }
@media print { .bsb-veste-fluttuante { display: none; } }

/* 9. Menu: le vesti schiarivano il testo al passaggio del mouse (color: var(--t-titoli), quasi bianco)
      ma lo sfondo chiaro del classico su :hover restava (.menu a:hover{background:var(--blu-nebbia)}) →
      testo chiaro su sfondo chiaro, illeggibile. Prima correzione (solo sfondo trasparente) toglieva
      anche l'evidenziazione: rimessa, ma con lo sfondo chiaro/tinto di ogni veste invece di quello del
      classico. Segnalato due volte da Fadege il 2026-09-28. */
html[data-tema="bosco"] .menu a:hover,
html[data-tema="cockpit"] .menu a:hover {
	background: var(--t-etichetta-bg);
	border-radius: var(--t-raggio-btn, 3px);
}
/* anni80: --t-etichetta-bg è un chip CHIARO con testo scuro (non traslucido scuro come nelle altre
   due vesti): riusarlo qui metteva testo quasi bianco su sfondo quasi bianco. Colore proprio. */
html[data-tema="anni80"] .menu a:hover {
	background: var(--t-etichetta-bg);
	color: var(--t-etichetta);
	border-radius: var(--t-raggio-btn, 3px);
}
html[data-tema="bosco"] .menu .menu-contatti a:hover,
html[data-tema="cockpit"] .menu .menu-contatti a:hover,
html[data-tema="anni80"] .menu .menu-contatti a:hover { background: var(--t-accento); color: var(--t-accento-testo); }