@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Figtree:wght@400;500;600;700&display=swap");
/* Colori sicuri per chi confonde rosso e verde: blu = tutto bene, arancione = attenzione.
   Ogni stato ha sempre anche un'etichetta scritta. */
:root {
  --fondo: #f4f5f7;
  --carta: #ffffff;
  --inchiostro: #1b1d22;
  --tenue: #5f6672;
  --linea: #e2e5ea;
  --blu: #1f5fd6;
  --blu-chiaro: #e6eefc;
  --arancio: #d9640b;
  --arancio-chiaro: #fdeedd;
  --giallo: #f2b705;
  --grigio-chiaro: #eef0f3;
  --raggio: 14px;
  /* Colori fissi dei progetti: ordine controllato con lo strumento per il daltonismo.
     Ogni sito ha sempre lo stesso colore, e accanto c'è sempre il nome. */
  --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #eda100; --c5: #6250d6; --c6: #e87ba4; --altro: #8a919c;
  /* Stati: urgente (rosa scuro, !), attenzione (giallo scuro, ⏳), tutto bene (blu, ✓) */
  --urgente: #c2387a; --urgente-chiaro: #fbe3ee;
  --attenzione-scuro: #a86f00; --attenzione-chiaro: #fdf2d6;
  --ombra: 0 1px 2px rgba(18,20,26,.05), 0 10px 26px -14px rgba(18,20,26,.22);
  --f-titolo: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-testo: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #121417;
    --carta: #1b1e23;
    --inchiostro: #eef0f3;
    --tenue: #a0a7b3;
    --linea: #2c3038;
    --blu: #6c9ef8;
    --blu-chiaro: #1d2a45;
    --arancio: #f59a4a;
    --arancio-chiaro: #3a2614;
    --grigio-chiaro: #24282f;
    --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #9085e9; --c6: #d55181; --altro: #858b99;
    --urgente: #ec6fa8; --urgente-chiaro: #351726;
    --attenzione-scuro: #f0b429; --attenzione-chiaro: #2e2511;
    --ombra: 0 1px 2px rgba(0,0,0,.4), 0 12px 30px -14px rgba(0,0,0,.7);
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.5 var(--f-testo);
  background: var(--fondo);
  color: var(--inchiostro);
}
main { max-width: 1200px; margin: 0 auto; padding: 0 16px 48px; }
h1 { margin: 0; font-size: 22px; }
h2 { font-size: 17px; margin: 28px 0 10px; }
h3 { margin: 0; font-size: 16px; }
a { color: var(--blu); }
.tenue { color: var(--tenue); margin: 0; font-size: 13.5px; }

.testata {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  max-width: 1200px; margin: 0 auto; padding: 18px 16px;
}
.azioni-testata { display: flex; gap: 8px; }
.azioni-testata form { margin: 0; }

.bottone {
  border: 1px solid var(--linea); background: var(--carta); color: var(--inchiostro);
  border-radius: 999px; padding: 8px 16px; font: inherit; cursor: pointer; min-height: 40px;
}
.bottone:hover { border-color: var(--blu); }
.bottone.pieno { background: var(--blu); border-color: var(--blu); color: #fff; }
.bottone.attenzione { background: var(--arancio); border-color: var(--arancio); color: #fff; }
.bottone:disabled { opacity: .6; cursor: wait; }

.scheda { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 16px; }
.griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.elenco { display: grid; gap: 8px; }

.riquadri { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 4px; }
.riquadro { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 14px 16px; }
.riquadro .valore { font-size: 28px; font-weight: 700; letter-spacing: -.5px; }
.riquadro .etichetta { color: var(--tenue); font-size: 13px; }
.riquadro.attenzione { border-color: var(--arancio); background: var(--arancio-chiaro); }

.etichetta-stato {
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--grigio-chiaro); color: var(--tenue);
}
.etichetta-stato.ok { background: var(--blu-chiaro); color: var(--blu); }
.etichetta-stato.attenzione { background: var(--arancio-chiaro); color: var(--arancio); }

.testa-scheda { display: flex; justify-content: space-between; align-items: start; gap: 8px; margin-bottom: 10px; }

.barra { height: 10px; background: var(--grigio-chiaro); border-radius: 999px; overflow: hidden; margin: 8px 0 4px; }
.barra > span { display: block; height: 100%; background: var(--blu); border-radius: 999px; }
/* Oltre l'80% la barra diventa arancione a righe: si capisce anche senza colori */
.barra.alta > span {
  background: repeating-linear-gradient(45deg, var(--arancio), var(--arancio) 6px, var(--giallo) 6px, var(--giallo) 9px);
}

.numeri { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-top: 8px; font-size: 14px; }
.numeri b { font-size: 16px; }

.riga-gpu {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--arancio-chiaro); border: 1px solid var(--arancio); border-radius: var(--raggio); padding: 12px 14px;
}

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { color: var(--tenue); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
.tabella-scorre { overflow-x: auto; padding: 4px 8px; }

.vuoto { color: var(--tenue); padding: 6px 0; }
.mini { font-size: 12.5px; color: var(--tenue); }
.app-accesa { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px dashed var(--linea); }

.grafico { display: flex; align-items: flex-end; gap: 2px; height: 36px; margin-top: 8px; }
.grafico span { flex: 1; background: var(--blu); opacity: .75; border-radius: 2px 2px 0 0; min-height: 1px; }

.entra { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.entra-box { width: 100%; max-width: 360px; display: grid; gap: 12px; }
.entra-box input { font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--linea); background: var(--carta); color: var(--inchiostro); }
.avviso { background: var(--arancio-chiaro); color: var(--arancio); padding: 8px 12px; border-radius: 10px; margin: 0; }
.ricordami { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.ricordami input { width: 18px; height: 18px; }

.marchio { color: inherit; text-decoration: none; }
.menu {
  max-width: 1200px; margin: 0 auto 4px; padding: 0 16px; display: flex; gap: 6px; overflow-x: auto;
}
.menu a {
  padding: 8px 14px; border-radius: 999px; text-decoration: none; color: var(--inchiostro);
  border: 1px solid var(--linea); background: var(--carta); white-space: nowrap; font-size: 14px;
}
.menu a[aria-current="page"] { background: var(--blu); border-color: var(--blu); color: #fff; }

/* Doppia barra: sopra il credito usato, sotto il tempo passato del mese.
   Il tempo è a puntini grigi-blu, così si distingue anche senza colori. */
.doppia { display: grid; gap: 6px; margin: 10px 0 4px; }
.doppia .riga { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tenue); }
.doppia .barra { margin: 0; }
.barra.tempo > span {
  background: repeating-linear-gradient(90deg, var(--tenue), var(--tenue) 4px, transparent 4px, transparent 6px);
}
.ritmo { font-size: 13px; margin: 6px 0 0; }
.ritmo.attenzione { color: var(--arancio); font-weight: 600; }
.indietro { display: inline-block; margin: 18px 0 0; }

.riquadro { color: inherit; text-decoration: none; }
.riquadro:hover, tr.cliccabile:hover { outline: 2px solid var(--blu-chiaro); }
tr.cliccabile { cursor: pointer; }
a.cifra { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
a.cifra:hover { color: var(--blu); }
.freccia { white-space: nowrap; color: var(--blu); }
.riga-dettaglio td { background: var(--fondo); }
.dettaglio { padding: 6px 4px; }
.dettaglio .numeri { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.azioni-voce { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.azioni-voce .bottone { text-decoration: none; display: inline-flex; align-items: center; }
.filtri .menu { padding: 0; margin: 10px 0 0; flex-wrap: wrap; }
section[id] { scroll-margin-top: 12px; }

.modulo-archivio { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.modulo-archivio input, .modulo-archivio select {
  font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--linea);
  background: var(--carta); color: var(--inchiostro); min-height: 40px;
}
.modulo-archivio input[type="search"] { flex: 1 1 240px; }
.modulo-archivio label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tenue); }
.paginatore { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.paginatore .bottone { min-width: 40px; padding: 6px 12px; }
/* Chi usa Modal: scelte del periodo, righe per progetto, colonne giorno per giorno */
.scelte { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.scelta {
  border: 1px solid var(--linea); background: var(--carta); color: var(--inchiostro);
  border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 14px; cursor: pointer; min-height: 36px;
}
.scelta[aria-pressed="true"] { background: var(--blu); border-color: var(--blu); color: #fff; font-weight: 600; }
.riquadro .valore.piccolo { font-size: 20px; line-height: 1.25; margin: 4px 0; }
.elenco-uso { display: grid; gap: 0; padding: 4px 16px; }
.uso-riga { padding: 14px 0; border-bottom: 1px solid var(--linea); display: grid; gap: 4px; }
.uso-riga:last-child { border-bottom: 0; }
.uso-testa { display: flex; justify-content: space-between; align-items: start; gap: 10px; flex-wrap: wrap; }
.uso-soldi { white-space: nowrap; font-variant-numeric: tabular-nums; }
.uso-soldi b { font-size: 17px; }
.pallino { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 7px; vertical-align: 0; }
.uso-riga .barra { margin: 4px 0; }
.uso-riga details summary { cursor: pointer; margin-top: 2px; }
.pile-testa, .pile-asse { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pile { display: flex; align-items: flex-end; gap: 3px; height: 180px; margin: 10px 0 6px; border-bottom: 1px solid var(--linea); }
.colonna { flex: 1; height: 100%; display: flex; flex-direction: column-reverse; gap: 1px; cursor: default; border-radius: 3px 3px 0 0; }
.colonna:hover, .colonna:focus { background: var(--grigio-chiaro); outline: none; }
.colonna span { display: block; width: 100%; min-height: 1px; }
.colonna span:last-child { border-radius: 3px 3px 0 0; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }
.riga-macchina { display: grid; grid-template-columns: minmax(120px, 180px) 1fr 70px; align-items: center; gap: 10px; font-size: 14px; }
.riga-macchina b { text-align: right; font-variant-numeric: tabular-nums; }
.riga-macchina .barra { margin: 6px 0; }
/* Pagina Claude: colonne con etichette, barre dei limiti come quelle di Claude */
.colonne { display: flex; align-items: flex-end; gap: 3px; height: 130px; margin: 6px 0 22px; }
.colonna { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; min-width: 0; }
.colonna span { display: block; background: var(--blu); border-radius: 3px 3px 0 0; min-height: 1px; }
.colonna:hover span { background: var(--arancio); }
.colonna i { position: absolute; bottom: -18px; left: 0; font-style: normal; font-size: 11px; color: var(--tenue); white-space: nowrap; }
.limite { margin: 4px 0 14px; }
.testa-limite { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; flex-wrap: wrap; }
.barra.neutra > span { background: var(--blu); }

/* grafici nel tempo */
.andamento { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 160px auto; column-gap: 8px; margin-top: 8px; }
.andamento svg { width: 100%; height: 160px; display: block; grid-column: 2; grid-row: 1; }
.andamento .tacche { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; text-align: right; font-variant-numeric: tabular-nums; }
.andamento .asse-x { grid-column: 2; display: flex; justify-content: space-between; margin-top: 4px; }
.andamento .griglia-linea { stroke: var(--linea); stroke-width: 1; }
.andamento .zona { fill: transparent; }
.andamento .zona:hover { fill: var(--blu); opacity: .08; }
.legenda i.tratteggio { background-image: repeating-linear-gradient(90deg, transparent 0 3px, var(--carta) 3px 5px); }
.riga-classifica { display: grid; grid-template-columns: minmax(120px, 35%) 1fr auto; gap: 10px; align-items: center;
  color: inherit; text-decoration: none; padding: 5px 0; font-size: 14px; }
.riga-classifica:hover span:first-child { text-decoration: underline; color: var(--blu); }
.riga-classifica .barra { margin: 0; }
.mostra-altre { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 12px; }

/* campi importanti di una richiesta, visibili senza aprirla */
.pagina-voce { margin-top: 6px; font-size: 14px; line-height: 1.3; }
.pagina-voce .link-piccolo { display: block; font-size: 12px; color: var(--blu); text-decoration: none; word-break: break-all; }
.pagina-voce .link-piccolo:hover { text-decoration: underline; }
.chips-voce { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; }
.chip-voce { font-size: 12px; background: var(--fondo); border: 1px solid var(--linea); border-radius: 999px; padding: 2px 9px; }
.chip-voce span { color: var(--tenue); }

/* grafici vivaci, con un po' di movimento alla prima apertura */
.andamento { position: relative; }
.andamento .punti-finali { grid-column: 2; grid-row: 1; position: relative; pointer-events: none; }
.punto-finale { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--colore); box-shadow: 0 0 0 3px var(--carta); pointer-events: auto; }
.punto-finale::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--colore);
  opacity: 0; animation: pulsa 2.4s ease-out infinite; }
@keyframes pulsa { 0% { transform: scale(.4); opacity: .8; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes disegna { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cresce { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sali { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.prima-volta .andamento svg { animation: disegna 1.3s cubic-bezier(.3,.7,.2,1) both; }
.prima-volta .punto-finale { animation: sali .4s 1.2s both; }
.prima-volta .barra span, .prima-volta .riga-classifica .barra span { transform-origin: left; animation: cresce 1s cubic-bezier(.3,.7,.2,1) both; }
.prima-volta .riquadro, .prima-volta .scheda { animation: sali .5s ease-out both; }
.prima-volta .riquadri .riquadro:nth-child(2) { animation-delay: .05s; } .prima-volta .riquadri .riquadro:nth-child(3) { animation-delay: .1s; }
.prima-volta .riquadri .riquadro:nth-child(4) { animation-delay: .15s; } .prima-volta .riquadri .riquadro:nth-child(5) { animation-delay: .2s; }
.prima-volta .riquadri .riquadro:nth-child(n+6) { animation-delay: .25s; }
.riga-classifica .barra span { background: linear-gradient(90deg, var(--c1), color-mix(in srgb, var(--c1) 55%, var(--c3))); }
#andamento .griglia > .scheda { border-top: 4px solid var(--accento, var(--c1)); }
#andamento .griglia > .scheda:nth-child(2) { --accento: var(--c2); }
#andamento .griglia > .scheda:nth-child(3) { --accento: var(--c5); }
#andamento .griglia > .scheda:nth-child(4) { --accento: var(--c3); }
@media (prefers-reduced-motion: reduce) {
  .prima-volta *, .punto-finale::after { animation: none !important; }
}
.dettaglio .link-piccolo { display: block; font-size: 12px; color: var(--blu); word-break: break-all; }
.colonna span.b {
  background: repeating-linear-gradient(45deg, var(--arancio), var(--arancio) 5px, var(--giallo) 5px, var(--giallo) 7px);
  border-radius: 3px 3px 0 0;
}
.colonna span.b + span { border-radius: 0; }
.legenda { display: flex; gap: 14px; align-items: center; font-size: 13px; color: var(--tenue); flex-wrap: wrap; }
.legenda .pallino { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: -8px; }
.pallino.a { background: var(--blu); }
.pallino.b { background: repeating-linear-gradient(45deg, var(--arancio), var(--arancio) 3px, var(--giallo) 3px, var(--giallo) 5px); }
.capitolo { font-size: 20px; margin-top: 40px; padding-top: 16px; border-top: 2px solid var(--linea); }
.variazione { font-weight: 600; }
.variazione.meglio { color: var(--blu); }
.variazione.peggio { color: var(--arancio); }
#andamento .griglia > .scheda:nth-child(5) { --accento: var(--c4); }

/* ——— Sistema grafico (proposta "Nuovo look del Pannello") ——— */
h1, h2, .capitolo, .riquadro .valore { font-family: var(--f-titolo); letter-spacing: -.015em; text-wrap: balance; }
h1 { font-weight: 800; }
.riquadro .valore { font-weight: 800; font-size: 32px; line-height: 1.15; }

/* Tutto ciò che si apre si solleva un poco al passaggio */
a.riquadro, a.scheda, .riga-classifica, tr.cliccabile, .colonna {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
a.riquadro:hover, a.scheda:hover { transform: translateY(-2px); box-shadow: var(--ombra); border-color: color-mix(in srgb, var(--c1) 45%, var(--linea)); outline: none; }
tr.cliccabile:hover { outline: none; background: var(--grigio-chiaro); }
a.riquadro:focus-visible, a.scheda:focus-visible, .riga-classifica:focus-visible { outline: 3px solid var(--c1); outline-offset: 2px; }

/* Colore fisso per sito: class="sito-<chiave>" imposta --sito; .pallino, .sito-chip e la scheda lo usano */
.sito-cateringroma { --sito: var(--c1); } .sito-eventspace { --sito: var(--c2); } .sito-guidalocation { --sito: var(--c3); }
.sito-guidaagenzie { --sito: var(--c4); } .sito-tabbble { --sito: var(--c5); } .sito-senzanotaio { --sito: var(--c6); }
[class*="sito-"] { --sito-colore: var(--sito, var(--altro)); }
.pallino[class*="sito-"] { background: var(--sito-colore); border-radius: 3px; }
.sito-chip { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 12px; padding: 1px 8px; border-radius: 6px;
  background: color-mix(in srgb, var(--sito-colore, var(--altro)) 14%, transparent); color: var(--inchiostro); text-decoration: none; }
.sito-chip::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--sito-colore, var(--altro)); }
.scheda[class*="sito-"] { border-top: 4px solid var(--sito-colore); }

/* Stati con icona e parola */
.etichetta-stato.urgente { background: var(--urgente-chiaro); color: var(--urgente); }
.etichetta-stato.attenzione { background: var(--attenzione-chiaro); color: var(--attenzione-scuro); }
.riquadro.attenzione { border-color: var(--attenzione-scuro); background: var(--attenzione-chiaro); }
.riquadro.urgente { border-color: var(--urgente); background: var(--urgente-chiaro); }

/* Avvisi e scadenze: <a class="avviso-card urgente|attenzione|ok"> con .icona .livello .cosa .quando */
.avvisi { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.avviso-card { --tono: var(--blu); --sf: var(--blu-chiaro);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: start; padding: 14px 16px 14px 20px;
  border-radius: var(--raggio); background: var(--carta); border: 1px solid var(--linea); position: relative; overflow: hidden;
  color: inherit; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.avviso-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--tono); }
.avviso-card:hover { transform: translateY(-2px); box-shadow: var(--ombra); }
.avviso-card.urgente { --tono: var(--urgente); --sf: var(--urgente-chiaro); }
.avviso-card.attenzione { --tono: var(--attenzione-scuro); --sf: var(--attenzione-chiaro); }
.avviso-card .icona { grid-row: span 3; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--sf); color: var(--tono); font: 800 18px var(--f-titolo); }
.avviso-card .livello { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tono); }
.avviso-card .cosa { font-weight: 600; line-height: 1.3; }
.avviso-card .quando { font-size: 13px; color: var(--tenue); }
.avviso-card.urgente .icona { animation: respira 2.4s ease-in-out infinite; }
@keyframes respira { 50% { transform: scale(1.08); } }

/* Barre e grafici: un velo di colore sotto le linee, punti finali evidenti */
.barra > span { background: linear-gradient(90deg, var(--blu), color-mix(in srgb, var(--blu) 70%, var(--c3))); }
.barra.alta > span { background: repeating-linear-gradient(45deg, var(--arancio), var(--arancio) 6px, var(--giallo) 6px, var(--giallo) 9px); }
.grafico span { background: linear-gradient(180deg, var(--c1), color-mix(in srgb, var(--c1) 55%, transparent)); opacity: 1; }
.pile .colonna span { transition: filter .15s ease; }
.pile .colonna:hover span { filter: brightness(1.12) saturate(1.1); }
@media (prefers-reduced-motion: reduce) {
  a.riquadro, a.scheda, .avviso-card { transition: none; }
  a.riquadro:hover, a.scheda:hover, .avviso-card:hover { transform: none; }
  .avviso-card.urgente .icona { animation: none; }
}

/* GEO */
.testo-robots { white-space: pre-wrap; font-size: 12px; max-height: 320px; overflow: auto; background: var(--sfondo, transparent); border: 1px solid var(--linea); border-radius: 8px; padding: 10px; }
.dettaglio h4 { margin: 18px 0 2px; }
.filtri-attivi { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
a.scelta { text-decoration: none; display: inline-block; margin-left: 4px; }
.riga-classifica .link-piccolo, td .link-piccolo { display: block; font-size: 12px; color: var(--blu); text-decoration: none; word-break: break-all; font-weight: 400; }
.freccia-percorso { color: var(--tenue); font-size: 18px; text-align: center; }

/* ---------- avvisi e scadenze ----------
   Livelli sempre con icona + parola: rosa scuro "!" = urgente, giallo scuro "⏳" = attenzione,
   grigio "i" = per sapere, blu "✓" = tutto bene. Mai rosso contro verde (stessa scelta della nuova grafica). */
:root {
  --av-urg: var(--urgente, #c2387a); --av-urg-sf: var(--urgente-chiaro, #fbe3ee);
  --av-att: var(--attenzione-scuro, #9a6600); --av-att-sf: var(--attenzione-chiaro, #fdf2d6);
}
@media (prefers-color-scheme: dark) {
  :root { --av-urg: var(--urgente, #ec6fa8); --av-urg-sf: var(--urgente-chiaro, #351726);
          --av-att: var(--attenzione-scuro, #f0b429); --av-att-sf: var(--attenzione-chiaro, #2e2511); }
}
.pillola {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; white-space: nowrap; border: 1px solid transparent;
}
.pillola b { font-size: 12px; line-height: 1; }
.pillola.urgente { background: var(--av-urg); color: #fff; }
.pillola.attenzione { background: var(--av-att-sf); color: var(--av-att); border-color: var(--av-att); }
.pillola.info { background: var(--grigio-chiaro); color: var(--tenue); }
.pillola.info b { font-style: italic; font-family: Georgia, serif; }

.fascia {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 4px 0 14px; padding: 14px 16px;
  border-radius: var(--raggio); border: 1px solid var(--linea); background: var(--carta); color: inherit; text-decoration: none;
}
.fascia.tutto-bene { background: var(--blu-chiaro); border-color: var(--blu); }
.fascia.tutto-bene .fascia-icona { background: var(--blu); }
.fascia.urgente { border: 2px solid var(--av-urg); background: var(--av-urg-sf); display: block; }
.fascia.attenzione { border-color: var(--av-att); background: var(--av-att-sf); display: block; }
.fascia.attenzione .fascia-icona { background: var(--av-att); }
.fascia-testa { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 16px; }
.fascia-testa .freccia { margin-left: auto; }
.fascia-icona {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--av-urg); color: #fff; font-weight: 800; flex: none;
}
.fascia > .freccia { margin-left: auto; }
.fascia .mini { margin: 10px 0 0; }

.avviso-riga, .scadenza { background: var(--carta); border: 1px solid var(--linea); border-radius: 12px; }
.avviso-riga.urgente { border-left: 6px solid var(--av-urg); }
.avviso-riga.attenzione { border-left: 6px solid var(--av-att); }
.avviso-riga.info { border-left: 6px solid var(--linea); }
.avviso-riga.nascosto { opacity: .6; }
.avviso-riga summary, .scadenza summary {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 14px; cursor: pointer; list-style: none;
  min-height: 44px;
}
.avviso-riga summary::-webkit-details-marker, .scadenza summary::-webkit-details-marker, .gruppo summary::-webkit-details-marker { display: none; }
.avviso-riga summary:hover, .scadenza summary:hover { background: var(--fondo); border-radius: 12px; }
.avviso-riga[open] .freccia { transform: rotate(90deg); }
.avviso-riga .freccia { margin-left: auto; transition: transform .15s; }
.avviso-titolo { font-weight: 600; }
.avviso-dove { flex-basis: 100%; margin-left: 2px; }
@media (min-width: 720px) { .avviso-dove { flex-basis: auto; } }
.avviso-corpo { padding: 0 14px 14px; border-top: 1px dashed var(--linea); }
.avviso-corpo p { margin: 10px 0 0; }
.gruppo-titolo { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; font-size: 15px; }
.gruppo-titolo:first-of-type { margin-top: 8px; }
.filtri-avvisi { padding: 0; margin: 0 0 4px; flex-wrap: wrap; }

.scadenza summary { flex-wrap: nowrap; }
.scadenza.urgente { border-left: 6px solid var(--av-urg); }
.scadenza.attenzione { border-left: 6px solid var(--av-att); }
.calendario {
  display: grid; place-items: center; width: 48px; flex: none; padding: 4px 0; border-radius: 8px;
  background: var(--blu-chiaro); color: var(--blu); font-size: 11.5px; text-transform: uppercase; line-height: 1.15;
}
.scadenza.urgente .calendario { background: var(--av-urg-sf); color: var(--av-urg); }
.scadenza.attenzione .calendario { background: var(--av-att-sf); color: var(--av-att); }
.calendario b { font-size: 19px; }
.scadenza-testo { display: grid; min-width: 0; flex: 1; }
.scadenza-quando { white-space: nowrap; font-size: 13.5px; text-align: right; }
@media (max-width: 560px) { .scadenza-quando .pillola { display: none; } }
.gruppo { margin-top: 14px; }
.gruppo > summary { cursor: pointer; list-style: none; }
.gruppo > summary h3 { display: inline; font-size: 15px; }
.gruppo > summary::before { content: "▸ "; color: var(--blu); }
.gruppo[open] > summary::before { content: "▾ "; }
.gruppo > .elenco { margin-top: 8px; }

/* linea del tempo dei prossimi 30 giorni */
.linea-tempo { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 14px 14px 8px; overflow-x: auto; }
.linea-tempo svg { display: block; min-width: 640px; width: 100%; height: 136px; }
.linea-tempo .binario { stroke: var(--linea); stroke-width: 3; stroke-linecap: round; }
.linea-tempo .tacca { stroke: var(--tenue); }
.linea-tempo .asse { font-size: 11px; fill: var(--tenue); }
.punto-tempo { cursor: pointer; --tono: var(--blu); }
.punto-tempo.urgente { --tono: var(--av-urg); }
.punto-tempo.attenzione { --tono: var(--av-att); }
.punto-tempo line { stroke: var(--tono); stroke-width: 1.5; }
.punto-tempo circle { fill: var(--tono); stroke: var(--carta); stroke-width: 3; }
.punto-tempo text { font-size: 12.5px; font-weight: 600; fill: var(--inchiostro); paint-order: stroke; stroke: var(--carta); stroke-width: 4px; stroke-linejoin: round; }
.punto-tempo:hover text, .punto-tempo:focus text { text-decoration: underline; }
.punto-tempo.urgente circle { animation: respira 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes respira { 50% { transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .punto-tempo.urgente circle { animation: none; } }

/* riquadri degli avvisi in cima alla panoramica (come nella nuova grafica) */
.carte-avvisi { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.carta-avviso {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: start; padding: 14px 16px;
  border-radius: var(--raggio); background: var(--carta); border: 1px solid var(--linea); position: relative;
  overflow: hidden; color: inherit; text-decoration: none; --tono: var(--blu); --sf: var(--blu-chiaro);
  transition: transform .18s ease, box-shadow .18s ease;
}
.carta-avviso::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--tono); }
.carta-avviso.urgente { --tono: var(--av-urg); --sf: var(--av-urg-sf); }
.carta-avviso.attenzione { --tono: var(--av-att); --sf: var(--av-att-sf); }
.carta-avviso:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -12px rgba(18,20,26,.25); }
.carta-avviso:focus-visible { outline: 3px solid var(--blu); outline-offset: 2px; }
.carta-avviso .icona {
  grid-row: span 3; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  font-weight: 800; font-size: 18px; background: var(--sf); color: var(--tono);
}
.carta-avviso.urgente .icona { animation: respira 2.4s ease-in-out infinite; }
.carta-avviso .livello { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tono); }
.carta-avviso .cosa { font-weight: 600; line-height: 1.3; }
.carta-avviso .quando { font-size: 13px; color: var(--tenue); }
#avvisi-in-cima h2 .mini { font-weight: 400; margin-left: 6px; }
@media (prefers-reduced-motion: reduce) { .carta-avviso.urgente .icona { animation: none; } .carta-avviso { transition: none; } }
.riquadro.urgente { border-color: var(--av-urg); background: var(--av-urg-sf); }

/* ---------- Analisi Google: colori vivaci, ciambelle, mappa delle ore ---------- */
.testa-analisi { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.titolo-g { margin: 0; font-size: 24px; background: linear-gradient(90deg, #2563eb, #a855f7 55%, #f97316); -webkit-background-clip: text; background-clip: text; color: transparent; }
.periodo-g .scelta { text-decoration: none; }
.riquadri-g { margin-top: 14px; }
.riquadro-g { position: relative; overflow: hidden; border-top: 0; }
.riquadro-g::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--accento), color-mix(in srgb, var(--accento) 40%, #fff)); }
.riquadro-g::after { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accento) 22%, transparent), transparent 70%); }
.riquadro-g .valore { color: var(--accento); }
.riquadro-g:hover { transform: translateY(-2px); box-shadow: 0 8px 22px -12px var(--accento); }
.riquadro-g { transition: transform .15s, box-shadow .15s; }
.scheda.accento { border-top: 4px solid var(--accento); }
.variazione { display: inline-block; font-weight: 700; font-size: 12px; border-radius: 999px; padding: 1px 8px; margin-top: 3px; white-space: nowrap; }
.variazione.meglio { background: var(--blu-chiaro); color: var(--blu); }
.variazione.peggio { background: var(--arancio-chiaro); color: var(--arancio); }
.variazione.neutra { background: var(--grigio-chiaro); color: var(--tenue); font-weight: 500; }
.griglia-g { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.griglia-g .scheda h3 { margin-bottom: 6px; }

.adesso-g { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 10px 14px; border-radius: var(--raggio);
  background: linear-gradient(90deg, var(--blu-chiaro), transparent); border: 1px solid var(--linea); font-size: 14.5px; }
.adesso-g b { font-size: 20px; color: var(--blu); }
.pallino-vivo { width: 12px; height: 12px; border-radius: 50%; background: #2563eb; position: relative; flex: none; }
.pallino-vivo::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #2563eb; animation: pulsa 1.8s ease-out infinite; }

.ciambella { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: center; }
.ciambella svg { width: 150px; height: 150px; }
.ciambella circle { transition: stroke-width .15s; cursor: default; }
.ciambella circle:hover { stroke-width: 22; }
.ciambella-tot { font-size: 15px; font-weight: 800; fill: var(--inchiostro); }
.ciambella-sotto { font-size: 8px; fill: var(--tenue); }
.legenda-ciambella { display: grid; gap: 5px; font-size: 13.5px; }
.voce-ciambella { display: grid; grid-template-columns: 12px 1fr auto 38px; gap: 8px; align-items: center; }
.voce-ciambella i { width: 12px; height: 12px; border-radius: 3px; }
.voce-ciambella b { font-variant-numeric: tabular-nums; }
.voce-ciambella .mini { text-align: right; }
@media (max-width: 480px) { .ciambella { grid-template-columns: 1fr; justify-items: center; } .legenda-ciambella { width: 100%; } }
@keyframes riempi { from { stroke-dasharray: 0 300; } }
@keyframes gira { from { transform: rotate(-60deg) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.prima-volta .ciambella circle { animation: riempi 1.1s cubic-bezier(.3,.7,.2,1) both; animation-delay: var(--ritardo, 0s); }
.prima-volta .ciambella svg { animation: gira .9s cubic-bezier(.3,.7,.2,1) both; }

.riga-classifica.g { grid-template-columns: minmax(120px, 42%) 1fr auto; }
.riga-classifica.g .link-piccolo { display: block; font-size: 11.5px; color: var(--tenue); }
.riga-classifica.g .barra { height: 12px; }
.riga-classifica.g .barra span { transform-origin: left; }
.prima-volta .riga-classifica.g .barra span { animation: cresce 1s cubic-bezier(.3,.7,.2,1) both; }
.mini-barra { display: block; height: 4px; margin: 3px 0 0 auto; width: 70px; }
.posizione { display: inline-block; min-width: 38px; text-align: center; border-radius: 999px; padding: 1px 8px; font-weight: 700; }
/* posizione su Google: pieno blu = in cima, a righe = lontano. Si legge anche dal numero. */
.posizione.alta { background: #2563eb; color: #fff; }
.posizione.media { background: var(--blu-chiaro); color: var(--blu); }
.posizione.bassa { background: repeating-linear-gradient(45deg, var(--arancio-chiaro), var(--arancio-chiaro) 4px, transparent 4px, transparent 7px); color: var(--arancio); }
.chip-voce { display: inline-block; text-decoration: none; color: var(--inchiostro); margin: 4px 4px 0 0; }
a.chip-voce:hover { border-color: var(--blu); color: var(--blu); }
.chip-voce.evento { background: var(--arancio-chiaro); border-color: transparent; color: var(--arancio); font-weight: 600; margin: 0; white-space: nowrap; }
td .link-piccolo { display: block; font-size: 12px; color: var(--blu); word-break: break-all; text-decoration: none; }
td .mini { display: block; }
.avviso-riga { color: var(--arancio); }
.scintilla { width: 110px; height: 30px; display: block; }
.prima-volta .scintilla polyline { stroke-dasharray: 400; animation: traccia 1.4s ease-out both; }
@keyframes traccia { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
.altre-g { margin-top: 10px; }
.altre-g summary, .scheda details summary { cursor: pointer; color: var(--blu); font-weight: 600; padding: 6px 0; }
.avviso-g { border-color: var(--arancio); background: var(--arancio-chiaro); margin-top: 14px; }
.avviso-g code, .avviso-g + * code { font-size: 12.5px; }

.mappa-ore { display: grid; gap: 3px; overflow-x: auto; }
.ora-riga { display: grid; grid-template-columns: 36px repeat(24, minmax(14px, 1fr)); gap: 3px; align-items: center; }
.ora-riga i { display: block; height: 20px; border-radius: 4px;
  background: color-mix(in srgb, #2563eb calc(var(--forza) * 100%), var(--grigio-chiaro)); }
.ora-riga i:hover { outline: 2px solid #f97316; }
.ora-riga.asse span { text-align: left; }
.prima-volta .ora-riga i { animation: sali .5s ease-out both; }
.tasso { display: block; font-weight: 500; text-align: right; white-space: nowrap; }

/* dettaglio di una voce: gruppi con etichetta sopra e valore sotto, ben appaiati */
.dettaglio { padding: 8px 4px; }
.gruppo-dettaglio + .gruppo-dettaglio { margin-top: 14px; }
.gruppo-dettaglio h4 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); }
.gruppo-dettaglio dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.gruppo-dettaglio .campo { background: var(--carta); border: 1px solid var(--linea); border-radius: 10px; padding: 8px 12px; min-width: 0; }
.gruppo-dettaglio dt { font-size: 12px; color: var(--tenue); margin: 0 0 2px; }
.gruppo-dettaglio dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.gruppo-dettaglio dd .link-piccolo { font-weight: 400; }
.filtro-fonte { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 0; }
.filtro-fonte a {
  padding: 7px 14px; border-radius: 999px; text-decoration: none; color: var(--inchiostro);
  border: 1px solid var(--linea); background: var(--carta); font-size: 14px;
}
.filtro-fonte a[aria-current="page"] { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--carta); }
.colonna span.b { min-height: 0; }

/* Menu a due livelli: gruppi in alto, pagine del gruppo sotto. Sul telefono scorrono di lato. */
.menu { scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.menu::-webkit-scrollbar { display: none; }
.menu-gruppi a { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.menu .conta:empty { display: none; }
.menu .conta { min-width: 20px; padding: 0 6px; border-radius: 999px; font-size: 12px; line-height: 20px; text-align: center;
  background: var(--attenzione-chiaro); color: var(--attenzione-scuro); font-weight: 700; }
.menu .conta.urgente { background: var(--urgente); color: #fff; }
.menu a[aria-current="page"] .conta { background: rgba(255,255,255,.25); color: #fff; }
.sottomenu { margin-top: 4px; margin-bottom: 8px; gap: 2px; align-items: center; border-bottom: 1px solid var(--linea); padding-bottom: 0; }
.sottomenu a { border: 0; background: none; border-radius: 0; padding: 10px 12px; color: var(--tenue); font-size: 14px;
  border-bottom: 3px solid transparent; margin-bottom: -1px; }
.sottomenu a:hover { color: var(--inchiostro); }
.sottomenu a[aria-current="page"], .sottomenu a.dentro { background: none; color: var(--inchiostro); font-weight: 600; border-bottom-color: var(--blu); }
.sottomenu a.dentro { color: var(--blu); }
.vai-sito { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 4px 0 6px 12px; font-size: 13px; color: var(--tenue); white-space: nowrap; }
.vai-sito select { font: inherit; font-size: 14px; color: var(--inchiostro); background: var(--carta); border: 1px solid var(--linea); border-radius: 10px; padding: 6px 10px; min-height: 36px; }
@media (max-width: 640px) {
  .menu { margin-left: 0; margin-right: 0; }
  .menu-gruppi a { padding: 7px 12px; font-size: 13.5px; }
  .vai-sito { margin-left: 0; }
}

/* Briciole: dove sei, e ogni livello sopra è cliccabile. pannello.js aggiunge i livelli più fondi (pagina, richiesta…) */
.briciole { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--tenue); margin: 6px 0 2px; min-width: 0; }
.briciole a { color: var(--tenue); text-decoration: none; padding: 2px 0; }
.briciole a:hover { color: var(--blu); text-decoration: underline; }
.briciole [aria-current="page"] { color: var(--inchiostro); font-weight: 600; overflow-wrap: anywhere; }
.briciole:has(> :only-child) { display: none; }

/* Terzo livello: le pagine di un sito (Riepilogo, Richieste, Analisi…), con il colore del sito */
.schede-sito { gap: 6px; margin-top: 2px; margin-bottom: 6px; }
.schede-sito a { font-size: 13.5px; padding: 6px 12px; }
.schede-sito a[aria-current="page"] { background: var(--sito-colore, var(--blu)); border-color: var(--sito-colore, var(--blu)); }
.schede-sito.sito-guidaagenzie a[aria-current="page"] { color: #12141a; }

/* ---------- abbonamenti e pagamenti ---------- */
.griglia.due { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.griglia.due h3 { margin-bottom: 10px; }
.problema-abb { text-decoration: none; color: inherit; }
.problema-abb:hover { outline: 2px solid var(--urgente); }
.tabella-abb td { vertical-align: top; }
.tabella-abb tr.inattivo { opacity: .62; }
.tabella-abb tr.problema td:first-child { box-shadow: inset 4px 0 0 var(--urgente); }
.gruppo-titolo .pallino { vertical-align: 0; }
.colonne-mesi { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(44px, 1fr); gap: 6px; align-items: end; overflow-x: auto; padding-bottom: 4px; }
.colonna-mese { display: grid; grid-template-rows: auto 120px auto; justify-items: center; gap: 4px; color: inherit; text-decoration: none; font-size: 12.5px; }
.colonna-mese b { font-size: 12.5px; white-space: nowrap; }
.colonna-mese .barra-v { width: 70%; height: 120px; display: flex; align-items: flex-end; background: var(--grigio-chiaro); border-radius: 6px; overflow: hidden; }
.colonna-mese .barra-v span { display: block; width: 100%; background: var(--c1); border-radius: 6px 6px 0 0; }
.colonna-mese:hover .barra-v span { background: var(--blu); }
.colonna-mese:hover b { text-decoration: underline; }
.pagamenti .colonna-mese.fallito .barra-v span { background: repeating-linear-gradient(45deg, var(--urgente), var(--urgente) 4px, var(--urgente-chiaro) 4px, var(--urgente-chiaro) 7px); }
.pagamenti .colonna-mese.fallito b { color: var(--urgente); }
.pagamenti .colonna-mese.rimborso .barra-v span { background: var(--altro); }
.quadratino { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; background: var(--c1); }
.quadratino.fallito { background: repeating-linear-gradient(45deg, var(--urgente), var(--urgente) 3px, var(--urgente-chiaro) 3px, var(--urgente-chiaro) 5px); }
.quadratino.rimborso { background: var(--altro); }
.mese-abb { margin-top: 8px; }
.riga-mese { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--linea); border-radius: 10px; background: var(--carta); color: inherit; text-decoration: none; }
.riga-mese:hover { border-color: var(--blu); }
.testa-abb .testa-riga { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.testa-abb h2 { margin: 0; font-size: 22px; }
.testa-abb .fascia { margin-top: 10px; }
.dettaglio-abb { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.prove { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.mesi-elenco { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 4px 16px; align-items: start; margin-top: 10px; }
.mesi-elenco .mese-abb[open] { grid-column: 1 / -1; }
.mesi-elenco .mese-abb h3 { font-size: 14.5px; }
.colonne-mesi.pagamenti { grid-auto-columns: minmax(44px, 72px); justify-content: start; }
/* sul telefono ogni abbonamento diventa una piccola scheda */
@media (max-width: 640px) {
  .tabella-abb thead { display: none; }
  .tabella-abb, .tabella-abb tbody { display: block; }
  .tabella-abb tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 4px; border-bottom: 1px solid var(--linea); }
  .tabella-abb td { display: block; border: 0; padding: 0; }
  .tabella-abb td:first-child { grid-column: 1 / -1; }
  .tabella-abb td:nth-child(3) { display: none; }
  .tabella-abb tr.problema td:first-child { box-shadow: none; }
  .tabella-abb tr.problema { box-shadow: inset 4px 0 0 var(--urgente); padding-left: 10px; }
}
.problema-abb { padding: 10px 14px; margin: 0; }
.problema-abb .fascia-testa { margin-bottom: 4px; font-size: 15px; }
.problema-abb > span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; }
/* Server: quanto occupa ogni progetto */
.barra.fine { height: 6px; margin: 4px 0 2px; min-width: 70px; }
.testata-ordina {
  font: inherit; font-weight: 600; color: inherit; background: none; border: 0; padding: 4px 0; cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.testata-ordina[aria-pressed="true"] { color: var(--blu); text-decoration: underline solid; }
.tabella-progetti td.n { min-width: 96px; }
.tabella-progetti .freccia { color: var(--blu); white-space: nowrap; }
.riga-dettaglio h4 { margin: 16px 0 6px; font-size: 15px; }
details.scheda > summary { cursor: pointer; padding: 4px 0; }

/* Le sottopagine di un sito come schede (Richieste, Candidature, Recensioni…), ognuna col suo numero */
.elenchi-sito { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.elenco-sito { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--carta); border: 1px solid var(--linea);
  border-left: 6px solid var(--accento, var(--blu)); text-decoration: none; color: var(--inchiostro); transition: transform .15s, box-shadow .15s; }
.elenco-sito:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15, 23, 42, .08); }
.elenco-sito b { font-size: 28px; line-height: 1.1; }
/* Una voce da sola: sfoglia alla più recente / più vecchia */
.sfoglia-voci { display: flex; justify-content: space-between; gap: 10px; margin: 6px 0 4px; flex-wrap: wrap; }

/* Pubblicità e Instagram */
.pillola-fonte { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; margin-right: 4px;
  color: var(--colore); background: color-mix(in srgb, var(--colore) 14%, transparent); border: 1px solid color-mix(in srgb, var(--colore) 40%, transparent); }
.dettaglio-campagna { display: grid; gap: 10px; }
.griglia-numeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.post-ig { display: flex; gap: 10px; align-items: center; min-width: 240px; }
.post-ig img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; flex: none; background: var(--grigio-chiaro); }

/* Segretaria: i passi da fare, numerati */
ol.passi { margin: 0.4rem 0 0.8rem; padding-left: 1.4rem; }
ol.passi li { margin: 0.2rem 0; }